Update ActionList mobile styles

Shopify · Apr 26, 2024 · 9ebcf93 · 9ebcf93
1 parent 0d84aa2
commit 9ebcf93
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 48 deletions.
diff --git a/.changeset/seven-starfishes-fail.md b/.changeset/seven-starfishes-fail.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated `ActionList` sizing and styling for small screens
diff --git a/polaris-react/src/components/ActionList/ActionList.module.css b/polaris-react/src/components/ActionList/ActionList.module.css
@@ -1,8 +1,7 @@
 .Item {
   /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
   @mixin unstyled-button;
-  /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
-  @mixin focus-ring wide;
+
   /* stylelint-disable -- Polaris component custom properties */
   --pc-action-list-item-min-height: var(--p-space-800);
   --pc-action-list-indented-item-margin: calc(
@@ -21,16 +20,23 @@
   display: flex;
   align-items: center;
   width: 100%;
+  min-width: 212px;
   /* 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;
-  padding: var(--p-space-100) var(--p-space-150);
-  border-radius: var(--p-border-radius-200);
+  padding: var(--p-space-300);
+  border-radius: 0;
   border-top: var(--p-border-width-025) solid transparent;
   color: inherit;
 
+  @media (--p-breakpoints-md-up) {
+    min-width: 0;
+    padding: var(--p-space-100) var(--p-space-150);
+    border-radius: var(--p-border-radius-200);
+  }
+
   @media (forced-colors: active) {
     border: var(--p-border-width-025) solid transparent;
   }
@@ -50,10 +56,24 @@
   }
 
   &:focus-visible:not(:active) {
-    /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
-    @mixin no-focus-ring;
-    background-color: var(--p-color-bg-surface);
-    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
+    /* stylelint-disable-next-line selector-max-specificity -- Targeting a child element here avoids complexity on mobile with focus-ring border-radiuses (ex: https://github.com/Shopify/polaris/pull/11943) */
+    .ContentElement {
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
+      outline-offset: var(--p-space-100);
+      border-radius: var(--p-border-radius-050);
+
+      @media (--p-breakpoints-md-up) {
+        outline: none;
+        outline-offset: 0;
+        border-radius: 0;
+      }
+    }
+
+    @media (--p-breakpoints-md-up) {
+      background-color: var(--p-color-bg-surface);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
+      outline-offset: calc(-1 * var(--p-border-width-050));
+    }
   }
 
   &:visited {

diff --git a/polaris-react/src/components/ActionList/ActionList.stories.tsx b/polaris-react/src/components/ActionList/ActionList.stories.tsx
@@ -146,37 +146,37 @@ export const WithAnIconAndASuffix = {
           autofocusTarget="first-node"
           onClose={toggleActive}
         >
-          <div style={{width: '200px'}}>
-            <ActionList
-              actionRole="menuitem"
-              items={[
-                {
-                  active: true,
-                  content: 'Import file',
-                  icon: ImportIcon,
-                  suffix: <Icon source={CheckSmallIcon} />,
-                },
-                {content: 'Export file', icon: ExportIcon},
-                {
-                  content: 'Manage your blog articles',
-                  icon: ImportIcon,
-                  suffix: <Icon source={CheckSmallIcon} />,
-                },
-                {
-                  content: `Manage uploaded images`,
-                  icon: ImportIcon,
-                  suffix: <Icon source={CheckSmallIcon} />,
-                  truncate: true,
-                },
-                {
-                  disabled: true,
-                  content: 'Disable file',
-                  icon: ImportIcon,
-                  suffix: <Icon source={CheckSmallIcon} />,
-                },
-              ]}
-            />
-          </div>
+          {/* <div style={{width: '200px'}}> */}
+          <ActionList
+            actionRole="menuitem"
+            items={[
+              {
+                active: true,
+                content: 'Import file',
+                icon: ImportIcon,
+                suffix: <Icon source={CheckSmallIcon} />,
+              },
+              {content: 'Export file', icon: ExportIcon},
+              {
+                content: 'Manage your blog articles',
+                icon: ImportIcon,
+                suffix: <Icon source={CheckSmallIcon} />,
+              },
+              {
+                content: `Manage uploaded images`,
+                icon: ImportIcon,
+                suffix: <Icon source={CheckSmallIcon} />,
+                truncate: true,
+              },
+              {
+                disabled: true,
+                content: 'Disable file',
+                icon: ImportIcon,
+                suffix: <Icon source={CheckSmallIcon} />,
+              },
+            ]}
+          />
+          {/* </div> */}
         </Popover>
       </div>
     );

diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx
@@ -122,12 +122,18 @@ export function Item({
   );
 
   const contentElement = (
-    <InlineStack blockAlign="center" gap="150" wrap={false}>
-      {prefixMarkup}
-      {textMarkup}
-      {badgeMarkup}
-      {suffixMarkup}
-    </InlineStack>
+    <div className={styles.ContentElement}>
+      <InlineStack
+        blockAlign="center"
+        gap={{xs: '200', md: '150'}}
+        wrap={false}
+      >
+        {prefixMarkup}
+        {textMarkup}
+        {badgeMarkup}
+        {suffixMarkup}
+      </InlineStack>
+    </div>
   );
 
   const contentWrapper = <Box width="100%">{contentElement}</Box>;

diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -104,11 +104,15 @@ export function Section({
       {titleMarkup}
       <Box
         as="div"
-        padding="150"
+        padding={{xs: '0', md: '150'}}
         {...(hasMultipleSections && {paddingBlockStart: '0'})}
         tabIndex={!hasMultipleSections ? -1 : undefined}
       >
-        <BlockStack gap="050" as="ul" {...(sectionRole && {role: sectionRole})}>
+        <BlockStack
+          gap={{xs: '0', md: '050'}}
+          as="ul"
+          {...(sectionRole && {role: sectionRole})}
+        >
           {actionMarkup}
         </BlockStack>
       </Box>
@@ -122,7 +126,7 @@ export function Section({
       borderColor="border-secondary"
       {...(!isFirst && {borderBlockStartWidth: '025'})}
       {...(!section.title && {
-        paddingBlockStart: '150',
+        paddingBlockStart: {xs: '0', md: '150'},
       })}
     >
       {sectionMarkup}