fix(select&cascader&dropdown): 修改下拉菜单高度

XiaoMi · Oct 8, 2023 · 832360b · 832360b
1 parent 0185b1b
commit 832360b
Show file tree

Hide file tree

Showing 33 changed files with 80 additions and 68 deletions.
diff --git a/.changeset/clever-rabbits-smoke.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -8,9 +8,9 @@ import CheckSelect from '../src'
 export const Appearance = () => {
   const [value, setValue] = React.useState<React.ReactText[]>(['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
@@ -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
@@ -8,9 +8,9 @@ import CheckSelect from '../src'
 export const Controlled = () => {
   const [value, setValue] = React.useState<React.ReactText[]>(['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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -30,7 +30,7 @@ export const Dropdown = forwardRef<HTMLDivElement | null, DropdownProps>(
       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
@@ -220,7 +220,6 @@ export const Size = () => {
         <Dropdown
           size="lg"
           data={list}
-          width={120}
           title="左键单击"
           trigger={'click'}
           onClick={console.log}
@@ -229,7 +228,6 @@ export const Size = () => {
         <Dropdown
           size="md"
           data={list}
-          width={120}
           title="左键单击"
           trigger={'click'}
           onClick={console.log}
@@ -238,7 +236,6 @@ export const Size = () => {
         <Dropdown
           size="sm"
           data={list}
-          width={120}
           title="左键单击"
           trigger={'click'}
           onClick={console.log}

diff --git a/packages/ui/select/src/styles/select.scss b/packages/ui/select/src/styles/select.scss
@@ -3,8 +3,8 @@
 $prefix: '#{$component-prefix}-select' !default;
 
 .#{$prefix}-option {
-  margin-top: use-spacing(1);
-  margin-bottom: use-spacing(1);
+  // margin-top: use-spacing(1);
+  // margin-bottom: use-spacing(1);
   box-sizing: border-box;
   width: 100%;
   display: flex;
@@ -27,7 +27,7 @@ $prefix: '#{$component-prefix}-select' !default;
     display: inline-block;
     box-sizing: border-box;
     width: 100%;
-    padding: use-spacing(2);
+    padding: use-spacing(3);
     font-size: inherit;
     font-weight: inherit;
     color: inherit;
@@ -43,7 +43,7 @@ $prefix: '#{$component-prefix}-select' !default;
     color: use-color-mode('primary');
   }
 
-  &--focused {
+  &--focused:not(.#{$prefix}-option--selected) {
     background-color: use-color('gray', 100);
   }
 

diff --git a/packages/ui/select/stories/appearance.stories.tsx b/packages/ui/select/stories/appearance.stories.tsx
@@ -8,9 +8,9 @@ import Select from '../src'
 export const Appearance = () => {
   const [value, setValue] = React.useState<React.ReactText>('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
@@ -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
@@ -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
@@ -7,9 +7,9 @@ import Select from '../src'
 export const Controlled = () => {
   const [value, setValue] = React.useState<React.ReactText>('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
@@ -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
@@ -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
@@ -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
@@ -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' },
   ])