GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: optimize badge preset color code & fix color display unexpected (#40848)

pull/40859/head
kiner-tang(文辉) 2 years ago
committed by GitHub
parent
9f64386d0b
commit
16e90b2301
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 68 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
  2. 60
      components/badge/__tests__/__snapshots__/demo.test.ts.snap
  3. 6
      components/badge/__tests__/__snapshots__/index.test.tsx.snap
  4. 4
      components/badge/index.tsx
  5. 6
      components/badge/style/index.ts

60
components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -314,7 +314,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-pink"
class="ant-badge-status-dot ant-badge-color-pink"
/>
<span
class="ant-badge-status-text"
@ -331,7 +331,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-red"
class="ant-badge-status-dot ant-badge-color-red"
/>
<span
class="ant-badge-status-text"
@ -348,7 +348,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-yellow"
class="ant-badge-status-dot ant-badge-color-yellow"
/>
<span
class="ant-badge-status-text"
@ -365,7 +365,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-orange"
class="ant-badge-status-dot ant-badge-color-orange"
/>
<span
class="ant-badge-status-text"
@ -382,7 +382,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-cyan"
class="ant-badge-status-dot ant-badge-color-cyan"
/>
<span
class="ant-badge-status-text"
@ -399,7 +399,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-green"
class="ant-badge-status-dot ant-badge-color-green"
/>
<span
class="ant-badge-status-text"
@ -416,7 +416,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-blue"
class="ant-badge-status-dot ant-badge-color-blue"
/>
<span
class="ant-badge-status-text"
@ -433,7 +433,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-purple"
class="ant-badge-status-dot ant-badge-color-purple"
/>
<span
class="ant-badge-status-text"
@ -450,7 +450,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-geekblue"
class="ant-badge-status-dot ant-badge-color-geekblue"
/>
<span
class="ant-badge-status-text"
@ -467,7 +467,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-magenta"
class="ant-badge-status-dot ant-badge-color-magenta"
/>
<span
class="ant-badge-status-text"
@ -484,7 +484,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-volcano"
class="ant-badge-status-dot ant-badge-color-volcano"
/>
<span
class="ant-badge-status-text"
@ -501,7 +501,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-gold"
class="ant-badge-status-dot ant-badge-color-gold"
/>
<span
class="ant-badge-status-text"
@ -517,7 +517,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-lime"
class="ant-badge-status-dot ant-badge-color-lime"
/>
<span
class="ant-badge-status-text"
@ -633,7 +633,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend co
pink
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-pink"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-pink"
data-show="true"
title="44"
>
@ -673,7 +673,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend co
red
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-red"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-red"
data-show="true"
title="44"
>
@ -713,7 +713,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend co
yellow
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-yellow"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-yellow"
data-show="true"
title="44"
>
@ -753,7 +753,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend co
orange
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-orange"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-orange"
data-show="true"
title="44"
>
@ -793,7 +793,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend co
cyan
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-cyan"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-cyan"
data-show="true"
title="44"
>
@ -833,7 +833,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend co
green
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-green"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-green"
data-show="true"
title="44"
>
@ -873,7 +873,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend co
blue
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-blue"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-blue"
data-show="true"
title="44"
>
@ -913,7 +913,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend co
purple
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-purple"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-purple"
data-show="true"
title="44"
>
@ -953,7 +953,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend co
geekblue
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-geekblue"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-geekblue"
data-show="true"
title="44"
>
@ -993,7 +993,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend co
magenta
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-magenta"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-magenta"
data-show="true"
title="44"
>
@ -1033,7 +1033,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend co
volcano
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-volcano"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-volcano"
data-show="true"
title="44"
>
@ -1073,7 +1073,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend co
gold
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-gold"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-gold"
data-show="true"
title="44"
>
@ -1113,7 +1113,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend co
lime
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-lime"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-lime"
data-show="true"
title="44"
>
@ -1330,7 +1330,7 @@ exports[`renders ./components/badge/demo/mix.tsx extend context correctly 1`] =
/>
</span>
<sup
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
class="ant-scroll-number ant-badge-count ant-badge-color-blue"
data-show="true"
title="5"
>
@ -1439,7 +1439,7 @@ exports[`renders ./components/badge/demo/mix.tsx extend context correctly 1`] =
/>
</span>
<sup
class="ant-scroll-number ant-badge-dot ant-badge-status-blue"
class="ant-scroll-number ant-badge-dot ant-badge-color-blue"
data-show="true"
/>
</span>
@ -1500,7 +1500,7 @@ exports[`renders ./components/badge/demo/mix.tsx extend context correctly 1`] =
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
class="ant-scroll-number ant-badge-count ant-badge-color-blue"
data-show="true"
title="0"
>
@ -1565,7 +1565,7 @@ exports[`renders ./components/badge/demo/mix.tsx extend context correctly 1`] =
/>
</span>
<sup
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
class="ant-scroll-number ant-badge-count ant-badge-color-blue"
data-show="true"
title="0"
>

60
components/badge/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -314,7 +314,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-pink"
class="ant-badge-status-dot ant-badge-color-pink"
/>
<span
class="ant-badge-status-text"
@ -331,7 +331,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-red"
class="ant-badge-status-dot ant-badge-color-red"
/>
<span
class="ant-badge-status-text"
@ -348,7 +348,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-yellow"
class="ant-badge-status-dot ant-badge-color-yellow"
/>
<span
class="ant-badge-status-text"
@ -365,7 +365,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-orange"
class="ant-badge-status-dot ant-badge-color-orange"
/>
<span
class="ant-badge-status-text"
@ -382,7 +382,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-cyan"
class="ant-badge-status-dot ant-badge-color-cyan"
/>
<span
class="ant-badge-status-text"
@ -399,7 +399,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-green"
class="ant-badge-status-dot ant-badge-color-green"
/>
<span
class="ant-badge-status-text"
@ -416,7 +416,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-blue"
class="ant-badge-status-dot ant-badge-color-blue"
/>
<span
class="ant-badge-status-text"
@ -433,7 +433,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-purple"
class="ant-badge-status-dot ant-badge-color-purple"
/>
<span
class="ant-badge-status-text"
@ -450,7 +450,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-geekblue"
class="ant-badge-status-dot ant-badge-color-geekblue"
/>
<span
class="ant-badge-status-text"
@ -467,7 +467,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-magenta"
class="ant-badge-status-dot ant-badge-color-magenta"
/>
<span
class="ant-badge-status-text"
@ -484,7 +484,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-volcano"
class="ant-badge-status-dot ant-badge-color-volcano"
/>
<span
class="ant-badge-status-text"
@ -501,7 +501,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-gold"
class="ant-badge-status-dot ant-badge-color-gold"
/>
<span
class="ant-badge-status-text"
@ -517,7 +517,7 @@ Array [
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-lime"
class="ant-badge-status-dot ant-badge-color-lime"
/>
<span
class="ant-badge-status-text"
@ -633,7 +633,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly
pink
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-pink"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-pink"
data-show="true"
title="44"
>
@ -673,7 +673,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly
red
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-red"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-red"
data-show="true"
title="44"
>
@ -713,7 +713,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly
yellow
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-yellow"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-yellow"
data-show="true"
title="44"
>
@ -753,7 +753,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly
orange
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-orange"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-orange"
data-show="true"
title="44"
>
@ -793,7 +793,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly
cyan
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-cyan"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-cyan"
data-show="true"
title="44"
>
@ -833,7 +833,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly
green
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-green"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-green"
data-show="true"
title="44"
>
@ -873,7 +873,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly
blue
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-blue"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-blue"
data-show="true"
title="44"
>
@ -913,7 +913,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly
purple
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-purple"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-purple"
data-show="true"
title="44"
>
@ -953,7 +953,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly
geekblue
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-geekblue"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-geekblue"
data-show="true"
title="44"
>
@ -993,7 +993,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly
magenta
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-magenta"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-magenta"
data-show="true"
title="44"
>
@ -1033,7 +1033,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly
volcano
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-volcano"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-volcano"
data-show="true"
title="44"
>
@ -1073,7 +1073,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly
gold
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-gold"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-gold"
data-show="true"
title="44"
>
@ -1113,7 +1113,7 @@ exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly
lime
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-lime"
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-lime"
data-show="true"
title="44"
>
@ -1330,7 +1330,7 @@ exports[`renders ./components/badge/demo/mix.tsx correctly 1`] = `
/>
</span>
<sup
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
class="ant-scroll-number ant-badge-count ant-badge-color-blue"
data-show="true"
title="5"
>
@ -1439,7 +1439,7 @@ exports[`renders ./components/badge/demo/mix.tsx correctly 1`] = `
/>
</span>
<sup
class="ant-scroll-number ant-badge-dot ant-badge-status-blue"
class="ant-scroll-number ant-badge-dot ant-badge-color-blue"
data-show="true"
/>
</span>
@ -1500,7 +1500,7 @@ exports[`renders ./components/badge/demo/mix.tsx correctly 1`] = `
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
class="ant-scroll-number ant-badge-count ant-badge-color-blue"
data-show="true"
title="0"
>
@ -1565,7 +1565,7 @@ exports[`renders ./components/badge/demo/mix.tsx correctly 1`] = `
/>
</span>
<sup
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
class="ant-scroll-number ant-badge-count ant-badge-color-blue"
data-show="true"
title="0"
>

6
components/badge/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -28,7 +28,7 @@ exports[`Badge render Badge status/color when contains children 1`] = `
>
<a />
<sup
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
class="ant-scroll-number ant-badge-count ant-badge-color-blue"
data-show="true"
title="5"
>
@ -232,7 +232,7 @@ exports[`Badge should display custom color and number is 0 1`] = `
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
class="ant-scroll-number ant-badge-count ant-badge-color-blue"
data-show="true"
title="0"
>
@ -255,7 +255,7 @@ exports[`Badge should display custom color and number is 0 1`] = `
>
<div />
<sup
class="ant-scroll-number ant-badge-count ant-badge-status-green"
class="ant-scroll-number ant-badge-count ant-badge-color-green"
data-show="true"
title="0"
>

4
components/badge/index.tsx
View File

@ -154,7 +154,7 @@ const Badge: CompoundedComponent = ({
const statusCls = classNames({
[`${prefixCls}-status-dot`]: hasStatus,
[`${prefixCls}-status-${status}`]: !!status,
[`${prefixCls}-status-${color}`]: isInternalColor,
[`${prefixCls}-color-${color}`]: isInternalColor,
});
const statusStyle: React.CSSProperties = {};
@ -214,7 +214,7 @@ const Badge: CompoundedComponent = ({
[`${prefixCls}-multiple-words`]:
!isDot && displayCount && displayCount.toString().length > 1,
[`${prefixCls}-status-${status}`]: !!status,
[`${prefixCls}-status-${color}`]: isInternalColor,
[`${prefixCls}-color-${color}`]: isInternalColor,
});
let scrollNumberStyle: React.CSSProperties = { ...mergedStyle };

6
components/badge/style/index.ts
View File

@ -73,8 +73,8 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
const ribbonPrefixCls = `${antCls}-ribbon`;
const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;
const statusPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
[`${componentCls}-status-${colorKey}`]: {
const colorPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
[`${componentCls}-color-${colorKey}`]: {
background: darkColor,
},
}));
@ -207,13 +207,13 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
[`${componentCls}-status-warning`]: {
backgroundColor: token.colorWarning,
},
...statusPreset,
[`${componentCls}-status-text`]: {
marginInlineStart: marginXS,
color: token.colorText,
fontSize: token.fontSize,
},
},
...colorPreset,
[`${componentCls}-zoom-appear, ${componentCls}-zoom-enter`]: {
animationName: antZoomBadgeIn,
animationDuration: token.motionDurationSlow,

Write Preview
Loading…
Cancel
Save