mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-22 08:53:29 +08:00
Code Issues Actions 33 Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
thinkasany 2025-01-10 16:33:42 +08:00
parent 0f9eca94ae
commit d0cf3aaa43
10 changed files with 33 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/card/Meta.tsx
View File

@ -4,7 +4,7 @@ import classNames from 'classnames';
import type { ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
export type SemanticName = 'root' | 'detail' | 'avatar' | 'title' | 'description';
export type SemanticName = 'root' | 'section' | 'avatar' | 'title' | 'description';
export interface CardMetaProps {
prefixCls?: string;
style?: React.CSSProperties;
@ -82,15 +82,15 @@ const Meta: React.FC<CardMetaProps> = (props) => {
...styles?.description,
};
const detailClassNames = classNames(
`${metaPrefixCls}-detail`,
cardMeta?.classNames?.detail,
cardMetaClassNames?.detail,
const sectionClassNames = classNames(
`${metaPrefixCls}-section`,
cardMeta?.classNames?.section,
cardMetaClassNames?.section,
);
const detailStyles = {
...cardMeta?.styles?.detail,
...styles?.detail,
const sectionStyles = {
...cardMeta?.styles?.section,
...styles?.section,
};
const avatarDom: React.ReactNode = avatar ? (
@ -113,7 +113,7 @@ const Meta: React.FC<CardMetaProps> = (props) => {
const MetaDetail: React.ReactNode =
titleDom || descriptionDom ? (
<div className={detailClassNames} style={detailStyles}>
<div className={sectionClassNames} style={sectionStyles}>
{titleDom}
{descriptionDom}
</div>

4
components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -435,7 +435,7 @@ exports[`renders components/card/demo/flexible-content.tsx extend context correc
class="ant-card-meta"
>
<div
class="ant-card-meta-detail"
class="ant-card-meta-section"
>
<div
class="ant-card-meta-title"
@ -975,7 +975,7 @@ exports[`renders components/card/demo/meta.tsx extend context correctly 1`] = `
</span>
</div>
<div
class="ant-card-meta-detail"
class="ant-card-meta-section"
>
<div
class="ant-card-meta-title"

4
components/card/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -406,7 +406,7 @@ exports[`renders components/card/demo/flexible-content.tsx correctly 1`] = `
class="ant-card-meta"
>
<div
class="ant-card-meta-detail"
class="ant-card-meta-section"
>
<div
class="ant-card-meta-title"
@ -936,7 +936,7 @@ exports[`renders components/card/demo/meta.tsx correctly 1`] = `
</span>
</div>
<div
class="ant-card-meta-detail"
class="ant-card-meta-section"
>
<div
class="ant-card-meta-title"

59
components/card/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -300,65 +300,6 @@ exports[`Card should still have padding when card which set padding to 0 is load
</div>
`;
exports[`Card should support custom className 1`] = `
<div>
<div
class="ant-card ant-card-bordered"
>
<div
class="ant-card-head custom-head"
>
<div
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-title"
>
Card title
</div>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
</div>
</div>
</div>
`;
exports[`Card should support custom styles 1`] = `
<div>
<div
class="ant-card ant-card-bordered"
>
<div
class="ant-card-head"
style="color: red;"
>
<div
class="ant-card-head-wrapper"
>
<div
class="ant-card-head-title"
>
Card title
</div>
</div>
</div>
<div
class="ant-card-body"
>
<p>
Card content
</p>
</div>
</div>
</div>
`;
exports[`Card title should be vertically aligned 1`] = `
<div
class="ant-card ant-card-bordered"

14
components/card/__tests__/index.test.tsx
View File

@ -211,7 +211,7 @@ describe('Card', () => {
);
const rootElement = container.querySelector('.ant-card') as HTMLElement;
const headerElement = container.querySelector('.ant-card-head') as HTMLElement;
const bodyElement = container.querySelector('.custom-body') as HTMLElement;
const bodyElement = container.querySelector('.ant-card-body') as HTMLElement;
const extraElement = container.querySelector('.ant-card-extra') as HTMLElement;
const titleElement = container.querySelector('.ant-card-head-title') as HTMLElement;
const actionsElement = container.querySelector('.ant-card-actions') as HTMLElement;
@ -239,7 +239,7 @@ describe('Card', () => {
const { Meta } = Card;
const customClassNames = {
root: 'custom-root',
detail: 'custom-detail',
section: 'custom-section',
avatar: 'custom-avatar',
title: 'custom-title',
description: 'custom-description',
@ -247,7 +247,7 @@ describe('Card', () => {
const customStyles = {
root: { backgroundColor: 'red' },
detail: { backgroundColor: 'black' },
section: { backgroundColor: 'black' },
avatar: { backgroundColor: 'gray' },
description: { backgroundColor: 'yellow' },
};
@ -270,19 +270,19 @@ describe('Card', () => {
</Card>,
);
const rootElement = container.querySelector('.ant-card-meta') as HTMLElement;
const detailElement = container.querySelector('.ant-card-meta-detail') as HTMLElement;
const avatarElement = container.querySelector('.custom-avatar') as HTMLElement;
const sectionElement = container.querySelector('.ant-card-meta-section') as HTMLElement;
const avatarElement = container.querySelector('.ant-card-meta-avatar') as HTMLElement;
const titleElement = container.querySelector('.ant-card-meta-title') as HTMLElement;
const descriptionElement = container.querySelector('.ant-card-meta-description') as HTMLElement;
expect(rootElement.classList).toContain('custom-root');
expect(detailElement.classList).toContain('custom-detail');
expect(sectionElement.classList).toContain('custom-section');
expect(avatarElement.classList).toContain('custom-avatar');
expect(titleElement.classList).toContain('custom-title');
expect(descriptionElement.classList).toContain('custom-description');
expect(rootElement.style.backgroundColor).toBe('red');
expect(detailElement.style.backgroundColor).toBe('black');
expect(sectionElement.style.backgroundColor).toBe('black');
expect(avatarElement.style.backgroundColor).toBe('gray');
expect(descriptionElement.style.backgroundColor).toBe('yellow');
});

4
components/card/demo/_semantic.tsx
View File

@ -32,7 +32,7 @@ const BlockCard: React.FC<React.PropsWithChildren> = (props) => {
const divRef = React.useRef<HTMLDivElement>(null);
return (
<div ref={divRef} style={{ position: 'absolute', inset: 0 }}>
<div ref={divRef} style={{ position: 'absolute' }}>
<Card
{...props}
title="Card title"
@ -59,7 +59,7 @@ const App: React.FC = () => {
return (
<SemanticPreview
semantics={[
{ name: 'root', desc: locale.root, version: '5.23.0' },
{ name: 'root', desc: locale.root, version: '6.0.0' },
{ name: 'header', desc: locale.header, version: '5.14.0' },
{ name: 'title', desc: locale.title, version: '5.14.0' },
{ name: 'extra', desc: locale.extra, version: '5.14.0' },

16
components/card/demo/_semantic_meta.tsx
View File

@ -9,14 +9,14 @@ const { Meta } = Card;
const locales = {
cn: {
root: '设置元信息根元素',
detail: '设置元信息详情',
section: '设置元信息内容元素',
avatar: '设置元信息图标',
title: '设置元信息标题',
description: '设置元信息描述',
},
en: {
root: 'set `root` of Card.Meta',
detail: 'set `detail` of Card.Meta',
section: 'set `section` of Card.Meta',
avatar: 'set `avatar` of Card.Meta',
title: 'set `title` of Card.Meta',
description: 'set `description` of Card.Meta',
@ -27,7 +27,7 @@ const BlockCard: React.FC<React.PropsWithChildren> = (props) => {
const divRef = React.useRef<HTMLDivElement>(null);
return (
<div ref={divRef} style={{ position: 'absolute', inset: 0 }}>
<div ref={divRef} style={{ position: 'absolute' }}>
<Card style={{ width: 300 }}>
<Meta
{...props}
@ -45,11 +45,11 @@ const App: React.FC = () => {
return (
<SemanticPreview
semantics={[
{ name: 'root', desc: locale.root, version: '5.23.0' },
{ name: 'detail', desc: locale.detail, version: '5.23.0' },
{ name: 'avatar', desc: locale.avatar, version: '5.23.0' },
{ name: 'title', desc: locale.title, version: '5.23.0' },
{ name: 'description', desc: locale.description, version: '5.23.0' },
{ name: 'root', desc: locale.root, version: '6.0.0' },
{ name: 'section', desc: locale.section, version: '6.0.0' },
{ name: 'avatar', desc: locale.avatar, version: '6.0.0' },
{ name: 'title', desc: locale.title, version: '6.0.0' },
{ name: 'description', desc: locale.description, version: '6.0.0' },
]}
>
<BlockCard />

2
components/card/style/index.ts
View File

@ -251,7 +251,7 @@ const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({
paddingInlineEnd: token.padding,
},
'&-detail': {
'&-section': {
overflow: 'hidden',
flex: 1,

2
components/config-provider/index.en-US.md
View File

@ -115,7 +115,7 @@ const {
| breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: [ButtonProps\["classNames"\]](/components/button#api), styles?: [ButtonProps\["styles"\]](/components/button#api), autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
| card | Set Card common props | { className?: string, style?: React.CSSProperties, classNames?: [CardProps\["classNames"\]](/components/card#api), styles?: [CardProps\["styles"\]](/components/card#api) } | - | 5.7.0, `classNames` and `styles`: 5.14.0 |
| cardMeta | Set Card.Meta common props | { className?: string, style?: React.CSSProperties, classNames?: [CardMetaProps\["classNames"\]](/components/card#api), styles?: [CardMetaProps\["styles"\]](/components/card#api) } | - | 5.23.0 |
| cardMeta | Set Card.Meta common props | { className?: string, style?: React.CSSProperties, classNames?: [CardMetaProps\["classNames"\]](/components/card#api), styles?: [CardMetaProps\["styles"\]](/components/card#api) } | - | 6.0.0 |
| calendar | Set Calendar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| carousel | Set Carousel common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| cascader | Set Cascader common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

2
components/config-provider/index.zh-CN.md
View File

@ -118,7 +118,7 @@ const {
| button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [ButtonProps\["classNames"\]](/components/button-cn#api), styles?: [ButtonProps\["styles"\]](/components/button-cn#api), autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
| calendar | 设置 Calendar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [CardProps\["classNames"\]](/components/card-cn#api), styles?: [CardProps\["styles"\]](/components/card-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.14.0 |
| cardMeta | 设置 Card.Meta 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [CardMetaProps\["classNames"\]](/components/card-cn#api), styles?: [CardMetaProps\["styles"\]](/components/card-cn#api) } | - | 5.23.0 |
| cardMeta | 设置 Card.Meta 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [CardMetaProps\["classNames"\]](/components/card-cn#api), styles?: [CardMetaProps\["styles"\]](/components/card-cn#api) } | - | 6.0.0 |
| carousel | 设置 Carousel 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |