fix(comp:dropdown): style update and css variable support (#1301)

IDuxFE · Nov 24, 2022 · 0a59283 · 0a59283
1 parent f1dde91
commit 0a59283
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 60 deletions.
diff --git a/packages/components/dropdown/demo/Button.vue b/packages/components/dropdown/demo/Button.vue
@@ -3,7 +3,7 @@
     <IxButtonGroup>
       <IxButton @click="onClick">Button</IxButton>
       <IxDropdown>
-        <IxButton icon="ellipsis"></IxButton>
+        <IxButton icon="ellipsis" shape="square"></IxButton>
         <template #overlay>
           <IxMenu :dataSource="dataSource" :selectable="false"></IxMenu>
         </template>
@@ -12,15 +12,15 @@
     <IxButtonGroup>
       <IxButton @click="onClick">Button</IxButton>
       <IxDropdown>
-        <IxButton icon="setting"></IxButton>
+        <IxButton icon="setting" shape="square"></IxButton>
         <template #overlay>
           <IxMenu :dataSource="dataSource" :selectable="false"></IxMenu>
         </template>
       </IxDropdown>
     </IxButtonGroup>
 
     <IxDropdown>
-      <IxButton>Button <IxIcon name="down"></IxIcon></IxButton>
+      <IxButton>Button <IxIcon name="down" size="16px" style="margin-left: 4px"></IxIcon></IxButton>
       <template #overlay>
         <IxMenu :dataSource="dataSource" :selectable="false"></IxMenu>
       </template>

diff --git a/packages/components/dropdown/docs/Index.zh.md b/packages/components/dropdown/docs/Index.zh.md
@@ -3,6 +3,6 @@ category: components
 type: 导航
 title: Dropdown
 subtitle: 下拉菜单
-order: 0
+theme: true
 ---
 
diff --git a/packages/components/dropdown/docs/Theme.zh.md b/packages/components/dropdown/docs/Theme.zh.md
@@ -1,9 +1,6 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@dropdown-menu-item-height` | `@height-md` | - | - |
-| `@dropdown-menu-item-margin` | `0` | - | - |
-| `@dropdown-overlay-arrow-color` | `@background-color-component` | - | - |
-| `@dropdown-overlay-min-width` | `@menu-overlay-min-width` | - | - |
-| `@dropdown-overlay-background-color` | `@menu-background-color` | - | - |
-| `@dropdown-overlay-border-radius` | `@menu-overlay-border-radius` | - | - |
-| `@dropdown-overlay-box-shadow` | `@menu-overlay-box-shadow` | - | - |
+| `@dropdown-background-color` | `@menu-background-color` | - | - |
+| `@dropdown-border-radius` | `@menu-overlay-border-radius` | - | - |
+| `@dropdown-box-shadow` | `@menu-overlay-box-shadow` | - | - |
+| `@dropdown-min-width` | `@menu-overlay-min-width` | - | - |
diff --git a/packages/components/dropdown/style/index.less b/packages/components/dropdown/style/index.less
@@ -2,56 +2,25 @@
 @import '../../style/motion/fade.less';
 
 .@{dropdown-prefix} {
-  .reset-component();
-
-  z-index: 1000;
-  min-width: @dropdown-overlay-min-width;
-  background-color: @dropdown-overlay-background-color;
-  border-radius: @dropdown-overlay-border-radius;
-  box-shadow: @dropdown-overlay-box-shadow;
+  .reset-component-new();
 
   &-trigger {
     cursor: pointer;
   }
 
   .@{overlay-prefix}-arrow {
-    color: @dropdown-overlay-arrow-color;
+    color: @dropdown-background-color;
   }
-}
 
-.@{menu-prefix} {
-  &&-dropdown {
-    &.@{menu-prefix}-vertical,
-    &.@{menu-prefix}-inline {
-      .@{menu-prefix}-item {
-        &-selected {
-          &::after {
-            transform: scaleY(0);
-            opacity: 0;
-          }
-        }
-      }
-    }
-
-    &.@{menu-prefix}-horizontal {
-      .@{menu-prefix}-item,
-      .@{menu-prefix}-sub {
-        &:hover,
-        &-expanded,
-        &-selected {
-          border-color: transparent;
-        }
-      }
-    }
+  &,
+  & .@{menu-prefix}-dropdown {
+    background-color: @dropdown-background-color;
+    border-radius: @dropdown-border-radius;
+    box-shadow: @dropdown-box-shadow;
+    min-width: @dropdown-min-width;
   }
-}
 
-.@{menu-prefix}-dropdown {
-  .@{menu-prefix}-item,
-  .@{menu-prefix}-sub-title,
-  .@{menu-prefix}-item-group .@{menu-prefix}-item-group-title {
-    height: @dropdown-menu-item-height;
-    line-height: @dropdown-menu-item-height;
-    margin: @dropdown-menu-item-margin;
+  .@{menu-prefix}-dropdown {
+    border-right: 0;
   }
 }
diff --git a/packages/components/dropdown/style/themes/default.variable.less b/packages/components/dropdown/style/themes/default.variable.less
@@ -1,8 +1,4 @@
-@dropdown-menu-item-height: @height-md;
-@dropdown-menu-item-margin: 0;
-
-@dropdown-overlay-arrow-color: @background-color-component;
-@dropdown-overlay-min-width: @menu-overlay-min-width;
-@dropdown-overlay-background-color: @menu-background-color;
-@dropdown-overlay-border-radius: @menu-overlay-border-radius;
-@dropdown-overlay-box-shadow: @menu-overlay-box-shadow;
+@dropdown-background-color: @menu-background-color;
+@dropdown-border-radius: @menu-overlay-border-radius;
+@dropdown-box-shadow: @menu-overlay-box-shadow;
+@dropdown-min-width: @menu-overlay-min-width;