Update RadioButton mobile styles

Shopify · Apr 19, 2024 · 7f0a868 · 7f0a868
1 parent 145a611
commit 7f0a868
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/.changeset/selfish-oranges-listen.md b/.changeset/selfish-oranges-listen.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated `RadioButton` styles improve mobile consistency
diff --git a/polaris-react/src/components/RadioButton/RadioButton.module.css b/polaris-react/src/components/RadioButton/RadioButton.module.css
@@ -1,6 +1,9 @@
 .RadioButton {
   position: relative;
-  margin: var(--p-space-025);
+
+  @media (--p-breakpoints-md-up) {
+    margin: var(--p-space-025);
+  }
 }
 
 /* stylelint-disable selector-max-specificity, selector-max-class, selector-max-combinators -- code is much more readable this way */
@@ -97,25 +100,29 @@
 
 .Backdrop {
   /* stylelint-disable-next-line -- Polaris component custom properties */
-  --pc-icon-size-small: 8px;
+  --pc-icon-size-small: 10px;
 
   /* ::before is the selected dot, ::after the focus-ring */
 
-  @media (--p-breakpoints-md-down) {
+  @media (--p-breakpoints-md-up) {
     /* stylelint-disable-next-line -- Polaris component custom properties */
-    --pc-icon-size-small: 10px;
+    --pc-icon-size-small: 8px;
   }
   position: relative;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 100%;
-  border: var(--p-border-width-0165) solid var(--p-color-input-border);
+  border: var(--p-border-width-025) solid var(--p-color-input-border);
   border-radius: var(--p-border-radius-full);
   background-color: var(--p-color-input-bg-surface);
   transition: border-color var(--p-motion-duration-100) var(--p-motion-ease-out);
 
+  @media (--p-breakpoints-md-up) {
+    border: var(--p-border-width-0165) solid var(--p-color-input-border);
+  }
+
   &::before {
     content: '';
     position: absolute;