fix(list): fix list item spacing

affects: @gio-design/components, website ISSUES CLOSED: growingio#584
berber1016 · Dec 9, 2020 · 97400f7 · 97400f7
1 parent 3f32cfa
commit 97400f7
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 45 deletions.
diff --git a/packages/components/src/components/list/list.tsx b/packages/components/src/components/list/list.tsx
@@ -17,7 +17,7 @@ class SelectList extends React.Component<SelectListProps & ConfigConsumerProps>
 
   public _cache = new CellMeasurerCache({
     fixedWidth: true,
-    defaultHeight: 40,
+    defaultHeight: 44,
   });
 
   public constructor(props: SelectListProps & ConfigConsumerProps) {
@@ -40,7 +40,7 @@ class SelectList extends React.Component<SelectListProps & ConfigConsumerProps>
             value={value}
             width={width}
             height={400}
-            style={{ height: height || '100%', overflow: 'auto' }}
+            style={{ height: height || '100%', overflow: 'auto', marginBottom: '-4px' }}
             rowCount={options.length}
             rowHeight={typeof rowHeight === 'function' ? getRowHeight : this._cache.rowHeight}
             deferredMeasurementCache={this._cache}
@@ -103,37 +103,36 @@ class SelectList extends React.Component<SelectListProps & ConfigConsumerProps>
 
     return (
       <CellMeasurer key={key} cache={this._cache} parent={parent} columnIndex={0} rowIndex={index}>
-        <div style={{ ...style, height: (style.height as number) - 4 }} className="row">
-          {isGroup ? (
-            <Group
-              key={option.label}
-              name={option.label}
-              option={option}
-              icon={groupIcon}
-              isSelected={this.getSelected(option)}
-              isMultiple={!!isMultiple}
-              labelRenderer={labelRenderer}
-            />
-          ) : (
-            <SelectOption
-              key={key}
-              style={{}}
-              option={option}
-              title={!labelRenderer ? label : undefined}
-              isSelected={this.getSelected(option)}
-              isMultiple={!!isMultiple}
-              allowDuplicate={allowDuplicate}
-              onSelect={this.handleSelect}
-              onClick={this.handleClick}
-              disabled={disabled}
-              hasGroupIcon={!!groupIcon}
-              getPopupContainer={getPopupContainer}
-              placement={placement}
-            >
-              {label}
-            </SelectOption>
-          )}
-        </div>
+        {isGroup ? (
+          <Group
+            key={option.label}
+            name={option.label}
+            option={option}
+            style={{ ...style, height: (style.height as number) - 4, paddingTop: index !== 0 ? '16px' : '0px' }}
+            icon={groupIcon}
+            isSelected={this.getSelected(option)}
+            isMultiple={!!isMultiple}
+            labelRenderer={labelRenderer}
+          />
+        ) : (
+          <SelectOption
+            key={key}
+            style={{ ...style, height: (style.height as number) - 4 }}
+            option={option}
+            title={!labelRenderer ? label : undefined}
+            isSelected={this.getSelected(option)}
+            isMultiple={!!isMultiple}
+            allowDuplicate={allowDuplicate}
+            onSelect={this.handleSelect}
+            onClick={this.handleClick}
+            disabled={disabled}
+            hasGroupIcon={!!groupIcon}
+            getPopupContainer={getPopupContainer}
+            placement={placement}
+          >
+            {label}
+          </SelectOption>
+        )}
       </CellMeasurer>
     );
   };

diff --git a/packages/components/src/components/list/style/base.less b/packages/components/src/components/list/style/base.less
@@ -41,7 +41,7 @@
   //   outline: none;
   // }
   padding: 16px 8px;
-  font-weight: @weight-font-regular;
+
   &-item {
     box-sizing: border-box;
     color: @link-font-color-normal;
@@ -53,15 +53,18 @@
       border-radius: 4px;
       cursor: pointer;
     }
+
     :active {
       background-color: @color-background-list-single-active;
     }
   }
 
   .@{select-prefix-cls}-core {
     position: relative;
+
     .@{select-prefix-cls}-list-wrapper {
       background-color: #fff;
+
       .@{select-prefix-cls}-list {
         &:focus {
           outline: none;
@@ -75,4 +78,4 @@
     height: 40px;
     padding: 8px 15px;
   }
-}
+}
diff --git a/packages/components/src/components/list/style/option.less b/packages/components/src/components/list/style/option.less
@@ -6,7 +6,7 @@
   overflow: hidden;
   color: @color-font-list-primary-normal;
   font-size: 14px;
-  line-height: 40px;
+  line-height: 44px;
   white-space: nowrap;
   text-overflow: ellipsis;
   border-radius: 5px;
@@ -81,7 +81,7 @@
   }
 
   &.group {
-    padding: 16px 15px 0 15px;
+    padding: 0 15px 0 15px;
     font-size: 12px;
     line-height: inherit;
   }

diff --git a/packages/components/src/components/select/Empty.tsx b/packages/components/src/components/select/Empty.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+function SvgComponent(): React.ReactElement {
+  return (
+    <svg width={60} height={61} viewBox="0 0 60 61">
+      <g fill="none" fillRule="evenodd">
+        <path d="M.588 36.882l10-21.764h38.824l10 21.764h-23.53a5.882 5.882 0 11-11.764 0H.588z" fill="#F7F8FC" />
+        <path
+          d="M.588 36.882h23.53a5.882 5.882 0 1011.764 0h23.53v20.53a3 3 0 01-3 3H3.588a3 3 0 01-3-3v-20.53z"
+          fill="#FFF"
+        />
+        <path
+          d="M47.436 15.618a3.497 3.497 0 013.18 2.038h0l8.564 18.64c.211.458.32.957.32 1.461h0V57c0 .966-.392 1.841-1.025 2.475A3.489 3.489 0 0156 60.5h0H4a3.489 3.489 0 01-2.475-1.025A3.489 3.489 0 01.5 57h0V37.757a3.5 3.5 0 01.32-1.46h0l8.564-18.64a3.497 3.497 0 013.18-2.04h0z"
+          stroke="#DCDFED"
+        />
+        <path
+          d="M.588 36.882h23.53a5.882 5.882 0 1011.764 0h23.53"
+          stroke="#DCDFED"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          stroke="#DCDFED"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M30 1v9.412M40.588 2.261l-4.706 8.151M19.412 2.261l4.706 8.151"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgComponent;
diff --git a/packages/components/src/components/select/Select.tsx b/packages/components/src/components/select/Select.tsx
@@ -11,12 +11,10 @@ import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 import Options from './Options';
 import { SelectProps, Option, MaybeArray, OptionProps } from './interface';
 import OptGroup from './OptGroup';
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const BoxFilled = require('../../assets/images/BoxFilled.svg');
+import BoxFilled from '../../assets/images/BoxFilled.svg';
 
 const defaultArrowComponent = <DownFilled />;
-const defaultListRowHeight = 40;
+const defaultListRowHeight = 44;
 
 const customOptionKeyPrefix = 'select_custom_option_';
 const customOptionKey = uniqueId(customOptionKeyPrefix);
@@ -440,7 +438,10 @@ const RenderSelect: React.ForwardRefRenderFunction<unknown, SelectProps> = (prop
           labelRenderer={labelRenderer(input, prefix)}
           onSelect={onListSelect}
           onDeselect={onListDeselect}
-          height={listHeight || (completeOptions.length + groupCount) * listRowHeight}
+          height={
+            listHeight ||
+            (completeOptions.length + groupCount) * listRowHeight - groupCount * 10 - (groupCount !== 0 ? 16 : 0)
+          }
           rowHeight={listRowHeight}
         />
       ) : (

diff --git a/packages/website/src/components/functional/list/demo/avatar.tsx b/packages/website/src/components/functional/list/demo/avatar.tsx
@@ -38,10 +38,10 @@ const optionWrapper = {
 
 const getRowHeight = (option: any) => {
   if (option.type === 'groupLabel') {
-    return 40;
+    return 34;
   }
 
-  return 56;
+  return 60;
 };
 
 const labelRenderer = (option: any, isGroup: boolean) => {

diff --git a/packages/website/src/components/functional/list/demo/group.tsx b/packages/website/src/components/functional/list/demo/group.tsx
@@ -19,7 +19,7 @@ const WrapperStyle = {
 export default () => (
   <>
     <div style={WrapperStyle}>
-      <List dataSource={options} height={264} width={170} />
+      <List dataSource={options} width={170} />
     </div>
     <div style={{ display: 'inline-block', width: 20 }} />
     <div style={WrapperStyle}>