Skip to content

Commit 4cb1c6a

Browse files
laurkimlaurkim
authored
[Layout foundations] Clean up storybook example names (#7768)
### WHY are these changes introduced? Resolves #7762. ### WHAT is this pull request doing? Renames storybook examples for layout primitives to include `With` in the name. <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
1 parent 9ab44a6 commit 4cb1c6a

File tree

6 files changed

+36
-31
lines changed

6 files changed

+36
-31
lines changed

‎.changeset/calm-jobs-divide.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': patch
3+
---
4+
5+
Renamed storybook example names for consistency

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function Default() {
1919
);
2020
}
2121

22-
export function BackgroundSubdued() {
22+
export function WithBackgroundSubdued() {
2323
return (
2424
<AlphaCard background="surface-subdued">
2525
<AlphaStack gap="5">
@@ -32,7 +32,7 @@ export function BackgroundSubdued() {
3232
);
3333
}
3434

35-
export function BorderRadiusRoundedAbove() {
35+
export function WithBorderRadiusRoundedAbove() {
3636
return (
3737
<AlphaCard roundedAbove="sm">
3838
<AlphaStack gap="5">

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export function Default() {
1717
);
1818
}
1919

20-
export function Gap() {
20+
export function WithGap() {
2121
return (
2222
<AlphaStack gap="8">
2323
<Badge>Paid</Badge>
@@ -28,9 +28,9 @@ export function Gap() {
2828
);
2929
}
3030

31-
export function AlignCenter() {
31+
export function WithResponsiveGap() {
3232
return (
33-
<AlphaStack align="center">
33+
<AlphaStack gap={{xs: '4', md: '10'}}>
3434
<Badge>Paid</Badge>
3535
<Badge>Processing</Badge>
3636
<Badge>Fulfilled</Badge>
@@ -39,9 +39,9 @@ export function AlignCenter() {
3939
);
4040
}
4141

42-
export function AlignEnd() {
42+
export function WithAlignCenter() {
4343
return (
44-
<AlphaStack align="end">
44+
<AlphaStack align="center">
4545
<Badge>Paid</Badge>
4646
<Badge>Processing</Badge>
4747
<Badge>Fulfilled</Badge>
@@ -50,9 +50,9 @@ export function AlignEnd() {
5050
);
5151
}
5252

53-
export function FullWidthChildren() {
53+
export function WithAlignEnd() {
5454
return (
55-
<AlphaStack fullWidth>
55+
<AlphaStack align="end">
5656
<Badge>Paid</Badge>
5757
<Badge>Processing</Badge>
5858
<Badge>Fulfilled</Badge>
@@ -61,9 +61,9 @@ export function FullWidthChildren() {
6161
);
6262
}
6363

64-
export function ResponsiveGap() {
64+
export function WithFullWidthChildren() {
6565
return (
66-
<AlphaStack gap={{xs: '4', md: '10'}}>
66+
<AlphaStack fullWidth>
6767
<Badge>Paid</Badge>
6868
<Badge>Processing</Badge>
6969
<Badge>Fulfilled</Badge>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,23 @@ export function Default() {
1515
);
1616
}
1717

18-
export function BoxWithDarkBorder() {
18+
export function WithDarkBorder() {
1919
return (
2020
<Box background="surface" padding="4" border="dark">
2121
<Icon source={PaintBrushMajor} color="base" />
2222
</Box>
2323
);
2424
}
2525

26-
export function BoxWithBorderRadius() {
26+
export function WithBorderRadius() {
2727
return (
2828
<Box background="surface" padding="4" borderRadius="2">
2929
<Icon source={PaintBrushMajor} color="highlight" />
3030
</Box>
3131
);
3232
}
3333

34-
export function BoxWithResponsivePadding() {
34+
export function WithResponsivePadding() {
3535
return (
3636
<AlphaStack>
3737
<Box background="surface" padding={{xs: '2', sm: '8'}} border="dark">

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function Default() {
2727
);
2828
}
2929

30-
export function AlignStart() {
30+
export function WithAlignStart() {
3131
return (
3232
<Inline align="start" gap="1">
3333
<Thumbnail source={ImageMajor} alt="example" />
@@ -38,7 +38,7 @@ export function AlignStart() {
3838
);
3939
}
4040

41-
export function AlignCenter() {
41+
export function WithAlignCenter() {
4242
return (
4343
<Inline align="center" gap="1">
4444
<Thumbnail source={ImageMajor} alt="example" />
@@ -49,7 +49,7 @@ export function AlignCenter() {
4949
);
5050
}
5151

52-
export function AlignEnd() {
52+
export function WithAlignEnd() {
5353
return (
5454
<Inline align="end" gap="1">
5555
<Thumbnail source={ImageMajor} alt="example" />
@@ -60,7 +60,7 @@ export function AlignEnd() {
6060
);
6161
}
6262

63-
export function AlignSpaceAround() {
63+
export function WithAlignSpaceAround() {
6464
return (
6565
<Inline align="space-around" gap="1">
6666
<Badge>One</Badge>
@@ -70,7 +70,7 @@ export function AlignSpaceAround() {
7070
);
7171
}
7272

73-
export function AlignSpaceBetween() {
73+
export function WithAlignSpaceBetween() {
7474
return (
7575
<Inline align="space-between" gap="1">
7676
<Badge>One</Badge>
@@ -80,7 +80,7 @@ export function AlignSpaceBetween() {
8080
);
8181
}
8282

83-
export function AlignSpaceEvenly() {
83+
export function WithAlignSpaceEvenly() {
8484
return (
8585
<Inline align="space-evenly" gap="1">
8686
<Badge>One</Badge>
@@ -90,7 +90,7 @@ export function AlignSpaceEvenly() {
9090
);
9191
}
9292

93-
export function BlockAlignCenter() {
93+
export function WithBlockAlignCenter() {
9494
return (
9595
<Inline blockAlign="center" gap="1">
9696
<Thumbnail source={ImageMajor} alt="example" />
@@ -101,7 +101,7 @@ export function BlockAlignCenter() {
101101
);
102102
}
103103

104-
export function BlockAlignStart() {
104+
export function WithBlockAlignStart() {
105105
return (
106106
<Inline blockAlign="start" gap="1">
107107
<Thumbnail source={ImageMajor} alt="example" />
@@ -112,7 +112,7 @@ export function BlockAlignStart() {
112112
);
113113
}
114114

115-
export function BlockAlignEnd() {
115+
export function WithBlockAlignEnd() {
116116
return (
117117
<Inline blockAlign="end" gap="1">
118118
<Thumbnail source={ImageMajor} alt="example" />
@@ -123,7 +123,7 @@ export function BlockAlignEnd() {
123123
);
124124
}
125125

126-
export function BlockAlignBaseline() {
126+
export function WithBlockAlignBaseline() {
127127
return (
128128
<Inline blockAlign="baseline" gap="1">
129129
<Thumbnail source={ImageMajor} alt="example" />
@@ -134,7 +134,7 @@ export function BlockAlignBaseline() {
134134
);
135135
}
136136

137-
export function BlockAlignStrech() {
137+
export function WithBlockAlignStrech() {
138138
return (
139139
<Inline blockAlign="stretch" gap="1">
140140
<Thumbnail source={ImageMajor} alt="example" />
@@ -145,7 +145,7 @@ export function BlockAlignStrech() {
145145
);
146146
}
147147

148-
export function AlignCenterBlockAlignCenter() {
148+
export function WithAlignCenterBlockAlignCenter() {
149149
return (
150150
<Inline align="center" blockAlign="center" gap="1">
151151
<Thumbnail source={ImageMajor} alt="example" />
@@ -156,7 +156,7 @@ export function AlignCenterBlockAlignCenter() {
156156
);
157157
}
158158

159-
export function NonWrapping() {
159+
export function WithNonWrapping() {
160160
return (
161161
<Inline wrap={false} gap="1">
162162
<Badge>Paid</Badge>
@@ -167,7 +167,7 @@ export function NonWrapping() {
167167
);
168168
}
169169

170-
export function Gap() {
170+
export function WithGap() {
171171
return (
172172
<AlphaStack>
173173
<Inline gap="8">
@@ -187,7 +187,7 @@ export function Gap() {
187187
);
188188
}
189189

190-
export function GapResponsive() {
190+
export function WithResponsiveGap() {
191191
return (
192192
<AlphaStack>
193193
<Inline gap={{xs: '2', md: '4'}}>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,15 @@ export function Default() {
3232
);
3333
}
3434

35-
export function LargeGap() {
35+
export function WithLargeGap() {
3636
return (
3737
<Tiles columns={{xs: 2}} gap={{xs: '10'}}>
3838
{children}
3939
</Tiles>
4040
);
4141
}
4242

43-
export function ManyColumns() {
43+
export function WithManyColumns() {
4444
const children = Array.from(Array(10)).map((ele, index) => (
4545
<div key={index} style={styles}>
4646
<Text as="h2" variant="headingMd">

0 commit comments

Comments
 (0)