test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

fix: menu grp item style missing (#38525)

Browse Source
This commit is contained in:
二货爱吃白萝卜 2022-11-12 16:27:31 +08:00 committed by GitHub
parent 99d281082d
commit 38d75cf346
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 177 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1482,6 +1482,88 @@ Array [
</div>
</div>
</li>
<li
class="ant-menu-item-group"
>
<div
class="ant-menu-item-group-title"
title="Group"
>
Group
</div>
<ul
class="ant-menu-item-group-list"
>
<li
class="ant-menu-item ant-menu-item-only-child"
role="menuitem"
style="padding-left:24px"
tabindex="-1"
>
<span
class="ant-menu-title-content"
>
Option 13
</span>
</li>
<div>
<div
class="ant-tooltip ant-menu-inline-collapsed-tooltip"
style="opacity:0"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
<li
class="ant-menu-item ant-menu-item-only-child"
role="menuitem"
style="padding-left:24px"
tabindex="-1"
>
<span
class="ant-menu-title-content"
>
Option 14
</span>
</li>
<div>
<div
class="ant-tooltip ant-menu-inline-collapsed-tooltip"
style="opacity:0"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
</ul>
</li>
</ul>,
<div
aria-hidden="true"
@ -1751,6 +1833,50 @@ Array [
</div>
</div>
</div>
<div>
<div
class="ant-tooltip ant-menu-inline-collapsed-tooltip"
style="opacity:0"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
<div>
<div
class="ant-tooltip ant-menu-inline-collapsed-tooltip"
style="opacity:0"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
</div>,
]
`;

38
components/menu/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -512,6 +512,44 @@ Array [
/>
</div>
</li>
<li
class="ant-menu-item-group"
>
<div
class="ant-menu-item-group-title"
title="Group"
>
Group
</div>
<ul
class="ant-menu-item-group-list"
>
<li
class="ant-menu-item ant-menu-item-only-child"
role="menuitem"
style="padding-left:24px"
tabindex="-1"
>
<span
class="ant-menu-title-content"
>
Option 13
</span>
</li>
<li
class="ant-menu-item ant-menu-item-only-child"
role="menuitem"
style="padding-left:24px"
tabindex="-1"
>
<span
class="ant-menu-title-content"
>
Option 14
</span>
</li>
</ul>
</li>
</ul>,
<div
aria-hidden="true"

2
components/menu/demo/inline.tsx
View File

@ -39,6 +39,8 @@ const items: MenuProps['items'] = [
getItem('Option 11', '11'),
getItem('Option 12', '12'),
]),
getItem('Group', 'grp', null, [getItem('Option 13', '13'), getItem('Option 14', '14')], 'group'),
];
const App: React.FC = () => {

18
components/menu/style/vertical.tsx
View File

@ -70,6 +70,13 @@ const getVerticalStyle: GenerateStyle<MenuToken> = token => {
boxShadowSecondary,
} = token;
const inlineItemStyle: CSSObject = {
height: menuItemHeight,
lineHeight: `${menuItemHeight}px`,
listStylePosition: 'inside',
listStyleType: 'disc',
};
return [
{
[componentCls]: {
@ -144,18 +151,15 @@ const getVerticalStyle: GenerateStyle<MenuToken> = token => {
borderRadius: 0,
boxShadow: 'none',
[`& > ${componentCls}-item,
& > ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
height: menuItemHeight,
lineHeight: `${menuItemHeight}px`,
listStylePosition: 'inside',
listStyleType: 'disc',
},
[`& > ${componentCls}-submenu > ${componentCls}-submenu-title`]: inlineItemStyle,
[`& ${componentCls}-item-group-title`]: {
paddingInlineStart: paddingXL,
},
},
// >>>>> Item
[`${componentCls}-item`]: inlineItemStyle,
},
},