Merge branch 'canon-docs-updates' into canon-website

packages/canon/docs/components/IconLibrary/IconLibrary.tsx

@@ -16,15 +16,15 @@
 import React from 'react';
 import { Icon } from '@backstage/canon';
 import type { IconNames } from '@backstage/canon';
-import { defaultIcons } from '../../../src/components/Icon/icons';
+import { icons } from '../../../src/components/Icon/icons';
 import { Text } from '../Text/Text';
 
 export const IconLibrary = () => {
-  const icons = Object.keys(defaultIcons);
+  const iconsList = Object.keys(icons);
 
   return (
     <div className="icon-library">
-      {icons.map(icon => (
+      {iconsList.map(icon => (
         <div key={icon} className="icon-library-item">
           <div className="icon-library-item-icon">
             <Icon name={icon as IconNames} />

packages/canon/report.api.md

@@ -5,6 +5,7 @@
 ```ts
 /// <reference types="react" />
 
+import type { CSSProperties } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { default as React_2 } from 'react';
 import * as React_3 from 'react';
@@ -85,6 +86,8 @@ export interface ButtonProps {
   // (undocumented)
   size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
   // (undocumented)
+  style?: React.CSSProperties;
+  // (undocumented)
   variant?:
     | 'primary'
     | 'secondary'
@@ -273,6 +276,7 @@ export type IconNames =
   | 'chevronRight'
   | 'chevronUp'
   | 'cloud'
+  | 'externalLink'
   | 'heart'
   | 'moon'
   | 'plus'
@@ -441,6 +445,8 @@ export interface TextProps {
   // (undocumented)
   children: ReactNode;
   // (undocumented)
+  style?: CSSProperties;
+  // (undocumented)
   variant?:
     | 'subtitle'
     | 'body'

packages/canon/src/components/Button/Docs.mdx

@@ -10,7 +10,7 @@ import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
 <Title type="h1">Button</Title>
 <Text>A button component that can be used to trigger actions.</Text>
 
-<Canvas of={ButtonStories.Primary} />
+<Canvas of={ButtonStories.Variants} />
 
 <Title type="h2">Usage</Title>
 <Source code={`import { Button } from "@backstage/canon";

packages/canon/src/components/Checkbox/Docs.mdx

@@ -10,7 +10,7 @@ import { PropsTable } from '../../../docs/components/PropsTable';
 <Title type="h1">Checkbox</Title>
 <Text>A checkbox component that can be used to trigger actions.</Text>
 
-<Canvas of={CheckboxStories.Primary} />
+<Canvas of={CheckboxStories.Default} />
 
 <Title type="h2">Usage</Title>
 <Source code={`import { Checkbox } from "@backstage/canon";

packages/canon/src/components/Icon/Docs.mdx

@@ -2,7 +2,7 @@ import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
 import * as IconStories from './Icon.stories';
 import { Title, Text } from '../../../docs/components';
 import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
-import { defaultIcons } from './icons';
+import { icons } from './icons';
 
 <Meta of={IconStories} />
 
@@ -12,7 +12,7 @@ import { defaultIcons } from './icons';
 
 <Text>Icons are used to represent an action or a state.</Text>
 
-<Canvas of={IconStories.Primary} />
+<Canvas of={IconStories.Default} />
 
 <Title type="h2">Usage</Title>
 <Source code={`import { Icon } from "@backstage/canon";
@@ -27,7 +27,7 @@ import { defaultIcons } from './icons';
 <PropsTable
   data={{
     name: {
-      type: Object.keys(defaultIcons),
+      type: Object.keys(icons),
       responsive: false,
     },
     size: {

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

@@ -72,7 +72,7 @@ import {
 } from '../Table';
 
 const meta = {
-  title: 'Table',
+  title: 'Components/Table',
   component: Table,
   subcomponents: {
     TableBody: TableBody as React.ComponentType<unknown>,