From 9fce7c338570196d2299e4c520fa4346de7fc258 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Cort=C3=A9s?=
 <477473+davebcn87@users.noreply.github.com>
Date: Wed, 17 Apr 2024 15:52:11 +0200
Subject: [PATCH] changed font size and spacing for primary and secondary
 buttons

---
 .../src/components/Button/Button.module.css   | 22 ++++++++++++++-----
 .../src/components/Button/Button.tsx          | 13 +++++++++++
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/polaris-react/src/components/Button/Button.module.css b/polaris-react/src/components/Button/Button.module.css
index 6bad52a3504..a416f7f88bc 100644
--- 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
index af3e2f52b20..7d79599fcc3 100644
--- a/polaris-react/src/components/Button/Button.tsx
+++ b/polaris-react/src/components/Button/Button.tsx
@@ -126,6 +126,14 @@ export function Button({
   const isDisabled = disabled || loading;
   const {mdUp} = useBreakpoints();
 
+  if (
+    !mdUp &&
+    ['primary', 'secondary'].includes(variant) &&
+    fullWidth !== false
+  ) {
+    fullWidth = true;
+  }
+
   const className = classNames(
     styles.Button,
     styles.pressable,
@@ -181,6 +189,11 @@ export function Button({
     textVariant = 'bodyMd';
   }
 
+  if (!mdUp && ['primary', 'secondary'].includes(variant)) {
+    textVariant = 'bodySm';
+    textFontWeight = 'medium';
+  }
+
   const childMarkup = children ? (
     <Text
       as="span"