Merge pull request #29667 from backstage/canon-button-icons

Canon - Improve icon props on `Button` and `IconButton`

.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/css/button.css

@@ -78,12 +78,12 @@
   height: 32px;
 }
 
-.canon-Button[data-size="small"] .canon-ButtonIcon {
+.canon-ButtonIcon[data-size="small"], .canon-ButtonIcon[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button[data-size="medium"] .canon-ButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-ButtonIcon[data-size="medium"], .canon-ButtonIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }

packages/canon/css/components.css

@@ -134,14 +134,14 @@
   height: 32px;
 }
 
-.canon-Button[data-size="small"] .canon-ButtonIcon {
+.canon-ButtonIcon[data-size="small"], .canon-ButtonIcon[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button[data-size="medium"] .canon-ButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-ButtonIcon[data-size="medium"], .canon-ButtonIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .canon-CollapsiblePanel {
@@ -521,14 +521,14 @@
   height: 32px;
 }
 
-.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
+.canon-IconButtonIcon[data-size="small"], .canon-IconButtonIcon[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-IconButtonIcon[data-size="medium"], .canon-IconButtonIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .canon-TextField {

packages/canon/css/iconbutton.css

@@ -78,12 +78,12 @@
   height: 32px;
 }
 
-.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
+.canon-IconButtonIcon[data-size="small"], .canon-IconButtonIcon[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-IconButtonIcon[data-size="medium"], .canon-IconButtonIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }

packages/canon/css/styles.css

@@ -9358,14 +9358,14 @@
   height: 32px;
 }
 
-.canon-Button[data-size="small"] .canon-ButtonIcon {
+.canon-ButtonIcon[data-size="small"], .canon-ButtonIcon[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button[data-size="medium"] .canon-ButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-ButtonIcon[data-size="medium"], .canon-ButtonIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .canon-CollapsiblePanel {
@@ -9745,14 +9745,14 @@
   height: 32px;
 }
 
-.canon-IconButton[data-size="small"] .canon-IconButtonIcon {
+.canon-IconButtonIcon[data-size="small"], .canon-IconButtonIcon[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton[data-size="medium"] .canon-IconButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-IconButtonIcon[data-size="medium"], .canon-IconButtonIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .canon-TextField {

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/Button/Button.stories.tsx

@@ -19,6 +19,7 @@ import { Button } from './Button';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
 import { ButtonProps } from './types';
+import { Icon } from '../Icon';
 
 const meta = {
   title: 'Components/Button',
@@ -55,10 +56,10 @@ export const Variants: Story = {
   },
   render: () => (
     <Flex align="center">
-      <Button iconStart="cloud" variant="primary">
+      <Button iconStart={<Icon name="cloud" />} variant="primary">
         Button
       </Button>
-      <Button iconStart="cloud" variant="secondary">
+      <Button iconStart={<Icon name="cloud" />} variant="secondary">
         Button
       </Button>
     </Flex>
@@ -71,8 +72,12 @@ export const Sizes: Story = {
   },
   render: () => (
     <Flex align="center">
-      <Button size="medium">Medium</Button>
-      <Button size="small">Small</Button>
+      <Button size="medium" iconStart={<Icon name="cloud" />}>
+        Medium
+      </Button>
+      <Button size="small" iconStart={<Icon name="cloud" />}>
+        Small
+      </Button>
     </Flex>
   ),
 };
@@ -83,9 +88,13 @@ export const WithIcons: Story = {
   },
   render: args => (
     <Flex align="center">
-      <Button {...args} iconStart="cloud" />
-      <Button {...args} iconEnd="chevron-right" />
-      <Button {...args} iconStart="cloud" iconEnd="chevron-right" />
+      <Button {...args} iconStart={<Icon name="cloud" />} />
+      <Button {...args} iconEnd={<Icon name="chevron-right" />} />
+      <Button
+        {...args}
+        iconStart={<Icon name="cloud" />}
+        iconEnd={<Icon name="chevron-right" />}
+      />
     </Flex>
   ),
 };
@@ -96,9 +105,13 @@ export const FullWidth: Story = {
   },
   render: args => (
     <Flex direction="column" gap="4" style={{ width: '300px' }}>
-      <Button {...args} iconStart="cloud" />
-      <Button {...args} iconEnd="chevron-right" />
-      <Button {...args} iconStart="cloud" iconEnd="chevron-right" />
+      <Button {...args} iconStart={<Icon name="cloud" />} />
+      <Button {...args} iconEnd={<Icon name="chevron-right" />} />
+      <Button
+        {...args}
+        iconStart={<Icon name="cloud" />}
+        iconEnd={<Icon name="chevron-right" />}
+      />
     </Flex>
   ),
 };
@@ -150,22 +163,22 @@ export const Playground: Story = {
                 Button
               </Button>
               <Button
-                iconStart="cloud"
+                iconStart={<Icon name="cloud" />}
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
               >
                 Button
               </Button>
               <Button
-                iconEnd="chevron-right"
+                iconEnd={<Icon name="chevron-right" />}
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
               >
                 Button
               </Button>
               <Button
-                iconStart="cloud"
-                iconEnd="chevron-right"
+                iconStart={<Icon name="cloud" />}
+                iconEnd={<Icon name="chevron-right" />}
                 style={{ width: '200px' }}
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
@@ -180,7 +193,7 @@ export const Playground: Story = {
                 Button
               </Button>
               <Button
-                iconStart="cloud"
+                iconStart={<Icon name="cloud" />}
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
                 disabled
@@ -188,7 +201,7 @@ export const Playground: Story = {
                 Button
               </Button>
               <Button
-                iconEnd="chevron-right"
+                iconEnd={<Icon name="chevron-right" />}
                 variant={variant as ButtonProps['variant']}
                 size={size as ButtonProps['size']}
                 disabled

packages/canon/src/components/Button/Button.tsx

@@ -15,7 +15,6 @@
  */
 
 import { forwardRef } from 'react';
-import { Icon } from '../Icon';
 import clsx from 'clsx';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 
@@ -50,9 +49,25 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         style={style}
         {...rest}
       >
-        {iconStart && <Icon name={iconStart} className="canon-ButtonIcon" />}
+        {iconStart && (
+          <span
+            className="canon-ButtonIcon"
+            aria-hidden="true"
+            data-size={responsiveSize}
+          >
+            {iconStart}
+          </span>
+        )}
         {children}
-        {iconEnd && <Icon name={iconEnd} className="canon-ButtonIcon" />}
+        {iconEnd && (
+          <span
+            className="canon-ButtonIcon"
+            aria-hidden="true"
+            data-size={responsiveSize}
+          >
+            {iconEnd}
+          </span>
+        )}
       </button>
     );
   },

packages/canon/src/components/Button/styles.css

@@ -94,12 +94,14 @@
   height: 32px;
 }
 
-.canon-Button[data-size='small'] .canon-ButtonIcon {
+.canon-ButtonIcon[data-size='small'],
+.canon-ButtonIcon[data-size='small'] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button[data-size='medium'] .canon-ButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-ButtonIcon[data-size='medium'],
+.canon-ButtonIcon[data-size='medium'] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }

packages/canon/src/components/Button/types.ts

@@ -13,8 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { IconNames } from '../Icon';
+
 import type { ButtonOwnProps } from './Button.props';
+import { ReactElement } from 'react';
 
 /**
  * Properties for {@link Button}
@@ -43,10 +44,10 @@ export interface ButtonProps
   /**
    * Optional icon to display at the start of the button
    */
-  iconStart?: IconNames;
+  iconStart?: ReactElement;
 
   /**
    * Optional icon to display at the end of the button
    */
-  iconEnd?: IconNames;
+  iconEnd?: ReactElement;
 }

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(
@@ -75,14 +76,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/IconButton/IconButton.stories.tsx

@@ -19,6 +19,7 @@ import { IconButton } from './IconButton';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
 import { IconButtonProps } from './types';
+import { Icon } from '../Icon';
 
 const meta = {
   title: 'Components/IconButton',
@@ -44,7 +45,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Variants: Story = {
   args: {
-    icon: 'cloud',
+    icon: <Icon name="cloud" />,
+    'aria-label': 'Cloud icon button',
   },
   parameters: {
     argTypes: {
@@ -63,7 +65,8 @@ export const Variants: Story = {
 
 export const Sizes: Story = {
   args: {
-    icon: 'cloud',
+    icon: <Icon name="cloud" />,
+    'aria-label': 'Cloud icon button',
   },
   render: args => (
     <Flex align="center">
@@ -75,8 +78,9 @@ export const Sizes: Story = {
 
 export const Disabled: Story = {
   args: {
-    icon: 'cloud',
+    icon: <Icon name="cloud" />,
     disabled: true,
+    'aria-label': 'Cloud icon button',
   },
   render: args => (
     <Flex direction="row" gap="4">
@@ -88,7 +92,8 @@ export const Disabled: Story = {
 
 export const Responsive: Story = {
   args: {
-    icon: 'cloud',
+    icon: <Icon name="cloud" />,
+    'aria-label': 'Cloud icon button',
     variant: {
       initial: 'primary',
       sm: 'secondary',
@@ -104,7 +109,8 @@ const variants: string[] = ['primary', 'secondary'];
 
 export const Playground: Story = {
   args: {
-    icon: 'cloud',
+    icon: <Icon name="cloud" />,
+    'aria-label': 'Cloud icon button',
   },
   render: args => (
     <Flex direction="column">
@@ -120,13 +126,15 @@ export const Playground: Story = {
               />
               <IconButton
                 {...args}
-                icon="chevron-right"
+                icon={<Icon name="chevron-right" />}
+                aria-label="Chevron right icon button"
                 variant={variant as IconButtonProps['variant']}
                 size={size as IconButtonProps['size']}
               />
               <IconButton
                 {...args}
-                icon="chevron-right"
+                icon={<Icon name="chevron-right" />}
+                aria-label="Chevron right icon button"
                 variant={variant as IconButtonProps['variant']}
                 size={size as IconButtonProps['size']}
               />

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

@@ -15,7 +15,6 @@
  */
 
 import { forwardRef } from 'react';
-import { Icon } from '../Icon';
 import clsx from 'clsx';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 
@@ -45,7 +44,13 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         style={style}
         {...rest}
       >
-        <Icon name={icon} className="canon-IconButtonIcon" />
+        <span
+          className="canon-IconButtonIcon"
+          aria-hidden="true"
+          data-size={responsiveSize}
+        >
+          {icon}
+        </span>
       </button>
     );
   },

packages/canon/src/components/IconButton/styles.css

@@ -94,12 +94,14 @@
   width: 32px;
 }
 
-.canon-IconButton[data-size='small'] .canon-IconButtonIcon {
+.canon-IconButtonIcon[data-size='small'],
+.canon-IconButtonIcon[data-size='small'] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton[data-size='medium'] .canon-IconButtonIcon {
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-IconButtonIcon[data-size='medium'],
+.canon-IconButtonIcon[data-size='medium'] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }

packages/canon/src/components/IconButton/types.ts

@@ -13,8 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { IconNames } from '../Icon';
+
 import type { IconButtonOwnProps } from './IconButton.props';
+import { ReactElement } from 'react';
 
 /**
  * Properties for {@link IconButton}
@@ -36,7 +37,7 @@ export interface IconButtonProps
   variant?: IconButtonOwnProps['variant'];
 
   /**
-   * Icon to display at the start of the button
+   * Icon to display in the button
    */
-  icon: IconNames;
+  icon: ReactElement;
 }

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>