feat(check-select): add size api

XiaoMi · Sep 20, 2023 · 03ecca7 · 03ecca7
1 parent 3e105a5
commit 03ecca7
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 0 deletions.
diff --git a/.changeset/funny-waves-drum.md b/.changeset/funny-waves-drum.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/check-select": minor
+---
+
+feat: add size api
diff --git a/.changeset/ninety-seals-hammer.md b/.changeset/ninety-seals-hammer.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+CheckSelect feat: add size api
diff --git a/packages/ui/check-select/src/CheckSelect.tsx b/packages/ui/check-select/src/CheckSelect.tsx
@@ -74,6 +74,7 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
       fieldNames = DEFAULT_FIELD_NAMES,
       customRender,
       tagInputProps,
+      size = 'md',
       onKeyDown: onKeyDownProp,
       ...rest
     },
@@ -298,6 +299,7 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
             ) : (
               <TagInputMock
                 {...tagInputProps}
+                size={size}
                 clearable={clearable}
                 placeholder={placeholder}
                 // @ts-ignore

diff --git a/packages/ui/check-select/stories/index.stories.tsx b/packages/ui/check-select/stories/index.stories.tsx
@@ -7,6 +7,7 @@ export * from './uncontrolled.stories'
 export * from './clearable.stories'
 export * from './tag-input-wrap.stories'
 export * from './appearance.stories'
+export * from './size.stories'
 export * from './disabled.stories'
 export * from './group.stories'
 export * from './check-all.stories'

diff --git a/packages/ui/check-select/stories/size.stories.tsx b/packages/ui/check-select/stories/size.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import CheckSelect from '../src'
+
+/**
+ * @title 不同尺寸
+ */
+export const Size = () => {
+  const [data] = React.useState([
+    { title: '手机', id: '2' },
+    { title: '小米2', id: '2-1' },
+    { title: '小米3', id: '2-2' },
+    { title: '小米4', id: '2-3' },
+    { title: '小米5', id: '2-4' },
+    { title: '电脑', id: '3' },
+    { title: '笔记本', id: '4' },
+    {
+      title: '生活周边超长文案展示超长文案展示超长文案展示超长文案展示超长文案展示',
+      id: '5',
+    },
+    { title: '其它', id: '6' },
+  ])
+
+  return (
+    <>
+      <h1>Size</h1>
+      <div className="check-select-size__wrap">
+        <h2>sm</h2>
+        <CheckSelect
+          style={{ width: 240 }}
+          size="sm"
+          placeholder="请选择"
+          searchable
+          clearable
+          data={data}
+        />
+        <h2>md</h2>
+        <CheckSelect
+          style={{ width: 240 }}
+          size="md"
+          placeholder="请选择"
+          searchable
+          clearable
+          data={data}
+        />
+        <h2>lg</h2>
+        <CheckSelect
+          style={{ width: 240 }}
+          size="lg"
+          placeholder="请选择"
+          searchable
+          clearable
+          data={data}
+        />
+      </div>
+    </>
+  )
+}