chore: enable cssVar in imageTest (#45985)

* chore: enable cssVar in imageTest

* fix: tree select style

* chore: fix avatar group style

* fix: cascader panel style

* fix: form style

* fix: slider disabled style

* fix: mentions style

* fix: tag style

* fix: tabs style

* fix: Rate style

* fix: table custom token

* chore: update snapshot

* fix: menu style

* fix: InputNumber style

* chore: recover image test

* chore: add css var image test
This commit is contained in:
MadCcc 2023-11-22 20:53:48 +08:00 committed by GitHub
parent 4203208af5
commit 80e46b7662
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 287 additions and 160 deletions

View File

@ -13,6 +13,7 @@ import type { AvatarContextType, AvatarSize } from './AvatarContext';
import AvatarContext from './AvatarContext';
import useStyle from './style';
import useCSSVar from './style/cssVar';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
export interface AvatarProps {
/** Shape of avatar, options: `circle`, `square` */
@ -146,7 +147,8 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
const prefixCls = getPrefixCls('avatar', customizePrefixCls);
const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(prefixCls);
const cssVarCls = useCSSVarCls(prefixCls);
const wrapCSSVar = useCSSVar(cssVarCls);
const sizeCls = classNames({
[`${prefixCls}-lg`]: size === 'large',
@ -166,6 +168,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
[`${prefixCls}-image`]: hasImageElement || (src && isImgExist),
[`${prefixCls}-icon`]: !!icon,
},
cssVarCls,
className,
rootClassName,
hashId,

View File

@ -8,6 +8,8 @@ import Avatar from './avatar';
import AvatarContext from './AvatarContext';
import type { AvatarContextType, AvatarSize } from './AvatarContext';
import useStyle from './style';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import useCSSVar from './style/cssVar';
interface ContextProps {
children?: React.ReactNode;
@ -60,13 +62,16 @@ const Group: React.FC<GroupProps> = (props) => {
const prefixCls = getPrefixCls('avatar', customizePrefixCls);
const groupPrefixCls = `${prefixCls}-group`;
const [wrapSSR, hashId] = useStyle(prefixCls);
const [, hashId] = useStyle(prefixCls);
const cssVarCls = useCSSVarCls(prefixCls);
const wrapCSSVar = useCSSVar(cssVarCls);
const cls = classNames(
groupPrefixCls,
{
[`${groupPrefixCls}-rtl`]: direction === 'rtl',
},
cssVarCls,
className,
rootClassName,
hashId,
@ -91,7 +96,7 @@ const Group: React.FC<GroupProps> = (props) => {
<Avatar style={maxStyle}>{`+${numOfChildren - maxCount}`}</Avatar>
</Popover>,
);
return wrapSSR(
return wrapCSSVar(
<AvatarContextProvider shape={shape} size={size}>
<div className={cls} style={style}>
{childrenShow}
@ -100,7 +105,7 @@ const Group: React.FC<GroupProps> = (props) => {
);
}
return wrapSSR(
return wrapCSSVar(
<AvatarContextProvider shape={shape} size={size}>
<div className={cls} style={style}>
{childrenWithProps}

View File

@ -327,9 +327,9 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token) => {
// ============================== Export ==============================
export const prepareToken: (token: Parameters<GenStyleFn<'Badge'>>[0]) => BadgeToken = (token) => {
const { fontSize, lineHeight, lineWidth, marginXS, colorBorderBg } = token;
const { fontHeight, lineWidth, marginXS, colorBorderBg } = token;
const badgeFontHeight = Math.round(fontSize * lineHeight);
const badgeFontHeight = fontHeight;
const badgeShadowSize = lineWidth;
const badgeTextColor = token.colorBgContainer;
const badgeColor = token.colorError;

View File

@ -430,6 +430,9 @@ exports[`renders components/button/demo/danger.tsx extend context correctly 1`]
exports[`renders components/button/demo/danger.tsx extend context correctly 2`] = `[]`;
exports[`renders components/button/demo/debug-block.tsx extend context correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
>
<div
class="ant-form-item"
>
@ -487,6 +490,7 @@ exports[`renders components/button/demo/debug-block.tsx extend context correctly
</div>
</div>
</div>
</form>
`;
exports[`renders components/button/demo/debug-block.tsx extend context correctly 2`] = `[]`;

View File

@ -415,6 +415,9 @@ exports[`renders components/button/demo/danger.tsx correctly 1`] = `
`;
exports[`renders components/button/demo/debug-block.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"
>
<div
class="ant-form-item"
>
@ -472,6 +475,7 @@ exports[`renders components/button/demo/debug-block.tsx correctly 1`] = `
</div>
</div>
</div>
</form>
`;
exports[`renders components/button/demo/debug-icon.tsx correctly 1`] = `

View File

@ -3,12 +3,14 @@ import { DownloadOutlined } from '@ant-design/icons';
import { Form, Button } from 'antd';
const App: React.FC = () => (
<Form>
<Form.Item>
<Button size="large" shape="round" block style={{ marginBottom: 12 }}>
Submit
</Button>
<Button size="large" shape="round" icon={<DownloadOutlined />} />
</Form.Item>
</Form>
);
export default App;

View File

@ -11,6 +11,7 @@ import useCheckable from './hooks/useCheckable';
import useColumnIcons from './hooks/useColumnIcons';
import useStyle from './style';
import usePanelStyle from './style/panel';
import useCSSVar from './style/cssVar';
export type PanelPickType = Exclude<PickType, 'checkable'> | 'multiple' | 'rootClassName';
@ -35,6 +36,7 @@ export default function CascaderPanel(props: CascaderPanelProps) {
const [, hashId] = useStyle(cascaderPrefixCls);
const rootCls = useCSSVarCls(prefixCls);
const cascaderRootCls = useCSSVarCls(cascaderPrefixCls);
const wrapCSSVar = useCSSVar(cascaderRootCls);
usePanelStyle(cascaderPrefixCls);
const isRtl = mergedDirection === 'rtl';
@ -52,7 +54,7 @@ export default function CascaderPanel(props: CascaderPanelProps) {
// ==================== Render =====================
return (
return wrapCSSVar(
<Panel
{...props}
checkable={checkable}
@ -62,6 +64,6 @@ export default function CascaderPanel(props: CascaderPanelProps) {
direction={mergedDirection}
expandIcon={mergedExpandIcon}
loadingIcon={loadingIcon}
/>
/>,
);
}

View File

@ -10,6 +10,7 @@ import useDebounce from './hooks/useDebounce';
import useStyle from './style';
import useCSSVar from './style/cssVar';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
const EMPTY_LIST: React.ReactNode[] = [];
@ -56,7 +57,8 @@ const ErrorList: React.FC<ErrorListProps> = ({
const baseClassName = `${prefixCls}-item-explain`;
const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(prefixCls);
const cssVarCls = useCSSVarCls(prefixCls);
const wrapCSSVar = useCSSVar(cssVarCls);
const collapseMotion: CSSMotionProps = useMemo(() => initCollapseMotion(prefixCls), [prefixCls]);
@ -97,7 +99,7 @@ const ErrorList: React.FC<ErrorListProps> = ({
return (
<div
{...helpProps}
className={classNames(baseClassName, holderClassName, rootClassName, hashId)}
className={classNames(baseClassName, holderClassName, cssVarCls, rootClassName, hashId)}
style={holderStyle}
role="alert"
>

View File

@ -20,6 +20,7 @@ import useStyle from './style';
import useCSSVar from './style/cssVar';
import ValidateMessagesContext from './validateMessagesContext';
import type { FeedbackIcons } from './FormItem';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
export type RequiredMark =
| boolean
@ -105,7 +106,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
// Style
const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(prefixCls);
const cssVarCls = useCSSVarCls(prefixCls);
const wrapCSSVar = useCSSVar(cssVarCls);
const formClassName = classNames(
prefixCls,
@ -115,6 +117,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-${mergedSize}`]: mergedSize,
},
cssVarCls,
hashId,
contextForm?.className,
className,

View File

@ -18,9 +18,11 @@ import useFormItemStatus from '../hooks/useFormItemStatus';
import useFrameState from '../hooks/useFrameState';
import useItemRef from '../hooks/useItemRef';
import useStyle from '../style';
import useCSSVar from '../style/cssVar';
import { getFieldId, toArray } from '../util';
import ItemHolder from './ItemHolder';
import StatusProvider from './StatusProvider';
import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';
const NAME_SPLIT = '__SPLIT__';
@ -126,7 +128,9 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
const prefixCls = getPrefixCls('form', customizePrefixCls);
// Style
const [wrapSSR, hashId] = useStyle(prefixCls);
const [, hashId] = useStyle(prefixCls);
const cssVarCls = useCSSVarCls(prefixCls);
const wrapCSSVar = useCSSVar(cssVarCls);
// ========================= Warn =========================
const warning = devUseWarning('Form.Item');
@ -240,7 +244,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
<ItemHolder
key="row"
{...props}
className={classNames(className, hashId)}
className={classNames(className, cssVarCls, hashId)}
prefixCls={prefixCls}
fieldId={fieldId}
isRequired={isRequired}
@ -255,7 +259,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
}
if (!hasName && !isRenderProps && !dependencies) {
return wrapSSR(renderLayout(mergedChildren) as JSX.Element);
return wrapCSSVar(renderLayout(mergedChildren) as JSX.Element);
}
let variables: Record<string, string> = {};
@ -269,7 +273,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
}
// >>>>> With Field
return wrapSSR(
return wrapCSSVar(
<Field
{...props}
messageVariables={variables}

View File

@ -1,4 +1,9 @@
import { genCSSVarRegister } from '../../theme/internal';
import { prepareComponentToken } from '.';
import { formatComponentToken, prepareComponentToken } from '.';
export default genCSSVarRegister('InputNumber', prepareComponentToken);
export default genCSSVarRegister('InputNumber', prepareComponentToken, {
format: formatComponentToken,
unitless: {
handleOpacity: true,
},
});

View File

@ -13,6 +13,7 @@ import { genCompactItemStyle } from '../../style/compact-item';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { unit } from '@ant-design/cssinjs';
import type { FormatComponentToken } from '../../theme/util/genComponentStyleHook';
export interface ComponentToken extends SharedComponentToken {
/**
@ -56,6 +57,10 @@ export interface ComponentToken extends SharedComponentToken {
* @descEN Border color of handle
*/
handleBorderColor: string;
/**
* @internal
*/
handleOpacity: number;
}
type InputNumberToken = FullToken<'InputNumber'> & SharedInputToken;
@ -104,7 +109,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
borderRadiusSM,
borderRadiusLG,
controlWidth,
handleVisible,
handleOpacity,
handleBorderColor,
calc,
} = token;
@ -242,7 +247,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
borderStartEndRadius: borderRadius,
borderEndEndRadius: borderRadius,
borderEndStartRadius: 0,
opacity: handleVisible === true ? 1 : 0,
opacity: handleOpacity,
display: 'flex',
flexDirection: 'column',
alignItems: 'stretch',
@ -460,6 +465,12 @@ export const prepareComponentToken: GetDefaultToken<'InputNumber'> = (token) =>
handleBg: token.colorBgContainer,
handleHoverColor: token.colorPrimary,
handleBorderColor: token.colorBorder,
handleOpacity: 0,
});
export const formatComponentToken: FormatComponentToken<'InputNumber'> = (token) => ({
...token,
handleOpacity: token.handleVisible === true ? 1 : 0,
});
export default genComponentStyleHook(
@ -476,4 +487,7 @@ export default genComponentStyleHook(
];
},
prepareComponentToken,
{
format: formatComponentToken,
},
);

View File

@ -190,7 +190,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
ref={mergedRef}
options={mergedOptions}
suffix={hasFeedback && feedbackIcon}
classes={{ affixWrapper: classNames(hashId, className) }}
classes={{ affixWrapper: classNames(rootCls, hashId, className) }}
>
{mentionOptions}
</RcMentions>

View File

@ -1,8 +1,9 @@
import { genCSSVarRegister } from '../../theme/internal';
import { prepareComponentToken } from '.';
import { formatComponentToken, prepareComponentToken } from '.';
export default genCSSVarRegister('Menu', prepareComponentToken, {
unitless: {
groupTitleLineHeight: true,
},
format: formatComponentToken,
});

View File

@ -17,6 +17,7 @@ import getHorizontalStyle from './horizontal';
import getRTLStyle from './rtl';
import getThemeStyle from './theme';
import getVerticalStyle from './vertical';
import type { FormatComponentToken } from 'antd/es/theme/util/genComponentStyleHook';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
@ -366,7 +367,7 @@ export interface ComponentToken {
*/
darkDangerItemActiveBg: string;
/** @internal */
subMenuTitleWidth: number | string;
itemWidth: string;
}
export interface MenuToken extends FullToken<'Menu'> {
@ -929,10 +930,18 @@ export const prepareComponentToken: GetDefaultToken<'Menu'> = (token) => {
darkDangerItemSelectedColor: colorTextLightSolid,
darkDangerItemActiveBg: colorError,
subMenuTitleWidth: `calc(100% - ${token.marginXXS * 2}px)`,
// internal
itemWidth: '',
};
};
export const formatComponentToken: FormatComponentToken<'Menu'> = (token) => ({
...token,
itemWidth: token.activeBarWidth
? `calc(100% + ${token.activeBarBorderWidth}px)`
: `calc(100% - ${token.itemMarginInline * 2}px)`,
});
// ============================== Export ==============================
export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResult => {
const useOriginHook = genComponentStyleHook(
@ -975,10 +984,6 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
menuPanelMaskInset: -7, // Still a hardcode here since it's offset by rc-align
menuSubMenuBg: colorBgElevated,
calc: token.calc,
subMenuTitleWidth:
token.activeBarWidth && token.activeBarBorderWidth
? `calc(100% + ${token.activeBarBorderWidth}px)`
: `calc(100% - ${token.marginXXS * 2}px)`,
});
const menuDarkToken = mergeToken<MenuToken>(menuToken, {
@ -1064,6 +1069,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
['colorActiveBarBorderSize', 'activeBarBorderWidth'],
['colorItemBgSelected', 'itemSelectedBg'],
],
format: formatComponentToken,
},
);

View File

@ -222,11 +222,6 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
background: subMenuItemBg,
},
// Item
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
width: token.subMenuTitleWidth,
},
[`${componentCls}-item`]: {
position: 'relative',

View File

@ -12,6 +12,7 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
menuArrowSize,
marginXS,
itemMarginBlock,
itemWidth,
} = token;
const paddingWithArrow = token.calc(menuArrowSize).add(padding).add(marginXS).equal();
@ -24,19 +25,19 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
height: itemHeight,
lineHeight: `${unit(itemHeight)}`,
lineHeight: unit(itemHeight),
paddingInline: padding,
overflow: 'hidden',
textOverflow: 'ellipsis',
marginInline: itemMarginInline,
marginBlock: itemMarginBlock,
width: token.subMenuTitleWidth,
width: itemWidth,
},
[`> ${componentCls}-item,
> ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
height: itemHeight,
lineHeight: `${unit(itemHeight)}`,
lineHeight: unit(itemHeight),
},
[`${componentCls}-item-group-list ${componentCls}-submenu-title,
@ -68,7 +69,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
const inlineItemStyle: CSSObject = {
height: itemHeight,
lineHeight: `${unit(itemHeight)}`,
lineHeight: unit(itemHeight),
listStylePosition: 'inside',
listStyleType: 'disc',
};
@ -193,7 +194,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
[`${componentCls}-item-icon, ${iconCls}`]: {
margin: 0,
fontSize: collapsedIconSize,
lineHeight: `${unit(itemHeight)}`,
lineHeight: unit(itemHeight),
'+ span': {
display: 'inline-block',

View File

@ -1558,7 +1558,7 @@ Array [
</li>
</ul>,
<span
class="ant-rate-text"
style="font-size: 14px; margin-left: 8px;"
>
allowClear: true
</span>,
@ -1860,7 +1860,7 @@ Array [
</li>
</ul>,
<span
class="ant-rate-text"
style="font-size: 14px; margin-left: 8px;"
>
allowClear: false
</span>,
@ -3166,7 +3166,7 @@ exports[`renders components/rate/demo/text.tsx extend context correctly 1`] = `
</div>
</ul>
<span
class="ant-rate-text"
style="font-size: 14px; margin-left: 8px;"
>
normal
</span>

View File

@ -1552,7 +1552,7 @@ Array [
</li>
</ul>,
<span
class="ant-rate-text"
style="font-size:14px;margin-left:8px"
>
allowClear: true
</span>,
@ -1854,7 +1854,7 @@ Array [
</li>
</ul>,
<span
class="ant-rate-text"
style="font-size:14px;margin-left:8px"
>
allowClear: false
</span>,
@ -3057,7 +3057,7 @@ exports[`renders components/rate/demo/text.tsx correctly 1`] = `
</li>
</ul>
<span
class="ant-rate-text"
style="font-size:14px;margin-left:8px"
>
normal
</span>

View File

@ -4,10 +4,10 @@ import { Rate } from 'antd';
const App: React.FC = () => (
<>
<Rate defaultValue={3} />
<span className="ant-rate-text">allowClear: true</span>
<span style={{ fontSize: 14, marginLeft: 8 }}>allowClear: true</span>
<br />
<Rate allowClear={false} defaultValue={3} />
<span className="ant-rate-text">allowClear: false</span>
<span style={{ fontSize: 14, marginLeft: 8 }}>allowClear: false</span>
</>
);

View File

@ -9,7 +9,7 @@ const App: React.FC = () => {
return (
<span>
<Rate tooltips={desc} onChange={setValue} value={value} />
{value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
{value ? <span style={{ fontSize: 14, marginLeft: 8 }}>{desc[value - 1]}</span> : ''}
</span>
);
};

View File

@ -122,6 +122,7 @@ const genRateStyle: GenerateStyle<RateToken> = (token) => {
...genRateStarStyle(token),
// text styles
// TODO: Remove in v6
[`+ ${componentCls}-text`]: {
display: 'inline-block',
marginInlineStart: token.marginXS,

View File

@ -49,14 +49,55 @@ export interface ComponentToken {
* @descEN Size of dot
*/
dotSize: number;
/**
* @desc
* @descEN Background color of rail
*/
railBg: string;
/**
* @desc
* @descEN Background color of rail when hover
*/
railHoverBg: string;
/**
* @desc
* @descEN Background color of track
*/
trackBg: string;
/**
* @desc
* @descEN Background color of track when hover
*/
trackHoverBg: string;
/**
* @desc
* @descEN Color of handle
*/
handleColor: string;
/**
* @desc
* @descEN Color of handle when active
*/
handleActiveColor: string;
/**
* @desc
* @descEN Color of handle when disabled
*/
handleColorDisabled: string;
/**
* @desc
* @descEN Border color of dot
*/
dotBorderColor: string;
/**
* @desc
* @descEN Border color of dot when active
*/
dotActiveBorderColor: string;
/**
* @desc
* @descEN Background color of track when disabled
*/
trackBgDisabled: string;
}
@ -76,6 +117,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
marginFull,
marginPart,
colorFillContentHover,
handleColorDisabled,
calc,
} = token;
@ -280,9 +322,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
cursor: 'not-allowed',
width: token.handleSize,
height: token.handleSize,
boxShadow: `0 0 0 ${unit(token.handleLineWidth)} ${new TinyColor(token.colorTextDisabled)
.onBackground(token.colorBgContainer)
.toHexShortString()}`,
boxShadow: `0 0 0 ${unit(token.handleLineWidth)} ${handleColorDisabled}`,
insetInlineStart: 0,
insetBlockStart: 0,
},
@ -422,6 +462,9 @@ export const prepareComponentToken: GetDefaultToken<'Slider'> = (token) => {
trackHoverBg: token.colorPrimaryBorderHover,
handleColor: token.colorPrimaryBorder,
handleActiveColor: token.colorPrimary,
handleColorDisabled: new TinyColor(token.colorTextDisabled)
.onBackground(token.colorBgContainer)
.toHexShortString(),
dotBorderColor: token.colorBorderSecondary,
dotActiveBorderColor: token.colorPrimaryBorder,
trackBgDisabled: token.colorBgContainerDisabled,

View File

@ -600,12 +600,16 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
direction={direction}
expandable={mergedExpandable}
prefixCls={prefixCls}
className={classNames({
className={classNames(
{
[`${prefixCls}-middle`]: mergedSize === 'middle',
[`${prefixCls}-small`]: mergedSize === 'small',
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-empty`]: rawData.length === 0,
})}
},
rootCls,
hashId,
)}
data={pageData}
rowKey={getRowKey}
rowClassName={internalRowClassName}

View File

@ -350,6 +350,7 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
horizontalMargin,
verticalItemPadding,
verticalItemMargin,
calc,
} = token;
return {
// ========================== Top & Bottom ==========================
@ -452,7 +453,7 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
[`${componentCls}-left, ${componentCls}-right`]: {
[`> ${componentCls}-nav, > div > ${componentCls}-nav`]: {
flexDirection: 'column',
minWidth: token.calc(token.controlHeight).mul(1.25).equal(),
minWidth: calc(token.controlHeight).mul(1.25).equal(),
// >>>>>>>>>>> Tab
[`${componentCls}-tab`]: {
@ -528,7 +529,7 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
[`> ${componentCls}-content-holder, > div > ${componentCls}-content-holder`]: {
marginLeft: {
_skip_check_: true,
value: `-${unit(token.lineWidth)}`,
value: unit(calc(token.lineWidth).mul(-1).equal()),
},
borderLeft: {
_skip_check_: true,
@ -560,7 +561,7 @@ const genPositionStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
order: 0,
marginRight: {
_skip_check_: true,
value: token.calc(token.lineWidth).mul(-1).equal(),
value: calc(token.lineWidth).mul(-1).equal(),
},
borderRight: {
_skip_check_: true,
@ -751,7 +752,7 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
};
const genRtlStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
const { componentCls, tabsHorizontalItemMarginRTL, iconCls, cardGutter } = token;
const { componentCls, tabsHorizontalItemMarginRTL, iconCls, cardGutter, calc } = token;
const rtlCls = `${componentCls}-rtl`;
return {
[rtlCls]: {
@ -789,7 +790,7 @@ const genRtlStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
},
marginLeft: {
_skip_check_: true,
value: `-${unit(token.marginXXS)}`,
value: unit(calc(token.marginXXS).mul(-1).equal()),
},
[iconCls]: {

View File

@ -3,6 +3,7 @@ import classNames from 'classnames';
import { ConfigContext } from '../config-provider';
import useStyle from './style';
import useCSSVar from './style/cssVar';
export interface CheckableTagProps {
prefixCls?: string;
@ -38,7 +39,8 @@ const CheckableTag = React.forwardRef<HTMLSpanElement, CheckableTagProps>((props
const prefixCls = getPrefixCls('tag', customizePrefixCls);
// Style
const [wrapSSR, hashId] = useStyle(prefixCls);
const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(prefixCls);
const cls = classNames(
prefixCls,
@ -51,7 +53,7 @@ const CheckableTag = React.forwardRef<HTMLSpanElement, CheckableTagProps>((props
hashId,
);
return wrapSSR(
return wrapCSSVar(
<span
{...restProps}
ref={ref}

View File

@ -67,6 +67,10 @@ export type GetDefaultToken<C extends OverrideComponent> =
| OverrideTokenWithoutDerivative[C]
| ((token: GlobalToken) => OverrideTokenWithoutDerivative[C]);
export type FormatComponentToken<C extends OverrideComponent> = (
token: NonNullable<OverrideTokenWithoutDerivative[C]>,
) => NonNullable<OverrideTokenWithoutDerivative[C]>;
const getDefaultComponentToken = <C extends OverrideComponent>(
component: C,
token: GlobalToken,
@ -82,7 +86,10 @@ const getComponentToken = <C extends OverrideComponent>(
component: C,
token: GlobalToken,
defaultToken: OverrideTokenWithoutDerivative[C],
options?: { deprecatedTokens?: [ComponentTokenKey<C>, ComponentTokenKey<C>][] },
options?: {
deprecatedTokens?: [ComponentTokenKey<C>, ComponentTokenKey<C>][];
format?: FormatComponentToken<C>;
},
) => {
const customToken = { ...(token[component] as ComponentToken<C>) };
if (options?.deprecatedTokens) {
@ -103,7 +110,10 @@ const getComponentToken = <C extends OverrideComponent>(
}
});
}
const mergedToken: any = { ...defaultToken, ...customToken };
let mergedToken: any = { ...defaultToken, ...customToken };
if (options?.format) {
mergedToken = options.format(mergedToken);
}
// Remove same value as global token to minimize size
Object.keys(mergedToken).forEach((key) => {
@ -142,6 +152,7 @@ export default function genComponentStyleHook<C extends OverrideComponent>(
* Set order of component style. Default is -999.
*/
order?: number;
format?: FormatComponentToken<C>;
} = {},
) {
const cells = (Array.isArray(componentName) ? componentName : [componentName, componentName]) as [
@ -201,6 +212,7 @@ export default function genComponentStyleHook<C extends OverrideComponent>(
const componentCls = `.${prefixCls}`;
const componentToken = getComponentToken(component, realToken, defaultComponentToken, {
deprecatedTokens: options.deprecatedTokens,
format: options.format,
});
if (cssVar) {
@ -296,6 +308,7 @@ export const genCSSVarRegister = <C extends OverrideComponent>(
unitless?: {
[key in ComponentTokenKey<C>]: boolean;
};
format?: FormatComponentToken<C>;
},
) => {
function prefixToken(key: string) {
@ -327,7 +340,10 @@ export const genCSSVarRegister = <C extends OverrideComponent>(
},
() => {
const defaultToken = getDefaultComponentToken(component, realToken, getDefaultToken);
const componentToken = getComponentToken(component, realToken, defaultToken);
const componentToken = getComponentToken(component, realToken, defaultToken, {
format: options?.format,
});
console.log(componentToken);
Object.keys(defaultToken).forEach((key) => {
componentToken[prefixToken(key)] = componentToken[key];
delete componentToken[key];

View File

@ -1,4 +1,4 @@
import { unit, type CSSObject } from '@ant-design/cssinjs';
import { type CSSObject, unit } from '@ant-design/cssinjs';
import { resetComponent, resetIcon, textEllipsis } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@ -318,12 +318,10 @@ const genTransferStyle: GenerateStyle<TransferToken> = (token: TransferToken): C
antCls,
iconCls,
componentCls,
headerHeight,
marginXS,
marginXXS,
fontSizeIcon,
colorBgContainerDisabled,
fontHeight,
} = token;
return {
@ -362,14 +360,6 @@ const genTransferStyle: GenerateStyle<TransferToken> = (token: TransferToken): C
},
},
},
[`${antCls}-empty-image`]: {
// headerHeight / 2 - Math.round(fontSize * lineHeight)
maxHeight: token
.calc(token.calc(headerHeight).div(2).equal())
.sub(fontHeight)
.equal(),
},
},
};
};

View File

@ -20,6 +20,7 @@ import useSize from '../config-provider/hooks/useSize';
import type { SizeType } from '../config-provider/SizeContext';
import { FormItemInputContext } from '../form/context';
import useSelectStyle from '../select/style';
import useSelectCSSVar from '../select/style/cssVar';
import useBuiltinPlacements from '../select/useBuiltinPlacements';
import useShowArrow from '../select/useShowArrow';
import useIcons from '../select/useIcons';
@ -157,7 +158,7 @@ const InternalTreeSelect = <
useStyle(treeSelectPrefixCls, treePrefixCls);
const rootCls = useCSSVarCls(prefixCls);
const treeSelectRootCls = useCSSVarCls(treeSelectPrefixCls);
const wrapCSSVar = useCSSVar(rootCls);
const wrapCSSVar = useSelectCSSVar(rootCls);
const treeSelectWrapCSSVar = useCSSVar(treeSelectRootCls);
const mergedDropdownClassName = classNames(

View File

@ -365,7 +365,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
}
const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(prefixCls);
const wrapCSSVar = useCSSVar(`${prefixCls}-wrapper`);
const [contextLocale] = useLocale('Upload', defaultLocale.Upload);

View File

@ -95,6 +95,13 @@ export default function imageTest(component: React.ReactElement, options: ImageT
<ConfigProvider theme={{ algorithm }}>{component}</ConfigProvider>
</div>,
);
test(
`[CSS Var] component image screenshot should correct ${key}`,
<div style={{ background: key === 'dark' ? '#000' : '', padding: `24px 12px` }} key={key}>
<div>CSS Var</div>
<ConfigProvider theme={{ algorithm, cssVar: true }}>{component}</ConfigProvider>
</div>,
);
});
} else {
test(
@ -107,6 +114,17 @@ export default function imageTest(component: React.ReactElement, options: ImageT
))}
</>,
);
test(
`[CSS Var] component image screenshot should correct`,
<>
<div>CSS Var</div>
{Object.entries(themes).map(([key, algorithm]) => (
<div style={{ background: key === 'dark' ? '#000' : '', padding: `24px 12px` }} key={key}>
<ConfigProvider theme={{ algorithm }}>{component}</ConfigProvider>
</div>
))}
</>,
);
}
}