From b3b36813a6968c5c96c39d1100935372e3aa5b4d Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Wed, 20 Sep 2023 15:53:06 +0800
Subject: [PATCH] feat(select): add size api

---
 .changeset/dirty-snails-listen.md            |  5 +++
 .changeset/fast-beers-film.md                |  5 +++
 packages/ui/select/src/Select.tsx            |  8 ++++-
 packages/ui/select/stories/index.stories.tsx |  1 +
 packages/ui/select/stories/size.stories.tsx  | 34 ++++++++++++++++++++
 5 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/dirty-snails-listen.md
 create mode 100644 .changeset/fast-beers-film.md
 create mode 100644 packages/ui/select/stories/size.stories.tsx

diff --git a/.changeset/dirty-snails-listen.md b/.changeset/dirty-snails-listen.md
new file mode 100644
index 000000000..edf5d2be4
--- /dev/null
+++ b/.changeset/dirty-snails-listen.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/select": minor
+---
+
+feat: add size api
diff --git a/.changeset/fast-beers-film.md b/.changeset/fast-beers-film.md
new file mode 100644
index 000000000..1c01bd850
--- /dev/null
+++ b/.changeset/fast-beers-film.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Select feat: add size api
diff --git a/packages/ui/select/src/Select.tsx b/packages/ui/select/src/Select.tsx
index 699a56faf..ebe34d8d7 100644
--- a/packages/ui/select/src/Select.tsx
+++ b/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'
diff --git a/packages/ui/select/stories/index.stories.tsx b/packages/ui/select/stories/index.stories.tsx
index ee7a5e9f0..fbe4f5d8e 100644
--- a/packages/ui/select/stories/index.stories.tsx
+++ b/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'
diff --git a/packages/ui/select/stories/size.stories.tsx b/packages/ui/select/stories/size.stories.tsx
new file mode 100644
index 000000000..f6714d253
--- /dev/null
+++ b/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>
+    </>
+  )
+}