fix: Button has no disabled style when link type，add disabled to <a> #35957

MuxinFeng · 2022-06-08T16:25:37Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

目前按钮的 disabled 状态是通过属性选择器来匹配的，当 type 为 link，并且添加 href 属性时，button 会变成 a 标签，而 a 标签没有 disabled 属性。
解决方法是为 a 标签单独写一套 disabled 样式。

📝 Changelog

Language	Changelog
🇺🇸 English	-
🇨🇳 Chinese	-

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

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

github-actions · 2022-06-08T16:25:55Z

MadCcc · 2022-06-08T18:19:55Z

components/button/_style/mixin.less

@@ -385,6 +385,24 @@
  }
  .button-disabled(@disabled-color; transparent; transparent);
 }
+// link button disabled style
+.btn-link-disabled() {


感觉不用再写一套 mixin，直接在原来的选择器上加一个 &-disabled 就行。
另外和 4.21.0 之前一样的话就是想办法把 disabled 给 a 标签就行了，这样我觉得更合理一些，不用加多余的 css。

之前从master切的分支，然后我发现button的样式在这期间重构过，所以又提了一份新的，求再看看。新的实现思路就跟您说的一样了。

MadCcc · 2022-06-08T18:24:28Z

需要添加 test case

MuxinFeng · 2022-06-08T19:35:47Z

测试代码之前没写过，我稍微研究下~

afc163 · 2022-06-09T02:15:30Z

master 先修吧。

codecov · 2022-06-09T02:26:18Z

Codecov Report

Merging #35957 (551da7d) into next (771836c) will not change coverage.
The diff coverage is 100.00%.

❗ Current head 551da7d differs from pull request most recent head a12219f. Consider uploading reports for the commit a12219f to get more accurate results

@@            Coverage Diff             @@
##              next    #35957    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files          430       491    +61     
  Lines         7995      8601   +606     
  Branches      2402      2429    +27     
==========================================
+ Hits          7995      8601   +606

Impacted Files	Coverage Δ
components/_util/motion.tsx	`100.00% <ø> (ø)`
components/form/FormList.tsx	`100.00% <ø> (ø)`
components/image/PreviewGroup.tsx	`100.00% <ø> (ø)`
components/image/index.tsx	`100.00% <ø> (ø)`
components/input-number/index.tsx	`100.00% <ø> (ø)`
components/input/ClearableLabeledInput.tsx	`100.00% <ø> (ø)`
components/input/Group.tsx	`100.00% <ø> (ø)`
components/input/Input.tsx	`100.00% <ø> (ø)`
components/input/TextArea.tsx	`100.00% <ø> (ø)`
components/layout/layout.tsx	`100.00% <ø> (ø)`
... and 158 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 771836c...a12219f. Read the comment docs.

MuxinFeng · 2022-06-09T03:33:00Z

test 已添加~

MadCcc · 2022-06-09T07:19:07Z

要在 master 上修

MadCcc · 2022-06-09T07:24:51Z

components/button/button.tsx

@@ -268,6 +270,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
      [`${prefixCls}-block`]: block,
      [`${prefixCls}-dangerous`]: !!danger,
      [`${prefixCls}-rtl`]: direction === 'rtl',
+      [`${prefixCls}-href-disabled`]: linkButtonRestProps.href !== undefined && mergedDisabled,


试试看绕过 ts 检查直接把 disabled 加到 a 标签上

好的，我试试

MadCcc · 2022-06-09T07:25:22Z

components/button/__tests__/index.test.tsx

@@ -328,6 +328,15 @@ describe('Button', () => {
    expect(onClick).not.toHaveBeenCalled();
  });

+  it('should match class .ant-btn-href-disabled when button is disabled and href is not undefined', () => {
+    const wrapper = mount(


用 testing-library 吧

这里能多给一点关键词吗

MuxinFeng · 2022-06-09T12:17:53Z

已经提到 master 啦，然后 test case 我有点拿不准，感觉没啥测试的必要，就没提了

afc163 · 2022-06-09T12:26:41Z

components/button/button.tsx

+        className={classes}
+        onClick={handleClick}
+        // @ts-ignore
+        disabled={mergedDisabled}


a 上有 disabled 属性？

可以看下上面，大佬给了个建议。要是给 a 加 disabled 属性不推荐的话，我再换回原来的

这样 React 有 warning 的吧。

#35975 大佬要不再看看这种解法，比较朴实😂

回头可以关掉一个

其实我更倾向于另一种方法，因为目前 button 的 disabled 状态都是通过属性选择器来匹配的，但是 a 标签没有该属性。

所以我打算额外为 a 标签添加一个类，虽然看上去代码多了点，但考虑到 button 和 a 实现 disabled 的方式南辕北辙，分开写其实更清楚。

以前的实现就是直接添加的 disabled 属性，考虑 css 覆盖直接还原是最稳的

MadCcc · 2022-06-10T03:52:24Z

添加新的 class 吧，确实该去掉一点不常规的用法了

MuxinFeng force-pushed the fix-button-style branch from 1449f42 to 2aa3402 Compare June 8, 2022 16:36

MadCcc reviewed Jun 8, 2022

View reviewed changes

MuxinFeng force-pushed the fix-button-style branch from 2aa3402 to a384298 Compare June 8, 2022 19:30

MuxinFeng force-pushed the fix-button-style branch from a384298 to f1088ec Compare June 9, 2022 03:31

MadCcc reviewed Jun 9, 2022

View reviewed changes

fix: Button has no disabled style when link type

a12219f

MuxinFeng force-pushed the fix-button-style branch from 551da7d to a12219f Compare June 9, 2022 12:13

MuxinFeng changed the base branch from next to master June 9, 2022 12:15

afc163 reviewed Jun 9, 2022

View reviewed changes

MuxinFeng mentioned this pull request Jun 9, 2022

fix: Button has no disabled style when link type , using extra class #35975

Merged

19 tasks

MuxinFeng changed the title ~~fix: Button has no disabled style when link type~~ fix: Button has no disabled style when link type，add disabled to <a> Jun 9, 2022

MadCcc closed this Jun 10, 2022

MuxinFeng deleted the fix-button-style branch March 15, 2023 13:07

Uh oh!

fix: Button has no disabled style when link type，add disabled to <a> #35957

fix: Button has no disabled style when link type，add disabled to <a> #35957

Uh oh!

Conversation

MuxinFeng commented Jun 8, 2022

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self Check before Merge

Uh oh!

github-actions bot commented Jun 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MadCcc Jun 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MadCcc commented Jun 8, 2022

Uh oh!

MuxinFeng commented Jun 8, 2022

Uh oh!

afc163 commented Jun 9, 2022

Uh oh!

codecov bot commented Jun 9, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

MuxinFeng commented Jun 9, 2022

Uh oh!

MadCcc commented Jun 9, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MuxinFeng commented Jun 9, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MadCcc commented Jun 10, 2022

Uh oh!

Uh oh!

github-actions bot commented Jun 8, 2022 •

edited

Loading

MadCcc Jun 8, 2022 •

edited

Loading

codecov bot commented Jun 9, 2022 •

edited

Loading