v11.x.x updates feature branch

.changeset/cool-hats-grin.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed small screen horizontal overflow by changing `Banner` focus ring from `box-shadow` to `outline`

.changeset/good-turtles-pump.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Removed unused transition delay param from focus-ring mixin

.changeset/khaki-eggs-shout.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Add polarisSummerEditions2023 feature flag to AppProvider context.

.changeset/tough-deers-brush.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Add `primarySuccess` variant prop to `Button`

polaris-react/.storybook/manager.js

@@ -57,8 +57,23 @@ addons.register('polaris/global-controls', () => {
     match: ({viewMode}) => viewMode === 'story',
     render: ({active, key}) => <GridPanel active={active} key={key} />,
   });
+  addons.add('provider/panel', {
+    type: types.PANEL,
+    title: 'Feature flags',
+    match: ({viewMode}) => viewMode === 'story',
+    render: ({active, key}) => <FeatureFlagPanel active={active} key={key} />,
+  });
 });
 
+export const featureFlagOptions = {
+  polarisSummerEditions2023: {
+    name: 'polarisSummerEditions2023',
+    description: 'Toggle the summer editions feature flag',
+    defaultValue: false,
+    control: {type: 'boolean'},
+  },
+};
+
 export const gridOptions = {
   showGrid: {
     name: 'Show grid overlay',
@@ -88,6 +103,20 @@ export const gridOptions = {
   },
 };
 
+function FeatureFlagPanel(props) {
+  const [globals, updateGlobals] = useGlobals();
+  return (
+    <AddonPanel {...props}>
+      <ArgsTable
+        inAddonPanel
+        rows={featureFlagOptions}
+        args={globals}
+        updateArgs={updateGlobals}
+      />
+    </AddonPanel>
+  );
+}
+
 function GridPanel(props) {
   const [globals, updateGlobals] = useGlobals();
 

polaris-react/.storybook/preview.js

@@ -4,7 +4,7 @@ import {AppProvider} from '../src';
 import enTranslations from '../locales/en.json';
 import {GridOverlay} from './GridOverlay';
 import {RenderPerformanceProfiler} from './RenderPerformanceProfiler';
-import {gridOptions} from './manager';
+import {gridOptions, featureFlagOptions} from './manager';
 import {breakpoints} from '@shopify/polaris-tokens';
 
 function StrictModeDecorator(Story, context) {
@@ -19,10 +19,15 @@ function StrictModeDecorator(Story, context) {
 }
 
 function AppProviderDecorator(Story, context) {
+  const {polarisSummerEditions2023} = context.globals;
   if (context.args.omitAppProvider) return <Story {...context} />;
-
   return (
-    <AppProvider i18n={enTranslations}>
+    <AppProvider
+      features={{
+        polarisSummerEditions2023,
+      }}
+      i18n={enTranslations}
+    >
       <Story {...context} />
     </AppProvider>
   );
@@ -76,6 +81,7 @@ export const globalTypes = {
       ],
     },
   },
+  ...featureFlagOptions,
   ...gridOptions,
 };
 const viewPorts = Object.entries({

polaris-react/playground/DetailsPage.tsx

@@ -41,8 +41,10 @@ import {
   Thumbnail,
   Toast,
   TopBar,
+  FooterHelp,
+  Link,
 } from '../src';
-import type {DropZoneProps} from '../src';
+import type {DropZoneProps, PageProps} from '../src';
 
 import styles from './DetailsPage.scss';
 
@@ -480,7 +482,7 @@ export function DetailsPage() {
     setPreviewValue(newValue);
   }, []);
 
-  const actions1 = [
+  const actions1: PageProps['secondaryActions'] = [
     {
       content: 'Duplicate',
       onAction: () => console.log('duplicate'),
@@ -490,17 +492,18 @@ export function DetailsPage() {
       onAction: () => console.log('print'),
     },
   ];
-  const actions2 = [
+  const actions2: PageProps['secondaryActions'] = [
     {
       content: 'Print',
       onAction: () => console.log('print'),
     },
   ];
 
-  const [actions, setActions] = useState(actions1);
+  const [actions, setActions] =
+    useState<PageProps['secondaryActions']>(actions1);
 
   const toggleActions = () => {
-    if (actions.length === 2) {
+    if (Array.isArray(actions) && actions.length === 2) {
       setActions(actions2);
     } else {
       setActions(actions1);
@@ -556,15 +559,17 @@ export function DetailsPage() {
         onAction: () => console.log('save'),
       }}
       additionalMetadata="Created May 8, 2020 at 7:31 am from Developer Tools (via import)"
-      secondaryActions={[
-        ...actions,
-        {
-          content: 'View',
-          onAction: () => {
-            console.log(previewValue);
+      secondaryActions={
+        Array.isArray(actions) && [
+          ...actions,
+          {
+            content: 'View',
+            onAction: () => {
+              console.log(previewValue);
+            },
           },
-        },
-      ]}
+        ]
+      }
       actionGroups={[
         {
           title: 'Promote',
@@ -709,6 +714,12 @@ export function DetailsPage() {
       {pageMarkup}
       {toastMarkup}
       {modalMarkup}
+      <FooterHelp>
+        Learn more about{' '}
+        <Link url="https://help.shopify.com/manual/orders/fulfill-orders">
+          fulfilling orders
+        </Link>
+      </FooterHelp>
     </Frame>
   );
 }

polaris-react/playground/KitchenSink.tsx

@@ -26,6 +26,7 @@ export function KitchenSink() {
           'Sheet',
           'Frame',
           'Loading',
+          'AppProvider',
         ].includes(id.split(':')[0]),
     )
     .map(([id, Story]) => {

polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx

@@ -13,6 +13,7 @@ import {useI18n} from '../../../../utilities/i18n';
 import {SecondaryAction} from '../SecondaryAction';
 import {useEventListener} from '../../../../utilities/use-event-listener';
 import {useIsomorphicLayoutEffect} from '../../../../utilities/use-isomorphic-layout-effect';
+import {useFeatures} from '../../../../utilities/features';
 
 import styles from './Actions.scss';
 
@@ -41,6 +42,7 @@ export function Actions({actions = [], groups = [], onActionRollup}: Props) {
   const timesMeasured = useRef(0);
   const actionWidthsRef = useRef<number[]>([]);
   const rollupActiveRef = useRef<boolean | null>(null);
+  const {polarisSummerEditions2023} = useFeatures();
   const [activeMenuGroup, setActiveMenuGroup] = useState<string | undefined>(
     undefined,
   );
@@ -311,7 +313,7 @@ export function Actions({actions = [], groups = [], onActionRollup}: Props) {
   });
 
   const groupedActionsMarkup = (
-    <ButtonGroup spacing="extraTight">
+    <ButtonGroup spacing={polarisSummerEditions2023 ? 'tight' : 'extraTight'}>
       {rollUppableActionsMarkup}
       {actionsMarkup}
       {groupsMarkup}

polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss

@@ -1,3 +1,5 @@
+@import '../../../../styles/common';
+
 .RollupActivator {
   text-align: right;
   // Override `.iconOnly` negative margins
@@ -11,5 +13,27 @@
     &:focus {
       border: var(--p-border-width-1) solid var(--p-color-border-strong);
     }
+
+    #{$se23} & {
+      background: var(--p-color-bg-strong);
+      border-radius: var(--p-border-radius-2);
+      /* stylelint-disable-next-line selector-max-combinators -- se23 */
+      &:hover {
+        background: var(--p-color-bg-strong-hover);
+      }
+      /* stylelint-disable-next-line selector-max-combinators -- se23 */
+      &:focus {
+        /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 button overrides */
+        @include no-focus-ring;
+        outline: var(--p-border-width-2) solid
+          var(--p-color-border-interactive-focus);
+        outline-offset: var(--p-space-05);
+        background: var(--p-color-bg-strong-active);
+      }
+      /* stylelint-disable-next-line selector-max-combinators -- se23 */
+      &:active {
+        background: var(--p-color-bg-strong-active);
+      }
+    }
   }
 }

polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss

@@ -52,4 +52,54 @@
       }
     }
   }
+
+  #{$se23} & {
+    // stylelint-disable-next-line selector-max-combinators -- se23
+    a,
+    button {
+      border: none;
+      min-height: 28px;
+      padding: var(--p-space-1) var(--p-space-3);
+      background-color: var(--p-color-bg-strong) !important;
+      border-radius: var(--p-border-radius-2) !important;
+      /* stylelint-disable-next-line selector-max-combinators -- se23 */
+      &:hover {
+        background-color: var(--p-color-bg-strong-hover) !important;
+      }
+      /* stylelint-disable-next-line selector-max-combinators -- se23 */
+      &:focus,
+      &:active {
+        background-color: var(--p-color-bg-strong-active) !important;
+      }
+      /* stylelint-disable-next-line selector-max-combinators -- se23 */
+      &:focus:not(:active) {
+        /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
+        @include no-focus-ring;
+        outline: var(--p-border-width-2) solid
+          var(--p-color-border-interactive-focus);
+        outline-offset: var(--p-space-05);
+      }
+    }
+
+    &.destructive {
+      /* stylelint-disable-next-line selector-max-combinators -- se23 */
+      a,
+      button {
+        color: var(--p-color-text-critical) !important;
+        /* stylelint-disable-next-line selector-max-combinators, max-nesting-depth -- se23 */
+        &:hover {
+          background-color: var(--p-color-bg-strong-hover) !important;
+        }
+        /* stylelint-disable-next-line selector-max-combinators, max-nesting-depth -- se23 */
+        &:focus,
+        &:active {
+          background-color: var(--p-color-bg-strong-active) !important;
+        }
+        /* stylelint-disable-next-line selector-max-combinators, max-nesting-depth, selector-max-compound-selectors -- se23 */
+        svg {
+          fill: var(--p-color-icon-critical-strong-experimental);
+        }
+      }
+    }
+  }
 }

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

@@ -17,6 +17,10 @@ body {
   color: var(--p-color-text);
 }
 
+#{$se23} body {
+  font-size: var(--p-font-size-80-experimental);
+}
+
 html,
 body,
 button {