Browse Source

fix: menu grp item style missing (#38525)

pull/38536/head
二货爱吃白萝卜 2 years ago
committed by GitHub
parent
commit
38d75cf346
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 126
      components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
  2. 38
      components/menu/__tests__/__snapshots__/demo.test.ts.snap
  3. 2
      components/menu/demo/inline.tsx
  4. 18
      components/menu/style/vertical.tsx

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

@ -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

@ -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

@ -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

@ -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,
},
},

Loading…
Cancel
Save