Mobile update for choice list (#5712)

* Radio button and checkbox styles * Create long-falcons-teach.md * Adjust offset for new checkbox size * Update choice token values * You put your tokens here, you put your tokens there, you put your tokens here and you shake them all about. You do the tokens hokey pokey and you turn yourself around. That's what it's all about! 🎶 * Magic number ✨🎲 * Update `ChoiceList` spacing on mobile Co-authored-by: Alex Page <hi@alexpage.dev> Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Shopify · May 27, 2022 · 290b41c · 290b41c
1 parent 66b43a6
commit 290b41c
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 7 deletions.
diff --git a/.changeset/long-falcons-teach.md b/.changeset/long-falcons-teach.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+---
+
+- Update checkbox and radio button styling
+- Increase spacing between `ChoiceList` items on small screens only
diff --git a/polaris-react/src/components/Choice/Choice.scss b/polaris-react/src/components/Choice/Choice.scss
@@ -37,6 +37,9 @@
 }
 
 .Control {
+  @include when-typography-condensed {
+    --p-choice-size: 22px;
+  }
   display: flex;
   flex: 0 0 auto;
   align-items: stretch;
@@ -51,6 +54,7 @@
 
 .Label {
   @include text-style-body;
+
   -webkit-tap-highlight-color: transparent;
 
   &:hover {
@@ -59,6 +63,9 @@
 }
 
 .Descriptions {
+  @include when-typography-condensed {
+    --p-choice-size: 22px;
+  }
   padding-left: calc(var(--p-space-2) + var(--p-choice-size));
 }
 

diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.scss b/polaris-react/src/components/ChoiceList/ChoiceList.scss
@@ -6,6 +6,12 @@
   border: none;
 }
 
+.ChoiceItem:not(:last-child) {
+  @include when-typography-condensed {
+    margin-bottom: var(--p-space-4);
+  }
+}
+
 .titleHidden > .Title {
   @include visually-hidden;
 }
@@ -17,18 +23,30 @@
 }
 
 .ChoiceChildren {
+  @include when-typography-condensed {
+    margin-top: var(--p-space-4);
+  }
+
   margin-bottom: var(--p-space-2);
   padding-left: calc(var(--p-space-2) + var(--p-choice-size));
 }
 
 .ChoiceError {
   margin-top: var(--p-space-1);
   margin-bottom: var(--p-space-2);
+
+  @include when-typography-condensed {
+    margin-top: var(--p-space-4);
+  }
 }
 
 .Title {
   @include text-style-body;
   display: block;
   margin: 0 0 var(--p-space-1);
   padding: 0;
+
+  @include when-typography-condensed {
+    margin-bottom: var(--p-space-5);
+  }
 }
diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.tsx
@@ -97,7 +97,7 @@ export function ChoiceList({
     ) : null;
 
     return (
-      <li key={value}>
+      <li key={value} className={styles.ChoiceItem}>
         <ControlComponent
           name={finalName}
           value={value}

diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -3,7 +3,7 @@
 $breakpoint-small: 458px;
 
 .IndexTable {
-  --pc-index-table-translate-offset: calc(50px - var(--p-space-4));
+  --pc-index-table-translate-offset: 35px;
   --pc-index-table-table-header-offset: 52px;
   --pc-index-table-cell: 1;
   --pc-index-table-sticky-cell: 31;

diff --git a/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss b/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss
@@ -4,7 +4,6 @@
   position: relative;
   width: 100%;
   margin: var(--p-choice-margin);
-
   // stylelint-disable-next-line selector-max-class
   &.active .Backdrop {
     @include focus-ring($style: 'focused');

diff --git a/polaris-react/src/components/RadioButton/RadioButton.scss b/polaris-react/src/components/RadioButton/RadioButton.scss
@@ -43,13 +43,18 @@
 
 .Backdrop {
   // ::before is the selected dot, ::after the focus-ring
+
+  @include when-typography-condensed {
+    --p-icon-size-small: 10px;
+  }
+
   position: relative;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 100%;
-  border: var(--p-control-border-width) solid var(--p-border);
+  border: var(--p-control-border-width) solid var(--p-border-subdued);
   border-radius: var(--p-border-radius-half);
   background-color: var(--p-surface);
   transition: border-color var(--p-duration-100) var(--p-ease);

diff --git a/polaris-react/src/styles/shared/_controls.scss b/polaris-react/src/styles/shared/_controls.scss
@@ -19,7 +19,7 @@
 @mixin control-backdrop($style: base) {
   @if $style == base {
     position: relative;
-    border: var(--p-control-border-width) solid var(--p-border);
+    border: var(--p-control-border-width) solid var(--p-border-subdued);
     background-color: var(--p-surface);
     border-radius: var(--p-border-radius-1);
 

diff --git a/polaris-react/src/tokens/token-groups/legacy-tokens.json b/polaris-react/src/tokens/token-groups/legacy-tokens.json
@@ -1,7 +1,7 @@
 {
   "override-loading-z-index": "514",
   "choice-size": "20px",
-  "icon-size-small": "10px",
+  "icon-size-small": "8px",
   "icon-size-medium": "20px",
   "choice-margin": "1px",
   "control-border-width": "2px",

diff --git a/polaris-tokens/src/token-groups/legacy.ts b/polaris-tokens/src/token-groups/legacy.ts
@@ -6,7 +6,7 @@ export const legacy = {
     value: '20px',
   },
   'icon-size-small': {
-    value: '10px',
+    value: '8px',
   },
   'icon-size-medium': {
     value: '20px',