From b085776fe74459df24594ac65b143761933ef840 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 22 Feb 2023 16:51:49 +1100 Subject: [PATCH 1/9] Right align IndexTable examples and add best practices documentation --- .../content/components/tables/index-table.md | 1 + .../pages/examples/index-table-default.tsx | 12 ++++++++++-- .../pages/examples/index-table-flush.tsx | 12 ++++++++++-- ...x-table-small-screen-with-all-of-its-elements.tsx | 4 ++-- .../pages/examples/index-table-small-screen.tsx | 8 ++++++-- .../index-table-with-all-of-its-elements.tsx | 12 ++++++++++-- ...-with-bulk-actions-and-selection-across-pages.tsx | 12 ++++++++++-- .../pages/examples/index-table-with-bulk-actions.tsx | 12 ++++++++++-- .../index-table-with-clickable-button-column.tsx | 12 ++++++++++-- .../pages/examples/index-table-with-empty-state.tsx | 12 ++++++++++-- .../pages/examples/index-table-with-filtering.tsx | 12 ++++++++++-- .../examples/index-table-with-loading-state.tsx | 12 ++++++++++-- ...dex-table-with-multiple-promoted-bulk-actions.tsx | 12 ++++++++++-- .../index-table-with-row-navigation-link.tsx | 12 ++++++++++-- .../pages/examples/index-table-with-row-status.tsx | 12 ++++++++++-- .../examples/index-table-with-sticky-last-column.tsx | 12 ++++++++++-- .../examples/index-table-without-checkboxes.tsx | 12 ++++++++++-- 17 files changed, 149 insertions(+), 32 deletions(-) diff --git a/polaris.shopify.com/content/components/tables/index-table.md b/polaris.shopify.com/content/components/tables/index-table.md index 4fbb04140e4..3271818b482 100644 --- a/polaris.shopify.com/content/components/tables/index-table.md +++ b/polaris.shopify.com/content/components/tables/index-table.md @@ -131,6 +131,7 @@ Index tables should: - Support [filtering](https://polaris.shopify.com/components/filters) if the list can be long. - Paginate when the current list contains more than 50 items. - Use the [skeleton page](https://polaris.shopify.com/components/skeleton-page) component on initial page load for the rest of the page if the loading prop is true and items are processing. +- Right align numerical cells with the [Text](https://polaris.shopify.com/components/text) component Index tables can optionally: diff --git a/polaris.shopify.com/pages/examples/index-table-default.tsx b/polaris.shopify.com/pages/examples/index-table-default.tsx index 3fe7627a144..f64b994e2dc 100644 --- a/polaris.shopify.com/pages/examples/index-table-default.tsx +++ b/polaris.shopify.com/pages/examples/index-table-default.tsx @@ -43,8 +43,16 @@ function SimpleIndexTableExample() { {location} - {orders} - {amountSpent} + + + {orders} + + + + + {amountSpent} + + ), ); diff --git a/polaris.shopify.com/pages/examples/index-table-flush.tsx b/polaris.shopify.com/pages/examples/index-table-flush.tsx index 87a35b476ee..abd2e646a8c 100644 --- a/polaris.shopify.com/pages/examples/index-table-flush.tsx +++ b/polaris.shopify.com/pages/examples/index-table-flush.tsx @@ -43,8 +43,16 @@ function SimpleFlushIndexTableExample() { {location} - {orders} - {amountSpent} + + + {orders} + + + + + {amountSpent} + + ), ); diff --git a/polaris.shopify.com/pages/examples/index-table-small-screen-with-all-of-its-elements.tsx b/polaris.shopify.com/pages/examples/index-table-small-screen-with-all-of-its-elements.tsx index fcc62d2d723..99f2710ad34 100644 --- a/polaris.shopify.com/pages/examples/index-table-small-screen-with-all-of-its-elements.tsx +++ b/polaris.shopify.com/pages/examples/index-table-small-screen-with-all-of-its-elements.tsx @@ -119,8 +119,8 @@ function SmallScreenIndexTableWithAllElementsExample() { {name}

{location}

-

{orders}

-

{amountSpent}

+ {orders} + {amountSpent} ), 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 c2bded0d8a3..0cea0bd4359 100644 --- a/polaris.shopify.com/pages/examples/index-table-small-screen.tsx +++ b/polaris.shopify.com/pages/examples/index-table-small-screen.tsx @@ -42,8 +42,12 @@ function SimpleSmallScreenIndexTableExample() { {name}

{location}

-

{orders}

-

{amountSpent}

+ + {orders} + + + {amountSpent} + ), diff --git a/polaris.shopify.com/pages/examples/index-table-with-all-of-its-elements.tsx b/polaris.shopify.com/pages/examples/index-table-with-all-of-its-elements.tsx index 26f17c36926..610c01a6550 100644 --- a/polaris.shopify.com/pages/examples/index-table-with-all-of-its-elements.tsx +++ b/polaris.shopify.com/pages/examples/index-table-with-all-of-its-elements.tsx @@ -120,8 +120,16 @@ function IndexTableWithAllElementsExample() { {location} - {orders} - {amountSpent} + + + {orders} + + + + + {amountSpent} + + ), ); diff --git a/polaris.shopify.com/pages/examples/index-table-with-bulk-actions-and-selection-across-pages.tsx b/polaris.shopify.com/pages/examples/index-table-with-bulk-actions-and-selection-across-pages.tsx index c5dd4e46901..1bd33d5721a 100644 --- a/polaris.shopify.com/pages/examples/index-table-with-bulk-actions-and-selection-across-pages.tsx +++ b/polaris.shopify.com/pages/examples/index-table-with-bulk-actions-and-selection-across-pages.tsx @@ -64,8 +64,16 @@ function IndexTableWithBulkActionsAndSelectionAcrossPagesExample() { {location} - {orders} - {amountSpent} + + + {orders} + + + + + {amountSpent} + + ), ); diff --git a/polaris.shopify.com/pages/examples/index-table-with-bulk-actions.tsx b/polaris.shopify.com/pages/examples/index-table-with-bulk-actions.tsx index 25723d252e3..a3654c33923 100644 --- a/polaris.shopify.com/pages/examples/index-table-with-bulk-actions.tsx +++ b/polaris.shopify.com/pages/examples/index-table-with-bulk-actions.tsx @@ -64,8 +64,16 @@ function IndexTableWithBulkActionsExample() { {location} - {orders} - {amountSpent} + + + {orders} + + + + + {amountSpent} + + ), ); diff --git a/polaris.shopify.com/pages/examples/index-table-with-clickable-button-column.tsx b/polaris.shopify.com/pages/examples/index-table-with-clickable-button-column.tsx index 450351b74b9..a5b65737c57 100644 --- a/polaris.shopify.com/pages/examples/index-table-with-clickable-button-column.tsx +++ b/polaris.shopify.com/pages/examples/index-table-with-clickable-button-column.tsx @@ -55,8 +55,16 @@ function ClickThroughButtonIndexTableExample() { {location} - {orders} - {amountSpent} + + + {orders} + + + + + {amountSpent} + + ), ); diff --git a/polaris.shopify.com/pages/examples/index-table-with-empty-state.tsx b/polaris.shopify.com/pages/examples/index-table-with-empty-state.tsx index 3c79131a745..82cadb32641 100644 --- a/polaris.shopify.com/pages/examples/index-table-with-empty-state.tsx +++ b/polaris.shopify.com/pages/examples/index-table-with-empty-state.tsx @@ -40,8 +40,16 @@ function IndexTableWithCustomEmptyStateExample() { {location} - {orders} - {amountSpent} + + + {orders} + + + + + {amountSpent} + + ), ); diff --git a/polaris.shopify.com/pages/examples/index-table-with-filtering.tsx b/polaris.shopify.com/pages/examples/index-table-with-filtering.tsx index 884b79b4c24..a4af0dcffd2 100644 --- a/polaris.shopify.com/pages/examples/index-table-with-filtering.tsx +++ b/polaris.shopify.com/pages/examples/index-table-with-filtering.tsx @@ -99,8 +99,16 @@ function IndexTableWithFilteringExample() { {location} - {orders} - {amountSpent} + + + {orders} + + + + + {amountSpent} + + ), ); diff --git a/polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx b/polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx index f6eb9b3dd77..cdac3404d99 100644 --- a/polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx +++ b/polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx @@ -43,8 +43,16 @@ function IndexTableWithLoadingExample() { {location} - {orders} - {amountSpent} + + + {orders} + + + + + {amountSpent} + + ), ); diff --git a/polaris.shopify.com/pages/examples/index-table-with-multiple-promoted-bulk-actions.tsx b/polaris.shopify.com/pages/examples/index-table-with-multiple-promoted-bulk-actions.tsx index 9face1591d6..1e811034895 100644 --- a/polaris.shopify.com/pages/examples/index-table-with-multiple-promoted-bulk-actions.tsx +++ b/polaris.shopify.com/pages/examples/index-table-with-multiple-promoted-bulk-actions.tsx @@ -90,8 +90,16 @@ function IndexTableWithMultiplePromotedBulkActionsExample() { {location} - {orders} - {amountSpent} + + + {orders} + + + + + {amountSpent} + + ), ); diff --git a/polaris.shopify.com/pages/examples/index-table-with-row-navigation-link.tsx b/polaris.shopify.com/pages/examples/index-table-with-row-navigation-link.tsx index 70e21aa2b19..29ba5c5d3be 100644 --- a/polaris.shopify.com/pages/examples/index-table-with-row-navigation-link.tsx +++ b/polaris.shopify.com/pages/examples/index-table-with-row-navigation-link.tsx @@ -55,8 +55,16 @@ function ClickThroughLinkIndexTableExample() { {location} - {orders} - {amountSpent} + + + {orders} + + + + + {amountSpent} + + ), ); diff --git a/polaris.shopify.com/pages/examples/index-table-with-row-status.tsx b/polaris.shopify.com/pages/examples/index-table-with-row-status.tsx index d243f53f2c3..c7790209d92 100644 --- a/polaris.shopify.com/pages/examples/index-table-with-row-status.tsx +++ b/polaris.shopify.com/pages/examples/index-table-with-row-status.tsx @@ -46,8 +46,16 @@ function IndexTableWithRowStatusExample() { {location} - {orders} - {amountSpent} + + + {orders} + + + + + {amountSpent} + + ), ); diff --git a/polaris.shopify.com/pages/examples/index-table-with-sticky-last-column.tsx b/polaris.shopify.com/pages/examples/index-table-with-sticky-last-column.tsx index c3a849ca357..69bec12efb0 100644 --- a/polaris.shopify.com/pages/examples/index-table-with-sticky-last-column.tsx +++ b/polaris.shopify.com/pages/examples/index-table-with-sticky-last-column.tsx @@ -43,8 +43,16 @@ function StickyLastCellIndexTableExample() { {location} - {orders} - {amountSpent} + + + {orders} + + + + + {amountSpent} + + ), ); diff --git a/polaris.shopify.com/pages/examples/index-table-without-checkboxes.tsx b/polaris.shopify.com/pages/examples/index-table-without-checkboxes.tsx index 83eddd4c23e..03ebc68610c 100644 --- a/polaris.shopify.com/pages/examples/index-table-without-checkboxes.tsx +++ b/polaris.shopify.com/pages/examples/index-table-without-checkboxes.tsx @@ -35,8 +35,16 @@ function IndexTableWithoutCheckboxesExample() { {location} - {orders} - {amountSpent} + + + {orders} + + + + + {amountSpent} + + ), ); From 40ce6dbaca2b1b16f2c4e045e34d1414f75adf03 Mon Sep 17 00:00:00 2001 From: Rick Caplan Date: Thu, 23 Feb 2023 00:35:23 +0000 Subject: [PATCH 2/9] [Text] adds optional monospace prop --- .changeset/modern-apples-sing.md | 5 +++++ polaris-react/src/components/Text/Text.scss | 4 ++++ polaris-react/src/components/Text/Text.tsx | 4 ++++ 3 files changed, 13 insertions(+) create mode 100644 .changeset/modern-apples-sing.md diff --git a/.changeset/modern-apples-sing.md b/.changeset/modern-apples-sing.md new file mode 100644 index 00000000000..bca3141baa2 --- /dev/null +++ b/.changeset/modern-apples-sing.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +[Text] adds optional monospace prop to render characters with consistent height and width diff --git a/polaris-react/src/components/Text/Text.scss b/polaris-react/src/components/Text/Text.scss index 4e2d40e4178..fddf5e585d7 100644 --- a/polaris-react/src/components/Text/Text.scss +++ b/polaris-react/src/components/Text/Text.scss @@ -156,3 +156,7 @@ .break { overflow-wrap: break-word; } + +.monospace { + font-variant-numeric: tabular-nums lining-nums; +} diff --git a/polaris-react/src/components/Text/Text.tsx b/polaris-react/src/components/Text/Text.tsx index 88beea49ddc..589bfe7c6f3 100644 --- a/polaris-react/src/components/Text/Text.tsx +++ b/polaris-react/src/components/Text/Text.tsx @@ -63,6 +63,8 @@ export interface TextProps { fontWeight?: FontWeight; /** HTML id attribute */ id?: string; + /** Render OpenType font characters with consistent height and width */ + monospace?: boolean; /** Truncate text overflow with ellipsis */ truncate?: boolean; /** Typographic style of text */ @@ -79,6 +81,7 @@ export const Text = ({ color, fontWeight, id, + monospace = false, truncate = false, variant, visuallyHidden = false, @@ -93,6 +96,7 @@ export const Text = ({ alignment && styles[alignment], breakWord && styles.break, color && styles[color], + monospace && styles.monospace, truncate && styles.truncate, visuallyHidden && styles.visuallyHidden, ); From a65d1bd3caf6d8c4a2714e32810d5841428487c7 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Thu, 23 Feb 2023 11:51:06 +1100 Subject: [PATCH 3/9] Update polaris.shopify.com/content/components/tables/index-table.md --- polaris.shopify.com/content/components/tables/index-table.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris.shopify.com/content/components/tables/index-table.md b/polaris.shopify.com/content/components/tables/index-table.md index 3271818b482..3e0516708d4 100644 --- a/polaris.shopify.com/content/components/tables/index-table.md +++ b/polaris.shopify.com/content/components/tables/index-table.md @@ -131,7 +131,7 @@ Index tables should: - Support [filtering](https://polaris.shopify.com/components/filters) if the list can be long. - Paginate when the current list contains more than 50 items. - Use the [skeleton page](https://polaris.shopify.com/components/skeleton-page) component on initial page load for the rest of the page if the loading prop is true and items are processing. -- Right align numerical cells with the [Text](https://polaris.shopify.com/components/text) component +- Right align and monospace numerical cells with the [Text](https://polaris.shopify.com/components/text) component Index tables can optionally: From ed347bc0496bf5e243b544e4c7a451e0a1c0fc9a Mon Sep 17 00:00:00 2001 From: Alex Page Date: Tue, 28 Feb 2023 12:41:08 +1100 Subject: [PATCH 4/9] index table right align --- .changeset/selfish-pugs-exist.md | 5 + .changeset/sharp-rules-dress.md | 5 + .changeset/swift-bats-tease.md | 5 + .gitignore | 1 + patches/playroom+0.28.0.patch | 179 +- polaris-cli/CHANGELOG.md | 16 + polaris-cli/package.json | 4 +- polaris-for-vscode/package.json | 2 +- polaris-icons/icons/SortAscendingMajor.svg | 2 +- polaris-icons/icons/SortDescendingMajor.svg | 2 +- polaris-migrator/CHANGELOG.md | 19 + polaris-migrator/package.json | 8 +- ...11-react-update-page-breadcrumbs.input.tsx | 28 + ...1-react-update-page-breadcrumbs.output.tsx | 40 + .../v11-react-update-page-breadcrumbs.test.ts | 11 + .../v11-react-update-page-breadcrumbs.ts | 101 + polaris-react/CHANGELOG.md | 36 + polaris-react/README.md | 10 +- polaris-react/locales/cs.json | 10 +- polaris-react/locales/da.json | 10 +- polaris-react/locales/de.json | 10 +- polaris-react/locales/en.json | 10 +- polaris-react/locales/es.json | 10 +- polaris-react/locales/fi.json | 10 +- polaris-react/locales/fr.json | 10 +- polaris-react/locales/it.json | 10 +- polaris-react/locales/ja.json | 10 +- polaris-react/locales/ko.json | 4 +- polaris-react/locales/nb.json | 10 +- polaris-react/locales/nl.json | 10 +- polaris-react/locales/pl.json | 10 +- polaris-react/locales/pt-BR.json | 10 +- polaris-react/locales/pt-PT.json | 10 +- polaris-react/locales/sv.json | 10 +- polaris-react/locales/tr.json | 10 +- polaris-react/locales/vi.json | 10 +- polaris-react/locales/zh-CN.json | 6 +- polaris-react/locales/zh-TW.json | 10 +- polaris-react/package.json | 4 +- polaris-react/playground/DetailsPage.tsx | 27 +- .../ActionList/components/Item/Item.tsx | 2 +- .../AlphaCard/AlphaCard.stories.tsx | 2 +- .../AppProvider/AppProvider.stories.tsx | 10 +- .../src/components/Banner/Banner.scss | 2 +- .../src/components/Banner/Banner.stories.tsx | 8 +- polaris-react/src/components/Bleed/Bleed.tsx | 6 +- .../src/components/Bleed/tests/Bleed.test.tsx | 16 - .../components/Breadcrumbs/Breadcrumbs.tsx | 22 +- .../components/CalloutCard/CalloutCard.scss | 2 +- .../components/CalloutCard/CalloutCard.tsx | 11 +- polaris-react/src/components/Card/Card.scss | 2 +- polaris-react/src/components/Card/Card.tsx | 15 + .../Card/components/Header/Header.tsx | 8 + .../components/Header/tests/Header.test.tsx | 1 + .../Card/components/Section/Section.tsx | 8 + .../components/Section/tests/Section.test.tsx | 1 + .../Card/components/Subsection/Subsection.tsx | 8 + .../Subsection/tests/Subsection.test.tsx | 1 + .../src/components/Card/tests/Card.test.tsx | 2 + .../CheckableButton/CheckableButton.scss | 9 +- .../src/components/Checkbox/Checkbox.scss | 5 +- .../src/components/Choice/Choice.scss | 4 +- .../src/components/ChoiceList/ChoiceList.scss | 2 +- .../src/components/ChoiceList/ChoiceList.tsx | 5 +- .../Collapsible/Collapsible.stories.tsx | 6 +- .../src/components/Columns/Columns.scss | 28 +- .../components/Columns/Columns.stories.tsx | 23 + .../src/components/Columns/Columns.tsx | 73 +- .../components/Columns/tests/Columns.test.tsx | 39 +- .../DataTable/DataTable.stories.tsx | 48 +- .../components/DropZone/DropZone.stories.tsx | 26 +- .../EmptyState/EmptyState.stories.tsx | 14 +- .../components/Filters/Filters.stories.tsx | 42 +- .../ConnectedFilterControl.scss | 3 +- .../src/components/Frame/Frame.stories.tsx | 18 +- .../Frame/components/Toast/Toast.tsx | 2 +- .../src/components/Grid/Grid.stories.tsx | 34 +- polaris-react/src/components/Grid/Grid.tsx | 20 +- .../components/Grid/components/Cell/Cell.tsx | 2 +- .../Grid/components/Cell/tests/Cell.test.tsx | 1 + .../src/components/Grid/tests/Grid.test.tsx | 1 + .../IndexTable/IndexTable.stories.tsx | 693 +- .../src/components/Inline/Inline.tsx | 3 +- .../components/Inline/tests/Inline.test.tsx | 45 + .../src/components/Layout/Layout.stories.tsx | 82 +- .../AnnotatedSection/AnnotatedSection.tsx | 1 + .../components/Layout/tests/Layout.test.tsx | 7 +- .../src/components/LegacyCard/LegacyCard.scss | 2 +- .../Subsection/tests/Subsection.test.tsx | 2 +- .../components/Listbox/Listbox.stories.tsx | 6 +- .../src/components/MediaCard/MediaCard.tsx | 10 +- polaris-react/src/components/Modal/Modal.tsx | 2 +- .../Modal/components/Footer/Footer.tsx | 4 +- .../Modal/components/Header/Header.tsx | 6 +- .../OptionList/OptionList.stories.tsx | 14 +- .../src/components/OptionList/OptionList.tsx | 2 +- .../components/Checkbox/Checkbox.scss | 5 +- .../OptionList/components/Option/Option.scss | 9 +- .../src/components/Page/Page.stories.tsx | 57 +- polaris-react/src/components/Page/Page.tsx | 3 +- .../Page/components/Header/Header.tsx | 35 +- .../src/components/Page/tests/Page.test.tsx | 29 +- .../components/PageActions/PageActions.tsx | 4 +- .../PageActions/tests/PageActions.test.tsx | 20 - .../components/Popover/Popover.stories.tsx | 6 +- .../components/Pane/tests/Pane.test.tsx | 1 + .../tests/PopoverOverlay.test.tsx | 1 + .../components/Section/tests/Section.test.tsx | 2 + .../components/Popover/tests/Popover.test.tsx | 1 + .../components/RadioButton/RadioButton.scss | 10 +- .../components/RangeSlider/RangeSlider.scss | 2 +- .../RangeSlider/RangeSlider.stories.tsx | 22 +- .../components/DualThumb/DualThumb.scss | 14 +- .../components/SingleThumb/SingleThumb.scss | 5 +- .../ResourceItem/ResourceItem.stories.tsx | 22 +- .../components/ResourceItem/ResourceItem.tsx | 5 +- .../ResourceList/ResourceList.stories.tsx | 66 +- .../ResourceList/tests/ResourceList.test.tsx | 4 +- .../Scrollable/Scrollable.stories.tsx | 18 +- .../src/components/Select/Select.stories.tsx | 4 +- .../SelectAllActions/SelectAllActions.scss | 2 +- .../SettingToggle/SettingToggle.tsx | 6 +- .../src/components/Sheet/Sheet.stories.tsx | 6 +- .../SkeletonPage/SkeletonPage.stories.tsx | 146 +- .../components/SkeletonPage/SkeletonPage.tsx | 2 +- .../SkeletonPage/tests/SkeletonPage.test.tsx | 10 +- .../SkeletonTabs/SkeletonTabs.stories.tsx | 10 +- .../components/Spinner/Spinner.stories.tsx | 10 +- .../src/components/Tabs/Tabs.stories.tsx | 34 +- .../TextContainer/TextContainer.tsx | 1 + .../src/components/TextField/TextField.scss | 11 +- .../TextField/TextField.stories.tsx | 6 +- .../Menu/components/Message/Message.tsx | 1 + .../TrapFocus/tests/TrapFocus.test.tsx | 2 + .../VisuallyHidden/VisuallyHidden.stories.tsx | 6 +- .../src/styles/shared/_controls.scss | 15 +- polaris-react/src/utilities/css.ts | 28 + .../index-provider/tests/hooks.test.tsx | 2 +- polaris-tokens/CHANGELOG.md | 8 + polaris-tokens/package.json | 2 +- polaris-tokens/src/colors.ts | 4 +- polaris-tokens/src/token-groups/color.ts | 6 +- polaris.shopify.com/CHANGELOG.md | 66 + .../card.md | 7 +- .../grid.md | 8 +- .../content/components/deprecated/index.md | 2 + .../text-container.md | 5 +- .../components/layout-and-structure/page.md | 6 + .../components/navigation/navigation.md | 2 +- .../selection-and-input/date-picker.md | 5 + .../content/components/tables/index-table.md | 2 +- .../content/content/actionable-language.md | 12 +- .../content/content/alternative-text.md | 190 +- .../{patterns => content}/error-messages.md | 0 .../{patterns => content}/help-content.md | 0 .../content/patterns-legacy/index.md | 9 + .../{patterns => patterns-legacy}/loading.md | 4 + .../new-badge.md | 4 + .../{patterns => patterns-legacy}/pickers.md | 4 + .../text-fields.md | 4 + .../content/patterns/app-settings-layout.md | 8 + .../content/patterns/app-settings-layout.ts | 97 + .../content/patterns/date-picking.md | 8 + .../content/patterns/date-picking.ts | 1128 + .../content/patterns/design-patterns.md | 40 - polaris.shopify.com/content/patterns/index.md | 3 + .../content/patterns/page-layouts.md | 271 - .../patterns/resource-details-layout.md | 8 + .../patterns/resource-details-layout.ts | 248 + .../content/patterns/resource-index-layout.md | 11 + .../content/patterns/resource-index-layout.ts | 67 + .../content/tools/polaris-cli.md | 14 +- .../content/tools/polaris-migrator.md | 19 +- ...onventions-custom-property-allowed-list.md | 1 + .../conventions-selector-disallowed-list.md | 20 + polaris.shopify.com/next.config.js | 60 +- polaris.shopify.com/package.json | 21 +- polaris.shopify.com/pages/[...slug].tsx | 36 +- .../pages/api/search/v0/index.tsx | 34 +- .../components/[group]/[component]/index.tsx | 12 +- .../pages/components/[group]/index.tsx | 17 +- .../pages/examples/alpha-stack-with-align.tsx | 2 +- .../pages/examples/app-provider-default.tsx | 6 +- .../pages/examples/app-provider-with-i18n.tsx | 6 +- .../pages/examples/banner-in-a-card.tsx | 6 +- .../pages/examples/bleed-all-directions.tsx | 2 +- .../pages/examples/bleed-horizontal.tsx | 2 +- .../examples/bleed-specific-direction.tsx | 2 +- .../pages/examples/bleed-vertical.tsx | 2 +- .../pages/examples/box-with-padding.tsx | 2 +- .../examples/card-with-a-subdued-section.tsx | 1 - .../examples/card-with-multiple-sections.tsx | 1 - .../card-with-multiple-titled-sections.tsx | 1 - .../pages/examples/collapsible-default.tsx | 6 +- .../pages/examples/columns-default.tsx | 2 +- .../examples/columns-with-fixed-widths.tsx | 2 +- .../examples/columns-with-set-number.tsx | 2 +- .../examples/columns-with-varying-gap.tsx | 2 +- .../pages/examples/data-table-default.tsx | 6 +- .../pages/examples/data-table-sortable.tsx | 6 +- .../data-table-with-all-of-its-elements.tsx | 6 +- .../data-table-with-custom-totals-heading.tsx | 6 +- .../data-table-with-fixed-first-columns.tsx | 6 +- .../pages/examples/data-table-with-footer.tsx | 6 +- ...h-increased-density-and-zebra-striping.tsx | 6 +- .../data-table-with-row-heading-links.tsx | 6 +- .../data-table-with-sticky-header-enabled.tsx | 6 +- .../data-table-with-totals-in-footer.tsx | 6 +- .../pages/examples/drop-zone-nested.tsx | 6 +- ...p-zone-with-custom-file-dialog-trigger.tsx | 9 +- .../pages/examples/empty-state-default.tsx | 6 +- .../empty-state-with-full-width-layout.tsx | 6 +- ...mpty-state-with-subdued-footer-context.tsx | 6 +- .../pages/examples/filters-disabled.tsx | 6 +- .../pages/examples/filters-some-disabled.tsx | 6 +- .../examples/filters-with-a-data-table.tsx | 10 +- .../examples/filters-with-a-resource-list.tsx | 6 +- .../filters-with-children-content.tsx | 6 +- .../pages/examples/filters-with-help-text.tsx | 6 +- .../filters-with-query-field-disabled.tsx | 6 +- .../filters-with-query-field-hidden.tsx | 6 +- .../examples/filters-without-clear-button.tsx | 6 +- .../examples/frame-in-an-application.tsx | 10 +- .../pages/examples/frame-with-an-offset.tsx | 10 +- .../pages/examples/grid-custom-layout.tsx | 6 +- .../examples/grid-three-one-third-column.tsx | 10 +- .../pages/examples/grid-two-column.tsx | 10 +- .../grid-two-thirds-and-one-third-column.tsx | 10 +- .../pages/examples/index-table-default.tsx | 30 +- .../pages/examples/index-table-flush.tsx | 31 +- ...-small-screen-with-all-of-its-elements.tsx | 33 +- .../examples/index-table-small-screen.tsx | 30 +- .../index-table-with-all-of-its-elements.tsx | 25 +- ...ulk-actions-and-selection-across-pages.tsx | 30 +- .../index-table-with-bulk-actions.tsx | 30 +- ...dex-table-with-clickable-button-column.tsx | 25 +- .../examples/index-table-with-empty-state.tsx | 25 +- .../examples/index-table-with-filtering.tsx | 25 +- .../index-table-with-loading-state.tsx | 30 +- ...le-with-multiple-promoted-bulk-actions.tsx | 29 +- .../index-table-with-row-navigation-link.tsx | 25 +- .../examples/index-table-with-row-status.tsx | 29 +- .../index-table-with-sticky-last-column.tsx | 30 +- .../index-table-without-checkboxes.tsx | 25 +- .../pages/examples/inline-with-gap.tsx | 6 +- .../inline-with-horizontal-alignment.tsx | 8 +- .../examples/inline-with-non-wrapping.tsx | 2 +- .../inline-with-vertical-alignment.tsx | 10 +- ...ayout-annotated-with-banner-at-the-top.tsx | 6 +- .../layout-annotated-with-sections.tsx | 6 +- .../pages/examples/layout-annotated.tsx | 6 +- .../pages/examples/layout-one-column.tsx | 6 +- .../layout-three-columns-with-equal-width.tsx | 38 +- .../layout-two-columns-with-equal-width.tsx | 26 +- ...umns-with-primary-and-secondary-widths.tsx | 10 +- .../pages/examples/listbox-with-search.tsx | 6 +- .../pages/examples/option-list-default.tsx | 6 +- .../pages/examples/option-list-multiple.tsx | 6 +- .../examples/option-list-with-sections.tsx | 6 +- .../pages/examples/page-default.tsx | 6 +- .../pages/examples/page-full-width.tsx | 6 +- .../pages/examples/page-narrow-width.tsx | 6 +- .../examples/page-with-action-groups.tsx | 6 +- .../page-with-content-after-title.tsx | 6 +- .../page-with-custom-primary-action.tsx | 6 +- .../pages/examples/page-with-divider.tsx | 6 +- .../examples/page-with-external-link.tsx | 6 +- .../pages/examples/page-with-subtitle.tsx | 6 +- .../examples/page-without-pagination.tsx | 6 +- .../page-without-primary-action-in-header.tsx | 6 +- .../popover-with-lazy-loaded-list.tsx | 6 +- .../pages/examples/range-slider-default.tsx | 6 +- .../examples/range-slider-with-dual-thumb.tsx | 6 +- .../range-slider-with-min-and-max.tsx | 6 +- .../range-slider-with-prefix-and-suffix.tsx | 6 +- .../examples/range-slider-with-steps.tsx | 6 +- .../pages/examples/resource-item-default.tsx | 6 +- .../examples/resource-item-with-media.tsx | 6 +- .../resource-item-with-shortcut-actions.tsx | 6 +- .../resource-item-with-vertical-alignment.tsx | 6 +- .../pages/examples/resource-list-default.tsx | 6 +- ...ith-a-custom-empty-search-result-state.tsx | 6 +- ...resource-list-with-all-of-its-elements.tsx | 6 +- .../resource-list-with-alternate-tool.tsx | 6 +- .../resource-list-with-bulk-actions.tsx | 6 +- .../resource-list-with-empty-state.tsx | 6 +- .../examples/resource-list-with-filtering.tsx | 6 +- ...source-list-with-item-shortcut-actions.tsx | 6 +- .../resource-list-with-loading-state.tsx | 6 +- .../resource-list-with-multiselect.tsx | 6 +- ...-with-persistent-item-shortcut-actions.tsx | 6 +- ...ist-with-selection-and-no-bulk-actions.tsx | 6 +- .../examples/resource-list-with-sorting.tsx | 6 +- .../resource-list-with-total-count.tsx | 6 +- .../pages/examples/scrollable-default.tsx | 6 +- .../scrollable-to-child-component.tsx | 6 +- .../select-with-separate-validation-error.tsx | 4 +- .../pages/examples/sheet-default.tsx | 9 +- .../skeleton-page-with-dynamic-content.tsx | 38 +- .../skeleton-page-with-static-content.tsx | 38 +- .../pages/examples/skeleton-tabs-default.tsx | 6 +- .../skeleton-tabs-with-a-custom-count.tsx | 6 +- .../spinner-with-focus-management.tsx | 10 +- .../pages/examples/tabs-default.tsx | 10 +- .../pages/examples/tabs-fitted.tsx | 10 +- .../examples/tabs-with-badge-content.tsx | 10 +- .../examples/tabs-with-custom-disclosure.tsx | 10 +- ...t-field-with-separate-validation-error.tsx | 6 +- .../{patterns.tsx => patterns-legacy.tsx} | 2 +- .../pages/patterns/[...slug].tsx | 90 + polaris.shopify.com/pages/patterns/index.tsx | 4 + .../pages/tokens/breakpoints.tsx | 2 +- .../tools/stylelint-polaris/rules/[rule].tsx | 6 +- .../tools/stylelint-polaris/rules/index.tsx | 4 +- polaris.shopify.com/pages/whats-new.tsx | 2 +- polaris.shopify.com/playroom.config.js | 4 +- .../playroom/FrameComponent.tsx | 27 +- .../card.png | Bin .../grid.png | Bin .../text-container.png | Bin .../modal-with-close@2x.png | Bin 0 -> 20482 bytes .../content/actionable-language/ok@2x.png | Bin 47051 -> 0 bytes .../patterns/app-settings-cover-image.png | Bin 0 -> 210741 bytes .../images/patterns/app-settings-usage-1.png | Bin 0 -> 75458 bytes .../images/patterns/app-settings-usage-2.png | Bin 0 -> 133407 bytes .../images/patterns/app-settings-usage-3.png | Bin 0 -> 95098 bytes .../images/patterns/date-list-cover-image.png | Bin 0 -> 93282 bytes .../images/patterns/date-list-usage-1.png | Bin 0 -> 84048 bytes .../images/patterns/date-list-usage-2.png | Bin 0 -> 92071 bytes .../images/patterns/date-list-usage-3.png | Bin 0 -> 136007 bytes .../patterns/date-range-cover-image.png | Bin 0 -> 212736 bytes .../images/patterns/date-range-usage-1.png | Bin 0 -> 140788 bytes .../images/patterns/date-range-usage-2.png | Bin 0 -> 165962 bytes .../images/patterns/date-range-usage-3.png | Bin 0 -> 177574 bytes .../pattern-thumbnail-app-settings.png | Bin 0 -> 129345 bytes .../pattern-thumbnail-date-picking.png | Bin 0 -> 122526 bytes .../pattern-thumbnail-resource-details.png | Bin 0 -> 149865 bytes .../pattern-thumbnail-resource-index.png | Bin 0 -> 133051 bytes .../patterns/resource-detail-cover-image.png | Bin 0 -> 199649 bytes .../patterns/resource-detail-usage-1.png | Bin 0 -> 116707 bytes .../patterns/resource-detail-usage-2.png | Bin 0 -> 276559 bytes .../patterns/resource-detail-usage-3.png | Bin 0 -> 176651 bytes .../patterns/resource-detail-usage-4.png | Bin 0 -> 172043 bytes .../patterns/resource-detail-usage-5.png | Bin 0 -> 242094 bytes .../patterns/resource-index-cover-image.png | Bin 0 -> 389260 bytes .../patterns/resource-index-usage-1.png | Bin 0 -> 350678 bytes .../patterns/resource-index-usage-2.png | Bin 0 -> 96921 bytes .../patterns/resource-index-usage-3.png | Bin 0 -> 107664 bytes .../patterns/single-list-cover-image.png | Bin 0 -> 121900 bytes .../images/patterns/single-list-usage-1.png | Bin 0 -> 109226 bytes .../images/patterns/single-list-usage-2.png | Bin 0 -> 87079 bytes .../scripts/gen-cache-json.mjs | 12 +- polaris.shopify.com/scripts/gen-og-images.mjs | 17 +- .../scripts/get-props/src/get-props.ts | 2 +- .../src/components/Box/index.tsx | 77 + .../src/components/ComingSoon/index.tsx | 5 + .../ComponentExamples/ComponentExamples.tsx | 2 +- .../ComponentThumbnail.module.scss | 3 + .../ComponentThumbnail/ComponentThumbnail.tsx | 23 +- .../ComponentsPage/ComponentsPage.tsx | 85 +- .../Container/Container.module.scss | 10 +- .../ExampleWrapper/ExampleWrapper.module.scss | 34 + .../ExampleWrapper/ExampleWrapper.tsx | 28 + .../LinkButton/LinkButton.module.scss | 8 + .../ExampleWrapper/LinkButton/LinkButton.tsx | 9 + .../ExampleWrapper/LinkButton/index.ts | 3 + .../src/components/ExampleWrapper/index.ts | 5 + .../FoundationsPage/FoundationsPage.tsx | 71 +- .../FoundationsThumbnail.module.scss | 2 + .../src/components/Frame/Frame.tsx | 2 + .../components/GlobalSearch/GlobalSearch.tsx | 39 +- .../src/components/Grid/Grid.module.scss | 16 +- .../src/components/Grid/Grid.tsx | 127 +- .../src/components/Grid/index.ts | 4 +- .../src/components/GrowFrame/GrowFrame.tsx | 49 + .../src/components/GrowFrame/index.ts | 3 + .../components/Heading/Heading.module.scss | 14 + .../src/components/Heading/index.tsx | 14 + .../src/components/HomePage/HomePage.tsx | 2 +- .../src/components/IconsPage/IconsPage.tsx | 2 +- .../InlinePill/InlinePill.module.scss | 19 + .../src/components/InlinePill/InlinePill.tsx | 20 + .../src/components/InlinePill/index.ts | 3 + .../src/components/Lede/Lede.module.scss | 6 + .../src/components/Lede/index.tsx | 14 + .../src/components/Markdown/Markdown.tsx | 25 +- .../src/components/Page/Page.module.scss | 11 +- .../src/components/Page/Page.tsx | 22 +- .../src/components/PageMeta/PageMeta.tsx | 4 +- .../src/components/PatternPage/Blocks.tsx | 119 + .../PatternPage/PatternPage.module.scss | 296 + .../components/PatternPage/PatternPage.tsx | 222 + .../src/components/PatternPage/index.ts | 2 + .../PatternsExample.module.scss | 22 + .../PatternsExample/PatternsExample.tsx | 193 + .../src/components/PatternsExample/index.ts | 2 + .../PatternsPage/PatternsPage.module.scss | 37 + .../src/components/PatternsPage/index.tsx | 50 + .../PatternsRelatedResources.module.scss | 13 + .../PatternsRelatedResources/index.tsx | 24 + .../src/components/Stack/Stack.module.scss | 10 + .../src/components/Stack/index.tsx | 44 + .../StatusBadge/StatusBadge.module.scss | 3 +- .../StatusBanner/StatusBanner.module.scss | 5 + .../components/StatusBanner/StatusBanner.tsx | 2 +- .../ThumbnailPreview.module.scss | 7 + .../src/components/ThumbnailPreview/index.tsx | 20 + .../src/components/TokensPage/TokensPage.tsx | 2 +- .../UpdateBanner/UpdateBanner.module.scss | 19 + .../components/UpdateBanner/UpdateBanner.tsx | 24 + .../src/components/UpdateBanner/index.ts | 3 + polaris.shopify.com/src/data/props.json | 27725 ---------------- polaris.shopify.com/src/styles/globals.scss | 2 +- polaris.shopify.com/src/styles/variables.scss | 1 + polaris.shopify.com/src/types.ts | 60 + polaris.shopify.com/src/utils/foundations.ts | 7 +- polaris.shopify.com/src/utils/various.ts | 29 +- stylelint-polaris/CHANGELOG.md | 17 + stylelint-polaris/index.js | 8 + stylelint-polaris/package.json | 4 +- yarn.lock | 334 +- 421 files changed, 7023 insertions(+), 29671 deletions(-) create mode 100644 .changeset/selfish-pugs-exist.md create mode 100644 .changeset/sharp-rules-dress.md create mode 100644 .changeset/swift-bats-tease.md create mode 100644 polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.input.tsx create mode 100644 polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.output.tsx create mode 100644 polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.test.ts create mode 100644 polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/v11-react-update-page-breadcrumbs.ts rename polaris.shopify.com/content/components/{layout-and-structure => deprecated}/card.md (97%) rename polaris.shopify.com/content/components/{layout-and-structure => deprecated}/grid.md (80%) rename polaris.shopify.com/content/components/{layout-and-structure => deprecated}/text-container.md (83%) rename polaris.shopify.com/content/{patterns => content}/error-messages.md (100%) rename polaris.shopify.com/content/{patterns => content}/help-content.md (100%) create mode 100644 polaris.shopify.com/content/patterns-legacy/index.md rename polaris.shopify.com/content/{patterns => patterns-legacy}/loading.md (98%) rename polaris.shopify.com/content/{patterns => patterns-legacy}/new-badge.md (96%) rename polaris.shopify.com/content/{patterns => patterns-legacy}/pickers.md (99%) rename polaris.shopify.com/content/{patterns => patterns-legacy}/text-fields.md (99%) create mode 100644 polaris.shopify.com/content/patterns/app-settings-layout.md create mode 100644 polaris.shopify.com/content/patterns/app-settings-layout.ts create mode 100644 polaris.shopify.com/content/patterns/date-picking.md create mode 100644 polaris.shopify.com/content/patterns/date-picking.ts delete mode 100644 polaris.shopify.com/content/patterns/design-patterns.md delete mode 100644 polaris.shopify.com/content/patterns/page-layouts.md create mode 100644 polaris.shopify.com/content/patterns/resource-details-layout.md create mode 100644 polaris.shopify.com/content/patterns/resource-details-layout.ts create mode 100644 polaris.shopify.com/content/patterns/resource-index-layout.md create mode 100644 polaris.shopify.com/content/patterns/resource-index-layout.ts create mode 100644 polaris.shopify.com/content/tools/stylelint-polaris/rules/conventions-selector-disallowed-list.md rename polaris.shopify.com/pages/{patterns.tsx => patterns-legacy.tsx} (92%) create mode 100644 polaris.shopify.com/pages/patterns/[...slug].tsx create mode 100644 polaris.shopify.com/pages/patterns/index.tsx rename polaris.shopify.com/public/images/components/{layout-and-structure => deprecated}/card.png (100%) rename polaris.shopify.com/public/images/components/{layout-and-structure => deprecated}/grid.png (100%) rename polaris.shopify.com/public/images/components/{layout-and-structure => deprecated}/text-container.png (100%) create mode 100644 polaris.shopify.com/public/images/content/actionable-language/modal-with-close@2x.png delete mode 100644 polaris.shopify.com/public/images/content/actionable-language/ok@2x.png create mode 100644 polaris.shopify.com/public/images/patterns/app-settings-cover-image.png create mode 100644 polaris.shopify.com/public/images/patterns/app-settings-usage-1.png create mode 100644 polaris.shopify.com/public/images/patterns/app-settings-usage-2.png create mode 100644 polaris.shopify.com/public/images/patterns/app-settings-usage-3.png create mode 100644 polaris.shopify.com/public/images/patterns/date-list-cover-image.png create mode 100644 polaris.shopify.com/public/images/patterns/date-list-usage-1.png create mode 100644 polaris.shopify.com/public/images/patterns/date-list-usage-2.png create mode 100644 polaris.shopify.com/public/images/patterns/date-list-usage-3.png create mode 100644 polaris.shopify.com/public/images/patterns/date-range-cover-image.png create mode 100644 polaris.shopify.com/public/images/patterns/date-range-usage-1.png create mode 100644 polaris.shopify.com/public/images/patterns/date-range-usage-2.png create mode 100644 polaris.shopify.com/public/images/patterns/date-range-usage-3.png create mode 100644 polaris.shopify.com/public/images/patterns/pattern-thumbnail-app-settings.png create mode 100644 polaris.shopify.com/public/images/patterns/pattern-thumbnail-date-picking.png create mode 100644 polaris.shopify.com/public/images/patterns/pattern-thumbnail-resource-details.png create mode 100644 polaris.shopify.com/public/images/patterns/pattern-thumbnail-resource-index.png create mode 100644 polaris.shopify.com/public/images/patterns/resource-detail-cover-image.png create mode 100644 polaris.shopify.com/public/images/patterns/resource-detail-usage-1.png create mode 100644 polaris.shopify.com/public/images/patterns/resource-detail-usage-2.png create mode 100644 polaris.shopify.com/public/images/patterns/resource-detail-usage-3.png create mode 100644 polaris.shopify.com/public/images/patterns/resource-detail-usage-4.png create mode 100644 polaris.shopify.com/public/images/patterns/resource-detail-usage-5.png create mode 100644 polaris.shopify.com/public/images/patterns/resource-index-cover-image.png create mode 100644 polaris.shopify.com/public/images/patterns/resource-index-usage-1.png create mode 100644 polaris.shopify.com/public/images/patterns/resource-index-usage-2.png create mode 100644 polaris.shopify.com/public/images/patterns/resource-index-usage-3.png create mode 100644 polaris.shopify.com/public/images/patterns/single-list-cover-image.png create mode 100644 polaris.shopify.com/public/images/patterns/single-list-usage-1.png create mode 100644 polaris.shopify.com/public/images/patterns/single-list-usage-2.png create mode 100644 polaris.shopify.com/src/components/Box/index.tsx create mode 100644 polaris.shopify.com/src/components/ComingSoon/index.tsx create mode 100644 polaris.shopify.com/src/components/ComponentThumbnail/ComponentThumbnail.module.scss create mode 100644 polaris.shopify.com/src/components/ExampleWrapper/ExampleWrapper.module.scss create mode 100644 polaris.shopify.com/src/components/ExampleWrapper/ExampleWrapper.tsx create mode 100644 polaris.shopify.com/src/components/ExampleWrapper/LinkButton/LinkButton.module.scss create mode 100644 polaris.shopify.com/src/components/ExampleWrapper/LinkButton/LinkButton.tsx create mode 100644 polaris.shopify.com/src/components/ExampleWrapper/LinkButton/index.ts create mode 100644 polaris.shopify.com/src/components/ExampleWrapper/index.ts create mode 100644 polaris.shopify.com/src/components/GrowFrame/GrowFrame.tsx create mode 100644 polaris.shopify.com/src/components/GrowFrame/index.ts create mode 100644 polaris.shopify.com/src/components/Heading/Heading.module.scss create mode 100644 polaris.shopify.com/src/components/Heading/index.tsx create mode 100644 polaris.shopify.com/src/components/InlinePill/InlinePill.module.scss create mode 100644 polaris.shopify.com/src/components/InlinePill/InlinePill.tsx create mode 100644 polaris.shopify.com/src/components/InlinePill/index.ts create mode 100644 polaris.shopify.com/src/components/Lede/Lede.module.scss create mode 100644 polaris.shopify.com/src/components/Lede/index.tsx create mode 100644 polaris.shopify.com/src/components/PatternPage/Blocks.tsx create mode 100644 polaris.shopify.com/src/components/PatternPage/PatternPage.module.scss create mode 100644 polaris.shopify.com/src/components/PatternPage/PatternPage.tsx create mode 100644 polaris.shopify.com/src/components/PatternPage/index.ts create mode 100644 polaris.shopify.com/src/components/PatternsExample/PatternsExample.module.scss create mode 100644 polaris.shopify.com/src/components/PatternsExample/PatternsExample.tsx create mode 100644 polaris.shopify.com/src/components/PatternsExample/index.ts create mode 100644 polaris.shopify.com/src/components/PatternsPage/PatternsPage.module.scss create mode 100644 polaris.shopify.com/src/components/PatternsPage/index.tsx create mode 100644 polaris.shopify.com/src/components/PatternsRelatedResources/PatternsRelatedResources.module.scss create mode 100644 polaris.shopify.com/src/components/PatternsRelatedResources/index.tsx create mode 100644 polaris.shopify.com/src/components/Stack/Stack.module.scss create mode 100644 polaris.shopify.com/src/components/Stack/index.tsx create mode 100644 polaris.shopify.com/src/components/ThumbnailPreview/ThumbnailPreview.module.scss create mode 100644 polaris.shopify.com/src/components/ThumbnailPreview/index.tsx create mode 100644 polaris.shopify.com/src/components/UpdateBanner/UpdateBanner.module.scss create mode 100644 polaris.shopify.com/src/components/UpdateBanner/UpdateBanner.tsx create mode 100644 polaris.shopify.com/src/components/UpdateBanner/index.ts delete mode 100644 polaris.shopify.com/src/data/props.json diff --git a/.changeset/selfish-pugs-exist.md b/.changeset/selfish-pugs-exist.md new file mode 100644 index 00000000000..72491473e22 --- /dev/null +++ b/.changeset/selfish-pugs-exist.md @@ -0,0 +1,5 @@ +--- +'polaris.shopify.com': patch +--- + +Moved props.json to cache and automate generation diff --git a/.changeset/sharp-rules-dress.md b/.changeset/sharp-rules-dress.md new file mode 100644 index 00000000000..63ff8d3ba67 --- /dev/null +++ b/.changeset/sharp-rules-dress.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-icons': patch +--- + +Converted percentage fill-opacity to float in two icons for better compatibility diff --git a/.changeset/swift-bats-tease.md b/.changeset/swift-bats-tease.md new file mode 100644 index 00000000000..2846d625915 --- /dev/null +++ b/.changeset/swift-bats-tease.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Migrated `legacy` custom properties from `v10` to `v11` diff --git a/.gitignore b/.gitignore index 38c1f9ed80c..216460d8af7 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ .turbo dist node_modules +Session.vim /polaris-react/build /polaris-react/build-internal /polaris-react/src/styles/_media-queries.scss diff --git a/patches/playroom+0.28.0.patch b/patches/playroom+0.28.0.patch index d69d94d5a0b..7c31e7431de 100644 --- a/patches/playroom+0.28.0.patch +++ b/patches/playroom+0.28.0.patch @@ -5,7 +5,7 @@ index 6c82bbe..f05b80b 100644 @@ -160,6 +160,12 @@ export { themeB } from './themeB'; // etc... ``` - + +## Additional Code Transformations + +A hook into the internal processing of code is available via the `processCode` option, which is a path to a file that exports a function that receives the code as entered into the editor, and returns the new code to be rendered. @@ -13,7 +13,7 @@ index 6c82bbe..f05b80b 100644 +One example is [wrapping code in an IIFE for state support](https://github.com/seek-oss/playroom/issues/66). + ## TypeScript Support - + If a `tsconfig.json` file is present in your project, static prop types are parsed using [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) to provide better autocompletion in the Playroom editor. diff --git a/node_modules/playroom/lib/defaultModules/processCode.js b/node_modules/playroom/lib/defaultModules/processCode.js new file mode 100644 @@ -36,6 +36,173 @@ index 56defa7..1e7cf3b 100644 }, }, module: { +diff --git a/node_modules/playroom/src/Playroom/Frame.tsx b/node_modules/playroom/src/Playroom/Frame.tsx +index b175d74..ce3e7ef 100644 +--- a/node_modules/playroom/src/Playroom/Frame.tsx ++++ b/node_modules/playroom/src/Playroom/Frame.tsx +@@ -1,9 +1,9 @@ +-import React from 'react'; +-import { useParams } from '../utils/params'; ++import React, { useEffect, useState } from 'react'; + // @ts-ignore + import CatchErrors from './CatchErrors/CatchErrors'; + // @ts-ignore + import RenderCode from './RenderCode/RenderCode'; ++import { INCOMING_CODE, READY_TO_RECEIVE } from './constants'; + + interface FrameProps { + themes: Record; +@@ -18,11 +18,21 @@ export default function Frame({ + components, + FrameComponent, + }: FrameProps) { +- const { themeName, code } = useParams((rawParams) => ({ +- themeName: +- typeof rawParams.themeName === 'string' ? rawParams.themeName : '', +- code: typeof rawParams.code === 'string' ? rawParams.code : '', +- })); ++ const [code, setCode] = useState(`/*#__PURE__*/ ++ React.createElement(React.Fragment, null);`); ++ const [themeName, setThemeName] = useState(''); ++ useEffect(() => { ++ const listener = (e: any) => { ++ if (e.data && e.data.type === INCOMING_CODE ) { ++ setCode(e.data.code); ++ setThemeName(e.data.themeName); ++ }; ++ ++ } ++ window.addEventListener('message', listener); ++ window.parent.postMessage({ type: READY_TO_RECEIVE, ready: true }, window.origin); ++ return () => window.removeEventListener('message', listener); ++ }, []); + + const resolvedThemeName = + themeName === '__PLAYROOM__NO_THEME__' ? null : themeName; +diff --git a/node_modules/playroom/src/Playroom/Frames/Frames.tsx b/node_modules/playroom/src/Playroom/Frames/Frames.tsx +index 5b4af43..3bb2615 100644 +--- a/node_modules/playroom/src/Playroom/Frames/Frames.tsx ++++ b/node_modules/playroom/src/Playroom/Frames/Frames.tsx +@@ -6,7 +6,6 @@ import { PlayroomProps } from '../Playroom'; + import { Strong } from '../Strong/Strong'; + import { Text } from '../Text/Text'; + import playroomConfig from '../../config'; +-import frameSrc from './frameSrc'; + + import * as styles from './Frames.css'; + +@@ -44,10 +43,9 @@ export default function Frames({ code, themes, widths }: FramesProps) { +
+