mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

Merge branch 'next' into next-merge-feature

Browse Source
This commit is contained in:
MadCcc 2022-03-25 20:19:42 +08:00
commit 9f3dc50df6
50 changed files with 1843 additions and 674 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/pr-check-ci.yml vendored
View File

@ -13,7 +13,7 @@ jobs:
with: with:
filter-label: 'BranchAutoMerge' filter-label: 'BranchAutoMerge'
filter-creator-authority: 'write' filter-creator-authority: 'write'
filter-head-ref: 'master, feature, next, master-merge-feature, feature-merge-master, next-merge-master' filter-head-ref: 'master, feature, next, master-merge-feature, feature-merge-master, next-merge-master, next-merge-feature'
filter-support-fork: false filter-support-fork: false
skip-run-names: 'deploy preview, pr-check-ci, build preview failed, suggest-related-links' skip-run-names: 'deploy preview, pr-check-ci, build preview failed, suggest-related-links'
conflict-review-body: '😅 This branch has conflicts that must be resolved!' conflict-review-body: '😅 This branch has conflicts that must be resolved!'

3
components/_util/theme/index.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { CSSInterpolation, Theme, useCacheToken, useStyleRegister } from '@ant-design/cssinjs'; import { CSSInterpolation, Theme, useCacheToken, useStyleRegister } from '@ant-design/cssinjs';
import defaultSeedToken, { derivative as defaultDerivative } from './themes/default'; import defaultSeedToken, { derivative as defaultDerivative } from './themes/default';
import version from '../../version'; import version from '../../version';
import { resetComponent, resetIcon, clearFix } from './util'; import { resetComponent, resetIcon, clearFix, roundedArrow } from './util';
import formatToken from './util/alias'; import formatToken from './util/alias';
import { import {
initSlideMotion, initSlideMotion,
@ -29,6 +29,7 @@ export {
resetComponent, resetComponent,
resetIcon, resetIcon,
clearFix, clearFix,
roundedArrow,
initSlideMotion, initSlideMotion,
slideUpIn, slideUpIn,
slideUpOut, slideUpOut,

9
components/_util/theme/interface.ts
View File

@ -1,5 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import type { ComponentToken as ButtonComponentToken } from '../../button/style'; import type { ComponentToken as ButtonComponentToken } from '../../button/style';
import type { ComponentToken as DividerComponentToken } from '../../divider/style';
import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
export const PresetColors = [ export const PresetColors = [
'blue', 'blue',
@ -32,6 +34,8 @@ export interface OverrideToken {
// Customize component // Customize component
button?: ButtonComponentToken; button?: ButtonComponentToken;
divider?: DividerComponentToken;
typography?: TypographyComponentToken;
} }
/** Final token which contains the components level override */ /** Final token which contains the components level override */
@ -87,6 +91,7 @@ export interface SeedToken extends PresetColorType {
// zIndex // zIndex
/** Base zIndex of component like BackTop, Affix which can be cover by large popup */ /** Base zIndex of component like BackTop, Affix which can be cover by large popup */
zIndexBase: number; zIndexBase: number;
zIndexPopover: number;
/** Base popup component zIndex */ /** Base popup component zIndex */
zIndexPopup: number; zIndexPopup: number;
} }
@ -195,6 +200,9 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
fontSizeHeading4: number; fontSizeHeading4: number;
fontSizeHeading5: number; fontSizeHeading5: number;
/** For heading like h1, h2, h3 or option selected item */
fontWeightStrong: number;
// LineHeight // LineHeight
lineHeight: number; lineHeight: number;
lineHeightLG: number; lineHeightLG: number;
@ -253,6 +261,7 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
paddingXXS: number; paddingXXS: number;
paddingLG: number; paddingLG: number;
marginXS: number; marginXS: number;
marginSM: number;
marginLG: number; marginLG: number;
marginXXS: number; marginXXS: number;
} }

1
components/_util/theme/themes/default.ts
View File

@ -194,6 +194,7 @@ const seedToken: SeedToken = {
// zIndex // zIndex
zIndexBase: 0, zIndexBase: 0,
zIndexPopover: 1030,
zIndexPopup: 1000, zIndexPopup: 1000,
}; };

23
components/_util/theme/util/alias.ts
View File

@ -79,8 +79,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
controlLineType: 'solid', controlLineType: 'solid',
controlRadius: mergedToken.radiusBase, controlRadius: mergedToken.radiusBase,
colorBorder: new TinyColor({ h: 0, s: 0, v: 85 }).toHexString(), colorBorder: new TinyColor({ h: 0, s: 0, v: 85 }).toHexString(),
colorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(), colorSplit: 'rgba(0, 0, 0, 0.06)',
controlItemBgActive: primaryColors[0], controlItemBgActive: primaryColors[0],
fontWeightStrong: 600,
// 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥 // 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
// FIXME: Handle this when derivative is ready // FIXME: Handle this when derivative is ready
@ -97,21 +98,21 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
linkHoverDecoration: 'none', linkHoverDecoration: 'none',
linkFocusDecoration: 'none', linkFocusDecoration: 'none',
controlPaddingHorizontal: 16, controlPaddingHorizontal: 12,
controlPaddingHorizontalSM: 12, controlPaddingHorizontalSM: 8,
padding: 16, padding: 16,
margin: 16, margin: 16,
paddingXXS: 2, paddingXXS: 4,
paddingXS: 4, paddingXS: 8,
paddingSM: 8, paddingSM: 12,
paddingLG: 32, paddingLG: 24,
marginXXS: 2, marginXXS: 4,
marginXS: 4, marginXS: 8,
// marginSM: 8, marginSM: 12,
marginLG: 32, marginLG: 24,
boxShadow: ` boxShadow: `
0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px -4px rgba(0, 0, 0, 0.12),

5
components/_util/theme/util/index.tsx
View File

@ -2,6 +2,8 @@
import { CSSObject } from '@ant-design/cssinjs'; import { CSSObject } from '@ant-design/cssinjs';
import type { DerivativeToken } from '..'; import type { DerivativeToken } from '..';
export { roundedArrow } from './roundedArrow';
export const resetComponent = (token: DerivativeToken): CSSObject => ({ export const resetComponent = (token: DerivativeToken): CSSObject => ({
boxSizing: 'border-box', boxSizing: 'border-box',
margin: 0, margin: 0,
@ -15,7 +17,8 @@ export const resetComponent = (token: DerivativeToken): CSSObject => ({
}); });
export const resetIcon = (): CSSObject => ({ export const resetIcon = (): CSSObject => ({
display: 'inline-block', display: 'inline-flex',
alignItems: 'center',
color: 'inherit', color: 'inherit',
fontStyle: 'normal', fontStyle: 'normal',
lineHeight: 0, lineHeight: 0,

39
components/_util/theme/util/roundedArrow.tsx Normal file
View File

@ -0,0 +1,39 @@
/* eslint-disable import/prefer-default-export */
import { CSSObject } from '@ant-design/cssinjs';
import seedToken from '../themes/default';
export const roundedArrow = (width: number, outerRadius: number, bgColor: string): CSSObject => {
const cornerHeight = outerRadius * (1 - 1 / Math.sqrt(2));
const { radiusBase } = seedToken;
const ax = width - cornerHeight;
const ay = 2 * width + cornerHeight;
const bx = ax + outerRadius * (1 / Math.sqrt(2));
const by = 2 * width;
const cx = 2 * width - radiusBase;
const cy = 2 * width;
const dx = 2 * width;
const dy = 2 * width - radiusBase;
const fx = 2 * width + cornerHeight;
const fy = width - cornerHeight;
const ex = 2 * width;
const ey = fy + outerRadius * (1 / Math.sqrt(2));
return {
borderRadius: `0 0 ${radiusBase}px 0`,
pointerEvents: 'none',
'&::before': {
position: 'absolute',
top: -width,
insetInlineStart: -width,
width: width * 3,
height: width * 3,
background: `linear-gradient(to left, ${bgColor} 50%, ${bgColor} 50%) no-repeat ${Math.ceil(
-width + 1,
)}px ${Math.ceil(-width + 1)}px`,
content: '""',
clipPath: `path('M ${ax} ${ay} A ${outerRadius} ${outerRadius} 0 0 1 ${bx} ${by} L ${cx} ${cy} A ${radiusBase} ${radiusBase} 0 0 0 ${dx} ${dy} L ${ex} ${ey} A ${outerRadius} ${outerRadius} 0 0 1 ${fx} ${fy} Z')`,
},
};
};

2
components/cascader/style/index.tsx
View File

@ -123,7 +123,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
[`&-active:not(${cascaderMenuItemCls}-disabled)`]: { [`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
[`&, &:hover`]: { [`&, &:hover`]: {
fontWeight: 600, // FIXME: hardcode fontWeight: token.fontWeightStrong,
backgroundColor: token.controlItemBgActive, backgroundColor: token.controlItemBgActive,
}, },
}, },

2
components/checkbox/style/index.tsx
View File

@ -184,7 +184,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
'&:after': { '&:after': {
opacity: 1, opacity: 1,
transform: 'rotate(45deg) scale(1) translate(-50%,-50%)', transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack} 0.1s`, transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack} ${token.motionDurationFast}`,
}, },
}, },

1
components/config-provider/__tests__/components.test.js
View File

@ -40,6 +40,7 @@ import Rate from '../../rate';
import Select from '../../select'; import Select from '../../select';
import Skeleton from '../../skeleton'; import Skeleton from '../../skeleton';
import Slider from '../../slider'; import Slider from '../../slider';
// eslint-disable-next-line import/no-named-as-default
import Spin from '../../spin'; import Spin from '../../spin';
import Statistic from '../../statistic'; import Statistic from '../../statistic';
import Steps from '../../steps'; import Steps from '../../steps';

4
components/descriptions/Cell.tsx
View File

@ -60,7 +60,7 @@ const Cell: React.FC<CellProps> = ({
colSpan={span} colSpan={span}
> >
<div className={`${itemPrefixCls}-item-container`}> <div className={`${itemPrefixCls}-item-container`}>
{label && ( {(label || label === 0) && (
<span <span
className={classNames(`${itemPrefixCls}-item-label`, { className={classNames(`${itemPrefixCls}-item-label`, {
[`${itemPrefixCls}-item-no-colon`]: !colon, [`${itemPrefixCls}-item-no-colon`]: !colon,
@ -70,7 +70,7 @@ const Cell: React.FC<CellProps> = ({
{label} {label}
</span> </span>
)} )}
{content && ( {(content || content === 0) && (
<span className={classNames(`${itemPrefixCls}-item-content`)} style={contentStyle}> <span className={classNames(`${itemPrefixCls}-item-content`)} style={contentStyle}>
{content} {content}
</span> </span>

40
components/descriptions/__tests__/__snapshots__/index.test.js.snap
View File

@ -209,6 +209,46 @@ exports[`Descriptions column is number 1`] = `
</div> </div>
`; `;
exports[`Descriptions number 0 should render correct 1`] = `
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
style="color: red;"
>
0
</span>
<span
class="ant-descriptions-item-content"
style="color: red;"
>
0
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
`;
exports[`Descriptions should work with React Fragment 1`] = ` exports[`Descriptions should work with React Fragment 1`] = `
<div <div
class="ant-descriptions" class="ant-descriptions"

11
components/descriptions/__tests__/index.test.js
View File

@ -238,4 +238,15 @@ describe('Descriptions', () => {
wrapper.setProps({ extra: undefined }); wrapper.setProps({ extra: undefined });
expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(false); expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(false);
}); });
it('number 0 should render correct', () => {
const wrapper = mount(
<Descriptions>
<Descriptions.Item label={0} labelStyle={{ color: 'red' }} contentStyle={{ color: 'red' }}>
{0}
</Descriptions.Item>
</Descriptions>,
);
expect(wrapper.render()).toMatchSnapshot();
});
}); });

86
components/divider/style/index.tsx
View File

@ -9,14 +9,14 @@ import {
GenerateStyle, GenerateStyle,
} from '../../_util/theme'; } from '../../_util/theme';
interface DividerToken extends DerivativeToken { /** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
sizePaddingEdgeHorizontal: number;
}
interface DividerToken extends DerivativeToken, ComponentToken {
dividerCls: string; dividerCls: string;
dividerBorderColor: string;
dividerBorderWidth: number;
dividerNotDefaultTextPadding: number;
dividerVerticalGutterMargin: number; dividerVerticalGutterMargin: number;
dividerHorizontalWithTextGutterMargin: number; dividerHorizontalWithTextGutterMargin: number;
dividerHorizontalGutterMargin: number; dividerHorizontalGutterMargin: number;
@ -24,12 +24,12 @@ interface DividerToken extends DerivativeToken {
// ============================== Shared ============================== // ============================== Shared ==============================
const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => { const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
const { dividerCls } = token; const { dividerCls, sizePaddingEdgeHorizontal, colorSplit, controlLineWidth } = token;
return { return {
[dividerCls]: { [dividerCls]: {
...resetComponent(token), ...resetComponent(token),
borderBlockStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`, borderBlockStart: `${controlLineWidth}px solid ${colorSplit}`,
// vertical // vertical
'&-vertical': { '&-vertical': {
@ -40,7 +40,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
margin: `0 ${token.dividerVerticalGutterMargin}px`, margin: `0 ${token.dividerVerticalGutterMargin}px`,
verticalAlign: 'middle', verticalAlign: 'middle',
borderTop: 0, borderTop: 0,
borderInlineStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`, borderInlineStart: `${controlLineWidth}px solid ${colorSplit}`,
}, },
'&-horizontal': { '&-horizontal': {
@ -59,13 +59,13 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
fontSize: token.fontSizeLG, fontSize: token.fontSizeLG,
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
textAlign: 'center', textAlign: 'center',
borderBlockStart: `0 ${token.dividerBorderColor}`, borderBlockStart: `0 ${colorSplit}`,
'&::before, &::after': { '&::before, &::after': {
position: 'relative', position: 'relative',
top: '50%', top: '50%',
width: '50%', width: '50%',
borderBlockStart: `${token.dividerBorderWidth}px solid transparent`, borderBlockStart: `${controlLineWidth}px solid transparent`,
// Chrome not accept `inherit` in `border-top` // Chrome not accept `inherit` in `border-top`
borderBlockStartColor: 'inherit', borderBlockStartColor: 'inherit',
borderBlockEnd: 0, borderBlockEnd: 0,
@ -105,10 +105,10 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
'&-dashed': { '&-dashed': {
background: 'none', background: 'none',
borderColor: token.dividerBorderColor, borderColor: colorSplit,
borderStyle: 'dashed', borderStyle: 'dashed',
borderWidth: 0, borderWidth: 0,
borderBlockStart: `${token.dividerBorderWidth}px`, borderBlockStart: `${controlLineWidth}px`,
}, },
'&-horizontal&-with-text&-dashed': { '&-horizontal&-with-text&-dashed': {
@ -118,7 +118,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
}, },
'&-vertical&-dashed': { '&-vertical&-dashed': {
borderWidth: `0 0 0 ${token.dividerBorderWidth}px`, borderWidth: `0 0 0 ${controlLineWidth}px`,
}, },
'&-plain&-with-text': { '&-plain&-with-text': {
@ -136,8 +136,8 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
width: '100%', width: '100%',
}, },
'.ant-divider-inner-text': { [`${dividerCls}-inner-text`]: {
paddingInlineStart: `${token.dividerNotDefaultTextPadding}px`, paddingInlineStart: sizePaddingEdgeHorizontal,
}, },
}, },
@ -150,8 +150,8 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
width: 0, width: 0,
}, },
'.ant-divider-inner-text': { [`${dividerCls}-inner-text`]: {
paddingInlineEnd: `${token.dividerNotDefaultTextPadding}px`, paddingInlineEnd: sizePaddingEdgeHorizontal,
}, },
}, },
}, },
@ -161,35 +161,31 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
// ============================== Export ============================== // ============================== Export ==============================
export default function useStyle(prefixCls: string): UseComponentStyleResult { export default function useStyle(prefixCls: string): UseComponentStyleResult {
const [theme, token, hashId] = useToken(); const [theme, token, hashId] = useToken();
// FIXME
const dividerBorderColor = 'rgba(0, 0, 0, 6%)';
const dividerBorderWidth = token.controlLineWidth;
const dividerNotDefaultTextPadding = 0;
const dividerVerticalGutterMargin = token.marginXS;
const dividerHorizontalWithTextGutterMargin = token.margin;
const dividerHorizontalGutterMargin = token.marginLG;
const dividerToken: DividerToken = {
...token,
dividerCls: `.${prefixCls}`,
dividerBorderColor,
dividerBorderWidth,
dividerNotDefaultTextPadding,
dividerVerticalGutterMargin,
dividerHorizontalWithTextGutterMargin,
dividerHorizontalGutterMargin,
};
return [ return [
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
genSharedDividerStyle(dividerToken), const { divider } = token;
]),
const dividerVerticalGutterMargin = token.marginSM;
const dividerHorizontalWithTextGutterMargin = token.margin;
const dividerHorizontalGutterMargin = token.marginLG;
const dividerToken: DividerToken = {
...token,
dividerCls: `.${prefixCls}`,
sizePaddingEdgeHorizontal: 0,
dividerVerticalGutterMargin,
dividerHorizontalWithTextGutterMargin,
dividerHorizontalGutterMargin,
...divider,
};
return [genSharedDividerStyle(dividerToken)];
}),
hashId, hashId,
]; ];
} }

15
components/drawer/index.tsx
View File

@ -4,6 +4,9 @@ import CloseOutlined from '@ant-design/icons/CloseOutlined';
import classNames from 'classnames'; import classNames from 'classnames';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import { tuple } from '../_util/type'; import { tuple } from '../_util/type';
// CSSINJS
import useStyle from './style';
import useForceUpdate from '../_util/hooks/useForceUpdate'; import useForceUpdate from '../_util/hooks/useForceUpdate';
type DrawerRef = { type DrawerRef = {
@ -109,8 +112,13 @@ const Drawer = React.forwardRef<DrawerRef, DrawerProps>(
const parentDrawer = React.useContext(DrawerContext); const parentDrawer = React.useContext(DrawerContext);
const destroyClose = React.useRef<boolean>(false); const destroyClose = React.useRef<boolean>(false);
const { getPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext); const { getPopupContainer, getPrefixCls, direction, iconPrefixCls } =
React.useContext(ConfigContext);
const prefixCls = getPrefixCls('drawer', customizePrefixCls); const prefixCls = getPrefixCls('drawer', customizePrefixCls);
// Style
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
const getContainer = const getContainer =
// 有可能为 false，所以不能直接判断 // 有可能为 false，所以不能直接判断
customizeGetContainer === undefined && getPopupContainer customizeGetContainer === undefined && getPopupContainer
@ -297,10 +305,11 @@ const Drawer = React.forwardRef<DrawerRef, DrawerProps>(
[`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-rtl`]: direction === 'rtl',
}, },
className, className,
hashId,
); );
const offsetStyle = mask ? getOffsetStyle() : {}; const offsetStyle = mask ? getOffsetStyle() : {};
return ( return wrapSSR(
<DrawerContext.Provider value={operations}> <DrawerContext.Provider value={operations}>
<RcDrawer <RcDrawer
handler={false} handler={false}
@ -323,7 +332,7 @@ const Drawer = React.forwardRef<DrawerRef, DrawerProps>(
> >
{renderBody()} {renderBody()}
</RcDrawer> </RcDrawer>
</DrawerContext.Provider> </DrawerContext.Provider>,
); );
}, },
); );

12
components/drawer/style/index.less
View File

@ -1,6 +1,6 @@
@import '../../style/themes/index'; //@import '../../style/themes/index';
@import '../../style/mixins/index'; //@import '../../style/mixins/index';
@import './drawer'; //@import './drawer';
@import './rtl'; //@import './rtl';
//
.popover-customize-bg(@drawer-prefix-cls, @popover-background); //.popover-customize-bg(@drawer-prefix-cls, @popover-background);

341
components/drawer/style/index.tsx
View File

@ -1,3 +1,338 @@
// deps-lint-skip: empty // deps-lint-skip-all
import '../../style/index.less'; import { CSSObject, Keyframes } from '@ant-design/cssinjs';
import './index.less'; import { TinyColor } from '@ctrl/tinycolor';
import {
DerivativeToken,
GenerateStyle,
UseComponentStyleResult,
useStyleRegister,
useToken,
} from '../../_util/theme';
export interface DrawerToken extends DerivativeToken {
prefixCls: string;
iconPrefixCls: string;
drawerHeaderCloseSize: number;
shadow1Right: string;
shadow1Left: string;
shadow1Up: string;
shadow1Down: string;
drawerTitleLineHeight: number;
closeRight: number;
white: string;
black: string;
paddingMd: number;
modalFooterPaddingVertical: number;
modalFooterPaddingHorizontal: number;
hoverColor: string;
borderColorSplit: string;
borderStyle: string;
textColorSecondary: string;
motionEaseOut: string;
drawerPrefixCls: string;
}
const antdDrawerFadeIn = new Keyframes('antNoWrapperZoomBadgeIn', {
'0%': { opacity: 0 },
'100%': { opacity: 1 },
});
// =============================== Base ===============================
const genBaseStyle: GenerateStyle<DrawerToken> = (
token: DrawerToken,
hashId: string,
): CSSObject => {
const {
drawerPrefixCls,
motionEaseOut,
motionDurationSlow,
fontSizeLG,
drawerTitleLineHeight,
white,
closeRight,
paddingLG,
paddingMd,
lineWidth,
borderStyle,
radiusBase,
fontSize,
lineHeight,
modalFooterPaddingVertical,
modalFooterPaddingHorizontal,
borderColorSplit,
zIndexPopup,
colorText,
textColorSecondary,
hoverColor,
} = token;
return {
[`${drawerPrefixCls}`]: {
// FIXME: Seems useless?
// @drawer-header-close-padding: ceil(((drawerHeaderCloseSize - @font-size-lg) / 2));
position: 'fixed',
zIndex: zIndexPopup,
width: 0,
height: '100%',
transition: `width 0s ease ${motionDurationSlow}, height 0s ease ${motionDurationSlow}`,
[`${drawerPrefixCls}-content-wrapper`]: {
position: 'absolute',
width: '100%',
height: '100%',
transition: `transform ${motionDurationSlow} ${motionEaseOut},box-shadow ${motionDurationSlow} ${motionEaseOut}`,
[`${drawerPrefixCls}-content`]: {
width: '100%',
height: '100%',
position: 'relative',
zIndex: 1,
overflow: 'auto',
backgroundColor: white,
backgroundClip: `padding-box`,
border: 0,
[`${drawerPrefixCls}-wrapper-body`]: {
display: 'flex',
flexFlow: 'column nowrap',
width: '100%',
height: '100%',
[`${drawerPrefixCls}-header`]: {
position: 'relative',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: `${paddingMd}px ${paddingLG}px`, // FIXME px
color: colorText,
background: white,
borderBottom: `${lineWidth}px ${borderStyle} ${borderColorSplit}`, // FIXME px
borderRadius: `${radiusBase}px ${radiusBase}px 0 0`, // FIXME px
[`${drawerPrefixCls}-header-title`]: {
display: 'flex',
flex: 1,
alignItems: 'center',
justifyContent: 'space-between',
[`${drawerPrefixCls}-title`]: {
flex: 1,
margin: 0,
color: colorText,
fontWeight: 500,
fontSize: fontSizeLG,
lineHeight: drawerTitleLineHeight,
},
[`${drawerPrefixCls}-close`]: {
display: 'inline-block',
marginRight: closeRight,
color: textColorSecondary,
fontWeight: 700,
fontSize: fontSizeLG,
fontStyle: 'normal',
lineHeight: 1,
textAlign: 'center',
textTransform: 'none',
textDecoration: 'none',
background: 'transparent',
border: 0,
outline: 0,
cursor: 'pointer',
transition: `color ${motionDurationSlow}`,
textRendering: 'auto',
[`${drawerPrefixCls}:focus,${drawerPrefixCls}:hover`]: {
color: hoverColor,
textDecoration: 'none',
},
},
},
[`${drawerPrefixCls}-header-close-only`]: {
paddingBottom: 0,
border: 'none',
},
},
[`${drawerPrefixCls}-body`]: {
flexGrow: 1,
padding: paddingLG,
overflow: 'auto',
fontSize,
lineHeight,
wordWrap: 'break-word',
},
[`${drawerPrefixCls}-footer`]: {
flexShrink: 0,
padding: `${modalFooterPaddingVertical}px ${modalFooterPaddingHorizontal}px`, // FIXME px
borderTop: `${lineWidth}px ${borderStyle} ${borderColorSplit}`, // FIXME px
},
},
},
},
[`${drawerPrefixCls}-mask`]: {
position: 'absolute',
insetBlockStart: 0,
insetInlineStart: 0,
width: '100%',
height: 0,
backgroundColor: textColorSecondary,
opacity: 0,
transition: `opacity ${motionDurationSlow} linear, height 0s ease ${motionDurationSlow}`,
pointerEvents: 'none',
},
},
[`${drawerPrefixCls}${drawerPrefixCls}-open ${drawerPrefixCls}-mask`]: {
height: '100%',
opacity: 1,
transition: 'none',
animation: `${antdDrawerFadeIn.getName(hashId)} ${motionDurationSlow} ${motionEaseOut}`,
pointerEvents: 'auto',
},
};
};
const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
const {
drawerPrefixCls,
motionDurationSlow,
shadow1Right,
shadow1Left,
shadow1Down,
shadow1Up,
lineWidth,
motionEaseOut,
} = token;
return {
// =================== left,right ===================
[`${drawerPrefixCls}-left`]: {
insetInlineStart: 0,
insetBlockStart: 0,
width: 0,
height: '100%',
[`${drawerPrefixCls}-content-wrapper`]: {
height: '100%',
insetInlineStart: 0,
},
},
[`${drawerPrefixCls}-left${drawerPrefixCls}-open`]: {
width: '100%',
transition: `transform ${motionDurationSlow} ${motionEaseOut}`,
[`${drawerPrefixCls}-content-wrapper`]: {
boxShadow: shadow1Right,
},
},
[`${drawerPrefixCls}-right`]: {
insetInlineEnd: 0,
insetBlockStart: 0,
width: 0,
height: '100%',
[`${drawerPrefixCls}-content-wrapper`]: {
height: '100%',
insetInlineEnd: 0,
},
},
[`${drawerPrefixCls}-right${drawerPrefixCls}-open`]: {
width: '100%',
transition: `transform ${motionDurationSlow} ${motionEaseOut}`,
[`${drawerPrefixCls}-content-wrapper`]: {
boxShadow: shadow1Left,
},
},
// https://github.com/ant-design/ant-design/issues/18607, Avoid edge alignment bug.
[`${drawerPrefixCls}-right${drawerPrefixCls}-open.no-mask`]: {
insetInlineEnd: lineWidth,
transform: `translateX(${lineWidth})`,
},
// =================== top,bottom ===================
[`${drawerPrefixCls}-top,${drawerPrefixCls}-bottom`]: {
insetInlineStart: 0,
width: '100%',
height: 0,
[`${drawerPrefixCls}-content-wrapper`]: {
width: '100%',
},
},
[`${drawerPrefixCls}-top${drawerPrefixCls}-open,${drawerPrefixCls}-bottom${drawerPrefixCls}-open`]:
{
height: '100%',
transition: `transform ${motionDurationSlow} ${motionEaseOut}`,
},
[`${drawerPrefixCls}-top`]: {
insetBlockStart: 0,
},
[`${drawerPrefixCls}-top${drawerPrefixCls}-open`]: {
[`${drawerPrefixCls}-content-wrapper`]: {
boxShadow: shadow1Down,
},
},
[`${drawerPrefixCls}-bottom`]: {
bottom: 0,
[`${drawerPrefixCls}-content-wrapper`]: {
bottom: 0,
},
},
[`${drawerPrefixCls}-bottom${drawerPrefixCls}-bottom-open`]: {
[`${drawerPrefixCls}-content-wrapper`]: {
boxShadow: shadow1Up,
},
},
[`${drawerPrefixCls}-bottom${drawerPrefixCls}-bottom-open.no-mask`]: {
insetBlockEnd: lineWidth,
transform: `translateY(${lineWidth})`,
},
// ==================== Hook Components ===================
// FIXME: Seems useless?
// .@{picker-prefix-cls} {
// &-clear {
// background: @popover-background,
// }
// }
};
};
// ============================== Export ==============================
export default function useStyle(
prefixCls: string,
iconPrefixCls: string,
): UseComponentStyleResult {
const [theme, token, hashId] = useToken();
const drawerToken: DrawerToken = {
...token,
prefixCls,
iconPrefixCls,
drawerPrefixCls: `.${prefixCls}`,
black: '#000', // FIXME: hard code
white: '#fff', // FIXME: hard code
drawerHeaderCloseSize: 56, // FIXME: hard code
shadow1Right:
'6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),12px 0 48px 16px rgba(0, 0, 0, 0.03)', // FIXME: hard code in v4
shadow1Left:
'-6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03)', // FIXME: hard code in v4
shadow1Up:
'0 -6px 16px -8px rgba(0, 0, 0, 0.32), 0 -9px 28px 0 rgba(0, 0, 0, 0.2),0 -12px 48px 16px rgba(0, 0, 0, 0.12)', // FIXME: hard code in v4
shadow1Down:
'0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2), 0 12px 48px 16px rgba(0, 0, 0, 0.12)', // FIXME: hard code in v4
drawerTitleLineHeight: 1.375, // FIXME: hard code
closeRight: 22, // FIXME: hard code
paddingMd: 16, // FIXME: hard code
modalFooterPaddingVertical: 10, // FIXME: hard code
modalFooterPaddingHorizontal: 16, // FIXME: hard code
borderColorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(), // FIXME: hard code
hoverColor: new TinyColor('#000').setAlpha(0.75).toRgbString(), // FIXME: hard code
textColorSecondary: new TinyColor('#000').setAlpha(0.45).toRgbString(), // FIXME: hard code
borderStyle: 'solid', // FIXME: hard code
motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)', // FIXME: hard code
};
return [
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
genBaseStyle(drawerToken, hashId),
genDrawerStyle(drawerToken),
]),
hashId,
];
}

6
components/input/style/index.tsx
View File

@ -75,7 +75,7 @@ const genInputLargeStyle = (token: InputToken): CSSObject => {
}; };
const genInputSmallStyle = (token: InputToken): CSSObject => ({ const genInputSmallStyle = (token: InputToken): CSSObject => ({
padding: `${token.inputPaddingVerticalSM}px ${token.paddingXS - 1}px`, padding: `${token.inputPaddingVerticalSM}px ${token.controlPaddingHorizontalSM - 1}px`,
}); });
export const genStatusStyle = (token: InputToken): CSSObject => { export const genStatusStyle = (token: InputToken): CSSObject => {
@ -785,7 +785,7 @@ export const initInputToken = (
...token, ...token,
prefixCls, prefixCls,
iconPrefixCls, iconPrefixCls,
inputAffixMargin: token.marginXXS, inputAffixMargin: token.marginXS,
inputPaddingVertical: Math.max( inputPaddingVertical: Math.max(
Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 - Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
token.controlLineWidth, token.controlLineWidth,
@ -799,7 +799,7 @@ export const initInputToken = (
token.controlLineWidth, token.controlLineWidth,
0, 0,
), ),
inputPaddingHorizontal: token.paddingSM - token.controlLineWidth, inputPaddingHorizontal: token.controlPaddingHorizontal - token.controlLineWidth,
inputBorderHoverColor: token.colorPrimaryHover, inputBorderHoverColor: token.colorPrimaryHover,
inputBorderActiveColor: token.colorPrimaryHover, inputBorderActiveColor: token.colorPrimaryHover,
}); });

1
components/list/index.tsx
View File

@ -1,5 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
// eslint-disable-next-line import/no-named-as-default
import Spin, { SpinProps } from '../spin'; import Spin, { SpinProps } from '../spin';
import useBreakpoint from '../grid/hooks/useBreakpoint'; import useBreakpoint from '../grid/hooks/useBreakpoint';
import { Breakpoint, responsiveArray } from '../_util/responsiveObserve'; import { Breakpoint, responsiveArray } from '../_util/responsiveObserve';

1
components/mentions/index.tsx
View File

@ -3,6 +3,7 @@ import classNames from 'classnames';
import RcMentions from 'rc-mentions'; import RcMentions from 'rc-mentions';
import { MentionsProps as RcMentionsProps } from 'rc-mentions/lib/Mentions'; import { MentionsProps as RcMentionsProps } from 'rc-mentions/lib/Mentions';
import { composeRef } from 'rc-util/lib/ref'; import { composeRef } from 'rc-util/lib/ref';
// eslint-disable-next-line import/no-named-as-default
import Spin from '../spin'; import Spin from '../spin';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import { FormItemInputContext } from '../form/context'; import { FormItemInputContext } from '../form/context';

14
components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -188,7 +188,7 @@ Array [
`; `;
exports[`renders ./components/notification/demo/placement.md extend context correctly 1`] = ` exports[`renders ./components/notification/demo/placement.md extend context correctly 1`] = `
<div> Array [
<div <div
class="ant-space ant-space-horizontal ant-space-align-center" class="ant-space ant-space-horizontal ant-space-align-center"
> >
@ -255,11 +255,11 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
</span> </span>
</button> </button>
</div> </div>
</div> </div>,
<div <div
class="ant-divider ant-divider-horizontal" class="ant-divider ant-divider-horizontal"
role="separator" role="separator"
/> />,
<div <div
class="ant-space ant-space-horizontal ant-space-align-center" class="ant-space ant-space-horizontal ant-space-align-center"
> >
@ -326,11 +326,11 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
</span> </span>
</button> </button>
</div> </div>
</div> </div>,
<div <div
class="ant-divider ant-divider-horizontal" class="ant-divider ant-divider-horizontal"
role="separator" role="separator"
/> />,
<div <div
class="ant-space ant-space-horizontal ant-space-align-center" class="ant-space ant-space-horizontal ant-space-align-center"
> >
@ -397,8 +397,8 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
</span> </span>
</button> </button>
</div> </div>
</div> </div>,
</div> ]
`; `;
exports[`renders ./components/notification/demo/update.md extend context correctly 1`] = ` exports[`renders ./components/notification/demo/update.md extend context correctly 1`] = `

14
components/notification/__tests__/__snapshots__/demo.test.js.snap
View File

@ -188,7 +188,7 @@ Array [
`; `;
exports[`renders ./components/notification/demo/placement.md correctly 1`] = ` exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
<div> Array [
<div <div
class="ant-space ant-space-horizontal ant-space-align-center" class="ant-space ant-space-horizontal ant-space-align-center"
> >
@ -255,11 +255,11 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
</span> </span>
</button> </button>
</div> </div>
</div> </div>,
<div <div
class="ant-divider ant-divider-horizontal" class="ant-divider ant-divider-horizontal"
role="separator" role="separator"
/> />,
<div <div
class="ant-space ant-space-horizontal ant-space-align-center" class="ant-space ant-space-horizontal ant-space-align-center"
> >
@ -326,11 +326,11 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
</span> </span>
</button> </button>
</div> </div>
</div> </div>,
<div <div
class="ant-divider ant-divider-horizontal" class="ant-divider ant-divider-horizontal"
role="separator" role="separator"
/> />,
<div <div
class="ant-space ant-space-horizontal ant-space-align-center" class="ant-space ant-space-horizontal ant-space-align-center"
> >
@ -397,8 +397,8 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
</span> </span>
</button> </button>
</div> </div>
</div> </div>,
</div> ]
`; `;
exports[`renders ./components/notification/demo/update.md correctly 1`] = ` exports[`renders ./components/notification/demo/update.md correctly 1`] = `

10
components/notification/__tests__/placement.test.js
View File

@ -41,8 +41,9 @@ describe('Notification.placement', () => {
}); });
style = getStyle($$('.ant-notification-top')[0]); style = getStyle($$('.ant-notification-top')[0]);
expect(style.top).toBe('50px'); expect(style.top).toBe('50px');
expect(style.left).toBe('0px'); expect(style.left).toBe('50%');
expect(style.right).toBe('0px'); expect(style.transform).toBe('translateX(-50%)');
expect(style.right).toBe('');
expect(style.bottom).toBe(''); expect(style.bottom).toBe('');
open({ open({
@ -86,8 +87,9 @@ describe('Notification.placement', () => {
}); });
style = getStyle($$('.ant-notification-bottom')[0]); style = getStyle($$('.ant-notification-bottom')[0]);
expect(style.top).toBe(''); expect(style.top).toBe('');
expect(style.left).toBe('0px'); expect(style.left).toBe('50%');
expect(style.right).toBe('0px'); expect(style.transform).toBe('translateX(-50%)');
expect(style.right).toBe('');
expect(style.bottom).toBe('100px'); expect(style.bottom).toBe('100px');
open({ open({

46
components/notification/demo/placement.md
View File

@ -7,11 +7,11 @@ title:
## zh-CN ## zh-CN
通知从右上角、右下角、左下角、左上角弹出。 使用 `placement` 可以配置通知从右上角、右下角、左下角、左上角弹出。
## en-US ## en-US
A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport. A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport via `placement`.
```jsx ```jsx
import { Button, notification, Divider, Space } from 'antd'; import { Button, notification, Divider, Space } from 'antd';
@ -34,40 +34,54 @@ const openNotification = placement => {
}; };
ReactDOM.render( ReactDOM.render(
<div> <>
<Space> <Space>
<Button type="primary" onClick={() => openNotification('top')}> <Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
<BorderTopOutlined />
top top
</Button> </Button>
<Button type="primary" onClick={() => openNotification('bottom')}> <Button
<BorderBottomOutlined /> type="primary"
onClick={() => openNotification('bottom')}
icon={<BorderBottomOutlined />}
>
bottom bottom
</Button> </Button>
</Space> </Space>
<Divider /> <Divider />
<Space> <Space>
<Button type="primary" onClick={() => openNotification('topLeft')}> <Button
<RadiusUpleftOutlined /> type="primary"
onClick={() => openNotification('topLeft')}
icon={<RadiusUpleftOutlined />}
>
topLeft topLeft
</Button> </Button>
<Button type="primary" onClick={() => openNotification('topRight')}> <Button
<RadiusUprightOutlined /> type="primary"
onClick={() => openNotification('topRight')}
icon={<RadiusUprightOutlined />}
>
topRight topRight
</Button> </Button>
</Space> </Space>
<Divider /> <Divider />
<Space> <Space>
<Button type="primary" onClick={() => openNotification('bottomLeft')}> <Button
<RadiusBottomleftOutlined /> type="primary"
onClick={() => openNotification('bottomLeft')}
icon={<RadiusBottomleftOutlined />}
>
bottomLeft bottomLeft
</Button> </Button>
<Button type="primary" onClick={() => openNotification('bottomRight')}> <Button
<RadiusBottomrightOutlined /> type="primary"
onClick={() => openNotification('bottomRight')}
icon={<RadiusBottomrightOutlined />}
>
bottomRight bottomRight
</Button> </Button>
</Space> </Space>
</div>, </>,
mountNode, mountNode,
); );
``` ```

10
components/notification/index.tsx
View File

@ -87,8 +87,9 @@ function getPlacementStyle(
switch (placement) { switch (placement) {
case 'top': case 'top':
style = { style = {
left: 0, left: '50%',
right: 0, transform: 'translateX(-50%)',
right: 'auto',
top, top,
bottom: 'auto', bottom: 'auto',
}; };
@ -109,8 +110,9 @@ function getPlacementStyle(
break; break;
case 'bottom': case 'bottom':
style = { style = {
left: 0, left: '50%',
right: 0, transform: 'translateX(-50%)',
right: 'auto',
top: 'auto', top: 'auto',
bottom, bottom,
}; };

32
components/notification/style/index.less
View File

@ -16,25 +16,6 @@
z-index: @zindex-notification; z-index: @zindex-notification;
margin-right: @notification-margin-edge; margin-right: @notification-margin-edge;
&-top,
&-bottom,
&-topLeft,
&-bottomLeft {
margin-right: 0;
margin-left: @notification-margin-edge;
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
animation-name: NotificationLeftFadeIn;
}
}
&-top,
&-bottom {
margin-right: auto;
margin-left: auto;
}
&-close-icon { &-close-icon {
font-size: @font-size-base; font-size: @font-size-base;
cursor: pointer; cursor: pointer;
@ -206,18 +187,6 @@
} }
} }
@keyframes NotificationLeftFadeIn {
0% {
right: @notification-width;
opacity: 0;
}
100% {
right: 0;
opacity: 1;
}
}
@keyframes NotificationFadeOut { @keyframes NotificationFadeOut {
0% { 0% {
max-height: 150px; max-height: 150px;
@ -235,3 +204,4 @@
} }
@import './rtl'; @import './rtl';
@import './placement';

68
components/notification/style/placement.less Normal file
View File

@ -0,0 +1,68 @@
.@{notification-prefix-cls} {
&-top,
&-bottom {
margin-right: 0;
margin-left: 0;
}
&-top {
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
animation-name: NotificationTopFadeIn;
}
}
&-bottom {
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
animation-name: NotificationBottomFadeIn;
}
}
&-topLeft,
&-bottomLeft {
margin-right: 0;
margin-left: @notification-margin-edge;
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
animation-name: NotificationLeftFadeIn;
}
}
}
@keyframes NotificationTopFadeIn {
0% {
margin-top: -100%;
opacity: 0;
}
100% {
margin-top: 0;
opacity: 1;
}
}
@keyframes NotificationBottomFadeIn {
0% {
margin-bottom: -100%;
opacity: 0;
}
100% {
margin-bottom: 0;
opacity: 1;
}
}
@keyframes NotificationLeftFadeIn {
0% {
right: @notification-width;
opacity: 0;
}
100% {
right: 0;
opacity: 1;
}
}

16
components/popover/index.tsx
View File

@ -1,17 +1,21 @@
import * as React from 'react'; import * as React from 'react';
import classNames from 'classnames';
import Tooltip, { AbstractTooltipProps, TooltipPlacement } from '../tooltip'; import Tooltip, { AbstractTooltipProps, TooltipPlacement } from '../tooltip';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue'; import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue';
import { getTransitionName } from '../_util/motion'; import { getTransitionName } from '../_util/motion';
// CSSINJS
import useStyle from './style';
export interface PopoverProps extends AbstractTooltipProps { export interface PopoverProps extends AbstractTooltipProps {
title?: React.ReactNode | RenderFunction; title?: React.ReactNode | RenderFunction;
content?: React.ReactNode | RenderFunction; content?: React.ReactNode | RenderFunction;
} }
const Popover = React.forwardRef<unknown, PopoverProps>( const Popover = React.forwardRef<unknown, PopoverProps>(
({ prefixCls: customizePrefixCls, title, content, ...otherProps }, ref) => { ({ prefixCls: customizePrefixCls, title, content, overlayClassName, ...otherProps }, ref) => {
const { getPrefixCls } = React.useContext(ConfigContext); const { getPrefixCls, iconPrefixCls } = React.useContext(ConfigContext);
const getOverlay = (prefixCls: string) => { const getOverlay = (prefixCls: string) => {
if (!title && !content) return undefined; if (!title && !content) return undefined;
@ -24,16 +28,20 @@ const Popover = React.forwardRef<unknown, PopoverProps>(
}; };
const prefixCls = getPrefixCls('popover', customizePrefixCls); const prefixCls = getPrefixCls('popover', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
const rootPrefixCls = getPrefixCls(); const rootPrefixCls = getPrefixCls();
return ( const overlayCls = classNames(overlayClassName, hashId);
return wrapSSR(
<Tooltip <Tooltip
{...otherProps} {...otherProps}
prefixCls={prefixCls} prefixCls={prefixCls}
overlayClassName={overlayCls}
ref={ref as any} ref={ref as any}
overlay={getOverlay(prefixCls)} overlay={getOverlay(prefixCls)}
transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)} transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
/> />,
); );
}, },
); );

430
components/popover/style/index.less
View File

@ -1,258 +1,258 @@
@import '../../style/themes/index'; // @import '../../style/themes/index';
@import '../../style/mixins/index'; // @import '../../style/mixins/index';
@popover-prefix-cls: ~'@{ant-prefix}-popover'; // @popover-prefix-cls: ~'@{ant-prefix}-popover';
@popover-arrow-rotate-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2); // @popover-arrow-rotate-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
@popover-arrow-offset-vertical: 12px; // @popover-arrow-offset-vertical: 12px;
@popover-arrow-offset-horizontal: 16px; // @popover-arrow-offset-horizontal: 16px;
.@{popover-prefix-cls} { // .@{popover-prefix-cls} {
.reset-component(); // .reset-component();
position: absolute; // position: absolute;
top: 0; // top: 0;
left: 0; // left: 0;
z-index: @zindex-popover; // z-index: @zindex-popover;
font-weight: normal; // font-weight: normal;
white-space: normal; // white-space: normal;
text-align: left; // text-align: left;
cursor: auto; // cursor: auto;
user-select: text; // user-select: text;
&::after { // &::after {
position: absolute; // position: absolute;
background: fade(@white, 1%); // background: fade(@white, 1%);
content: ''; // content: '';
} // }
&-hidden { // &-hidden {
display: none; // display: none;
} // }
// Offset the popover to account for the popover arrow // // Offset the popover to account for the popover arrow
&-placement-top, // &-placement-top,
&-placement-topLeft, // &-placement-topLeft,
&-placement-topRight { // &-placement-topRight {
padding-bottom: @popover-distance; // padding-bottom: @popover-distance;
} // }
&-placement-right, // &-placement-right,
&-placement-rightTop, // &-placement-rightTop,
&-placement-rightBottom { // &-placement-rightBottom {
padding-left: @popover-distance; // padding-left: @popover-distance;
} // }
&-placement-bottom, // &-placement-bottom,
&-placement-bottomLeft, // &-placement-bottomLeft,
&-placement-bottomRight { // &-placement-bottomRight {
padding-top: @popover-distance; // padding-top: @popover-distance;
} // }
&-placement-left, // &-placement-left,
&-placement-leftTop, // &-placement-leftTop,
&-placement-leftBottom { // &-placement-leftBottom {
padding-right: @popover-distance; // padding-right: @popover-distance;
} // }
&-inner { // &-inner {
background-color: @popover-bg; // background-color: @popover-bg;
background-clip: padding-box; // background-clip: padding-box;
border-radius: @border-radius-base; // border-radius: @border-radius-base;
box-shadow: @box-shadow-base; // box-shadow: @box-shadow-base;
box-shadow: ~'0 0 8px @{shadow-color} \9'; // box-shadow: ~'0 0 8px @{shadow-color} \9';
} // }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { // @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ */ // /* IE10+ */
&-inner { // &-inner {
box-shadow: @box-shadow-base; // box-shadow: @box-shadow-base;
} // }
} // }
&-title { // &-title {
min-width: @popover-min-width; // min-width: @popover-min-width;
min-height: @popover-min-height; // min-height: @popover-min-height;
margin: 0; // reset heading margin // margin: 0; // reset heading margin
padding: 5px @popover-padding-horizontal 4px; // padding: 5px @popover-padding-horizontal 4px;
color: @heading-color; // color: @heading-color;
font-weight: 500; // font-weight: 500;
border-bottom: 1px solid @border-color-split; // border-bottom: 1px solid @border-color-split;
} // }
&-inner-content { // &-inner-content {
padding: @padding-sm @popover-padding-horizontal; // padding: @padding-sm @popover-padding-horizontal;
color: @popover-color; // color: @popover-color;
} // }
&-message { // &-message {
position: relative; // position: relative;
padding: 4px 0 12px; // padding: 4px 0 12px;
color: @popover-color; // color: @popover-color;
font-size: @font-size-base; // font-size: @font-size-base;
> .@{iconfont-css-prefix} { // > .@{iconfont-css-prefix} {
position: absolute; // position: absolute;
top: ( // top: (
4px + ((@line-height-base * @font-size-base - @font-size-base) / 2) // 4px + ((@line-height-base * @font-size-base - @font-size-base) / 2)
); // 4px for padding-top, 4px for vertical middle // ); // 4px for padding-top, 4px for vertical middle
color: @warning-color; // color: @warning-color;
font-size: @font-size-base; // font-size: @font-size-base;
} // }
&-title { // &-title {
padding-left: @font-size-base + 8px; // padding-left: @font-size-base + 8px;
} // }
} // }
&-buttons { // &-buttons {
margin-bottom: 4px; // margin-bottom: 4px;
text-align: right; // text-align: right;
button { // button {
margin-left: 8px; // margin-left: 8px;
} // }
} // }
// Arrows // // Arrows
&-arrow { // &-arrow {
position: absolute; // position: absolute;
display: block; // display: block;
width: @popover-arrow-rotate-width; // width: @popover-arrow-rotate-width;
height: @popover-arrow-rotate-width; // height: @popover-arrow-rotate-width;
overflow: hidden; // overflow: hidden;
background: transparent; // background: transparent;
pointer-events: none; // pointer-events: none;
&-content { // &-content {
position: absolute; // position: absolute;
top: 0; // top: 0;
right: 0; // right: 0;
bottom: 0; // bottom: 0;
left: 0; // left: 0;
display: block; // display: block;
width: @popover-arrow-width; // width: @popover-arrow-width;
height: @popover-arrow-width; // height: @popover-arrow-width;
margin: auto; // margin: auto;
background-color: @popover-bg; // background-color: @popover-bg;
content: ''; // content: '';
pointer-events: auto; // pointer-events: auto;
.roundedArrow(@popover-arrow-width, 5px, @popover-bg); // .roundedArrow(@popover-arrow-width, 5px, @popover-bg);
} // }
} // }
&-placement-top &-arrow, // &-placement-top &-arrow,
&-placement-topLeft &-arrow, // &-placement-topLeft &-arrow,
&-placement-topRight &-arrow { // &-placement-topRight &-arrow {
bottom: @popover-distance - @popover-arrow-rotate-width; // bottom: @popover-distance - @popover-arrow-rotate-width;
&-content { // &-content {
box-shadow: 3px 3px 7px fade(@black, 7%); // box-shadow: 3px 3px 7px fade(@black, 7%);
transform: translateY((-@popover-arrow-rotate-width / 2)) rotate(45deg); // transform: translateY((-@popover-arrow-rotate-width / 2)) rotate(45deg);
} // }
} // }
&-placement-top &-arrow { // &-placement-top &-arrow {
left: 50%; // left: 50%;
transform: translateX(-50%); // transform: translateX(-50%);
} // }
&-placement-topLeft &-arrow { // &-placement-topLeft &-arrow {
left: @popover-arrow-offset-horizontal; // left: @popover-arrow-offset-horizontal;
} // }
&-placement-topRight &-arrow { // &-placement-topRight &-arrow {
right: @popover-arrow-offset-horizontal; // right: @popover-arrow-offset-horizontal;
} // }
&-placement-right &-arrow, // &-placement-right &-arrow,
&-placement-rightTop &-arrow, // &-placement-rightTop &-arrow,
&-placement-rightBottom &-arrow { // &-placement-rightBottom &-arrow {
left: @popover-distance - @popover-arrow-rotate-width; // left: @popover-distance - @popover-arrow-rotate-width;
&-content { // &-content {
box-shadow: 3px 3px 7px fade(@black, 7%); // box-shadow: 3px 3px 7px fade(@black, 7%);
transform: translateX((@popover-arrow-rotate-width / 2)) rotate(135deg); // transform: translateX((@popover-arrow-rotate-width / 2)) rotate(135deg);
} // }
} // }
&-placement-right &-arrow { // &-placement-right &-arrow {
top: 50%; // top: 50%;
transform: translateY(-50%); // transform: translateY(-50%);
} // }
&-placement-rightTop &-arrow { // &-placement-rightTop &-arrow {
top: @popover-arrow-offset-vertical; // top: @popover-arrow-offset-vertical;
} // }
&-placement-rightBottom &-arrow { // &-placement-rightBottom &-arrow {
bottom: @popover-arrow-offset-vertical; // bottom: @popover-arrow-offset-vertical;
} // }
&-placement-bottom &-arrow, // &-placement-bottom &-arrow,
&-placement-bottomLeft &-arrow, // &-placement-bottomLeft &-arrow,
&-placement-bottomRight &-arrow { // &-placement-bottomRight &-arrow {
top: @popover-distance - @popover-arrow-rotate-width; // top: @popover-distance - @popover-arrow-rotate-width;
&-content { // &-content {
box-shadow: 2px 2px 5px fade(@black, 6%); // box-shadow: 2px 2px 5px fade(@black, 6%);
transform: translateY((@popover-arrow-rotate-width / 2)) rotate(-135deg); // transform: translateY((@popover-arrow-rotate-width / 2)) rotate(-135deg);
} // }
} // }
&-placement-bottom &-arrow { // &-placement-bottom &-arrow {
left: 50%; // left: 50%;
transform: translateX(-50%); // transform: translateX(-50%);
} // }
&-placement-bottomLeft &-arrow { // &-placement-bottomLeft &-arrow {
left: @popover-arrow-offset-horizontal; // left: @popover-arrow-offset-horizontal;
} // }
&-placement-bottomRight &-arrow { // &-placement-bottomRight &-arrow {
right: @popover-arrow-offset-horizontal; // right: @popover-arrow-offset-horizontal;
} // }
&-placement-left &-arrow, // &-placement-left &-arrow,
&-placement-leftTop &-arrow, // &-placement-leftTop &-arrow,
&-placement-leftBottom &-arrow { // &-placement-leftBottom &-arrow {
right: @popover-distance - @popover-arrow-rotate-width; // right: @popover-distance - @popover-arrow-rotate-width;
&-content { // &-content {
box-shadow: 3px 3px 7px fade(@black, 7%); // box-shadow: 3px 3px 7px fade(@black, 7%);
transform: translateX((-@popover-arrow-rotate-width / 2)) rotate(-45deg); // transform: translateX((-@popover-arrow-rotate-width / 2)) rotate(-45deg);
} // }
} // }
&-placement-left &-arrow { // &-placement-left &-arrow {
top: 50%; // top: 50%;
transform: translateY(-50%); // transform: translateY(-50%);
} // }
&-placement-leftTop &-arrow { // &-placement-leftTop &-arrow {
top: @popover-arrow-offset-vertical; // top: @popover-arrow-offset-vertical;
} // }
&-placement-leftBottom &-arrow { // &-placement-leftBottom &-arrow {
bottom: @popover-arrow-offset-vertical; // bottom: @popover-arrow-offset-vertical;
} // }
} // }
.generator-popover-preset-color(@i: length(@preset-colors)) when (@i > 0) { // .generator-popover-preset-color(@i: length(@preset-colors)) when (@i > 0) {
.generator-popover-preset-color(@i - 1); // .generator-popover-preset-color(@i - 1);
@color: extract(@preset-colors, @i); // @color: extract(@preset-colors, @i);
@lightColor: '@{color}-6'; // @lightColor: '@{color}-6';
.@{popover-prefix-cls}-@{color} { // .@{popover-prefix-cls}-@{color} {
.@{popover-prefix-cls}-inner { // .@{popover-prefix-cls}-inner {
background-color: @@lightColor; // background-color: @@lightColor;
} // }
.@{popover-prefix-cls}-arrow { // .@{popover-prefix-cls}-arrow {
&-content { // &-content {
background-color: @@lightColor; // background-color: @@lightColor;
} // }
} // }
} // }
} // }
.generator-popover-preset-color(); // .generator-popover-preset-color();
@import './rtl'; // @import './rtl';

393
components/popover/style/index.tsx
View File

@ -1,5 +1,394 @@
import '../../style/index.less'; // import '../../style/index.less';
import './index.less'; // import './index.less';
// style dependencies // style dependencies
// deps-lint-skip: tooltip // deps-lint-skip: tooltip
// deps-lint-skip-all
import { TinyColor } from '@ctrl/tinycolor';
import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import {
PresetColors,
PresetColorType,
DerivativeToken,
useStyleRegister,
useToken,
UseComponentStyleResult,
GenerateStyle,
resetComponent,
roundedArrow,
} from '../../_util/theme';
// FIXME
type PopoverToken = DerivativeToken & {
popoverCls: string;
iconPrefixCls: string;
popoverBg: string;
popoverColor: string;
popoverMinWidth: number;
popoverMinHeight: number;
popoverArrowWidth: number;
popoverArrowColor: string;
popoverArrowOuterColor: string;
popoverDistance: number;
popoverPaddingHorizonta: number;
popoverArrowRotateWidth: number;
popoverArrowOffsetVertical: number;
popoverArrowOffsetHorizontal: number;
};
const genBaseStyle: GenerateStyle<PopoverToken> = token => {
const {
popoverCls,
iconPrefixCls,
popoverBg,
popoverColor,
popoverMinWidth,
popoverMinHeight,
popoverArrowWidth,
popoverPaddingHorizonta,
popoverArrowRotateWidth,
boxShadow,
colorSplit,
colorTextHeading,
colorWarning,
fontSize,
marginSM,
marginXS,
lineHeight,
radiusBase: borderRadius,
paddingSM,
zIndexPopover,
} = token;
return {
[popoverCls]: {
...resetComponent(token),
position: 'absolute',
top: 0,
insetInlineStart: 0,
zIndex: zIndexPopover,
fontWeight: 'normal',
whiteSpace: 'normal',
textAlign: 'start',
cursor: 'auto',
userSelect: 'text',
'&::after': {
position: 'absolute',
// FIXME
background: new TinyColor('#fff').setAlpha(0.01).toRgbString(),
content: '""',
},
'&-rtl': {
direction: 'rtl',
},
'&-hidden': {
display: 'none',
},
[`${popoverCls}-inner`]: {
backgroundColor: popoverBg,
backgroundClip: 'padding-box',
borderRadius,
boxShadow,
},
[`${popoverCls}-title`]: {
minWidth: popoverMinWidth,
minHeight: popoverMinHeight,
margin: 0,
// FIXME
padding: `5px ${popoverPaddingHorizonta}px 4px`,
color: colorTextHeading,
fontWeight: 500,
// FIXME
borderBottom: `1px solid ${colorSplit}`,
},
[`${popoverCls}-inner-content`]: {
padding: `${paddingSM}px ${popoverPaddingHorizonta}px`,
color: popoverColor,
},
// FIXME 没找到使用地方，先保留
'&-message': {
position: 'relative',
// FIXME
padding: '4px 0 12px',
color: popoverColor,
fontSize,
[`> .${iconPrefixCls}`]: {
position: 'absolute',
// FIXME
top: 4 + (lineHeight * fontSize - fontSize) / 2,
color: colorWarning,
fontSize,
},
'&-title': {
// FIXME
paddingInlineStart: fontSize + 8,
},
},
// FIXME 没找到使用地方，先保留
'&-buttons': {
marginBottom: marginXS,
textAlign: 'end',
button: {
marginInlineStart: marginSM,
},
},
[`${popoverCls}-arrow`]: {
position: 'absolute',
display: 'block',
width: popoverArrowRotateWidth,
height: popoverArrowRotateWidth,
overflow: 'hidden',
background: 'transparent',
pointerEvents: 'none',
'&-content': {
position: 'absolute',
top: 0,
insetInlineEnd: 0,
bottom: 0,
insetInlineStart: 0,
display: 'block',
width: popoverArrowWidth,
height: popoverArrowWidth,
margin: 'auto',
backgroundColor: popoverBg,
content: '""',
pointerEvents: 'auto',
...roundedArrow(popoverArrowWidth, 5, popoverBg),
},
},
},
};
};
const genPlacementStyle: GenerateStyle<PopoverToken> = token => {
const {
popoverCls,
popoverDistance,
popoverArrowRotateWidth,
popoverArrowOffsetHorizontal,
popoverArrowOffsetVertical,
} = token;
return {
[popoverCls]: {
[`
&-placement-top,
&-placement-topLeft,
&-placement-topRight
`]: {
paddingBottom: popoverDistance,
},
[`
&-placement-right,
&-placement-rightTop,
&-placement-rightBottom
`]: {
paddingLeft: popoverDistance,
},
[`
&-placement-bottom,
&-placement-bottomLeft,
&-placement-bottomRight
`]: {
paddingTop: popoverDistance,
},
[`
&-placement-left,
&-placement-leftTop,
&-placement-leftBottom
`]: {
paddingRight: popoverDistance,
},
[`
&-placement-top ${popoverCls}-arrow,
&-placement-topLeft ${popoverCls}-arrow,
&-placement-topRight ${popoverCls}-arrow
`]: {
bottom: popoverDistance - popoverArrowRotateWidth,
'&-content': {
// FIXME
boxShadow: `3px 3px 7px ${new TinyColor('#000').setAlpha(0.07).toRgbString()}`,
transform: `translateY(-${popoverArrowRotateWidth / 2}px) rotate(45deg)`,
},
},
[`&-placement-top ${popoverCls}-arrow`]: {
insetInlineStart: '50%',
transform: 'translateX(-50%)',
},
[`&-placement-topLeft ${popoverCls}-arrow`]: {
insetInlineStart: popoverArrowOffsetHorizontal,
},
[`&-placement-topRight ${popoverCls}-arrow`]: {
insetInlineEnd: popoverArrowOffsetHorizontal,
},
[`
&-placement-right ${popoverCls}-arrow,
&-placement-rightTop ${popoverCls}-arrow,
&-placement-rightBottom ${popoverCls}-arrow
`]: {
insetInlineStart: popoverDistance - popoverArrowRotateWidth,
'&-content': {
// FIXME
boxShadow: `3px 3px 7px ${new TinyColor('#000').setAlpha(0.07).toRgbString()}`,
transform: `translateX(${popoverArrowRotateWidth / 2}px) rotate(135deg)`,
},
},
[`&-placement-right ${popoverCls}-arrow`]: {
top: '50%',
transform: 'translateY(-50%)',
},
[`&-placement-rightTop ${popoverCls}-arrow`]: {
top: popoverArrowOffsetVertical,
},
[`&-placement-rightBottom ${popoverCls}-arrow`]: {
bottom: popoverArrowOffsetVertical,
},
[`
&-placement-bottom ${popoverCls}-arrow,
&-placement-bottomLeft ${popoverCls}-arrow,
&-placement-bottomRight ${popoverCls}-arrow
`]: {
top: popoverDistance - popoverArrowRotateWidth,
'&-content': {
// FIXME
boxShadow: `2px 2px 5px ${new TinyColor('#000').setAlpha(0.06).toRgbString()}`,
transform: `translateY(${popoverArrowRotateWidth / 2}px) rotate(-135deg)`,
},
},
[`&-placement-bottom ${popoverCls}-arrow`]: {
insetInlineStart: '50%',
transform: 'translateX(-50%)',
},
[`&-placement-bottomLeft ${popoverCls}-arrow`]: {
insetInlineStart: popoverArrowOffsetHorizontal,
},
[`&-placement-bottomRight ${popoverCls}-arrow`]: {
insetInlineEnd: popoverArrowOffsetHorizontal,
},
[`
&-placement-left ${popoverCls}-arrow,
&-placement-leftTop ${popoverCls}-arrow,
&-placement-leftBottom ${popoverCls}-arrow
`]: {
insetInlineEnd: popoverDistance - popoverArrowRotateWidth,
'&-content': {
// FIXME
boxShadow: `3px 3px 7px ${new TinyColor('#000').setAlpha(0.07).toRgbString()}`,
transform: `translateX(-${popoverArrowRotateWidth / 2}px) rotate(-45deg)`,
},
},
[`&-placement-left ${popoverCls}-arrow`]: {
top: '50%',
transform: 'translateY(-50%)',
},
[`&-placement-leftTop ${popoverCls}-arrow`]: {
top: popoverArrowOffsetVertical,
},
[`&-placement-leftBottom ${popoverCls}-arrow`]: {
bottom: popoverArrowOffsetVertical,
},
},
};
};
// FIXME: special preset colors
const genColorStyle: GenerateStyle<PopoverToken> = token => {
const { popoverCls } = token;
return PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
const lightColor = token[`${colorKey}-6`];
return {
...prev,
[`${popoverCls}-${colorKey}`]: {
[`${popoverCls}-inner`]: {
backgroundColor: lightColor,
},
[`${popoverCls}-arrow`]: {
'&-content': {
backgroundColor: lightColor,
},
},
},
};
}, {} as CSSObject);
};
export const genPopoverStyle: GenerateStyle<PopoverToken> = (
token: PopoverToken,
): CSSInterpolation => [genBaseStyle(token), genPlacementStyle(token), genColorStyle(token)];
export default function useStyle(
prefixCls: string,
iconPrefixCls: string,
): UseComponentStyleResult {
const [theme, token, hashId] = useToken();
const popoverBg = token.colorBg;
// FIXME
const popoverArrowWidth = 8 * Math.sqrt(2);
const popoverToken = {
...token,
popoverCls: `.${prefixCls}`,
iconPrefixCls,
popoverBg,
popoverColor: token.colorText,
// FIXME
popoverMinWidth: 177,
popoverMinHeight: 32,
popoverArrowWidth,
popoverArrowColor: popoverBg,
popoverArrowOuterColor: popoverBg,
popoverDistance: popoverArrowWidth + 4,
popoverPaddingHorizonta: token.padding,
popoverArrowRotateWidth: Math.sqrt(popoverArrowWidth * popoverArrowWidth * 2),
// FIXME
popoverArrowOffsetVertical: 12,
popoverArrowOffsetHorizontal: 16,
};
return [
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
genPopoverStyle(popoverToken),
]),
hashId,
];
}

2
components/select/style/dropdown.tsx
View File

@ -123,7 +123,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
[`&-selected:not(${selectItemCls}-option-disabled)`]: { [`&-selected:not(${selectItemCls}-option-disabled)`]: {
color: token.colorText, color: token.colorText,
fontWeight: 600, // FIXME: Need design token? fontWeight: token.fontWeightStrong,
backgroundColor: token.controlItemBgActive, backgroundColor: token.controlItemBgActive,
[`${selectItemCls}-option-state`]: { [`${selectItemCls}-option-state`]: {

7
components/select/style/index.tsx
View File

@ -96,7 +96,6 @@ const genStatusStyle = (
[`${selectCls}-focused& ${selectCls}-selector`]: { [`${selectCls}-focused& ${selectCls}-selector`]: {
borderColor: borderHoverColor, borderColor: borderHoverColor,
// FIXME: missing variable of `@input-outline-offset`
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${outlineColor}`, boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${outlineColor}`,
borderInlineEndWidth: `${token.controlLineWidth}px !important`, borderInlineEndWidth: `${token.controlLineWidth}px !important`,
outline: 0, outline: 0,
@ -241,8 +240,10 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
'&:hover': { '&:hover': {
color: token.colorTextSecondary, color: token.colorTextSecondary,
}, },
},
[`${selectCls}:hover &`]: { '&:hover': {
[`${selectCls}-clear`]: {
opacity: 1, opacity: 1,
}, },
}, },
@ -251,7 +252,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
// ========================= Feedback ========================== // ========================= Feedback ==========================
[`${selectCls}-has-feedback`]: { [`${selectCls}-has-feedback`]: {
[`${selectCls}-clear`]: { [`${selectCls}-clear`]: {
insetInlineEnd: token.padding * 2, insetInlineEnd: inputPaddingHorizontalBase + token.fontSize + token.paddingXXS,
}, },
}, },
}; };

1
components/select/style/multiple.tsx
View File

@ -148,7 +148,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
display: 'inline-flex', display: 'inline-flex',
position: 'relative', position: 'relative',
maxWidth: '100%', maxWidth: '100%',
// FIXME: no sure this style
marginInlineStart: token.inputPaddingHorizontalBase - selectItemDist, marginInlineStart: token.inputPaddingHorizontalBase - selectItemDist,
[` [`

39
components/skeleton/Avatar.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import omit from 'rc-util/lib/omit'; import omit from 'rc-util/lib/omit';
import classNames from 'classnames'; import classNames from 'classnames';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider';
import Element, { SkeletonElementProps } from './Element'; import Element, { SkeletonElementProps } from './Element';
export interface AvatarProps extends Omit<SkeletonElementProps, 'shape'> { export interface AvatarProps extends Omit<SkeletonElementProps, 'shape'> {
@ -9,25 +9,24 @@ export interface AvatarProps extends Omit<SkeletonElementProps, 'shape'> {
} }
const SkeletonAvatar = (props: AvatarProps) => { const SkeletonAvatar = (props: AvatarProps) => {
const renderSkeletonAvatar = ({ getPrefixCls }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className, active } = props;
const { prefixCls: customizePrefixCls, className, active } = props; const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('skeleton', customizePrefixCls); const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
const otherProps = omit(props, ['prefixCls', 'className']);
const cls = classNames( const otherProps = omit(props, ['prefixCls', 'className']);
prefixCls, const cls = classNames(
`${prefixCls}-element`, prefixCls,
{ `${prefixCls}-element`,
[`${prefixCls}-active`]: active, {
}, [`${prefixCls}-active`]: active,
className, },
); className,
return ( );
<div className={cls}> return (
<Element prefixCls={`${prefixCls}-avatar`} {...otherProps} /> <div className={cls}>
</div> <Element prefixCls={`${prefixCls}-avatar`} {...otherProps} />
); </div>
}; );
return <ConfigConsumer>{renderSkeletonAvatar}</ConfigConsumer>;
}; };
SkeletonAvatar.defaultProps = { SkeletonAvatar.defaultProps = {

41
components/skeleton/Button.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import omit from 'rc-util/lib/omit'; import omit from 'rc-util/lib/omit';
import classNames from 'classnames'; import classNames from 'classnames';
import Element, { SkeletonElementProps } from './Element'; import Element, { SkeletonElementProps } from './Element';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider';
export interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'> { export interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'> {
size?: 'large' | 'small' | 'default'; size?: 'large' | 'small' | 'default';
@ -10,26 +10,25 @@ export interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'>
} }
const SkeletonButton = (props: SkeletonButtonProps) => { const SkeletonButton = (props: SkeletonButtonProps) => {
const renderSkeletonButton = ({ getPrefixCls }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className, active, block = false } = props;
const { prefixCls: customizePrefixCls, className, active, block = false } = props; const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('skeleton', customizePrefixCls); const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
const otherProps = omit(props, ['prefixCls']);
const cls = classNames( const otherProps = omit(props, ['prefixCls']);
prefixCls, const cls = classNames(
`${prefixCls}-element`, prefixCls,
{ `${prefixCls}-element`,
[`${prefixCls}-active`]: active, {
[`${prefixCls}-block`]: block, [`${prefixCls}-active`]: active,
}, [`${prefixCls}-block`]: block,
className, },
); className,
return ( );
<div className={cls}> return (
<Element prefixCls={`${prefixCls}-button`} {...otherProps} /> <div className={cls}>
</div> <Element prefixCls={`${prefixCls}-button`} {...otherProps} />
); </div>
}; );
return <ConfigConsumer>{renderSkeletonButton}</ConfigConsumer>;
}; };
SkeletonButton.defaultProps = { SkeletonButton.defaultProps = {

36
components/skeleton/Image.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { SkeletonElementProps } from './Element'; import { SkeletonElementProps } from './Element';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider';
export interface SkeletonImageProps export interface SkeletonImageProps
extends Omit<SkeletonElementProps, 'size' | 'shape' | 'active'> {} extends Omit<SkeletonElementProps, 'size' | 'shape' | 'active'> {}
@ -10,26 +10,24 @@ const path =
'M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z'; 'M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z';
const SkeletonImage = (props: SkeletonImageProps) => { const SkeletonImage = (props: SkeletonImageProps) => {
const renderSkeletonImage = ({ getPrefixCls }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className, style } = props;
const { prefixCls: customizePrefixCls, className, style } = props; const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('skeleton', customizePrefixCls); const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
const cls = classNames(prefixCls, `${prefixCls}-element`, className); const cls = classNames(prefixCls, `${prefixCls}-element`, className);
return ( return (
<div className={cls}> <div className={cls}>
<div className={classNames(`${prefixCls}-image`, className)} style={style}> <div className={classNames(`${prefixCls}-image`, className)} style={style}>
<svg <svg
viewBox="0 0 1098 1024" viewBox="0 0 1098 1024"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={`${prefixCls}-image-svg`} className={`${prefixCls}-image-svg`}
> >
<path d={path} className={`${prefixCls}-image-path`} /> <path d={path} className={`${prefixCls}-image-path`} />
</svg> </svg>
</div>
</div> </div>
); </div>
}; );
return <ConfigConsumer>{renderSkeletonImage}</ConfigConsumer>;
}; };
export default SkeletonImage; export default SkeletonImage;

41
components/skeleton/Input.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import omit from 'rc-util/lib/omit'; import omit from 'rc-util/lib/omit';
import classNames from 'classnames'; import classNames from 'classnames';
import Element, { SkeletonElementProps } from './Element'; import Element, { SkeletonElementProps } from './Element';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider';
export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> { export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
size?: 'large' | 'small' | 'default'; size?: 'large' | 'small' | 'default';
@ -10,26 +10,25 @@ export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' |
} }
const SkeletonInput = (props: SkeletonInputProps) => { const SkeletonInput = (props: SkeletonInputProps) => {
const renderSkeletonInput = ({ getPrefixCls }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className, active, block } = props;
const { prefixCls: customizePrefixCls, className, active, block } = props; const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('skeleton', customizePrefixCls); const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
const otherProps = omit(props, ['prefixCls']);
const cls = classNames( const otherProps = omit(props, ['prefixCls']);
prefixCls, const cls = classNames(
`${prefixCls}-element`, prefixCls,
{ `${prefixCls}-element`,
[`${prefixCls}-active`]: active, {
[`${prefixCls}-block`]: block, [`${prefixCls}-active`]: active,
}, [`${prefixCls}-block`]: block,
className, },
); className,
return ( );
<div className={cls}> return (
<Element prefixCls={`${prefixCls}-input`} {...otherProps} /> <div className={cls}>
</div> <Element prefixCls={`${prefixCls}-input`} {...otherProps} />
); </div>
}; );
return <ConfigConsumer>{renderSkeletonInput}</ConfigConsumer>;
}; };
SkeletonInput.defaultProps = { SkeletonInput.defaultProps = {

171
components/skeleton/Skeleton.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import Title, { SkeletonTitleProps } from './Title'; import Title, { SkeletonTitleProps } from './Title';
import Paragraph, { SkeletonParagraphProps } from './Paragraph'; import Paragraph, { SkeletonParagraphProps } from './Paragraph';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider';
import Element from './Element'; import Element from './Element';
import SkeletonAvatar, { AvatarProps } from './Avatar'; import SkeletonAvatar, { AvatarProps } from './Avatar';
import SkeletonButton from './Button'; import SkeletonButton from './Button';
@ -72,99 +72,96 @@ function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): Skeleton
} }
const Skeleton = (props: SkeletonProps) => { const Skeleton = (props: SkeletonProps) => {
const renderSkeleton = ({ getPrefixCls, direction }: ConfigConsumerProps) => { const {
const { prefixCls: customizePrefixCls,
prefixCls: customizePrefixCls, loading,
loading, className,
className, style,
style, children,
children, avatar,
avatar, title,
title, paragraph,
paragraph, active,
active, round,
round, } = props;
} = props;
const prefixCls = getPrefixCls('skeleton', customizePrefixCls); const { getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
if (loading || !('loading' in props)) { if (loading || !('loading' in props)) {
const hasAvatar = !!avatar; const hasAvatar = !!avatar;
const hasTitle = !!title; const hasTitle = !!title;
const hasParagraph = !!paragraph; const hasParagraph = !!paragraph;
// Avatar // Avatar
let avatarNode; let avatarNode;
if (hasAvatar) { if (hasAvatar) {
const avatarProps: SkeletonAvatarProps = { const avatarProps: SkeletonAvatarProps = {
prefixCls: `${prefixCls}-avatar`, prefixCls: `${prefixCls}-avatar`,
...getAvatarBasicProps(hasTitle, hasParagraph), ...getAvatarBasicProps(hasTitle, hasParagraph),
...getComponentProps(avatar), ...getComponentProps(avatar),
}; };
// We direct use SkeletonElement as avatar in skeleton internal. // We direct use SkeletonElement as avatar in skeleton internal.
avatarNode = ( avatarNode = (
<div className={`${prefixCls}-header`}> <div className={`${prefixCls}-header`}>
<Element {...avatarProps} /> <Element {...avatarProps} />
</div>
);
}
let contentNode;
if (hasTitle || hasParagraph) {
// Title
let $title;
if (hasTitle) {
const titleProps: SkeletonTitleProps = {
prefixCls: `${prefixCls}-title`,
...getTitleBasicProps(hasAvatar, hasParagraph),
...getComponentProps(title),
};
$title = <Title {...titleProps} />;
}
// Paragraph
let paragraphNode;
if (hasParagraph) {
const paragraphProps: SkeletonParagraphProps = {
prefixCls: `${prefixCls}-paragraph`,
...getParagraphBasicProps(hasAvatar, hasTitle),
...getComponentProps(paragraph),
};
paragraphNode = <Paragraph {...paragraphProps} />;
}
contentNode = (
<div className={`${prefixCls}-content`}>
{$title}
{paragraphNode}
</div>
);
}
const cls = classNames(
prefixCls,
{
[`${prefixCls}-with-avatar`]: hasAvatar,
[`${prefixCls}-active`]: active,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-round`]: round,
},
className,
);
return (
<div className={cls} style={style}>
{avatarNode}
{contentNode}
</div> </div>
); );
} }
return children; let contentNode;
}; if (hasTitle || hasParagraph) {
return <ConfigConsumer>{renderSkeleton}</ConfigConsumer>; // Title
let $title;
if (hasTitle) {
const titleProps: SkeletonTitleProps = {
prefixCls: `${prefixCls}-title`,
...getTitleBasicProps(hasAvatar, hasParagraph),
...getComponentProps(title),
};
$title = <Title {...titleProps} />;
}
// Paragraph
let paragraphNode;
if (hasParagraph) {
const paragraphProps: SkeletonParagraphProps = {
prefixCls: `${prefixCls}-paragraph`,
...getParagraphBasicProps(hasAvatar, hasTitle),
...getComponentProps(paragraph),
};
paragraphNode = <Paragraph {...paragraphProps} />;
}
contentNode = (
<div className={`${prefixCls}-content`}>
{$title}
{paragraphNode}
</div>
);
}
const cls = classNames(
prefixCls,
{
[`${prefixCls}-with-avatar`]: hasAvatar,
[`${prefixCls}-active`]: active,
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-round`]: round,
},
className,
);
return (
<div className={cls} style={style}>
{avatarNode}
{contentNode}
</div>
);
}
return React.isValidElement(children) ? children : null;
}; };
Skeleton.defaultProps = { Skeleton.defaultProps = {

39
components/spin/__tests__/__snapshots__/index.test.js.snap
View File

@ -1,18 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Spin if indicator set null should not be render default indicator 1`] = ` exports[`Spin if indicator set null should not be render default indicator 1`] = `
<Spin <div
indicator={null} aria-busy="true"
size="default" aria-live="polite"
spinning={true} class="ant-spin ant-spin-spinning"
wrapperClassName="" />
>
<div
aria-busy={true}
aria-live="polite"
className="ant-spin ant-spin-spinning"
/>
</Spin>
`; `;
exports[`Spin rtl render component should be rendered correctly in RTL direction 1`] = ` exports[`Spin rtl render component should be rendered correctly in RTL direction 1`] = `
@ -53,19 +46,13 @@ exports[`Spin should render custom indicator when it's set 1`] = `
`; `;
exports[`Spin should support static method Spin.setDefaultIndicator 1`] = ` exports[`Spin should support static method Spin.setDefaultIndicator 1`] = `
<Spin <div
size="default" aria-busy="true"
spinning={true} aria-live="polite"
wrapperClassName="" class="ant-spin ant-spin-spinning"
> >
<div <em
aria-busy={true} class="custom-spinner ant-spin-dot"
aria-live="polite" />
className="ant-spin ant-spin-spinning" </div>
>
<em
className="custom-spinner ant-spin-dot"
/>
</div>
</Spin>
`; `;

7
components/spin/__tests__/delay.test.js
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import Spin from '..'; // eslint-disable-next-line import/no-named-as-default
import Spin, { Spin as SpinClass } from '..';
import { sleep } from '../../../tests/utils'; import { sleep } from '../../../tests/utils';
describe('delay spinning', () => { describe('delay spinning', () => {
@ -24,8 +25,8 @@ describe('delay spinning', () => {
it('should cancel debounce function when unmount', async () => { it('should cancel debounce function when unmount', async () => {
const wrapper = mount(<Spin spinning delay={100} />); const wrapper = mount(<Spin spinning delay={100} />);
const spy = jest.spyOn(wrapper.instance().updateSpinning, 'cancel'); const spy = jest.spyOn(wrapper.find(SpinClass).instance().updateSpinning, 'cancel');
expect(wrapper.instance().updateSpinning.cancel).toEqual(expect.any(Function)); expect(wrapper.find(SpinClass).instance().updateSpinning.cancel).toEqual(expect.any(Function));
expect(spy).not.toHaveBeenCalled(); expect(spy).not.toHaveBeenCalled();
wrapper.unmount(); wrapper.unmount();
expect(spy).toHaveBeenCalled(); expect(spy).toHaveBeenCalled();

11
components/spin/__tests__/index.test.js
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { render, mount } from 'enzyme'; import { render, mount } from 'enzyme';
import Spin from '..'; // eslint-disable-next-line import/no-named-as-default
import Spin, { Spin as SpinClass } from '..';
import mountTest from '../../../tests/shared/mountTest'; import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest'; import rtlTest from '../../../tests/shared/rtlTest';
@ -26,20 +27,20 @@ describe('Spin', () => {
it('should be controlled by spinning', () => { it('should be controlled by spinning', () => {
const wrapper = mount(<Spin spinning={false} />); const wrapper = mount(<Spin spinning={false} />);
expect(wrapper.instance().state.spinning).toBe(false); expect(wrapper.find(SpinClass).instance().state.spinning).toBe(false);
wrapper.setProps({ spinning: true }); wrapper.setProps({ spinning: true });
expect(wrapper.instance().state.spinning).toBe(true); expect(wrapper.find(SpinClass).instance().state.spinning).toBe(true);
}); });
it('if indicator set null should not be render default indicator', () => { it('if indicator set null should not be render default indicator', () => {
const wrapper = mount(<Spin indicator={null} />); const wrapper = mount(<Spin indicator={null} />);
expect(wrapper).toMatchSnapshot(); expect(wrapper.render()).toMatchSnapshot();
}); });
it('should support static method Spin.setDefaultIndicator', () => { it('should support static method Spin.setDefaultIndicator', () => {
Spin.setDefaultIndicator(<em className="custom-spinner" />); Spin.setDefaultIndicator(<em className="custom-spinner" />);
const wrapper = mount(<Spin />); const wrapper = mount(<Spin />);
expect(wrapper).toMatchSnapshot(); expect(wrapper.render()).toMatchSnapshot();
Spin.setDefaultIndicator(null); Spin.setDefaultIndicator(null);
}); });

64
components/spin/index.tsx
View File

@ -2,9 +2,10 @@ import * as React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import omit from 'rc-util/lib/omit'; import omit from 'rc-util/lib/omit';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { ConfigConsumer, ConfigConsumerProps, ConfigContext } from '../config-provider';
import { tuple } from '../_util/type'; import { tuple } from '../_util/type';
import { isValidElement, cloneElement } from '../_util/reactNode'; import { isValidElement, cloneElement } from '../_util/reactNode';
import useStyle from './style/index';
const SpinSizes = tuple('small', 'default', 'large'); const SpinSizes = tuple('small', 'default', 'large');
export type SpinSize = typeof SpinSizes[number]; export type SpinSize = typeof SpinSizes[number];
@ -22,6 +23,15 @@ export interface SpinProps {
indicator?: SpinIndicator; indicator?: SpinIndicator;
} }
export interface SpinClassProps extends SpinProps {
hashId: string;
spinPrefixCls: string;
}
export type SpinFCType = React.FC<SpinProps> & {
setDefaultIndicator: (indicator: React.ReactNode) => void;
};
export interface SpinState { export interface SpinState {
spinning?: boolean; spinning?: boolean;
notCssAnimationSupported?: boolean; notCssAnimationSupported?: boolean;
@ -30,7 +40,7 @@ export interface SpinState {
// Render indicator // Render indicator
let defaultIndicator: React.ReactNode = null; let defaultIndicator: React.ReactNode = null;
function renderIndicator(prefixCls: string, props: SpinProps): React.ReactNode { function renderIndicator(prefixCls: string, props: SpinClassProps): React.ReactNode {
const { indicator } = props; const { indicator } = props;
const dotClassName = `${prefixCls}-dot`; const dotClassName = `${prefixCls}-dot`;
@ -65,20 +75,16 @@ function shouldDelay(spinning?: boolean, delay?: number): boolean {
return !!spinning && !!delay && !isNaN(Number(delay)); return !!spinning && !!delay && !isNaN(Number(delay));
} }
class Spin extends React.Component<SpinProps, SpinState> { export class Spin extends React.Component<SpinClassProps, SpinState> {
static defaultProps = { static defaultProps = {
spinning: true, spinning: true,
size: 'default' as SpinSize, size: 'default' as SpinSize,
wrapperClassName: '', wrapperClassName: '',
}; };
static setDefaultIndicator(indicator: React.ReactNode) {
defaultIndicator = indicator;
}
originalUpdateSpinning: () => void; originalUpdateSpinning: () => void;
constructor(props: SpinProps) { constructor(props: SpinClassProps) {
super(props); super(props);
const { spinning, delay } = props; const { spinning, delay } = props;
@ -103,7 +109,7 @@ class Spin extends React.Component<SpinProps, SpinState> {
this.cancelExistingSpin(); this.cancelExistingSpin();
} }
debouncifyUpdateSpinning = (props?: SpinProps) => { debouncifyUpdateSpinning = (props?: SpinClassProps) => {
const { delay } = props || this.props; const { delay } = props || this.props;
if (delay) { if (delay) {
this.cancelExistingSpin(); this.cancelExistingSpin();
@ -130,9 +136,10 @@ class Spin extends React.Component<SpinProps, SpinState> {
return !!(this.props && typeof this.props.children !== 'undefined'); return !!(this.props && typeof this.props.children !== 'undefined');
} }
renderSpin = ({ getPrefixCls, direction }: ConfigConsumerProps) => { renderSpin = ({ direction }: ConfigConsumerProps) => {
const { const {
prefixCls: customizePrefixCls, spinPrefixCls: prefixCls,
hashId,
className, className,
size, size,
tip, tip,
@ -142,7 +149,6 @@ class Spin extends React.Component<SpinProps, SpinState> {
} = this.props; } = this.props;
const { spinning } = this.state; const { spinning } = this.state;
const prefixCls = getPrefixCls('spin', customizePrefixCls);
const spinClassName = classNames( const spinClassName = classNames(
prefixCls, prefixCls,
{ {
@ -153,10 +159,11 @@ class Spin extends React.Component<SpinProps, SpinState> {
[`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-rtl`]: direction === 'rtl',
}, },
className, className,
hashId,
); );
// fix https://fb.me/react-unknown-prop // fix https://fb.me/react-unknown-prop
const divProps = omit(restProps, ['spinning', 'delay', 'indicator']); const divProps = omit(restProps, ['spinning', 'delay', 'indicator', 'prefixCls']);
const spinElement = ( const spinElement = (
<div <div
@ -175,7 +182,10 @@ class Spin extends React.Component<SpinProps, SpinState> {
[`${prefixCls}-blur`]: spinning, [`${prefixCls}-blur`]: spinning,
}); });
return ( return (
<div {...divProps} className={classNames(`${prefixCls}-nested-loading`, wrapperClassName)}> <div
{...divProps}
className={classNames(`${prefixCls}-nested-loading`, wrapperClassName, hashId)}
>
{spinning && <div key="loading">{spinElement}</div>} {spinning && <div key="loading">{spinElement}</div>}
<div className={containerClassName} key="container"> <div className={containerClassName} key="container">
{this.props.children} {this.props.children}
@ -191,4 +201,28 @@ class Spin extends React.Component<SpinProps, SpinState> {
} }
} }
export default Spin; const SpinFC: SpinFCType = (props: SpinProps) => {
const { prefixCls: customizePrefixCls } = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const spinPrefixCls = getPrefixCls('spin', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(spinPrefixCls);
const spinClassProps: SpinClassProps = {
...props,
spinPrefixCls,
hashId,
};
return wrapSSR(<Spin {...spinClassProps} />);
};
SpinFC.setDefaultIndicator = (indicator: React.ReactNode) => {
defaultIndicator = indicator;
};
if (process.env.NODE_ENV !== 'production') {
SpinFC.displayName = 'Spin';
}
export default SpinFC;

0
components/spin/style/index.less → components/spin/style/_index.less
View File

246
components/spin/style/index.tsx
View File

@ -1,2 +1,244 @@
import '../../style/index.less'; // deps-lint-skip-all
import './index.less'; import { CSSObject, Keyframes } from '@ant-design/cssinjs';
import {
useStyleRegister,
useToken,
resetComponent,
GenerateStyle,
UseComponentStyleResult,
} from '../../_util/theme';
import type { DerivativeToken } from '../../_util/theme';
interface SpinToken extends DerivativeToken {
spinCls: string;
spinDotDefault: string;
spinDotSize: number;
spinDotSizeSM: number;
spinDotSizeLG: number;
}
const antSpinMove = new Keyframes('antSpinMove', {
to: { opacity: 1 },
});
const antRotate = new Keyframes('antRotate', {
to: { transform: 'rotate(405deg)' },
});
const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken, hashId: string): CSSObject => ({
[`${token.spinCls}`]: {
...resetComponent(token),
position: 'absolute',
display: 'none',
color: token.colorPrimary,
textAlign: 'center',
verticalAlign: 'middle',
opacity: 0,
transition: `transform ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
'&-spinning': {
position: 'static',
display: 'inline-block',
opacity: 1,
},
'&-nested-loading': {
position: 'relative',
[`> div > ${token.spinCls}`]: {
position: 'absolute',
top: 0,
insetInlineStart: 0,
zIndex: 4,
display: 'block',
width: '100%',
height: '100%',
maxHeight: 400, // FIXME: hard code in v4
[`${token.spinCls}-dot`]: {
position: 'absolute',
top: '50%',
insetInlineStart: '50%',
margin: -token.spinDotSize / 2,
},
[`${token.spinCls}-text`]: {
position: 'absolute',
top: '50%',
width: '100%',
paddingTop: (token.spinDotSize - token.fontSize) / 2 + 2,
textShadow: `0 1px 2px ${token.colorBgComponent}`,
},
[`&${token.spinCls}-show-text ${token.spinCls}-dot`]: {
marginTop: -(token.spinDotSize / 2) - 10,
},
[`> div > ${token.spinCls}-sm`]: {
[`${token.spinCls}-dot`]: {
margin: -token.spinDotSizeSM / 2,
},
[`${token.spinCls}-text`]: {
paddingTop: (token.spinDotSizeSM - token.fontSize) / 2 + 2,
},
[`&${token.spinCls}-show-text ${token.spinCls}-dot`]: {
marginTop: -(token.spinDotSizeSM / 2) - 10,
},
},
[`> div > ${token.spinCls}-lg`]: {
[`${token.spinCls}-dot`]: {
margin: -(token.spinDotSizeLG / 2),
},
[`${token.spinCls}-text`]: {
paddingTop: (token.spinDotSizeLG - token.fontSize) / 2 + 2,
},
[`&${token.spinCls}-show-text ${token.spinCls}-dot`]: {
marginTop: -(token.spinDotSizeLG / 2) - 10,
},
},
},
[`${token.spinCls}-container`]: {
position: 'relative',
transition: `opacity ${token.motionDurationSlow}`,
'&::after': {
position: 'absolute',
top: 0,
insetInlineEnd: 0,
bottom: 0,
insetInlineStart: 0,
zIndex: 10,
width: '100%',
height: '100%',
background: token.colorBgComponent,
opacity: 0,
transition: `all ${token.motionDurationSlow}`,
content: '""',
pointerEvents: 'none',
},
},
[`${token.spinCls}-blur`]: {
clear: 'both',
opacity: 0.5,
userSelect: 'none',
pointerEvents: 'none',
[`&::after`]: {
opacity: 0.4,
pointerEvents: 'auto',
},
},
},
// tip
// ------------------------------
[`&-tip`]: {
color: token.spinDotDefault,
},
// dots
// ------------------------------
[`${token.spinCls}-dot`]: {
position: 'relative',
display: 'inline-block',
fontSize: token.spinDotSize,
width: '1em',
height: '1em',
'&-item': {
position: 'absolute',
display: 'block',
width: 9, // FIXME: hard code in v4
height: 9, // FIXME: hard code in v4
backgroundColor: token.colorPrimary,
borderRadius: '100%',
transform: 'scale(0.75)',
transformOrigin: '50% 50%',
opacity: 0.3,
animation: `${antSpinMove.getName(hashId)} 1s infinite linear alternate`,
'&:nth-child(1)': {
top: 0,
insetInlineStart: 0,
},
'&:nth-child(2)': {
top: 0,
insetInlineEnd: 0,
animationDelay: '0.4s',
},
'&:nth-child(3)': {
insetInlineEnd: 0,
bottom: 0,
animationDelay: '0.8s',
},
'&:nth-child(4)': {
bottom: 0,
insetInlineStart: 0,
animationDelay: '1.2s',
},
},
'&-spin': {
transform: 'rotate(45deg)',
animation: `${antRotate.getName(hashId)} 1.2s infinite linear`,
},
},
// Sizes
// ------------------------------
// small
[`&-sm ${token.spinCls}-dot`]: {
fontSize: token.spinDotSizeSM,
i: {
width: 6, // FIXME: hard code in v4
height: 6, // FIXME: hard code in v4
},
},
// large
[`&-lg ${token.spinCls}-dot`]: {
fontSize: token.spinDotSizeLG,
i: {
width: 14, // FIXME: hard code in v4
height: 14, // FIXME: hard code in v4
},
},
[`&${token.spinCls}-show-text ${token.spinCls}-text`]: {
display: 'block',
},
// animation
antSpinMove,
antRotate,
},
});
// ============================== Export ==============================
export default function useStyle(prefixCls: string): UseComponentStyleResult {
const [theme, token, hashId] = useToken();
const spinToken: SpinToken = {
...token,
spinCls: `.${prefixCls}`,
spinDotDefault: token.colorTextSecondary,
spinDotSize: 20, // FIXME: hard code in v4
spinDotSizeSM: 14, // FIXME: hard code in v4
spinDotSizeLG: 32, // FIXME: hard code in v4
};
return [
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
genSpinStyle(spinToken, hashId),
]),
hashId,
];
}

1
components/table/Table.tsx
View File

@ -4,6 +4,7 @@ import omit from 'rc-util/lib/omit';
import RcTable, { Summary } from 'rc-table'; import RcTable, { Summary } from 'rc-table';
import { TableProps as RcTableProps, INTERNAL_HOOKS } from 'rc-table/lib/Table'; import { TableProps as RcTableProps, INTERNAL_HOOKS } from 'rc-table/lib/Table';
import { convertChildrenToColumns } from 'rc-table/lib/hooks/useColumns'; import { convertChildrenToColumns } from 'rc-table/lib/hooks/useColumns';
// eslint-disable-next-line import/no-named-as-default
import Spin, { SpinProps } from '../spin'; import Spin, { SpinProps } from '../spin';
import Pagination from '../pagination'; import Pagination from '../pagination';
import { TooltipProps } from '../tooltip'; import { TooltipProps } from '../tooltip';

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

@ -28,12 +28,12 @@ Ant Design has 3 types of Tabs for different situations.
| centered | Centers tabs | boolean | false | 4.4.0 | | centered | Centers tabs | boolean | false | 4.4.0 |
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | | | defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | |
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | | | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | |
| moreIcon | The custom icon of ellipsis | ReactNode | &lt;EllipsisOutlined /> | 4.14.0 | | moreIcon | The custom icon of ellipsis | ReactNode | &lt;EllipsisOutlined /> | 4.14.0 |
| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | | | renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| size | Preset tab bar size | `large` \| `default` \| `small` | `default` | | | size | Preset tab bar size | `large` \| `default` \| `small` | `default` | |
| tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 | | tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
| tabBarGutter | The gap between tabs | number | - | | | tabBarGutter | The gap between tabs | number | - | |
| tabBarStyle | Tab bar style object | object | - | | | tabBarStyle | Tab bar style object | CSSProperties | - | |
| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` | | | tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` | |
| destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | | | destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | |
| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` | | | type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` | |

14
components/tabs/index.zh-CN.md
View File

@ -36,7 +36,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` | | | size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` | |
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 | | tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
| tabBarGutter | tabs 之间的间隙 | number | - | | | tabBarGutter | tabs 之间的间隙 | number | - | |
| tabBarStyle | tab bar 的样式对象 | object | - | | | tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` | | | tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` | |
| destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false | | | destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false | |
| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` | | | type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` | |
@ -47,9 +47,9 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
### Tabs.TabPane ### Tabs.TabPane
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | ----------- | ----------------------------------------------- | --------- | ------ |
| closeIcon | 自定义关闭图标，`在 type="editable-card"`时有效 | ReactNode | - | | closeIcon | 自定义关闭图标，`在 type="editable-card"`时有效 | ReactNode | - |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | | forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
| key | 对应 activeKey | string | - | | key | 对应 activeKey | string | - |
| tab | 选项卡头显示文字 | ReactNode | - | | tab | 选项卡头显示文字 | ReactNode | - |

2
components/tree/style/index.tsx
View File

@ -26,7 +26,7 @@ const treeNodeFX = new Keyframes('ant-tree-node-fx-do-not-use', {
const getSwitchStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({ const getSwitchStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({
[`.${prefixCls}-switcher-icon`]: { [`.${prefixCls}-switcher-icon`]: {
display: 'inline-block', display: 'inline-block',
fontSize: 10, // FIXME: missing token fontSize: 10,
verticalAlign: 'baseline', verticalAlign: 'baseline',
svg: { svg: {

57
components/typography/style/index.tsx
View File

@ -1,6 +1,6 @@
// deps-lint-skip-all // deps-lint-skip-all
import { useStyleRegister, useToken } from '../../_util/theme'; import { useStyleRegister, useToken } from '../../_util/theme';
import type { UseComponentStyleResult, GenerateStyle } from '../../_util/theme'; import type { UseComponentStyleResult, GenerateStyle, AliasToken } from '../../_util/theme';
import { operationUnit } from '../../_util/theme/util/operationUnit'; import { operationUnit } from '../../_util/theme/util/operationUnit';
import { import {
getTitleStyles, getTitleStyles,
@ -10,12 +10,22 @@ import {
getCopiableStyles, getCopiableStyles,
getEllipsisStyles, getEllipsisStyles,
} from './mixins'; } from './mixins';
import type { TypographyToken } from './mixins';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
sizeMarginHeadingVerticalStart: number | string;
sizeMarginHeadingVerticalEnd: number | string;
}
export interface TypographyToken extends AliasToken, ComponentToken {
typographyCls: string;
}
const genTypographyStyle: GenerateStyle<TypographyToken> = token => { const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
const { prefixCls, titleMarginTop } = token.typography; const { typographyCls, sizeMarginHeadingVerticalStart } = token;
return { return {
[`.${prefixCls}`]: { [typographyCls]: {
color: token.colorText, color: token.colorText,
overflowWrap: 'break-word', overflowWrap: 'break-word',
'&&-secondary': { '&&-secondary': {
@ -59,7 +69,7 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
& + h4&, & + h4&,
& + h5& & + h5&
`]: { `]: {
marginTop: titleMarginTop, marginTop: sizeMarginHeadingVerticalStart,
}, },
[` [`
@ -79,7 +89,7 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
+ h4, + h4,
+ h5 + h5
`]: { `]: {
marginTop: titleMarginTop, marginTop: sizeMarginHeadingVerticalStart,
}, },
}, },
@ -89,9 +99,9 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
// Operation // Operation
[` [`
.${prefixCls}-expand, ${typographyCls}-expand,
.${prefixCls}-edit, ${typographyCls}-edit,
.${prefixCls}-copy ${typographyCls}-copy
`]: { `]: {
...operationUnit(token), ...operationUnit(token),
marginInlineStart: token.marginXXS, marginInlineStart: token.marginXXS,
@ -114,20 +124,23 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
export default function useStyle(prefixCls: string): UseComponentStyleResult { export default function useStyle(prefixCls: string): UseComponentStyleResult {
const [theme, token, hashId] = useToken(); const [theme, token, hashId] = useToken();
const typographyToken: TypographyToken = {
...token,
typography: {
prefixCls,
titleMarginTop: '1.2em',
titleMarginBottom: '0.5em',
titleFontWeight: 600,
},
};
return [ return [
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
genTypographyStyle(typographyToken), const { typography } = token;
]),
const typographyToken: TypographyToken = {
...token,
typographyCls: `.${prefixCls}`,
sizeMarginHeadingVerticalStart: '1.2em',
sizeMarginHeadingVerticalEnd: '0.5em',
...typography,
};
return [genTypographyStyle(typographyToken)];
}),
hashId, hashId,
]; ];
} }

97
components/typography/style/mixins.tsx
View File

@ -9,37 +9,28 @@
*/ */
import { gold } from '@ant-design/colors'; import { gold } from '@ant-design/colors';
import type { CSSObject } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs';
import type { DerivativeToken, GenerateStyle } from '../../_util/theme'; import type { GenerateStyle } from '../../_util/theme';
import { operationUnit } from '../../_util/theme/util/operationUnit'; import { operationUnit } from '../../_util/theme/util/operationUnit';
import { initInputToken } from '../../input/style'; import { initInputToken } from '../../input/style';
import type { TypographyToken } from '.';
export interface TypographyToken extends DerivativeToken {
typography: {
prefixCls: string;
titleMarginTop: string;
titleMarginBottom: string;
titleFontWeight: number;
};
}
// eslint-disable-next-line import/prefer-default-export // eslint-disable-next-line import/prefer-default-export
const getTitleStyle = ({ const getTitleStyle = (
fontSize, fontSize: number,
lineHeight, lineHeight: number,
color, color: string,
typographyToken, token: TypographyToken,
}: { ) => {
fontSize: number; const { sizeMarginHeadingVerticalEnd, fontWeightStrong } = token;
lineHeight: number;
color: string; return {
typographyToken: TypographyToken['typography']; marginBottom: sizeMarginHeadingVerticalEnd,
}) => ({ color,
marginBottom: typographyToken.titleMarginBottom, fontWeight: fontWeightStrong,
color, fontSize,
fontWeight: typographyToken.titleFontWeight, lineHeight,
fontSize, };
lineHeight, };
});
// eslint-disable-next-line import/prefer-default-export // eslint-disable-next-line import/prefer-default-export
export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = token => { export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = token => {
@ -54,39 +45,43 @@ export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = token =
div&-h${headingLevel} > textarea, div&-h${headingLevel} > textarea,
h${headingLevel} h${headingLevel}
` `
] = getTitleStyle({ ] = getTitleStyle(
fontSize: token[`fontSizeHeading${headingLevel}`], token[`fontSizeHeading${headingLevel}`],
lineHeight: token[`lineHeightHeading${headingLevel}`], token[`lineHeightHeading${headingLevel}`],
color: token.colorTextHeading, token.colorTextHeading,
typographyToken: token.typography, token,
}); );
}); });
return styles; return styles;
}; };
export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = token => ({ export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = token => {
'a&, a': { const { typographyCls } = token;
...operationUnit(token),
textDecoration: token.linkDecoration,
'&:active, &:hover': { return {
textDecoration: token.linkHoverDecoration, 'a&, a': {
}, ...operationUnit(token),
textDecoration: token.linkDecoration,
[`&[disabled], &.${token.typography.prefixCls}-disabled`]: {
color: token.colorTextDisabled,
cursor: 'not-allowed',
'&:active, &:hover': { '&:active, &:hover': {
color: '@disabled-color', textDecoration: token.linkHoverDecoration,
}, },
'&:active': { [`&[disabled], &${typographyCls}-disabled`]: {
pointerEvents: 'none', color: token.colorTextDisabled,
cursor: 'not-allowed',
'&:active, &:hover': {
color: token.colorTextDisabled,
},
'&:active': {
pointerEvents: 'none',
},
}, },
}, },
}, };
}); };
export const getResetStyles = (): CSSObject => ({ export const getResetStyles = (): CSSObject => ({
code: { code: {
@ -188,6 +183,8 @@ export const getResetStyles = (): CSSObject => ({
}); });
export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = token => { export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = token => {
const { typographyCls } = token;
const inputToken = initInputToken(token, '', ''); const inputToken = initInputToken(token, '', '');
const inputShift = inputToken.inputPaddingVertical + 1; const inputShift = inputToken.inputPaddingVertical + 1;
return { return {
@ -200,7 +197,7 @@ export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = toke
marginBottom: `calc(1em - ${inputShift}px)`, marginBottom: `calc(1em - ${inputShift}px)`,
}, },
[`.${token.typography.prefixCls}-edit-content-confirm`]: { [`${typographyCls}-edit-content-confirm`]: {
position: 'absolute', position: 'absolute',
insetInlineEnd: token.marginXS + 2, insetInlineEnd: token.marginXS + 2,
insetBlockEnd: token.marginXS, insetBlockEnd: token.marginXS,