Merge branch 'next' into progress-bar-tone

Author: aveline

.changeset/clever-ducks-camp.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+introduce a subdued prop to the popover pane component

.changeset/empty-walls-design.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed wrapping overflow of strings with no spacing within `Filters` popover

.changeset/lazy-apricots-visit.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed BannerExperimental no title hidden icon variant

.changeset/young-dragons-switch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed primary Button styles for Chrome on Android devices

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

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/locales/th.json

@@ -198,7 +198,7 @@
       "BulkActions": {
         "actionsActivatorLabel": "การดำเนินการ",
         "moreActionsActivatorLabel": "การดำเนินการเพิ่มเติม",
-        "warningMessage": "หากต้องการมอบประสบการณ์ใช้งานที่ดียิ่งขึ้นแก่ผู้ใช้ การดำเนินการที่ได้รับการโปรโมทไม่ควรมีมากเกิน {maxPromotedActions} รายการ"
+        "warningMessage": "หากต้องการมอบประสบการณ์ใช้งานที่ดียิ่งขึ้นแก่ผู้ใช้ การดำเนินการที่ได้รับการโปรโมตไม่ควรมีมากเกิน {maxPromotedActions} รายการ"
       },
       "showingTotalCount": "แสดง {resource} จำนวน {itemsCount} จาก {totalItemsCount} รายการ",
       "allFilteredItemsSelected": "เลือก {resourceNamePlural} ทั้ง {itemsLength}+ รายการในตัวกรองนี้แล้ว",

polaris-react/src/components/Banner/Banner.stories.tsx

@@ -295,6 +295,19 @@ export function All() {
           </Text>
         }
       />
+      <Text as="h2" variant="headingMd">
+        No title with hidden icon
+      </Text>
+      <AllBanners
+        title={undefined}
+        hideIcon
+        children={
+          <Text as="p">
+            Changing the phone number for this customer will unsubscribe them
+            from SMS marketing text messages until they provide consent.
+          </Text>
+        }
+      />
       <Text as="h2" variant="headingMd">
         Only title
       </Text>

polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx

@@ -206,11 +206,13 @@ export function InlineIconBanner({
       >
         <Box width="100%">
           <HorizontalStack gap="2" wrap={false} blockAlign={blockAlign}>
-            <div ref={iconNode}>
-              <Box background={backgroundColor} borderRadius="2" padding="1">
-                {bannerIcon}
-              </Box>
-            </div>
+            {bannerIcon ? (
+              <div ref={iconNode}>
+                <Box background={backgroundColor} borderRadius="2" padding="1">
+                  {bannerIcon}
+                </Box>
+              </div>
+            ) : null}
             <Box ref={contentNode} width="100%">
               <VerticalStack gap="2">
                 <div>{children}</div>

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

@@ -52,7 +52,7 @@ $bulk-actions-button-stacking-order: (
 .ButtonGroupWrapper {
   width: auto;
   justify-content: flex-start;
-  padding: var(--p-space-4);
+  padding: var(--p-space-3);
   background: var(--p-color-bg);
   border-radius: var(--p-border-radius-2);
   box-shadow: var(--p-shadow-md), var(--p-shadow-xl);
@@ -61,7 +61,7 @@ $bulk-actions-button-stacking-order: (
 
   @include shadow-bevel(
     $boxShadow: var(--p-shadow-md),
-    $borderRadius: var(--p-border-radius-2)
+    $borderRadius: var(--p-border-radius-3)
   );
 
   @media #{$p-breakpoints-sm-down} {
@@ -89,6 +89,45 @@ $bulk-actions-button-stacking-order: (
 
   button {
     display: flex;
+
+    #{$se23} & {
+      background-color: var(--p-color-bg-strong);
+      box-shadow: none;
+      /* stylelint-disable-next-line selector-max-combinators -- se23 */
+      &:hover {
+        background-color: var(--p-color-bg-strong-hover);
+        box-shadow: none;
+      }
+      /* stylelint-disable-next-line selector-max-combinators -- se23 */
+      &:focus-visible,
+      &:active {
+        background-color: var(--p-color-bg-strong-active);
+      }
+      /* stylelint-disable-next-line selector-max-combinators -- se23 */
+      &:focus-visible: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);
+      }
+      // stylelint-disable-next-line selector-max-combinators -- se23
+      &[aria-disabled='true'] {
+        background-color: var(--p-color-bg-transparent-disabled-experimental);
+      }
+    }
+  }
+
+  // Extra specificity
+  // stylelint-disable-next-line selector-max-class, selector-max-specificity -- se23
+  &.BulkActionButton.BulkActionButton button {
+    #{$se23} & {
+      // stylelint-disable-next-line selector-max-class, selector-max-combinators -- se23
+      &:focus-visible,
+      &:active {
+        box-shadow: var(--p-shadow-inset-md);
+      }
+    }
   }
 }