Skip to content

[Layout foundations] Clean up storybook example names #7768

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 21, 2022
Merged

[Layout foundations] Clean up storybook example names #7768

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ea4f5b1
[Layout foundations] Clean up storybook example names
laurkim Nov 18, 2022
356293b
Add changeset
laurkim Nov 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/calm-jobs-divide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

Renamed storybook example names for consistency
4 changes: 2 additions & 2 deletions polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function Default() {
);
}

export function BackgroundSubdued() {
export function WithBackgroundSubdued() {
return (
<AlphaCard background="surface-subdued">
<AlphaStack gap="5">
Expand All @@ -32,7 +32,7 @@ export function BackgroundSubdued() {
);
}

export function BorderRadiusRoundedAbove() {
export function WithBorderRadiusRoundedAbove() {
return (
<AlphaCard roundedAbove="sm">
<AlphaStack gap="5">
Expand Down
18 changes: 9 additions & 9 deletions polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function Default() {
);
}

export function Gap() {
export function WithGap() {
return (
<AlphaStack gap="8">
<Badge>Paid</Badge>
Expand All @@ -28,9 +28,9 @@ export function Gap() {
);
}

export function AlignCenter() {
export function WithResponsiveGap() {
return (
<AlphaStack align="center">
<AlphaStack gap={{xs: '4', md: '10'}}>
<Badge>Paid</Badge>
<Badge>Processing</Badge>
<Badge>Fulfilled</Badge>
Expand All @@ -39,9 +39,9 @@ export function AlignCenter() {
);
}

export function AlignEnd() {
export function WithAlignCenter() {
return (
<AlphaStack align="end">
<AlphaStack align="center">
<Badge>Paid</Badge>
<Badge>Processing</Badge>
<Badge>Fulfilled</Badge>
Expand All @@ -50,9 +50,9 @@ export function AlignEnd() {
);
}

export function FullWidthChildren() {
export function WithAlignEnd() {
return (
<AlphaStack fullWidth>
<AlphaStack align="end">
<Badge>Paid</Badge>
<Badge>Processing</Badge>
<Badge>Fulfilled</Badge>
Expand All @@ -61,9 +61,9 @@ export function FullWidthChildren() {
);
}

export function ResponsiveGap() {
export function WithFullWidthChildren() {
return (
<AlphaStack gap={{xs: '4', md: '10'}}>
<AlphaStack fullWidth>
<Badge>Paid</Badge>
<Badge>Processing</Badge>
<Badge>Fulfilled</Badge>
Expand Down
6 changes: 3 additions & 3 deletions polaris-react/src/components/Box/Box.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,23 @@ export function Default() {
);
}

export function BoxWithDarkBorder() {
export function WithDarkBorder() {
return (
<Box background="surface" padding="4" border="dark">
<Icon source={PaintBrushMajor} color="base" />
</Box>
);
}

export function BoxWithBorderRadius() {
export function WithBorderRadius() {
return (
<Box background="surface" padding="4" borderRadius="2">
<Icon source={PaintBrushMajor} color="highlight" />
</Box>
);
}

export function BoxWithResponsivePadding() {
export function WithResponsivePadding() {
return (
<AlphaStack>
<Box background="surface" padding={{xs: '2', sm: '8'}} border="dark">
Expand Down
30 changes: 15 additions & 15 deletions polaris-react/src/components/Inline/Inline.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function Default() {
);
}

export function AlignStart() {
export function WithAlignStart() {
return (
<Inline align="start" gap="1">
<Thumbnail source={ImageMajor} alt="example" />
Expand All @@ -38,7 +38,7 @@ export function AlignStart() {
);
}

export function AlignCenter() {
export function WithAlignCenter() {
return (
<Inline align="center" gap="1">
<Thumbnail source={ImageMajor} alt="example" />
Expand All @@ -49,7 +49,7 @@ export function AlignCenter() {
);
}

export function AlignEnd() {
export function WithAlignEnd() {
return (
<Inline align="end" gap="1">
<Thumbnail source={ImageMajor} alt="example" />
Expand All @@ -60,7 +60,7 @@ export function AlignEnd() {
);
}

export function AlignSpaceAround() {
export function WithAlignSpaceAround() {
return (
<Inline align="space-around" gap="1">
<Badge>One</Badge>
Expand All @@ -70,7 +70,7 @@ export function AlignSpaceAround() {
);
}

export function AlignSpaceBetween() {
export function WithAlignSpaceBetween() {
return (
<Inline align="space-between" gap="1">
<Badge>One</Badge>
Expand All @@ -80,7 +80,7 @@ export function AlignSpaceBetween() {
);
}

export function AlignSpaceEvenly() {
export function WithAlignSpaceEvenly() {
return (
<Inline align="space-evenly" gap="1">
<Badge>One</Badge>
Expand All @@ -90,7 +90,7 @@ export function AlignSpaceEvenly() {
);
}

export function BlockAlignCenter() {
export function WithBlockAlignCenter() {
return (
<Inline blockAlign="center" gap="1">
<Thumbnail source={ImageMajor} alt="example" />
Expand All @@ -101,7 +101,7 @@ export function BlockAlignCenter() {
);
}

export function BlockAlignStart() {
export function WithBlockAlignStart() {
return (
<Inline blockAlign="start" gap="1">
<Thumbnail source={ImageMajor} alt="example" />
Expand All @@ -112,7 +112,7 @@ export function BlockAlignStart() {
);
}

export function BlockAlignEnd() {
export function WithBlockAlignEnd() {
return (
<Inline blockAlign="end" gap="1">
<Thumbnail source={ImageMajor} alt="example" />
Expand All @@ -123,7 +123,7 @@ export function BlockAlignEnd() {
);
}

export function BlockAlignBaseline() {
export function WithBlockAlignBaseline() {
return (
<Inline blockAlign="baseline" gap="1">
<Thumbnail source={ImageMajor} alt="example" />
Expand All @@ -134,7 +134,7 @@ export function BlockAlignBaseline() {
);
}

export function BlockAlignStrech() {
export function WithBlockAlignStrech() {
return (
<Inline blockAlign="stretch" gap="1">
<Thumbnail source={ImageMajor} alt="example" />
Expand All @@ -145,7 +145,7 @@ export function BlockAlignStrech() {
);
}

export function AlignCenterBlockAlignCenter() {
export function WithAlignCenterBlockAlignCenter() {
return (
<Inline align="center" blockAlign="center" gap="1">
<Thumbnail source={ImageMajor} alt="example" />
Expand All @@ -156,7 +156,7 @@ export function AlignCenterBlockAlignCenter() {
);
}

export function NonWrapping() {
export function WithNonWrapping() {
return (
<Inline wrap={false} gap="1">
<Badge>Paid</Badge>
Expand All @@ -167,7 +167,7 @@ export function NonWrapping() {
);
}

export function Gap() {
export function WithGap() {
return (
<AlphaStack>
<Inline gap="8">
Expand All @@ -187,7 +187,7 @@ export function Gap() {
);
}

export function GapResponsive() {
export function WithResponsiveGap() {
return (
<AlphaStack>
<Inline gap={{xs: '2', md: '4'}}>
Expand Down
4 changes: 2 additions & 2 deletions polaris-react/src/components/Tiles/Tiles.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,15 @@ export function Default() {
);
}

export function LargeGap() {
export function WithLargeGap() {
return (
<Tiles columns={{xs: 2}} gap={{xs: '10'}}>
{children}
</Tiles>
);
}

export function ManyColumns() {
export function WithManyColumns() {
const children = Array.from(Array(10)).map((ele, index) => (
<div key={index} style={styles}>
<Text as="h2" variant="headingMd">
Expand Down