mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-23 18:50:06 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

refactor: tweak button style code (#51646)

Browse Source
This commit is contained in:
afc163 2024-11-18 10:27:12 +08:00 committed by GitHub
parent f6bbacf09f
commit a1bc111875
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 52 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/button/button.tsx
View File

@ -22,7 +22,7 @@ import { isTwoCNChar, isUnBorderedButtonVariant, spaceChildren } from './buttonH
import IconWrapper from './IconWrapper';
import LoadingIcon from './LoadingIcon';
import useStyle from './style';
import CompactCmp from './style/compactCmp';
import Compact from './style/compact';
export type LegacyButtonType = ButtonType | 'danger';
@ -337,8 +337,7 @@ const InternalCompoundedButton = React.forwardRef<
>
{iconNode}
{kids}
{/* Styles: compact */}
{!!compactItemClassnames && <CompactCmp key="compact" prefixCls={prefixCls} />}
{compactItemClassnames && <Compact prefixCls={prefixCls} />}
</button>
);

50
components/button/style/compact.ts Normal file
View File

@ -0,0 +1,50 @@
// Style as inline component
import type { CSSObject } from '@ant-design/cssinjs';
import { genCompactItemStyle } from '../../style/compact-item';
import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
import type { GenerateStyle } from '../../theme/internal';
import { genSubStyleComponent } from '../../theme/internal';
import type { ButtonToken } from './token';
import { prepareComponentToken, prepareToken } from './token';
const genButtonCompactStyle: GenerateStyle<ButtonToken> = (token) => {
const { componentCls, colorPrimaryHover, lineWidth, calc } = token;
const insetOffset = calc(lineWidth).mul(-1).equal();
const getCompactBorderStyle = (vertical?: boolean) =>
({
[`${componentCls}-compact${vertical ? '-vertical' : ''}-item${componentCls}-primary:not([disabled])`]:
{
'& + &::before': {
position: 'absolute',
top: vertical ? insetOffset : 0,
insetInlineStart: vertical ? 0 : insetOffset,
backgroundColor: colorPrimaryHover,
content: '""',
width: vertical ? '100%' : lineWidth,
height: vertical ? lineWidth : '100%',
},
},
}) as CSSObject;
// Special styles for Primary Button
return {
...getCompactBorderStyle(),
...getCompactBorderStyle(true),
};
};
// ============================== Export ==============================
export default genSubStyleComponent(
['Button', 'compact'],
(token) => {
const buttonToken = prepareToken(token);
return [
// Space Compact
genCompactItemStyle(buttonToken),
genCompactItemVerticalStyle(buttonToken),
genButtonCompactStyle(buttonToken),
];
},
prepareComponentToken,
);

72
components/button/style/compactCmp.ts
View File

@ -1,72 +0,0 @@
// Style as inline component
import { unit } from '@ant-design/cssinjs';
import { genCompactItemStyle } from '../../style/compact-item';
import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
import type { GenerateStyle } from '../../theme/internal';
import { genSubStyleComponent } from '../../theme/internal';
import type { ButtonToken } from './token';
import { prepareComponentToken, prepareToken } from './token';
const genButtonCompactStyle: GenerateStyle<ButtonToken> = (token) => {
const { componentCls, calc } = token;
return {
[componentCls]: {
// Special styles for Primary Button
[`&-compact-item${componentCls}-primary`]: {
[`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]:
{
position: 'relative',
'&:before': {
position: 'absolute',
top: calc(token.lineWidth).mul(-1).equal(),
insetInlineStart: calc(token.lineWidth).mul(-1).equal(),
display: 'inline-block',
width: token.lineWidth,
height: `calc(100% + ${unit(token.lineWidth)} * 2)`,
backgroundColor: token.colorPrimaryHover,
content: '""',
},
},
},
// Special styles for Primary Button
'&-compact-vertical-item': {
[`&${componentCls}-primary`]: {
[`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]:
{
position: 'relative',
'&:before': {
position: 'absolute',
top: calc(token.lineWidth).mul(-1).equal(),
insetInlineStart: calc(token.lineWidth).mul(-1).equal(),
display: 'inline-block',
width: `calc(100% + ${unit(token.lineWidth)} * 2)`,
height: token.lineWidth,
backgroundColor: token.colorPrimaryHover,
content: '""',
},
},
},
},
},
};
};
// ============================== Export ==============================
export default genSubStyleComponent(
['Button', 'compact'],
(token) => {
const buttonToken = prepareToken(token);
return [
// Space Compact
genCompactItemStyle(buttonToken),
genCompactItemVerticalStyle(buttonToken),
genButtonCompactStyle(buttonToken),
];
},
prepareComponentToken,
);