Button padding change

src/components/Button/Button.style.ts

@@ -59,8 +59,8 @@ export const ButtonStyled = styled.button<any>`
 
 const sizePads = {
   xxs: 0.125,
-  xs: 0.25,
-  sm: 0.5,
+  xs: 0.3125,
+  sm: 0.625,
   md: 0.75,
   lg: 1,
   xl: 1.25,
@@ -134,24 +134,46 @@ function buttonMotion({ theme }) {
 
 function buttonPadding({ icon, iconOnly, iconPosition, size }) {
   return (
-    !iconOnly && iconButtonPadding(icon, iconPosition, sizePads[size])
+    !iconOnly &&
+    iconButtonPadding(icon, iconPosition, sizePads[size], size)
   );
 }
 
-function iconButtonPadding(icon, iconPosition, pad) {
+function iconButtonPadding(icon, iconPosition, pad, size) {
   const minHeight = rem(3);
   const minWidth = `${pad * 4 + 2}rem`;
 
+  // Some button sizes are "off" the padding formula based on design decions
+  const sizeAdjustments = {
+    xxs: { left: 0, right: 0 },
+    xs: { left: 0.065, right: 0.19125 },
+    sm: { left: -0.125, right: -0.125 },
+    md: { left: 0, right: 0 },
+    lg: { left: 0, right: 0 },
+    xl: { left: 0, right: 0 },
+    xxl: { left: 0, right: 0 },
+  };
+
   switch (icon && iconPosition) {
     case 'left':
       return {
-        padding: '0 ' + pad + 'rem',
+        padding:
+          '0 ' +
+          (pad + sizeAdjustments[size].right) +
+          'rem 0 ' +
+          (pad + sizeAdjustments[size].left) +
+          'rem',
         minHeight,
         minWidth,
       };
     case 'right':
       return {
-        padding: '0 ' + pad + 'rem',
+        padding:
+          '0 ' +
+          (pad + sizeAdjustments[size].right) +
+          'rem 0 ' +
+          (pad + sizeAdjustments[size].left) +
+          'rem',
         minHeight,
         minWidth,
       };

src/components/Button/Button.test.tsx

@@ -172,4 +172,58 @@ describe('Button', () => {
 
     expect(button).toHaveAttribute('disabled');
   });
+
+  it('Change padding based on size', () => {
+    const { rerender } = renderWithThemeProvider(
+      <Button icon={<Pencil />} size="xs">
+        Hello
+      </Button>
+    );
+
+    const button = screen.getByRole('button');
+
+    expect(button).toHaveStyle({
+      padding: '0px 0.50375rem 0px 0.3775rem',
+    });
+
+    rerender(
+      <Button icon={<Pencil />} size="sm">
+        Hello
+      </Button>
+    );
+
+    expect(button).toHaveStyle({
+      padding: '0px 0.5rem 0px 0.5rem',
+    });
+
+    rerender(
+      <Button icon={<Pencil />} size="md">
+        Hello
+      </Button>
+    );
+
+    expect(button).toHaveStyle({
+      padding: '0px 0.75rem 0px 0.75rem',
+    });
+
+    rerender(
+      <Button icon={<Pencil />} size="lg">
+        Hello
+      </Button>
+    );
+
+    expect(button).toHaveStyle({
+      padding: '0px 1rem 0px 1rem',
+    });
+
+    rerender(
+      <Button icon={<Pencil />} size="xl">
+        Hello
+      </Button>
+    );
+
+    expect(button).toHaveStyle({
+      padding: '0px 1.25rem 0px 1.25rem',
+    });
+  });
 });