fix(list): fix list item spacing (#598)

affects: @gio-design/components, website Co-authored-by: shiliqian <shiliqian@growingio.com> Co-authored-by: Jack <panjie@growingio.com>
growingio · Dec 9, 2020 · bbd4853 · bbd4853 · vercel · Dec 9, 2020
1 parent b5a05d3
commit bbd4853
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/packages/components/src/components/list/list.tsx b/packages/components/src/components/list/list.tsx
@@ -108,7 +108,7 @@ class SelectList extends React.Component<SelectListProps & ConfigConsumerProps>
             key={option.label}
             name={option.label}
             option={option}
-            style={{ ...style, height: (style.height as number) - 4, paddingTop: index !== 0 ? '16px' : '0px' }}
+            style={{ ...style, height: (style.height as number) - 4, paddingTop: index !== 0 ? '20px' : '0px' }}
             icon={groupIcon}
             isSelected={this.getSelected(option)}
             isMultiple={!!isMultiple}

diff --git a/packages/components/src/components/list/style/option.less b/packages/components/src/components/list/style/option.less
@@ -84,15 +84,25 @@
   &.group {
     padding: 0 15px 0 15px;
     font-size: 12px;
-    line-height: inherit;
+    line-height: 20.5px;
   }
 
   &.group:not(:nth-child(1)) {
-    border-top: 1px solid #ebedf5;
+    border-top: 0;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
 
+  &.group:not(:nth-child(1))::before {
+    position: absolute;
+    top: 4px;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: #ebedf5;
+    content: '';
+  }
+
   &.indented {
     padding-left: 43px;
   }

diff --git a/packages/website/src/components/functional/list/demo/avatar.tsx b/packages/website/src/components/functional/list/demo/avatar.tsx
@@ -34,16 +34,8 @@ const WrapperStyle = {
 const optionWrapper = {
   display: 'flex',
   alignItems: 'center',
+  height:'60px'
 };
-
-const getRowHeight = (option: any) => {
-  if (option.type === 'groupLabel') {
-    return 34;
-  }
-
-  return 60;
-};
-
 const labelRenderer = (option: any, isGroup: boolean) => {
   if (isGroup) {
     return option.name;
@@ -62,15 +54,14 @@ const labelRenderer = (option: any, isGroup: boolean) => {
 export default () => (
   <>
     <div style={WrapperStyle} className="gio-list_avatar">
-      <List dataSource={options} width={220} labelRenderer={labelRenderer} rowHeight={getRowHeight} />
+      <List dataSource={options} width={220} labelRenderer={labelRenderer} />
     </div>
     <div style={{ display: 'inline-block', width: 20 }} />
     <div style={WrapperStyle} className="gio-list_avatar">
       <List
         dataSource={options}
         width={220}
         labelRenderer={labelRenderer}
-        rowHeight={getRowHeight}
         isMultiple
         value={['a']}
       />