Merge branch 'next' into update-next

* next: (87 commits)
  [ButtonGroup] Removed `segmented` boolean prop and replaced with `variant` (#9997)
  [LegacyTabs] Consolidate se23 styles and logic (#10231)
  [v12] Update changesets (#10232)
  [LegacyFilters] Consolidate se23 styles and logic (#10217)
  [Banner] Change status prop to tone (#10206)
  Replace icon highlight color in box stories (#10226)
  [TopBar] Consolidate se23 styles and logic (#10221)
  [Filters] consolidate se23 logic and styles (#10178)
  [Icon] Update props (#10220)
  [ButtonGroup] Update variant plain prop name (#10222)
  [Button] Remove connectedDisclosure (#10182)
  [LegacyCard] Consolidate se23 styles and logic (#10207)
  [Navigation] Consolidate se23 logic and styles (#10213)
  [Frame][ContextualSaveBar] Consolidate se23 styles and logic (#10196)
  [OptionList] consolidate se23 styles and logic  (#10177)
  [Page] Consolidate se23 styles and logic (#10187)
  [DataTable] Consolidate conditional logic (#10169)
  [Thumbnail] Consolidate conditional logic (#10171)
  [ResourceItem] Consolidate conditional logic (#10172)
  [FullscreenBar] Consolidate conditional logic (#10173)
  ...

.changeset/chilly-grapes-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Removed `shape` prop on `Avatar` component

.changeset/config.json

@@ -7,7 +7,13 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": [],
+  "ignore": [
+    "@shopify/polaris-cli",
+    "@shopify/polaris-codemods",
+    "@shopify/polaris-migrator",
+    "polaris.shopify.com",
+    "polaris-for-vscode"
+  ],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always"
   }

.changeset/fuzzy-coats-study.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+[ButtonGroup] Removed `segmented` boolean prop and replaced with `variant`. Replaced `spacing` prop with `gap`

.changeset/fuzzy-pears-jog.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Updated `borderRadius` props to match web spec

.changeset/healthy-boxes-wave.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Renamed `color` prop to `tone` for `ProgressBar` component

.changeset/honest-stingrays-act.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Removed connectedDislosure prop on button

.changeset/kind-phones-yell.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Removed `divider` prop from `Page` component

.changeset/loud-hounds-fetch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Renamed `destructive` prop to `tone` for `Button` component

.changeset/nice-zoos-vanish.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Enabled the Summer Editions 2023 feature flag by default

.changeset/olive-clouds-pretend.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Changed `status` prop on `Banner` to `tone`

.changeset/pre.json

@@ -0,0 +1,18 @@
+{
+  "mode": "pre",
+  "tag": "beta",
+  "initialVersions": {
+    "@shopify/polaris-cli": "0.2.25",
+    "@shopify/polaris-codemods": "0.1.11",
+    "polaris-for-vscode": "0.7.0",
+    "@shopify/polaris-icons": "7.7.0",
+    "@shopify/polaris-migrator": "0.19.8",
+    "@shopify/polaris": "11.9.1",
+    "@shopify/polaris-tokens": "7.5.2",
+    "polaris.shopify.com": "0.56.3",
+    "@shopify/stylelint-polaris": "13.0.8"
+  },
+  "changesets": [
+    "nice-zoos-vanish"
+  ]
+}

.changeset/proud-parrots-yawn.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Changed `color` prop on `Icon` to `tone`

.changeset/rotten-comics-think.md

@@ -0,0 +1,7 @@
+---
+'@shopify/polaris': major
+---
+
+Replaced `borderless` prop with `variant` on TextField
+
+Migration: `npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="TextField" --from="borderless" --to="variant" --newValue="borderless"`

.changeset/silent-brooms-confess.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Consolidated boolean `Button` props into `variant` prop

.changeset/silly-ligers-heal.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Replaced boolean props: `secondary`, `fullWidth`, `oneHalf`, `oneThird` on Layout.Section with `variant`

.changeset/tall-chicken-repeat.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Removed Summer Editions experimental styles and code for the following components: `AppProvider`, `Avatar`, `AccountConnection`, `ActionList`, `ActionMenu`, `Autocomplete`, `Badge`, `Banner`, `Breadcrumbs`, `BulkActions`, `Button`, `ButtonGroup`, `CalloutCard`, `Card`, `CheckableButton`, `Checkbox`, `Choice`, `Connected`, `DataTable`, `DatePicker`, `DropZone`, `EmptyState`, `Filters`, `FormLayout`, `Frame`, `FullscreenBar`, `IndexFilters`, `IndexTable`, `InlineError`, `KeyboardKey`, `Labelled`, `Layout`, `LegacyCard`, `LegacyFilters`, `LegacyTabs`, `Link`, `List`, `Listbox`, `MediaCard`, `Modal`, `Navigation`, `OptionList`, `Page`, `PageActions`, `Pagination`, `Popover`, `ProgressBar`, `RadioButton`, `ResourceItem`, `ResourceList`, `Select`, `SettingAction`, `ShadowBevel`, `SkeletonPage`, `SkeletonThumbnail`, `Spinner`, `Tabs`, `Tag`, `Text`, `TextField`, `Thumbnail`, `TooltipOverlay`, `TopBar`, and `VideoThumbnail`

.changeset/wise-pianos-unite.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Removed `optionRole` prop from `OptionList` component

.github/workflows/ci-a11y-vrt-experimental.yml

@@ -8,11 +8,13 @@ on:
     paths:
       - 'polaris-react/src/**'
       - 'polaris-react/playground/**'
+      - 'polaris-react/.storybook/**'
       - 'polaris-tokens/src/**'
   pull_request:
     paths:
       - 'polaris-react/src/**'
       - 'polaris-react/playground/**'
+      - 'polaris-react/.storybook/**'
       - 'polaris-tokens/src/**'
 
 jobs:

.github/workflows/major-version-check.yml

@@ -2,6 +2,8 @@ name: Major version in changeset
 
 on:
   pull_request:
+    branches:
+      - main
     types:
       - labeled
       - unlabeled

.github/workflows/release.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - next
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 

documentation/guides/migrating-from-v11-to-v12.md

@@ -0,0 +1,77 @@
+# Migrating from v11 to v12
+
+Polaris v12.0.0 ([full release notes](https://github.com/Shopify/polaris/releases/tag/v12.0.0)) prop replacement, removal of components, renamed components, and token changes.
+
+## Table of Contents
+
+- [Quick migration guide](#quick-migration-guide)
+
+## Quick migration guide
+
+**Layout.Section**
+
+- One third:
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Layout.Section" --from="oneThird" --to="variant" --newValue="oneThird"`
+
+- One half:
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Layout.Section" --from="oneHalf" --to="variant" --newValue="oneHalf"`
+
+- Full width:
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Layout.Section" --from="fullWidth" --to="variant" --newValue="fullWidth"`
+
+- Secondary, becomes oneThird:
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Layout.Section" --from="secondary" --to="variant" --newValue="oneThird"`
+
+**TextField**
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="TextField" --from="borderless" --to="variant" --newValue="borderless"`
+
+**Box**
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Box" --from="borderRadiusEndStart" --to="variant" --newValue="borderEndStartRadius"`
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Box" --from="borderRadiusEndEnd" --to="variant" --newValue="borderEndEndRadius"`
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Box" --from="borderRadiusStartStart" --to="variant" --newValue="borderStartStartRadius"`
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Box" --from="borderRadiusStartEnd" --to="variant" --newValue="borderStartEndRadius"`
+
+**HorizontalStack**
+
+`npx @shopify/polaris-migrator react-rename-component <path> --renameFrom="HorizontalStack" --renameTo="InlineStack" --renamePropsFrom="HorizontalStackProps" --renamePropsTo="InlineStackProps"`
+
+**VerticalStack**
+
+`npx @shopify/polaris-migrator react-rename-component <path> --renameFrom="VerticalStack" --renameTo="BlockStack" --renamePropsFrom="VerticalStackProps" --renamePropsTo="BlockStackProps"`
+
+**HorizontalGrid**
+
+`npx @shopify/polaris-migrator react-rename-component <path> --renameFrom="HorizontalGrid" --renameTo="InlineGrid" --renamePropsFrom="HorizontalGridProps" --renamePropsTo="InlineGridProps"`
+
+**Button**
+
+- connectedDisclosure: [See the updated split example](https://polaris.shopify.com/components/actions/button)
+
+// TODO - Boolean prop to tone, variant migration
+
+**Banner**
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Banner" --from="status" --to="tone"`
+
+**Icon**
+
+- Backdrop is not a pattern in the new Polaris design language. If you must use a backdrop on your icon, use Box.
+
+```tsx
+<Box background={boxBackground} padding="1" width="28px" borderRadius="full">
+  <Icon source={CirclePlusMinor} color={iconColor} />
+</Box>
+```
+
+- Color
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Icon" --from="color" --to="tone"`

polaris-migrator/package.json

@@ -55,7 +55,7 @@
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@shopify/polaris": "^11.13.0",
+    "@shopify/polaris": "^12.0.0-beta.0",
     "plop": "^3.1.1",
     "plop-dir": "^0.0.5",
     "prettier": "^2.7.1",

polaris-react/.storybook/manager.js

@@ -75,7 +75,7 @@ export const featureFlagOptions = {
   polarisSummerEditions2023: {
     name: 'polarisSummerEditions2023',
     description: 'Toggle the summer editions feature flag',
-    defaultValue: false,
+    defaultValue: true,
     control: {type: 'boolean'},
   },
   polarisSummerEditions2023ShadowBevelOptOut: {

polaris-react/.storybook/preview-head.html

@@ -5,6 +5,7 @@
   crossorigin="anonymous"
 />
 <link
+  id="inter-font-link"
   href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
   rel="stylesheet"
 />

polaris-react/.storybook/preview.js

@@ -6,6 +6,7 @@ import {GridOverlay} from './GridOverlay';
 import {RenderPerformanceProfiler} from './RenderPerformanceProfiler';
 import {gridOptions, featureFlagOptions} from './manager';
 import {breakpoints} from '@shopify/polaris-tokens';
+import isChromatic from 'chromatic/isChromatic';
 
 function StrictModeDecorator(Story, context) {
   const {strictMode} = context.globals;
@@ -19,6 +20,11 @@ function StrictModeDecorator(Story, context) {
 }
 
 function AppProviderDecorator(Story, context) {
+  // Use system font in chromatic snapshots to avoid async font loading flakiness
+  if (isChromatic()) {
+    document.getElementById('inter-font-link').removeAttribute('href');
+  }
+
   const {
     polarisSummerEditions2023,
     polarisSummerEditions2023ShadowBevelOptOut,

polaris-react/README.md

@@ -70,7 +70,7 @@ If React doesn’t make sense for your application, you can use a CSS-only versi
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.13.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@12.0.0-beta.0/build/esm/styles.css"
 />
 ```
 

polaris-react/locales/cs.json

@@ -30,8 +30,7 @@
       "dismissButton": "Zavřít notifikaci"
     },
     "Button": {
-      "spinnerAccessibilityLabel": "Načítání",
-      "connectedDisclosureAccessibilityLabel": "Související akce"
+      "spinnerAccessibilityLabel": "Načítání"
     },
     "Common": {
       "checkbox": "zaškrtávací pole",

polaris-react/locales/da.json

@@ -30,8 +30,7 @@
       "dismissButton": "Afvis meddelelse"
     },
     "Button": {
-      "spinnerAccessibilityLabel": "Indlæser",
-      "connectedDisclosureAccessibilityLabel": "Relaterede handlinger"
+      "spinnerAccessibilityLabel": "Indlæser"
     },
     "Common": {
       "checkbox": "afkrydsningsfelt",

polaris-react/locales/de.json

@@ -30,8 +30,7 @@
       "dismissButton": "Benachrichtigung verwerfen"
     },
     "Button": {
-      "spinnerAccessibilityLabel": "Wird geladen",
-      "connectedDisclosureAccessibilityLabel": "Ähnliche Aktionen"
+      "spinnerAccessibilityLabel": "Wird geladen"
     },
     "Common": {
       "checkbox": "Kontrollkästchen",

polaris-react/locales/en.json

@@ -45,8 +45,7 @@
       "dismissButton": "Dismiss notification"
     },
     "Button": {
-      "spinnerAccessibilityLabel": "Loading",
-      "connectedDisclosureAccessibilityLabel": "Related actions"
+      "spinnerAccessibilityLabel": "Loading"
     },
     "Common": {
       "checkbox": "checkbox",

polaris-react/locales/es.json

@@ -30,8 +30,7 @@
       "dismissButton": "Descartar notificación"
     },
     "Button": {
-      "spinnerAccessibilityLabel": "Cargando",
-      "connectedDisclosureAccessibilityLabel": "Acciones relacionadas"
+      "spinnerAccessibilityLabel": "Cargando"
     },
     "Common": {
       "checkbox": "casilla de verificación",

polaris-react/locales/fi.json

@@ -30,8 +30,7 @@
       "dismissButton": "Ohita ilmoitus"
     },
     "Button": {
-      "spinnerAccessibilityLabel": "Ladataan",
-      "connectedDisclosureAccessibilityLabel": "Aiheeseen liittyvät toimenpiteet"
+      "spinnerAccessibilityLabel": "Ladataan"
     },
     "Common": {
       "checkbox": "valintaruutu",

polaris-react/locales/fr.json

@@ -30,8 +30,7 @@
       "dismissButton": "Rejeter la notification"
     },
     "Button": {
-      "spinnerAccessibilityLabel": "Chargement en cours",
-      "connectedDisclosureAccessibilityLabel": "Actions associées"
+      "spinnerAccessibilityLabel": "Chargement en cours"
     },
     "Common": {
       "checkbox": "case à cocher",

polaris-react/locales/it.json

@@ -30,8 +30,7 @@
       "dismissButton": "Elimina notifica"
     },
     "Button": {
-      "spinnerAccessibilityLabel": "Caricamento in corso",
-      "connectedDisclosureAccessibilityLabel": "Azioni correlate"
+      "spinnerAccessibilityLabel": "Caricamento in corso"
     },
     "Common": {
       "checkbox": "casella di spunta",

polaris-react/locales/ja.json

@@ -30,8 +30,7 @@
       "dismissButton": "通知を閉じる"
     },
     "Button": {
-      "spinnerAccessibilityLabel": "読み込み中",
-      "connectedDisclosureAccessibilityLabel": "関連したアクション"
+      "spinnerAccessibilityLabel": "読み込み中"
     },
     "Common": {
       "checkbox": "チェックボックス",

polaris-react/locales/ko.json

@@ -30,8 +30,7 @@
       "dismissButton": "알림 무시"
     },
     "Button": {
-      "spinnerAccessibilityLabel": "로드 중",
-      "connectedDisclosureAccessibilityLabel": "관련 작업"
+      "spinnerAccessibilityLabel": "로드 중"
     },
     "Common": {
       "checkbox": "확인란",

polaris-react/locales/nb.json

@@ -30,8 +30,7 @@
       "dismissButton": "Avvis varsel"
     },
     "Button": {
-      "spinnerAccessibilityLabel": "Laster inn",
-      "connectedDisclosureAccessibilityLabel": "Relaterte handlinger"
+      "spinnerAccessibilityLabel": "Laster inn"
     },
     "Common": {
       "checkbox": "avmerkingsboks",