From 55d386758a2deae252d510c2c1dfd8b77dfe87f7 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Wed, 27 Jan 2021 15:31:10 +0800
Subject: [PATCH 1/3] feat: add 'topArea' to <List>

---
 packages/core/src/List.js                | 11 +++++++++++
 packages/core/src/styles/List.scss       |  4 ++++
 packages/core/src/styles/ListRow.scss    |  6 ++++++
 packages/core/src/styles/_variables.scss |  3 +++
 4 files changed, 24 insertions(+)

diff --git a/packages/core/src/List.js b/packages/core/src/List.js
index 00fc1843..c712cb90 100644
--- a/packages/core/src/List.js
+++ b/packages/core/src/List.js
@@ -14,6 +14,7 @@ const ROOT_BEM = icBEM(COMPONENT_NAME);
 export const BEM = {
   root: ROOT_BEM,
   body: ROOT_BEM.element('body'),
+  topArea: ROOT_BEM.element('top-area'),
 };
 
 const NORMAL = 'normal';
@@ -25,6 +26,7 @@ export const TYPE_SYMBOL = Symbol('List');
 
 function List({
   variant,
+  topArea,
   // <Section> props
   title,
   desc,
@@ -52,6 +54,12 @@ function List({
             verticalSpacing={spacing || !!title}
             {...otherProps}
           >
+            {topArea && (
+              <div className={BEM.topArea.toString()}>
+                {topArea}
+              </div>
+            )}
+
             <ul className={BEM.body.toString()}>
               {children}
             </ul>
@@ -64,6 +72,8 @@ function List({
 
 List.propTypes = {
   variant: PropTypes.oneOf(LIST_VARIANTS),
+  topArea: PropTypes.node,
+
   /** `<Section>` prop */
   title: PropTypes.node,
 
@@ -76,6 +86,7 @@ List.propTypes = {
 
 List.defaultProps = {
   variant: NORMAL,
+  topArea: undefined,
   title: undefined,
   desc: undefined,
   titleSize: undefined,
diff --git a/packages/core/src/styles/List.scss b/packages/core/src/styles/List.scss
index 6147bf15..a8028070 100644
--- a/packages/core/src/styles/List.scss
+++ b/packages/core/src/styles/List.scss
@@ -11,6 +11,10 @@ $component: #{$prefix}-list;
         margin: 0;
     }
 
+    &__top-area {
+        margin: rem($list-top-area-margin-top) rem($section-horizontal-padding) rem($list-top-area-margin-bottom);
+    }
+
     // --------------------
     //  Variants
     // --------------------
diff --git a/packages/core/src/styles/ListRow.scss b/packages/core/src/styles/ListRow.scss
index cca8e4f7..70b15aab 100644
--- a/packages/core/src/styles/ListRow.scss
+++ b/packages/core/src/styles/ListRow.scss
@@ -74,6 +74,12 @@ $component: #{$prefix}-list-row;
             }
         }
     }
+
+    .#{$prefix}-list__top-area + .#{$prefix}-list__body li:first-of-type &__body {
+        box-shadow:
+            inset 0 1px 0 $c-row-divider,
+            inset 0 -1px 0 $c-row-divider;
+    }
 }
 
 .#{$component} + .#{$component}__nested-list-wrapper {
diff --git a/packages/core/src/styles/_variables.scss b/packages/core/src/styles/_variables.scss
index 837dadd0..a1dfc43d 100644
--- a/packages/core/src/styles/_variables.scss
+++ b/packages/core/src/styles/_variables.scss
@@ -79,6 +79,9 @@ $section-horizontal-padding: 16px;
 $list-border-radius: 8px;
 $list-nested-indent: 16px;
 
+$list-top-area-margin-top: 8px;
+$list-top-area-margin-bottom: 16px;
+
 $list-row-padding-horizontal: 16px;
 $list-row-padding-vertical: 4px;
 

From 0bd1cfd0cf6fce52eb9b942146c150acde89f074 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Wed, 27 Jan 2021 15:31:26 +0800
Subject: [PATCH 2/3] doc: update Storybook for <List> with top area

---
 .../storybook/examples/core/List.stories.js   | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/storybook/examples/core/List.stories.js b/packages/storybook/examples/core/List.stories.js
index 6c396ee9..c0afe024 100644
--- a/packages/storybook/examples/core/List.stories.js
+++ b/packages/storybook/examples/core/List.stories.js
@@ -210,3 +210,28 @@ export function ListWithLongTextAndTitleRightButton() {
     </List>
   );
 }
+
+export function ListWithTopArea() {
+  const topAreaContent = (
+    <div>
+      Tips: this list has a top area for free content.
+    </div>
+  );
+
+  return (
+    <List
+      title="List with Top Area"
+      topArea={topAreaContent}
+    >
+      <ListRow>
+        <TextLabel basic="Hello World" />
+      </ListRow>
+      <ListRow>
+        <TextLabel basic="Row 2" />
+      </ListRow>
+      <ListRow>
+        <TextLabel basic="Row 3" />
+      </ListRow>
+    </List>
+  );
+}

From 3cf49aa20fbdc2bd4e7d18a95aa423e516838b01 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Wed, 27 Jan 2021 15:32:50 +0800
Subject: [PATCH 3/3] doc: update CHANGLOG about <List> topArea

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4cd96d8d..dc6750b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
     - `<TextLabel>`
     - `<ListRow>`
 - [Core] Add new icons: `takeout` (#283), `more` (#287)
+- [Core] Add `topArea` prop to `<List>`. (#311)
 
 ## [4.3.0]