fix(Button): address QA design feedback (#1940)

- increase icon size in lg/md buttons with icon layouts - increase spacing between buttons to match design
chanzuckerberg · May 14, 2024 · 1e431b4 · 1e431b4
1 parent 3298c66
commit 1e431b4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/src/components/Button/Button-v2.module.css b/src/components/Button/Button-v2.module.css
@@ -26,6 +26,12 @@
   .button--sm & {
     /* Offset to better align text in small button */
     transform: translateY(-1px);
+    gap: 0.25rem;
+  }
+
+  .button--md &,
+  .button--lg & {
+    gap: 0.5rem;
   }
 }
 

diff --git a/src/components/Button/Button-v2.tsx b/src/components/Button/Button-v2.tsx
@@ -141,11 +141,19 @@ export const Button = forwardRef<HTMLButtonElement, ButtonV2Props>(
             />
           )}
           {iconLayout === 'left' && (
-            <Icon name={icon} purpose="decorative" size="1rem" />
+            <Icon
+              name={icon}
+              purpose="decorative"
+              size={size === 'lg' ? '1.5rem' : '1rem'}
+            />
           )}
           {iconLayout !== 'icon-only' && children}
           {iconLayout === 'right' && (
-            <Icon name={icon} purpose="decorative" size="1rem" />
+            <Icon
+              name={icon}
+              purpose="decorative"
+              size={size === 'lg' ? '1.5rem' : '1rem'}
+            />
           )}
         </span>
         {isLoading && (

diff --git a/src/components/Button/__snapshots__/Button-v2.test.tsx.snap b/src/components/Button/__snapshots__/Button-v2.test.tsx.snap
@@ -179,10 +179,10 @@ exports[`<Button /> (v2) IconLayouts story renders snapshot 1`] = `
         aria-hidden="true"
         class="icon"
         fill="currentColor"
-        height="1rem"
-        style="--icon-size: 1rem;"
+        height="1.5rem"
+        style="--icon-size: 1.5rem;"
         viewBox="0 0 24 24"
-        width="1rem"
+        width="1.5rem"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
@@ -204,10 +204,10 @@ exports[`<Button /> (v2) IconLayouts story renders snapshot 1`] = `
         aria-hidden="true"
         class="icon"
         fill="currentColor"
-        height="1rem"
-        style="--icon-size: 1rem;"
+        height="1.5rem"
+        style="--icon-size: 1.5rem;"
         viewBox="0 0 24 24"
-        width="1rem"
+        width="1.5rem"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path