Fixes icon-only button extra padding

tgstation · Jan 8, 2025 · bdaa8b4 · bdaa8b4
1 parent ee94a15
commit bdaa8b4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/lib/components/Button.tsx b/lib/components/Button.tsx
@@ -151,7 +151,7 @@ export function Button(props: Props) {
       <div className="Button__content">
         {icon && iconPosition !== 'right' && (
           <Icon
-            mr={toDisplay ? 0.5 : 0}
+            mr={toDisplay && 0.5}
             name={icon}
             color={iconColor}
             rotation={iconRotation}
@@ -173,7 +173,7 @@ export function Button(props: Props) {
         )}
         {icon && iconPosition === 'right' && (
           <Icon
-            ml={toDisplay ? 0.5 : 0}
+            ml={toDisplay && 0.5}
             name={icon}
             color={iconColor}
             rotation={iconRotation}

diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx
@@ -17,15 +17,28 @@ export const Default: Story = {
   },
 };
 
-type CheckboxStory = StoryObj<ComponentProps<typeof Button.Checkbox>>;
-
 export const WithIcon: Story = {
   args: {
-    children: 'Submit',
     icon: 'envelope',
   },
+
+  render: (args) => {
+    return (
+      <>
+        <Button {...args}>Default</Button>
+        <br />
+        <Button {...args} iconPosition="right">
+          Icon Right
+        </Button>
+        <br />
+        <Button {...args} /> Only Icon
+      </>
+    );
+  },
 };
 
+type CheckboxStory = StoryObj<ComponentProps<typeof Button.Checkbox>>;
+
 export const Checkbox: CheckboxStory = {
   args: {
     children: 'Click me',