Adjusts the spacing on button icons (#46)

tgstation · Dec 26, 2024 · e03b0c1 · e03b0c1
1 parent e91fa9a
commit e03b0c1
Show file tree

Hide file tree

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

diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import type { ComponentProps } from 'react';
+import { type ComponentProps, useState } from 'react';
 import { Button } from '../lib/components/Button';
 
 type StoryProps = ComponentProps<typeof Button>;
@@ -19,12 +19,36 @@ export const Default: Story = {
 
 type CheckboxStory = StoryObj<ComponentProps<typeof Button.Checkbox>>;
 
+export const WithIcon: Story = {
+  args: {
+    children: 'Submit',
+    icon: 'envelope',
+  },
+};
+
 export const Checkbox: CheckboxStory = {
   args: {
     children: 'Click me',
     checked: false,
+    color: 'default',
+  },
+  render: (args) => {
+    const [checked, setChecked] = useState(false);
+
+    return (
+      <>
+        ** Note that checkbox is transparent by default, so this is set to blue
+        via params **
+        <br />
+        <br />
+        <Button.Checkbox
+          {...args}
+          checked={checked}
+          onClick={() => setChecked(!checked)}
+        />
+      </>
+    );
   },
-  render: (args) => <Button.Checkbox {...args} />,
 };
 
 type ConfirmStory = StoryObj<ComponentProps<typeof Button.Confirm>>;
@@ -34,7 +58,7 @@ export const Confirm: ConfirmStory = {
     children: 'Click me',
     confirmColor: 'bad',
     confirmContent: 'Confirm?',
-    confirmIcon: 'question',
+    confirmIcon: '',
   },
   render: (args) => <Button.Confirm {...args} />,
 };