Skip to content
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

Jump to bottom

Rename vertical stack to block stack #10032

Merged
merged 2 commits into from
Aug 18, 2023
Merged

Rename vertical stack to block stack #10032

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
a806ceb
Rename VerticalStack as BlockStack
kyledurand Aug 10, 2023
42d2545
fix rebase issues
kyledurand Aug 17, 2023
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
16 changes: 5 additions & 11 deletions polaris-react/src/components/AccountConnection/AccountConnection.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
import React, {useCallback, useState} from 'react';
import type {ComponentMeta} from '@storybook/react';
import {
AccountConnection,
Box,
Link,
Text,
VerticalStack,
} from '@shopify/polaris';
import {AccountConnection, Box, Link, Text, BlockStack} from '@shopify/polaris';

import {useFeatures} from '../../utilities/features';

Expand All @@ -17,20 +11,20 @@ export default {
export function All() {
return (
<>
<VerticalStack gap="4">
<BlockStack gap="4">
<Text as="h2" variant="headingXl">
Default
</Text>
<Default />
<Box paddingBlockEnd="3" />
</VerticalStack>
<VerticalStack gap="4">
</BlockStack>
<BlockStack gap="4">
<Text as="h2" variant="headingXl">
With account connected
</Text>
<WithAccountConnected />
<Box paddingBlockEnd="3" />
</VerticalStack>
</BlockStack>
</>
);
}
Expand Down
6 changes: 3 additions & 3 deletions polaris-react/src/components/AccountConnection/AccountConnection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {Card} from '../Card';
import {Box} from '../Box';
import {InlineStack} from '../InlineStack';
import {Text} from '../Text';
import {VerticalStack} from '../VerticalStack';
import {BlockStack} from '../BlockStack';
import {useBreakpoints} from '../../utilities/breakpoints';

export interface AccountConnectionProps {
Expand Down Expand Up @@ -84,10 +84,10 @@ export function AccountConnection({
<SettingAction action={actionElement}>
<InlineStack gap="4">
{avatarMarkup}
<VerticalStack gap="1">
<BlockStack gap="1">
{titleMarkup}
{detailsMarkup}
</VerticalStack>
</BlockStack>
</InlineStack>
</SettingAction>
{termsOfServiceMarkup}
Expand Down
6 changes: 3 additions & 3 deletions polaris-react/src/components/ActionList/ActionList.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
Icon,
Popover,
Thumbnail,
VerticalStack,
BlockStack,
} from '@shopify/polaris';
import {
TickSmallMinor,
Expand All @@ -27,7 +27,7 @@ export default {

export function All() {
return (
<VerticalStack gap="16">
<BlockStack gap="16">
<InAPopover />
<WithIconsOrImage />
<WithAnIconAndASuffix />
Expand All @@ -36,7 +36,7 @@ export function All() {
<WithDestructiveItem />
<WithHelpText />
<WithAPrefixAndASuffix />
</VerticalStack>
</BlockStack>
);
}

Expand Down
10 changes: 3 additions & 7 deletions polaris-react/src/components/ActionList/components/Section/Section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import type {
ActionListSection,
} from '../../../../types';
import {InlineStack} from '../../../InlineStack';
import {VerticalStack} from '../../../VerticalStack';
import {BlockStack} from '../../../BlockStack';

export interface SectionProps {
/** Section of action items */
Expand Down Expand Up @@ -108,13 +108,9 @@ export function Section({
{...(hasMultipleSections && {paddingBlockStart: '0'})}
tabIndex={!hasMultipleSections ? -1 : undefined}
>
<VerticalStack
gap="1"
as="ul"
{...(sectionRole && {role: sectionRole})}
>
<BlockStack gap="1" as="ul" {...(sectionRole && {role: sectionRole})}>
{actionMarkup}
</VerticalStack>
</BlockStack>
</Box>
</>
);
Expand Down
6 changes: 3 additions & 3 deletions polaris-react/src/components/AppProvider/AppProvider.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
Page,
ResourceList,
Text,
VerticalStack,
BlockStack,
} from '@shopify/polaris';

export default {
Expand Down Expand Up @@ -180,7 +180,7 @@ export const WithSummerEditionsFeature = {
const CheckFeature = () => {
return (
<Card>
<VerticalStack gap="4">
<BlockStack gap="4">
<Text
as="h2"
variant={polarisSummerEditions2023 ? 'headingXl' : 'bodyMd'}
Expand All @@ -190,7 +190,7 @@ export const WithSummerEditionsFeature = {
polarisSummerEditions2023 ? 'ON' : 'OFF'
}`}
</Text>
</VerticalStack>
</BlockStack>
</Card>
);
};
Expand Down
70 changes: 35 additions & 35 deletions polaris-react/src/components/Avatar/Avatar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
Avatar,
Button,
Popover,
VerticalStack,
BlockStack,
InlineStack,
Box,
Text,
Expand Down Expand Up @@ -74,14 +74,14 @@ const styleInitialsLongEntries = Object.entries(styleInitialsLong) as Entries<

export function All() {
return (
<VerticalStack gap="4">
<BlockStack gap="4">
{shapeEntries.map(([shape, shapeLabel]) => (
<Box key={shape} paddingBlockEnd="2">
<VerticalStack gap="3">
<BlockStack gap="3">
<Text as="h2" variant="headingXl">
Shape: {shapeLabel}
</Text>
<VerticalStack gap="2">
<BlockStack gap="2">
<Text as="h2" variant="headingXs">
Default
</Text>
Expand All @@ -90,8 +90,8 @@ export function All() {
<Avatar key={size} shape={shape} size={size} />
))}
</InlineStack>
</VerticalStack>
<VerticalStack gap="2">
</BlockStack>
<BlockStack gap="2">
<Text as="h2" variant="headingXs">
With customer
</Text>
Expand All @@ -100,8 +100,8 @@ export function All() {
<Avatar key={size} shape={shape} size={size} customer />
))}
</InlineStack>
</VerticalStack>
<VerticalStack gap="2">
</BlockStack>
<BlockStack gap="2">
<Text as="h2" variant="headingXs">
With image
</Text>
Expand All @@ -115,12 +115,12 @@ export function All() {
/>
))}
</InlineStack>
</VerticalStack>
<VerticalStack gap="2">
</BlockStack>
<BlockStack gap="2">
<Text as="h2" variant="headingXs">
With name (all styles)
</Text>
<VerticalStack gap="2">
<BlockStack gap="2">
{styleInitialsDefaultEntries.map(([style, initials]) => (
<InlineStack key={style} gap="2" blockAlign="center">
{sizeEntries.map(([size]) => (
Expand All @@ -133,13 +133,13 @@ export function All() {
))}
</InlineStack>
))}
</VerticalStack>
</VerticalStack>
<VerticalStack gap="2">
</BlockStack>
</BlockStack>
<BlockStack gap="2">
<Text as="h2" variant="headingXs">
With default initials (all styles)
</Text>
<VerticalStack gap="2">
<BlockStack gap="2">
{styleInitialsDefaultEntries.map(([style, initials]) => (
<InlineStack key={style} gap="2" blockAlign="center">
{sizeEntries.map(([size]) => (
Expand All @@ -152,13 +152,13 @@ export function All() {
))}
</InlineStack>
))}
</VerticalStack>
</VerticalStack>
<VerticalStack gap="2">
</BlockStack>
</BlockStack>
<BlockStack gap="2">
<Text as="h2" variant="headingXs">
With long initials (all styles)
</Text>
<VerticalStack gap="2">
<BlockStack gap="2">
{styleInitialsLongEntries.map(([style, initialsLong]) => (
<InlineStack key={style} gap="2" blockAlign="center">
{sizeEntries.map(([size]) => (
Expand All @@ -171,13 +171,13 @@ export function All() {
))}
</InlineStack>
))}
</VerticalStack>
</VerticalStack>
<VerticalStack gap="2">
</BlockStack>
</BlockStack>
<BlockStack gap="2">
<Text as="h2" variant="headingXs">
With long and wide initials
</Text>
<VerticalStack gap="2">
<BlockStack gap="2">
<InlineStack gap="2" blockAlign="center">
{sizeEntries.map(([size]) => (
<Avatar
Expand All @@ -188,12 +188,12 @@ export function All() {
/>
))}
</InlineStack>
</VerticalStack>
</VerticalStack>
</VerticalStack>
</BlockStack>
</BlockStack>
</BlockStack>
</Box>
))}
</VerticalStack>
</BlockStack>
);
}

Expand All @@ -203,7 +203,7 @@ export function Default() {

export function CircleIconColorsSizes() {
return (
<VerticalStack gap="4">
<BlockStack gap="4">
<InlineStack gap="4">
<Avatar customer size="extraSmall" />
<Avatar name="AG" size="extraSmall" />
Expand Down Expand Up @@ -236,13 +236,13 @@ export function CircleIconColorsSizes() {
<Avatar name="AB" size="large" />
<Avatar name="AE" size="large" />
</InlineStack>
</VerticalStack>
</BlockStack>
);
}

export function CircleInitialsColorsSizes() {
return (
<VerticalStack gap="4">
<BlockStack gap="4">
<InlineStack gap="4">
<Avatar initials="AG" size="extraSmall" />
<Avatar initials="AA" size="extraSmall" />
Expand Down Expand Up @@ -275,7 +275,7 @@ export function CircleInitialsColorsSizes() {
<Avatar initials="AE" size="large" />
<Avatar initials="WW" size="large" />
</InlineStack>
</VerticalStack>
</BlockStack>
);
}

Expand Down Expand Up @@ -325,7 +325,7 @@ export function CircleImage() {

export function SquareIconColorsSizes() {
return (
<VerticalStack gap="4">
<BlockStack gap="4">
<InlineStack gap="4">
<Avatar customer size="extraSmall" shape="square" />
<Avatar name="AG" size="extraSmall" shape="square" />
Expand Down Expand Up @@ -358,13 +358,13 @@ export function SquareIconColorsSizes() {
<Avatar name="AB" size="large" shape="square" />
<Avatar name="AE" size="large" shape="square" />
</InlineStack>
</VerticalStack>
</BlockStack>
);
}

export function SquareInitialsColorsSizes() {
return (
<VerticalStack gap="4">
<BlockStack gap="4">
<InlineStack gap="4">
<Avatar initials="AG" size="extraSmall" shape="square" />
<Avatar initials="AA" size="extraSmall" shape="square" />
Expand Down Expand Up @@ -397,6 +397,6 @@ export function SquareInitialsColorsSizes() {
<Avatar initials="AE" size="large" shape="square" />
<Avatar initials="WW" size="large" shape="square" />
</InlineStack>
</VerticalStack>
</BlockStack>
);
}
Loading