Skip to content

Commit 11dea74

Browse files
sophschneidersophschneider
authored
Add All stories for Badge, Banner, and KeyboardKey (#9352)
### WHAT is this pull request doing? * Add `All` stories for Badge, Banner, and KeyboardKey * Fix `:where` specificity in `Badge` styles * Fix keyboard key uppercase in default variant to match small variant
1 parent c1ddbee commit 11dea74

File tree

6 files changed

+300
-3
lines changed

6 files changed

+300
-3
lines changed

‎polaris-react/src/components/Badge/Badge.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535

3636
#{$se23} & {
3737
color: var(--p-color-text-success);
38+
background-color: var(--p-color-bg-success);
3839

3940
// stylelint-disable-next-line -- se23 svg fill override
4041
svg {
@@ -48,6 +49,7 @@
4849

4950
#{$se23} & {
5051
color: var(--p-color-text-info);
52+
background-color: var(--p-color-bg-info);
5153

5254
// stylelint-disable-next-line -- se23 svg fill override
5355
svg {
@@ -61,6 +63,7 @@
6163

6264
#{$se23} & {
6365
color: var(--p-color-text-caution);
66+
background-color: var(--p-color-bg-caution);
6467

6568
// stylelint-disable-next-line -- se23 svg fill override
6669
svg {
@@ -74,6 +77,7 @@
7477

7578
#{$se23} & {
7679
color: var(--p-color-text-warning-experimental);
80+
background-color: var(--p-color-bg-warning);
7781

7882
// stylelint-disable-next-line -- se23 svg fill override
7983
svg {
@@ -87,6 +91,7 @@
8791

8892
#{$se23} & {
8993
color: var(--p-color-text-critical);
94+
background-color: var(--p-color-bg-critical);
9095

9196
// stylelint-disable-next-line -- se23 svg fill override
9297
svg {
@@ -97,6 +102,18 @@
97102

98103
.statusNew {
99104
border: none;
105+
106+
#{$se23} & {
107+
background-color: var(--p-color-bg-transparent-subdued-experimental);
108+
color: var(--p-color-text-subdued);
109+
font-weight: var(--p-font-weight-bold);
110+
border-radius: var(--p-border-radius-2);
111+
112+
// stylelint-disable-next-line -- se23 svg fill override
113+
svg {
114+
fill: var(--p-color-text-subdued);
115+
}
116+
}
100117
}
101118

102119
.withinFilter {

‎polaris-react/src/components/Badge/Badge.stories.tsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ import {
55
HorizontalStack,
66
LegacyCard,
77
VerticalStack,
8+
Text,
89
} from '@shopify/polaris';
10+
import {ClockMajor} from '@shopify/polaris-icons';
911

1012
export default {
1113
component: Badge,
@@ -70,3 +72,130 @@ export function WithStatusAndProgressLabelOverride() {
7072
</Badge>
7173
);
7274
}
75+
76+
export function All() {
77+
return (
78+
<LegacyCard sectioned>
79+
<VerticalStack gap="5">
80+
<VerticalStack gap="2">
81+
<Text as="h2" variant="headingXs">
82+
Default by status
83+
</Text>
84+
<HorizontalStack gap="4">
85+
<Badge>Fulfilled</Badge>
86+
<Badge status="info">Informational</Badge>
87+
<Badge status="success">Success</Badge>
88+
<Badge status="warning">Warning</Badge>
89+
<Badge status="attention">Attention</Badge>
90+
<Badge status="critical">Critical</Badge>
91+
<Badge status="new">New</Badge>
92+
</HorizontalStack>
93+
</VerticalStack>
94+
<VerticalStack gap="2">
95+
<Text as="h2" variant="headingXs">
96+
Complete
97+
</Text>
98+
<HorizontalStack gap="4">
99+
<Badge progress="complete">Fulfilled</Badge>
100+
<Badge progress="complete" status="info">
101+
Informational
102+
</Badge>
103+
<Badge progress="complete" status="success">
104+
Success
105+
</Badge>
106+
<Badge progress="complete" status="warning">
107+
Warning
108+
</Badge>
109+
<Badge progress="complete" status="attention">
110+
Attention
111+
</Badge>
112+
<Badge progress="complete" status="critical">
113+
Critical
114+
</Badge>
115+
<Badge progress="complete" status="new">
116+
New
117+
</Badge>
118+
</HorizontalStack>
119+
</VerticalStack>
120+
<VerticalStack gap="2">
121+
<Text as="h2" variant="headingXs">
122+
Partially complete
123+
</Text>
124+
<HorizontalStack gap="4">
125+
<Badge progress="partiallyComplete">Fulfilled</Badge>
126+
<Badge progress="partiallyComplete" status="info">
127+
Informational
128+
</Badge>
129+
<Badge progress="partiallyComplete" status="success">
130+
Success
131+
</Badge>
132+
<Badge progress="partiallyComplete" status="warning">
133+
Warning
134+
</Badge>
135+
<Badge progress="partiallyComplete" status="attention">
136+
Attention
137+
</Badge>
138+
<Badge progress="partiallyComplete" status="critical">
139+
Critical
140+
</Badge>
141+
<Badge progress="partiallyComplete" status="new">
142+
New
143+
</Badge>
144+
</HorizontalStack>
145+
</VerticalStack>
146+
<VerticalStack gap="2">
147+
<Text as="h2" variant="headingXs">
148+
Incomplete
149+
</Text>
150+
<HorizontalStack gap="4">
151+
<Badge progress="incomplete">Fulfilled</Badge>
152+
<Badge progress="incomplete" status="info">
153+
Informational
154+
</Badge>
155+
<Badge progress="incomplete" status="success">
156+
Success
157+
</Badge>
158+
<Badge progress="incomplete" status="warning">
159+
Warning
160+
</Badge>
161+
<Badge progress="incomplete" status="attention">
162+
Attention
163+
</Badge>
164+
<Badge progress="incomplete" status="critical">
165+
Critical
166+
</Badge>
167+
<Badge progress="incomplete" status="new">
168+
New
169+
</Badge>
170+
</HorizontalStack>
171+
</VerticalStack>
172+
<VerticalStack gap="2">
173+
<Text as="h2" variant="headingXs">
174+
Custom icon
175+
</Text>
176+
<HorizontalStack gap="4">
177+
<Badge icon={ClockMajor}>Fulfilled</Badge>
178+
<Badge icon={ClockMajor} status="info">
179+
Informational
180+
</Badge>
181+
<Badge icon={ClockMajor} status="success">
182+
Success
183+
</Badge>
184+
<Badge icon={ClockMajor} status="warning">
185+
Warning
186+
</Badge>
187+
<Badge icon={ClockMajor} status="attention">
188+
Attention
189+
</Badge>
190+
<Badge icon={ClockMajor} status="critical">
191+
Critical
192+
</Badge>
193+
<Badge icon={ClockMajor} status="new">
194+
New
195+
</Badge>
196+
</HorizontalStack>
197+
</VerticalStack>
198+
</VerticalStack>
199+
</LegacyCard>
200+
);
201+
}

‎polaris-react/src/components/Badge/components/Pip/Pip.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,21 +30,41 @@
3030
.statusInfo {
3131
// stylelint-disable-next-line -- Polaris component custom properties
3232
--pc-pip-color: var(--p-color-icon-info);
33+
34+
#{$se23} & {
35+
// stylelint-disable-next-line -- se23
36+
--pc-pip-color: var(--p-color-icon-info);
37+
}
3338
}
3439

3540
.statusSuccess {
3641
// stylelint-disable-next-line -- Polaris component custom properties
3742
--pc-pip-color: var(--p-color-icon-success);
43+
44+
#{$se23} & {
45+
// stylelint-disable-next-line -- se23
46+
--pc-pip-color: var(--p-color-icon-success);
47+
}
3848
}
3949

4050
.statusNew {
4151
// stylelint-disable-next-line -- Polaris component custom properties
4252
--pc-pip-color: var(--p-color-icon);
53+
54+
#{$se23} & {
55+
// stylelint-disable-next-line -- se23
56+
--pc-pip-color: var(--p-color-text-subdued);
57+
}
4358
}
4459

4560
.statusAttention {
4661
// stylelint-disable-next-line -- Polaris component custom properties
4762
--pc-pip-color: var(--p-color-icon-caution);
63+
64+
#{$se23} & {
65+
// stylelint-disable-next-line -- se23
66+
--pc-pip-color: var(--p-color-icon-caution);
67+
}
4868
}
4969

5070
.statusWarning {
@@ -60,6 +80,11 @@
6080
.statusCritical {
6181
// stylelint-disable-next-line -- Polaris component custom properties
6282
--pc-pip-color: var(--p-color-icon-critical);
83+
84+
#{$se23} & {
85+
// stylelint-disable-next-line -- se23
86+
--pc-pip-color: var(--p-color-icon-critical);
87+
}
6388
}
6489

6590
.progressIncomplete {

‎polaris-react/src/components/Banner/Banner.stories.tsx‎

Lines changed: 104 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react/no-children-prop */
12
import React, {useCallback, useEffect, useRef, useState} from 'react';
23
import type {ComponentMeta} from '@storybook/react';
34
import {
@@ -11,8 +12,9 @@ import {
1112
Modal,
1213
Text,
1314
TextContainer,
15+
Card,
1416
} from '@shopify/polaris';
15-
import {DiscountsMajor} from '@shopify/polaris-icons';
17+
import {DiscountsMajor, DiscountsMinor} from '@shopify/polaris-icons';
1618

1719
export default {
1820
component: Banner,
@@ -231,3 +233,104 @@ export function CustomIcon() {
231233
/>
232234
);
233235
}
236+
237+
export function All() {
238+
return (
239+
<VerticalStack gap="3">
240+
<Text as="h2" variant="headingMd">
241+
With dismiss and actions
242+
</Text>
243+
<AllBanners
244+
onDismiss={() => {}}
245+
action={{content: 'Primary action'}}
246+
secondaryAction={{content: 'Secondary action'}}
247+
/>
248+
<Text as="h2" variant="headingMd">
249+
Default by status
250+
</Text>
251+
<AllBanners />
252+
<Text as="h2" variant="headingMd">
253+
No title
254+
</Text>
255+
<AllBanners title={undefined} />
256+
<Text as="h2" variant="headingMd">
257+
Only title
258+
</Text>
259+
<AllBanners children={undefined} onDismiss={() => {}} />
260+
<Text as="h2" variant="headingMd">
261+
Hide icon
262+
</Text>
263+
<AllBanners hideIcon onDismiss={() => {}} />
264+
<Text as="h2" variant="headingMd">
265+
Custom icon
266+
</Text>
267+
<AllBanners icon={DiscountsMajor} onDismiss={() => {}} />
268+
<Text as="h2" variant="headingMd">
269+
In card
270+
</Text>
271+
<LegacyCard sectioned>
272+
<AllBanners />
273+
</LegacyCard>
274+
<Text as="h2" variant="headingMd">
275+
In card with dismiss
276+
</Text>
277+
<LegacyCard sectioned>
278+
<AllBanners onDismiss={() => {}} />
279+
</LegacyCard>
280+
<Text as="h2" variant="headingMd">
281+
In card no title
282+
</Text>
283+
<LegacyCard sectioned>
284+
<AllBanners title={undefined} onDismiss={() => {}} />
285+
</LegacyCard>
286+
<Text as="h2" variant="headingMd">
287+
In card no icon
288+
</Text>
289+
<LegacyCard sectioned>
290+
<AllBanners hideIcon onDismiss={() => {}} />
291+
</LegacyCard>
292+
<Text as="h2" variant="headingMd">
293+
In card custom icon
294+
</Text>
295+
<LegacyCard sectioned>
296+
<AllBanners icon={DiscountsMinor} onDismiss={() => {}} />
297+
</LegacyCard>
298+
</VerticalStack>
299+
);
300+
}
301+
302+
function AllBanners(props) {
303+
return (
304+
<VerticalStack>
305+
<Banner
306+
title="Default"
307+
children={<Text as="p">Default status</Text>}
308+
{...props}
309+
/>
310+
<Banner
311+
title="Info"
312+
status="info"
313+
children={<Text as="p">Info status</Text>}
314+
{...props}
315+
/>
316+
<Banner
317+
title="Success"
318+
status="success"
319+
children={<Text as="p">Success status</Text>}
320+
{...props}
321+
/>
322+
<Banner
323+
title="Warning"
324+
status="warning"
325+
children={<Text as="p">Warning status</Text>}
326+
{...props}
327+
/>
328+
<Banner
329+
title="Critical"
330+
status="critical"
331+
children={<Text as="p">Critical status</Text>}
332+
{...props}
333+
/>
334+
</VerticalStack>
335+
);
336+
}

0 commit comments

Comments
 (0)