fix: dropdown menu item #39368

samyarkd · 2022-12-07T11:43:59Z

Disable dropdown menu item when type is equal to danger.

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

Problem: When we set the dropdown menu item properties danger and disabled to true, the disabled styling doesn't apply. As shown in below code sandbox 👇
https://codesandbox.io/embed/antd-reproduction-template-forked-ip8ypb?fontsize=14&hidenavigation=1&theme=dark

Solution: check if dropdown menu item is disabled or not
If yes -> we are not going to apply danger staying, same as how button handles it (shown in code sandbox).

📝 Changelog

This file "components/menu/MenuItem.tsx" is updated.

Language	Changelog
🇺🇸 English	fix: apply disabled style to dropdown menu item when type is danger : #39322

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

Disable dropdown menu item when type is equal to danger

github-actions · 2022-12-07T11:44:12Z

codecov · 2022-12-07T12:09:21Z

Codecov Report

Base: 100.00% // Head: 100.00% // No change to project coverage 👍

Coverage data is based on head (b9e5c30) compared to base (fc3c2f1).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff            @@
##            master    #39368   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          556       556           
  Lines         9602      9624   +22     
  Branches      2714      2722    +8     
=========================================
+ Hits          9602      9624   +22

Impacted Files	Coverage Δ
components/dropdown/dropdown-button.tsx	`100.00% <ø> (ø)`
components/modal/Modal.tsx	`100.00% <ø> (ø)`
components/modal/PurePanel.tsx	`100.00% <ø> (ø)`
components/popconfirm/PurePanel.tsx	`100.00% <ø> (ø)`
components/transfer/operation.tsx	`100.00% <ø> (ø)`
components/_util/ActionButton.tsx	`100.00% <100.00%> (ø)`
components/button/button.tsx	`100.00% <100.00%> (ø)`
components/grid/row.tsx	`100.00% <0.00%> (ø)`
components/spin/index.tsx	`100.00% <0.00%> (ø)`
components/tour/index.tsx	`100.00% <0.00%> (ø)`
... and 9 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

Wxh16144 · 2022-12-07T17:14:18Z

components/menu/MenuItem.tsx

@@ -66,7 +66,7 @@ export default class MenuItem extends React.Component<MenuItemProps> {
        {...rest}
        className={classNames(
          {
-            [`${prefixCls}-item-danger`]: danger,
+            [`${prefixCls}-item-danger`]: this.props.disabled ? false : danger,
            [`${prefixCls}-item-only-child`]: (icon ? childrenLength + 1 : childrenLength) === 1,


I think we can solve the problem here by increasing the css selector weights.

v4.x

ant-design/components/dropdown/style/index.less

Lines 224 to 226 in f4d0116

&-disabled {

color: @disabled-color;

cursor: not-allowed;

v5.x

ant-design/components/dropdown/style/index.tsx

Lines 350 to 352 in 122b3f1

'&-disabled': {

color: colorTextDisabled,

cursor: 'not-allowed',

what do you think?

- &-disabled { + &&-disabled {

Thank you

I tried this out in version 5x, but it didn't work out.
It will break the disable option as shown in below (Image-1). But yes this is much cleaner and better i guess but i couldn't make it i tried a few more ways of increasing the CSS specificity, but they didn't work.

What about adding !important statement to color and background-color ?

The use of !important is bad, in 5.x it can be changed to this

- '&-disabled': { + [`&${menuCls}-item-disabled`]: { color: colorTextDisabled,

and switch the order of returns

return [ + genStatusStyle(dropdownToken), genBaseStyle(dropdownToken), genButtonStyle(dropdownToken), - genStatusStyle(dropdownToken), ];

this is just my suggestion, still need official help to review @afc163

@Wxh16144's suggestion is what I think too.

yoyo837 · 2022-12-08T11:10:40Z

~~Fix for v4? Please send PR to branch v4-stable~~

MadCcc · 2022-12-09T09:25:31Z

components/dropdown/style/index.tsx

@@ -456,9 +456,9 @@ export default genComponentStyleHook(
      dropdownEdgeChildPadding: paddingXXS,
    });
    return [
+      genStatusStyle(dropdownToken),


I prefer to remain the order because genBaseStyle should be at first.
Maybe problem is solved without changing order since the priority has been raised?

I prefer to remain the order because genBaseStyle should be at first. Maybe problem is solved without changing order since the priority has been raised?

I've also tested this and it still doesn't fix the problem without reordering

Should provide higher priority instead of reordering, since it may cause other issue related with order.

I made some changes without reordering the functions

Remove reordering functions by increasing `disable` class on line 350 CSS specificity

MadCcc · 2022-12-19T03:41:51Z

components/dropdown/style/index.tsx

@@ -347,7 +347,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
              },
            },

-            '&-disabled': {
+            [`&${menuCls}-item-disabled${menuCls}-item-disabled`]: {


Suggested change

[`&${menuCls}-item-disabled${menuCls}-item-disabled`]: {

[`&-disabled, &-disabled${menuCls}-item-danger`]: {

How about this?

I tested it and it didn't work

afc163 · 2022-12-23T04:13:32Z

Fixed in #39434

Wxh16144 · 2022-12-23T05:01:32Z

Fixed in #39434

#39434 修复的是 4.x 的，这个 PR 修复的是 5.x

yoyo837 · 2022-12-23T07:26:32Z

@Wxh16144 你改过V4, 把把关

afc163 · 2022-12-29T09:17:05Z

@Wxh16144 进展如何

Wxh16144 · 2022-12-29T10:15:39Z

进展如何

我认为还是最开始的解决方案 OK 一些, 查看了 <Menu /> 组件的 disabled 样式，也是通过 !important 来增加权中来实现的

ant-design/components/menu/style/theme.tsx

Lines 67 to 69 in 24c066e

    
           [`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: { 
        
             color: `${colorItemTextDisabled} !important`, 
        
           },

重新提交了一个 PR #39904

fix: dropdown menu item in danger

08cc6c9

Disable dropdown menu item when type is equal to danger

codeball-ai-writer bot added the codeball:approved label Dec 7, 2022

Wxh16144 reviewed Dec 7, 2022

View reviewed changes

samyarkd added 3 commits December 9, 2022 10:46

Merge branch 'ant-design:master' into bugfix

30cdf7c

increase disabled CSS specificity

a9e77a6

remove unnecessary changes

6c14940

codeball-ai-writer bot added codeball:needs-careful-review and removed codeball:approved labels Dec 9, 2022

Wxh16144 mentioned this pull request Dec 9, 2022

fix: dropdown menu style issue #39434

Merged

20 tasks

This comment was marked as resolved.

Sign in to view

MadCcc reviewed Dec 9, 2022

View reviewed changes

samyarkd added 2 commits December 15, 2022 16:58

Merge branch 'ant-design:master' into bugfix

b3655b1

fix: remove reordering functions

b9e5c30

Remove reordering functions by increasing `disable` class on line 350 CSS specificity

samyarkd requested review from MadCcc and Wxh16144 and removed request for MadCcc and Wxh16144 December 15, 2022 14:02

MadCcc reviewed Dec 19, 2022

View reviewed changes

afc163 closed this Dec 23, 2022

yoyo837 reopened this Dec 23, 2022

This comment was marked as outdated.

Sign in to view

Wxh16144 mentioned this pull request Dec 29, 2022

fix: dropdown menu style issue #39904

Merged

20 tasks

MadCcc closed this in #39904 Dec 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: dropdown menu item #39368

fix: dropdown menu item #39368

samyarkd commented Dec 7, 2022 •

edited

github-actions bot commented Dec 7, 2022 •

edited

codecov bot commented Dec 7, 2022 •

edited

Wxh16144 Dec 7, 2022 •

edited

samyarkd Dec 7, 2022

samyarkd Dec 8, 2022

Wxh16144 Dec 8, 2022

Wxh16144 Dec 8, 2022

afc163 Dec 8, 2022

yoyo837 commented Dec 8, 2022 •

edited

This comment was marked as resolved.

MadCcc Dec 9, 2022 •

edited

Wxh16144 Dec 9, 2022

MadCcc Dec 12, 2022 •

edited

samyarkd Dec 15, 2022

MadCcc Dec 19, 2022

samyarkd Dec 19, 2022

afc163 commented Dec 23, 2022

Wxh16144 commented Dec 23, 2022

yoyo837 commented Dec 23, 2022

This comment was marked as outdated.

afc163 commented Dec 29, 2022

Wxh16144 commented Dec 29, 2022 •

edited

	'&-disabled': {
	color: colorTextDisabled,
	cursor: 'not-allowed',

	[`&${menuCls}-item-disabled${menuCls}-item-disabled`]: {
	[`&-disabled, &-disabled${menuCls}-item-danger`]: {

fix: dropdown menu item #39368

fix: dropdown menu item #39368

Conversation

samyarkd commented Dec 7, 2022 • edited

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self-Check before Merge

github-actions bot commented Dec 7, 2022 • edited

codecov bot commented Dec 7, 2022 • edited

Codecov Report

Wxh16144 Dec 7, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yoyo837 commented Dec 8, 2022 • edited

This comment was marked as resolved.

MadCcc Dec 9, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MadCcc Dec 12, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 commented Dec 23, 2022

Wxh16144 commented Dec 23, 2022

yoyo837 commented Dec 23, 2022

This comment was marked as outdated.

afc163 commented Dec 29, 2022

Wxh16144 commented Dec 29, 2022 • edited

samyarkd commented Dec 7, 2022 •

edited

github-actions bot commented Dec 7, 2022 •

edited

codecov bot commented Dec 7, 2022 •

edited

Wxh16144 Dec 7, 2022 •

edited

yoyo837 commented Dec 8, 2022 •

edited

MadCcc Dec 9, 2022 •

edited

MadCcc Dec 12, 2022 •

edited

Wxh16144 commented Dec 29, 2022 •

edited