source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: auto merge branches (#56543)

Browse Source 
chore: merge master into feature
This commit is contained in:
github-actions[bot]
2026-01-09 07:40:31 +00:00
committed by GitHub
parent 64f7963395 b1bb15a753
commit 9b2054ffec
11 changed files with 193 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/badge/Badge.tsx
View File

@@ -222,6 +222,7 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
const statusTextColor = mergedStyle.color;
return (
<span
ref={ref}
{...restProps}
className={badgeClassName}
style={{ ...mergedStyles.root, ...mergedStyle }}

6
components/badge/__tests__/index.test.tsx
View File

@@ -240,4 +240,10 @@ describe('Badge', () => {
rerender(<Badge count={0} showZero color="#ff0" />);
expect(container.querySelectorAll('[title="0"]')).toHaveLength(1);
});
it('should support ref when exist status & text', () => {
const badgeRef = React.createRef<HTMLSpanElement>();
const { container } = render(<Badge ref={badgeRef} status="success" text="Success" />);
expect(badgeRef.current).toBe(container.querySelector('.ant-badge'));
});
});

236
components/button/style/variant.ts
View File

@@ -6,8 +6,7 @@ import type { ButtonToken } from './token';
const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
const { componentCls, antCls } = token;
// Default: '--ant-btn-'
const getCssVar = genCssVar(antCls, 'btn');
const [varName, varRef] = genCssVar(antCls, 'btn');
return {
[componentCls]: [
@@ -16,54 +15,58 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
// ==============================================================
{
// Border
[getCssVar('border-width')]: '1px',
[varName`border-width`]: '1px',
[getCssVar('border-color')]: '#000',
[getCssVar('border-color-hover')]: `var(${getCssVar('border-color')})`,
[getCssVar('border-color-active')]: `var(${getCssVar('border-color')})`,
[getCssVar('border-color-disabled')]: `var(${getCssVar('border-color')})`,
[varName`border-color`]: '#000',
[varName`border-color-hover`]: varRef`border-color`,
[varName`border-color-active`]: varRef`border-color`,
[varName`border-color-disabled`]: varRef`border-color`,
[getCssVar('border-style')]: 'solid',
[varName`border-style`]: 'solid',
// Text
[getCssVar('text-color')]: '#000',
[getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`,
[getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`,
[getCssVar('text-color-disabled')]: `var(${getCssVar('text-color')})`,
[varName`text-color`]: '#000',
[varName`text-color-hover`]: varRef`text-color`,
[varName`text-color-active`]: varRef`text-color`,
[varName`text-color-disabled`]: varRef`text-color`,
// Background
[getCssVar('bg-color')]: '#ddd',
[getCssVar('bg-color-hover')]: `var(${getCssVar('bg-color')})`,
[getCssVar('bg-color-active')]: `var(${getCssVar('bg-color')})`,
[getCssVar('bg-color-disabled')]: token.colorBgContainerDisabled,
[getCssVar('bg-color-container')]: token.colorBgContainer,
[varName`bg-color`]: '#ddd',
[varName`bg-color-hover`]: varRef`bg-color`,
[varName`bg-color-active`]: varRef`bg-color`,
[varName`bg-color-disabled`]: token.colorBgContainerDisabled,
[varName`bg-color-container`]: token.colorBgContainer,
// Shadow
[getCssVar('shadow')]: 'none',
[varName`shadow`]: 'none',
},
// ==============================================================
// == Template ==
// ==============================================================
{
// Basic
border: `var(${getCssVar('border-width')}) var(${getCssVar('border-style')}) var(${getCssVar('border-color')})`,
color: `var(${getCssVar('text-color')})`,
backgroundColor: `var(${getCssVar('bg-color')})`,
border: [varRef`border-width`, varRef`border-style`, varRef`border-color`].join(' '),
color: varRef`text-color`,
backgroundColor: varRef`bg-color`,
// Status
[`&:not(:disabled):not(${componentCls}-disabled)`]: {
// Hover
'&:hover': {
border: `var(${getCssVar('border-width')}) var(${getCssVar('border-style')}) var(${getCssVar('border-color-hover')})`,
color: `var(${getCssVar('text-color-hover')})`,
backgroundColor: `var(${getCssVar('bg-color-hover')})`,
border: [varRef`border-width`, varRef`border-style`, varRef`border-color-hover`].join(
' ',
),
color: varRef`text-color-hover`,
backgroundColor: varRef`bg-color-hover`,
},
// Active
'&:active': {
border: `var(${getCssVar('border-width')}) var(${getCssVar('border-style')}) var(${getCssVar('border-color-active')})`,
color: `var(${getCssVar('text-color-active')})`,
backgroundColor: `var(${getCssVar('bg-color-active')})`,
border: [varRef`border-width`, varRef`border-style`, varRef`border-color-active`].join(
' ',
),
color: varRef`text-color-active`,
backgroundColor: varRef`bg-color-active`,
},
},
},
@@ -75,67 +78,65 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
// >>>>> Solid
[`&${componentCls}-variant-solid`]: {
// Solid Variables
[getCssVar('solid-bg-color')]: `var(${getCssVar('color-base')})`,
[getCssVar('solid-bg-color-hover')]: `var(${getCssVar('color-hover')})`,
[getCssVar('solid-bg-color-active')]: `var(${getCssVar('color-active')})`,
[varName`solid-bg-color`]: varRef`color-base`,
[varName`solid-bg-color-hover`]: varRef`color-hover`,
[varName`solid-bg-color-active`]: varRef`color-active`,
// Variables
[getCssVar('border-color')]: 'transparent',
[varName`border-color`]: 'transparent',
[getCssVar('text-color')]: token.colorTextLightSolid,
[varName`text-color`]: token.colorTextLightSolid,
[getCssVar('bg-color')]: `var(${getCssVar('solid-bg-color')})`,
[getCssVar('bg-color-hover')]: `var(${getCssVar('solid-bg-color-hover')})`,
[getCssVar('bg-color-active')]: `var(${getCssVar('solid-bg-color-active')})`,
[varName`bg-color`]: varRef`solid-bg-color`,
[varName`bg-color-hover`]: varRef`solid-bg-color-hover`,
[varName`bg-color-active`]: varRef`solid-bg-color-active`,
// Box Shadow
boxShadow: `var(${getCssVar('shadow')})`,
boxShadow: varRef`shadow`,
},
// >>>>> Outlined & Dashed
[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
[getCssVar('border-color')]: `var(${getCssVar('color-base')})`,
[getCssVar('border-color-hover')]: `var(${getCssVar('color-hover')})`,
[getCssVar('border-color-active')]: `var(${getCssVar('color-active')})`,
[varName`border-color`]: varRef`color-base`,
[varName`border-color-hover`]: varRef`color-hover`,
[varName`border-color-active`]: varRef`color-active`,
[getCssVar('bg-color')]: `var(${getCssVar('bg-color-container')})`,
[getCssVar('text-color')]: `var(${getCssVar('color-base')})`,
[getCssVar('text-color-hover')]: `var(${getCssVar('color-hover')})`,
[getCssVar('text-color-active')]: `var(${getCssVar('color-active')})`,
[varName`bg-color`]: varRef`bg-color-container`,
[varName`text-color`]: varRef`color-base`,
[varName`text-color-hover`]: varRef`color-hover`,
[varName`text-color-active`]: varRef`color-active`,
// Box Shadow
boxShadow: `var(${getCssVar('shadow')})`,
boxShadow: varRef`shadow`,
},
// >>>>> Dashed
[`&${componentCls}-variant-dashed`]: {
[getCssVar('border-style')]: 'dashed',
[getCssVar('bg-color-disabled')]: token.dashedBgDisabled,
[varName`border-style`]: 'dashed',
[varName`bg-color-disabled`]: token.dashedBgDisabled,
},
// >>>>> Filled
[`&${componentCls}-variant-filled`]: {
[getCssVar('border-color')]: 'transparent',
[varName`border-color`]: 'transparent',
[getCssVar('text-color')]: `var(${getCssVar('color-base')})`,
[varName`text-color`]: varRef`color-base`,
[getCssVar('bg-color')]: `var(${getCssVar('color-light')})`,
[getCssVar('bg-color-hover')]: `var(${getCssVar('color-light-hover')})`,
[getCssVar('bg-color-active')]: `var(${getCssVar('color-light-active')})`,
[varName`bg-color`]: varRef`color-light`,
[varName`bg-color-hover`]: varRef`color-light-hover`,
[varName`bg-color-active`]: varRef`color-light-active`,
},
// >>>>> Text & Link
[`&${componentCls}-variant-text, &${componentCls}-variant-link`]: {
[getCssVar('border-color')]: 'transparent',
[varName`border-color`]: 'transparent',
[getCssVar('text-color')]: `var(${getCssVar('color-base')})`,
[getCssVar('text-color-hover')]: `var(${getCssVar('color-hover')})`,
[getCssVar('text-color-active')]: `var(${getCssVar('color-active')})`,
[getCssVar('bg-color')]: 'transparent',
[getCssVar('bg-color-hover')]: 'transparent',
[getCssVar('bg-color-active')]: 'transparent',
[varName`text-color`]: varRef`color-base`,
[varName`text-color-hover`]: varRef`color-hover`,
[varName`text-color-active`]: varRef`color-active`,
[varName`bg-color`]: 'transparent',
[varName`bg-color-hover`]: 'transparent',
[varName`bg-color-active`]: 'transparent',
[`&:disabled, &${token.componentCls}-disabled`]: {
background: 'transparent',
@@ -145,8 +146,8 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
// >>>>> Text
[`&${componentCls}-variant-text`]: {
[getCssVar('bg-color-hover')]: `var(${getCssVar('color-light')})`,
[getCssVar('bg-color-active')]: `var(${getCssVar('color-light-active')})`,
[varName`bg-color-hover`]: varRef`color-light`,
[varName`bg-color-active`]: varRef`color-light-active`,
},
},
@@ -157,88 +158,87 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
// ======================== By Default ========================
// >>>>> Link
[`&${componentCls}-variant-link`]: {
[getCssVar('color-base')]: token.colorLink,
[getCssVar('color-hover')]: token.colorLinkHover,
[getCssVar('color-active')]: token.colorLinkActive,
[varName`color-base`]: token.colorLink,
[varName`color-hover`]: token.colorLinkHover,
[varName`color-active`]: token.colorLinkActive,
},
// ======================== Compatible ========================
// >>>>> Primary
[`&${componentCls}-color-primary`]: {
[getCssVar('color-base')]: token.colorPrimary,
[getCssVar('color-hover')]: token.colorPrimaryHover,
[getCssVar('color-active')]: token.colorPrimaryActive,
[getCssVar('color-light')]: token.colorPrimaryBg,
[getCssVar('color-light-hover')]: token.colorPrimaryBgHover,
[getCssVar('color-light-active')]: token.colorPrimaryBorder,
[varName`color-base`]: token.colorPrimary,
[varName`color-hover`]: token.colorPrimaryHover,
[varName`color-active`]: token.colorPrimaryActive,
[varName`color-light`]: token.colorPrimaryBg,
[varName`color-light-hover`]: token.colorPrimaryBgHover,
[varName`color-light-active`]: token.colorPrimaryBorder,
[getCssVar('shadow')]: token.primaryShadow,
[varName`shadow`]: token.primaryShadow,
[`&${componentCls}-variant-solid`]: {
[getCssVar('text-color')]: token.primaryColor,
[getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`,
[getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`,
[varName`text-color`]: token.primaryColor,
[varName`text-color-hover`]: varRef`text-color`,
[varName`text-color-active`]: varRef`text-color`,
},
},
// >>>>> Danger
[`&${componentCls}-color-dangerous`]: {
[getCssVar('color-base')]: token.colorError,
[getCssVar('color-hover')]: token.colorErrorHover,
[getCssVar('color-active')]: token.colorErrorActive,
[getCssVar('color-light')]: token.colorErrorBg,
[getCssVar('color-light-hover')]: token.colorErrorBgFilledHover,
[getCssVar('color-light-active')]: token.colorErrorBgActive,
[varName`color-base`]: token.colorError,
[varName`color-hover`]: token.colorErrorHover,
[varName`color-active`]: token.colorErrorActive,
[varName`color-light`]: token.colorErrorBg,
[varName`color-light-hover`]: token.colorErrorBgFilledHover,
[varName`color-light-active`]: token.colorErrorBgActive,
[getCssVar('shadow')]: token.dangerShadow,
[varName`shadow`]: token.dangerShadow,
[`&${componentCls}-variant-solid`]: {
[getCssVar('text-color')]: token.dangerColor,
[getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`,
[getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`,
[varName`text-color`]: token.dangerColor,
[varName`text-color-hover`]: varRef`text-color`,
[varName`text-color-active`]: varRef`text-color`,
},
},
// >>>>> Default
[`&${componentCls}-color-default`]: {
[getCssVar('solid-bg-color')]: token.colorBgSolid,
[getCssVar('solid-bg-color-hover')]: token.colorBgSolidHover,
[getCssVar('solid-bg-color-active')]: token.colorBgSolidActive,
[varName`solid-bg-color`]: token.colorBgSolid,
[varName`solid-bg-color-hover`]: token.colorBgSolidHover,
[varName`solid-bg-color-active`]: token.colorBgSolidActive,
[getCssVar('color-base')]: token.defaultBorderColor,
[getCssVar('color-hover')]: token.defaultHoverBorderColor,
[getCssVar('color-active')]: token.defaultActiveBorderColor,
[varName`color-base`]: token.defaultBorderColor,
[varName`color-hover`]: token.defaultHoverBorderColor,
[varName`color-active`]: token.defaultActiveBorderColor,
[getCssVar('color-light')]: token.colorFillTertiary,
[getCssVar('color-light-hover')]: token.colorFillSecondary,
[getCssVar('color-light-active')]: token.colorFill,
[varName`color-light`]: token.colorFillTertiary,
[varName`color-light-hover`]: token.colorFillSecondary,
[varName`color-light-active`]: token.colorFill,
[getCssVar('text-color')]: token.colorText,
[getCssVar('text-color-hover')]: token.defaultHoverBorderColor,
[getCssVar('text-color-active')]: token.defaultActiveBorderColor,
[getCssVar('shadow')]: token.defaultShadow,
[varName`text-color`]: token.colorText,
[varName`text-color-hover`]: token.defaultHoverBorderColor,
[varName`text-color-active`]: token.defaultActiveBorderColor,
[varName`shadow`]: token.defaultShadow,
[`&${componentCls}-variant-solid`]: {
[getCssVar('text-color')]: token.solidTextColor,
[getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`,
[getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`,
[varName`text-color`]: token.solidTextColor,
[varName`text-color-hover`]: varRef`text-color`,
[varName`text-color-active`]: varRef`text-color`,
},
[`&${componentCls}-variant-filled, &${componentCls}-variant-text`]: {
[getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`,
[getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`,
[varName`text-color-hover`]: varRef`text-color`,
[varName`text-color-active`]: varRef`text-color`,
},
[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
[getCssVar('bg-color-hover')]: token.defaultHoverBg,
[getCssVar('bg-color-active')]: token.defaultActiveBg,
[varName`bg-color-hover`]: token.defaultHoverBg,
[varName`bg-color-active`]: token.defaultActiveBg,
},
[`&${componentCls}-background-ghost`]: {
[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
[getCssVar('text-color')]: token.defaultGhostColor,
[getCssVar('border-color')]: token.defaultGhostBorderColor,
[varName`text-color`]: token.defaultGhostColor,
[varName`border-color`]: token.defaultGhostBorderColor,
},
},
},
@@ -257,13 +257,13 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
return {
[`&${componentCls}-color-${colorKey}`]: {
[getCssVar('color-base')]: darkColor,
[getCssVar('color-hover')]: hoverColor,
[getCssVar('color-active')]: activeColor,
[getCssVar('color-light')]: lightColor,
[getCssVar('color-light-hover')]: lightHoverColor,
[getCssVar('color-light-active')]: lightActiveColor,
[getCssVar('shadow')]: shadowColor,
[varName`color-base`]: darkColor,
[varName`color-hover`]: hoverColor,
[varName`color-active`]: activeColor,
[varName`color-light`]: lightColor,
[varName`color-light-hover`]: lightHoverColor,
[varName`color-light-active`]: lightActiveColor,
[varName`shadow`]: shadowColor,
},
};
}),
@@ -276,7 +276,7 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
[`&:disabled, &${token.componentCls}-disabled`]: {
cursor: 'not-allowed',
borderColor: token.colorBorderDisabled,
background: `var(${getCssVar('bg-color-disabled')})`,
background: varRef`bg-color-disabled`,
color: token.colorTextDisabled,
boxShadow: 'none',
},
@@ -288,8 +288,8 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
{
// Ghost
[`&${componentCls}-background-ghost`]: {
[getCssVar('bg-color')]: 'transparent',
[getCssVar('shadow')]: 'none',
[varName`bg-color`]: 'transparent',
[varName`shadow`]: 'none',
},
},
],

9
components/float-button/style/button.ts
View File

@@ -8,8 +8,7 @@ import { genCssVar } from '../../theme/util/genStyleUtils';
const genFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
const { componentCls, floatButtonSize, iconCls, antCls, floatButtonIconSize } = token;
// Default: '--ant-float-btn-'
const getCssVar = genCssVar(antCls, 'float-btn');
const [varName, varRef] = genCssVar(antCls, 'float-btn');
const badgeCls = `${componentCls}-badge`;
@@ -25,7 +24,7 @@ const genFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token)
// == Variable ==
// ==============================================================
{
[getCssVar('size')]: unit(floatButtonSize),
[varName`size`]: unit(floatButtonSize),
},
// ==============================================================
@@ -36,8 +35,8 @@ const genFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token)
margin: 0,
padding: `${unit(token.paddingXXS)} 0`,
width: `var(${getCssVar('size')})`,
minHeight: `var(${getCssVar('size')})`,
width: varRef`size`,
minHeight: varRef`size`,
height: 'auto',
wordBreak: 'break-word',
whiteSpace: 'normal',

27
components/float-button/style/group.ts
View File

@@ -12,8 +12,7 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
const groupCls = `${componentCls}-group`;
const listCls = `${groupCls}-list`;
// Default: '--ant-float-btn-'
const getCssVar = genCssVar(antCls, 'float-btn');
const [varName, varRef] = genCssVar(antCls, 'float-btn');
return {
[groupCls]: [
@@ -21,8 +20,8 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
// == Variable ==
// ==============================================================
{
[getCssVar('list-transform-start')]: `translate(0,${unit(floatButtonSize)})`,
[getCssVar('list-trigger-offset')]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`,
[varName`list-transform-start`]: `translate(0,${unit(floatButtonSize)})`,
[varName`list-trigger-offset`]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`,
},
// ==============================================================
@@ -81,7 +80,7 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
'&-enter, &-appear': {
opacity: 0,
transform: getCssVar('list-transform-start', true),
transform: varRef`list-transform-start`,
'&-active': {
opacity: 1,
@@ -92,7 +91,7 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
'&-leave': {
'&-active': {
opacity: 0,
transform: getCssVar('list-transform-start', true),
transform: varRef`list-transform-start`,
},
},
},
@@ -101,30 +100,28 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
// ======================== Placements ========================
'&-top': {
[listCls]: {
bottom: getCssVar('list-trigger-offset', true),
bottom: varRef`list-trigger-offset`,
},
},
'&-bottom': {
[listCls]: {
[getCssVar('list-transform-start')]:
`translate(0, calc(${unit(floatButtonSize)} * -1))`,
top: getCssVar('list-trigger-offset', true),
[varName`list-transform-start`]: `translate(0, calc(${unit(floatButtonSize)} * -1))`,
top: varRef`list-trigger-offset`,
},
},
'&-left': {
[listCls]: {
[getCssVar('list-transform-start')]: `translate(${unit(floatButtonSize)}, 0)`,
right: getCssVar('list-trigger-offset', true),
[varName`list-transform-start`]: `translate(${unit(floatButtonSize)}, 0)`,
right: varRef`list-trigger-offset`,
},
},
'&-right': {
[listCls]: {
[getCssVar('list-transform-start')]:
`translate(calc(${unit(floatButtonSize)} * -1), 0)`,
left: getCssVar('list-trigger-offset', true),
[varName`list-transform-start`]: `translate(calc(${unit(floatButtonSize)} * -1), 0)`,
left: varRef`list-trigger-offset`,
},
},
},

80
components/pagination/style/index.ts
View File

@@ -254,17 +254,16 @@ const genPaginationLargeStyle: GenerateStyle<PaginationToken, CSSObject> = (toke
const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
const { componentCls, antCls } = token;
// Default: '--ant-pagination-'
const getCssVar = genCssVar(antCls, 'pagination');
const [, varRef] = genCssVar(antCls, 'pagination');
return {
[`&${componentCls}-simple`]: {
[`${componentCls}-prev, ${componentCls}-next`]: {
height: `var(${getCssVar('item-size-actual')})`,
lineHeight: `var(${getCssVar('item-size-actual')})`,
height: varRef`item-size-actual`,
lineHeight: varRef`item-size-actual`,
verticalAlign: 'top',
[`${componentCls}-item-link`]: {
height: `var(${getCssVar('item-size-actual')})`,
height: varRef`item-size-actual`,
backgroundColor: 'transparent',
border: 0,
'&:hover': {
@@ -274,8 +273,8 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
backgroundColor: token.colorBgTextActive,
},
'&::after': {
height: `var(${getCssVar('item-size-actual')})`,
lineHeight: `var(${getCssVar('item-size-actual')})`,
height: varRef`item-size-actual`,
lineHeight: varRef`item-size-actual`,
},
},
},
@@ -283,8 +282,8 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
[`${componentCls}-simple-pager`]: {
display: 'inline-flex',
alignItems: 'center',
height: `var(${getCssVar('item-size-actual')})`,
marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`,
height: varRef`item-size-actual`,
marginInlineEnd: varRef`item-spacing-actual`,
input: {
boxSizing: 'border-box',
@@ -343,8 +342,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
const { componentCls, antCls } = token;
// Default: '--ant-pagination-'
const getCssVar = genCssVar(antCls, 'pagination');
const [, varRef] = genCssVar(antCls, 'pagination');
return {
[`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
@@ -400,7 +398,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token
${componentCls}-jump-prev,
${componentCls}-jump-next
`]: {
marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`,
marginInlineEnd: varRef`item-spacing-actual`,
},
[`
@@ -410,11 +408,11 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token
${componentCls}-jump-next
`]: {
display: 'inline-block',
minWidth: `var(${getCssVar('item-size-actual')})`,
height: `var(${getCssVar('item-size-actual')})`,
minWidth: varRef`item-size-actual`,
height: varRef`item-size-actual`,
color: token.colorText,
fontFamily: token.fontFamily,
lineHeight: `var(${getCssVar('item-size-actual')})`,
lineHeight: varRef`item-size-actual`,
textAlign: 'center',
verticalAlign: 'middle',
listStyle: 'none',
@@ -477,9 +475,9 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token
'&-quick-jumper': {
display: 'inline-block',
height: `var(${getCssVar('item-size-actual')})`,
height: varRef`item-size-actual`,
marginInlineStart: token.marginXS,
lineHeight: `var(${getCssVar('item-size-actual')})`,
lineHeight: varRef`item-size-actual`,
verticalAlign: 'top',
input: {
@@ -495,11 +493,11 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token
},
width: token.quickJumperInputWidth,
height: `var(${getCssVar('item-size-actual')})`,
height: varRef`item-size-actual`,
boxSizing: 'border-box',
margin: 0,
marginInlineStart: `var(${getCssVar('item-spacing-actual')})`,
marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`,
marginInlineStart: varRef`item-spacing-actual`,
marginInlineEnd: varRef`item-spacing-actual`,
},
},
},
@@ -509,22 +507,16 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token
const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
const { componentCls, antCls } = token;
// Default: '--ant-pagination-'
const getCssVar = genCssVar(antCls, 'pagination');
const [, varRef] = genCssVar(antCls, 'pagination');
return {
[`${componentCls}-item`]: {
display: 'inline-block',
minWidth: `var(${getCssVar('item-size-actual')})`,
height: `var(${getCssVar('item-size-actual')})`,
marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`,
minWidth: varRef`item-size-actual`,
height: varRef`item-size-actual`,
marginInlineEnd: varRef`item-spacing-actual`,
fontFamily: token.fontFamily,
lineHeight: unit(
token
.calc(`var(${getCssVar('item-size-actual')})`)
.sub(2)
.equal(),
),
lineHeight: unit(token.calc(varRef`item-size-actual`).sub(2).equal()),
textAlign: 'center',
verticalAlign: 'middle',
listStyle: 'none',
@@ -580,20 +572,19 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = (token
const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
const { componentCls, antCls } = token;
// Default: '--ant-pagination-'
const getCssVar = genCssVar(antCls, 'pagination');
const [varName, varRef] = genCssVar(antCls, 'pagination');
return {
[componentCls]: {
[getCssVar('item-size-actual')]: unit(token.itemSize),
[getCssVar('item-spacing-actual')]: unit(token.marginXS),
[varName`item-size-actual`]: unit(token.itemSize),
[varName`item-spacing-actual`]: unit(token.marginXS),
'&-small': {
[getCssVar('item-size-actual')]: unit(token.itemSizeSM),
[getCssVar('item-spacing-actual')]: unit(token.marginXXS),
[varName`item-size-actual`]: unit(token.itemSizeSM),
[varName`item-spacing-actual`]: unit(token.marginXXS),
},
'&-large': {
[getCssVar('item-size-actual')]: unit(token.itemSizeLG),
[getCssVar('item-spacing-actual')]: unit(token.marginSM),
[varName`item-size-actual`]: unit(token.itemSizeLG),
[varName`item-spacing-actual`]: unit(token.marginSM),
},
...resetComponent(token),
@@ -628,14 +619,9 @@ const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = (token) =>
[`${componentCls}-total-text`]: {
display: 'inline-block',
height: `var(${getCssVar('item-size-actual')})`,
marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`,
lineHeight: unit(
token
.calc(`var(${getCssVar('item-size-actual')})`)
.sub(2)
.equal(),
),
height: varRef`item-size-actual`,
marginInlineEnd: varRef`item-spacing-actual`,
lineHeight: unit(token.calc(varRef`item-size-actual`).sub(2).equal()),
verticalAlign: 'middle',
},

4
components/select/index.en-US.md
View File

@@ -169,7 +169,7 @@ Common props ref：[Common props](/docs/react/common-props)
## FAQ
### Why sometime search will show 2 same option when in `tags` mode? {#faq-tags-mode-duplicate}
### Why sometimes search will show 2 same option when in `tags` mode? {#faq-tags-mode-duplicate}
It's caused by option with different `label` and `value`. You can use `optionFilterProp="label"` to change filter logic instead.
@@ -196,7 +196,7 @@ Select will close when it lose focus. You can prevent event to handle this:
/>
```
### Why sometime customize Option cause scroll break? {#faq-custom-option-scroll}
### Why sometimes customize Option cause scroll break? {#faq-custom-option-scroll}
Virtual scroll internal set item height as `24px`. You need to adjust `listItemHeight` when your option height is less and `listHeight` config list container height:

4
components/select/style/select-input.ts
View File

@@ -231,6 +231,10 @@ const genSelectInputStyle: GenerateStyle<SelectToken> = (token) => {
'--select-height': token.controlHeightSM,
'--select-padding-horizontal': calc(token.paddingXS).sub(token.lineWidth).equal(),
'--select-border-radius': token.borderRadiusSM,
[`${componentCls}-clear`]: {
insetInlineEnd: 'var(--select-padding-horizontal)',
},
},
'&-lg': {

2
components/table/index.en-US.md
View File

@@ -393,7 +393,7 @@ Table can not tell what state used in `columns.render`, so it always need fully
### How to handle fixed column display over the mask layout? {#faq-fixed-column-zindex}
Fixed column use `z-index` to make it over other columns. You will find sometime fixed columns also over your mask layout. You can set `z-index` on your mask layout to resolve.
Fixed column use `z-index` to make it over other columns. You will find sometimes fixed columns also over your mask layout. You can set `z-index` on your mask layout to resolve.
### How to custom render Table Checkbox（For example, adding Tooltip）? {#faq-custom-checkbox-render}

18
components/theme/util/genStyleUtils.ts
View File

@@ -42,11 +42,15 @@ export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = ge
getCompUnitless: (() => unitless) as GetCompUnitless<ComponentTokenMap, AliasToken>,
});
export const genCssVar = (antCls: string, componentAbbr: string) => {
const cssPrefix = `--${antCls.replace('.', '')}-${componentAbbr}-`;
return (name: string, withVar = false) => {
const raw = `${cssPrefix}${name}`;
return withVar ? `var(${raw})` : raw;
};
export const genCssVar = (
antCls: string,
componentAbbr: string,
): readonly [
varName: (inputs: TemplateStringsArray) => string,
varRef: (inputs: TemplateStringsArray) => string,
] => {
const cssPrefix = `--${antCls.replace(/\./, '')}-${componentAbbr}-`;
const varName = (inputs: TemplateStringsArray) => `${cssPrefix}${inputs[0]}`;
const varRef = (inputs: TemplateStringsArray) => `var(${cssPrefix}${inputs[0]})`;
return [varName, varRef] as const;
};

2
components/tree-select/index.en-US.md
View File

@@ -145,7 +145,7 @@ Common props ref：[Common props](/docs/react/common-props)
We don't provide this since performance consideration. You can get by this way: <https://codesandbox.io/s/get-parent-node-in-onchange-eb1608>
### Why sometime customize Option cause scroll break? {#faq-custom-option-scroll}
### Why sometimes customize Option cause scroll break? {#faq-custom-option-scroll}
You can ref Select [FAQ](/components/select).