Use the correct icon size on large icon buttons

They're designed to be 24px.
element-hq · Aug 22, 2024 · 4d69c9c · 4d69c9c
1 parent ab86e5b
commit 4d69c9c
Show file tree

Hide file tree

Showing 11 changed files with 4 additions and 2 deletions.
diff --git a/playwright/visual.test.ts-snapshots/Button-Actions-End-Call-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Button-Actions-End-Call-1-chromium-linux.png
diff --git a/playwright/visual.test.ts-snapshots/Button-Actions-Fullscreen-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Button-Actions-Fullscreen-1-chromium-linux.png
diff --git a/playwright/visual.test.ts-snapshots/Button-Actions-Mic-Off-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Button-Actions-Mic-Off-1-chromium-linux.png
diff --git a/playwright/visual.test.ts-snapshots/Button-Actions-Mic-On-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Button-Actions-Mic-On-1-chromium-linux.png
diff --git a/playwright/visual.test.ts-snapshots/Button-Actions-Settings-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Button-Actions-Settings-1-chromium-linux.png
diff --git a/playwright/visual.test.ts-snapshots/Button-Actions-Share-Link-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Button-Actions-Share-Link-1-chromium-linux.png
diff --git a/...right/visual.test.ts-snapshots/Button-Actions-Share-Screen-1-chromium-linux.png b/...right/visual.test.ts-snapshots/Button-Actions-Share-Screen-1-chromium-linux.png
diff --git a/...ght/visual.test.ts-snapshots/Button-Actions-Sharing-Screen-1-chromium-linux.png b/...ght/visual.test.ts-snapshots/Button-Actions-Sharing-Screen-1-chromium-linux.png
diff --git a/playwright/visual.test.ts-snapshots/Button-Actions-Video-Off-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Button-Actions-Video-Off-1-chromium-linux.png
diff --git a/playwright/visual.test.ts-snapshots/Button-Actions-Video-On-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Button-Actions-Video-On-1-chromium-linux.png
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -98,6 +98,8 @@ export const Button = forwardRef(function Button<
     [styles.destructive]: destructive,
   });
 
+  const iconSize = iconOnly && size === "lg" ? 24 : 20;
+
   return (
     <UnstyledButton
       {...props}
@@ -111,8 +113,8 @@ export const Button = forwardRef(function Button<
     >
       {Icon && (
         <Icon
-          width={20}
-          height={20}
+          width={iconSize}
+          height={iconSize}
           className={styles.icon}
           aria-hidden={true}
         />