Update checkbox styling for mobile webviews

Shopify · May 7, 2024 · 2571926 · 2571926
1 parent f07e1b0
commit 2571926
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 32 deletions.
diff --git a/.changeset/mean-seals-sip.md b/.changeset/mean-seals-sip.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Update `Checkbox` styling to improve mobile consistency
diff --git a/polaris-react/src/components/Checkbox/Checkbox.module.css b/polaris-react/src/components/Checkbox/Checkbox.module.css
@@ -5,20 +5,30 @@
 
 .ChoiceLabel .Backdrop {
   border-width: 0;
-  box-shadow: inset 0 0 0 var(--p-border-width-0165) var(--p-color-input-border);
+  box-shadow: inset 0 0 0 var(--p-border-width-025) var(--p-color-input-border);
   transition: border-color var(--p-motion-duration-100) var(--p-motion-ease-out),
     border-width var(--p-motion-duration-100) var(--p-motion-ease-out),
     box-shadow var(--p-motion-duration-100) var(--p-motion-ease-out);
 
   /* This fixes artifacts caused by box-shadow in some browsers */
   transform: translate3d(0, 0, 0);
+
+  @media (--p-breakpoints-md-up) {
+    box-shadow: inset 0 0 0 var(--p-border-width-0165)
+      var(--p-color-input-border);
+  }
 }
 
 .ChoiceLabel:hover .Backdrop {
   border-color: var(--p-color-input-border-hover);
-  box-shadow: inset 0 0 0 var(--p-border-width-0165)
+  box-shadow: inset 0 0 0 var(--p-border-width-025)
     var(--p-color-input-border-hover);
   background-color: var(--p-color-input-bg-surface-hover);
+
+  @media (--p-breakpoints-md-up) {
+    box-shadow: inset 0 0 0 var(--p-border-width-0165)
+      var(--p-color-input-border-hover);
+  }
 }
 
 .ChoiceLabel:active .Backdrop,
@@ -145,12 +155,6 @@
   display: block;
   width: 100%;
   height: 100%;
-
-  border: var(--p-border-width-0165) solid var(--p-color-input-border);
-
-  &:hover {
-    border-color: var(--p-color-input-border-hover);
-  }
 }
 
 .Icon {
@@ -197,7 +201,7 @@
   }
 
   .Input {
-    + .Backdrop {
+    .Backdrop {
       /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
       @mixin control-backdrop error;
       background-color: var(--p-color-bg-surface-critical);

diff --git a/polaris-react/src/components/Checkbox/Checkbox.tsx b/polaris-react/src/components/Checkbox/Checkbox.tsx
@@ -5,7 +5,7 @@ import React, {
   useContext,
   useId,
 } from 'react';
-import {MinusIcon} from '@shopify/polaris-icons';
+import {MinusIcon, CheckIcon} from '@shopify/polaris-icons';
 
 import {classNames, variationName} from '../../utilities/css';
 import type {ResponsiveProp} from '../../utilities/css';
@@ -132,27 +132,6 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
       ? {indeterminate: 'true', 'aria-checked': 'mixed' as const}
       : {'aria-checked': isChecked};
 
-    const iconSource = (
-      <svg
-        viewBox="0 0 16 16"
-        shapeRendering="geometricPrecision"
-        textRendering="geometricPrecision"
-      >
-        <path
-          className={classNames(checked && styles.checked)}
-          d="M1.5,5.5L3.44655,8.22517C3.72862,8.62007,4.30578,8.64717,4.62362,8.28044L10.5,1.5"
-          transform="translate(2 2.980376)"
-          opacity="0"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          pathLength="1"
-        />
-      </svg>
-    );
-
     const inputClassName = classNames(
       styles.Input,
       isIndeterminate && styles['Input-indeterminate'],
@@ -211,7 +190,11 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
               !isIndeterminate && styles.animated,
             )}
           >
-            {isIndeterminate ? <Icon source={MinusIcon} /> : iconSource}
+            {isIndeterminate ? (
+              <Icon source={MinusIcon} />
+            ) : (
+              <Icon source={CheckIcon} />
+            )}
           </span>
         </span>
       </Choice>