Skip to content

Commit 2ff12d6

Browse files
jhardyjhardy
authored
Update badge to match new style (#769)
* Update badge to match new lighter style, as well as being rounded only.
1 parent 2e032ae commit 2ff12d6

File tree

5 files changed

+49
-154
lines changed

5 files changed

+49
-154
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## [UNRELEASED]
9+
10+
### Changed
11+
12+
- `Badge` style updated to use lighter colors for intents. Badges are now always round.
13+
814
## [0.7.26] - 2020-04-14
915

1016
### Added

‎packages/components/src/Badge/Badge.test.tsx‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,3 @@ test('Badge renders all intents', () => {
4242
assertSnapshot(<Badge intent="warning">warning</Badge>)
4343
assertSnapshot(<Badge intent="critical">critical</Badge>)
4444
})
45-
46-
test('Badge rendered with rounded property', () => {
47-
assertSnapshot(<Badge rounded>small</Badge>)
48-
assertSnapshot(
49-
<Badge size="medium" rounded>
50-
medium
51-
</Badge>
52-
)
53-
assertSnapshot(
54-
<Badge size="large" intent="info" rounded>
55-
large
56-
</Badge>
57-
)
58-
})

‎packages/components/src/Badge/Badge.tsx‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,6 @@ export interface BadgeProps
5656
| 'neutral'
5757
| 'plain'
5858
| 'default'
59-
60-
/**
61-
* @default false
62-
**/
63-
rounded?: boolean
64-
6559
/**
6660
* Defines the size of Badge diameter.
6761
* @default "medium"
@@ -76,7 +70,7 @@ const size = variant({
7670
small: {
7771
fontSize: 'xxsmall',
7872
lineHeight: '16px',
79-
px: 'xxsmall',
73+
px: 'xsmall',
8074
},
8175
medium: {
8276
fontSize: 'xsmall',
@@ -86,23 +80,24 @@ const size = variant({
8680
large: {
8781
fontSize: 'medium',
8882
lineHeight: '32px',
89-
px: 'xsmall',
83+
px: 'small',
9084
},
9185
},
9286
})
9387

9488
const intent = variant({
9589
prop: 'intent',
9690
variants: {
97-
critical: { bg: 'palette.red500', color: 'palette.white' },
98-
default: { bg: 'palette.purple500', color: 'palette.white' },
99-
info: { bg: 'palette.blue500', color: 'palette.white' },
100-
neutral: { bg: 'palette.charcoal500', color: 'palette.white' },
91+
critical: { bg: 'palette.red100', color: 'palette.red600' },
92+
default: { bg: 'palette.purple100', color: 'palette.purple600' },
93+
info: { bg: 'palette.blue100', color: 'palette.blue600' },
94+
neutral: { bg: 'palette.charcoal200', color: 'palette.charcoal600' },
10195
plain: { bg: 'palette.white', color: 'palette.purple500' },
102-
positive: { bg: 'palette.green500', color: 'palette.white' },
103-
warning: { bg: 'palette.yellow500', color: 'palette.white' },
96+
positive: { bg: 'palette.green100', color: 'palette.green700' },
97+
warning: { bg: 'palette.yellow100', color: 'palette.yellow900' },
10498
},
10599
})
100+
106101
const BadgeLayout: FC<BadgeProps> = ({ children, ...props }) => {
107102
return <span {...props}>{children}</span>
108103
}
@@ -117,8 +112,7 @@ export const Badge = styled(BadgeLayout).attrs({ fontWeight: 'semiBold' })`
117112
${intent}
118113
119114
display: inline-flex;
120-
border-radius: ${(props) =>
121-
props.rounded ? '50px' : props.theme.radii.medium};
115+
border-radius:50px;
122116
`
123117

124118
Badge.defaultProps = {

‎packages/components/src/Badge/__snapshots__/Badge.test.tsx.snap‎

Lines changed: 32 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,5 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Badge rendered with rounded property 1`] = `
4-
.c0 {
5-
font-weight: 600;
6-
font-size: 0.75rem;
7-
line-height: 24px;
8-
padding-left: 0.5rem;
9-
padding-right: 0.5rem;
10-
background-color: #4F2ABA;
11-
color: #FFFFFF;
12-
display: -webkit-inline-box;
13-
display: -webkit-inline-flex;
14-
display: -ms-inline-flexbox;
15-
display: inline-flex;
16-
border-radius: 50px;
17-
}
18-
19-
<span
20-
className="c0"
21-
fontWeight="semiBold"
22-
intent="default"
23-
rounded={true}
24-
size="medium"
25-
>
26-
small
27-
</span>
28-
`;
29-
30-
exports[`Badge rendered with rounded property 2`] = `
31-
.c0 {
32-
font-weight: 600;
33-
font-size: 0.75rem;
34-
line-height: 24px;
35-
padding-left: 0.5rem;
36-
padding-right: 0.5rem;
37-
background-color: #4F2ABA;
38-
color: #FFFFFF;
39-
display: -webkit-inline-box;
40-
display: -webkit-inline-flex;
41-
display: -ms-inline-flexbox;
42-
display: inline-flex;
43-
border-radius: 50px;
44-
}
45-
46-
<span
47-
className="c0"
48-
fontWeight="semiBold"
49-
intent="default"
50-
rounded={true}
51-
size="medium"
52-
>
53-
medium
54-
</span>
55-
`;
56-
57-
exports[`Badge rendered with rounded property 3`] = `
58-
.c0 {
59-
font-weight: 600;
60-
font-size: 1rem;
61-
line-height: 32px;
62-
padding-left: 0.5rem;
63-
padding-right: 0.5rem;
64-
background-color: #0087e1;
65-
color: #FFFFFF;
66-
display: -webkit-inline-box;
67-
display: -webkit-inline-flex;
68-
display: -ms-inline-flexbox;
69-
display: inline-flex;
70-
border-radius: 50px;
71-
}
72-
73-
<span
74-
className="c0"
75-
fontWeight="semiBold"
76-
intent="info"
77-
rounded={true}
78-
size="large"
79-
>
80-
large
81-
</span>
82-
`;
83-
843
exports[`Badge renders all intents 1`] = `
854
.c0 {
865
font-weight: 600;
@@ -94,7 +13,7 @@ exports[`Badge renders all intents 1`] = `
9413
display: -webkit-inline-flex;
9514
display: -ms-inline-flexbox;
9615
display: inline-flex;
97-
border-radius: 0.25rem;
16+
border-radius: 50px;
9817
}
9918
10019
<span
@@ -114,13 +33,13 @@ exports[`Badge renders all intents 2`] = `
11433
line-height: 24px;
11534
padding-left: 0.5rem;
11635
padding-right: 0.5rem;
117-
background-color: #24b25f;
118-
color: #FFFFFF;
36+
background-color: #e0ffe7;
37+
color: #0b6b38;
11938
display: -webkit-inline-box;
12039
display: -webkit-inline-flex;
12140
display: -ms-inline-flexbox;
12241
display: inline-flex;
123-
border-radius: 0.25rem;
42+
border-radius: 50px;
12443
}
12544
12645
<span
@@ -140,13 +59,13 @@ exports[`Badge renders all intents 3`] = `
14059
line-height: 24px;
14160
padding-left: 0.5rem;
14261
padding-right: 0.5rem;
143-
background-color: #0087e1;
144-
color: #FFFFFF;
62+
background-color: #e0f2ff;
63+
color: #0059b2;
14564
display: -webkit-inline-box;
14665
display: -webkit-inline-flex;
14766
display: -ms-inline-flexbox;
14867
display: inline-flex;
149-
border-radius: 0.25rem;
68+
border-radius: 50px;
15069
}
15170
15271
<span
@@ -166,13 +85,13 @@ exports[`Badge renders all intents 4`] = `
16685
line-height: 24px;
16786
padding-left: 0.5rem;
16887
padding-right: 0.5rem;
169-
background-color: #707781;
170-
color: #FFFFFF;
88+
background-color: #DEE1E5;
89+
color: #4C535B;
17190
display: -webkit-inline-box;
17291
display: -webkit-inline-flex;
17392
display: -ms-inline-flexbox;
17493
display: inline-flex;
175-
border-radius: 0.25rem;
94+
border-radius: 50px;
17695
}
17796
17897
<span
@@ -192,13 +111,13 @@ exports[`Badge renders all intents 5`] = `
192111
line-height: 24px;
193112
padding-left: 0.5rem;
194113
padding-right: 0.5rem;
195-
background-color: #FFA800;
196-
color: #FFFFFF;
114+
background-color: #FFEBC4;
115+
color: #724B00;
197116
display: -webkit-inline-box;
198117
display: -webkit-inline-flex;
199118
display: -ms-inline-flexbox;
200119
display: inline-flex;
201-
border-radius: 0.25rem;
120+
border-radius: 50px;
202121
}
203122
204123
<span
@@ -218,13 +137,13 @@ exports[`Badge renders all intents 6`] = `
218137
line-height: 24px;
219138
padding-left: 0.5rem;
220139
padding-right: 0.5rem;
221-
background-color: #CC1F36;
222-
color: #FFFFFF;
140+
background-color: #FFE5E9;
141+
color: #B2121F;
223142
display: -webkit-inline-box;
224143
display: -webkit-inline-flex;
225144
display: -ms-inline-flexbox;
226145
display: inline-flex;
227-
border-radius: 0.25rem;
146+
border-radius: 50px;
228147
}
229148
230149
<span
@@ -244,13 +163,13 @@ exports[`Badge renders all sizes 1`] = `
244163
line-height: 24px;
245164
padding-left: 0.5rem;
246165
padding-right: 0.5rem;
247-
background-color: #4F2ABA;
248-
color: #FFFFFF;
166+
background-color: #E8E5FF;
167+
color: #412399;
249168
display: -webkit-inline-box;
250169
display: -webkit-inline-flex;
251170
display: -ms-inline-flexbox;
252171
display: inline-flex;
253-
border-radius: 0.25rem;
172+
border-radius: 50px;
254173
}
255174
256175
<span
@@ -268,15 +187,15 @@ exports[`Badge renders all sizes 2`] = `
268187
font-weight: 600;
269188
font-size: 0.6875rem;
270189
line-height: 16px;
271-
padding-left: 0.25rem;
272-
padding-right: 0.25rem;
273-
background-color: #4F2ABA;
274-
color: #FFFFFF;
190+
padding-left: 0.5rem;
191+
padding-right: 0.5rem;
192+
background-color: #E8E5FF;
193+
color: #412399;
275194
display: -webkit-inline-box;
276195
display: -webkit-inline-flex;
277196
display: -ms-inline-flexbox;
278197
display: inline-flex;
279-
border-radius: 0.25rem;
198+
border-radius: 50px;
280199
}
281200
282201
<span
@@ -296,13 +215,13 @@ exports[`Badge renders all sizes 3`] = `
296215
line-height: 24px;
297216
padding-left: 0.5rem;
298217
padding-right: 0.5rem;
299-
background-color: #4F2ABA;
300-
color: #FFFFFF;
218+
background-color: #E8E5FF;
219+
color: #412399;
301220
display: -webkit-inline-box;
302221
display: -webkit-inline-flex;
303222
display: -ms-inline-flexbox;
304223
display: inline-flex;
305-
border-radius: 0.25rem;
224+
border-radius: 50px;
306225
}
307226
308227
<span
@@ -320,15 +239,15 @@ exports[`Badge renders all sizes 4`] = `
320239
font-weight: 600;
321240
font-size: 1rem;
322241
line-height: 32px;
323-
padding-left: 0.5rem;
324-
padding-right: 0.5rem;
325-
background-color: #4F2ABA;
326-
color: #FFFFFF;
242+
padding-left: 0.75rem;
243+
padding-right: 0.75rem;
244+
background-color: #E8E5FF;
245+
color: #412399;
327246
display: -webkit-inline-box;
328247
display: -webkit-inline-flex;
329248
display: -ms-inline-flexbox;
330249
display: inline-flex;
331-
border-radius: 0.25rem;
250+
border-radius: 50px;
332251
}
333252
334253
<span

‎packages/www/src/documentation/components/content/badge.mdx‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ propsOf: Badge
44
github: Badge
55
---
66

7-
`Badge` has its default values as size small and background color as purple. The styles can be updated for size, color, and it has a option to apply a `rounded` border.
7+
A `Badge` is used for labeling elements with a message or status.
88

99
## Badge Sizes
1010

@@ -28,13 +28,3 @@ github: Badge
2828
<Badge intent="critical">Critical</Badge>
2929
</Flex>
3030
```
31-
32-
## Badge Options
33-
34-
### Rounded
35-
36-
Ends of badge are fully-rounded instead of just receiving a slight radius without `rounded` property.
37-
38-
```jsx
39-
<Badge rounded>Rounded Badge</Badge>
40-
```

0 commit comments

Comments
 (0)