fix: icon button sizes & update button docs (#1738)

Co-authored-by: Rémi de Juvigny <8087692+remidej@users.noreply.github.com>

.changeset/cuddly-jokes-stare.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+fix(IconButton): sizing was wrong compared to other buttons

docs/stories/BaseLink.mdx → docs/stories/02-primitives/BaseLink.mdx

@@ -7,19 +7,23 @@ import * as BaseLinkStories from './BaseLink.stories';
 
 # BaseLink
 
+- [Overview](#overview)
+- [Usage](#usage)
+- [Props](#props)
+
+## Overview
+
 BaseLink allow users to navigate to a different location. This is a very basic implementation of the native HTML anchor
-`<a />` element.
+`<a />` element but with some presets to handle disabling & other quality of life tweaks.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/BaseLink)
+<ViewSource path="components/BaseLink" />
 
-## Imports
+## Usage
 
 ```js
 import { BaseLink } from '@strapi/design-system';
 ```
 
-## Usage
-
 <Canvas of={BaseLinkStories.Base} />
 
 ## Props

docs/stories/02-primitives/BaseLink.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BaseLink } from '@strapi/design-system';
+
+const meta: Meta<typeof BaseLink> = {
+  title: 'Primitives/BaseLink',
+  component: BaseLink,
+  parameters: {
+    chromatic: { disableSnapshot: false },
+  },
+  args: {
+    children: 'Strapi.io',
+    disabled: false,
+    href: 'https://strapi.io',
+    isExternal: true,
+  },
+  render: (args) => <BaseLink {...args} />,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BaseLink>;
+
+export const Base = {
+  name: 'base',
+} satisfies Story;
+
+export const Disabled = {
+  args: {
+    disabled: true,
+  },
+  name: 'disabled',
+} satisfies Story;

docs/stories/04-components/Button.mdx

@@ -0,0 +1,42 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import { Button } from '@strapi/design-system';
+
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+- [Overview](#overview)
+- [Usage](#usage)
+- [Props](#props)
+- [Variants](#variants)
+
+## Overview
+
+Buttons are a way to perform actions within a page. They help interact with its content via a single click. According to
+their style, specific labels and icons, they help understand the most important actions to take.
+
+<ViewSource path="components/Button" />
+
+## Usage
+
+```js
+import { Button } from '@strapi/design-system';
+```
+
+<Canvas of={ButtonStories.Base} />
+
+## Props
+
+<TypeTable of={Button} />
+
+## Variants
+
+Below, you can see a grid of the possible combinations a button can have upon it, for example we have different style
+variants that can denote status & intention i.e. the `danger` variant would indicate a destructive action.
+
+There are also other props such as `disabled` and `loading` that change the button. Buttons come in three sizes, `S`,
+`M` and `L`, and finally they can have an icon on the left or right side of the label.
+
+<Canvas of={ButtonStories.AllVariants} layout="fullscreen" />

docs/stories/04-components/Button.stories.tsx

@@ -0,0 +1,211 @@
+import * as React from 'react';
+
+import { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Button, ButtonProps, Grid, Typography } from '@strapi/design-system';
+import { CheckCircle, CrossCircle } from '@strapi/icons';
+import { outdent } from 'outdent';
+
+const BUTTON_VARIANTS = [
+  'default',
+  'secondary',
+  'tertiary',
+  'success',
+  'success-light',
+  'danger',
+  'danger-light',
+  'ghost',
+] as const;
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  args: {
+    children: 'submit',
+    disabled: false,
+    fullWidth: false,
+    loading: false,
+    onClick: fn(),
+    size: 'M',
+    variant: 'default',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['S', 'M', 'L'],
+    },
+    variant: {
+      control: 'select',
+      options: BUTTON_VARIANTS,
+    },
+  },
+  render: (args) => <Button {...args} />,
+  parameters: {
+    chromatic: { disableSnapshot: false },
+    docs: {
+      source: {
+        code: outdent`
+          <Button>submit</Button>
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Base = {
+  name: 'base',
+} satisfies Story;
+
+export const Disabled = {
+  args: {
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: outdent`
+          <Button disabled>submit</Button>
+        `,
+      },
+    },
+  },
+  name: 'disabled',
+} satisfies Story;
+
+export const Loading = {
+  args: {
+    children: 'submitting...',
+    loading: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: outdent`
+          <Button loading>submitting...</Button>
+        `,
+      },
+    },
+  },
+  name: 'loading',
+} satisfies Story;
+
+export const StartIcon = {
+  args: {
+    startIcon: <CheckCircle />,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: outdent`
+          <Button startIcon={<CheckCircle />}>submit</Button>
+        `,
+      },
+    },
+  },
+  name: 'with start icon',
+} satisfies Story;
+
+export const EndIcon = {
+  args: {
+    endIcon: <CrossCircle />,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: outdent`
+          <Button endIcon={<CheckCircle />}>submit</Button>
+        `,
+      },
+    },
+  },
+  name: 'with end icon',
+} satisfies Story;
+
+export const SizeSmall = {
+  args: {
+    size: 'S',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: outdent`
+          <Button size="S">submit</Button>
+        `,
+      },
+    },
+  },
+  name: 'size small',
+} satisfies Story;
+
+export const SizeLarge = {
+  args: {
+    size: 'L',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: outdent`
+          <Button size="L">submit</Button>
+        `,
+      },
+    },
+  },
+  name: 'size large',
+} satisfies Story;
+
+const OPTIONS = ['default', 'disabled', 'loading', 'size S', 'size M', 'size L', 'startIcon', 'endIcon'];
+
+export const AllVariants = {
+  render: () => {
+    return (
+      <Grid.Root gridCols={OPTIONS.length + 1} gap={6}>
+        <Grid.Item>
+          <Typography variant="sigma">Variant</Typography>
+        </Grid.Item>
+        {OPTIONS.map((opt) => (
+          <Grid.Item key={opt}>
+            <Typography variant="sigma">{opt}</Typography>
+          </Grid.Item>
+        ))}
+        {BUTTON_VARIANTS.map((variant) => {
+          return (
+            <React.Fragment key={variant}>
+              <Grid.Item>
+                <Typography>{variant}</Typography>
+              </Grid.Item>
+              {OPTIONS.map((opt) => {
+                const props: ButtonProps = {
+                  variant,
+                  size: 'M',
+                };
+
+                if (['disabled', 'loading'].includes(opt)) {
+                  props[opt] = true;
+                }
+
+                if (opt.startsWith('size')) {
+                  props.size = opt.split(' ')[1] as 'S' | 'M' | 'L';
+                }
+
+                if (['startIcon', 'endIcon'].includes(opt)) {
+                  props[opt] = <CheckCircle />;
+                }
+
+                return (
+                  <Grid.Item alignItems="center" justifyContent="center" key={`${variant}-${opt}`}>
+                    <Button {...props}>submit</Button>
+                  </Grid.Item>
+                );
+              })}
+            </React.Fragment>
+          );
+        })}
+      </Grid.Root>
+    );
+  },
+  name: 'all variants',
+};

docs/stories/04-components/IconButton.mdx

@@ -0,0 +1,58 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import { IconButton } from '@strapi/design-system';
+
+import * as IconButtonStories from './IconButton.stories';
+
+<Meta of={IconButtonStories} />
+
+# IconButton
+
+- [Overview](#overview)
+- [Usage](#usage)
+- [Props](#props)
+- [Variants](#variants)
+- [Button Groups](#button-groups)
+
+## Overview
+
+A type of button that does not have a visible label but instead an icon to denote its action. The component does require
+a label for accessibility & by default, will show a tooltip with that label.
+
+<ViewSource path="components/IconButton" />
+
+## Usage
+
+```js
+import { IconButton, IconButtonGroup } from '@strapi/design-system';
+```
+
+<Canvas of={IconButtonStories.Base} />
+
+## Props
+
+<TypeTable of={IconButton} />
+
+## Variants
+
+### Variant styles
+
+Similar to the [`Button`](../?path=/docs/components-button--docs) component, the `IconButton` component has the same
+variants available. However, `tertiary` is considered the default.
+
+<Canvas of={IconButtonStories.AllVariants} />
+
+### Disabled
+
+<Canvas of={IconButtonStories.Disabled} />
+
+### Small Size
+
+<Canvas of={IconButtonStories.SizeSmall} />
+
+### Large Size
+
+<Canvas of={IconButtonStories.SizeLarge} />
+
+## Button Groups
+
+<Canvas of={IconButtonStories.Group} />