diff --git a/.changeset/clever-rabbits-smoke.md b/.changeset/clever-rabbits-smoke.md new file mode 100644 index 000000000..ec99e6b32 --- /dev/null +++ b/.changeset/clever-rabbits-smoke.md @@ -0,0 +1,10 @@ +--- +"@hi-ui/cascader": patch +"@hi-ui/check-cascader": patch +"@hi-ui/check-select": patch +"@hi-ui/dropdown": patch +"@hi-ui/select": patch +"@hi-ui/upload": patch +--- + +fix: 修改下拉菜单高度为32px diff --git a/.changeset/fresh-garlics-attack.md b/.changeset/fresh-garlics-attack.md new file mode 100644 index 000000000..8550cdee0 --- /dev/null +++ b/.changeset/fresh-garlics-attack.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +Select CheckSelect Cascader CheckCascader Upload Dropdown fix: 修改下拉菜单高度为32px diff --git a/packages/ui/cascader/src/styles/cascader.scss b/packages/ui/cascader/src/styles/cascader.scss index 7b215ce9e..1470d9606 100644 --- a/packages/ui/cascader/src/styles/cascader.scss +++ b/packages/ui/cascader/src/styles/cascader.scss @@ -70,7 +70,7 @@ $prefix: '#{$component-prefix}-cascader' !default; min-width: 140px; max-height: 260px; overflow: auto; - padding: 4px 8px; + padding: 0 use-spacing(4); border-right: use-border-size('normal') use-color('gray', 200); &:last-of-type { @@ -81,16 +81,16 @@ $prefix: '#{$component-prefix}-cascader' !default; &-item { width: 100%; - padding: use-spacing(1) 0; + // padding: use-spacing(1) 0; position: relative; cursor: pointer; display: flex; } &-option { - padding: 0 use-spacing(4); + padding: use-spacing(1) use-spacing(3); box-sizing: border-box; - height: use-height-size(7); + height: use-height-size(8); width: 100%; display: flex; align-items: center; diff --git a/packages/ui/cascader/stories/select-change.stories.tsx b/packages/ui/cascader/stories/select-change.stories.tsx index 61acf6a11..1c466721a 100644 --- a/packages/ui/cascader/stories/select-change.stories.tsx +++ b/packages/ui/cascader/stories/select-change.stories.tsx @@ -45,7 +45,7 @@ export const SelectChange = () => { { id: '0-2', title: '0-2', - disabled: true, + disabled: false, children: [ { id: '0-2-0', diff --git a/packages/ui/check-cascader/src/styles/check-cascader.scss b/packages/ui/check-cascader/src/styles/check-cascader.scss index 423b11ed3..2675319a9 100644 --- a/packages/ui/check-cascader/src/styles/check-cascader.scss +++ b/packages/ui/check-cascader/src/styles/check-cascader.scss @@ -86,7 +86,7 @@ $prefix: '#{$component-prefix}-check-cascader' !default; &-item { width: 100%; - padding: use-spacing(1) 0; + // padding: use-spacing(1) 0; position: relative; cursor: pointer; display: flex; @@ -107,9 +107,9 @@ $prefix: '#{$component-prefix}-check-cascader' !default; } &-option { - padding: 0 use-spacing(4); + padding: use-spacing(1) use-spacing(3); box-sizing: border-box; - height: use-height-size(7); + height: use-height-size(8); width: 100%; display: flex; align-items: center; diff --git a/packages/ui/check-cascader/stories/select-change.stories.tsx b/packages/ui/check-cascader/stories/select-change.stories.tsx index eae003d39..915ac6f6b 100644 --- a/packages/ui/check-cascader/stories/select-change.stories.tsx +++ b/packages/ui/check-cascader/stories/select-change.stories.tsx @@ -49,7 +49,7 @@ export const SelectChange = () => { id: '0-2', title: '0-2', checkable: true, - disabled: true, + disabled: false, children: [ { id: '0-2-0', diff --git a/packages/ui/check-select/src/styles/check-select.scss b/packages/ui/check-select/src/styles/check-select.scss index f174bcad4..0ed0fcc65 100644 --- a/packages/ui/check-select/src/styles/check-select.scss +++ b/packages/ui/check-select/src/styles/check-select.scss @@ -4,8 +4,6 @@ $prefix: '#{$component-prefix}-check-select' !default; .#{$prefix} { &-option { - margin-top: use-spacing(1); - margin-bottom: use-spacing(1); box-sizing: border-box; width: 100%; display: flex; @@ -25,10 +23,11 @@ $prefix: '#{$component-prefix}-check-select' !default; } &__title { - display: inline-block; + display: flex; + align-items: center; box-sizing: border-box; width: 100%; - padding: use-spacing(2) use-spacing(3); + padding: use-spacing(3) use-spacing(3); font-size: inherit; text-size-adjust: none; font-weight: inherit; diff --git a/packages/ui/check-select/stories/appearance.stories.tsx b/packages/ui/check-select/stories/appearance.stories.tsx index af124ad8a..6b273dba3 100644 --- a/packages/ui/check-select/stories/appearance.stories.tsx +++ b/packages/ui/check-select/stories/appearance.stories.tsx @@ -8,9 +8,9 @@ import CheckSelect from '../src' export const Appearance = () => { const [value, setValue] = React.useState(['2']) const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/check-select/stories/clearable.stories.tsx b/packages/ui/check-select/stories/clearable.stories.tsx index ca8629c7f..9c9e3fc35 100644 --- a/packages/ui/check-select/stories/clearable.stories.tsx +++ b/packages/ui/check-select/stories/clearable.stories.tsx @@ -6,9 +6,9 @@ import CheckSelect from '../src' */ export const Clearable = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/check-select/stories/controlled.stories.tsx b/packages/ui/check-select/stories/controlled.stories.tsx index 187d75d67..f5279142b 100644 --- a/packages/ui/check-select/stories/controlled.stories.tsx +++ b/packages/ui/check-select/stories/controlled.stories.tsx @@ -8,9 +8,9 @@ import CheckSelect from '../src' export const Controlled = () => { const [value, setValue] = React.useState(['3']) const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/check-select/stories/display-render.stories.tsx b/packages/ui/check-select/stories/display-render.stories.tsx index ebf1002a1..ddbf4ce04 100644 --- a/packages/ui/check-select/stories/display-render.stories.tsx +++ b/packages/ui/check-select/stories/display-render.stories.tsx @@ -6,9 +6,9 @@ import CheckSelect from '../src' */ export const DisplayRender = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/check-select/stories/filter-options.stories.tsx b/packages/ui/check-select/stories/filter-options.stories.tsx index f0deb6083..54958274c 100644 --- a/packages/ui/check-select/stories/filter-options.stories.tsx +++ b/packages/ui/check-select/stories/filter-options.stories.tsx @@ -7,9 +7,9 @@ import CheckSelect from '../src' */ export const FilterOptions = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/check-select/stories/footer.stories.tsx b/packages/ui/check-select/stories/footer.stories.tsx index 97a104236..ec2d95169 100644 --- a/packages/ui/check-select/stories/footer.stories.tsx +++ b/packages/ui/check-select/stories/footer.stories.tsx @@ -8,9 +8,9 @@ import { PlusOutlined } from '@hi-ui/icons' */ export const Footer = () => { const [data, setData] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/check-select/stories/pinyin.stories.tsx b/packages/ui/check-select/stories/pinyin.stories.tsx index cc716bdaa..f80c22fab 100644 --- a/packages/ui/check-select/stories/pinyin.stories.tsx +++ b/packages/ui/check-select/stories/pinyin.stories.tsx @@ -9,9 +9,9 @@ import { match } from 'pinyin-pro' */ export const Pinyin = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/check-select/stories/tip.stories.tsx b/packages/ui/check-select/stories/tip.stories.tsx index a40d51647..125d52033 100644 --- a/packages/ui/check-select/stories/tip.stories.tsx +++ b/packages/ui/check-select/stories/tip.stories.tsx @@ -8,9 +8,9 @@ import Checkbox from '@hi-ui/checkbox' */ export const Tip = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边超级长文案展示生活周边超级长文案展示', id: '5' }, { title: '办公', id: '6' }, ]) @@ -32,7 +32,6 @@ export const Tip = () => { disabled={item.disabled} style={{ width: '100%', - display: 'inline-block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', diff --git a/packages/ui/check-select/stories/title-render.stories.tsx b/packages/ui/check-select/stories/title-render.stories.tsx index c9d267997..a37db86fe 100644 --- a/packages/ui/check-select/stories/title-render.stories.tsx +++ b/packages/ui/check-select/stories/title-render.stories.tsx @@ -8,9 +8,9 @@ import CheckSelect from '../src' */ export const TitleRender = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/check-select/stories/uncontrolled.stories.tsx b/packages/ui/check-select/stories/uncontrolled.stories.tsx index cd206c5d4..0fbc883aa 100644 --- a/packages/ui/check-select/stories/uncontrolled.stories.tsx +++ b/packages/ui/check-select/stories/uncontrolled.stories.tsx @@ -6,9 +6,9 @@ import CheckSelect from '../src' */ export const Uncontrolled = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/dropdown/src/Dropdown.tsx b/packages/ui/dropdown/src/Dropdown.tsx index 4193fa33a..892b7475e 100644 --- a/packages/ui/dropdown/src/Dropdown.tsx +++ b/packages/ui/dropdown/src/Dropdown.tsx @@ -30,7 +30,7 @@ export const Dropdown = forwardRef( onClick, onButtonClick, overlayClassName, - size = 'lg', + size = 'md', ...rest }, ref diff --git a/packages/ui/dropdown/stories/size.stories.tsx b/packages/ui/dropdown/stories/size.stories.tsx index 1b8b03e63..e6a99cd6a 100644 --- a/packages/ui/dropdown/stories/size.stories.tsx +++ b/packages/ui/dropdown/stories/size.stories.tsx @@ -220,7 +220,6 @@ export const Size = () => { { { { const [value, setValue] = React.useState('0') const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/select/stories/basic.stories.tsx b/packages/ui/select/stories/basic.stories.tsx index 8d6ce4b3e..45be356a1 100644 --- a/packages/ui/select/stories/basic.stories.tsx +++ b/packages/ui/select/stories/basic.stories.tsx @@ -7,9 +7,9 @@ import Select from '../src' */ export const Basic = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边超长文案展示超长文案展示', id: '5', diff --git a/packages/ui/select/stories/clearable.stories.tsx b/packages/ui/select/stories/clearable.stories.tsx index 91f94a8d6..66523fe85 100644 --- a/packages/ui/select/stories/clearable.stories.tsx +++ b/packages/ui/select/stories/clearable.stories.tsx @@ -6,9 +6,9 @@ import Select from '../src' */ export const Clearable = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/select/stories/controlled.stories.tsx b/packages/ui/select/stories/controlled.stories.tsx index 9ec6975fd..4a27882b9 100644 --- a/packages/ui/select/stories/controlled.stories.tsx +++ b/packages/ui/select/stories/controlled.stories.tsx @@ -7,9 +7,9 @@ import Select from '../src' export const Controlled = () => { const [value, setValue] = React.useState('3') const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/select/stories/display-render.stories.tsx b/packages/ui/select/stories/display-render.stories.tsx index 95ef3da65..bf57e5226 100644 --- a/packages/ui/select/stories/display-render.stories.tsx +++ b/packages/ui/select/stories/display-render.stories.tsx @@ -6,9 +6,9 @@ import Select from '../src' */ export const DisplayRender = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/select/stories/filter-options.stories.tsx b/packages/ui/select/stories/filter-options.stories.tsx index f3e2b204f..8eb6cd932 100644 --- a/packages/ui/select/stories/filter-options.stories.tsx +++ b/packages/ui/select/stories/filter-options.stories.tsx @@ -7,9 +7,9 @@ import Select from '../src' */ export const FilterOptions = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/select/stories/footer.stories.tsx b/packages/ui/select/stories/footer.stories.tsx index 8e3e2fd8f..09fe5a41e 100644 --- a/packages/ui/select/stories/footer.stories.tsx +++ b/packages/ui/select/stories/footer.stories.tsx @@ -8,9 +8,9 @@ import { PlusOutlined } from '@hi-ui/icons' */ export const Footer = () => { const [data, setData] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/select/stories/pinyin.stories.tsx b/packages/ui/select/stories/pinyin.stories.tsx index 17d374b62..fa6d86723 100644 --- a/packages/ui/select/stories/pinyin.stories.tsx +++ b/packages/ui/select/stories/pinyin.stories.tsx @@ -9,9 +9,9 @@ import { match } from 'pinyin-pro' */ export const Pinyin = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/select/stories/size.stories.tsx b/packages/ui/select/stories/size.stories.tsx index f6714d253..3338d931c 100644 --- a/packages/ui/select/stories/size.stories.tsx +++ b/packages/ui/select/stories/size.stories.tsx @@ -6,9 +6,9 @@ import Select from '../src' */ export const Size = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边超长文案展示超长文案展示', id: '5', diff --git a/packages/ui/select/stories/tip.stories.tsx b/packages/ui/select/stories/tip.stories.tsx index da491c3c8..83e2d05d9 100644 --- a/packages/ui/select/stories/tip.stories.tsx +++ b/packages/ui/select/stories/tip.stories.tsx @@ -7,9 +7,9 @@ import Tooltip from '@hi-ui/tooltip' */ export const Tip = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边超级长文案展示生活周边超级长文案展示', id: '5' }, { title: '办公', id: '6' }, ]) @@ -33,6 +33,7 @@ export const Tip = () => { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', + verticalAlign: 'middle', }} > {item.title} diff --git a/packages/ui/select/stories/title-render.stories.tsx b/packages/ui/select/stories/title-render.stories.tsx index 2a7fb61aa..fb6059281 100644 --- a/packages/ui/select/stories/title-render.stories.tsx +++ b/packages/ui/select/stories/title-render.stories.tsx @@ -7,9 +7,9 @@ import Select from '../src' */ export const TitleRender = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/select/stories/uncontrolled.stories.tsx b/packages/ui/select/stories/uncontrolled.stories.tsx index d31e69c38..4173b28ac 100644 --- a/packages/ui/select/stories/uncontrolled.stories.tsx +++ b/packages/ui/select/stories/uncontrolled.stories.tsx @@ -6,9 +6,9 @@ import Select from '../src' */ export const Uncontrolled = () => { const [data] = React.useState([ - { title: '电视', id: '3', disabled: true }, + { title: '电视', id: '3', disabled: false }, { title: '手机', id: '2' }, - { title: '笔记本', id: '4', disabled: true }, + { title: '笔记本', id: '4', disabled: false }, { title: '生活周边', id: '5' }, { title: '办公', id: '6' }, ]) diff --git a/packages/ui/upload/src/styles/upload.scss b/packages/ui/upload/src/styles/upload.scss index 692c86649..643cebb3f 100644 --- a/packages/ui/upload/src/styles/upload.scss +++ b/packages/ui/upload/src/styles/upload.scss @@ -65,14 +65,14 @@ $prefix: '#{$component-prefix}-upload' !default; } &__item { - height: 40px; + height: 32px; cursor: default; color: use-color('gray', 800); background: use-color('gray', 50); display: flex; border-radius: use-border-radius('normal'); - padding: use-spacing(6); - margin-top: use-spacing(4); + padding: use-spacing(4); + margin-top: use-spacing(3); box-sizing: border-box; align-items: center; overflow: hidden; @@ -124,6 +124,7 @@ $prefix: '#{$component-prefix}-upload' !default; align-items: center; padding-left: 8px; overflow: hidden; + font-size: use-text-size('normal'); } &__upstatus {