fix(container): add padding top to container children when not title

Yoctol · Apr 12, 2021 · 4fe050a · 4fe050a
1 parent 76c1cff
commit 4fe050a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/src/Container/Container.tsx b/src/Container/Container.tsx
@@ -30,10 +30,6 @@ interface ContainerTitleProps {
 }
 
 const ContainerTitle: FC<ContainerTitleProps> = ({ title, subTitle }) => {
-  if (!title && !subTitle) {
-    return null;
-  }
-
   return (
     <Box pt="24px" px="32px">
       {title && <Heading.H4 mb="8px">{title}</Heading.H4>}
@@ -50,14 +46,21 @@ const ContainerTitle: FC<ContainerTitleProps> = ({ title, subTitle }) => {
   );
 };
 
-const ContainerChildren: FC = ({ children }) => {
+interface ContainerChildrenProps {
+  hasTitle: boolean;
+}
+
+const ContainerChildren: FC<ContainerChildrenProps> = ({
+  hasTitle,
+  children,
+}) => {
   const hasChildrenTable = Array.isArray(children)
     ? children.some(isElementTable)
     : isElementTable(children);
 
   if (!hasChildrenTable) {
     return (
-      <Box px="32px" pb="32px">
+      <Box px="32px" pb="32px" pt={hasTitle ? '0' : '24px'}>
         {children}
       </Box>
     );
@@ -96,10 +99,12 @@ export type ContainerProps = Omit<BoxProps, 'color'> & ContainerTitleProps;
 const Container: FC<ContainerProps> & {
   Section: typeof Section;
 } = ({ title, subTitle, children, ...props }) => {
+  const hasTitle = Boolean(title || subTitle);
+
   return (
     <StyledContainer {...props}>
-      <ContainerTitle title={title} subTitle={subTitle} />
-      <ContainerChildren>{children}</ContainerChildren>
+      {hasTitle && <ContainerTitle title={title} subTitle={subTitle} />}
+      <ContainerChildren hasTitle={hasTitle}>{children}</ContainerChildren>
     </StyledContainer>
   );
 };

diff --git a/src/Container/__tests__/__snapshots__/Container.spec.tsx.snap b/src/Container/__tests__/__snapshots__/Container.spec.tsx.snap
@@ -13,6 +13,7 @@ exports[`Container should render correctly 1`] = `
   padding-left: 32px;
   padding-right: 32px;
   padding-bottom: 32px;
+  padding-top: 0rem;
 }
 
 .c1 {

diff --git a/website/docs/Container.md b/website/docs/Container.md
@@ -43,6 +43,14 @@ import { Container, Box } from 'tailor-ui';
 </Box>
 ```
 
+### Without title
+
+```jsx live
+<Box p="24px" bg="surface2">
+  <Container>The content of container</Container>
+</Box>
+```
+
 ### With Table
 
 ```jsx live
@@ -82,9 +90,10 @@ import { Container, Box } from 'tailor-ui';
 
 ### Container
 
-| Property | Description | Type        | Default |
-| -------- | ----------- | ----------- | ------- |
-| `title`  |             | `ReactNode` |         |
+| Property   | Description | Type        | Default |
+| ---------- | ----------- | ----------- | ------- |
+| `title`    |             | `ReactNode` |         |
+| `subTitle` |             | `ReactNode` |         |
 
 ### Container.Section