From 4fe050aaf225619cdda1232c518e7a4543f0cdd5 Mon Sep 17 00:00:00 2001
From: jigsawye <jigsaw.ye@gmail.com>
Date: Mon, 12 Apr 2021 12:04:54 +0800
Subject: [PATCH] fix(container): add padding top to container children when
 not title

---
 src/Container/Container.tsx                   | 21 ++++++++++++-------
 .../__snapshots__/Container.spec.tsx.snap     |  1 +
 website/docs/Container.md                     | 15 ++++++++++---
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/Container/Container.tsx b/src/Container/Container.tsx
index c83d5b83..a481e3ff 100644
--- 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
index 182d73c9..abfcf395 100644
--- 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
index 29d13bc7..6164161c 100644
--- 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