Skip to content

Commit

Permalink
Rename HorizontalStack to InlineStack (#9998)
Browse files Browse the repository at this point in the history 
The first part of #9983

Will follow up with docs improvement

<!--
  Context about the problem that’s being addressed.
-->

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

🖥 [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)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

- [ ] 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
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
  • Loading branch information
@kyledurand @sophschneider
kyledurand authored and sophschneider committed Sep 18, 2023
1 parent 8b7fedd commit c61eab2
Show file tree
Hide file tree
Showing 71 changed files with 827 additions and 591 deletions.
6 changes: 3 additions & 3 deletions polaris-react/src/components/AccountConnection/AccountConnection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {buttonFrom} from '../Button';
import {SettingAction} from '../SettingAction';
import {Card} from '../Card';
import {Box} from '../Box';
import {HorizontalStack} from '../HorizontalStack';
import {InlineStack} from '../InlineStack';
import {Text} from '../Text';
import {VerticalStack} from '../VerticalStack';
import {useBreakpoints} from '../../utilities/breakpoints';
Expand Down Expand Up @@ -82,13 +82,13 @@ export function AccountConnection({
return (
<Card>
<SettingAction action={actionElement}>
<HorizontalStack gap="4">
<InlineStack gap="4">
{avatarMarkup}
<VerticalStack gap="1">
{titleMarkup}
{detailsMarkup}
</VerticalStack>
</HorizontalStack>
</InlineStack>
</SettingAction>
{termsOfServiceMarkup}
</Card>
Expand Down
10 changes: 3 additions & 7 deletions polaris-react/src/components/ActionList/components/Item/Item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {Badge} from '../../../Badge';
import {Text} from '../../../Text';
import styles from '../../ActionList.scss';
import {handleMouseUpByBlurring} from '../../../../utilities/focus';
import {HorizontalStack} from '../../../HorizontalStack';
import {InlineStack} from '../../../InlineStack';
import {Box} from '../../../Box';
import {Tooltip} from '../../../Tooltip';
import {useIsomorphicLayoutEffect} from '../../../../utilities/use-isomorphic-layout-effect';
Expand Down Expand Up @@ -106,16 +106,12 @@ export function Item({
const textMarkup = <span className={styles.Text}>{contentMarkup}</span>;

const contentElement = (
<HorizontalStack
blockAlign="center"
gap="1_5-experimental"
wrap={!truncate}
>
<InlineStack blockAlign="center" gap="1_5-experimental" wrap={!truncate}>
{prefixMarkup}
{textMarkup}
{badgeMarkup}
{suffixMarkup}
</HorizontalStack>
</InlineStack>
);

const contentWrapper = <Box width="100%">{contentElement}</Box>;
Expand Down
4 changes: 2 additions & 2 deletions polaris-react/src/components/ActionList/components/Section/Section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import type {
ActionListItemDescriptor,
ActionListSection,
} from '../../../../types';
import {HorizontalStack} from '../../../HorizontalStack';
import {InlineStack} from '../../../InlineStack';
import {VerticalStack} from '../../../VerticalStack';

export interface SectionProps {
Expand Down Expand Up @@ -58,7 +58,7 @@ export function Section({
key={`${content}-${index}`}
role={actionRole === 'menuitem' ? 'presentation' : undefined}
>
<HorizontalStack wrap={false}>{itemMarkup}</HorizontalStack>
<InlineStack wrap={false}>{itemMarkup}</InlineStack>
</Box>
);
},
Expand Down
94 changes: 47 additions & 47 deletions polaris-react/src/components/Avatar/Avatar.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
Button,
Popover,
VerticalStack,
HorizontalStack,
InlineStack,
Box,
Text,
} from '@shopify/polaris';
Expand Down Expand Up @@ -85,27 +85,27 @@ export function All() {
<Text as="h2" variant="headingXs">
Default
</Text>
<HorizontalStack gap="2" blockAlign="center">
<InlineStack gap="2" blockAlign="center">
{sizeEntries.map(([size]) => (
<Avatar key={size} shape={shape} size={size} />
))}
</HorizontalStack>
</InlineStack>
</VerticalStack>
<VerticalStack gap="2">
<Text as="h2" variant="headingXs">
With customer
</Text>
<HorizontalStack gap="2" blockAlign="center">
<InlineStack gap="2" blockAlign="center">
{sizeEntries.map(([size]) => (
<Avatar key={size} shape={shape} size={size} customer />
))}
</HorizontalStack>
</InlineStack>
</VerticalStack>
<VerticalStack gap="2">
<Text as="h2" variant="headingXs">
With image
</Text>
<HorizontalStack gap="2" blockAlign="center">
<InlineStack gap="2" blockAlign="center">
{sizeEntries.map(([size]) => (
<Avatar
key={size}
Expand All @@ -114,15 +114,15 @@ export function All() {
source="https://burst.shopifycdn.com/photos/woman-dressed-in-pale-colors.jpg"
/>
))}
</HorizontalStack>
</InlineStack>
</VerticalStack>
<VerticalStack gap="2">
<Text as="h2" variant="headingXs">
With name (all styles)
</Text>
<VerticalStack gap="2">
{styleInitialsDefaultEntries.map(([style, initials]) => (
<HorizontalStack key={style} gap="2" blockAlign="center">
<InlineStack key={style} gap="2" blockAlign="center">
{sizeEntries.map(([size]) => (
<Avatar
key={size}
Expand All @@ -131,7 +131,7 @@ export function All() {
size={size}
/>
))}
</HorizontalStack>
</InlineStack>
))}
</VerticalStack>
</VerticalStack>
Expand All @@ -141,7 +141,7 @@ export function All() {
</Text>
<VerticalStack gap="2">
{styleInitialsDefaultEntries.map(([style, initials]) => (
<HorizontalStack key={style} gap="2" blockAlign="center">
<InlineStack key={style} gap="2" blockAlign="center">
{sizeEntries.map(([size]) => (
<Avatar
key={size}
Expand All @@ -150,7 +150,7 @@ export function All() {
size={size}
/>
))}
</HorizontalStack>
</InlineStack>
))}
</VerticalStack>
</VerticalStack>
Expand All @@ -160,7 +160,7 @@ export function All() {
</Text>
<VerticalStack gap="2">
{styleInitialsLongEntries.map(([style, initialsLong]) => (
<HorizontalStack key={style} gap="2" blockAlign="center">
<InlineStack key={style} gap="2" blockAlign="center">
{sizeEntries.map(([size]) => (
<Avatar
key={size}
Expand All @@ -169,7 +169,7 @@ export function All() {
size={size}
/>
))}
</HorizontalStack>
</InlineStack>
))}
</VerticalStack>
</VerticalStack>
Expand All @@ -178,7 +178,7 @@ export function All() {
With long and wide initials
</Text>
<VerticalStack gap="2">
<HorizontalStack gap="2" blockAlign="center">
<InlineStack gap="2" blockAlign="center">
{sizeEntries.map(([size]) => (
<Avatar
key={size}
Expand All @@ -187,7 +187,7 @@ export function All() {
initials="WWW"
/>
))}
</HorizontalStack>
</InlineStack>
</VerticalStack>
</VerticalStack>
</VerticalStack>
Expand All @@ -204,77 +204,77 @@ export function Default() {
export function CircleIconColorsSizes() {
return (
<VerticalStack gap="4">
<HorizontalStack gap="4">
<InlineStack gap="4">
<Avatar customer size="extraSmall" />
<Avatar name="AG" size="extraSmall" />
<Avatar name="AA" size="extraSmall" />
<Avatar name="AC" size="extraSmall" />
<Avatar name="AB" size="extraSmall" />
<Avatar name="AE" size="extraSmall" />
</HorizontalStack>
<HorizontalStack gap="4">
</InlineStack>
<InlineStack gap="4">
<Avatar customer size="small" />
<Avatar name="AG" size="small" />
<Avatar name="AA" size="small" />
<Avatar name="AC" size="small" />
<Avatar name="AB" size="small" />
<Avatar name="AE" size="small" />
</HorizontalStack>
<HorizontalStack gap="4">
</InlineStack>
<InlineStack gap="4">
<Avatar customer size="medium" />
<Avatar name="AG" size="medium" />
<Avatar name="AA" size="medium" />
<Avatar name="AC" size="medium" />
<Avatar name="AB" size="medium" />
<Avatar name="AE" size="medium" />
</HorizontalStack>
<HorizontalStack gap="4">
</InlineStack>
<InlineStack gap="4">
<Avatar customer size="large" />
<Avatar name="AG" size="large" />
<Avatar name="AA" size="large" />
<Avatar name="AC" size="large" />
<Avatar name="AB" size="large" />
<Avatar name="AE" size="large" />
</HorizontalStack>
</InlineStack>
</VerticalStack>
);
}

export function CircleInitialsColorsSizes() {
return (
<VerticalStack gap="4">
<HorizontalStack gap="4">
<InlineStack gap="4">
<Avatar initials="AG" size="extraSmall" />
<Avatar initials="AA" size="extraSmall" />
<Avatar initials="AC" size="extraSmall" />
<Avatar initials="AB" size="extraSmall" />
<Avatar initials="AE" size="extraSmall" />
<Avatar initials="WW" size="extraSmall" />
</HorizontalStack>
<HorizontalStack gap="4">
</InlineStack>
<InlineStack gap="4">
<Avatar initials="AG" size="small" />
<Avatar initials="AA" size="small" />
<Avatar initials="AC" size="small" />
<Avatar initials="AB" size="small" />
<Avatar initials="AE" size="small" />
<Avatar initials="WW" size="small" />
</HorizontalStack>
<HorizontalStack gap="4">
</InlineStack>
<InlineStack gap="4">
<Avatar initials="AG" size="medium" />
<Avatar initials="AA" size="medium" />
<Avatar initials="AC" size="medium" />
<Avatar initials="AB" size="medium" />
<Avatar initials="AE" size="medium" />
<Avatar initials="WW" size="medium" />
</HorizontalStack>
<HorizontalStack gap="4">
</InlineStack>
<InlineStack gap="4">
<Avatar initials="AG" size="large" />
<Avatar initials="AA" size="large" />
<Avatar initials="AC" size="large" />
<Avatar initials="AB" size="large" />
<Avatar initials="AE" size="large" />
<Avatar initials="WW" size="large" />
</HorizontalStack>
</InlineStack>
</VerticalStack>
);
}
Expand Down Expand Up @@ -326,77 +326,77 @@ export function CircleImage() {
export function SquareIconColorsSizes() {
return (
<VerticalStack gap="4">
<HorizontalStack gap="4">
<InlineStack gap="4">
<Avatar customer size="extraSmall" shape="square" />
<Avatar name="AG" size="extraSmall" shape="square" />
<Avatar name="AA" size="extraSmall" shape="square" />
<Avatar name="AC" size="extraSmall" shape="square" />
<Avatar name="AB" size="extraSmall" shape="square" />
<Avatar name="AE" size="extraSmall" shape="square" />
</HorizontalStack>
<HorizontalStack gap="4">
</InlineStack>
<InlineStack gap="4">
<Avatar customer size="small" shape="square" />
<Avatar name="AG" size="small" shape="square" />
<Avatar name="AA" size="small" shape="square" />
<Avatar name="AC" size="small" shape="square" />
<Avatar name="AB" size="small" shape="square" />
<Avatar name="AE" size="small" shape="square" />
</HorizontalStack>
<HorizontalStack gap="4">
</InlineStack>
<InlineStack gap="4">
<Avatar customer size="medium" shape="square" />
<Avatar name="AG" size="medium" shape="square" />
<Avatar name="AA" size="medium" shape="square" />
<Avatar name="AC" size="medium" shape="square" />
<Avatar name="AB" size="medium" shape="square" />
<Avatar name="AE" size="medium" shape="square" />
</HorizontalStack>
<HorizontalStack gap="4">
</InlineStack>
<InlineStack gap="4">
<Avatar customer size="large" shape="square" />
<Avatar name="AG" size="large" shape="square" />
<Avatar name="AA" size="large" shape="square" />
<Avatar name="AC" size="large" shape="square" />
<Avatar name="AB" size="large" shape="square" />
<Avatar name="AE" size="large" shape="square" />
</HorizontalStack>
</InlineStack>
</VerticalStack>
);
}

export function SquareInitialsColorsSizes() {
return (
<VerticalStack gap="4">
<HorizontalStack gap="4">
<InlineStack gap="4">
<Avatar initials="AG" size="extraSmall" shape="square" />
<Avatar initials="AA" size="extraSmall" shape="square" />
<Avatar initials="AC" size="extraSmall" shape="square" />
<Avatar initials="AB" size="extraSmall" shape="square" />
<Avatar initials="AE" size="extraSmall" shape="square" />
<Avatar initials="WW" size="extraSmall" shape="square" />
</HorizontalStack>
<HorizontalStack gap="4">
</InlineStack>
<InlineStack gap="4">
<Avatar initials="AG" size="small" shape="square" />
<Avatar initials="AA" size="small" shape="square" />
<Avatar initials="AC" size="small" shape="square" />
<Avatar initials="AB" size="small" shape="square" />
<Avatar initials="AE" size="small" shape="square" />
<Avatar initials="WW" size="small" shape="square" />
</HorizontalStack>
<HorizontalStack gap="4">
</InlineStack>
<InlineStack gap="4">
<Avatar initials="AG" size="medium" shape="square" />
<Avatar initials="AA" size="medium" shape="square" />
<Avatar initials="AC" size="medium" shape="square" />
<Avatar initials="AB" size="medium" shape="square" />
<Avatar initials="AE" size="medium" shape="square" />
<Avatar initials="WW" size="medium" shape="square" />
</HorizontalStack>
<HorizontalStack gap="4">
</InlineStack>
<InlineStack gap="4">
<Avatar initials="AG" size="large" shape="square" />
<Avatar initials="AA" size="large" shape="square" />
<Avatar initials="AC" size="large" shape="square" />
<Avatar initials="AB" size="large" shape="square" />
<Avatar initials="AE" size="large" shape="square" />
<Avatar initials="WW" size="large" shape="square" />
</HorizontalStack>
</InlineStack>
</VerticalStack>
);
}
Loading

0 comments on commit c61eab2

Please sign in to comment.