changed font size and spacing for primary and secondary buttons

Shopify · Apr 17, 2024 · f322374 · f322374
1 parent a60d8aa
commit f322374
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/polaris-react/src/components/Button/Button.module.css b/polaris-react/src/components/Button/Button.module.css
@@ -226,24 +226,26 @@
 
 .sizeSlim,
 .sizeMedium {
-  --pc-button-padding-block: var(--p-space-150);
+  --pc-button-padding-block: var(--p-space-300);
   --pc-button-padding-inline: var(--p-space-300);
   min-height: var(--p-height-800);
   min-width: var(--p-width-800);
 
   @media (--p-breakpoints-md-up) {
+    --pc-button-padding-block: var(--p-space-150);
     min-height: var(--p-height-700);
     min-width: var(--p-width-700);
   }
 }
 
 .sizeLarge {
-  --pc-button-padding-block: var(--p-space-150);
+  --pc-button-padding-block: var(--p-space-300);
   --pc-button-padding-inline: var(--p-space-300);
   min-height: var(--p-height-900);
   min-width: var(--p-height-900);
 
   @media (--p-breakpoints-md-up) {
+    --pc-button-padding-block: var(--p-space-150);
     min-height: var(--p-height-800);
     min-width: var(--p-width-800);
   }
@@ -274,13 +276,21 @@
 
 /* ICON */
 .iconOnly {
-  --pc-button-padding-block: var(--p-space-100);
-  --pc-button-padding-inline: var(--p-space-100);
+  --pc-button-padding-block: var(--p-space-300);
+  --pc-button-padding-inline: var(--p-space-300);
+  @media (--p-breakpoints-md-up) {
+    --pc-button-padding-block: var(--p-space-100);
+    --pc-button-padding-inline: var(--p-space-100);
+  }
 }
 
 .iconOnly:is(.sizeLarge) {
-  --pc-button-padding-block: var(--p-space-150);
-  --pc-button-padding-inline: var(--p-space-150);
+  --pc-button-padding-block: var(--p-space-300);
+  --pc-button-padding-inline: var(--p-space-300);
+  @media (--p-breakpoints-md-up) {
+    --pc-button-padding-block: var(--p-space-150);
+    --pc-button-padding-inline: var(--p-space-150);
+  }
 }
 
 .iconOnly:is(.sizeMicro) {

diff --git a/polaris-react/src/components/Button/Button.tsx b/polaris-react/src/components/Button/Button.tsx
@@ -126,6 +126,10 @@ export function Button({
   const isDisabled = disabled || loading;
   const {mdUp} = useBreakpoints();
 
+  if (!mdUp && ['primary', 'secondary'].includes(variant)) {
+    fullWidth = true;
+  }
+
   const className = classNames(
     styles.Button,
     styles.pressable,
@@ -181,6 +185,10 @@ export function Button({
     textVariant = 'bodyMd';
   }
 
+  if (!mdUp && ['primary', 'secondary'].includes(variant)) {
+    textVariant = 'headingMd';
+  }
+
   const childMarkup = children ? (
     <Text
       as="span"