diff --git a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap index 7b0695c856..401a0e7c93 100644 --- a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -167,6 +167,660 @@ 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 +
    +
    +
    +
    • +
+
+
+
, + , +
+
+
+
    +
  • +
    +
    + + + +
    +
    +

    + + 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`] = `
( + + 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 24fed351a6..cf10b43e32 100644 --- a/components/list/index.en-US.md +++ b/components/list/index.en-US.md @@ -25,6 +25,7 @@ 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 41b2d3ee20..87c122481b 100644 --- a/components/list/index.zh-CN.md +++ b/components/list/index.zh-CN.md @@ -26,6 +26,7 @@ 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 9a4b9e8160..e04db94f3a 100644 --- a/components/list/style/index.ts +++ b/components/list/style/index.ts @@ -1,18 +1,26 @@ 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 => { @@ -21,8 +29,8 @@ const genBorderedStyle = (token: ListToken): CSSObject => { componentCls, paddingLG, margin, - padding, - listItemPaddingSM, + itemPaddingSM, + itemPaddingLG, marginLG, borderRadiusLG, } = token; @@ -40,13 +48,13 @@ const genBorderedStyle = (token: ListToken): CSSObject => { }, [`${listBorderedCls}${componentCls}-sm`]: { [`${componentCls}-item,${componentCls}-header,${componentCls}-footer`]: { - padding: listItemPaddingSM, + padding: itemPaddingSM, }, }, [`${listBorderedCls}${componentCls}-lg`]: { [`${componentCls}-item,${componentCls}-header,${componentCls}-footer`]: { - padding: `${padding}px ${paddingLG}px`, + padding: itemPaddingLG, }, }, }; @@ -110,16 +118,23 @@ const genBaseStyle: GenerateStyle = (token) => { paddingSM, marginLG, padding, - listItemPadding, + itemPadding, colorPrimary, - listItemPaddingSM, - listItemPaddingLG, + itemPaddingSM, + itemPaddingLG, paddingXS, margin, colorText, colorTextDescription, motionDurationSlow, lineWidth, + headerBg, + footerBg, + emptyTextPadding, + metaMarginBottom, + avatarMarginRight, + titleMarginBottom, + descriptionFontSize, } = token; const alignCls: any = {}; @@ -136,8 +151,13 @@ const genBaseStyle: GenerateStyle = (token) => { '*': { outline: 'none', }, + [`${componentCls}-header`]: { + background: headerBg, + }, + [`${componentCls}-footer`]: { + background: footerBg, + }, [`${componentCls}-header, ${componentCls}-footer`]: { - background: 'transparent', paddingBlock: paddingSM, }, @@ -167,7 +187,7 @@ const genBaseStyle: GenerateStyle = (token) => { display: 'flex', alignItems: 'center', justifyContent: 'space-between', - padding: listItemPadding, + padding: itemPadding, color: colorText, [`${componentCls}-item-meta`]: { @@ -177,7 +197,7 @@ const genBaseStyle: GenerateStyle = (token) => { maxWidth: '100%', [`${componentCls}-item-meta-avatar`]: { - marginInlineEnd: padding, + marginInlineEnd: avatarMarginRight, }, [`${componentCls}-item-meta-content`]: { @@ -204,7 +224,7 @@ const genBaseStyle: GenerateStyle = (token) => { [`${componentCls}-item-meta-description`]: { color: colorTextDescription, - fontSize: token.fontSize, + fontSize: descriptionFontSize, lineHeight: token.lineHeight, }, }, @@ -250,7 +270,7 @@ const genBaseStyle: GenerateStyle = (token) => { }, [`${componentCls}-empty-text`]: { - padding, + padding: emptyTextPadding, color: token.colorTextDisabled, fontSize: token.fontSize, textAlign: 'center', @@ -281,11 +301,11 @@ const genBaseStyle: GenerateStyle = (token) => { }, [`${componentCls}-item-meta`]: { - marginBlockEnd: padding, + marginBlockEnd: metaMarginBottom, [`${componentCls}-item-meta-title`]: { marginBlockStart: 0, - marginBlockEnd: paddingSM, + marginBlockEnd: titleMarginBottom, color: colorText, fontSize: token.fontSizeLG, lineHeight: token.lineHeightLG, @@ -328,10 +348,10 @@ const genBaseStyle: GenerateStyle = (token) => { borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`, }, [`${componentCls}-lg ${componentCls}-item`]: { - padding: listItemPaddingLG, + padding: itemPaddingLG, }, [`${componentCls}-sm ${componentCls}-item`]: { - padding: listItemPaddingSM, + padding: itemPaddingSM, }, // Horizontal [`${componentCls}:not(${componentCls}-vertical)`]: { @@ -351,14 +371,21 @@ 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/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index b2090fa1a9..12d21d3683 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -141,7 +141,22 @@ This document contains the correspondence between all the less variables related - +### List + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@list-header-background` | `headerBg` | - | +| `@list-footer-background` | `footerBg` | - | +| `@list-empty-text-padding` | `emptyTextPadding` | - | +| `@list-item-padding` | `itemPadding` | - | +| `@list-item-padding-sm` | `itemPaddingSM` | - | +| `@list-item-padding-lg` | `itemPaddingLG` | - | +| `@list-item-meta-margin-bottom` | `metaMarginBottom` | - | +| `@list-item-meta-avatar-margin-right` | `avatarMarginRight` | - | +| `@list-item-meta-title-margin-bottom` | `titleMarginBottom` | - | +| `@list-customize-card-bg` | - | Deprecated for style change | +| `@list-item-meta-description-font-size` | `descriptionFontSize` | - | diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 7eab769a45..6d5b1ff52a 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -139,7 +139,22 @@ title: Less 变量迁移 Design Token - +### List 列表 + + +| less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@list-header-background` | `headerBg` | - | +| `@list-footer-background` | `footerBg` | - | +| `@list-empty-text-padding` | `emptyTextPadding` | - | +| `@list-item-padding` | `itemPadding` | - | +| `@list-item-padding-sm` | `itemPaddingSM` | - | +| `@list-item-padding-lg` | `itemPaddingLG` | - | +| `@list-item-meta-margin-bottom` | `metaMarginBottom` | - | +| `@list-item-meta-avatar-margin-right` | `avatarMarginRight` | - | +| `@list-item-meta-title-margin-bottom` | `titleMarginBottom` | - | +| `@list-customize-card-bg` | - | 由于样式变化已废弃 | +| `@list-item-meta-description-font-size` | `descriptionFontSize` | - |