mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

style: Badge color should be respected (#43304)

Browse Source 
* style: Badge color should be respected

* test: update snapshot

* style: fix Badge color
This commit is contained in:
afc163 2023-07-01 01:30:19 +08:00 committed by GitHub
parent 6ead5ae5ef
commit 1d2f874150
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 1367 additions and 897 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

47
components/badge/demo/colorful-with-count-debug.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Badge, Space } from 'antd';
import React from 'react';
const colors = [
'pink',
@ -17,24 +17,35 @@ const colors = [
'lime',
];
const AvatarItem = ({ color }: { color: string }) => (
<div
style={{
width: 90,
height: 90,
lineHeight: '90px',
background: '#ccc',
textAlign: 'center',
}}
>
{color}
</div>
);
const App: React.FC = () => (
<Space wrap size={['large', 'middle']}>
{colors.map((color) => (
<Badge color={color} count={44} key={color}>
<div
style={{
width: 90,
height: 90,
lineHeight: '90px',
background: '#ccc',
textAlign: 'center',
}}
>
{color}
</div>
</Badge>
))}
</Space>
<>
<Space wrap size={['large', 'middle']}>
{colors.map((color) => (
<Badge color={color} count={44} key={color}>
<AvatarItem color={color} />
</Badge>
))}
</Space>
<Space wrap size={['large', 'middle']}>
{colors.map((color) => (
<Badge status="processing" color={color} text="loading" key={color} />
))}
</Space>
</>
);
export default App;

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

@ -74,8 +74,11 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;
const colorPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
[`${componentCls}-color-${colorKey}`]: {
[`&${componentCls} ${componentCls}-color-${colorKey}`]: {
background: darkColor,
[`&:not(${componentCls}-count)`]: {
color: darkColor,
},
},
}));