Update report + changeset

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
2025-07-09 09:36:58 +02:00
parent 44a8bdc60d
commit 8fd6fcb2ee
2 changed files with 114 additions and 109 deletions
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+We are renaming @backstage/canon into @backstage/ui. As part of this move we are renaming all class names and CSS variables to follow the new name. "--canon" prefix is becoming "--bui" and all component class names starting with ".canon" will now start with ".bui"
@@ -293,9 +293,9 @@ export type ComponentDefinitionName = keyof typeof componentDefinitions;
 export const componentDefinitions: {
  readonly Avatar: {
    readonly classNames: {
-      readonly root: 'canon-AvatarRoot';
-      readonly image: 'canon-AvatarImage';
-      readonly fallback: 'canon-AvatarFallback';
+      readonly root: 'bui-AvatarRoot';
+      readonly image: 'bui-AvatarImage';
+      readonly fallback: 'bui-AvatarFallback';
    };
    readonly dataAttributes: {
      readonly size: readonly ['small', 'medium', 'large'];
@@ -303,12 +303,12 @@ export const componentDefinitions: {
  };
  readonly Box: {
    readonly classNames: {
-      readonly root: 'canon-Box';
+      readonly root: 'bui-Box';
    };
  };
  readonly Button: {
    readonly classNames: {
-      readonly root: 'canon-Button';
+      readonly root: 'bui-Button';
    };
    readonly dataAttributes: {
      readonly size: readonly ['small', 'medium', 'large'];
@@ -317,27 +317,27 @@ export const componentDefinitions: {
  };
  readonly ButtonIcon: {
    readonly classNames: {
-      readonly root: 'canon-ButtonIcon';
+      readonly root: 'bui-ButtonIcon';
    };
  };
  readonly ButtonLink: {
    readonly classNames: {
-      readonly root: 'canon-ButtonLink';
+      readonly root: 'bui-ButtonLink';
    };
  };
  readonly Card: {
    readonly classNames: {
-      readonly root: 'canon-Card';
-      readonly header: 'canon-CardHeader';
-      readonly body: 'canon-CardBody';
-      readonly footer: 'canon-CardFooter';
+      readonly root: 'bui-Card';
+      readonly header: 'bui-CardHeader';
+      readonly body: 'bui-CardBody';
+      readonly footer: 'bui-CardFooter';
    };
  };
  readonly Checkbox: {
    readonly classNames: {
-      readonly root: 'canon-CheckboxRoot';
-      readonly label: 'canon-CheckboxLabel';
-      readonly indicator: 'canon-CheckboxIndicator';
+      readonly root: 'bui-CheckboxRoot';
+      readonly label: 'bui-CheckboxLabel';
+      readonly indicator: 'bui-CheckboxIndicator';
    };
    readonly dataAttributes: {
      readonly checked: readonly [true, false];
@@ -345,38 +345,38 @@ export const componentDefinitions: {
  };
  readonly Collapsible: {
    readonly classNames: {
-      readonly root: 'canon-CollapsibleRoot';
-      readonly trigger: 'canon-CollapsibleTrigger';
-      readonly panel: 'canon-CollapsiblePanel';
+      readonly root: 'bui-CollapsibleRoot';
+      readonly trigger: 'bui-CollapsibleTrigger';
+      readonly panel: 'bui-CollapsiblePanel';
    };
  };
  readonly Container: {
    readonly classNames: {
-      readonly root: 'canon-Container';
+      readonly root: 'bui-Container';
    };
  };
  readonly FieldLabel: {
    readonly classNames: {
-      readonly root: 'canon-FieldLabelWrapper';
-      readonly label: 'canon-FieldLabel';
-      readonly secondaryLabel: 'canon-FieldSecondaryLabel';
-      readonly description: 'canon-FieldDescription';
+      readonly root: 'bui-FieldLabelWrapper';
+      readonly label: 'bui-FieldLabel';
+      readonly secondaryLabel: 'bui-FieldSecondaryLabel';
+      readonly description: 'bui-FieldDescription';
    };
  };
  readonly Flex: {
    readonly classNames: {
-      readonly root: 'canon-Flex';
+      readonly root: 'bui-Flex';
    };
  };
  readonly Grid: {
    readonly classNames: {
-      readonly root: 'canon-Grid';
-      readonly item: 'canon-GridItem';
+      readonly root: 'bui-Grid';
+      readonly item: 'bui-GridItem';
    };
  };
  readonly Heading: {
    readonly classNames: {
-      readonly root: 'canon-Heading';
+      readonly root: 'bui-Heading';
    };
    readonly dataAttributes: {
      readonly variant: readonly ['title1', 'title2', 'title3', 'subtitle'];
@@ -386,12 +386,12 @@ export const componentDefinitions: {
  };
  readonly Icon: {
    readonly classNames: {
-      readonly root: 'canon-Icon';
+      readonly root: 'bui-Icon';
    };
  };
  readonly Link: {
    readonly classNames: {
-      readonly root: 'canon-Link';
+      readonly root: 'bui-Link';
    };
    readonly dataAttributes: {
      readonly variant: readonly ['subtitle', 'body', 'caption', 'label'];
@@ -400,57 +400,57 @@ export const componentDefinitions: {
  };
  readonly Menu: {
    readonly classNames: {
-      readonly trigger: 'canon-MenuTrigger';
-      readonly backdrop: 'canon-MenuBackdrop';
-      readonly positioner: 'canon-MenuPositioner';
-      readonly popup: 'canon-MenuPopup';
-      readonly arrow: 'canon-MenuArrow';
-      readonly item: 'canon-MenuItem';
-      readonly group: 'canon-MenuGroup';
-      readonly groupLabel: 'canon-MenuGroupLabel';
-      readonly radioGroup: 'canon-MenuRadioGroup';
-      readonly radioItem: 'canon-MenuRadioItem';
-      readonly radioItemIndicator: 'canon-MenuRadioItemIndicator';
-      readonly checkboxItem: 'canon-MenuCheckboxItem';
-      readonly checkboxItemIndicator: 'canon-MenuCheckboxItemIndicator';
-      readonly submenuTrigger: 'canon-MenuSubmenuTrigger';
-      readonly separator: 'canon-MenuSeparator';
+      readonly trigger: 'bui-MenuTrigger';
+      readonly backdrop: 'bui-MenuBackdrop';
+      readonly positioner: 'bui-MenuPositioner';
+      readonly popup: 'bui-MenuPopup';
+      readonly arrow: 'bui-MenuArrow';
+      readonly item: 'bui-MenuItem';
+      readonly group: 'bui-MenuGroup';
+      readonly groupLabel: 'bui-MenuGroupLabel';
+      readonly radioGroup: 'bui-MenuRadioGroup';
+      readonly radioItem: 'bui-MenuRadioItem';
+      readonly radioItemIndicator: 'bui-MenuRadioItemIndicator';
+      readonly checkboxItem: 'bui-MenuCheckboxItem';
+      readonly checkboxItemIndicator: 'bui-MenuCheckboxItemIndicator';
+      readonly submenuTrigger: 'bui-MenuSubmenuTrigger';
+      readonly separator: 'bui-MenuSeparator';
    };
  };
  readonly RadioGroup: {
    readonly classNames: {
-      readonly root: 'canon-RadioGroup';
-      readonly content: 'canon-RadioGroupContent';
-      readonly radio: 'canon-Radio';
+      readonly root: 'bui-RadioGroup';
+      readonly content: 'bui-RadioGroupContent';
+      readonly radio: 'bui-Radio';
    };
  };
  readonly ScrollArea: {
    readonly classNames: {
-      readonly root: 'canon-ScrollAreaRoot';
-      readonly viewport: 'canon-ScrollAreaViewport';
-      readonly scrollbar: 'canon-ScrollAreaScrollbar';
-      readonly thumb: 'canon-ScrollAreaThumb';
+      readonly root: 'bui-ScrollAreaRoot';
+      readonly viewport: 'bui-ScrollAreaViewport';
+      readonly scrollbar: 'bui-ScrollAreaScrollbar';
+      readonly thumb: 'bui-ScrollAreaThumb';
    };
  };
  readonly SearchField: {
    readonly classNames: {
-      readonly root: 'canon-SearchField';
-      readonly clear: 'canon-InputClear';
+      readonly root: 'bui-SearchField';
+      readonly clear: 'bui-InputClear';
    };
  };
  readonly Select: {
    readonly classNames: {
-      readonly root: 'canon-Select';
-      readonly required: 'canon-SelectRequired';
-      readonly trigger: 'canon-SelectTrigger';
-      readonly value: 'canon-SelectValue';
-      readonly icon: 'canon-SelectIcon';
-      readonly popup: 'canon-SelectPopup';
-      readonly item: 'canon-SelectItem';
-      readonly itemIndicator: 'canon-SelectItemIndicator';
-      readonly itemText: 'canon-SelectItemText';
-      readonly description: 'canon-SelectDescription';
-      readonly error: 'canon-SelectError';
+      readonly root: 'bui-Select';
+      readonly required: 'bui-SelectRequired';
+      readonly trigger: 'bui-SelectTrigger';
+      readonly value: 'bui-SelectValue';
+      readonly icon: 'bui-SelectIcon';
+      readonly popup: 'bui-SelectPopup';
+      readonly item: 'bui-SelectItem';
+      readonly itemIndicator: 'bui-SelectItemIndicator';
+      readonly itemText: 'bui-SelectItemText';
+      readonly description: 'bui-SelectDescription';
+      readonly error: 'bui-SelectError';
    };
    readonly dataAttributes: {
      readonly size: readonly ['small', 'medium'];
@@ -458,46 +458,46 @@ export const componentDefinitions: {
  };
  readonly Skeleton: {
    readonly classNames: {
-      readonly root: 'canon-Skeleton';
+      readonly root: 'bui-Skeleton';
    };
  };
  readonly Switch: {
    readonly classNames: {
-      readonly root: 'canon-Switch';
-      readonly indicator: 'canon-SwitchIndicator';
+      readonly root: 'bui-Switch';
+      readonly indicator: 'bui-SwitchIndicator';
    };
  };
  readonly Table: {
    readonly classNames: {
-      readonly root: 'canon-TableRoot';
-      readonly header: 'canon-TableHeader';
-      readonly body: 'canon-TableBody';
-      readonly row: 'canon-TableRow';
-      readonly head: 'canon-TableHead';
-      readonly caption: 'canon-TableCaption';
-      readonly cell: 'canon-TableCell';
-      readonly cellText: 'canon-TableCellText';
-      readonly cellLink: 'canon-TableCellLink';
-      readonly cellProfile: 'canon-TableCellProfile';
-      readonly cellProfileAvatar: 'canon-TableCellProfileAvatar';
-      readonly cellProfileAvatarImage: 'canon-TableCellProfileAvatarImage';
-      readonly cellProfileAvatarFallback: 'canon-TableCellProfileAvatarFallback';
-      readonly cellProfileName: 'canon-TableCellProfileName';
-      readonly cellProfileLink: 'canon-TableCellProfileLink';
+      readonly root: 'bui-TableRoot';
+      readonly header: 'bui-TableHeader';
+      readonly body: 'bui-TableBody';
+      readonly row: 'bui-TableRow';
+      readonly head: 'bui-TableHead';
+      readonly caption: 'bui-TableCaption';
+      readonly cell: 'bui-TableCell';
+      readonly cellText: 'bui-TableCellText';
+      readonly cellLink: 'bui-TableCellLink';
+      readonly cellProfile: 'bui-TableCellProfile';
+      readonly cellProfileAvatar: 'bui-TableCellProfileAvatar';
+      readonly cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage';
+      readonly cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback';
+      readonly cellProfileName: 'bui-TableCellProfileName';
+      readonly cellProfileLink: 'bui-TableCellProfileLink';
    };
  };
  readonly Tabs: {
    readonly classNames: {
-      readonly root: 'canon-TabsRoot';
-      readonly list: 'canon-TabsList';
-      readonly indicator: 'canon-TabsIndicator';
-      readonly tab: 'canon-TabsTab';
-      readonly panel: 'canon-TabsPanel';
+      readonly root: 'bui-TabsRoot';
+      readonly list: 'bui-TabsList';
+      readonly indicator: 'bui-TabsIndicator';
+      readonly tab: 'bui-TabsTab';
+      readonly panel: 'bui-TabsPanel';
    };
  };
  readonly Text: {
    readonly classNames: {
-      readonly root: 'canon-Text';
+      readonly root: 'bui-Text';
    };
    readonly dataAttributes: {
      readonly variant: readonly ['subtitle', 'body', 'caption', 'label'];
@@ -514,10 +514,10 @@ export const componentDefinitions: {
  };
  readonly TextField: {
    readonly classNames: {
-      readonly root: 'canon-TextField';
-      readonly inputWrapper: 'canon-InputWrapper';
-      readonly input: 'canon-Input';
-      readonly inputIcon: 'canon-InputIcon';
+      readonly root: 'bui-TextField';
+      readonly inputWrapper: 'bui-InputWrapper';
+      readonly input: 'bui-Input';
+      readonly inputIcon: 'bui-InputIcon';
    };
    readonly dataAttributes: {
      readonly invalid: readonly [true, false];
@@ -526,28 +526,28 @@ export const componentDefinitions: {
  };
  readonly Header: {
    readonly classNames: {
-      readonly toolbar: 'canon-HeaderToolbar';
-      readonly toolbarWrapper: 'canon-HeaderToolbarWrapper';
-      readonly toolbarContent: 'canon-HeaderToolbarContent';
-      readonly toolbarControls: 'canon-HeaderToolbarControls';
-      readonly toolbarIcon: 'canon-HeaderToolbarIcon';
-      readonly toolbarName: 'canon-HeaderToolbarName';
-      readonly breadcrumbs: 'canon-HeaderBreadcrumbs';
-      readonly breadcrumb: 'canon-HeaderBreadcrumb';
-      readonly breadcrumbLink: 'canon-HeaderBreadcrumbLink';
-      readonly breadcrumbSeparator: 'canon-HeaderBreadcrumbSeparator';
-      readonly tabs: 'canon-HeaderTabs';
-      readonly tabList: 'canon-HeaderTabList';
-      readonly tab: 'canon-HeaderTab';
-      readonly tabActive: 'canon-HeaderTabActive';
-      readonly tabHovered: 'canon-HeaderTabHovered';
-      readonly subNav: 'canon-HeaderSubNav';
+      readonly toolbar: 'bui-HeaderToolbar';
+      readonly toolbarWrapper: 'bui-HeaderToolbarWrapper';
+      readonly toolbarContent: 'bui-HeaderToolbarContent';
+      readonly toolbarControls: 'bui-HeaderToolbarControls';
+      readonly toolbarIcon: 'bui-HeaderToolbarIcon';
+      readonly toolbarName: 'bui-HeaderToolbarName';
+      readonly breadcrumbs: 'bui-HeaderBreadcrumbs';
+      readonly breadcrumb: 'bui-HeaderBreadcrumb';
+      readonly breadcrumbLink: 'bui-HeaderBreadcrumbLink';
+      readonly breadcrumbSeparator: 'bui-HeaderBreadcrumbSeparator';
+      readonly tabs: 'bui-HeaderTabs';
+      readonly tabList: 'bui-HeaderTabList';
+      readonly tab: 'bui-HeaderTab';
+      readonly tabActive: 'bui-HeaderTabActive';
+      readonly tabHovered: 'bui-HeaderTabHovered';
+      readonly subNav: 'bui-HeaderSubNav';
    };
  };
  readonly Tooltip: {
    readonly classNames: {
-      readonly tooltip: 'canon-Tooltip';
-      readonly arrow: 'canon-TooltipArrow';
+      readonly tooltip: 'bui-Tooltip';
+      readonly arrow: 'bui-TooltipArrow';
    };
  };
 };