mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
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:
parent
4203208af5
commit
80e46b7662
@ -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,
|
||||
|
@ -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}
|
||||
|
@ -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;
|
||||
|
@ -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`] = `[]`;
|
||||
|
@ -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`] = `
|
||||
|
@ -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;
|
||||
|
@ -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}
|
||||
/>
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
@ -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"
|
||||
>
|
||||
|
@ -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,
|
||||
|
@ -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}
|
||||
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
@ -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,
|
||||
},
|
||||
);
|
||||
|
@ -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>
|
||||
|
@ -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,
|
||||
});
|
||||
|
@ -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,
|
||||
},
|
||||
);
|
||||
|
||||
|
@ -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',
|
||||
|
||||
|
@ -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',
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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}
|
||||
|
@ -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]: {
|
||||
|
@ -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}
|
||||
|
@ -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];
|
||||
|
@ -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(),
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
@ -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(
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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>
|
||||
))}
|
||||
</>,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user