💄 fix menu style broken in dropdown

close #19145
ant-design · Oct 15, 2019 · 9e960ae · 9e960ae
1 parent a72f43b
commit 9e960ae
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 1 deletion.
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
@@ -237,6 +237,34 @@ exports[`renders ./components/dropdown/demo/item.md correctly 1`] = `
 </a>
 `;
 
+exports[`renders ./components/dropdown/demo/menu-full.md correctly 1`] = `
+<a
+  class="ant-dropdown-link ant-dropdown-trigger"
+  href="#"
+>
+  Hover to check menu style 
+  <i
+    aria-label="icon: down"
+    class="anticon anticon-down"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      data-icon="down"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+      />
+    </svg>
+  </i>
+</a>
+`;
+
 exports[`renders ./components/dropdown/demo/overlay-visible.md correctly 1`] = `
 <a
   class="ant-dropdown-link ant-dropdown-trigger"

diff --git a/components/dropdown/demo/menu-full.md b/components/dropdown/demo/menu-full.md
@@ -0,0 +1,83 @@
+---
+order: 100
+title:
+  zh-CN: Menu 完整样式
+  en-US: Menu full styles
+debug: true
+---
+
+## zh-CN
+
+此演示需要注意查看 Dropdown 内 Menu 的样式是否正常。[#19150](https://github.com/ant-design/ant-design/pull/19150)
+
+## en-US
+
+This demo was created for debugging Menu styles inside Dropdown. [#19150](https://github.com/ant-design/ant-design/pull/19150)
+
+```jsx
+import { Menu, Dropdown, Icon } from 'antd';
+
+const { SubMenu } = Menu;
+
+const menu = (
+  <Menu selectedKeys={['1']} openKeys={['sub1']}>
+    <SubMenu
+      key="sub1"
+      title={
+        <span>
+          <Icon type="mail" />
+          <span>Navigation One</span>
+        </span>
+      }
+    >
+      <Menu.ItemGroup key="g1" title="Item 1">
+        <Menu.Item key="1">Option 1</Menu.Item>
+        <Menu.Item key="2">Option 2</Menu.Item>
+      </Menu.ItemGroup>
+      <Menu.ItemGroup key="g2" title="Item 2">
+        <Menu.Item key="3">Option 3</Menu.Item>
+        <Menu.Item key="4">Option 4</Menu.Item>
+      </Menu.ItemGroup>
+    </SubMenu>
+    <SubMenu
+      key="sub2"
+      title={
+        <span>
+          <Icon type="appstore" />
+          <span>Navigation Two</span>
+        </span>
+      }
+    >
+      <Menu.Item key="5">Option 5</Menu.Item>
+      <Menu.Item key="6">Option 6</Menu.Item>
+      <SubMenu key="sub3" title="Submenu">
+        <Menu.Item key="7">Option 7</Menu.Item>
+        <Menu.Item key="8">Option 8</Menu.Item>
+      </SubMenu>
+    </SubMenu>
+    <SubMenu
+      key="sub4"
+      title={
+        <span>
+          <Icon type="setting" />
+          <span>Navigation Three</span>
+        </span>
+      }
+    >
+      <Menu.Item key="9">Option 9</Menu.Item>
+      <Menu.Item key="10">Option 10</Menu.Item>
+      <Menu.Item key="11">Option 11</Menu.Item>
+      <Menu.Item key="12">Option 12</Menu.Item>
+    </SubMenu>
+  </Menu>
+);
+
+ReactDOM.render(
+  <Dropdown overlay={menu}>
+    <a className="ant-dropdown-link" href="#">
+      Hover to check menu style <Icon type="down" />
+    </a>
+  </Dropdown>,
+  mountNode,
+);
+```
diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
@@ -72,6 +72,16 @@
       > .@{dropdown-prefix-cls}-menu {
         transform-origin: 0 0;
       }
+
+      ul,
+      li {
+        list-style: none;
+      }
+
+      ul {
+        margin-right: 0.3em;
+        margin-left: 0.3em;
+      }
     }
 
     &-item,
@@ -87,9 +97,10 @@
       cursor: pointer;
       transition: all 0.3s;
 
-      > .anticon:first-child {
+      > span > .anticon:first-child {
         min-width: 12px;
         margin-right: 8px;
+        font-size: @font-size-sm;
       }
 
       > a {