From 6a6f1b741f9a0b62f7dcaea36110043969e9dfd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2?= Date: Mon, 14 Aug 2023 17:18:42 +0800 Subject: [PATCH] feat(badge): migrate less to token (#42778) * chore: update * docs: add component token demo * test: update snapshot * chore: update * test: update snapshot * feat: token * chore: update snapshot * chore: code clean * chore: code clean * chore: code clean * chore: code clean * chore: update * chore: fix lint * fix: fontsizesm --------- Co-authored-by: MadCcc <1075746765@qq.com> --- .../__snapshots__/demo-extend.test.ts.snap | 141 ++++++++++++++ .../__snapshots__/demo.test.tsx.snap | 139 ++++++++++++++ components/badge/demo/component-token.md | 7 + components/badge/demo/component-token.tsx | 32 ++++ components/badge/index.en-US.md | 1 + components/badge/index.zh-CN.md | 1 + components/badge/style/index.ts | 179 +++++++++++------- components/theme/interface/components.ts | 3 +- docs/react/migrate-less-variables.en-US.md | 18 +- docs/react/migrate-less-variables.zh-CN.md | 18 +- 10 files changed, 466 insertions(+), 73 deletions(-) create mode 100644 components/badge/demo/component-token.md create mode 100644 components/badge/demo/component-token.tsx diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap index 4d00eec5cdd2..fc77b1a71531 100644 --- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1390,6 +1390,147 @@ Array [ exports[`renders components/badge/demo/colorful-with-count-debug.tsx extend context correctly 2`] = `[]`; +exports[`renders components/badge/demo/component-token.tsx extend context correctly 1`] = ` +
+
+ + + + + + + + 5 + + + + +
+
+ + + + + 2 + + + + + 6 + + + + +
+
+ + + + + + +
+
+ + + + Success + + +
+
+ + + 0 + + +
+
+`; + +exports[`renders components/badge/demo/component-token.tsx extend context correctly 2`] = `[]`; + exports[`renders components/badge/demo/dot.tsx extend context correctly 1`] = `
+
+ + + + + + + + 5 + + + + +
+
+ + + + + 2 + + + + + 6 + + + + +
+
+ + + + + + +
+
+ + + + Success + + +
+
+ + + 0 + + +
+
+`; + exports[`renders components/badge/demo/dot.tsx correctly 1`] = `
( + + + + + + + + + + + + + +); diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md index 253195ffb89b..13e5e401bbc2 100644 --- a/components/badge/index.en-US.md +++ b/components/badge/index.en-US.md @@ -32,6 +32,7 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca Mixed usage Title Colorful Badge support count Debug +Component Token ## API diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index 83640d7aa28a..bd1866bf75f3 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -33,6 +33,7 @@ group: 数据展示 各种混用的情况 自定义标题 多彩徽标支持 count 显示 Debug +组件 Token ## API diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts index 44b0cbdf18c2..9ed0afaef9d3 100644 --- a/components/badge/style/index.ts +++ b/components/badge/style/index.ts @@ -4,19 +4,56 @@ import { resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal'; +/** Component only token. Which will handle additional calculation of alias token */ +export interface ComponentToken { + // Component token here + /** + * @desc 徽标 z-index + * @descEN z-index of badge + */ + indicatorZIndex: number | string; + /** + * @desc 徽标高度 + * @descEN Height of badge + */ + indicatorHeight: number; + /** + * @desc 小号徽标高度 + * @descEN Height of small badge + */ + indicatorHeightSM: number; + /** + * @desc 点状徽标尺寸 + * @descEN Size of dot badge + */ + dotSize: number; + /** + * @desc 徽标文本尺寸 + * @descEN Font size of badge text + */ + textFontSize: number; + /** + * @desc 小号徽标文本尺寸 + * @descEN Font size of small badge text + */ + textFontSizeSM: number; + /** + * @desc 徽标文本粗细 + * @descEN Font weight of badge text + */ + textFontWeight: number | string; + /** + * @desc 状态徽标尺寸 + * @descEN Size of status badge + */ + statusSize: number; +} + interface BadgeToken extends FullToken<'Badge'> { badgeFontHeight: number; - badgeZIndex: number | string; - badgeHeight: number; - badgeHeightSm: number; badgeTextColor: string; - badgeFontWeight: string; - badgeFontSize: number; badgeColor: string; badgeColorHover: string; - badgeDotSize: number; - badgeFontSizeSm: number; - badgeStatusSize: number; badgeShadowSize: number; badgeShadowColor: string; badgeProcessingDuration: string; @@ -63,9 +100,14 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO antCls, badgeFontHeight, badgeShadowSize, - badgeHeightSm, motionDurationSlow, - badgeStatusSize, + textFontSize, + textFontSizeSM, + statusSize, + dotSize, + textFontWeight, + indicatorHeight, + indicatorHeightSM, marginXS, badgeRibbonOffset, } = token; @@ -98,17 +140,17 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO lineHeight: 1, [`${componentCls}-count`]: { - zIndex: token.badgeZIndex, - minWidth: token.badgeHeight, - height: token.badgeHeight, + zIndex: token.indicatorZIndex, + minWidth: indicatorHeight, + height: indicatorHeight, color: token.badgeTextColor, - fontWeight: token.badgeFontWeight, - fontSize: token.badgeFontSize, - lineHeight: `${token.badgeHeight}px`, + fontWeight: textFontWeight, + fontSize: textFontSize, + lineHeight: `${indicatorHeight}px`, whiteSpace: 'nowrap', textAlign: 'center', background: token.badgeColor, - borderRadius: token.badgeHeight / 2, + borderRadius: indicatorHeight / 2, boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`, transition: `background ${token.motionDurationMid}`, @@ -124,11 +166,11 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO }, }, [`${componentCls}-count-sm`]: { - minWidth: badgeHeightSm, - height: badgeHeightSm, - fontSize: token.badgeFontSizeSm, - lineHeight: `${badgeHeightSm}px`, - borderRadius: badgeHeightSm / 2, + minWidth: indicatorHeightSM, + height: indicatorHeightSM, + fontSize: textFontSizeSM, + lineHeight: `${indicatorHeightSM}px`, + borderRadius: indicatorHeightSM / 2, }, [`${componentCls}-multiple-words`]: { @@ -136,10 +178,10 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO }, [`${componentCls}-dot`]: { - zIndex: token.badgeZIndex, - width: token.badgeDotSize, - minWidth: token.badgeDotSize, - height: token.badgeDotSize, + zIndex: token.indicatorZIndex, + width: dotSize, + minWidth: dotSize, + height: dotSize, background: token.badgeColor, borderRadius: '100%', boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`, @@ -168,8 +210,8 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO position: 'relative', top: -1, // Magic number, but seems better experience display: 'inline-block', - width: badgeStatusSize, - height: badgeStatusSize, + width: statusSize, + height: statusSize, verticalAlign: 'middle', borderRadius: '50%', }, @@ -259,12 +301,12 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO [`${numberPrefixCls}-only`]: { position: 'relative', display: 'inline-block', - height: token.badgeHeight, + height: indicatorHeight, transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack}`, WebkitTransformStyle: 'preserve-3d', WebkitBackfaceVisibility: 'hidden', [`> p${numberPrefixCls}-only-unit`]: { - height: token.badgeHeight, + height: indicatorHeight, margin: 0, WebkitTransformStyle: 'preserve-3d', WebkitBackfaceVisibility: 'hidden', @@ -334,45 +376,46 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO }; // ============================== Export ============================== -export default genComponentStyleHook('Badge', (token) => { - const { fontSize, lineHeight, fontSizeSM, lineWidth, marginXS, colorBorderBg } = token; +export default genComponentStyleHook( + 'Badge', + (token) => { + const { fontSize, lineHeight, lineWidth, marginXS, colorBorderBg } = token; - const badgeFontHeight = Math.round(fontSize * lineHeight); - const badgeShadowSize = lineWidth; - const badgeZIndex = 'auto'; - const badgeHeight = badgeFontHeight - 2 * badgeShadowSize; - const badgeTextColor = token.colorBgContainer; - const badgeFontWeight = 'normal'; - const badgeFontSize = fontSizeSM; - const badgeColor = token.colorError; - const badgeColorHover = token.colorErrorHover; - const badgeHeightSm = fontSize; - const badgeDotSize = fontSizeSM / 2; - const badgeFontSizeSm = fontSizeSM; - const badgeStatusSize = fontSizeSM / 2; + const badgeFontHeight = Math.round(fontSize * lineHeight); + const badgeShadowSize = lineWidth; + const badgeTextColor = token.colorBgContainer; + const badgeColor = token.colorError; + const badgeColorHover = token.colorErrorHover; - const badgeToken = mergeToken(token, { - badgeFontHeight, - badgeShadowSize, - badgeZIndex, - badgeHeight, - badgeTextColor, - badgeFontWeight, - badgeFontSize, - badgeColor, - badgeColorHover, - badgeShadowColor: colorBorderBg, - badgeHeightSm, - badgeDotSize, - badgeFontSizeSm, - badgeStatusSize, - badgeProcessingDuration: '1.2s', - badgeRibbonOffset: marginXS, + const badgeToken = mergeToken(token, { + badgeFontHeight, + badgeShadowSize, + badgeTextColor, + badgeColor, + badgeColorHover, + badgeShadowColor: colorBorderBg, + badgeProcessingDuration: '1.2s', + badgeRibbonOffset: marginXS, - // Follow token just by Design. Not related with token - badgeRibbonCornerTransform: 'scaleY(0.75)', - badgeRibbonCornerFilter: `brightness(75%)`, - }); + // Follow token just by Design. Not related with token + badgeRibbonCornerTransform: 'scaleY(0.75)', + badgeRibbonCornerFilter: `brightness(75%)`, + }); - return [genSharedBadgeStyle(badgeToken)]; -}); + return [genSharedBadgeStyle(badgeToken)]; + }, + (token) => { + const { fontSize, lineHeight, fontSizeSM, lineWidth } = token; + + return { + indicatorZIndex: 'auto', + indicatorHeight: Math.round(fontSize * lineHeight) - 2 * lineWidth, + indicatorHeightSM: fontSize, + dotSize: fontSizeSM / 2, + textFontSize: fontSizeSM, + textFontSizeSM: fontSizeSM, + textFontWeight: 'normal', + statusSize: fontSizeSM / 2, + }; + }, +); diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 8ae0623864f0..94904fc3ddef 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -4,6 +4,7 @@ import type { ComponentToken as AnchorComponentToken } from '../../anchor/style' import type { ComponentToken as AppComponentToken } from '../../app/style'; import type { ComponentToken as AvatarComponentToken } from '../../avatar/style'; import type { ComponentToken as BackTopComponentToken } from '../../back-top/style'; +import type { ComponentToken as BadgeComponentToken } from '../../badge/style'; import type { ComponentToken as BreadcrumbComponentToken } from '../../breadcrumb/style'; import type { ComponentToken as ButtonComponentToken } from '../../button/style'; import type { ComponentToken as CalendarComponentToken } from '../../calendar/style'; @@ -61,7 +62,7 @@ export interface ComponentTokenMap { Anchor?: AnchorComponentToken; Avatar?: AvatarComponentToken; BackTop?: BackTopComponentToken; - Badge?: {}; + Badge?: BadgeComponentToken; Button?: ButtonComponentToken; Breadcrumb?: BreadcrumbComponentToken; Card?: CardComponentToken; diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 22c1901e0516..2abe7ca35c67 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -14,8 +14,8 @@ This document contains the correspondence between all the less variables related We could configure global token and component token for each component through the `theme` property of ConfigProvider. ```tsx -import React from 'react'; import { Checkbox, ConfigProvider, Radio } from 'antd'; +import React from 'react'; const App: React.FC = () => ( +### Badge + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@zindex-badge` | `indicatorZIndex` | - | +| `@badge-height` | `indicatorHeight` | - | +| `@badge-height-sm` | `indicatorHeightSM` | - | +| `@badge-dot-size` | `dotSize` | - | +| `@badge-font-size` | `textFontSize` | - | +| `@badge-font-size-sm` | `textFontSizeSM` | - | +| `@badge-font-weight` | `textFontWeight` | - | +| `@badge-status-size` | `statusSize` | - | +| `@badge-text-color` | `colorBgContainer` | Global Token | +| `@badge-color` | `colorError` | Global Token | ### BreadCrumb diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 2d16cdea7bb9..79f41d62240c 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -14,8 +14,8 @@ title: 从 Less 变量到 Design Token 通过 ConfigProvider 的 `theme` 属性，我们可以对每一个组件单独配置全局 Token 和组件 Token ```tsx -import React from 'react'; import { Checkbox, ConfigProvider, Radio } from 'antd'; +import React from 'react'; const App: React.FC = () => ( +### Badge 徽标数 + + +| less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@zindex-badge` | `indicatorZIndex` | - | +| `@badge-height` | `indicatorHeight` | - | +| `@badge-height-sm` | `indicatorHeightSM` | - | +| `@badge-dot-size` | `dotSize` | - | +| `@badge-font-size` | `textFontSize` | - | +| `@badge-font-size-sm` | `textFontSizeSM` | - | +| `@badge-font-weight` | `textFontWeight` | - | +| `@badge-status-size` | `statusSize` | - | +| `@badge-text-color` | `colorBgContainer` | 全局 Token | +| `@badge-color` | `colorError` | 全局 Token | ### BreadCrumb 面包屑