Improve stories

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

.changeset/nice-vans-vanish.md

@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+**Breaking Change** Icons on Button and IconButton now need to be imported and placed like this: <Button iconStart={<ChevronDownIcon />} />

packages/canon/report.api.md

@@ -15,6 +15,7 @@ import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { Menu as Menu_2 } from '@base-ui-components/react/menu';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import type { RemixiconComponentType } from '@remixicon/react';
@@ -173,8 +174,8 @@ export const buttonPropDefs: {
 export interface ButtonProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   children: React.ReactNode;
-  iconEnd?: IconNames;
-  iconStart?: IconNames;
+  iconEnd?: ReactElement;
+  iconStart?: ReactElement;
   size?: ButtonOwnProps['size'];
   variant?: ButtonOwnProps['variant'];
 }
@@ -697,7 +698,7 @@ export const iconButtonPropDefs: {
 // @public
 export interface IconButtonProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
-  icon: IconNames;
+  icon: ReactElement;
   size?: IconButtonOwnProps['size'];
   variant?: IconButtonOwnProps['variant'];
 }

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

@@ -19,6 +19,7 @@ import { Collapsible } from './';
 import { Button } from '../Button';
 import { Box } from '../Box';
 import { Text } from '../Text';
+import { Icon } from '../Icon';
 
 const meta = {
   title: 'Components/Collapsible',
@@ -42,7 +43,13 @@ export const Default: Story = {
           render={(props, state) => (
             <Button
               variant="secondary"
-              iconEnd={state.open ? 'chevron-up' : 'chevron-down'}
+              iconEnd={
+                state.open ? (
+                  <Icon name="chevron-up" />
+                ) : (
+                  <Icon name="chevron-down" />
+                )
+              }
               {...props}
             >
               {state.open ? 'Close Panel' : 'Open Panel'}

packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx

@@ -21,6 +21,7 @@ import { IconButton } from '../../IconButton';
 import clsx from 'clsx';
 import { Select } from '../../Select';
 import { useDataTable } from '../Root/DataTableRoot';
+import { Icon } from '../../Icon';
 
 /** @public */
 const DataTablePagination = forwardRef(
@@ -71,14 +72,14 @@ const DataTablePagination = forwardRef(
             size="small"
             onClick={() => table?.previousPage()}
             disabled={!table?.getCanPreviousPage()}
-            icon="chevron-left"
+            icon={<Icon name="chevron-left" />}
           />
           <IconButton
             variant="secondary"
             size="small"
             onClick={() => table?.nextPage()}
             disabled={!table?.getCanNextPage()}
-            icon="chevron-right"
+            icon={<Icon name="chevron-right" />}
           />
         </div>
       </div>

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

@@ -17,6 +17,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Menu } from './Menu';
 import { Button } from '../Button';
+import { Icon } from '../Icon';
 
 const meta = {
   title: 'Components/Menu',
@@ -36,7 +37,7 @@ export const Default: Story = {
               {...props}
               size="medium"
               variant="secondary"
-              iconEnd="chevron-down"
+              iconEnd={<Icon name="chevron-down" />}
             >
               Menu
             </Button>