Update default size on IconButton

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.changeset/eight-pigs-post.md

@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+We set the default size for IconButton in Canon to be small instead of medium.

packages/canon/src/components/IconButton/IconButton.stories.tsx

@@ -34,29 +34,23 @@ const meta = {
       options: ['primary', 'secondary'],
     },
   },
-  args: {
-    size: 'medium',
-    variant: 'primary',
-  },
 } satisfies Meta<typeof IconButton>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Variants: Story = {
+export const Default: Story = {
   args: {
     icon: <Icon name="cloud" />,
-    'aria-label': 'Cloud icon button',
   },
-  parameters: {
-    argTypes: {
-      variant: {
-        control: false,
-      },
-    },
+};
+
+export const Variants: Story = {
+  args: {
+    ...Default.args,
   },
   render: args => (
-    <Flex align="center">
+    <Flex align="center" gap="2">
       <IconButton {...args} variant="primary" />
       <IconButton {...args} variant="secondary" />
     </Flex>
@@ -66,12 +60,11 @@ export const Variants: Story = {
 export const Sizes: Story = {
   args: {
     icon: <Icon name="cloud" />,
-    'aria-label': 'Cloud icon button',
   },
   render: args => (
-    <Flex align="center">
-      <IconButton {...args} size="medium" />
+    <Flex align="center" gap="2">
       <IconButton {...args} size="small" />
+      <IconButton {...args} size="medium" />
     </Flex>
   ),
 };
@@ -83,7 +76,7 @@ export const Disabled: Story = {
     'aria-label': 'Cloud icon button',
   },
   render: args => (
-    <Flex direction="row" gap="4">
+    <Flex direction="row" gap="2">
       <IconButton {...args} variant="primary" />
       <IconButton {...args} variant="secondary" />
     </Flex>

packages/canon/src/components/IconButton/IconButton.tsx

@@ -24,7 +24,7 @@ import type { IconButtonProps } from './types';
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   (props: IconButtonProps, ref) => {
     const {
-      size = 'medium',
+      size = 'small',
       variant = 'primary',
       icon,
       className,