Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Button disabled style with link or href case #43091

Merged
merged 8 commits into from Jun 30, 2023
Merged

fix: Button disabled style with link or href case #43091

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c15af8d
fix: Button disabled style with link or href case
Jun 14, 2023
e14acda
chore: update
Jun 14, 2023
765ecce
fix: update link disable logic
Wxh16144 Jun 15, 2023
bfffd1e
test: update snapshot
Wxh16144 Jun 15, 2023
8c5697f
chore: update
BoyYangzai Jun 15, 2023
7b1a8e6
chore: update code
Wxh16144 Jun 15, 2023
f72252f
Merge branch 'master' into fix-button-dieabled
Wxh16144 Jun 28, 2023
cde3885
Update components/button/style/index.ts
MadCcc Jun 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 3 additions & 4 deletions components/button/button.tsx
View file
Open in desktop
Expand Up @@ -218,8 +218,6 @@ const InternalButton: React.ForwardRefRenderFunction<

const linkButtonRestProps = omit(rest as ButtonProps & { navigate: any }, ['navigate']);

const hrefAndDisabled = linkButtonRestProps.href !== undefined && mergedDisabled;

const classes = classNames(
prefixCls,
hashId,
Expand All @@ -234,7 +232,6 @@ const InternalButton: React.ForwardRefRenderFunction<
[`${prefixCls}-block`]: block,
[`${prefixCls}-dangerous`]: !!danger,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-disabled`]: hrefAndDisabled,
},
compactItemClassnames,
className,
Expand Down Expand Up @@ -263,7 +260,9 @@ const InternalButton: React.ForwardRefRenderFunction<
return wrapSSR(
<a
{...linkButtonRestProps}
className={classes}
className={classNames(classes, {
[`${prefixCls}-disabled`]: mergedDisabled,
li-jia-nan marked this conversation as resolved.
Show resolved Hide resolved
})}
style={fullStyle}
onClick={handleClick}
ref={buttonRef as React.Ref<HTMLAnchorElement>}
Expand Down
32 changes: 18 additions & 14 deletions components/button/style/index.ts
View file
Open in desktop
Expand Up @@ -115,8 +115,12 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
};
};

const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject): CSSObject => ({
'&:not(:disabled)': {
const genHoverActiveButtonStyle = (
btnCls: string,
hoverStyle: CSSObject,
activeStyle: CSSObject,
): CSSObject => ({
[`&:not(:disabled):not(${btnCls}-disabled)`]: {
'&:hover': hoverStyle,
'&:active': activeStyle,
},
Expand Down Expand Up @@ -161,6 +165,7 @@ const genGhostButtonStyle = (
boxShadow: 'none',

...genHoverActiveButtonStyle(
btnCls,
{
backgroundColor: 'transparent',
...hoverStyle,
Expand All @@ -180,7 +185,7 @@ const genGhostButtonStyle = (
});

const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
'&:disabled': {
[`&:disabled, &${token.componentCls}-disabled`]: {
...genDisabledStyle(token),
},
});
Expand All @@ -190,7 +195,7 @@ const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
});

const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
'&:disabled': {
[`&:disabled, &${token.componentCls}-disabled`]: {
cursor: 'not-allowed',
color: token.colorTextDisabled,
},
Expand All @@ -206,6 +211,7 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,

...genHoverActiveButtonStyle(
token.componentCls,
{
color: token.colorPrimaryHover,
borderColor: token.colorPrimaryHover,
Expand All @@ -229,6 +235,7 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
borderColor: token.colorError,

...genHoverActiveButtonStyle(
token.componentCls,
{
color: token.colorErrorHover,
borderColor: token.colorErrorBorderHover,
Expand Down Expand Up @@ -260,6 +267,7 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,

...genHoverActiveButtonStyle(
token.componentCls,
{
color: token.colorTextLightSolid,
backgroundColor: token.colorPrimaryHover,
Expand Down Expand Up @@ -291,6 +299,7 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,

...genHoverActiveButtonStyle(
token.componentCls,
{
backgroundColor: token.colorErrorHover,
},
Expand Down Expand Up @@ -329,6 +338,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
color: token.colorLink,

...genHoverActiveButtonStyle(
token.componentCls,
{
color: token.colorLinkHover,
},
Expand All @@ -343,6 +353,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
color: token.colorError,

...genHoverActiveButtonStyle(
token.componentCls,
{
color: token.colorErrorHover,
},
Expand All @@ -358,6 +369,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
// Type: Text
const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genHoverActiveButtonStyle(
token.componentCls,
{
color: token.colorText,
backgroundColor: token.colorBgTextHover,
Expand All @@ -375,6 +387,7 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({

...genPureDisabledButtonStyle(token),
...genHoverActiveButtonStyle(
token.componentCls,
{
color: token.colorErrorHover,
backgroundColor: token.colorErrorBg,
Expand All @@ -387,14 +400,6 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
},
});

// Href and Disabled
const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genDisabledStyle(token),
[`&${token.componentCls}:hover`]: {
...genDisabledStyle(token),
},
});

const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
const { componentCls } = token;

Expand All @@ -404,7 +409,6 @@ const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
[`${componentCls}-dashed`]: genDashedButtonStyle(token),
[`${componentCls}-link`]: genLinkButtonStyle(token),
[`${componentCls}-text`]: genTextButtonStyle(token),
[`${componentCls}-disabled`]: genDisabledButtonStyle(token),
};
};

Expand Down Expand Up @@ -528,7 +532,7 @@ export default genComponentStyleHook('Button', (token) => {
// Block
genBlockButtonStyle(buttonToken),

// Group (type, ghost, danger, disabled, loading)
// Group (type, ghost, danger, loading)
genTypeButtonStyle(buttonToken),

// Button Group
Expand Down