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( render: titleRender, data: dataProp, fieldNames, + size = 'md', onSelect: onSelectProp, onSearch: onSearchProp, onKeyDown: onKeyDownProp, @@ -254,6 +255,7 @@ export const Select = forwardRef( 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/src/styles/select.scss b/packages/ui/select/src/styles/select.scss index 9d5010573..437ab0375 100644 --- a/packages/ui/select/src/styles/select.scss +++ b/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; 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 ( + <> +

Size

+
+

sm

+ +

lg

+