ant-design/components/button/style/compact.ts
afc163 f50a8e6175
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
chore: remove warning of cssinjs in Space.Compact (#52489)
2025-01-20 15:09:49 +08:00

50 lines
1.7 KiB
TypeScript

// 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) => {
const selector = `${componentCls}-compact${vertical ? '-vertical' : ''}-item${componentCls}-primary:not([disabled])`;
return {
[`${selector} + ${selector}::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,
);