From ea36f743fab9b650df9127dadf03322855421928 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 18 Apr 2025 18:23:31 +0200
Subject: [PATCH] Improve stories

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/nice-vans-vanish.md                           | 5 +++++
 packages/canon/report.api.md                             | 7 ++++---
 .../src/components/Collapsible/Collapsible.stories.tsx   | 9 ++++++++-
 .../DataTable/Pagination/DataTablePagination.tsx         | 5 +++--
 packages/canon/src/components/Menu/Menu.stories.tsx      | 3 ++-
 5 files changed, 22 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/nice-vans-vanish.md

diff --git a/.changeset/nice-vans-vanish.md b/.changeset/nice-vans-vanish.md
new file mode 100644
index 0000000000..c52fc42488
--- /dev/null
+++ b/.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 />} />
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index 0a315ae105..765a77148f 100644
--- a/packages/canon/report.api.md
+++ b/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'];
 }
diff --git a/packages/canon/src/components/Collapsible/Collapsible.stories.tsx b/packages/canon/src/components/Collapsible/Collapsible.stories.tsx
index 4130419a0c..175dadba85 100644
--- a/packages/canon/src/components/Collapsible/Collapsible.stories.tsx
+++ b/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'}
diff --git a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
index eabea109fa..69448a0587 100644
--- a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
+++ b/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>
diff --git a/packages/canon/src/components/Menu/Menu.stories.tsx b/packages/canon/src/components/Menu/Menu.stories.tsx
index d1b8f831c5..5d04a2f19c 100644
--- a/packages/canon/src/components/Menu/Menu.stories.tsx
+++ b/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>