feat(select): add size api

.changeset/dirty-snails-listen.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/select": minor
+---
+
+feat: add size api

.changeset/fast-beers-film.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Select feat: add size api

packages/ui/select/src/Select.tsx

@@ -29,7 +29,7 @@ import { useData, useFlattenData } from './hooks'
 import { SelectOption } from './SelectOption'
 import { SelectOptionGroup } from './SelectOptionGroup'
 import { uniqBy } from '@hi-ui/array-utils'
-import { HiBaseAppearanceEnum, useLocaleContext } from '@hi-ui/core'
+import { HiBaseAppearanceEnum, HiBaseSizeEnum, useLocaleContext } from '@hi-ui/core'
 import { callAllFuncs } from '@hi-ui/func-utils'
 import { mockDefaultHandlers } from '@hi-ui/dom-utils'
 
@@ -71,6 +71,7 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
       render: titleRender,
       data: dataProp,
       fieldNames,
+      size = 'md',
       onSelect: onSelectProp,
       onSearch: onSearchProp,
       onKeyDown: onKeyDownProp,
@@ -254,6 +255,7 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
               onChange={(value, item) => {
                 tryChangeValue(value, item.raw)
               }}
+              size={size}
               data={mergedData}
               invalid={invalid}
               appearance={appearance}
@@ -363,6 +365,10 @@ export interface SelectProps
    * 搜索时触发
    */
   onSearch?: (keyword: string) => void
+  /**
+   * 设置大小
+   */
+  size?: HiBaseSizeEnum
 }
 
 ;(Select as any).HiName = 'Select'

packages/ui/select/src/styles/select.scss

@@ -3,9 +3,8 @@
 $prefix: '#{$component-prefix}-select' !default;
 
 .#{$prefix}-option {
-  // padding: 0 use-spacing(4);
-  margin-top: use-spacing(2);
-  margin-bottom: use-spacing(2);
+  margin-top: use-spacing(1);
+  margin-bottom: use-spacing(1);
   box-sizing: border-box;
   width: 100%;
   display: flex;
@@ -28,7 +27,7 @@ $prefix: '#{$component-prefix}-select' !default;
     display: inline-block;
     box-sizing: border-box;
     width: 100%;
-    padding: use-spacing(3);
+    padding: use-spacing(2);
     font-size: inherit;
     font-weight: inherit;
     color: inherit;

packages/ui/select/stories/index.stories.tsx

@@ -6,6 +6,7 @@ export * from './controlled.stories'
 export * from './uncontrolled.stories'
 export * from './clearable.stories'
 export * from './appearance.stories'
+export * from './size.stories'
 export * from './disabled.stories'
 export * from './group.stories'
 export * from './search.stories'

packages/ui/select/stories/size.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import Select from '../src'
+
+/**
+ * @title 不同尺寸
+ */
+export const Size = () => {
+  const [data] = React.useState([
+    { title: '电视', id: '3', disabled: true },
+    { title: '手机', id: '2' },
+    { title: '笔记本', id: '4', disabled: true },
+    {
+      title: '生活周边超长文案展示超长文案展示',
+      id: '5',
+    },
+    { title: '办公', id: '6' },
+    { title: '生活周边7', id: '7' },
+    { title: '办公8', id: '8' },
+  ])
+
+  return (
+    <>
+      <h1>Size</h1>
+      <div className="select-size__wrap">
+        <h2>sm</h2>
+        <Select style={{ width: 240 }} size="sm" clearable={false} data={data} />
+        <h2>md</h2>
+        <Select style={{ width: 240 }} size="md" clearable={false} data={data} />
+        <h2>lg</h2>
+        <Select style={{ width: 240 }} size="lg" clearable={false} data={data} />
+      </div>
+    </>
+  )
+}