diff --git a/.dumi/theme/SiteThemeProvider.tsx b/.dumi/theme/SiteThemeProvider.tsx index da43b7aac4..2afa2c6ba2 100644 --- a/.dumi/theme/SiteThemeProvider.tsx +++ b/.dumi/theme/SiteThemeProvider.tsx @@ -1,24 +1,18 @@ -import { ConfigProvider, theme as antdTheme } from 'antd'; +import { theme } from 'antd'; import type { ThemeProviderProps } from 'antd-style'; import { ThemeProvider } from 'antd-style'; +import { ConfigContext } from 'antd/es/config-provider'; import type { FC } from 'react'; -import React, { useContext } from 'react'; +import { useContext } from 'react'; -const SiteThemeProvider: FC = ({ children, theme, ...rest }) => { - const { getPrefixCls, iconPrefixCls } = useContext(ConfigProvider.ConfigContext); +const SiteThemeProvider: FC = ({ children, ...rest }) => { + const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext); const rootPrefixCls = getPrefixCls(); - const { token } = antdTheme.useToken(); - - React.useEffect(() => { - ConfigProvider.config({ - theme, - }); - }, [theme]); + const { token } = theme.useToken(); return ( { }); }); + describe('getDataOrAriaProps', () => { + it('returns all data-* properties from an object', () => { + const props = { + onClick: () => {}, + isOpen: true, + 'data-test': 'test-id', + 'data-id': 1234, + }; + const results = getDataOrAriaProps(props); + expect(results).toEqual({ + 'data-test': 'test-id', + 'data-id': 1234, + }); + }); + + it('does not return data-__ properties from an object', () => { + const props = { + onClick: () => {}, + isOpen: true, + 'data-__test': 'test-id', + 'data-__id': 1234, + }; + const results = getDataOrAriaProps(props); + expect(results).toEqual({}); + }); + + it('returns all aria-* properties from an object', () => { + const props = { + onClick: () => {}, + isOpen: true, + 'aria-labelledby': 'label-id', + 'aria-label': 'some-label', + }; + const results = getDataOrAriaProps(props); + expect(results).toEqual({ + 'aria-labelledby': 'label-id', + 'aria-label': 'some-label', + }); + }); + + it('returns role property from an object', () => { + const props = { + onClick: () => {}, + isOpen: true, + role: 'search', + }; + const results = getDataOrAriaProps(props); + expect(results).toEqual({ role: 'search' }); + }); + }); + describe('TransButton', () => { it('can be focus/blur', () => { const ref = React.createRef(); diff --git a/components/_util/getDataOrAriaProps.ts b/components/_util/getDataOrAriaProps.ts new file mode 100644 index 0000000000..1984714db6 --- /dev/null +++ b/components/_util/getDataOrAriaProps.ts @@ -0,0 +1,11 @@ +export default function getDataOrAriaProps(props: any) { + return Object.keys(props).reduce((prev: any, key: string) => { + if ( + (key.startsWith('data-') || key.startsWith('aria-') || key === 'role') && + !key.startsWith('data-__') + ) { + prev[key] = props[key]; + } + return prev; + }, {}); +} diff --git a/components/alert/index.tsx b/components/alert/index.tsx index 1af120f207..09dec1ab8f 100644 --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -5,9 +5,9 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled'; import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled'; import classNames from 'classnames'; import CSSMotion from 'rc-motion'; -import pickAttrs from 'rc-util/lib/pickAttrs'; import type { ReactElement } from 'react'; import * as React from 'react'; +import getDataOrAriaProps from '../_util/getDataOrAriaProps'; import { replaceElement } from '../_util/reactNode'; import { ConfigContext } from '../config-provider'; import ErrorBoundary from './ErrorBoundary'; @@ -117,7 +117,7 @@ const Alert: CompoundedComponent = ({ }) => { const [closed, setClosed] = React.useState(false); - const ref = React.useRef(null); + const ref = React.useRef(); const { getPrefixCls, direction } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('alert', customizePrefixCls); const [wrapSSR, hashId] = useStyle(prefixCls); @@ -157,10 +157,7 @@ const Alert: CompoundedComponent = ({ hashId, ); - const dataOrAriaProps = pickAttrs(props, { - aria: true, - data: true, - }); + const dataOrAriaProps = getDataOrAriaProps(props); return wrapSSR( `; -exports[`renders components/anchor/demo/component-token.tsx extend context correctly 1`] = ` -
-
-
-
-
-
-
-
-
-
-
- -
- - Part 1 - -
-
- - Part 2 - -
-
- - Part 3 - -
-
-
-
-
-
-
-`; - exports[`renders components/anchor/demo/customizeHighlight.tsx extend context correctly 1`] = `
`; -exports[`renders components/anchor/demo/component-token.tsx correctly 1`] = ` -
-
-
-
-
-
-
-
-
-
-
- -
- - Part 1 - -
-
- - Part 2 - -
-
- - Part 3 - -
-
-
-
-
-
-
-`; - exports[`renders components/anchor/demo/customizeHighlight.tsx correctly 1`] = `
( - - - -
-
-
- - - - - - -); diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index 31b1d67444..3469aa1326 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -30,7 +30,6 @@ For displaying anchor hyperlinks on page and jumping between them. Set Anchor scroll offset Listening for anchor link change Deprecated JSX demo -Component Token ## API diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index bed0635ec4..2a393c4bb6 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -31,7 +31,6 @@ group: 设置锚点滚动偏移量 监听锚点链接改变 废弃的 JSX 示例 -组件 Token ## API diff --git a/components/anchor/style/index.ts b/components/anchor/style/index.ts index cbaa7934a2..3acc6ff60c 100644 --- a/components/anchor/style/index.ts +++ b/components/anchor/style/index.ts @@ -3,14 +3,13 @@ import { resetComponent, textEllipsis } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -export interface ComponentToken { - linkPaddingBlock: number; - linkPaddingInlineStart: number; -} +export interface ComponentToken {} interface AnchorToken extends FullToken<'Anchor'> { holderOffsetBlock: number; + anchorPaddingBlock: number; anchorPaddingBlockSecondary: number; + anchorPaddingInline: number; anchorBallSize: number; anchorTitleBlock: number; } @@ -35,14 +34,16 @@ const genSharedAnchorStyle: GenerateStyle = (token): CSSObject => { // delete overflow: auto // overflow: 'auto', + backgroundColor: 'transparent', + [componentCls]: { ...resetComponent(token), position: 'relative', paddingInlineStart: lineWidthBold, [`${componentCls}-link`]: { - paddingBlock: token.linkPaddingBlock, - paddingInline: `${token.linkPaddingInlineStart}px 0`, + paddingBlock: token.anchorPaddingBlock, + paddingInline: `${token.anchorPaddingInline}px 0`, '&-title': { ...textEllipsis, @@ -151,21 +152,16 @@ const genSharedAnchorHorizontalStyle: GenerateStyle = (token): CSSO }; // ============================== Export ============================== -export default genComponentStyleHook( - 'Anchor', - (token) => { - const { fontSize, fontSizeLG, paddingXXS } = token; +export default genComponentStyleHook('Anchor', (token) => { + const { fontSize, fontSizeLG, padding, paddingXXS } = token; - const anchorToken = mergeToken(token, { - holderOffsetBlock: paddingXXS, - anchorPaddingBlockSecondary: paddingXXS / 2, - anchorTitleBlock: (fontSize / 14) * 3, - anchorBallSize: fontSizeLG / 2, - }); - return [genSharedAnchorStyle(anchorToken), genSharedAnchorHorizontalStyle(anchorToken)]; - }, - (token) => ({ - linkPaddingBlock: token.paddingXXS, - linkPaddingInlineStart: token.padding, - }), -); + const anchorToken = mergeToken(token, { + holderOffsetBlock: paddingXXS, + anchorPaddingBlock: paddingXXS, + anchorPaddingBlockSecondary: paddingXXS / 2, + anchorPaddingInline: padding, + anchorTitleBlock: (fontSize / 14) * 3, + anchorBallSize: fontSizeLG / 2, + }); + return [genSharedAnchorStyle(anchorToken), genSharedAnchorHorizontalStyle(anchorToken)]; +}); diff --git a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap index bb5f9548b8..7787432769 100644 --- a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -342,243 +342,6 @@ exports[`renders components/avatar/demo/basic.tsx extend context correctly 1`] =
`; -exports[`renders components/avatar/demo/component-token.tsx extend context correctly 1`] = ` -Array [ -
-
- - - -
-
, -
-
-
- - - - - - K - - - - - +2 - - -
-
-
- -
-
-
-
, -
-
- - - - - - - - - - 1 - - - - -
-
- - - - - - - - -
-
, -] -`; - exports[`renders components/avatar/demo/dynamic.tsx extend context correctly 1`] = ` Array [ `; -exports[`renders components/avatar/demo/component-token.tsx correctly 1`] = ` -Array [ -
-
- - - -
-
, -
-
-
- - - - - - K - - - - - +2 - - -
-
-
, -
-
- - - - - - - - - - 1 - - - - -
-
- - - - - - - - -
-
, -] -`; - exports[`renders components/avatar/demo/dynamic.tsx correctly 1`] = ` Array [ ( - - - - A - - - - - - K - - } /> - - } /> - - - - - } /> - - - } /> - - - -); - -export default App; diff --git a/components/avatar/index.en-US.md b/components/avatar/index.en-US.md index 123026e0d1..6c20f7b7bd 100644 --- a/components/avatar/index.en-US.md +++ b/components/avatar/index.en-US.md @@ -23,7 +23,6 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s, Calculate text style when hiding Responsive Size Fallback -Component Token ## API diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md index 84660b407c..b6bccedbf3 100644 --- a/components/avatar/index.zh-CN.md +++ b/components/avatar/index.zh-CN.md @@ -28,7 +28,6 @@ group: 隐藏情况下计算字符对齐 响应式尺寸 图片不存在时 -组件 Token ## API diff --git a/components/avatar/style/index.ts b/components/avatar/style/index.ts index e096bf5ab0..0c47b3ea94 100644 --- a/components/avatar/style/index.ts +++ b/components/avatar/style/index.ts @@ -3,22 +3,21 @@ import { resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -export interface ComponentToken { - containerSize: number; - containerSizeLG: number; - containerSizeSM: number; - textFontSize: number; - textFontSizeLG: number; - textFontSizeSM: number; - groupSpace: number; - groupOverlapping: number; - groupBorderColor: string; -} +export interface ComponentToken {} type AvatarToken = FullToken<'Avatar'> & { - avatarBgColor: string; avatarBg: string; avatarColor: string; + avatarSizeBase: number; + avatarSizeLG: number; + avatarSizeSM: number; + avatarFontSizeBase: number; + avatarFontSizeLG: number; + avatarFontSizeSM: number; + avatarGroupOverlapping: number; + avatarGroupSpace: number; + avatarGroupBorderColor: string; + avatarBgColor: string; }; const genBaseStyle: GenerateStyle = (token) => { @@ -28,12 +27,12 @@ const genBaseStyle: GenerateStyle = (token) => { iconCls, avatarBg, avatarColor, - containerSize, - containerSizeLG, - containerSizeSM, - textFontSize, - textFontSizeLG, - textFontSizeSM, + avatarSizeBase, + avatarSizeLG, + avatarSizeSM, + avatarFontSizeBase, + avatarFontSizeLG, + avatarFontSizeSM, borderRadius, borderRadiusLG, borderRadiusSM, @@ -90,14 +89,14 @@ const genBaseStyle: GenerateStyle = (token) => { display: 'block', }, - ...avatarSizeStyle(containerSize, textFontSize, borderRadius), + ...avatarSizeStyle(avatarSizeBase, avatarFontSizeBase, borderRadius), [`&-lg`]: { - ...avatarSizeStyle(containerSizeLG, textFontSizeLG, borderRadiusLG), + ...avatarSizeStyle(avatarSizeLG, avatarFontSizeLG, borderRadiusLG), }, [`&-sm`]: { - ...avatarSizeStyle(containerSizeSM, textFontSizeSM, borderRadiusSM), + ...avatarSizeStyle(avatarSizeSM, avatarFontSizeSM, borderRadiusSM), }, '> img': { @@ -111,65 +110,55 @@ const genBaseStyle: GenerateStyle = (token) => { }; const genGroupStyle: GenerateStyle = (token) => { - const { componentCls, groupBorderColor, groupOverlapping, groupSpace } = token; + const { componentCls, avatarGroupBorderColor, avatarGroupSpace } = token; return { [`${componentCls}-group`]: { display: 'inline-flex', [`${componentCls}`]: { - borderColor: groupBorderColor, + borderColor: avatarGroupBorderColor, }, [`> *:not(:first-child)`]: { - marginInlineStart: groupOverlapping, - }, - }, - [`${componentCls}-group-popover`]: { - [`${componentCls} + ${componentCls}`]: { - marginInlineStart: groupSpace, + marginInlineStart: avatarGroupSpace, }, }, }; }; -export default genComponentStyleHook( - 'Avatar', - (token) => { - const { colorTextLightSolid, colorTextPlaceholder } = token; - const avatarToken = mergeToken(token, { - avatarBg: colorTextPlaceholder, - avatarColor: colorTextLightSolid, - }); - return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)]; - }, - (token) => { - const { - controlHeight, - controlHeightLG, - controlHeightSM, +export default genComponentStyleHook('Avatar', (token) => { + const { + colorTextLightSolid, - fontSize, - fontSizeLG, - fontSizeXL, - fontSizeHeading3, + controlHeight, + controlHeightLG, + controlHeightSM, - marginXS, - marginXXS, - colorBorderBg, - } = token; - return { - containerSize: controlHeight, - containerSizeLG: controlHeightLG, - containerSizeSM: controlHeightSM, + fontSize, + fontSizeLG, + fontSizeXL, + fontSizeHeading3, - textFontSize: Math.round((fontSizeLG + fontSizeXL) / 2), - textFontSizeLG: fontSizeHeading3, - textFontSizeSM: fontSize, + marginXS, + colorBorderBg, + colorTextPlaceholder, + } = token; - groupSpace: marginXXS, - groupOverlapping: -marginXS, - groupBorderColor: colorBorderBg, - }; - }, -); + const avatarToken = mergeToken(token, { + avatarBg: colorTextPlaceholder, + avatarColor: colorTextLightSolid, + + avatarSizeBase: controlHeight, + avatarSizeLG: controlHeightLG, + avatarSizeSM: controlHeightSM, + + avatarFontSizeBase: Math.round((fontSizeLG + fontSizeXL) / 2), + avatarFontSizeLG: fontSizeHeading3, + avatarFontSizeSM: fontSize, + avatarGroupSpace: -marginXS, + avatarGroupBorderColor: colorBorderBg, + }); + + return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)]; +}); diff --git a/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap index c91b2f2c4f..80de3decff 100644 --- a/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -63,333 +63,6 @@ exports[`renders components/breadcrumb/demo/basic.tsx extend context correctly 1 `; -exports[`renders components/breadcrumb/demo/component-token.tsx extend context correctly 1`] = ` - -`; - exports[`renders components/breadcrumb/demo/debug-routes.tsx extend context correctly 1`] = `
`; -exports[`renders components/calendar/demo/component-token.tsx extend context correctly 1`] = ` -Array [ -
-
-
-
- - - - - 2016 - -
-
-
-
-
- 2006 -
-
- 2007 -
-
-
-
-
-
-
-
- 2006 -
-
-
-
- 2007 -
-
-
-
- 2008 -
-
-
-
- 2009 -
-
-
-
- 2010 -
-
-
-
- 2011 -
-
-
-
- 2012 -
-
-
-
- 2013 -
-
-
-
- 2014 -
-
-
-
- 2015 -
-
-
-
- 2016 -
-
-
-
- 2017 -
-
-
-
- 2018 -
-
-
-
- 2019 -
-
-
-
- 2020 -
-
-
-
- 2021 -
-
-
-
- 2022 -
-
-
-
- 2023 -
-
-
-
- 2024 -
-
-
-
- 2025 -
-
-
-
-
-
-
-
- -
-
-
- - - - - Nov - -
-
-
-
-
- 0 -
-
- 1 -
-
-
-
-
-
-
-
- Jan -
-
-
-
- Feb -
-
-
-
- Mar -
-
-
-
- Apr -
-
-
-
- May -
-
-
-
- Jun -
-
-
-
- Jul -
-
-
-
- Aug -
-
-
-
- Sep -
-
-
-
- Oct -
-
-
-
- Nov -
-
-
-
- Dec -
-
-
-
-
-
-
-
- -
-
- - -
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Su - - Mo - - Tu - - We - - Th - - Fr - - Sa -
-
-
- 30 -
-
-
-
-
-
- 31 -
-
-
-
-
-
- 01 -
-
-
-
-
-
- 02 -
-
-
-
-
-
- 03 -
-
-
-
-
-
- 04 -
-
-
-
-
-
- 05 -
-
-
-
-
-
- 06 -
-
-
-
-
-
- 07 -
-
-
-
-
-
- 08 -
-
-
-
-
-
- 09 -
-
-
-
-
-
- 10 -
-
-
-
-
-
- 11 -
-
-
-
-
-
- 12 -
-
-
-
-
-
- 13 -
-
-
-
-
-
- 14 -
-
-
-
-
-
- 15 -
-
-
-
-
-
- 16 -
-
-
-
-
-
- 17 -
-
-
-
-
-
- 18 -
-
-
-
-
-
- 19 -
-
-
-
-
-
- 20 -
-
-
-
-
-
- 21 -
-
-
-
-
-
- 22 -
-
-
-
-
-
- 23 -
-
-
-
-
-
- 24 -
-
-
-
-
-
- 25 -
-
-
-
-
-
- 26 -
-
-
-
-
-
- 27 -
-
-
-
-
-
- 28 -
-
-
-
-
-
- 29 -
-
-
-
-
-
- 30 -
-
-
-
-
-
- 01 -
-
-
-
-
-
- 02 -
-
-
-
-
-
- 03 -
-
-
-
-
-
- 04 -
-
-
-
-
-
- 05 -
-
-
-
-
-
- 06 -
-
-
-
-
-
- 07 -
-
-
-
-
-
- 08 -
-
-
-
-
-
- 09 -
-
-
-
-
-
- 10 -
-
-
-
-
-
-
-
, -
, -
-
-
-
- - - - - 2016 - -
-
-
-
-
- 2006 -
-
- 2007 -
-
-
-
-
-
-
-
- 2006 -
-
-
-
- 2007 -
-
-
-
- 2008 -
-
-
-
- 2009 -
-
-
-
- 2010 -
-
-
-
- 2011 -
-
-
-
- 2012 -
-
-
-
- 2013 -
-
-
-
- 2014 -
-
-
-
- 2015 -
-
-
-
- 2016 -
-
-
-
- 2017 -
-
-
-
- 2018 -
-
-
-
- 2019 -
-
-
-
- 2020 -
-
-
-
- 2021 -
-
-
-
- 2022 -
-
-
-
- 2023 -
-
-
-
- 2024 -
-
-
-
- 2025 -
-
-
-
-
-
-
-
- -
-
-
- - - - - Nov - -
-
-
-
-
- 0 -
-
- 1 -
-
-
-
-
-
-
-
- Jan -
-
-
-
- Feb -
-
-
-
- Mar -
-
-
-
- Apr -
-
-
-
- May -
-
-
-
- Jun -
-
-
-
- Jul -
-
-
-
- Aug -
-
-
-
- Sep -
-
-
-
- Oct -
-
-
-
- Nov -
-
-
-
- Dec -
-
-
-
-
-
-
-
- -
-
- - -
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Su - - Mo - - Tu - - We - - Th - - Fr - - Sa -
-
-
- 30 -
-
-
-
-
-
- 31 -
-
-
-
-
-
- 01 -
-
-
-
-
-
- 02 -
-
-
-
-
-
- 03 -
-
-
-
-
-
- 04 -
-
-
-
-
-
- 05 -
-
-
-
-
-
- 06 -
-
-
-
-
-
- 07 -
-
-
-
-
-
- 08 -
-
-
-
-
-
- 09 -
-
-
-
-
-
- 10 -
-
-
-
-
-
- 11 -
-
-
-
-
-
- 12 -
-
-
-
-
-
- 13 -
-
-
-
-
-
- 14 -
-
-
-
-
-
- 15 -
-
-
-
-
-
- 16 -
-
-
-
-
-
- 17 -
-
-
-
-
-
- 18 -
-
-
-
-
-
- 19 -
-
-
-
-
-
- 20 -
-
-
-
-
-
- 21 -
-
-
-
-
-
- 22 -
-
-
-
-
-
- 23 -
-
-
-
-
-
- 24 -
-
-
-
-
-
- 25 -
-
-
-
-
-
- 26 -
-
-
-
-
-
- 27 -
-
-
-
-
-
- 28 -
-
-
-
-
-
- 29 -
-
-
-
-
-
- 30 -
-
-
-
-
-
- 01 -
-
-
-
-
-
- 02 -
-
-
-
-
-
- 03 -
-
-
-
-
-
- 04 -
-
-
-
-
-
- 05 -
-
-
-
-
-
- 06 -
-
-
-
-
-
- 07 -
-
-
-
-
-
- 08 -
-
-
-
-
-
- 09 -
-
-
-
-
-
- 10 -
-
-
-
-
-
-
-
, -] -`; - exports[`renders components/calendar/demo/customize-header.tsx extend context correctly 1`] = `
`; -exports[`renders components/calendar/demo/component-token.tsx correctly 1`] = ` -Array [ -
-
-
-
- - - - - 2016 - -
- -
-
-
- - - - - Nov - -
- -
-
- - -
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Su - - Mo - - Tu - - We - - Th - - Fr - - Sa -
-
-
- 30 -
-
-
-
-
-
- 31 -
-
-
-
-
-
- 01 -
-
-
-
-
-
- 02 -
-
-
-
-
-
- 03 -
-
-
-
-
-
- 04 -
-
-
-
-
-
- 05 -
-
-
-
-
-
- 06 -
-
-
-
-
-
- 07 -
-
-
-
-
-
- 08 -
-
-
-
-
-
- 09 -
-
-
-
-
-
- 10 -
-
-
-
-
-
- 11 -
-
-
-
-
-
- 12 -
-
-
-
-
-
- 13 -
-
-
-
-
-
- 14 -
-
-
-
-
-
- 15 -
-
-
-
-
-
- 16 -
-
-
-
-
-
- 17 -
-
-
-
-
-
- 18 -
-
-
-
-
-
- 19 -
-
-
-
-
-
- 20 -
-
-
-
-
-
- 21 -
-
-
-
-
-
- 22 -
-
-
-
-
-
- 23 -
-
-
-
-
-
- 24 -
-
-
-
-
-
- 25 -
-
-
-
-
-
- 26 -
-
-
-
-
-
- 27 -
-
-
-
-
-
- 28 -
-
-
-
-
-
- 29 -
-
-
-
-
-
- 30 -
-
-
-
-
-
- 01 -
-
-
-
-
-
- 02 -
-
-
-
-
-
- 03 -
-
-
-
-
-
- 04 -
-
-
-
-
-
- 05 -
-
-
-
-
-
- 06 -
-
-
-
-
-
- 07 -
-
-
-
-
-
- 08 -
-
-
-
-
-
- 09 -
-
-
-
-
-
- 10 -
-
-
-
-
-
-
-
, -
, -
-
-
-
- - - - - 2016 - -
- -
-
-
- - - - - Nov - -
- -
-
- - -
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Su - - Mo - - Tu - - We - - Th - - Fr - - Sa -
-
-
- 30 -
-
-
-
-
-
- 31 -
-
-
-
-
-
- 01 -
-
-
-
-
-
- 02 -
-
-
-
-
-
- 03 -
-
-
-
-
-
- 04 -
-
-
-
-
-
- 05 -
-
-
-
-
-
- 06 -
-
-
-
-
-
- 07 -
-
-
-
-
-
- 08 -
-
-
-
-
-
- 09 -
-
-
-
-
-
- 10 -
-
-
-
-
-
- 11 -
-
-
-
-
-
- 12 -
-
-
-
-
-
- 13 -
-
-
-
-
-
- 14 -
-
-
-
-
-
- 15 -
-
-
-
-
-
- 16 -
-
-
-
-
-
- 17 -
-
-
-
-
-
- 18 -
-
-
-
-
-
- 19 -
-
-
-
-
-
- 20 -
-
-
-
-
-
- 21 -
-
-
-
-
-
- 22 -
-
-
-
-
-
- 23 -
-
-
-
-
-
- 24 -
-
-
-
-
-
- 25 -
-
-
-
-
-
- 26 -
-
-
-
-
-
- 27 -
-
-
-
-
-
- 28 -
-
-
-
-
-
- 29 -
-
-
-
-
-
- 30 -
-
-
-
-
-
- 01 -
-
-
-
-
-
- 02 -
-
-
-
-
-
- 03 -
-
-
-
-
-
- 04 -
-
-
-
-
-
- 05 -
-
-
-
-
-
- 06 -
-
-
-
-
-
- 07 -
-
-
-
-
-
- 08 -
-
-
-
-
-
- 09 -
-
-
-
-
-
- 10 -
-
-
-
-
-
-
-
, -] -`; - exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
{ const { container } = render(); fireEvent.click(container.querySelector('.ant-picker-cell')!); - expect(onSelect).toHaveBeenCalledWith(expect.anything(), { source: 'date' }); + expect(onSelect).toHaveBeenCalledWith(expect.anything()); const value = onSelect.mock.calls[0][0]; expect(Dayjs.isDayjs(value)).toBe(true); @@ -270,7 +270,7 @@ describe('Calendar', () => { const end = Dayjs('2019-11-01'); const onValueChange = jest.fn(); createWrapper(start, end, value, onValueChange); - expect(onValueChange).toHaveBeenCalledWith(value.year(2019).month(3), 'year'); + expect(onValueChange).toHaveBeenCalledWith(value.year(2019).month(3)); }); it('if start.month > value.month, set value.month to start.month', () => { @@ -279,7 +279,7 @@ describe('Calendar', () => { const end = Dayjs('2019-03-01'); const onValueChange = jest.fn(); createWrapper(start, end, value, onValueChange); - expect(onValueChange).toHaveBeenCalledWith(value.year(2019).month(10), 'year'); + expect(onValueChange).toHaveBeenCalledWith(value.year(2019).month(10)); }); it('if change year and month > end month, set value.month to end.month', () => { @@ -302,7 +302,7 @@ describe('Calendar', () => { fireEvent.click( Array.from(wrapper.container.querySelectorAll('.ant-select-item-option')).at(-1)!, ); - expect(onValueChange).toHaveBeenCalledWith(value.year(2019).month(2), 'year'); + expect(onValueChange).toHaveBeenCalledWith(value.year(2019).month(2)); }); it('onMonthChange should work correctly', () => { @@ -324,7 +324,7 @@ describe('Calendar', () => { ); openSelect(wrapper.container, '.ant-picker-calendar-month-select'); clickSelectItem(wrapper.container); - expect(onValueChange).toHaveBeenCalledWith(value.month(10), 'month'); + expect(onValueChange).toHaveBeenCalledWith(value.month(10)); }); it('onTypeChange should work correctly', () => { diff --git a/components/calendar/__tests__/select.test.tsx b/components/calendar/__tests__/select.test.tsx deleted file mode 100644 index 6996a50e4d..0000000000 --- a/components/calendar/__tests__/select.test.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import Dayjs from 'dayjs'; -import 'dayjs/locale/zh-cn'; -import MockDate from 'mockdate'; -import { resetWarned } from 'rc-util/lib/warning'; -import React from 'react'; -import Calendar from '..'; -import { fireEvent, render, waitFakeTimer } from '../../../tests/utils'; - -describe('Calendar.onSelect', () => { - beforeAll(() => { - MockDate.set(Dayjs('2000-01-01').valueOf()); - }); - - beforeEach(() => { - resetWarned(); - jest.useFakeTimers(); - jest.clearAllTimers(); - }); - - afterEach(() => { - jest.useRealTimers(); - }); - - it('source of year select', async () => { - const onSelect = jest.fn(); - const { container } = render(); - - fireEvent.mouseDown(container.querySelector('.ant-select-selector')!); - await waitFakeTimer(); - - fireEvent.click(container.querySelector('.ant-select-item-option')!); - await waitFakeTimer(); - - expect(onSelect).toHaveBeenCalledWith(expect.anything(), { source: 'year' }); - }); - - it('source of month select', async () => { - const onSelect = jest.fn(); - const { container } = render(); - - fireEvent.mouseDown(container.querySelectorAll('.ant-select-selector')[1]!); - await waitFakeTimer(); - - fireEvent.click(container.querySelector('.ant-select-item-option')!); - await waitFakeTimer(); - - expect(onSelect).toHaveBeenCalledWith(expect.anything(), { source: 'month' }); - }); - - it('source of customize', async () => { - const onSelect = jest.fn(); - const { container } = render( - ( - - )} - />, - ); - - fireEvent.click(container.querySelector('.bamboo')!); - await waitFakeTimer(); - - expect(onSelect).toHaveBeenCalledWith(expect.anything(), { source: 'customize' }); - }); - - it('source of date', () => { - const onSelect = jest.fn(); - const { container } = render(); - - fireEvent.click(container.querySelector('.ant-picker-cell')!); - expect(onSelect).toHaveBeenCalledWith(expect.anything(), { source: 'date' }); - }); - - it('source of date with month panel', async () => { - const onSelect = jest.fn(); - const onPanelChange = jest.fn(); - const { container } = render(); - - // Default is month radio - fireEvent.click(container.querySelector('.ant-picker-cell')!); - expect(onSelect).toHaveBeenCalledWith(expect.anything(), { source: 'date' }); - - // Click year radio - fireEvent.click(container.querySelectorAll('.ant-radio-button-input')[1]!); - expect(onPanelChange).toHaveBeenCalledWith(expect.anything(), 'year'); - - fireEvent.click(container.querySelector('.ant-picker-cell')!); - expect(onSelect).toHaveBeenCalledWith(expect.anything(), { source: 'month' }); - }); -}); diff --git a/components/calendar/demo/component-token.md b/components/calendar/demo/component-token.md deleted file mode 100644 index de91480d0a..0000000000 --- a/components/calendar/demo/component-token.md +++ /dev/null @@ -1,7 +0,0 @@ -## zh-CN - -Component Token Debug. - -## en-US - -Component Token Debug. diff --git a/components/calendar/demo/component-token.tsx b/components/calendar/demo/component-token.tsx deleted file mode 100644 index ee816d1143..0000000000 --- a/components/calendar/demo/component-token.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Calendar, ConfigProvider } from 'antd'; -import type { CalendarMode } from 'antd/es/calendar/generateCalendar'; -import type { Dayjs } from 'dayjs'; -import React from 'react'; - -/** Test usage. Do not use in your production. */ -export default () => { - const onPanelChange = (value: Dayjs, mode: CalendarMode) => { - console.log(value.format('YYYY-MM-DD'), mode); - }; - - return ( - - -
- - - ); -}; diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx index f53530d254..9423212f4b 100644 --- a/components/calendar/generateCalendar.tsx +++ b/components/calendar/generateCalendar.tsx @@ -43,10 +43,6 @@ export type HeaderRender = (config: { onTypeChange: (type: CalendarMode) => void; }) => React.ReactNode; -export interface SelectInfo { - source: 'year' | 'month' | 'date' | 'customize'; -} - export interface CalendarProps { prefixCls?: string; className?: string; @@ -72,7 +68,7 @@ export interface CalendarProps { fullscreen?: boolean; onChange?: (date: DateType) => void; onPanelChange?: (date: DateType, mode: CalendarMode) => void; - onSelect?: (date: DateType, selectInfo: SelectInfo) => void; + onSelect?: (date: DateType) => void; } function generateCalendar(generateConfig: GenerateConfig) { @@ -202,10 +198,10 @@ function generateCalendar(generateConfig: GenerateConfig) { triggerPanelChange(mergedValue, newMode); }; - const onInternalSelect = (date: DateType, source: SelectInfo['source']) => { + const onInternalSelect = (date: DateType) => { triggerChange(date); - onSelect?.(date, { source }); + onSelect?.(date); }; // ====================== Locale ====================== @@ -314,9 +310,7 @@ function generateCalendar(generateConfig: GenerateConfig) { headerRender({ value: mergedValue, type: mergedMode, - onChange: (nextDate) => { - onInternalSelect(nextDate, 'customize'); - }, + onChange: onInternalSelect, onTypeChange: triggerModeChange, }) ) : ( @@ -338,9 +332,7 @@ function generateCalendar(generateConfig: GenerateConfig) { locale={contextLocale?.lang} generateConfig={generateConfig} cellRender={mergedCellRender} - onSelect={(nextDate) => { - onInternalSelect(nextDate, panelMode); - }} + onSelect={onInternalSelect} mode={panelMode} picker={panelMode} disabledDate={mergedDisabledDate} diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index 5286131b7e..5a534c9c00 100644 --- a/components/calendar/index.en-US.md +++ b/components/calendar/index.en-US.md @@ -20,7 +20,6 @@ When data is in the form of dates, such as schedules, timetables, prices calenda Card Selectable Calendar Customize Header -Component Token ## API @@ -56,7 +55,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda | value | The current selected date | [dayjs](https://day.js.org/) | - | | | onChange | Callback for when date changes | function(date: Dayjs) | - | | | onPanelChange | Callback for when panel changes | function(date: Dayjs, mode: string) | - | | -| onSelect | Callback for when a date is selected, include source info | function(date: Dayjs, info: { source: 'year' \| 'month' \| 'date' \| 'customize' }) | - | `info`: 5.6.0 | +| onSelect | Callback for when a date is selected | function(date: Dayjs） | - | | ## Design Token @@ -75,17 +74,3 @@ See [How to set locale for date-related components](/components/date-picker/#loc ### Date-related components locale is not working? See FAQ [Date-related-components-locale-is-not-working?](/docs/react/faq#date-related-components-locale-is-not-working) - -### How to get date from panel click? - -`onSelect` provide `info.source` to help on this: - -```tsx - { - if (source === 'date') { - console.log('Panel Select:', source); - } - }} -/> -``` diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index 158ff6c113..56039fdb92 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -21,7 +21,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA 卡片模式 选择功能 自定义头部 -组件 Token ## API @@ -61,7 +60,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA | value | 展示日期 | [dayjs](https://day.js.org/) | - | | | onChange | 日期变化回调 | function(date: Dayjs) | - | | | onPanelChange | 日期面板变化回调 | function(date: Dayjs, mode: string) | - | | -| onSelect | 选择日期回调，包含来源信息 | function(date: Dayjs, info: { source: 'year' \| 'month' \| 'date' \| 'customize' }) | - | `info`: 5.6.0 | +| onSelect | 点击选择日期回调 | function(date: Dayjs） | - | | ## Design Token @@ -80,17 +79,3 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA ### 为什么时间类组件的国际化 locale 设置不生效？ 参考 FAQ [为什么时间类组件的国际化 locale 设置不生效？](/docs/react/faq#为什么时间类组件的国际化-locale-设置不生效)。 - -### 如何仅获取来自面板点击的日期？ - -`onSelect` 事件提供额外的来源信息，你可以通过 `info.source` 来判断来源： - -```tsx - { - if (source === 'date') { - console.log('Panel Select:', source); - } - }} -/> -``` diff --git a/components/calendar/style/index.ts b/components/calendar/style/index.ts index dca20ff1d4..e1572ee84a 100644 --- a/components/calendar/style/index.ts +++ b/components/calendar/style/index.ts @@ -11,25 +11,26 @@ export interface ComponentToken { yearControlWidth: number; monthControlWidth: number; miniContentHeight: number; - fullBg: string; - fullPanelBg: string; - itemActiveBg: string; } interface CalendarToken extends InputToken>, PickerPanelToken { calendarCls: string; + calendarFullBg: string; + calendarFullPanelBg: string; + calendarItemActiveBg: string; dateValueHeight: number; weekHeight: number; dateContentHeight: number; } export const genCalendarStyles = (token: CalendarToken): CSSObject => { - const { calendarCls, componentCls, fullBg, fullPanelBg, itemActiveBg } = token; + const { calendarCls, componentCls, calendarFullBg, calendarFullPanelBg, calendarItemActiveBg } = + token; return { [calendarCls]: { ...genPanelStyle(token), ...resetComponent(token), - background: fullBg, + background: calendarFullBg, '&-rtl': { direction: 'rtl', }, @@ -51,7 +52,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => { }, }, [`${calendarCls} ${componentCls}-panel`]: { - background: fullPanelBg, + background: calendarFullPanelBg, border: 0, borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`, borderRadius: 0, @@ -91,7 +92,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => { display: 'block', width: '100%', textAlign: 'end', - background: fullBg, + background: calendarFullBg, border: 0, [`${componentCls}-body`]: { 'th, td': { @@ -120,7 +121,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => { // >>> Selected [`&-in-view${componentCls}-cell-selected`]: { [`${calendarCls}-date, ${calendarCls}-date-today`]: { - background: itemActiveBg, + background: calendarItemActiveBg, }, }, '&-selected, &-selected:hover': { @@ -197,6 +198,9 @@ export default genComponentStyleHook( { calendarCls, pickerCellInnerCls: `${token.componentCls}-cell-inner`, + calendarFullBg: token.colorBgContainer, + calendarFullPanelBg: token.colorBgContainer, + calendarItemActiveBg: token.controlItemBgActive, dateValueHeight: token.controlHeightSM, weekHeight: token.controlHeightSM * 0.75, dateContentHeight: @@ -206,12 +210,9 @@ export default genComponentStyleHook( return [genCalendarStyles(calendarToken)]; }, - (token) => ({ - fullBg: token.colorBgContainer, - fullPanelBg: token.colorBgContainer, - itemActiveBg: token.controlItemBgActive, + { yearControlWidth: 80, monthControlWidth: 70, miniContentHeight: 256, - }), + }, ); diff --git a/components/card/Card.tsx b/components/card/Card.tsx index fd0a63ee06..fe416d5167 100644 --- a/components/card/Card.tsx +++ b/components/card/Card.tsx @@ -1,5 +1,4 @@ import classNames from 'classnames'; -import type { Tab } from 'rc-tabs/lib/interface'; import omit from 'rc-util/lib/omit'; import * as React from 'react'; import { ConfigContext } from '../config-provider'; @@ -13,11 +12,10 @@ import useStyle from './style'; export type CardType = 'inner'; export type CardSize = 'default' | 'small'; -export interface CardTabListType extends Omit { +export interface CardTabListType { key: string; - /** @deprecated Please use `label` instead */ - tab?: React.ReactNode; - label?: React.ReactNode; + tab: React.ReactNode; + disabled?: boolean; } export interface CardProps extends Omit, 'title'> { @@ -125,9 +123,10 @@ const Card = React.forwardRef((props, ref) => { {...extraProps} className={`${prefixCls}-head-tabs`} onChange={onTabChange} - items={tabList.map(({ tab, ...item }) => ({ - label: tab, - ...item, + items={tabList.map((item) => ({ + label: item.tab, + key: item.key, + disabled: item.disabled ?? false, }))} /> ) : null; diff --git a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap index ceffcc67cf..e2846da4c8 100644 --- a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -130,284 +130,6 @@ exports[`renders components/card/demo/border-less.tsx extend context correctly 1
`; -exports[`renders components/card/demo/component-token.tsx extend context correctly 1`] = ` -Array [ -
-
-
-
- Card title -
-
- More -
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- -
-
    - -
-
-
-
-
-
-
-
-
-
-

- Card content -

-

- Card content -

-

- Card content -

-
-
    -
  • - - - - - -
    • -
  • - - - - - -
    • -
  • - - - - - -
    • -
-
, -
-
-
-
- Small size card -
-
- - More - -
-
-
-
-

- Card content -

-

- Card content -

-

- Card content -

-
-
, -] -`; - exports[`renders components/card/demo/flexible-content.tsx extend context correctly 1`] = `
`; -exports[`renders components/card/demo/component-token.tsx correctly 1`] = ` -Array [ -
-
-
-
- Card title -
-
- More -
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-

- Card content -

-

- Card content -

-

- Card content -

-
-
    -
  • - - - - - -
    • -
  • - - - - - -
    • -
  • - - - - - -
    • -
-
, -
-
-
-
- Small size card -
-
- - More - -
-
-
-
-

- Card content -

-

- Card content -

-

- Card content -

-
-
, -] -`; - exports[`renders components/card/demo/flexible-content.tsx correctly 1`] = `
-
- + +
    • -
    - @@ -3464,16 +3472,18 @@ exports[`renders components/layout/demo/top-side.tsx extend context correctly 1` class="ant-menu-submenu-arrow" />
    -
    - @@ -3638,137 +3648,139 @@ exports[`renders components/layout/demo/top-side.tsx extend context correctly 1` class="ant-menu-submenu-arrow" />
    -
    - + +
    -
    - + +
    • -
    - + +
    @@ -4620,16 +4636,18 @@ exports[`renders components/layout/demo/top-side-2.tsx extend context correctly class="ant-menu-submenu-arrow" />
    -
    - @@ -4749,137 +4767,139 @@ exports[`renders components/layout/demo/top-side-2.tsx extend context correctly class="ant-menu-submenu-arrow" />
    -
    - + +
    -
    - + +
    • -
    - + +
    diff --git a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap index 401a0e7c93..7b0695c856 100644 --- a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -167,660 +167,6 @@ exports[`renders components/list/demo/basic.tsx extend context correctly 1`] = `
    `; -exports[`renders components/list/demo/component-token.tsx extend context correctly 1`] = ` -Array [ - , -
    -
    -
    - Header -
    -
    -
    -
    -
      -
    • - - - [ITEM] - - - Racing car sprays burning fuel into crowd. -
      • -
    • - - - [ITEM] - - - Japanese princess to wed commoner. -
      • -
    • - - - [ITEM] - - - Australian walks 100km after outback crash. -
      • -
    • - - - [ITEM] - - - Man charged over missing wedding girl. -
      • -
    • - - - [ITEM] - - - Los Angeles battles huge wildfires. -
      • -
    -
    -
    -
    -
    - Footer -
    -
    -
    , - , -
    -
    -
    - Header -
    -
    -
    -
    -
      -
    • - Racing car sprays burning fuel into crowd. -
      • -
    • - Japanese princess to wed commoner. -
      • -
    • - Australian walks 100km after outback crash. -
      • -
    • - Man charged over missing wedding girl. -
      • -
    • - Los Angeles battles huge wildfires. -
      • -
    -
    -
    -
    -
    - Footer -
    -
    -
    , - , -
    -
    -
    - Header -
    -
    -
    -
    -
      -
    • - Racing car sprays burning fuel into crowd. -
      • -
    • - Japanese princess to wed commoner. -
      • -
    • - Australian walks 100km after outback crash. -
      • -
    • - Man charged over missing wedding girl. -
      • -
    • - Los Angeles battles huge wildfires. -
      • -
    -
    -
    -
    -
    - Footer -
    -
    -
    , - , -
    -
    -
    - -
    -
    -
    , - , -
    -
    -
    -
      -
    • -
      -
      - - - -
      -
      -

      - - Ant Design Title 1 - -

      -
      - Ant Design, a design language for background applications, is refined by Ant UED Team -
      -
      -
      -
      • -
    • -
      -
      - - - -
      -
      -

      - - Ant Design Title 2 - -

      -
      - Ant Design, a design language for background applications, is refined by Ant UED Team -
      -
      -
      -
      • -
    • -
      -
      - - - -
      -
      -

      - - Ant Design Title 3 - -

      -
      - Ant Design, a design language for background applications, is refined by Ant UED Team -
      -
      -
      -
      • -
    • -
      -
      - - - -
      -
      -

      - - Ant Design Title 4 - -

      -
      - Ant Design, a design language for background applications, is refined by Ant UED Team -
      -
      -
      -
      • -
    -
    -
    -
    , - , -
    -
    -
    -
    -
    -
    - - - - - - - - - -
    -
    - No data -
    -
    -
    -
    -
    -
    , -] -`; - exports[`renders components/list/demo/grid.tsx extend context correctly 1`] = `
    `; -exports[`renders components/list/demo/component-token.tsx correctly 1`] = ` -Array [ - , -
    -
    -
    - Header -
    -
    -
    -
    -
      -
    • - - - [ITEM] - - - - Racing car sprays burning fuel into crowd. -
      • -
    • - - - [ITEM] - - - - Japanese princess to wed commoner. -
      • -
    • - - - [ITEM] - - - - Australian walks 100km after outback crash. -
      • -
    • - - - [ITEM] - - - - Man charged over missing wedding girl. -
      • -
    • - - - [ITEM] - - - - Los Angeles battles huge wildfires. -
      • -
    -
    -
    -
    -
    - Footer -
    -
    -
    , - , -
    -
    -
    - Header -
    -
    -
    -
    -
      -
    • - Racing car sprays burning fuel into crowd. -
      • -
    • - Japanese princess to wed commoner. -
      • -
    • - Australian walks 100km after outback crash. -
      • -
    • - Man charged over missing wedding girl. -
      • -
    • - Los Angeles battles huge wildfires. -
      • -
    -
    -
    -
    -
    - Footer -
    -
    -
    , - , -
    -
    -
    - Header -
    -
    -
    -
    -
      -
    • - Racing car sprays burning fuel into crowd. -
      • -
    • - Japanese princess to wed commoner. -
      • -
    • - Australian walks 100km after outback crash. -
      • -
    • - Man charged over missing wedding girl. -
      • -
    • - Los Angeles battles huge wildfires. -
      • -
    -
    -
    -
    -
    - Footer -
    -
    -
    , - , -
    -
    -
    -
      -
    • -
      -
      - - - -
      -
      -

      - - Ant Design Title 1 - -

      -
      - Ant Design, a design language for background applications, is refined by Ant UED Team -
      -
      -
      -
      • -
    • -
      -
      - - - -
      -
      -

      - - Ant Design Title 2 - -

      -
      - Ant Design, a design language for background applications, is refined by Ant UED Team -
      -
      -
      -
      • -
    • -
      -
      - - - -
      -
      -

      - - Ant Design Title 3 - -

      -
      - Ant Design, a design language for background applications, is refined by Ant UED Team -
      -
      -
      -
      • -
    • -
      -
      - - - -
      -
      -

      - - Ant Design Title 4 - -

      -
      - Ant Design, a design language for background applications, is refined by Ant UED Team -
      -
      -
      -
      • -
    -
    -
    -
    , - , -
    -
    -
    -
      -
    • -
      -
      - - - -
      -
      -

      - - Ant Design Title 1 - -

      -
      - Ant Design, a design language for background applications, is refined by Ant UED Team -
      -
      -
      -
      • -
    • -
      -
      - - - -
      -
      -

      - - Ant Design Title 2 - -

      -
      - Ant Design, a design language for background applications, is refined by Ant UED Team -
      -
      -
      -
      • -
    • -
      -
      - - - -
      -
      -

      - - Ant Design Title 3 - -

      -
      - Ant Design, a design language for background applications, is refined by Ant UED Team -
      -
      -
      -
      • -
    • -
      -
      - - - -
      -
      -

      - - Ant Design Title 4 - -

      -
      - Ant Design, a design language for background applications, is refined by Ant UED Team -
      -
      -
      -
      • -
    -
    -
    -
    , - , -
    -
    -
    -
    -
    -
    - - - - - - - - - -
    -
    - No data -
    -
    -
    -
    -
    -
    , -] -`; - exports[`renders components/list/demo/grid.tsx correctly 1`] = `
    @@ -446,7 +449,7 @@ exports[`List.pagination should change page size work 2`] = ` >
    @@ -586,13 +592,13 @@ exports[`List.pagination should change page size work 2`] = ` unselectable="on" > @@ -705,7 +711,7 @@ exports[`List.pagination should default work 1`] = ` >
    diff --git a/components/list/demo/component-token.md b/components/list/demo/component-token.md deleted file mode 100644 index 135a6b2770..0000000000 --- a/components/list/demo/component-token.md +++ /dev/null @@ -1,7 +0,0 @@ -## zh-CN - -自定义组件 Token。 - -## en-US - -Custom component token. diff --git a/components/list/demo/component-token.tsx b/components/list/demo/component-token.tsx deleted file mode 100644 index 61a37cb088..0000000000 --- a/components/list/demo/component-token.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { Avatar, ConfigProvider, Divider, List, Typography } from 'antd'; -import React from 'react'; - -const data = [ - 'Racing car sprays burning fuel into crowd.', - 'Japanese princess to wed commoner.', - 'Australian walks 100km after outback crash.', - 'Man charged over missing wedding girl.', - 'Los Angeles battles huge wildfires.', -]; - -const data1 = [ - { - title: 'Ant Design Title 1', - }, - { - title: 'Ant Design Title 2', - }, - { - title: 'Ant Design Title 3', - }, - { - title: 'Ant Design Title 4', - }, -]; - -const App: React.FC = () => ( - - Default Size - Header
    } - footer={
    Footer
    } - bordered - dataSource={data} - renderItem={(item) => ( - - [ITEM] {item} - - )} - /> - Small Size - Header
    } - footer={
    Footer
    } - bordered - dataSource={data} - renderItem={(item) => {item}} - /> - Large Size - Header
    } - footer={
    Footer
    } - bordered - dataSource={data} - renderItem={(item) => {item}} - /> - Meta - ( - - - } - title={{item.title}} - description="Ant Design, a design language for background applications, is refined by Ant UED Team" - /> - - )} - /> - Vertical - ( - - - } - title={{item.title}} - description="Ant Design, a design language for background applications, is refined by Ant UED Team" - /> - - )} - /> - Empty Text - - -); - -export default App; diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md index cf10b43e32..24fed351a6 100644 --- a/components/list/index.en-US.md +++ b/components/list/index.en-US.md @@ -25,7 +25,6 @@ A list can be used to display content related to a single subject. The content c Responsive grid list Scrolling loaded virtual list -custom component token ## API diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md index 87c122481b..41b2d3ee20 100644 --- a/components/list/index.zh-CN.md +++ b/components/list/index.zh-CN.md @@ -26,7 +26,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA 响应式的栅格列表 滚动加载 滚动加载无限长列表 -自定义组件 token ## API diff --git a/components/list/style/index.ts b/components/list/style/index.ts index e04db94f3a..9a4b9e8160 100644 --- a/components/list/style/index.ts +++ b/components/list/style/index.ts @@ -1,26 +1,18 @@ import type { CSSObject } from '@ant-design/cssinjs'; -import type { CSSProperties } from 'react'; import { resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { contentWidth: number; - itemPaddingLG: string; - itemPaddingSM: string; - itemPadding: string; - headerBg: string; - footerBg: string; - emptyTextPadding: CSSProperties['padding']; - metaMarginBottom: CSSProperties['marginBottom']; - avatarMarginRight: CSSProperties['marginRight']; - titleMarginBottom: CSSProperties['marginBottom']; - descriptionFontSize: number; } interface ListToken extends FullToken<'List'> { listBorderedCls: string; minHeight: number; + listItemPaddingLG: string; + listItemPaddingSM: string; + listItemPadding: string; } const genBorderedStyle = (token: ListToken): CSSObject => { @@ -29,8 +21,8 @@ const genBorderedStyle = (token: ListToken): CSSObject => { componentCls, paddingLG, margin, - itemPaddingSM, - itemPaddingLG, + padding, + listItemPaddingSM, marginLG, borderRadiusLG, } = token; @@ -48,13 +40,13 @@ const genBorderedStyle = (token: ListToken): CSSObject => { }, [`${listBorderedCls}${componentCls}-sm`]: { [`${componentCls}-item,${componentCls}-header,${componentCls}-footer`]: { - padding: itemPaddingSM, + padding: listItemPaddingSM, }, }, [`${listBorderedCls}${componentCls}-lg`]: { [`${componentCls}-item,${componentCls}-header,${componentCls}-footer`]: { - padding: itemPaddingLG, + padding: `${padding}px ${paddingLG}px`, }, }, }; @@ -118,23 +110,16 @@ const genBaseStyle: GenerateStyle = (token) => { paddingSM, marginLG, padding, - itemPadding, + listItemPadding, colorPrimary, - itemPaddingSM, - itemPaddingLG, + listItemPaddingSM, + listItemPaddingLG, paddingXS, margin, colorText, colorTextDescription, motionDurationSlow, lineWidth, - headerBg, - footerBg, - emptyTextPadding, - metaMarginBottom, - avatarMarginRight, - titleMarginBottom, - descriptionFontSize, } = token; const alignCls: any = {}; @@ -151,13 +136,8 @@ const genBaseStyle: GenerateStyle = (token) => { '*': { outline: 'none', }, - [`${componentCls}-header`]: { - background: headerBg, - }, - [`${componentCls}-footer`]: { - background: footerBg, - }, [`${componentCls}-header, ${componentCls}-footer`]: { + background: 'transparent', paddingBlock: paddingSM, }, @@ -187,7 +167,7 @@ const genBaseStyle: GenerateStyle = (token) => { display: 'flex', alignItems: 'center', justifyContent: 'space-between', - padding: itemPadding, + padding: listItemPadding, color: colorText, [`${componentCls}-item-meta`]: { @@ -197,7 +177,7 @@ const genBaseStyle: GenerateStyle = (token) => { maxWidth: '100%', [`${componentCls}-item-meta-avatar`]: { - marginInlineEnd: avatarMarginRight, + marginInlineEnd: padding, }, [`${componentCls}-item-meta-content`]: { @@ -224,7 +204,7 @@ const genBaseStyle: GenerateStyle = (token) => { [`${componentCls}-item-meta-description`]: { color: colorTextDescription, - fontSize: descriptionFontSize, + fontSize: token.fontSize, lineHeight: token.lineHeight, }, }, @@ -270,7 +250,7 @@ const genBaseStyle: GenerateStyle = (token) => { }, [`${componentCls}-empty-text`]: { - padding: emptyTextPadding, + padding, color: token.colorTextDisabled, fontSize: token.fontSize, textAlign: 'center', @@ -301,11 +281,11 @@ const genBaseStyle: GenerateStyle = (token) => { }, [`${componentCls}-item-meta`]: { - marginBlockEnd: metaMarginBottom, + marginBlockEnd: padding, [`${componentCls}-item-meta-title`]: { marginBlockStart: 0, - marginBlockEnd: titleMarginBottom, + marginBlockEnd: paddingSM, color: colorText, fontSize: token.fontSizeLG, lineHeight: token.lineHeightLG, @@ -348,10 +328,10 @@ const genBaseStyle: GenerateStyle = (token) => { borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`, }, [`${componentCls}-lg ${componentCls}-item`]: { - padding: itemPaddingLG, + padding: listItemPaddingLG, }, [`${componentCls}-sm ${componentCls}-item`]: { - padding: itemPaddingSM, + padding: listItemPaddingSM, }, // Horizontal [`${componentCls}:not(${componentCls}-vertical)`]: { @@ -371,21 +351,14 @@ export default genComponentStyleHook( const listToken = mergeToken(token, { listBorderedCls: `${token.componentCls}-bordered`, minHeight: token.controlHeightLG, + listItemPadding: `${token.paddingContentVertical}px 0`, + listItemPaddingSM: `${token.paddingContentVerticalSM}px ${token.paddingContentHorizontal}px`, + listItemPaddingLG: `${token.paddingContentVerticalLG}px ${token.paddingContentHorizontalLG}px`, }); return [genBaseStyle(listToken), genBorderedStyle(listToken), genResponsiveStyle(listToken)]; }, - (token) => ({ + { contentWidth: 220, - itemPadding: `${token.paddingContentVertical}px 0`, - itemPaddingSM: `${token.paddingContentVerticalSM}px ${token.paddingContentHorizontal}px`, - itemPaddingLG: `${token.paddingContentVerticalLG}px ${token.paddingContentHorizontalLG}px`, - headerBg: 'transparent', - footerBg: 'transparent', - emptyTextPadding: token.padding, - metaMarginBottom: token.padding, - avatarMarginRight: token.padding, - titleMarginBottom: token.paddingSM, - descriptionFontSize: token.fontSize, - }), + }, ); diff --git a/components/locale/__tests__/__snapshots__/index.test.tsx.snap b/components/locale/__tests__/__snapshots__/index.test.tsx.snap index 6a9d3e5892..3043367cce 100644 --- a/components/locale/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/locale/__tests__/__snapshots__/index.test.tsx.snap @@ -2001,7 +2001,7 @@ exports[`Locale Provider should display the text as ar 1`] = ` >
    @@ -7111,7 +7114,7 @@ exports[`Locale Provider should display the text as az 1`] = ` >
    @@ -12221,7 +12227,7 @@ exports[`Locale Provider should display the text as bg 1`] = ` >
    @@ -17331,7 +17340,7 @@ exports[`Locale Provider should display the text as bn-bd 1`] = ` >
    @@ -22441,7 +22453,7 @@ exports[`Locale Provider should display the text as by 1`] = ` >
    @@ -27551,7 +27566,7 @@ exports[`Locale Provider should display the text as ca 1`] = ` >
    @@ -32661,7 +32679,7 @@ exports[`Locale Provider should display the text as cs 1`] = ` >
    @@ -37771,7 +37792,7 @@ exports[`Locale Provider should display the text as da 1`] = ` >
    @@ -42881,7 +42905,7 @@ exports[`Locale Provider should display the text as de 1`] = ` >
    @@ -47991,7 +48018,7 @@ exports[`Locale Provider should display the text as el 1`] = ` >
    @@ -53101,7 +53131,7 @@ exports[`Locale Provider should display the text as en 1`] = ` >
    @@ -58211,7 +58244,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = ` >
    @@ -63321,7 +63357,7 @@ exports[`Locale Provider should display the text as es 1`] = ` >
    @@ -68431,7 +68470,7 @@ exports[`Locale Provider should display the text as et 1`] = ` >
    @@ -73541,7 +73583,7 @@ exports[`Locale Provider should display the text as eu 1`] = ` >
    @@ -78651,7 +78696,7 @@ exports[`Locale Provider should display the text as fa 1`] = ` >
    @@ -83761,7 +83809,7 @@ exports[`Locale Provider should display the text as fi 1`] = ` >
    @@ -88871,7 +88922,7 @@ exports[`Locale Provider should display the text as fr 1`] = ` >
    @@ -93981,7 +94035,7 @@ exports[`Locale Provider should display the text as fr 2`] = ` >
    @@ -99091,7 +99148,7 @@ exports[`Locale Provider should display the text as fr 3`] = ` >
    @@ -104201,7 +104261,7 @@ exports[`Locale Provider should display the text as ga 1`] = ` >
    @@ -109311,7 +109374,7 @@ exports[`Locale Provider should display the text as gl 1`] = ` >
    @@ -114421,7 +114487,7 @@ exports[`Locale Provider should display the text as he 1`] = ` >
    @@ -119531,7 +119600,7 @@ exports[`Locale Provider should display the text as hi 1`] = ` >
    @@ -124641,7 +124713,7 @@ exports[`Locale Provider should display the text as hr 1`] = ` >
    @@ -129751,7 +129826,7 @@ exports[`Locale Provider should display the text as hu 1`] = ` >
    @@ -134861,7 +134939,7 @@ exports[`Locale Provider should display the text as hy-am 1`] = ` >
    @@ -139971,7 +140052,7 @@ exports[`Locale Provider should display the text as id 1`] = ` >
    @@ -145081,7 +145165,7 @@ exports[`Locale Provider should display the text as is 1`] = ` >
    @@ -150191,7 +150278,7 @@ exports[`Locale Provider should display the text as it 1`] = ` >
    @@ -155301,7 +155391,7 @@ exports[`Locale Provider should display the text as ja 1`] = ` >
    @@ -160411,7 +160504,7 @@ exports[`Locale Provider should display the text as ka 1`] = ` >
    @@ -165521,7 +165617,7 @@ exports[`Locale Provider should display the text as kk 1`] = ` >
    @@ -170631,7 +170730,7 @@ exports[`Locale Provider should display the text as km 1`] = ` >
    @@ -175739,7 +175841,7 @@ exports[`Locale Provider should display the text as kn 1`] = ` >
    @@ -180849,7 +180954,7 @@ exports[`Locale Provider should display the text as ko 1`] = ` >
    @@ -185959,7 +186067,7 @@ exports[`Locale Provider should display the text as ku 1`] = ` >
    @@ -191069,7 +191180,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = ` >
    @@ -196178,8 +196292,8 @@ exports[`Locale Provider should display the text as lt 1`] = ` class="ant-pagination-options" >