mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 03:29:59 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity

fix: #24614 text button style inconsistent in danger (#24622)

Browse Source 
* fix: update button style when type="text" of danger

* update wording in danger button demo

* format code
This commit is contained in:
Teng YANG 2020-06-01 13:33:29 +08:00 committed by GitHub
parent b047add305
commit 9f8eb99807
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 96 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
components/button/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -109,12 +109,20 @@ Array [
Dashed
</span>
</button>,
<button
class="ant-btn ant-btn-text ant-btn-dangerous"
type="button"
>
<span>
Text
</span>
</button>,
<button
class="ant-btn ant-btn-link ant-btn-dangerous"
type="button"
>
<span>
link
Link
</span>
</button>,
]
@ -176,24 +184,6 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
</span>
</button>
<br />
<button
class="ant-btn ant-btn-link"
type="button"
>
<span>
Link
</span>
</button>
<button
class="ant-btn ant-btn-link"
disabled=""
type="button"
>
<span>
Link(disabled)
</span>
</button>
<br />
<button
class="ant-btn ant-btn-text"
type="button"
@ -213,20 +203,20 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
</button>
<br />
<button
class="ant-btn ant-btn-link ant-btn-dangerous"
class="ant-btn ant-btn-link"
type="button"
>
<span>
Danger Link
Link
</span>
</button>
<button
class="ant-btn ant-btn-link ant-btn-dangerous"
class="ant-btn ant-btn-link"
disabled=""
type="button"
>
<span>
Danger Link(disabled)
Link(disabled)
</span>
</button>
<br />
@ -247,6 +237,42 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
Danger Default(disabled)
</span>
</button>
<br />
<button
class="ant-btn ant-btn-text ant-btn-dangerous"
type="button"
>
<span>
Danger Text
</span>
</button>
<button
class="ant-btn ant-btn-text ant-btn-dangerous"
disabled=""
type="button"
>
<span>
Danger Text(disabled)
</span>
</button>
<br />
<button
class="ant-btn ant-btn-link ant-btn-dangerous"
type="button"
>
<span>
Danger Link
</span>
</button>
<button
class="ant-btn ant-btn-link ant-btn-dangerous"
disabled=""
type="button"
>
<span>
Danger Link(disabled)
</span>
</button>
<div
class="site-button-ghost-wrapper"
>

5
components/button/demo/danger.md
View File

@ -25,8 +25,11 @@ ReactDOM.render(
<Button type="dashed" danger>
Dashed
</Button>
<Button type="text" danger>
Text
</Button>
<Button type="link" danger>
link
Link
</Button>
</>,
mountNode,

23
components/button/demo/disabled.md
View File

@ -31,14 +31,26 @@ ReactDOM.render(
Dashed(disabled)
</Button>
<br />
<Button type="text">Text</Button>
<Button type="text" disabled>
Text(disabled)
</Button>
<br />
<Button type="link">Link</Button>
<Button type="link" disabled>
Link(disabled)
</Button>
<br />
<Button type="text">Text</Button>
<Button type="text" disabled>
Text(disabled)
<Button danger>Danger Default</Button>
<Button danger disabled>
Danger Default(disabled)
</Button>
<br />
<Button danger type="text">
Danger Text
</Button>
<Button danger type="text" disabled>
Danger Text(disabled)
</Button>
<br />
<Button type="link" danger>
@ -47,11 +59,6 @@ ReactDOM.render(
<Button type="link" danger disabled>
Danger Link(disabled)
</Button>
<br />
<Button danger>Danger Default</Button>
<Button danger disabled>
Danger Default(disabled)
</Button>
<div className="site-button-ghost-wrapper">
<Button ghost>Ghost</Button>
<Button ghost disabled>

4
components/button/style/index.less
View File

@ -95,6 +95,10 @@
.btn-danger-link;
}
&-dangerous&-text {
.btn-danger-text;
}
&-icon-only {
.btn-square(@btn-prefix-cls);
vertical-align: -0.5px;

23
components/button/style/mixin.less
View File

@ -375,6 +375,29 @@
.button-disabled(@disabled-color; transparent; transparent);
}
.btn-danger-text() {
.button-variant-other(@error-color, transparent, transparent);
box-shadow: none;
&:hover,
&:focus {
& when (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 7) `; @btn-text-hover-bg; transparent);
}
& when not (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 5) `; @btn-text-hover-bg; transparent);
}
}
&:active {
& when (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 5) `; fadein(@btn-text-hover-bg, 1%); transparent);
}
& when not (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 7) `; fadein(@btn-text-hover-bg, 1%); transparent);
}
}
.button-disabled(@disabled-color; transparent; transparent);
}
// round button
.btn-round(@btnClassName: btn) {
.button-size(@btn-circle-size; @btn-circle-size / 2; @font-size-base; @btn-circle-size);