Skip to content

[Layout foundations] Migrate Stack to LegacyStack #8534

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 6 commits into from
Mar 6, 2023
Merged

[Layout foundations] Migrate Stack to LegacyStack #8534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fe81a75
Migrate `polaris-react` to use `LegacyStack`
laurkim Mar 1, 2023
fa0ee6e
Fix typo in AlphaStack url
laurkim Mar 1, 2023
29bed3c
Migrate `polaris.shopify.com` to use `LegacyStack`
laurkim Mar 1, 2023
8f04757
Add changeset
laurkim Mar 1, 2023
e21628b
Update changeset
laurkim Mar 2, 2023
95ea448
Update markdown files to use LegacyStack
laurkim Mar 6, 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
6 changes: 6 additions & 0 deletions .changeset/dry-pants-beg.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@shopify/polaris': patch
'polaris.shopify.com': patch
---

Migrated usage of `Stack` to `LegacyStack`
10 changes: 5 additions & 5 deletions polaris-react/playground/DetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import {
SkeletonBodyText,
SkeletonDisplayText,
SkeletonPage,
Stack,
LegacyStack,
Text,
// eslint-disable-next-line import/no-deprecated
TextContainer,
Expand Down Expand Up @@ -520,9 +520,9 @@ export function DetailsPage() {

const fileUpload = !files.length && <DropZone.FileUpload />;
const uploadedFiles = files.length > 0 && (
<Stack vertical>
<LegacyStack vertical>
{files.map((file, index) => (
<Stack alignment="center" key={index}>
<LegacyStack alignment="center" key={index}>
<Thumbnail
size="small"
alt={file.name}
Expand All @@ -539,9 +539,9 @@ export function DetailsPage() {
{file.size} bytes
</Text>
</div>
</Stack>
</LegacyStack>
))}
</Stack>
</LegacyStack>
);

// ---- Page markup ----
Expand Down
18 changes: 12 additions & 6 deletions polaris-react/src/components/Autocomplete/Autocomplete.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import React, {useCallback, useMemo, useState} from 'react';
import type {ComponentMeta} from '@storybook/react';
import {Autocomplete, Icon, Stack, Tag, TextContainer} from '@shopify/polaris';
import {
Autocomplete,
Icon,
LegacyStack,
Tag,
TextContainer,
} from '@shopify/polaris';
import {
CirclePlusMinor,
DeleteMinor,
Expand Down Expand Up @@ -138,7 +144,7 @@ export function WithMultipleTags() {

const verticalContentMarkup =
selectedOptions.length > 0 ? (
<Stack spacing="extraTight" alignment="center">
<LegacyStack spacing="extraTight" alignment="center">
{selectedOptions.map((option) => {
let tagLabel = '';
tagLabel = option.replace('_', ' ');
Expand All @@ -149,7 +155,7 @@ export function WithMultipleTags() {
</Tag>
);
})}
</Stack>
</LegacyStack>
) : null;

const textField = (
Expand Down Expand Up @@ -454,11 +460,11 @@ export function WithLazyLoading() {
: null;
const optionList = options.slice(0, visibleOptionIndex);
const selectedTagMarkup = hasSelectedOptions ? (
<Stack spacing="extraTight">{tagsMarkup}</Stack>
<LegacyStack spacing="extraTight">{tagsMarkup}</LegacyStack>
) : null;

return (
<Stack vertical>
<LegacyStack vertical>
{selectedTagMarkup}
<Autocomplete
allowMultiple
Expand All @@ -471,7 +477,7 @@ export function WithLazyLoading() {
onLoadMoreResults={handleLoadMoreResults}
willLoadMoreResults={willLoadMoreResults}
/>
</Stack>
</LegacyStack>
);

function titleCase(string) {
Expand Down
68 changes: 37 additions & 31 deletions polaris-react/src/components/Avatar/Avatar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import React, {useCallback, useState} from 'react';
import type {ComponentMeta} from '@storybook/react';
import {ActionList, Avatar, Button, Popover, Stack} from '@shopify/polaris';
import {
ActionList,
Avatar,
Button,
Popover,
LegacyStack,
} from '@shopify/polaris';

export default {
component: Avatar,
Expand Down Expand Up @@ -57,77 +63,77 @@ export function Square() {

export function SquareWithInitials() {
return (
<Stack vertical>
<Stack.Item>
<LegacyStack vertical>
<LegacyStack.Item>
<Avatar
shape="square"
initials="OE"
name="Oluwayemisi Eun-Jung"
size="extraSmall"
/>
</Stack.Item>
<Stack.Item>
</LegacyStack.Item>
<LegacyStack.Item>
<Avatar
shape="square"
initials="OE"
name="Oluwayemisi Eun-Jung"
size="small"
/>
</Stack.Item>
<Stack.Item>
</LegacyStack.Item>
<LegacyStack.Item>
<Avatar
shape="square"
initials="OE"
name="Oluwayemisi Eun-Jung"
size="medium"
/>
</Stack.Item>
<Stack.Item>
</LegacyStack.Item>
<LegacyStack.Item>
<Avatar
shape="square"
initials="OE"
name="Oluwayemisi Eun-Jung"
size="large"
/>
</Stack.Item>
</Stack>
</LegacyStack.Item>
</LegacyStack>
);
}

export function Sizes() {
return (
<Stack vertical>
<Stack.Item>
<LegacyStack vertical>
<LegacyStack.Item>
<Avatar name="Farrah" size="extraSmall" />
</Stack.Item>
<Stack.Item>
</LegacyStack.Item>
<LegacyStack.Item>
<Avatar name="Farrah" size="small" />
</Stack.Item>
<Stack.Item>
</LegacyStack.Item>
<LegacyStack.Item>
<Avatar name="Farrah" size="medium" />
</Stack.Item>
<Stack.Item>
</LegacyStack.Item>
<LegacyStack.Item>
<Avatar name="Farrah" size="large" />
</Stack.Item>
</Stack>
</LegacyStack.Item>
</LegacyStack>
);
}

export function SizesWithInitials() {
return (
<Stack vertical>
<Stack.Item>
<LegacyStack vertical>
<LegacyStack.Item>
<Avatar initials="OE" name="Oluwayemisi Eun-Jung" size="extraSmall" />
</Stack.Item>
<Stack.Item>
</LegacyStack.Item>
<LegacyStack.Item>
<Avatar initials="OE" name="Oluwayemisi Eun-Jung" size="small" />
</Stack.Item>
<Stack.Item>
</LegacyStack.Item>
<LegacyStack.Item>
<Avatar initials="OE" name="Oluwayemisi Eun-Jung" size="medium" />
</Stack.Item>
<Stack.Item>
</LegacyStack.Item>
<LegacyStack.Item>
<Avatar initials="OE" name="Oluwayemisi Eun-Jung" size="large" />
</Stack.Item>
</Stack>
</LegacyStack.Item>
</LegacyStack>
);
}
13 changes: 10 additions & 3 deletions polaris-react/src/components/Bleed/Bleed.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import React from 'react';
import type {ComponentMeta} from '@storybook/react';
import {AlphaCard, Bleed, Box, Divider, Stack, Text} from '@shopify/polaris';
import {
AlphaCard,
Bleed,
Box,
Divider,
LegacyStack,
Text,
} from '@shopify/polaris';

export default {
component: Bleed,
Expand Down Expand Up @@ -55,7 +62,7 @@ export function WithHorizontalDirection() {

export function WithSpecificDirection() {
return (
<Stack vertical>
<LegacyStack vertical>
<Text variant="bodyMd" as="p">
Block Start
</Text>
Expand Down Expand Up @@ -88,7 +95,7 @@ export function WithSpecificDirection() {
<div style={styles} />
</Bleed>
</Box>
</Stack>
</LegacyStack>
);
}

Expand Down
22 changes: 11 additions & 11 deletions polaris-react/src/components/Card/Card.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
List,
Popover,
ResourceList,
Stack,
LegacyStack,
Text,
TextContainer,
} from '@shopify/polaris';
Expand Down Expand Up @@ -80,19 +80,19 @@ export function WithCustomFooterActions() {
return (
<Card title="Secure your account with 2-step authentication">
<Card.Section>
<Stack spacing="loose" vertical>
<LegacyStack spacing="loose" vertical>
<p>
Two-step authentication adds an extra layer of security when logging
in to your account. A special code will be required each time you
log in, ensuring only you can access your account.
</p>
<Stack distribution="trailing">
<LegacyStack distribution="trailing">
<ButtonGroup>
<Button>Enable two-step authentication</Button>
<Button plain>Learn more</Button>
</ButtonGroup>
</Stack>
</Stack>
</LegacyStack>
</LegacyStack>
</Card.Section>
</Card>
);
Expand Down Expand Up @@ -278,12 +278,12 @@ export function WithCustomReactNodeTitle() {
<Card title="Products">
<Card.Section
title={
<Stack>
<LegacyStack>
<Icon source={ProductsMajor} />
<Text variant="headingSm" as="h3">
New Products
</Text>
</Stack>
</LegacyStack>
}
>
<List>
Expand Down Expand Up @@ -352,10 +352,10 @@ export function WithAllElements() {
url={url}
accessibilityLabel={`View Sales for ${sales}`}
>
<Stack>
<Stack.Item fill>{sales}</Stack.Item>
<Stack.Item>{amount}</Stack.Item>
</Stack>
<LegacyStack>
<LegacyStack.Item fill>{sales}</LegacyStack.Item>
<LegacyStack.Item>{amount}</LegacyStack.Item>
</LegacyStack>
</ResourceList.Item>
);
}}
Expand Down
8 changes: 4 additions & 4 deletions polaris-react/src/components/Card/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, {isValidElement} from 'react';
import type {DisableableAction} from '../../../../types';
import {buttonsFrom} from '../../../Button';
import {ButtonGroup} from '../../../ButtonGroup';
import {Stack} from '../../../Stack';
import {LegacyStack} from '../../../LegacyStack';
import {Text} from '../../../Text';
import styles from '../../Card.scss';

Expand Down Expand Up @@ -36,11 +36,11 @@ export function Header({children, title, actions}: CardHeaderProps) {

const headingMarkup =
actionMarkup || children ? (
<Stack alignment="baseline">
<Stack.Item fill>{titleMarkup}</Stack.Item>
<LegacyStack alignment="baseline">
<LegacyStack.Item fill>{titleMarkup}</LegacyStack.Item>
{actionMarkup}
{children}
</Stack>
</LegacyStack>
) : (
titleMarkup
);
Expand Down
8 changes: 4 additions & 4 deletions polaris-react/src/components/Card/components/Section/Section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import {classNames} from '../../../../utilities/css';
import type {ComplexAction} from '../../../../types';
import {buttonsFrom} from '../../../Button';
import {Stack} from '../../../Stack';
import {LegacyStack} from '../../../LegacyStack';
import {ButtonGroup} from '../../../ButtonGroup';
import {Text} from '../../../Text';
import styles from '../../Card.scss';
Expand Down Expand Up @@ -61,10 +61,10 @@ export function Section({
titleMarkup || actionMarkup ? (
<div className={styles.SectionHeader}>
{actionMarkup ? (
<Stack alignment="baseline">
<Stack.Item fill>{titleMarkup}</Stack.Item>
<LegacyStack alignment="baseline">
<LegacyStack.Item fill>{titleMarkup}</LegacyStack.Item>
{actionMarkup}
</Stack>
</LegacyStack>
) : (
titleMarkup
)}
Expand Down
6 changes: 3 additions & 3 deletions polaris-react/src/components/Collapsible/Collapsible.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
LegacyCard,
Collapsible,
Link,
Stack,
LegacyStack,
TextContainer,
} from '@shopify/polaris';

Expand All @@ -21,7 +21,7 @@ export function Default() {
return (
<div style={{height: '200px'}}>
<LegacyCard sectioned>
<Stack vertical>
<LegacyStack vertical>
<Button
onClick={handleToggle}
ariaExpanded={open}
Expand All @@ -47,7 +47,7 @@ export function Default() {
<Link url="#">Test link</Link>
</TextContainer>
</Collapsible>
</Stack>
</LegacyStack>
</LegacyCard>
</div>
);
Expand Down
Loading