From 846742852875c8f3354dc0b12f0c22f5e21aabb9 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Sun, 5 Mar 2023 20:49:26 +0800 Subject: [PATCH 01/18] refactor: rename preset colors in token (#41071) * refactor: rename preset colors in Design Token * feat: rename preset color in token --- .dumi/theme/common/styles/Demo.tsx | 6 +++--- .dumi/theme/common/styles/Markdown.tsx | 2 +- .dumi/theme/slots/Content/index.tsx | 4 ++-- components/popover/style/index.tsx | 2 +- components/rate/style/index.tsx | 2 +- components/style/presetColor.tsx | 8 ++++---- components/theme/interface/index.ts | 7 ++++++- components/theme/interface/maps/index.ts | 3 ++- components/theme/interface/presetColors.ts | 9 ++++++++- components/theme/themes/dark/index.ts | 11 +++++++++-- components/theme/themes/default/index.ts | 13 ++++++++++--- 11 files changed, 47 insertions(+), 20 deletions(-) diff --git a/.dumi/theme/common/styles/Demo.tsx b/.dumi/theme/common/styles/Demo.tsx index 6f1d9a32d1..1266a87094 100644 --- a/.dumi/theme/common/styles/Demo.tsx +++ b/.dumi/theme/common/styles/Demo.tsx @@ -290,7 +290,7 @@ const GlobalDemoStyles: React.FC = () => { transition: transform 0.24s; &${iconCls}-check { - color: ${token['green-6']} !important; + color: ${token.green6} !important; font-weight: bold; } } @@ -342,11 +342,11 @@ const GlobalDemoStyles: React.FC = () => { } &-debug { - border-color: ${token['purple-3']}; + border-color: ${token.purple3}; } &-debug &-title a { - color: ${token['purple-6']}; + color: ${token.purple6}; } } diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx index 13a2040cd6..3a3a5875e6 100644 --- a/.dumi/theme/common/styles/Markdown.tsx +++ b/.dumi/theme/common/styles/Markdown.tsx @@ -340,7 +340,7 @@ export default () => { &:nth-child(3) { width: 22%; - color: ${token['magenta-7']}; + color: ${token.magenta7}; font-size: ${Math.max(token.fontSize - 1, 12)}px; } diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx index d27dc2ae4c..27ed8186d2 100644 --- a/.dumi/theme/slots/Content/index.tsx +++ b/.dumi/theme/slots/Content/index.tsx @@ -57,10 +57,10 @@ const useStyle = () => { box-sizing: border-box; .toc-debug { - color: ${token['purple-6']}; + color: ${token.purple6}; &:hover { - color: ${token['purple-5']}; + color: ${token.purple5}; } } diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx index 698ffccc8b..a86d49b180 100644 --- a/components/popover/style/index.tsx +++ b/components/popover/style/index.tsx @@ -109,7 +109,7 @@ const genColorStyle: GenerateStyle = (token) => { return { [componentCls]: PresetColors.map((colorKey: keyof PresetColorType) => { - const lightColor = token[`${colorKey}-6`]; + const lightColor = token[`${colorKey}6`]; return { [`&${componentCls}-${colorKey}`]: { '--antd-arrow-background-color': lightColor, diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx index f899fda770..507f6cc050 100644 --- a/components/rate/style/index.tsx +++ b/components/rate/style/index.tsx @@ -126,7 +126,7 @@ export default genComponentStyleHook('Rate', (token) => { const { colorFillContent } = token; const rateToken = mergeToken(token, { - rateStarColor: token['yellow-6'], + rateStarColor: token.yellow6, rateStarSize: token.controlHeightLG * 0.5, rateStarHoverScale: 'scale(1.1)', defaultColor: colorFillContent, diff --git a/components/style/presetColor.tsx b/components/style/presetColor.tsx index 0704bd4f8e..67b1beacd8 100644 --- a/components/style/presetColor.tsx +++ b/components/style/presetColor.tsx @@ -22,10 +22,10 @@ export function genPresetColor>( genCss: GenCSS, ): CSSObject { return PresetColors.reduce((prev: CSSObject, colorKey: PresetColorKey) => { - const lightColor = token[`${colorKey}-1`]; - const lightBorderColor = token[`${colorKey}-3`]; - const darkColor = token[`${colorKey}-6`]; - const textColor = token[`${colorKey}-7`]; + const lightColor = token[`${colorKey}1`]; + const lightBorderColor = token[`${colorKey}3`]; + const darkColor = token[`${colorKey}6`]; + const textColor = token[`${colorKey}7`]; return { ...prev, diff --git a/components/theme/interface/index.ts b/components/theme/interface/index.ts index a63b53ca28..f010302503 100644 --- a/components/theme/interface/index.ts +++ b/components/theme/interface/index.ts @@ -9,7 +9,12 @@ export type OverrideToken = { export type GlobalToken = AliasToken & ComponentTokenMap; export { PresetColors } from './presetColors'; -export type { PresetColorType, ColorPalettes, PresetColorKey } from './presetColors'; +export type { + PresetColorType, + ColorPalettes, + LegacyColorPalettes, + PresetColorKey, +} from './presetColors'; export type { SeedToken } from './seeds'; export type { MapToken, diff --git a/components/theme/interface/maps/index.ts b/components/theme/interface/maps/index.ts index 1b780d7cf1..a938ec46a7 100644 --- a/components/theme/interface/maps/index.ts +++ b/components/theme/interface/maps/index.ts @@ -1,4 +1,4 @@ -import type { ColorPalettes } from '../presetColors'; +import type { ColorPalettes, LegacyColorPalettes } from '../presetColors'; import type { SeedToken } from '../seeds'; import type { SizeMapToken, HeightMapToken } from './size'; import type { ColorMapToken } from './colors'; @@ -24,6 +24,7 @@ export interface CommonMapToken extends StyleMapToken { export interface MapToken extends SeedToken, + LegacyColorPalettes, ColorPalettes, ColorMapToken, SizeMapToken, diff --git a/components/theme/interface/presetColors.ts b/components/theme/interface/presetColors.ts index 2cff21512c..8439f0435d 100644 --- a/components/theme/interface/presetColors.ts +++ b/components/theme/interface/presetColors.ts @@ -20,6 +20,13 @@ export type PresetColorType = Record; type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; -export type ColorPalettes = { +export type LegacyColorPalettes = { + /** + * @deprecated + */ [key in `${keyof PresetColorType}-${ColorPaletteKeyIndex}`]: string; }; + +export type ColorPalettes = { + [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}`]: string; +}; diff --git a/components/theme/themes/dark/index.ts b/components/theme/themes/dark/index.ts index 8c719fcb3e..4b6f5a4eb7 100644 --- a/components/theme/themes/dark/index.ts +++ b/components/theme/themes/dark/index.ts @@ -1,6 +1,12 @@ import { generate } from '@ant-design/colors'; import type { DerivativeFunc } from '@ant-design/cssinjs'; -import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface'; +import type { + ColorPalettes, + LegacyColorPalettes, + MapToken, + PresetColorType, + SeedToken, +} from '../../interface'; import { defaultPresetColors } from '../seed'; import genColorMapToken from '../shared/genColorMapToken'; import { generateColorPalettes, generateNeutralColorPalettes } from './colors'; @@ -13,6 +19,7 @@ const derivative: DerivativeFunc = (token, mapToken) => { return new Array(10).fill(1).reduce((prev, _, i) => { prev[`${colorKey}-${i + 1}`] = colors[i]; + prev[`${colorKey}${i + 1}`] = colors[i]; return prev; }, {}) as ColorPalettes; }) @@ -22,7 +29,7 @@ const derivative: DerivativeFunc = (token, mapToken) => { ...cur, }; return prev; - }, {} as ColorPalettes); + }, {} as ColorPalettes & LegacyColorPalettes); const mergedMapToken = mapToken ?? defaultAlgorithm(token); diff --git a/components/theme/themes/default/index.ts b/components/theme/themes/default/index.ts index c8f3dbce7e..d558e2cf87 100644 --- a/components/theme/themes/default/index.ts +++ b/components/theme/themes/default/index.ts @@ -1,7 +1,13 @@ import { generate } from '@ant-design/colors'; import genControlHeight from '../shared/genControlHeight'; import genSizeMapToken from '../shared/genSizeMapToken'; -import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface'; +import type { + ColorPalettes, + LegacyColorPalettes, + MapToken, + PresetColorType, + SeedToken, +} from '../../interface'; import { defaultPresetColors } from '../seed'; import genColorMapToken from '../shared/genColorMapToken'; import genCommonMapToken from '../shared/genCommonMapToken'; @@ -15,8 +21,9 @@ export default function derivative(token: SeedToken): MapToken { return new Array(10).fill(1).reduce((prev, _, i) => { prev[`${colorKey}-${i + 1}`] = colors[i]; + prev[`${colorKey}${i + 1}`] = colors[i]; return prev; - }, {}) as ColorPalettes; + }, {}) as ColorPalettes & LegacyColorPalettes; }) .reduce((prev, cur) => { prev = { @@ -24,7 +31,7 @@ export default function derivative(token: SeedToken): MapToken { ...cur, }; return prev; - }, {} as ColorPalettes); + }, {} as ColorPalettes & LegacyColorPalettes); return { ...token, From 2aa1e2b7e59007addbbbd8398976eba1a1c18851 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Sun, 5 Mar 2023 20:55:16 +0800 Subject: [PATCH 02/18] docs: update qrcode doc (#41062) --- components/qrcode/index.en-US.md | 6 +++--- components/qrcode/index.zh-CN.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/qrcode/index.en-US.md b/components/qrcode/index.en-US.md index 7be9ce2241..507b71eb89 100644 --- a/components/qrcode/index.en-US.md +++ b/components/qrcode/index.en-US.md @@ -10,13 +10,13 @@ group: order: 5 --- -Components that can convert links into QR codes, and support custom color and logo. Available since `antd@5.1.0`. +Components that can convert text into QR codes, and support custom color and logo. Available since `antd@5.1.0`. ## When To Use -Used when the link needs to be converted into a QR Code. +Used when the text needs to be converted into a QR Code. ## Examples @@ -36,7 +36,7 @@ Used when the link needs to be converted into a QR Code. | Property | Description | Type | Default | | :-- | :-- | :-- | :-- | -| value | scanned link | string | - | +| value | scanned text | string | - | | icon | include image url (only image link are supported) | string | - | | size | QRCode size | number | 128 | | iconSize | include image size | number | 32 | diff --git a/components/qrcode/index.zh-CN.md b/components/qrcode/index.zh-CN.md index ce387fe13f..67b8a67951 100644 --- a/components/qrcode/index.zh-CN.md +++ b/components/qrcode/index.zh-CN.md @@ -11,13 +11,13 @@ group: order: 5 --- -能够将链接转换生成二维码的组件，支持自定义配色和 Logo 配置，自 `antd@5.1.0` 版本开始提供该组件。 +能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置，自 `antd@5.1.0` 版本开始提供该组件。 ## 何时使用 -当需要将链接转换成为二维码时使用。 +当需要将文本转换成为二维码时使用。 ## 代码演示 @@ -37,7 +37,7 @@ group: | 参数 | 说明 | 类型 | 默认值 | | :-- | :-- | :-- | :-- | -| value | 扫描后的地址 | string | - | +| value | 扫描后的文本 | string | - | | icon | 二维码中图片的地址（目前只支持图片地址） | string | - | | size | 二维码大小 | number | 160 | | iconSize | 二维码中图片的大小 | number | 40 | From 2e9d14f28218d7753c21c0004c38b4f2128aebea Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Sun, 5 Mar 2023 21:00:06 +0800 Subject: [PATCH 03/18] fix(select): Fix Typography component is not centered in the Select component (#40422) Co-authored-by: Yuiai01 --- .../__snapshots__/demo-extend.test.ts.snap | 185 ++++++++++++++++++ .../__snapshots__/demo.test.tsx.snap | 99 ++++++++++ components/select/demo/option-label-center.md | 7 + .../select/demo/option-label-center.tsx | 18 ++ components/select/index.en-US.md | 1 + components/select/index.zh-CN.md | 1 + components/select/style/dropdown.tsx | 4 + components/select/style/index.tsx | 5 + 8 files changed, 320 insertions(+) create mode 100644 components/select/demo/option-label-center.md create mode 100644 components/select/demo/option-label-center.tsx diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap index 347345172f..bc37490d64 100644 --- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -3960,6 +3960,191 @@ exports[`renders ./components/select/demo/optgroup.tsx extend context correctly `; +exports[`renders ./components/select/demo/option-label-center.tsx extend context correctly 1`] = ` +
+
+
+
+ + + + + long, long, long piece of text + +
+
+
+
+
+
+ long +
+
+ short +
+
+
+
+
+
+
+
+
+ long, long, long piece of text +
+
+
+
+
+
+ short +
+
+
+
+
+
+
+
+
+
+ + +
+
+
+`; + exports[`renders ./components/select/demo/option-label-prop.tsx extend context correctly 1`] = `
`; +exports[`renders ./components/select/demo/option-label-center.tsx correctly 1`] = ` +
+
+
+
+ + + + + long, long, long piece of text + +
+ + +
+
+
+`; + exports[`renders ./components/select/demo/option-label-prop.tsx correctly 1`] = `
( + + - +