chore: update IconButton & TextButton

.changeset/cuddly-jokes-stare.md

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

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

@@ -1,3 +1,5 @@
+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';
@@ -165,13 +167,13 @@ export const AllVariants = {
           <Typography variant="sigma">Variant</Typography>
         </Grid.Item>
         {OPTIONS.map((opt) => (
-          <Grid.Item key={`${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>
@@ -199,7 +201,7 @@ export const AllVariants = {
                   </Grid.Item>
                 );
               })}
-            </>
+            </React.Fragment>
           );
         })}
       </Grid.Root>

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 it's 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} />

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

@@ -0,0 +1,166 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Flex, IconButton, IconButtonGroup, IconButtonProps } from '@strapi/design-system';
+import * as Icons from '@strapi/icons';
+import { outdent } from 'outdent';
+
+interface IconButtonArgs extends IconButtonProps {
+  children: keyof typeof Icons;
+}
+
+const BUTTON_VARIANTS = [
+  'default',
+  'secondary',
+  'tertiary',
+  'success',
+  'success-light',
+  'danger',
+  'danger-light',
+  'ghost',
+] as const;
+
+const meta: Meta<IconButtonArgs> = {
+  title: 'Components/IconButton',
+  component: IconButton,
+  args: {
+    children: 'More',
+    disabled: false,
+    label: 'More actions',
+    onClick: fn(),
+    size: 'M',
+    variant: 'tertiary',
+  },
+  argTypes: {
+    children: {
+      control: 'select',
+      options: Object.keys(Icons),
+    },
+    size: {
+      control: 'select',
+      options: ['S', 'M', 'L'],
+    },
+    variant: {
+      control: 'select',
+      options: BUTTON_VARIANTS,
+    },
+  },
+  parameters: {
+    chromatic: { disableSnapshot: false },
+    docs: {
+      source: {
+        code: outdent`
+          <IconButton label="More actions">
+            <More />
+          </IconButton>
+        `,
+      },
+    },
+  },
+  render: ({ children, ...args }) => {
+    // eslint-disable-next-line import/namespace
+    const Icon = Icons[children];
+
+    return (
+      <IconButton {...args}>
+        <Icon />
+      </IconButton>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<IconButtonArgs>;
+
+export const Base = {
+  name: 'base',
+} satisfies Story;
+
+export const Disabled = {
+  args: {
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: outdent`
+          <IconButton disabled label="More actions">
+            <More />
+          </IconButton>
+        `,
+      },
+    },
+  },
+  name: 'disabled',
+} satisfies Story;
+
+export const SizeSmall = {
+  args: {
+    size: 'S',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: outdent`
+          <IconButton size="S" label="More actions">
+            <More />
+          </IconButton>
+        `,
+      },
+    },
+  },
+  name: 'size small',
+} satisfies Story;
+
+export const SizeLarge = {
+  args: {
+    size: 'L',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: outdent`
+          <IconButton size="L" label="More actions">
+            <More />
+          </IconButton>
+        `,
+      },
+    },
+  },
+  name: 'size large',
+} satisfies Story;
+
+export const AllVariants = {
+  render: ({ children, ...args }) => {
+    // eslint-disable-next-line import/namespace
+    const Icon = Icons[children];
+
+    return (
+      <Flex gap={2}>
+        {BUTTON_VARIANTS.map((variant) => (
+          <IconButton key={variant} {...args} variant={variant}>
+            <Icon />
+          </IconButton>
+        ))}
+      </Flex>
+    );
+  },
+  name: 'all variants',
+} satisfies Story;
+
+export const Group = {
+  render: () => (
+    <IconButtonGroup>
+      <IconButton label="Edit">
+        <Icons.Pencil />
+      </IconButton>
+      <IconButton label="Clone">
+        <Icons.Duplicate />
+      </IconButton>
+      <IconButton label="Delete" variant="danger">
+        <Icons.Trash />
+      </IconButton>
+    </IconButtonGroup>
+  ),
+  name: 'group',
+};

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

@@ -32,7 +32,6 @@ const meta: Meta<ProgressArgs> = {
     },
   },
   args: {
-    children: 'loading',
     size: 'M',
     value: 50,
   },

docs/stories/04-components/TextButton.mdx

@@ -0,0 +1,81 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import { TextButton } from '@strapi/design-system';
+
+import * as TextButtonStories from './TextButton.stories';
+
+<Meta of={TextButtonStories} />
+
+# TextButton
+
+- [Overview](#overview)
+- [Usage](#usage)
+- [Props](#props)
+- [Variants](#variants)
+- [Usage with other routing libraries](#usage-with-other-routing-libraries)
+
+## Overview
+
+Typically used for internal navigation within a Strapi application. These buttons are not supposed to have "actions"
+e.g. clone a document.
+
+<ViewSource path="components/TextButton" />
+
+## Usage
+
+```ts
+import { TextButton } from '@strapi/design-system';
+```
+
+<Canvas of={TextButtonStories.Base} />
+
+## Props
+
+<TypeTable of={TextButton} />
+
+## Variants
+
+### Disabled
+
+<Canvas of={TextButtonStories.Disabled} />
+
+### Loading
+
+<Canvas of={TextButtonStories.Loading} />
+
+### With start icon
+
+<Canvas of={TextButtonStories.StartIcon} />
+
+### With end icon
+
+<Canvas of={TextButtonStories.EndIcon} />
+
+## Usage with other routing libraries
+
+### React Router
+
+To use the LinkButton component with a routing library (e.g. react-router-dom), you'll need to pass the `NavLink`
+component to the `tag` prop in order to replace the default HTML anchor `<a />`. You'll now be able to pass all
+`NavLink` props.
+
+```jsx
+import { TextButton } from '@strapi/design-system';
+import { NavLink } from 'react-router-dom';
+
+<TextButton tag={NavLink} to="/home">
+  Home
+</TextButton>;
+```
+
+### NextJS
+
+For NextJS, you'll need to wrap the `LinkButton` with the `NextLink` component
+
+```jsx
+import { TextButton } from '@strapi/design-system';
+import NextLink from 'next/link';
+
+<NextLink href="/home" passHref>
+  <TextButton>Home</TextButton>
+</NextLink>;
+```