Sophie/chromatic test

.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/nice-zoos-vanish.md

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

.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/tall-chicken-repeat.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Removed Summer Editions experimental styles and code for the following components: `Avatar`, `AccountConnection`, `ActionList`, `ActionMenu`, `Autocomplete`, `Breadcrumbs`, `Text`, `KeyboardKey`, `EmptyState`

.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 }}
 

polaris-codemods/package.json

@@ -41,7 +41,7 @@
     "jscodeshift": "^0.13.1"
   },
   "devDependencies": {
-    "@shopify/polaris": "^11.11.0",
+    "@shopify/polaris": "^12.0.0-beta.0",
     "@types/jscodeshift": "^0.11.6",
     "jscodeshift": "^0.13.1",
     "plop": "^3.1.2",

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.11.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
+  rel="preload"
   href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
   rel="stylesheet"
 />

polaris-react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 12.0.0-beta.0
+
+### Major Changes
+
+- [`c69524c3c`](https://github.com/Shopify/polaris/commit/c69524c3ca024383344cafe6ede8feda7c9e99eb) Thanks [@samrose3](https://github.com/samrose3)! - Enabled the Summer Editions 2023 feature flag by default
+
 ## 11.11.0
 
 ### Minor Changes

polaris-react/README.md

@@ -33,7 +33,7 @@ Otherwise include the CSS in your HTML. We suggest copying the styles file into
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.11.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@12.0.0-beta.0/build/esm/styles.css"
 />
 ```
 
@@ -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.11.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@12.0.0-beta.0/build/esm/styles.css"
 />
 ```
 

polaris-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/polaris",
   "description": "Shopify’s admin product component library",
-  "version": "11.11.0",
+  "version": "12.0.0-beta.0",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",

polaris-react/src/components/AccountConnection/AccountConnection.tsx

@@ -9,7 +9,6 @@ import {Box} from '../Box';
 import {HorizontalStack} from '../HorizontalStack';
 import {Text} from '../Text';
 import {VerticalStack} from '../VerticalStack';
-import {useFeatures} from '../../utilities/features';
 import {useBreakpoints} from '../../utilities/breakpoints';
 
 export interface AccountConnectionProps {
@@ -38,7 +37,6 @@ export function AccountConnection({
   details,
   termsOfService,
 }: AccountConnectionProps) {
-  const {polarisSummerEditions2023} = useFeatures();
   const breakpoints = useBreakpoints();
 
   const initials = accountName
@@ -61,12 +59,10 @@ export function AccountConnection({
 
   const titleContent = title ? title : accountName;
 
-  const titleMarkup = polarisSummerEditions2023 ? (
+  const titleMarkup = (
     <Text as="h2" variant="headingSm">
       {titleContent}
     </Text>
-  ) : (
-    titleContent
   );
 
   const detailsMarkup = details ? (
@@ -76,13 +72,7 @@ export function AccountConnection({
   ) : null;
 
   const termsOfServiceMarkup = termsOfService ? (
-    <Box
-      paddingBlockStart={
-        polarisSummerEditions2023 && breakpoints.mdUp ? '4' : '5'
-      }
-    >
-      {termsOfService}
-    </Box>
+    <Box paddingBlockStart={breakpoints.mdUp ? '4' : '5'}>{termsOfService}</Box>
   ) : null;
 
   const actionElement = action
@@ -94,7 +84,7 @@ export function AccountConnection({
       <SettingAction action={actionElement}>
         <HorizontalStack gap="4">
           {avatarMarkup}
-          <VerticalStack gap={polarisSummerEditions2023 ? '1' : '2'}>
+          <VerticalStack gap="1">
             {titleMarkup}
             {detailsMarkup}
           </VerticalStack>

polaris-react/src/components/ActionList/ActionList.scss

@@ -5,7 +5,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
 
 .Item {
   // stylelint-disable -- Polaris component custom properties
-  --pc-action-list-item-min-height: var(--p-space-10);
+  --pc-action-list-item-min-height: var(--p-space-8);
   &.default {
     --pc-action-list-image-size: 20px;
   }
@@ -16,102 +16,62 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include unstyled-button;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring;
-  display: block;
+  @include focus-ring($size: 'wide');
+  display: flex;
+  align-items: center;
   width: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   min-height: var(--pc-action-list-item-min-height);
   text-align: left;
   text-decoration: none;
   cursor: pointer;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  padding: var(--pc-action-list-item-vertical-padding) var(--p-space-2);
-  border-radius: var(--p-border-radius-1);
+  padding: var(--p-space-1_5-experimental);
+  border-radius: var(--p-border-radius-2);
   border-top: var(--p-border-width-1) solid transparent;
   color: inherit;
 
-  #{$se23} & {
-    // stylelint-disable-next-line -- se23
-    @include focus-ring($size: 'wide');
-    /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */
-    --pc-action-list-item-min-height: var(--p-space-8);
-    padding: var(--p-space-1_5-experimental);
-    border-radius: var(--p-border-radius-2);
-    align-items: center;
-    display: flex;
-  }
-
   @media (forced-colors: active) {
     border: var(--p-border-width-1) solid transparent;
   }
 
   &:hover {
-    background-color: var(--p-color-bg-hover);
+    background-color: var(--p-color-bg-subdued-hover);
     text-decoration: none;
     outline: var(--p-border-width-3) solid transparent;
-
-    #{$se23} & {
-      background-color: var(--p-color-bg-subdued-hover);
-    }
   }
 
   &:active {
-    background-color: var(--p-color-bg-active);
-
-    #{$se23} & {
-      background-color: var(--p-color-bg-subdued-hover);
-    }
+    background-color: var(--p-color-bg-subdued-hover);
 
     svg {
-      fill: var(--p-color-icon-interactive);
-
-      #{$se23} & {
-        fill: var(--p-color-icon);
-      }
+      fill: var(--p-color-icon);
     }
   }
 
   &:focus-visible:not(:active) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include focus-ring($style: 'focused');
-    outline: var(--p-border-width-3) solid transparent;
-
-    #{$se23} & {
-      // stylelint-disable-next-line -- se23
-      @include no-focus-ring;
-      background-color: var(--p-color-bg);
-      outline: var(--p-border-width-2) solid
-        var(--p-color-border-interactive-focus);
-    }
+    @include no-focus-ring;
+    background-color: var(--p-color-bg);
+    outline: var(--p-border-width-2) solid
+      var(--p-color-border-interactive-focus);
   }
 
   &:visited {
     color: inherit;
   }
 
   &.active {
-    background-color: var(--p-color-bg-interactive-selected);
-
-    #{$se23} & {
-      background-color: var(--p-color-bg-subdued-active);
-      font-weight: var(--p-font-weight-semibold);
-    }
+    background-color: var(--p-color-bg-subdued-active);
+    font-weight: var(--p-font-weight-semibold);
 
     svg {
-      fill: var(--p-color-icon-interactive);
-
-      #{$se23} & {
-        fill: var(--p-color-icon-primary);
-      }
+      fill: var(--p-color-icon-primary);
     }
 
     &::before {
       // stylelint-disable-next-line -- alignment for left tab style https://github.com/Shopify/polaris/pull/3619
       @include list-selected-indicator;
-
-      #{$se23} & {
-        display: none;
-      }
+      display: none;
     }
   }
 
@@ -120,31 +80,16 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
 
     svg {
       fill: var(--p-color-icon-critical);
-
-      #{$se23} & {
-        // Specificity bump
-        fill: var(--p-color-icon-critical);
-      }
     }
 
     &:hover {
       background-color: var(--p-color-bg-critical-subdued-hover);
-
-      #{$se23} & {
-        // Specificity bump
-        background-color: var(--p-color-bg-critical-subdued-hover);
-      }
     }
 
     // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
     &:active,
     &.active {
       background-color: var(--p-color-bg-critical-subdued-active);
-
-      #{$se23} & {
-        // Specificity bump
-        background-color: var(--p-color-bg-critical-subdued-active);
-      }
     }
   }
 
@@ -164,11 +109,6 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     .Prefix svg,
     .Suffix svg {
       fill: var(--p-color-icon-disabled);
-
-      #{$se23} & {
-        // Specificity bump
-        fill: var(--p-color-icon-disabled);
-      }
     }
   }