From 57e0d1d1bbadf3ed8d55fd8a8d8b5fd016329418 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Tue, 11 Jan 2022 10:29:25 +0800
Subject: [PATCH] fix(style): [el-dropdown] fix doc style (#5266)

* fix: update style

* style: update

* feat: update test
---
 docs/en-US/component/dropdown.md              |  2 +
 docs/examples/dropdown/triggering-element.vue | 54 ++++++++++---------
 .../dropdown/__tests__/dropdown.spec.ts       |  2 +
 .../dropdown/src/dropdown-item-impl.vue       |  2 +-
 packages/theme-chalk/src/dropdown.scss        | 31 +++++------
 5 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/docs/en-US/component/dropdown.md b/docs/en-US/component/dropdown.md
index 0053c56e16..14b7377d64 100644
--- a/docs/en-US/component/dropdown.md
+++ b/docs/en-US/component/dropdown.md
@@ -18,6 +18,8 @@ Toggleable menu for displaying lists of links and actions.
   .el-dropdown-link {
     cursor: pointer;
     color: var(--el-color-primary);
+    display: flex;
+    align-items: center;
   }
 }
 
diff --git a/docs/examples/dropdown/triggering-element.vue b/docs/examples/dropdown/triggering-element.vue
index a8bc9bef3a..ac6543842d 100644
--- a/docs/examples/dropdown/triggering-element.vue
+++ b/docs/examples/dropdown/triggering-element.vue
@@ -1,30 +1,32 @@
 <template>
-  <el-dropdown>
-    <el-button type="primary">
-      Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
-    </el-button>
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-dropdown-item>Action 1</el-dropdown-item>
-        <el-dropdown-item>Action 2</el-dropdown-item>
-        <el-dropdown-item>Action 3</el-dropdown-item>
-        <el-dropdown-item>Action 4</el-dropdown-item>
-        <el-dropdown-item>Action 5</el-dropdown-item>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
-  <el-dropdown split-button type="primary" @click="handleClick">
-    Dropdown List
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-dropdown-item>Action 1</el-dropdown-item>
-        <el-dropdown-item>Action 2</el-dropdown-item>
-        <el-dropdown-item>Action 3</el-dropdown-item>
-        <el-dropdown-item>Action 4</el-dropdown-item>
-        <el-dropdown-item>Action 5</el-dropdown-item>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
+  <div class="flex flex-wrap items-center">
+    <el-dropdown>
+      <el-button type="primary">
+        Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
+      </el-button>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item>Action 1</el-dropdown-item>
+          <el-dropdown-item>Action 2</el-dropdown-item>
+          <el-dropdown-item>Action 3</el-dropdown-item>
+          <el-dropdown-item>Action 4</el-dropdown-item>
+          <el-dropdown-item>Action 5</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+    <el-dropdown split-button type="primary" @click="handleClick">
+      Dropdown List
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item>Action 1</el-dropdown-item>
+          <el-dropdown-item>Action 2</el-dropdown-item>
+          <el-dropdown-item>Action 3</el-dropdown-item>
+          <el-dropdown-item>Action 4</el-dropdown-item>
+          <el-dropdown-item>Action 5</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/components/dropdown/__tests__/dropdown.spec.ts b/packages/components/dropdown/__tests__/dropdown.spec.ts
index 9e85f5503e..b94f17ee76 100644
--- a/packages/components/dropdown/__tests__/dropdown.spec.ts
+++ b/packages/components/dropdown/__tests__/dropdown.spec.ts
@@ -103,6 +103,7 @@ describe('Dropdown', () => {
       .findComponent({
         name: 'DropdownItemImpl',
       })
+      .find('.el-dropdown-menu__item')
       .trigger('click')
     await nextTick()
     jest.runAllTimers()
@@ -352,6 +353,7 @@ describe('Dropdown', () => {
         .findComponent({
           name: 'DropdownItemImpl',
         })
+        .find('.el-dropdown-menu__item')
         .element.getAttribute('tabindex')
     ).toBe('0')
   })
diff --git a/packages/components/dropdown/src/dropdown-item-impl.vue b/packages/components/dropdown/src/dropdown-item-impl.vue
index 32ce7aeffd..90e89b8d25 100644
--- a/packages/components/dropdown/src/dropdown-item-impl.vue
+++ b/packages/components/dropdown/src/dropdown-item-impl.vue
@@ -1,4 +1,5 @@
 <template>
+  <div v-if="divided" class="el-dropdown-menu__item--divided"></div>
   <div
     :ref="itemRef"
     v-bind="dataset"
@@ -6,7 +7,6 @@
     :class="{
       'el-dropdown-menu__item': true,
       'is-disabled': disabled,
-      'el-dropdown-menu__item--divided': divided,
     }"
     :tabindex="tabIndex"
     role="menuitem"
diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss
index d86e9cb7c6..09aa4e6532 100644
--- a/packages/theme-chalk/src/dropdown.scss
+++ b/packages/theme-chalk/src/dropdown.scss
@@ -24,6 +24,16 @@ $dropdown-item-padding: map.merge(
   $dropdown-item-padding
 );
 
+$dropdown-item-divided-margin: () !default;
+$dropdown-item-divided-margin: map.merge(
+  (
+    'large': 8px 0,
+    'default': 6px 0,
+    'small': 4px 0,
+  ),
+  $dropdown-item-divided-margin
+);
+
 $dropdown-caret-width: () !default;
 $dropdown-caret-width: map.merge($common-component-size, $dropdown-caret-width);
 
@@ -175,18 +185,8 @@ $dropdown-menu-padding-vertical: map.merge(
     }
 
     @include m(divided) {
-      $divided-offset: 6px;
-
-      position: relative;
-      margin-top: $divided-offset;
+      margin: map.get($dropdown-item-divided-margin, 'default');
       border-top: 1px solid var(--el-border-color-lighter);
-
-      &:before {
-        content: '';
-        height: $divided-offset;
-        display: block;
-        background-color: $color-white;
-      }
     }
 
     @include when(disabled) {
@@ -205,13 +205,8 @@ $dropdown-menu-padding-vertical: map.merge(
         line-height: map.get($dropdown-item-line-height, $size);
         font-size: map.get($input-font-size, $size);
 
-        &.#{$namespace}-dropdown-menu__item--divided {
-          $divided-offset: 3px;
-          margin-top: $divided-offset;
-
-          &:before {
-            height: $divided-offset;
-          }
+        @include m(divided) {
+          margin: map.get($dropdown-item-divided-margin, $size);
         }
       }
     }