Update ChoiceList mobile styles

Shopify · Apr 19, 2024 · fab4bbd · fab4bbd
1 parent 5ec03e7
commit fab4bbd
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 11 deletions.
diff --git a/polaris-react/src/components/Choice/Choice.module.css b/polaris-react/src/components/Choice/Choice.module.css
@@ -22,11 +22,11 @@
   cursor: pointer;
   padding-block-start: calc(
     var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) +
-      var(--p-space-100)
+      var(--p-space-300)
   );
   padding-block-end: calc(
     var(--pc-choice-bleed-block-end, var(--pc-choice-space-0)) +
-      var(--p-space-100)
+      var(--p-space-300)
   );
   padding-inline-start: var(
     --pc-choice-bleed-inline-start,
@@ -60,6 +60,17 @@
       var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) +
       var(--pc-choice-bleed-block-end, var(--pc-choice-space-0))
   );
+
+  @media (--p-breakpoints-md-up) {
+    padding-block-start: calc(
+      var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) +
+        var(--p-space-100)
+    );
+    padding-block-end: calc(
+      var(--pc-choice-bleed-block-end, var(--pc-choice-space-0)) +
+        var(--p-space-100)
+    );
+  }
 }
 
 .labelHidden {

diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.module.css b/polaris-react/src/components/ChoiceList/ChoiceList.module.css
@@ -1,4 +1,6 @@
 .ChoiceChildren {
-  /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
-  padding-left: calc(var(--p-space-200) + 20px);
+  @media (--p-breakpoints-md-up) {
+    /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
+    padding-left: calc(var(--p-space-200) + 20px);
+  }
 }
diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx
@@ -138,7 +138,7 @@ export function WithChildrenContent() {
   const renderChildren = useCallback(
     () => (
       <TextField
-        label="Minimum Quantity"
+        label="Minimum Purchase"
         labelHidden
         onChange={handleTextFieldChange}
         value={textFieldValue}

diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.tsx
@@ -101,9 +101,7 @@ export function ChoiceList({
       ? choice.renderChildren(isSelected)
       : null;
     const children = renderedChildren ? (
-      <div className={styles.ChoiceChildren}>
-        <Box paddingBlockStart={{xs: '400', md: '0'}}>{renderedChildren}</Box>
-      </div>
+      <div className={styles.ChoiceChildren}>{renderedChildren}</div>
     ) : null;
     return (
       <li key={value}>
@@ -143,9 +141,7 @@ export function ChoiceList({
       id={finalName}
     >
       {titleMarkup}
-      <BlockStack as="ul" gap={{xs: '400', md: '0'}}>
-        {choicesMarkup}
-      </BlockStack>
+      <BlockStack as="ul">{choicesMarkup}</BlockStack>
       {errorMarkup}
     </BlockStack>
   );