From c61eab20180adf0374d2722e085e896bb353b67c Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Thu, 17 Aug 2023 15:35:55 -0400 Subject: [PATCH] Rename HorizontalStack to InlineStack (#9998) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The first part of https://github.com/Shopify/polaris/issues/9983 Will follow up with docs improvement 🖥 [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)
Copy-paste this code in playground/Playground.tsx: ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( {/* Add the code you want to test in here */} ); } ```
- [ ] 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 --- .../AccountConnection/AccountConnection.tsx | 6 +- .../ActionList/components/Item/Item.tsx | 10 +- .../ActionList/components/Section/Section.tsx | 4 +- .../src/components/Avatar/Avatar.stories.tsx | 94 +++---- .../src/components/Badge/Badge.stories.tsx | 18 +- .../src/components/Banner/Banner.stories.tsx | 6 +- .../src/components/Banner/Banner.tsx | 34 +-- .../BannerExperimental/BannerExperimental.tsx | 263 ++++++++++++++++++ .../components/BulkActions/BulkActions.tsx | 6 +- .../src/components/Button/Button.stories.tsx | 86 +++--- .../components/Checkbox/Checkbox.stories.tsx | 6 +- .../components/DropZone/DropZone.stories.tsx | 38 +-- .../src/components/EmptyState/EmptyState.tsx | 6 +- .../EmptyState/tests/EmptyState.test.tsx | 6 +- .../src/components/Filters/Filters.tsx | 10 +- .../components/FilterPill/FilterPill.tsx | 15 +- .../Frame/components/Toast/Toast.tsx | 6 +- .../HorizontalStack/HorizontalStack.scss | 12 - .../src/components/HorizontalStack/index.ts | 1 - .../tests/HorizontalStack.test.tsx | 67 ----- .../components/IndexFilters/IndexFilters.tsx | 10 +- .../SearchFilterButton/SearchFilterButton.tsx | 6 +- .../UpdateButtons/UpdateButtons.tsx | 8 +- .../components/InlineStack/InlineStack.scss | 12 + .../InlineStack.stories.tsx} | 70 ++--- .../InlineStack.tsx} | 18 +- .../src/components/InlineStack/index.ts | 1 + .../InlineStack/tests/InlineStack.test.tsx | 65 +++++ .../LegacyCard/components/Header/Header.tsx | 10 +- .../components/Listbox/Listbox.stories.tsx | 6 +- .../components/TextOption/TextOption.tsx | 10 +- .../src/components/MediaCard/MediaCard.tsx | 14 +- polaris-react/src/components/Modal/Modal.tsx | 6 +- .../Modal/components/Footer/Footer.tsx | 14 +- .../Modal/components/Header/Header.tsx | 10 +- .../OptionList/components/Option/Option.tsx | 10 +- .../Page/components/Header/Header.tsx | 12 +- .../components/ResourceItem/ResourceItem.tsx | 18 +- .../ResourceItem/tests/ResourceItem.test.tsx | 14 +- .../SettingToggle/SettingToggle.stories.tsx | 42 +-- .../components/SkeletonPage/SkeletonPage.tsx | 10 +- .../components/Tabs/components/Tab/Tab.tsx | 11 +- .../src/components/Tag/Tag.stories.tsx | 10 +- .../Thumbnail/Thumbnail.stories.tsx | 6 +- .../src/components/Toast/Toast.stories.tsx | 2 +- .../components/Tooltip/Tooltip.stories.tsx | 110 ++++---- polaris-react/src/index.ts | 4 +- .../layout-and-structure/horizontal-grid.md | 2 +- .../{horizontal-stack.md => inline-stack.md} | 12 +- .../layout-and-structure/vertical-stack.md | 2 +- polaris.shopify.com/content/design/layout.md | 2 +- .../content/new-design-language/index.md | 2 +- .../date-picking/variants/date-range.md | 10 +- polaris.shopify.com/next.config.js | 11 +- .../pages/examples/bleed-horizontal.tsx | 6 +- .../examples/bleed-specific-direction.tsx | 12 +- .../pages/examples/bleed-vertical.tsx | 6 +- .../pages/examples/box-with-padding.tsx | 14 +- .../horizontal-grid-with-fixed-widths.tsx | 6 +- ...ensed-with-views-search-filter-sorting.tsx | 10 +- .../examples/index-table-small-screen.tsx | 10 +- ...-align.tsx => inline-stack-with-align.tsx} | 18 +- ....tsx => inline-stack-with-block-align.tsx} | 26 +- ...with-gap.tsx => inline-stack-with-gap.tsx} | 14 +- ...tsx => inline-stack-with-non-wrapping.tsx} | 6 +- ...tting-toggle-with-primitive-components.tsx | 22 +- .../pages/examples/tooltip-with-suffix.tsx | 6 +- .../examples/vertical-stack-with-align.tsx | 6 +- .../vertical-stack-with-inline-align.tsx | 6 +- ...{horizontal-stack.png => inline-stack.png} | Bin .../src/components/TipBanner/TipBanner.tsx | 6 +- 71 files changed, 827 insertions(+), 591 deletions(-) create mode 100644 polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx delete mode 100644 polaris-react/src/components/HorizontalStack/HorizontalStack.scss delete mode 100644 polaris-react/src/components/HorizontalStack/index.ts delete mode 100644 polaris-react/src/components/HorizontalStack/tests/HorizontalStack.test.tsx create mode 100644 polaris-react/src/components/InlineStack/InlineStack.scss rename polaris-react/src/components/{HorizontalStack/HorizontalStack.stories.tsx => InlineStack/InlineStack.stories.tsx} (69%) rename polaris-react/src/components/{HorizontalStack/HorizontalStack.tsx => InlineStack/InlineStack.tsx} (68%) create mode 100644 polaris-react/src/components/InlineStack/index.ts create mode 100644 polaris-react/src/components/InlineStack/tests/InlineStack.test.tsx rename polaris.shopify.com/content/components/layout-and-structure/{horizontal-stack.md => inline-stack.md} (76%) rename polaris.shopify.com/pages/examples/{horizontal-stack-with-align.tsx => inline-stack-with-align.tsx} (89%) rename polaris.shopify.com/pages/examples/{horizontal-stack-with-block-align.tsx => inline-stack-with-block-align.tsx} (85%) rename polaris.shopify.com/pages/examples/{horizontal-stack-with-gap.tsx => inline-stack-with-gap.tsx} (82%) rename polaris.shopify.com/pages/examples/{horizontal-stack-with-non-wrapping.tsx => inline-stack-with-non-wrapping.tsx} (89%) rename polaris.shopify.com/public/images/components/layout-and-structure/{horizontal-stack.png => inline-stack.png} (100%) diff --git a/polaris-react/src/components/AccountConnection/AccountConnection.tsx b/polaris-react/src/components/AccountConnection/AccountConnection.tsx index 5f6ee845ff2..49af08061dd 100644 --- a/polaris-react/src/components/AccountConnection/AccountConnection.tsx +++ b/polaris-react/src/components/AccountConnection/AccountConnection.tsx @@ -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'; @@ -82,13 +82,13 @@ export function AccountConnection({ return ( - + {avatarMarkup} {titleMarkup} {detailsMarkup} - + {termsOfServiceMarkup} diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx index b7718f81e37..7f7288f2742 100644 --- a/polaris-react/src/components/ActionList/components/Item/Item.tsx +++ b/polaris-react/src/components/ActionList/components/Item/Item.tsx @@ -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'; @@ -106,16 +106,12 @@ export function Item({ const textMarkup = {contentMarkup}; const contentElement = ( - + {prefixMarkup} {textMarkup} {badgeMarkup} {suffixMarkup} - + ); const contentWrapper = {contentElement}; diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx index 7a5aa6d0105..0b21d2e1aee 100644 --- a/polaris-react/src/components/ActionList/components/Section/Section.tsx +++ b/polaris-react/src/components/ActionList/components/Section/Section.tsx @@ -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 { @@ -58,7 +58,7 @@ export function Section({ key={`${content}-${index}`} role={actionRole === 'menuitem' ? 'presentation' : undefined} > - {itemMarkup} + {itemMarkup} ); }, diff --git a/polaris-react/src/components/Avatar/Avatar.stories.tsx b/polaris-react/src/components/Avatar/Avatar.stories.tsx index f392436c893..465a9f0afea 100644 --- a/polaris-react/src/components/Avatar/Avatar.stories.tsx +++ b/polaris-react/src/components/Avatar/Avatar.stories.tsx @@ -7,7 +7,7 @@ import { Button, Popover, VerticalStack, - HorizontalStack, + InlineStack, Box, Text, } from '@shopify/polaris'; @@ -85,27 +85,27 @@ export function All() { Default - + {sizeEntries.map(([size]) => ( ))} - + With customer - + {sizeEntries.map(([size]) => ( ))} - + With image - + {sizeEntries.map(([size]) => ( ))} - + @@ -122,7 +122,7 @@ export function All() { {styleInitialsDefaultEntries.map(([style, initials]) => ( - + {sizeEntries.map(([size]) => ( ))} - + ))} @@ -141,7 +141,7 @@ export function All() { {styleInitialsDefaultEntries.map(([style, initials]) => ( - + {sizeEntries.map(([size]) => ( ))} - + ))} @@ -160,7 +160,7 @@ export function All() { {styleInitialsLongEntries.map(([style, initialsLong]) => ( - + {sizeEntries.map(([size]) => ( ))} - + ))} @@ -178,7 +178,7 @@ export function All() { With long and wide initials - + {sizeEntries.map(([size]) => ( ))} - + @@ -204,38 +204,38 @@ export function Default() { export function CircleIconColorsSizes() { return ( - + - - + + - - + + - - + + - + ); } @@ -243,38 +243,38 @@ export function CircleIconColorsSizes() { export function CircleInitialsColorsSizes() { return ( - + - - + + - - + + - - + + - + ); } @@ -326,38 +326,38 @@ export function CircleImage() { export function SquareIconColorsSizes() { return ( - + - - + + - - + + - - + + - + ); } @@ -365,38 +365,38 @@ export function SquareIconColorsSizes() { export function SquareInitialsColorsSizes() { return ( - + - - + + - - + + - - + + - + ); } diff --git a/polaris-react/src/components/Badge/Badge.stories.tsx b/polaris-react/src/components/Badge/Badge.stories.tsx index e8f637bd226..08624660703 100644 --- a/polaris-react/src/components/Badge/Badge.stories.tsx +++ b/polaris-react/src/components/Badge/Badge.stories.tsx @@ -3,7 +3,7 @@ import type {ComponentMeta} from '@storybook/react'; import type {BadgeProps} from '@shopify/polaris'; import { Badge, - HorizontalStack, + InlineStack, LegacyCard, VerticalStack, Text, @@ -142,7 +142,7 @@ export function All() { Status only - + {statusEntries.map(([status, statusLabel]) => ( ))} - + Status with progress {progressEntries.map(([progress]) => ( - + {statusEntries.map(([status, statusLabel]) => ( ))} - + ))} {/* Remove `size` condition when micro icons are available */} @@ -179,7 +179,7 @@ export function All() { Status with icon - + {statusEntries.map(([status, statusLabel]) => ( ))} - + )} {/* TODO: Re-enable the following examples when designs are available (post se23) */} @@ -198,7 +198,7 @@ export function All() { Status with icon only - + {statusEntries.map(([status]) => ( ))} - + */} diff --git a/polaris-react/src/components/Banner/Banner.stories.tsx b/polaris-react/src/components/Banner/Banner.stories.tsx index c36da8c4ee4..6732a9456ea 100644 --- a/polaris-react/src/components/Banner/Banner.stories.tsx +++ b/polaris-react/src/components/Banner/Banner.stories.tsx @@ -7,7 +7,7 @@ import { Button, Card, LegacyCard, - HorizontalStack, + InlineStack, Link, List, Modal, @@ -216,14 +216,14 @@ export function WithEndJustifiedContent() { return ( - + Deployment failed in 5min Logs - +

This order was archived on March 7, 2017 at 3:12pm EDT.

 diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx index d0268b9aea4..de1be6e0b52 100644 --- a/polaris-react/src/components/Banner/Banner.tsx +++ b/polaris-react/src/components/Banner/Banner.tsx @@ -13,8 +13,8 @@ import {CancelMinor} from '@shopify/polaris-icons'; import type {Action, DisableableAction, LoadableAction} from '../../types'; import {Text} from '../Text'; import {VerticalStack} from '../VerticalStack'; -import type {HorizontalStackProps} from '../HorizontalStack'; -import {HorizontalStack} from '../HorizontalStack'; +import type {InlineStackProps} from '../InlineStack'; +import {InlineStack} from '../InlineStack'; import type {BoxProps} from '../Box'; import {Box} from '../Box'; import {Button} from '../Button'; @@ -208,18 +208,18 @@ export function DefaultBanner({ borderEndEndRadius={!hasContent && smUp ? '3' : undefined} padding="3" > - - + {bannerIcon} {bannerTitle} - + {dismissButton} - + {hasContent && ( @@ -242,7 +242,7 @@ export function InlineIconBanner({ children, }: PropsWithChildren>) { const [blockAlign, setBlockAlign] = - useState('center'); + useState('center'); const contentNode = useRef(null); const iconNode = useRef(null); @@ -262,13 +262,9 @@ export function InlineIconBanner({ return ( - + - + {bannerIcon ? (
@@ -282,10 +278,10 @@ export function InlineIconBanner({ {actionButtons} - + {dismissButton} - + ); } @@ -307,13 +303,13 @@ export function WithinContentContainerBanner({ borderRadius="2" color={textColor} > - - + {bannerIcon} @@ -324,9 +320,9 @@ export function WithinContentContainerBanner({ {actionButtons} - + {dismissButton} - + ); } diff --git a/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx b/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx new file mode 100644 index 00000000000..4e94498c2fd --- /dev/null +++ b/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx @@ -0,0 +1,263 @@ +import type {PropsWithChildren} from 'react'; +import React, { + useEffect, + useState, + useRef, + useContext, + useCallback, +} from 'react'; +import type {ColorTextAlias} from '@shopify/polaris-tokens'; +import {CancelMinor} from '@shopify/polaris-icons'; + +import {Text} from '../../../Text'; +import {VerticalStack} from '../../../VerticalStack'; +import type {InlineStackProps} from '../../../InlineStack'; +import {InlineStack} from '../../../InlineStack'; +import {useBreakpoints} from '../../../../utilities/breakpoints'; +import {WithinContentContext} from '../../../../utilities/within-content-context'; +import type {BoxProps} from '../../../Box'; +import {Box} from '../../../Box'; +import {Button} from '../../../Button'; +import {ButtonGroup} from '../../../ButtonGroup'; +import type {BannerProps} from '../../Banner'; +import {useI18n} from '../../../../utilities/i18n'; +import {Icon} from '../../../Icon'; +import {useEventListener} from '../../../../utilities/use-event-listener'; +import {bannerAttributes} from '../../utilities'; + +import styles from './BannerExperimental.scss'; + +interface BannerLayoutProps { + backgroundColor: BoxProps['background']; + textColor: ColorTextAlias; + bannerTitle: React.ReactNode; + bannerIcon: React.ReactNode; + actionButtons: React.ReactNode; + dismissButton: React.ReactNode; +} + +export function BannerExperimental({ + status = 'info', + icon, + hideIcon, + onDismiss, + action, + secondaryAction, + title, + children, +}: BannerProps) { + const i18n = useI18n(); + const withinContentContainer = useContext(WithinContentContext); + const isInlineIconBanner = !title && !withinContentContainer; + const bannerStatus = Object.keys(bannerAttributes).includes(status) + ? status + : 'info'; + const bannerColors = + bannerAttributes[bannerStatus][ + withinContentContainer ? 'withinContentContainer' : 'withinPage' + ]; + + const sharedBannerProps: BannerLayoutProps = { + backgroundColor: bannerColors.background, + textColor: bannerColors.text, + bannerTitle: title ? ( + + {title} + + ) : null, + bannerIcon: hideIcon ? null : ( + + + + ), + actionButtons: + action || secondaryAction ? ( + + {action && ( + + )} + {secondaryAction && ( + + )} + + ) : null, + dismissButton: onDismiss ? ( + @@ -60,10 +60,10 @@ export function All() { onClick={() => {}} accessibilityLabel="Dismiss" /> - + - + @@ -82,13 +82,13 @@ export function All() { onClick={() => {}} accessibilityLabel="Dismiss" /> - + outline destructive - + @@ -133,10 +133,10 @@ export function All() { onClick={() => {}} accessibilityLabel="Dismiss" /> - + - + @@ -167,13 +167,13 @@ export function All() { onClick={() => {}} accessibilityLabel="Dismiss" /> - + destructive - + @@ -263,12 +263,12 @@ export function All() { onClick={() => {}} accessibilityLabel="Dismiss" /> - + primary sucess - + @@ -332,7 +332,7 @@ export function All() { onClick={() => {}} accessibilityLabel="Dismiss" /> - + @@ -342,7 +342,7 @@ export function All() { primary plain destructive - + @@ -366,7 +366,7 @@ export function All() { onClick={() => {}} accessibilityLabel="Dismiss" /> - +
@@ -394,7 +394,7 @@ export function OutlineMonochrome() { export function Plain() { return ( - + @@ -449,10 +449,10 @@ export function PlainPrimary() { - + - + @@ -468,10 +468,10 @@ export function PlainPrimary() { - + - + - - + + - + ); } @@ -806,7 +806,7 @@ export function DisabledState() { export function LoadingState() { return ( - + - + ); } diff --git a/polaris-react/src/components/Checkbox/Checkbox.stories.tsx b/polaris-react/src/components/Checkbox/Checkbox.stories.tsx index 20a8efdc611..991d225cae7 100644 --- a/polaris-react/src/components/Checkbox/Checkbox.stories.tsx +++ b/polaris-react/src/components/Checkbox/Checkbox.stories.tsx @@ -1,6 +1,6 @@ import React, {useCallback, useState} from 'react'; import type {ComponentMeta} from '@storybook/react'; -import {Checkbox, HorizontalStack, VerticalStack, Card} from '@shopify/polaris'; +import {Checkbox, InlineStack, VerticalStack, Card} from '@shopify/polaris'; export default { component: Checkbox, @@ -40,7 +40,7 @@ export function DisabledStates() { }; return ( - + - + ); } diff --git a/polaris-react/src/components/DropZone/DropZone.stories.tsx b/polaris-react/src/components/DropZone/DropZone.stories.tsx index b4dffcfe951..9f2bf0ea8ab 100644 --- a/polaris-react/src/components/DropZone/DropZone.stories.tsx +++ b/polaris-react/src/components/DropZone/DropZone.stories.tsx @@ -9,7 +9,7 @@ import { Page, VerticalStack, Thumbnail, - HorizontalStack, + InlineStack, } from '@shopify/polaris'; import {NoteMinor} from '@shopify/polaris-icons'; @@ -33,7 +33,7 @@ export function Default() {
{files.map((file, index) => ( - +
- + ))} @@ -88,7 +88,7 @@ export function WithImageFileUpload() { const uploadedFiles = files.length > 0 && ( {files.map((file, index) => ( - + - + ))} ); @@ -144,7 +144,7 @@ export function WithSingleFileUpload() { const fileUpload = !file && ; const uploadedFile = file && ( - + - + ); return ( @@ -185,7 +185,7 @@ export function WithDropOnPage() { const uploadedFiles = files.length > 0 && ( {files.map((file, index) => ( - + - + ))} ); @@ -246,7 +246,7 @@ export function AcceptsOnlySVGFiles() { const uploadedFiles = files.length > 0 && ( {files.map((file, index) => ( - + - + ))} ); @@ -308,7 +308,7 @@ export function Nested() { const uploadedFiles = files.length > 0 && ( {files.map((file, index) => ( - + - + ))} ); @@ -434,7 +434,7 @@ export function WithCustomFileUploadText() { const uploadedFiles = files.length > 0 && ( {files.map((file, index) => ( - + - + ))} ); @@ -482,7 +482,7 @@ export function WithCustomFileDialogTrigger() { const uploadedFiles = files.length > 0 && ( {files.map((file, index) => ( - + - + ))} ); @@ -541,7 +541,7 @@ export function Error() {
{files.map((file, index) => ( - +
- + ))} diff --git a/polaris-react/src/components/EmptyState/EmptyState.tsx b/polaris-react/src/components/EmptyState/EmptyState.tsx index e28c3b4b9f7..ef19e2f81c6 100644 --- a/polaris-react/src/components/EmptyState/EmptyState.tsx +++ b/polaris-react/src/components/EmptyState/EmptyState.tsx @@ -7,7 +7,7 @@ import {buttonFrom} from '../Button'; import {Image} from '../Image'; import {Text} from '../Text'; import {VerticalStack} from '../VerticalStack'; -import {HorizontalStack} from '../HorizontalStack'; +import {InlineStack} from '../InlineStack'; import styles from './EmptyState.scss'; @@ -111,10 +111,10 @@ export function EmptyState({ const actionsMarkup = primaryActionMarkup || secondaryActionMarkup ? ( - + {secondaryActionMarkup} {primaryActionMarkup} - + ) : null; const detailsMarkup = diff --git a/polaris-react/src/components/EmptyState/tests/EmptyState.test.tsx b/polaris-react/src/components/EmptyState/tests/EmptyState.test.tsx index 58b6ce2030b..e7903a14b17 100644 --- a/polaris-react/src/components/EmptyState/tests/EmptyState.test.tsx +++ b/polaris-react/src/components/EmptyState/tests/EmptyState.test.tsx @@ -7,7 +7,7 @@ import {Text} from '../../Text'; import {UnstyledLink} from '../../UnstyledLink'; import {WithinContentContext} from '../../../utilities/within-content-context'; import {EmptyState} from '../EmptyState'; -import {HorizontalStack} from '../../HorizontalStack'; +import {InlineStack} from '../../InlineStack'; describe('', () => { let imgSrc = @@ -50,12 +50,12 @@ describe('', () => { }); }); - it('adds center align and spacing-2 to HorizontalStack', () => { + it('adds center align and spacing-2 to InlineStack', () => { const emptyState = mountWithApp( , ); - expect(emptyState).toContainReactComponent(HorizontalStack, { + expect(emptyState).toContainReactComponent(InlineStack, { align: 'center', gap: '2', }); diff --git a/polaris-react/src/components/Filters/Filters.tsx b/polaris-react/src/components/Filters/Filters.tsx index 9ed2e22e1f4..9d86ae0a300 100644 --- a/polaris-react/src/components/Filters/Filters.tsx +++ b/polaris-react/src/components/Filters/Filters.tsx @@ -16,7 +16,7 @@ import type { AppliedFilterInterface, FilterInterface, } from '../../types'; -import {HorizontalStack} from '../HorizontalStack'; +import {InlineStack} from '../InlineStack'; import type {BoxProps} from '../Box'; import {Box} from '../Box'; import {Spinner} from '../Spinner'; @@ -307,7 +307,7 @@ export function Filters({ className={classNames(styles.Container, se23 && styles.ContainerUplift)} > - {additionalContent} - + ); @@ -444,7 +444,7 @@ export function Filters({ {hideQueryField ? ( - {additionalContent} - + ) : null} diff --git a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx index eabd1199a67..bbd82318932 100644 --- a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx +++ b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx @@ -12,7 +12,7 @@ import {Button} from '../../../Button'; import {VerticalStack} from '../../../VerticalStack'; import {Icon} from '../../../Icon'; import {Text} from '../../../Text'; -import {HorizontalStack} from '../../../HorizontalStack'; +import {InlineStack} from '../../../InlineStack'; import {UnstyledButton} from '../../../UnstyledButton'; import {useBreakpoints} from '../../../../utilities/breakpoints'; import {useFeatures} from '../../../../utilities/features'; @@ -137,7 +137,7 @@ export function FilterPill({ const activator = (
- + - + {selected ? ( <>{wrappedLabel} ) : ( @@ -169,7 +164,7 @@ export function FilterPill({
)} - + {selected ? ( @@ -185,7 +180,7 @@ export function FilterPill({ ) : null} - + ); diff --git a/polaris-react/src/components/Frame/components/Toast/Toast.tsx b/polaris-react/src/components/Frame/components/Toast/Toast.tsx index c74f2a3e28c..b30b95e1ae9 100644 --- a/polaris-react/src/components/Frame/components/Toast/Toast.tsx +++ b/polaris-react/src/components/Frame/components/Toast/Toast.tsx @@ -9,7 +9,7 @@ import {classNames} from '../../../../utilities/css'; import {Key} from '../../../../types'; import {Button} from '../../../Button'; import {Icon} from '../../../Icon'; -import {HorizontalStack} from '../../../HorizontalStack'; +import {InlineStack} from '../../../InlineStack'; import {Text} from '../../../Text'; import {KeypressListener} from '../../../KeypressListener'; import type {ToastProps} from '../../../../utilities/frame'; @@ -90,11 +90,11 @@ export function Toast({
{leadingIconMarkup} - + {content} - + {actionMarkup} {dismissMarkup}
diff --git a/polaris-react/src/components/HorizontalStack/HorizontalStack.scss b/polaris-react/src/components/HorizontalStack/HorizontalStack.scss deleted file mode 100644 index e155e5bc553..00000000000 --- a/polaris-react/src/components/HorizontalStack/HorizontalStack.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '../../styles/common'; - -.HorizontalStack { - @include responsive-props('horizontal-stack', 'gap', 'gap'); - display: flex; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - flex-wrap: var(--pc-horizontal-stack-wrap); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - align-items: var(--pc-horizontal-stack-block-align); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - justify-content: var(--pc-horizontal-stack-align); -} diff --git a/polaris-react/src/components/HorizontalStack/index.ts b/polaris-react/src/components/HorizontalStack/index.ts deleted file mode 100644 index 2b085abf8e9..00000000000 --- a/polaris-react/src/components/HorizontalStack/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './HorizontalStack'; diff --git a/polaris-react/src/components/HorizontalStack/tests/HorizontalStack.test.tsx b/polaris-react/src/components/HorizontalStack/tests/HorizontalStack.test.tsx deleted file mode 100644 index 2df2724fc95..00000000000 --- a/polaris-react/src/components/HorizontalStack/tests/HorizontalStack.test.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; -import {mountWithApp} from 'tests/utilities'; - -import {HorizontalStack} from '../HorizontalStack'; - -describe('', () => { - const childText = 'Child'; - const renderChildren = () => - [0, 1].map((i) => ( -
- {childText} {i} -
- )); - - it('renders its children', () => { - const horizontalStack = mountWithApp( - {renderChildren()}, - ); - - expect(horizontalStack).toContainReactText(childText); - }); - - it('renders custom properties by default', () => { - const horizontalStack = mountWithApp( - {renderChildren()}, - ); - - expect(horizontalStack).toContainReactComponent('div', { - style: expect.objectContaining({ - '--pc-horizontal-stack-wrap': 'wrap', - }) as React.CSSProperties, - }); - }); - - it('overrides custom properties if they are passed in', () => { - const horizontalStack = mountWithApp( - - {renderChildren()} - , - ); - - expect(horizontalStack).toContainReactComponent('div', { - style: expect.objectContaining({ - '--pc-horizontal-stack-align': 'center', - '--pc-horizontal-stack-block-align': 'start', - '--pc-horizontal-stack-wrap': 'wrap', - '--pc-horizontal-stack-gap-xs': 'var(--p-space-10)', - }) as React.CSSProperties, - }); - }); - - it('accepts gap based on breakpoints', () => { - const horizontalStack = mountWithApp( - - {renderChildren()} - , - ); - - expect(horizontalStack).toContainReactComponent('div', { - style: expect.objectContaining({ - '--pc-horizontal-stack-wrap': 'wrap', - '--pc-horizontal-stack-gap-xs': 'var(--p-space-2)', - '--pc-horizontal-stack-gap-md': 'var(--p-space-8)', - }) as React.CSSProperties, - }); - }); -}); diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.tsx index b91ab5d2008..f66a22e9030 100644 --- a/polaris-react/src/components/IndexFilters/IndexFilters.tsx +++ b/polaris-react/src/components/IndexFilters/IndexFilters.tsx @@ -6,7 +6,7 @@ import {classNames} from '../../utilities/css'; import {useEventListener} from '../../utilities/use-event-listener'; import {useToggle} from '../../utilities/use-toggle'; import {useOnValueChange} from '../../utilities/use-on-value-change'; -import {HorizontalStack} from '../HorizontalStack'; +import {InlineStack} from '../InlineStack'; import {Spinner} from '../Spinner'; import {Filters} from '../Filters'; import type {FiltersProps} from '../Filters'; @@ -338,7 +338,7 @@ export function IndexFilters({
{mode !== IndexFiltersMode.Filtering ? ( - - + ) : null}
@@ -438,7 +438,7 @@ export function IndexFilters({ closeOnChildOverlayClick={closeOnChildOverlayClick} >
- {sortMarkup} - +
) : null} diff --git a/polaris-react/src/components/IndexFilters/components/SearchFilterButton/SearchFilterButton.tsx b/polaris-react/src/components/IndexFilters/components/SearchFilterButton/SearchFilterButton.tsx index b46732425a6..a39797c1fd6 100644 --- a/polaris-react/src/components/IndexFilters/components/SearchFilterButton/SearchFilterButton.tsx +++ b/polaris-react/src/components/IndexFilters/components/SearchFilterButton/SearchFilterButton.tsx @@ -5,7 +5,7 @@ import {SearchMinor, FilterMinor} from '@shopify/polaris-icons'; import {Icon} from '../../../Icon'; import {Tooltip} from '../../../Tooltip'; import {Text} from '../../../Text'; -import {HorizontalStack} from '../../../HorizontalStack'; +import {InlineStack} from '../../../InlineStack'; import {FilterButton} from '../FilterButton'; import {useFeatures} from '../../../../utilities/features'; @@ -31,10 +31,10 @@ export function SearchFilterButton({ const {polarisSummerEditions2023: se23} = useFeatures(); const iconMarkup = ( - + {hideQueryField ? null : } {hideFilters ? null : } - + ); const childMarkup = !se23 ? iconMarkup : null; diff --git a/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx b/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx index 2c6f9425007..a474c726524 100644 --- a/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx +++ b/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx @@ -5,7 +5,7 @@ import {Modal} from '../../../Modal'; import {TextField} from '../../../TextField'; import {Form} from '../../../Form'; import {FormLayout} from '../../../FormLayout'; -import {HorizontalStack} from '../../../HorizontalStack'; +import {InlineStack} from '../../../InlineStack'; import {Button} from '../../../Button'; import {focusFirstFocusableNode} from '../../../../utilities/focus'; import {useFeatures} from '../../../../utilities/features'; @@ -123,11 +123,11 @@ export function UpdateButtons({ } return ( - + {cancelButtonMarkup} {primaryAction.type === 'save-as' ? ( {saveButton}} + activator={{saveButton}} open={savedViewModalOpen} title={i18n.translate( 'Polaris.IndexFilters.UpdateButtons.modal.title', @@ -181,6 +181,6 @@ export function UpdateButtons({ ) : ( saveButton )} - + ); } diff --git a/polaris-react/src/components/InlineStack/InlineStack.scss b/polaris-react/src/components/InlineStack/InlineStack.scss new file mode 100644 index 00000000000..c4fb95e3f8d --- /dev/null +++ b/polaris-react/src/components/InlineStack/InlineStack.scss @@ -0,0 +1,12 @@ +@import '../../styles/common'; + +.InlineStack { + @include responsive-props('inline-stack', 'gap', 'gap'); + display: flex; + // stylelint-disable-next-line -- Necessary for layout components + flex-wrap: var(--pc-inline-stack-wrap); + // stylelint-disable-next-line -- Necessary for layout components + align-items: var(--pc-inline-stack-block-align); + // stylelint-disable-next-line -- Necessary for layout components + justify-content: var(--pc-inline-stack-align); +} diff --git a/polaris-react/src/components/HorizontalStack/HorizontalStack.stories.tsx b/polaris-react/src/components/InlineStack/InlineStack.stories.tsx similarity index 69% rename from polaris-react/src/components/HorizontalStack/HorizontalStack.stories.tsx rename to polaris-react/src/components/InlineStack/InlineStack.stories.tsx index ad91554d0de..12432b42c1a 100644 --- a/polaris-react/src/components/HorizontalStack/HorizontalStack.stories.tsx +++ b/polaris-react/src/components/InlineStack/InlineStack.stories.tsx @@ -1,183 +1,183 @@ import React from 'react'; import type {ComponentMeta} from '@storybook/react'; -import {Box, Badge, Icon, HorizontalStack, Thumbnail} from '@shopify/polaris'; +import {Box, Badge, Icon, InlineStack, Thumbnail} from '@shopify/polaris'; import {CapitalMajor, ImageMajor} from '@shopify/polaris-icons'; export default { - component: HorizontalStack, -} as ComponentMeta; + component: InlineStack, +} as ComponentMeta; export function Default() { return ( - + One Two Three - + ); } export function WithAlignStart() { return ( - + One Two Three - + ); } export function WithAlignCenter() { return ( - + One Two Three - + ); } export function WithAlignEnd() { return ( - + One Two Three - + ); } export function WithAlignSpaceAround() { return ( - + One Two Three - + ); } export function WithAlignSpaceBetween() { return ( - + One Two Three - + ); } export function WithAlignSpaceEvenly() { return ( - + One Two Three - + ); } export function WithBlockAlignStart() { return ( - + One Two Three - + ); } export function WithBlockAlignCenter() { return ( - + One Two Three - + ); } export function WithBlockAlignEnd() { return ( - + One Two Three - + ); } export function WithBlockAlignBaseline() { return ( - + One Two Three - + ); } export function WithBlockAlignStretch() { return ( - + One Two Three - + ); } export function WithAlignCenterBlockAlignCenter() { return ( - + One Two Three - + ); } export function WithNonWrapping() { return ( - + Paid Processing Fulfilled Completed - + ); } export function WithGap() { return ( - + Paid Processing Fulfilled Completed - + ); } export function WithResponsiveGap() { return ( - + Paid Processing Fulfilled Completed - + ); } diff --git a/polaris-react/src/components/HorizontalStack/HorizontalStack.tsx b/polaris-react/src/components/InlineStack/InlineStack.tsx similarity index 68% rename from polaris-react/src/components/HorizontalStack/HorizontalStack.tsx rename to polaris-react/src/components/InlineStack/InlineStack.tsx index 8b449787640..a508b9f1a42 100644 --- a/polaris-react/src/components/HorizontalStack/HorizontalStack.tsx +++ b/polaris-react/src/components/InlineStack/InlineStack.tsx @@ -4,7 +4,7 @@ import type {SpaceScale} from '@shopify/polaris-tokens'; import {getResponsiveProps} from '../../utilities/css'; import type {ResponsiveProp} from '../../utilities/css'; -import styles from './HorizontalStack.scss'; +import styles from './InlineStack.scss'; type Align = | 'start' @@ -17,7 +17,7 @@ type BlockAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch'; type Gap = ResponsiveProp; -export interface HorizontalStackProps extends React.AriaAttributes { +export interface InlineStackProps extends React.AriaAttributes { children?: React.ReactNode; /** Horizontal alignment of children */ align?: Align; @@ -35,22 +35,22 @@ export interface HorizontalStackProps extends React.AriaAttributes { wrap?: boolean; } -export const HorizontalStack = function HorizontalStack({ +export const InlineStack = function InlineStack({ align, blockAlign, gap, wrap = true, children, -}: HorizontalStackProps) { +}: InlineStackProps) { const style = { - '--pc-horizontal-stack-align': align, - '--pc-horizontal-stack-block-align': blockAlign, - '--pc-horizontal-stack-wrap': wrap ? 'wrap' : 'nowrap', - ...getResponsiveProps('horizontal-stack', 'gap', 'space', gap), + '--pc-inline-stack-align': align, + '--pc-inline-stack-block-align': blockAlign, + '--pc-inline-stack-wrap': wrap ? 'wrap' : 'nowrap', + ...getResponsiveProps('inline-stack', 'gap', 'space', gap), } as React.CSSProperties; return ( -
+
{children}
); diff --git a/polaris-react/src/components/InlineStack/index.ts b/polaris-react/src/components/InlineStack/index.ts new file mode 100644 index 00000000000..1baf1341079 --- /dev/null +++ b/polaris-react/src/components/InlineStack/index.ts @@ -0,0 +1 @@ +export * from './InlineStack'; diff --git a/polaris-react/src/components/InlineStack/tests/InlineStack.test.tsx b/polaris-react/src/components/InlineStack/tests/InlineStack.test.tsx new file mode 100644 index 00000000000..03e7efdf668 --- /dev/null +++ b/polaris-react/src/components/InlineStack/tests/InlineStack.test.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import {mountWithApp} from 'tests/utilities'; + +import {InlineStack} from '../InlineStack'; + +describe('', () => { + const childText = 'Child'; + const renderChildren = () => + [0, 1].map((i) => ( +
+ {childText} {i} +
+ )); + + it('renders its children', () => { + const inlineStack = mountWithApp( + {renderChildren()}, + ); + + expect(inlineStack).toContainReactText(childText); + }); + + it('renders custom properties by default', () => { + const inlineStack = mountWithApp( + {renderChildren()}, + ); + + expect(inlineStack).toContainReactComponent('div', { + style: expect.objectContaining({ + '--pc-inline-stack-wrap': 'wrap', + }) as React.CSSProperties, + }); + }); + + it('overrides custom properties if they are passed in', () => { + const inlineStack = mountWithApp( + + {renderChildren()} + , + ); + + expect(inlineStack).toContainReactComponent('div', { + style: expect.objectContaining({ + '--pc-inline-stack-align': 'center', + '--pc-inline-stack-block-align': 'start', + '--pc-inline-stack-wrap': 'wrap', + '--pc-inline-stack-gap-xs': 'var(--p-space-10)', + }) as React.CSSProperties, + }); + }); + + it('accepts gap based on breakpoints', () => { + const inlineStack = mountWithApp( + {renderChildren()}, + ); + + expect(inlineStack).toContainReactComponent('div', { + style: expect.objectContaining({ + '--pc-inline-stack-wrap': 'wrap', + '--pc-inline-stack-gap-xs': 'var(--p-space-2)', + '--pc-inline-stack-gap-md': 'var(--p-space-8)', + }) as React.CSSProperties, + }); + }); +}); diff --git a/polaris-react/src/components/LegacyCard/components/Header/Header.tsx b/polaris-react/src/components/LegacyCard/components/Header/Header.tsx index 01fa76b733b..d808ca0ee6c 100644 --- a/polaris-react/src/components/LegacyCard/components/Header/Header.tsx +++ b/polaris-react/src/components/LegacyCard/components/Header/Header.tsx @@ -7,7 +7,7 @@ import {LegacyStack} from '../../../LegacyStack'; import {Text} from '../../../Text'; import styles from '../../LegacyCard.scss'; import {useFeatures} from '../../../../utilities/features'; -import {HorizontalStack} from '../../../HorizontalStack'; +import {InlineStack} from '../../../InlineStack'; export interface LegacyCardHeaderProps { title?: React.ReactNode; @@ -36,18 +36,18 @@ export function Header({children, title, actions}: LegacyCardHeaderProps) { // eslint-disable-next-line no-nested-ternary actionMarkup || children ? ( polarisSummerEditions2023 ? ( - {titleMarkup} - + {actionMarkup} {children} - - + + ) : ( {titleMarkup} diff --git a/polaris-react/src/components/Listbox/Listbox.stories.tsx b/polaris-react/src/components/Listbox/Listbox.stories.tsx index 72f4063c94d..c99959cde84 100644 --- a/polaris-react/src/components/Listbox/Listbox.stories.tsx +++ b/polaris-react/src/components/Listbox/Listbox.stories.tsx @@ -10,7 +10,7 @@ import { LegacyStack, AutoSelection, VerticalStack, - HorizontalStack, + InlineStack, Text, Box, } from '@shopify/polaris'; @@ -167,12 +167,12 @@ export function WithCustomOptions() { - + {label} {`${subscribers} subscribers`} - + diff --git a/polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx b/polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx index 6ec08bd6e36..49fbee8f618 100644 --- a/polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx +++ b/polaris-react/src/components/Listbox/components/TextOption/TextOption.tsx @@ -3,7 +3,7 @@ import {TickMinor} from '@shopify/polaris-icons'; import {Box} from '../../../Box'; import {Checkbox} from '../../../Checkbox'; -import {HorizontalStack} from '../../../HorizontalStack'; +import {InlineStack} from '../../../InlineStack'; import {Icon} from '../../../Icon'; import {classNames} from '../../../../utilities/css'; import {ComboboxListboxOptionContext} from '../../../../utilities/combobox/context'; @@ -40,12 +40,12 @@ export const TextOption = memo(function TextOption({ const optionMarkup = polarisSummerEditions2023 && selected ? ( - + {children} - + - - + + ) : ( <>{children} diff --git a/polaris-react/src/components/MediaCard/MediaCard.tsx b/polaris-react/src/components/MediaCard/MediaCard.tsx index 19245dbd607..b43cafa6fa0 100644 --- a/polaris-react/src/components/MediaCard/MediaCard.tsx +++ b/polaris-react/src/components/MediaCard/MediaCard.tsx @@ -13,7 +13,7 @@ import {ActionList} from '../ActionList'; import {ButtonGroup} from '../ButtonGroup'; import {LegacyStack} from '../LegacyStack'; import {Box} from '../Box'; -import {HorizontalStack} from '../HorizontalStack'; +import {InlineStack} from '../InlineStack'; import {useFeatures} from '../../utilities/features'; import {VerticalStack} from '../VerticalStack'; @@ -89,7 +89,7 @@ export function MediaCard({ ) : null; const popoverActivator = ( - + - - + + - + ); @@ -321,16 +321,16 @@ export function ActivatorAsDiv() { export function WithSuffix() { return ( - + + Bold ⌘B - + } activatorWrapper="div" > @@ -338,48 +338,48 @@ export function WithSuffix() { + Italic ⌘I - + } > + Underline ⌘U - + } > + Strikethrough ⌘S - + } > + Bold ⌘B - + } preferredPosition="below" > @@ -387,12 +387,12 @@ export function WithSuffix() { + Italic ⌘I - + } preferredPosition="below" > @@ -400,12 +400,12 @@ export function WithSuffix() { + Underline ⌘U - + } preferredPosition="below" > @@ -413,19 +413,19 @@ export function WithSuffix() { + Strikethrough ⌘S - + } preferredPosition="below" > - + ); } @@ -433,7 +433,7 @@ export function WithSuffix() { export function Alignment() { return ( - + @@ -454,7 +454,7 @@ export function Alignment() { - + ); } @@ -493,7 +493,7 @@ export function ActiveStates() { return ( - + Active false @@ -550,7 +550,7 @@ export function ActiveStates() { - + ); } diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts index 0fdb30948db..ea4046c055d 100644 --- a/polaris-react/src/index.ts +++ b/polaris-react/src/index.ts @@ -204,8 +204,8 @@ export type {IndexTableProps} from './components/IndexTable'; export {Indicator} from './components/Indicator'; export type {IndicatorProps} from './components/Indicator'; -export {HorizontalStack} from './components/HorizontalStack'; -export type {HorizontalStackProps} from './components/HorizontalStack'; +export {InlineStack} from './components/InlineStack'; +export type {InlineStackProps} from './components/InlineStack'; export {InlineCode} from './components/InlineCode'; export type {InlineCodeProps} from './components/InlineCode'; diff --git a/polaris.shopify.com/content/components/layout-and-structure/horizontal-grid.md b/polaris.shopify.com/content/components/layout-and-structure/horizontal-grid.md index 1ed944b5186..e3134d0bba8 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/horizontal-grid.md +++ b/polaris.shopify.com/content/components/layout-and-structure/horizontal-grid.md @@ -28,4 +28,4 @@ examples: ## Related components - For more control over padding and widths, [use the Box component](https://polaris.shopify.com/components/box) -- To lay out a set of smaller components horizontally, [use the HorizontalStack component](https://polaris.shopify.com/components/layout-and-structure/horizontal-stack) +- To lay out a set of smaller components horizontally, [use the InlineStack component](https://polaris.shopify.com/components/layout-and-structure/inline-stack) diff --git a/polaris.shopify.com/content/components/layout-and-structure/horizontal-stack.md b/polaris.shopify.com/content/components/layout-and-structure/inline-stack.md similarity index 76% rename from polaris.shopify.com/content/components/layout-and-structure/horizontal-stack.md rename to polaris.shopify.com/content/components/layout-and-structure/inline-stack.md index b4de310f6cc..bf3751a8949 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/horizontal-stack.md +++ b/polaris.shopify.com/content/components/layout-and-structure/inline-stack.md @@ -1,5 +1,5 @@ --- -title: Horizontal stack +title: Inline stack description: Use to display children horizontally in a row. Based on CSS Flexbox. category: Layout and structure keywords: @@ -18,19 +18,19 @@ status: value: Alpha message: This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about our [component lifecycles](/getting-started/components-lifecycle). examples: - - fileName: horizontal-stack-with-non-wrapping.tsx + - fileName: inline-stack-with-non-wrapping.tsx title: Non-wrapping description: >- The default wrapping behavior of children can be overridden using the `wrap` prop. - - fileName: horizontal-stack-with-gap.tsx + - fileName: inline-stack-with-gap.tsx title: Gap description: >- Control the horizontal and vertical space between children using the `gap` prop. The `gap` prop supports responsive spacing with the [Breakpoints tokens](https://polaris.shopify.com/tokens/breakpoints). - - fileName: horizontal-stack-with-block-align.tsx + - fileName: inline-stack-with-block-align.tsx title: Block align description: >- Control the vertical alignment of children using the `blockAlign` prop. - - fileName: horizontal-stack-with-align.tsx + - fileName: inline-stack-with-align.tsx title: Align description: >- Control the horizontal alignment of children using the `align` prop. @@ -43,4 +43,4 @@ examples: ## Related resources -- HorizontalStack props are named following the convention of CSS logical properties, such as 'padding-inline-start' and 'padding-block-start'. Learn more about [CSS logicial properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties). +- InlineStack props are named following the convention of CSS logical properties, such as 'padding-inline-start' and 'padding-block-start'. Learn more about [CSS logicial properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties). diff --git a/polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md b/polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md index 7f596f293a7..e7b60d92134 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md +++ b/polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md @@ -40,7 +40,7 @@ Stacks should: ## Related components -- To display elements horizontally, [use the HorizontalStack component](https://polaris.shopify.com/components/layout-and-structure/horizontal-stack) +- To display elements horizontally, [use the InlineStack component](https://polaris.shopify.com/components/layout-and-structure/inline-stack) ## Related resources diff --git a/polaris.shopify.com/content/design/layout.md b/polaris.shopify.com/content/design/layout.md index aa042bf78cb..dee65d9e154 100644 --- a/polaris.shopify.com/content/design/layout.md +++ b/polaris.shopify.com/content/design/layout.md @@ -44,7 +44,7 @@ Layout components are intended to solve about 80% of layout use cases. But they
-- **Layout components are single purpose, composable, and flexible.** Single-purpose components allow us to separate concerns and predict behavior when the design system changes. A known tradeoff can be extra elements in the markup.

Combine these components to build any layout. Their flexibility means different combinations can achieve the same visual result. ![Card, HorizontalGrid, Divider, and HorizontalStack components assembled together to create admin UI element](/images/design/layout/single-purpose-composible-flexible@2x.png) +- **Layout components are single purpose, composable, and flexible.** Single-purpose components allow us to separate concerns and predict behavior when the design system changes. A known tradeoff can be extra elements in the markup.

Combine these components to build any layout. Their flexibility means different combinations can achieve the same visual result. ![Card, HorizontalGrid, Divider, and InlineStack components assembled together to create admin UI element](/images/design/layout/single-purpose-composible-flexible@2x.png) - **Layout components shouldn’t affect anything outside of their borders.** They should only impact components rendered inside of them. The exception is the [Bleed](/components/layout-and-structure/bleed) component. ![Admin card with whitespace between each UI element](/images/design/layout/outside-borders@2x.png) - **Layout components have a default spacing of 0.** There isn’t a perfect default, so add spacing with intention. For more information, refer to the [Space](/design/space) guide. ![Admin card with the padding around and between the elements increased](/images/design/layout/default-spacing@2x.png) - **Layout component behaviors rely on Polaris tokens.** Behaviors like spacing, color, and breakpoints are configured via component prop APIs. Each prop expects a specific value that maps to a [Polaris design token](/tokens/color). ![Admin UI element with color and spacing design tokens called out](/images/design/layout/tokens@2x.png) diff --git a/polaris.shopify.com/content/new-design-language/index.md b/polaris.shopify.com/content/new-design-language/index.md index af43bc73d08..a8f4b751037 100644 --- a/polaris.shopify.com/content/new-design-language/index.md +++ b/polaris.shopify.com/content/new-design-language/index.md @@ -152,7 +152,7 @@ You can resolve this in a number of ways: - spacing='loose' + spacing={undefined} ``` - or for [`HorizontalStack`](https://polaris.shopify.com/components/layout-and-structure/horizontal-stack) + or for [`InlineStack`](https://polaris.shopify.com/components/layout-and-structure/inline-stack) ```diff - gap='5' + gap='4' diff --git a/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md b/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md index 7d53b267ac4..2d5575c8688 100644 --- a/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md +++ b/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md @@ -32,7 +32,7 @@ This enables merchants to select a date range. ## Using this pattern -This pattern uses the [`VerticalStack`](/components/layout-and-structure/vertical-stack), [`Box`](/components/layout-and-structure/box), [`Button`](/components/actions/button), [`HorizontalGrid`](/components/layout-and-structure/horizontal-grid), [`DatePicker`](/components/selection-and-input/date-picker), [`HorizontalStack`](/components/layout-and-structure/horizontal-stack), [`OptionList`](/components/lists/option-list), [`Popover`](/components/overlays/popover) and [`TextField`](/components/selection-and-input/text-field) components. +This pattern uses the [`VerticalStack`](/components/layout-and-structure/vertical-stack), [`Box`](/components/layout-and-structure/box), [`Button`](/components/actions/button), [`HorizontalGrid`](/components/layout-and-structure/horizontal-grid), [`DatePicker`](/components/selection-and-input/date-picker), [`InlineStack`](/components/layout-and-structure/inline-stack), [`OptionList`](/components/lists/option-list), [`Popover`](/components/overlays/popover) and [`TextField`](/components/selection-and-input/text-field) components. ```javascript {"type":"previewContext","for":"example"} @@ -324,7 +324,7 @@ function DateRangePicker() { - +
- +
- + - + diff --git a/polaris.shopify.com/next.config.js b/polaris.shopify.com/next.config.js index 062d982ddcb..2c8ca822b88 100644 --- a/polaris.shopify.com/next.config.js +++ b/polaris.shopify.com/next.config.js @@ -397,11 +397,12 @@ const layoutAndStructure = [ destination: '/components/layout-and-structure/grid', permanent: false, }, - { - source: '/components/inline', - destination: '/components/layout-and-structure/horizontal-stack', - permanent: false, - }, + // TODO: Re-enable this redirect once the new inline stack component is released + // { + // source: '/components/layout-and-structure/horizontal-stack', + // destination: '/components/layout-and-structure/inline-stack', + // permanent: false, + // }, { source: '/components/structure/layout', destination: '/components/layout-and-structure/layout', diff --git a/polaris.shopify.com/pages/examples/bleed-horizontal.tsx b/polaris.shopify.com/pages/examples/bleed-horizontal.tsx index 9878bf3c439..a8123cb59b9 100644 --- a/polaris.shopify.com/pages/examples/bleed-horizontal.tsx +++ b/polaris.shopify.com/pages/examples/bleed-horizontal.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {Bleed, Box, Text, HorizontalStack} from '@shopify/polaris'; +import {Bleed, Box, Text, InlineStack} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; @@ -28,7 +28,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { width: width, }} > - +
{ {label}
- +
); }; diff --git a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx index 2f72685adf1..142af46a514 100644 --- a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx +++ b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx @@ -1,11 +1,5 @@ import React from 'react'; -import { - VerticalStack, - Bleed, - Box, - Text, - HorizontalStack, -} from '@shopify/polaris'; +import {VerticalStack, Bleed, Box, Text, InlineStack} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; @@ -66,7 +60,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { width: width, }} > - +
{ {label}
- +
); }; diff --git a/polaris.shopify.com/pages/examples/bleed-vertical.tsx b/polaris.shopify.com/pages/examples/bleed-vertical.tsx index 15229339ffb..83ecea7e61a 100644 --- a/polaris.shopify.com/pages/examples/bleed-vertical.tsx +++ b/polaris.shopify.com/pages/examples/bleed-vertical.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {Bleed, Box, Text, HorizontalStack} from '@shopify/polaris'; +import {Bleed, Box, Text, InlineStack} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; @@ -28,7 +28,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { width: width, }} > - +
{ {label}
- +
); }; diff --git a/polaris.shopify.com/pages/examples/box-with-padding.tsx b/polaris.shopify.com/pages/examples/box-with-padding.tsx index 186e8c3e676..57c8cbece52 100644 --- a/polaris.shopify.com/pages/examples/box-with-padding.tsx +++ b/polaris.shopify.com/pages/examples/box-with-padding.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {VerticalStack, Box, Text, HorizontalStack} from '@shopify/polaris'; +import {VerticalStack, Box, Text, InlineStack} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; @@ -16,7 +16,7 @@ function BoxWithPaddingExample() { - +
@@ -27,8 +27,8 @@ function BoxWithPaddingExample() {
- - + +
@@ -39,7 +39,7 @@ function BoxWithPaddingExample() {
- + ); } @@ -63,7 +63,7 @@ const Placeholder = ({ width: width, }} > - +
- + ); }; diff --git a/polaris.shopify.com/pages/examples/horizontal-grid-with-fixed-widths.tsx b/polaris.shopify.com/pages/examples/horizontal-grid-with-fixed-widths.tsx index d63e47e9699..38b2c9e4f1e 100644 --- a/polaris.shopify.com/pages/examples/horizontal-grid-with-fixed-widths.tsx +++ b/polaris.shopify.com/pages/examples/horizontal-grid-with-fixed-widths.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {HorizontalGrid, Text, HorizontalStack} from '@shopify/polaris'; +import {HorizontalGrid, Text, InlineStack} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; @@ -30,7 +30,7 @@ const Placeholder = ({ : 'none', }} > - +
- + ); }; diff --git a/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx b/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx index 5fad1b12cd1..9f1a8ba62f4 100644 --- a/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx +++ b/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx @@ -10,7 +10,7 @@ import { RangeSlider, Badge, VerticalStack, - HorizontalStack, + InlineStack, } from '@shopify/polaris'; import type {IndexFiltersProps, TabProps} from '@shopify/polaris'; import {useState, useCallback} from 'react'; @@ -307,18 +307,18 @@ function IndexTableWithViewsSearchFilterSorting() { {order} • {date} - + {customer} {total} - - + + {paymentStatus} {fulfillmentStatus} - + diff --git a/polaris.shopify.com/pages/examples/index-table-small-screen.tsx b/polaris.shopify.com/pages/examples/index-table-small-screen.tsx index 5ddfb188b59..83550471681 100644 --- a/polaris.shopify.com/pages/examples/index-table-small-screen.tsx +++ b/polaris.shopify.com/pages/examples/index-table-small-screen.tsx @@ -3,7 +3,7 @@ import { LegacyCard, useIndexResourceState, Text, - HorizontalStack, + InlineStack, Badge, VerticalStack, } from '@shopify/polaris'; @@ -64,18 +64,18 @@ function SimpleSmallScreenIndexTableExample() { {order} • {date} - + {customer} {total} - - + + {paymentStatus} {fulfillmentStatus} - + diff --git a/polaris.shopify.com/pages/examples/horizontal-stack-with-align.tsx b/polaris.shopify.com/pages/examples/inline-stack-with-align.tsx similarity index 89% rename from polaris.shopify.com/pages/examples/horizontal-stack-with-align.tsx rename to polaris.shopify.com/pages/examples/inline-stack-with-align.tsx index 2384a79d3e5..62f8244e157 100644 --- a/polaris.shopify.com/pages/examples/horizontal-stack-with-align.tsx +++ b/polaris.shopify.com/pages/examples/inline-stack-with-align.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { VerticalStack, - HorizontalStack, + InlineStack, Text, Page, Divider, @@ -13,7 +13,7 @@ function InlineWithAlignExample() { return ( - + @@ -21,9 +21,9 @@ function InlineWithAlignExample() { - + - + @@ -31,9 +31,9 @@ function InlineWithAlignExample() { - + - + @@ -41,7 +41,7 @@ function InlineWithAlignExample() { - + ); @@ -69,7 +69,7 @@ const Placeholder = ({ : 'none', }} > - +
- + ); }; diff --git a/polaris.shopify.com/pages/examples/horizontal-stack-with-block-align.tsx b/polaris.shopify.com/pages/examples/inline-stack-with-block-align.tsx similarity index 85% rename from polaris.shopify.com/pages/examples/horizontal-stack-with-block-align.tsx rename to polaris.shopify.com/pages/examples/inline-stack-with-block-align.tsx index eebecf07872..cd966bb675b 100644 --- a/polaris.shopify.com/pages/examples/horizontal-stack-with-block-align.tsx +++ b/polaris.shopify.com/pages/examples/inline-stack-with-block-align.tsx @@ -1,55 +1,55 @@ import React from 'react'; -import {HorizontalStack, Text, VerticalStack, Divider} from '@shopify/polaris'; +import {InlineStack, Text, VerticalStack, Divider} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function InlineWithBlockAlignExample() { return ( - + - + - + - + - + - + - + - + - + - + ); } @@ -75,7 +75,7 @@ const Placeholder = ({ : 'none', }} > - +
- + ); }; diff --git a/polaris.shopify.com/pages/examples/horizontal-stack-with-gap.tsx b/polaris.shopify.com/pages/examples/inline-stack-with-gap.tsx similarity index 82% rename from polaris.shopify.com/pages/examples/horizontal-stack-with-gap.tsx rename to polaris.shopify.com/pages/examples/inline-stack-with-gap.tsx index efb8c17ce28..b2466068f81 100644 --- a/polaris.shopify.com/pages/examples/horizontal-stack-with-gap.tsx +++ b/polaris.shopify.com/pages/examples/inline-stack-with-gap.tsx @@ -1,26 +1,26 @@ import React from 'react'; -import {HorizontalStack, VerticalStack} from '@shopify/polaris'; +import {InlineStack, VerticalStack} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function InlineWithGapExample() { return ( - + - + - + - + - + - + ); diff --git a/polaris.shopify.com/pages/examples/horizontal-stack-with-non-wrapping.tsx b/polaris.shopify.com/pages/examples/inline-stack-with-non-wrapping.tsx similarity index 89% rename from polaris.shopify.com/pages/examples/horizontal-stack-with-non-wrapping.tsx rename to polaris.shopify.com/pages/examples/inline-stack-with-non-wrapping.tsx index 3e38421f6c0..60392b6194b 100644 --- a/polaris.shopify.com/pages/examples/horizontal-stack-with-non-wrapping.tsx +++ b/polaris.shopify.com/pages/examples/inline-stack-with-non-wrapping.tsx @@ -1,18 +1,18 @@ import React from 'react'; -import {HorizontalStack} from '@shopify/polaris'; +import {InlineStack} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function InlineWithNonWrappingExample() { return ( - + - + ); } diff --git a/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx b/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx index 0482f5a5fb9..4f6b5776dd9 100644 --- a/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx +++ b/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx @@ -1,6 +1,6 @@ import { Text, - HorizontalStack, + InlineStack, Box, Card, Button, @@ -50,19 +50,19 @@ export function WithPrimitiveComponents() { ); const settingTitle = title ? ( - - + + - + {settingStatusMarkup} {helpLink} - - - + + + ) : null; const actionMarkup = ( @@ -79,7 +79,7 @@ export function WithPrimitiveComponents() { const headerMarkup = ( - - {actionMarkup} + {actionMarkup} ) : null} - + ); @@ -102,7 +102,7 @@ export function WithPrimitiveComponents() { {mdDown ? ( - {actionMarkup} + {actionMarkup} ) : null} diff --git a/polaris.shopify.com/pages/examples/tooltip-with-suffix.tsx b/polaris.shopify.com/pages/examples/tooltip-with-suffix.tsx index f79ed059ccb..2aebc9cba65 100644 --- a/polaris.shopify.com/pages/examples/tooltip-with-suffix.tsx +++ b/polaris.shopify.com/pages/examples/tooltip-with-suffix.tsx @@ -1,4 +1,4 @@ -import {Tooltip, Button, HorizontalStack, Text} from '@shopify/polaris'; +import {Tooltip, Button, InlineStack, Text} from '@shopify/polaris'; import React from 'react'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; @@ -7,12 +7,12 @@ function TooltipExample() {
+ Bold ⌘B - + } > diff --git a/polaris.shopify.com/pages/examples/vertical-stack-with-align.tsx b/polaris.shopify.com/pages/examples/vertical-stack-with-align.tsx index 1dc9ac6f79a..6f32899e7a8 100644 --- a/polaris.shopify.com/pages/examples/vertical-stack-with-align.tsx +++ b/polaris.shopify.com/pages/examples/vertical-stack-with-align.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {VerticalStack, HorizontalStack, Text, Divider} from '@shopify/polaris'; +import {VerticalStack, InlineStack, Text, Divider} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; @@ -53,7 +53,7 @@ const Placeholder = ({ : 'none', }} > - +
- +
); }; diff --git a/polaris.shopify.com/pages/examples/vertical-stack-with-inline-align.tsx b/polaris.shopify.com/pages/examples/vertical-stack-with-inline-align.tsx index fe342a89b3b..39d73128710 100644 --- a/polaris.shopify.com/pages/examples/vertical-stack-with-inline-align.tsx +++ b/polaris.shopify.com/pages/examples/vertical-stack-with-inline-align.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { VerticalStack, Page, - HorizontalStack, + InlineStack, Text, Divider, } from '@shopify/polaris'; @@ -53,7 +53,7 @@ const Placeholder = ({ : 'none', }} > - +
- + ); }; diff --git a/polaris.shopify.com/public/images/components/layout-and-structure/horizontal-stack.png b/polaris.shopify.com/public/images/components/layout-and-structure/inline-stack.png similarity index 100% rename from polaris.shopify.com/public/images/components/layout-and-structure/horizontal-stack.png rename to polaris.shopify.com/public/images/components/layout-and-structure/inline-stack.png diff --git a/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx b/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx index fdb8a25d82f..e15502bb7ff 100644 --- a/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx +++ b/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx @@ -1,4 +1,4 @@ -import {VerticalStack, Icon, HorizontalStack, Text} from '@shopify/polaris'; +import {VerticalStack, Icon, InlineStack, Text} from '@shopify/polaris'; import {InfoMinor} from '@shopify/polaris-icons'; import styles from './TipBanner.module.scss'; @@ -11,14 +11,14 @@ function TipBanner({title, children}: Props) { return (
- +
{title} - + {children}