From 0ac65ae63c5bfd650b7b1731d37efef8a417c92b Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Fri, 19 Apr 2024 11:56:41 -0600
Subject: [PATCH] Update ChoiceList mobile styles

---
 .../src/components/Choice/Choice.module.css       | 15 +++++++++++++--
 .../components/ChoiceList/ChoiceList.module.css   |  6 ++++--
 .../components/ChoiceList/ChoiceList.stories.tsx  |  2 +-
 .../src/components/ChoiceList/ChoiceList.tsx      |  8 ++------
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/polaris-react/src/components/Choice/Choice.module.css b/polaris-react/src/components/Choice/Choice.module.css
index feaf003ee98..413a675b1d3 100644
--- 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
index ddc5dff3952..fc8bab4f822 100644
--- 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
index 3abd0099b73..7a8d78452cd 100644
--- a/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx
+++ b/polaris-react/src/components/ChoiceList/ChoiceList.stories.tsx
@@ -152,7 +152,7 @@ export const 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
index 7b80777b952..19127e05f44 100644
--- 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>
   );