mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

fix(menu): fix custom expand icon cannot be hidden (#40071)

Browse Source 
* test: add case

* fix: fix the error of missing custom icon className

* test: add case

* fix(menu): fix the bug that the custom expand icon is not hidden in collapse mode

* test: update snapshot

* Revert "fix: fix the error of missing custom icon className"

This reverts commit 71c79a3f75.

* test: update case

* fix: fix the error of missing custom icon className
This commit is contained in:
Wuxh 2023-01-07 21:50:09 +08:00 committed by GitHub
parent 91df688efd
commit 0086884179
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 75 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

@ -26765,7 +26765,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
Submenu
</span>
<span
class="config-dropdown-menu-submenu-expand-icon"
class="config-dropdown-menu-submenu-expand-icon config-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"
@ -27072,7 +27072,7 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
Submenu
</span>
<span
class="config-dropdown-menu-submenu-expand-icon"
class="config-dropdown-menu-submenu-expand-icon config-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"
@ -27379,7 +27379,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
Submenu
</span>
<span
class="config-dropdown-menu-submenu-expand-icon"
class="config-dropdown-menu-submenu-expand-icon config-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"
@ -27685,7 +27685,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
Submenu
</span>
<span
class="config-dropdown-menu-submenu-expand-icon"
class="config-dropdown-menu-submenu-expand-icon config-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"
@ -27991,7 +27991,7 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
Submenu
</span>
<span
class="ant-dropdown-menu-submenu-expand-icon"
class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"
@ -28297,7 +28297,7 @@ exports[`ConfigProvider components Table normal 1`] = `
Submenu
</span>
<span
class="ant-dropdown-menu-submenu-expand-icon"
class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"
@ -28603,7 +28603,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
Submenu
</span>
<span
class="ant-dropdown-menu-submenu-expand-icon"
class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"

12
components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -6675,7 +6675,7 @@ Array [
Navigation One
</span>
<span
class="ant-dropdown-menu-submenu-expand-icon"
class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"
@ -6907,7 +6907,7 @@ Array [
Navigation Two
</span>
<span
class="ant-dropdown-menu-submenu-expand-icon"
class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"
@ -7022,7 +7022,7 @@ Array [
Submenu
</span>
<span
class="ant-dropdown-menu-submenu-expand-icon"
class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"
@ -7164,7 +7164,7 @@ Array [
Navigation Three
</span>
<span
class="ant-dropdown-menu-submenu-expand-icon"
class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"
@ -9852,7 +9852,7 @@ Array [
sub menu
</span>
<span
class="ant-dropdown-menu-submenu-expand-icon"
class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"
@ -9971,7 +9971,7 @@ Array [
disabled sub menu
</span>
<span
class="ant-dropdown-menu-submenu-expand-icon"
class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"

52
components/menu/__tests__/index.test.tsx
View File

@ -1047,4 +1047,56 @@ describe('Menu', () => {
);
errorSpy.mockRestore();
});
it('expandIconClassName', () => {
const { container } = render(
<Menu
expandIcon={<span className="custom-expand-icon" />}
inlineCollapsed
items={[
{
label: 'Option 1',
key: '1',
icon: '112',
children: [
{
label: 'Option 1-1',
key: '1-1',
},
],
},
]}
/>,
);
expect(container.querySelector('.custom-expand-icon')).toBeTruthy();
});
// https://github.com/ant-design/ant-design/issues/40041
it('should not show icon when inlineCollapsed', () => {
const { container } = render(
<Menu
expandIcon={<span className="bamboo">I</span>}
inlineCollapsed
items={[
{
label: 'Option 1',
key: '1',
icon: '112',
children: [
{
label: 'Option 1-1',
key: '1-1',
},
],
},
]}
/>,
);
expect(container.querySelector('.bamboo')).toBeTruthy();
expect(getComputedStyle(container.querySelector('.bamboo') as HTMLElement)).toHaveProperty(
'opacity',
'0',
);
});
});

5
components/menu/menu.tsx
View File

@ -125,8 +125,9 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
if (typeof expandIcon === 'function') {
mergedExpandIcon = expandIcon;
} else {
mergedExpandIcon = cloneElement(expandIcon || overrideObj.expandIcon, {
className: `${prefixCls}-submenu-expand-icon`,
const beClone: any = expandIcon || overrideObj.expandIcon;
mergedExpandIcon = cloneElement(beClone, {
className: classNames(`${prefixCls}-submenu-expand-icon`, beClone?.props?.className),
});
}

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

@ -184,7 +184,10 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
paddingInline: `calc(50% - ${fontSizeSM}px)`,
textOverflow: 'clip',
[`${componentCls}-submenu-arrow`]: {
[`
${componentCls}-submenu-arrow,
${componentCls}-submenu-expand-icon
`]: {
opacity: 0,
},

4
components/table/__tests__/__snapshots__/Table.filter.test.tsx.snap
View File

@ -645,7 +645,7 @@ exports[`Table.filter renders menu correctly 1`] = `
Title
</span>
<span
class="ant-dropdown-menu-submenu-expand-icon"
class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"
@ -787,7 +787,7 @@ exports[`Table.filter renders radio filter correctly 1`] = `
Title
</span>
<span
class="ant-dropdown-menu-submenu-expand-icon"
class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"

2
components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -13569,7 +13569,7 @@ exports[`renders ./components/table/demo/head.tsx extend context correctly 1`] =
Submenu
</span>
<span
class="ant-dropdown-menu-submenu-expand-icon"
class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
>
<span
aria-label="right"