Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: menu style broken in dropdown #19150

Merged
merged 2 commits into from Oct 15, 2019
Merged

fix: menu style broken in dropdown #19150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9e960ae
:lipstick: fix menu style broken in dropdown
afc163 Oct 10, 2019
d077b51
:white_check_mark: update snapshots
afc163 Oct 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 6 additions & 6 deletions components/config-provider/__tests__/__snapshots__/components.test.js.snap
View file
Open in desktop
Expand Up @@ -7410,14 +7410,14 @@ exports[`ConfigProvider components InputNumber configProvider 1`] = `
</span>
</div>
<div
aria-valuemin="-9007199254740991"
class="config-input-number-input-wrap"
role="spinbutton"
>
<input
aria-valuemin="-9007199254740991"
autocomplete="off"
class="config-input-number-input"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""
/>
Expand Down Expand Up @@ -7488,14 +7488,14 @@ exports[`ConfigProvider components InputNumber normal 1`] = `
</span>
</div>
<div
aria-valuemin="-9007199254740991"
class="ant-input-number-input-wrap"
role="spinbutton"
>
<input
aria-valuemin="-9007199254740991"
autocomplete="off"
class="ant-input-number-input"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""
/>
Expand Down Expand Up @@ -7566,14 +7566,14 @@ exports[`ConfigProvider components InputNumber prefixCls 1`] = `
</span>
</div>
<div
aria-valuemin="-9007199254740991"
class="prefix-InputNumber-input-wrap"
role="spinbutton"
>
<input
aria-valuemin="-9007199254740991"
autocomplete="off"
class="prefix-InputNumber-input"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""
/>
Expand Down
28 changes: 28 additions & 0 deletions components/dropdown/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Expand Up @@ -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"
Expand Down
83 changes: 83 additions & 0 deletions components/dropdown/demo/menu-full.md
View file
Open in desktop
@@ -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,
);
```
13 changes: 12 additions & 1 deletion components/dropdown/style/index.less
View file
Open in desktop
Expand Up @@ -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,
Expand All @@ -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 {
Expand Down
24 changes: 12 additions & 12 deletions components/form/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Expand Up @@ -2385,14 +2385,14 @@ exports[`renders ./components/form/demo/style-check-debug.md correctly 1`] = `
</span>
</div>
<div
aria-valuemin="-9007199254740991"
class="ant-input-number-input-wrap"
role="spinbutton"
>
<input
aria-valuemin="-9007199254740991"
autocomplete="off"
class="ant-input-number-input"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""
/>
Expand Down Expand Up @@ -3244,20 +3244,20 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</span>
</div>
<div
aria-valuemax="10"
aria-valuemin="1"
aria-valuenow="3"
class="ant-input-number-input-wrap"
role="spinbutton"
>
<input
aria-valuemax="10"
aria-valuemin="1"
aria-valuenow="3"
autocomplete="off"
class="ant-input-number-input"
data-__field="[object Object]"
data-__meta="[object Object]"
id="validate_other_input-number"
max="10"
min="1"
role="spinbutton"
step="1"
value="3"
/>
Expand Down Expand Up @@ -5096,14 +5096,14 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</span>
</div>
<div
aria-valuemin="-9007199254740991"
class="ant-input-number-input-wrap"
role="spinbutton"
>
<input
aria-valuemin="-9007199254740991"
autocomplete="off"
class="ant-input-number-input"
min="-9007199254740991"
role="spinbutton"
step="1"
value=""
/>
Expand Down Expand Up @@ -5227,17 +5227,17 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
</span>
</div>
<div
aria-valuemax="12"
aria-valuemin="8"
aria-valuenow="11"
class="ant-input-number-input-wrap"
role="spinbutton"
>
<input
aria-valuemax="12"
aria-valuemin="8"
aria-valuenow="11"
autocomplete="off"
class="ant-input-number-input"
max="12"
min="8"
role="spinbutton"
step="1"
value="11"
/>
Expand Down