Changelog
Version 0.10.0

Changelog

Version 0.9.0#

Breaking Changes#

  • BREAKING: Migrated Avatar component from Base UI to custom implementation with size changes:

  • Base UI-specific props are no longer supported

  • Size values have been updated:

    • New x-small size added (1.25rem / 20px)
    • small size unchanged (1.5rem / 24px)
    • medium size unchanged (2rem / 32px, default)
    • large size changed from 3rem to 2.5rem (40px)
    • New x-large size added (3rem / 48px)

Migration:

# Remove Base UI-specific props
- <Avatar src="..." name="..." render={...} />
+ <Avatar src="..." name="..." />

# Update large size usage to x-large for same visual size
- <Avatar src="..." name="..." size="large" />
+ <Avatar src="..." name="..." size="x-large" />

Added purpose prop for accessibility control ('informative' or 'decoration'). #31566

  • BREAKING: Migrated Checkbox component from Base UI to React Aria Components.

    API changes required:

    • checked → isSelected
    • defaultChecked → defaultSelected
    • disabled → isDisabled
    • required → isRequired
    • label prop removed - use children instead
    • CSS: bui-CheckboxLabel class removed
    • Data attribute: data-checked → data-selected
    • Use without label is no longer supported

    Migration examples:

    Before:

    <Checkbox label="Accept terms" checked={agreed} onChange={setAgreed} />

    After:

    <Checkbox isSelected={agreed} onChange={setAgreed}>
  Accept terms
</Checkbox>

    Before:

    <Checkbox label="Option" disabled />

    After:

    <Checkbox isDisabled>Option</Checkbox>

    Before:

    <Checkbox />

    After:

    <Checkbox>
  <VisuallyHidden>Accessible label</VisuallyHidden>
</Checkbox>
``` [#31517](https://github.com/backstage/backstage/pull/31517)

  • Fixing styles on SearchField in Backstage UI after migration to CSS modules. SearchField has now its own set of class names. We previously used class names from TextField but this approach was creating some confusion so going forward in your theme you'll be able to theme TextField and SearchField separately. #31507

  • BREAKING: Removed central componentDefinitions object and related type utilities (ComponentDefinitionName, ComponentClassNames).

    Component definitions are primarily intended for documenting the CSS class API for theming purposes, not for programmatic use in JavaScript/TypeScript.

    Migration Guide:

    If you were using component definitions or class names to build custom components, we recommend migrating to either:

    • Use Backstage UI components directly as building blocks, or
    • Duplicate the component CSS in your own stylesheets instead of relying on internal class names #31744

  • BREAKING: Changed className prop behavior to augment default styles instead of being ignored or overriding them.

    Affected components:

    • Menu, MenuListBox, MenuAutocomplete, MenuAutocompleteListbox, MenuItem, MenuListBoxItem, MenuSection, MenuSeparator
    • Switch
    • Skeleton
    • FieldLabel
    • Header, HeaderToolbar
    • HeaderPage
    • Tabs, TabList, Tab, TabPanel

    If you were passing custom className values to any of these components that relied on the previous behavior, you may need to adjust your styles to account for the default classes now being applied alongside your custom classes. #31496

  • BREAKING: Removed Collapsible component. Migrate to Accordion or use React Aria Disclosure.

    Migration Path 1: Accordion (Opinionated Styled Component)#

    Accordion provides preset styling with a similar component structure.

    - import { Collapsible } from '@backstage/ui';
+ import { Accordion, AccordionTrigger, AccordionPanel } from '@backstage/ui';

- <Collapsible.Root>
-   <Collapsible.Trigger render={(props) => <Button {...props}>Toggle</Button>} />
-   <Collapsible.Panel>Content</Collapsible.Panel>
- </Collapsible.Root>

+ <Accordion>
+   <AccordionTrigger title="Toggle" />
+   <AccordionPanel>Content</AccordionPanel>
+ </Accordion>

    CSS classes: .bui-CollapsibleRoot → .bui-Accordion, .bui-CollapsibleTrigger → .bui-AccordionTrigger (now on heading element), .bui-CollapsiblePanel → .bui-AccordionPanel

    Migration Path 2: React Aria Disclosure (Full Customization)#

    For custom styling without preset styles:

    import { Disclosure, Button, DisclosurePanel } from 'react-aria-components';

<Disclosure>
  <Button slot="trigger">Toggle</Button>
  <DisclosurePanel>Content</DisclosurePanel>
</Disclosure>;
``` [#31493](https://github.com/backstage/backstage/pull/31493)

  • BREAKING: The SelectProps interface now accepts a generic type parameter for selection mode.

    Added searchable and multiple selection support to Select component. The component now accepts searchable, selectionMode, and searchPlaceholder props to enable filtering and multi-selection modes.

    Migration: If you're using SelectProps type directly, update from SelectProps to SelectProps<'single' | 'multiple'>. Component usage remains backward compatible. #31649

New Features#

  • Added loading prop to Button and ButtonIcon components for displaying spinner during async operations. #31681
  • Added new VisuallyHidden component for hiding content visually while keeping it accessible to screen readers. #31484

Bug Fixes#

  • Fix broken external links in Backstage UI Header component. #31525
  • Fixed CSS issues in Select component including popover width constraints, focus outline behavior, and overflow handling. #31618
  • Improved visual consistency of PasswordField, SearchField, and MenuAutocomplete components. #31679
  • Fix default text color in Backstage UI #31429
  • Fixed Text component to prevent truncate prop from being spread to the underlying DOM element. #31615
  • Improved the Link component structure in Backstage UI. #31524
  • Fixed dialog backdrop appearance in dark mode. #31673
  • Migrated CellProfile component from Base UI Avatar to Backstage UI Avatar component. #31608
  • Avatar components in x-small and small sizes now display only one initial instead of two, improving readability at smaller dimensions. #31623
  • Removed @base-ui-components/react dependency as all components now use React Aria Components. #31672
  • Fix the default font size in Backstage UI. #31435
  • Fix CSS layer ordering in Backstage UI to make sure component styles are loaded after tokens and base declarations. #31448
  • Fixed RadioGroup radio button ellipse distortion by preventing flex shrink and grow. #31576
  • Fix font smoothing as default in Backstage UI. #31444
  • Enable tree-shaking of imports other than *.css. #31516
  • Fixed Table Row component to properly support opening links in new tabs via right-click or Cmd+Click when using the href prop. #31680
  • Set the color-scheme property depending on theme #31469
  • Fix default font wight and font family in Backstage UI. #31432

Version 0.8.2#

Bug Fixes#

  • Fix default text color in Backstage UI #31429
  • Fix the default font size in Backstage UI. #31435
  • Fix CSS layer ordering in Backstage UI to make sure component styles are loaded after tokens and base declarations. #31448
  • Fix font smoothing as default in Backstage UI. #31444
  • Fix default font wight and font family in Backstage UI. #31432

Version 0.8.0#

Breaking Changes#

  • BREAKING: Added a new PasswordField component. As part of this change, the password and search types have been removed from TextField. #31238
  • BREAKING Restructure Backstage UI component styling to use CSS Modules instead of pure CSS. We don't expect this to be an issue in practice but it is important to call out that all styles are now loaded through CSS modules with generated class names. We are still providing fixed class names for all components to allow anyone to style their Backstage instance. #31399
  • BREAKING The ScrollArea component has been removed from Backstage UI because it did not meet our accessibility standards. #31409
  • BREAKING Remove Icon component in Backstage UI. This component was creating issue for tree-shaking. It is recommended to use icons from @remixicon/react until we found a better alternative in Backstage UI. #31407

New Features#

  • Add new virtualized, maxWidth and maxHeight props to Menu, MenuListBox, MenuAutocomplete and MenuAutocompleteListBox to allow for virtalization of long lists inside menus. #31375
  • Added support for data attributes in <Box />, <Container />, <Flex />, and <Grid /> components, ensuring they are correctly applied to the rendered elements. #31374
  • Add react router for internal routing for ButtonLinks #31276
  • Added a background color default on the body #31365

Bug Fixes#

  • Adding a new Dialog component to Backstage UI. #31371
  • remove default selection of tab #31216
  • Fix margin utility classes in Backstage UI. #31389
  • Fix scroll jumping when opening menu in Backstage UI. #31394
  • Making href mandatory in tabs that are part of a Header component #31343
  • Update react-aria-components to version 1.13.0 #31367
  • Fix table sorting icon position in Backstage UI. #31393
  • Cleaning up Backstage UI props definitions as well as removing ScrollArea in Card to improve accessibility. #31404
  • We are restructuring our CSS to have a better layer structure. #31362
  • Improved SearchField component flex layout and animations. Fixed SearchField behavior in Header components by switching from width-based transitions to flex-basis transitions for better responsive behavior. Added new Storybook stories to test SearchField integration with Header component. #31158
  • Remove auto selection of tabs for tabs that all have href defined #31281
  • Avoid overriding onChange when spreading props #31232
  • Using react router for internal links in the Menu component #31339

Version 0.7.2#

New Features#

  • Add react router for internal routing for ButtonLinks #31276

Bug Fixes#

  • Making href mandatory in tabs that are part of a Header component #31343
  • Remove auto selection of tabs for tabs that all have href defined #31281
  • Using react router for internal links in the Menu component #31339
  • Enable tooltips on disabled buttons with automatic wrapper #31230
  • Avoid overriding onChange when spreading props #31232
  • remove default selection of tab #31216
  • Improved SearchField component flex layout and animations. Fixed SearchField behavior in Header components by switching from width-based transitions to flex-basis transitions for better responsive behavior. Added new Storybook stories to test SearchField integration with Header component. #31158

Version 0.7.1#

New Features#

  • Add missing class for flex: baseline #31013
  • Add missing class for flex: baseline #31013

Bug Fixes#

  • Fix Select component to properly attach aria-label and aria-labelledby props to the rendered element for improved accessibility. #31037
  • Removed the need to mock window.matchMedia in tests, falling back to default breakpoint values instead. #31148
  • Fix Select component to properly attach aria-label and aria-labelledby props to the rendered element for improved accessibility. #31037

Version 0.7.0#

Breaking Changes#

  • We are moving our DataTable component to React Aria. We removed our DataTable to only use Table as a single and opinionated option for tables. This new structure is made possible by using React Aria under the hood. #30654
  • Backstage UI - HeaderPage - We are updating the breadcrumb to be more visible and accessible. #30874
  • Breaking change We are updating the Menu component to use React Aria under the hood. The structure and all props are changing to follow React Aria's guidance. #30908
  • Breaking We are upgrading our Text component to support all font sizes making the Heading component redundant. The new Text component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the as prop to include all possible values. The Link component has also been updated to match the new Text component. #30592
  • We are moving our DataTable component to React Aria. We removed our DataTable to only use Table as a single and opinionated option for tables. This new structure is made possible by using React Aria under the hood. #30654
  • Breaking We are upgrading our Text component to support all font sizes making the Heading component redundant. The new Text component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the as prop to include all possible values. The Link component has also been updated to match the new Text component. #30592

New Features#

  • Add new TagGroup component to Backstage UI. #30919
  • Add startCollapsed prop on the SearchField component in BUI. #30729
  • Add startCollapsed prop on the SearchField component in BUI. #30729

Bug Fixes#

  • Fixes some styles on the Select component in BUI. #30642
  • Export CardHeader, CardBody and CardFooter from Card component index #30882
  • Fixes a couple of small bugs in BUI including setting H1 and H2 correctly on the Header and HeaderPage. #30636
  • Update styling of Tooltip element #30591
  • Breaking change Move breadcrumb to fit in the HeaderPage instead of the Header in Backstage UI. #30701
  • We are motion away from motion to use gsap instead to make Backstage UI backward compatible with React 17. #30626
  • Updated Menu component in Backstage UI to use useId() from React Aria instead of React to support React 17. #30675
  • Remove stylesheet import from Select component. #30800
  • Adds onTabSelectionChange to ui header component. #30588
  • Breaking change Move breadcrumb to fit in the HeaderPage instead of the Header in Backstage UI. #30701
  • Remove stylesheet import from Select component. #30800
  • Updated Menu component in Backstage UI to use useId() from React Aria instead of React to support React 17. #30675
  • Fixes some styles on the Select component in BUI. #30642
  • Fixes a couple of small bugs in BUI including setting H1 and H2 correctly on the Header and HeaderPage. #30636
  • We are motion away from motion to use gsap instead to make Backstage UI backward compatible with React 17. #30626
  • Update styling of Tooltip element #30591
  • Adds onTabSelectionChange to ui header component. #30588

Version 0.6.0#

Breaking Changes#

  • Rename IconButton to ButtonIcon. #30297
  • Remove the render prop from all button-related components. #30297

New Features#

  • New Tooltip component. #30461
  • New Card component. #30467
  • New Header component. #30410, #30459, #30493
  • New tertiary variant to Button, ButtonIcon and ButtonLink. #30453
  • New Skeleton component. #30466
  • New ButtonLink, which replaces the previous render prop pattern on Button and IconButton. #30297
  • New SearchField component. #30357
  • New RadioGroup + Radio component. #30327

Bug Fixes#

  • Improve Button, ButtonIcon and ButtonLink styling. #30448
  • Update return types for Heading & Text components for React 19. #30440
  • We are consolidating all css files into a single styles.css. #30325
  • Added placeholder prop back to TextField component. #30286

Version 0.5.0#

Breaking Changes#

  • TextField now has multiple label sizes. #30249
  • TextField can now hide label and description while keeping them available for screen readers. #30249
  • We are removing the render prop in favour of the as prop on Heading and Text. #30291
  • Move TextField component to use react Aria under the hood. #30286
  • Button, ButtonLink, ButtonIcon now default to size small instead of medium #30085, #30097
  • Rename Grid component to <Grid.Root /> #30013

New Features#

  • Added a render prop to the Button component to use it as a link. #30165
  • New Switch component #30251

Bug Fixes#

  • Fix styling for the title4 prop on the Heading component. #30167
  • Add min-width: 0; by default on Flex components to support truncated text. #30168
  • Fixes spacing props on layout components #30013

Version 0.4.0#

New Features#

  • New Tabs component #29996
  • Add truncate prop to Text and Heading #29988
  • Add combobox option to Menu #29986
  • Add icon prop on TextField #29820

Other Changes#

  • Improve icon props on Button and IconButton #29667
  • Improve the way we treat custom render on Text and Heading #29989
  • Improve Menu styles #29986
  • Improve TextField styles #29974
  • Improve clear button on TextField #29878
  • Fix spacing props on all layout components #30013
  • Fix - Pin Base UI version #29782
  • Fix - Clicking Select label moves focus to trigger #29755
  • Fix DataTable.Pagination count issue #29688

Version 0.3.2#

Bug Fixes#

  • Fix Canon missing dependencies #29642

Version 0.3.0#

New Features#

  • Add DataTable component #29484, #29603
  • Add Select component #29440
  • Add Avatar component #29594
  • Add Collapsible component #29617
  • Add TextField component instead of Field + Input #29364
  • Add TableCellProfile #29600
  • Add breakpoint hooks - up() and down() #29564
  • Add gray scale css tokens #29543

Other Changes#

  • Update CSS styling API using [data-___] instead of class names for props #29560
  • Update Checkbox dark mode #29544
  • Update Container styles #29475
  • Update Menu styles #29351
  • Fix Select styles on small sizes + with long option names #29545
  • Fix render prop on Link #29247
  • Remove Field from TextField + Select #29482
  • Update textDecoration to none on Text / Heading #29357
  • Update textDecoration to none on Text / Heading #29357
  • Docs - Use stories from Storybook for all examples in Nextjs #29306
  • Docs - Add release page (this one 🤗) #29461
  • Docs - Add docs for Menu, Link #29576
  • Fix CSS watch mode #29352

Version 0.2.1#

New Features#

  • Add global CSS reset for anchor tags. #29357

Bug Fixes#

  • Internal refactor and fixes to the prop extraction logic for layout components. #29389
  • Fix types on the Icon component. #29306
  • Updated styles for the Menu component in Canon. #29351
  • Fix the Icon component when the name is not found to return null instead of an empty SVG. #29280

Version 0.2.0#

New Features#

  • New Menu component #29151
  • New IconButton component #29239
  • New ScrollArea component #29240
  • Added global styles to Backstage #29137

Other Changes#

  • Improve Button & Checkbox styles #29127, #28789
  • Improve Text styles #29200
  • Renamed CanonProvider to IconProvider #29002
  • Added about 40+ new icons #29264
  • Simplified styling into a unique styles.css file #29199
  • Update global CSS tokens #28804
  • Merge Stack + Inline into Flex #28634
  • Improve Button types #29205
  • Move font weight and family back to each components #28972
  • Fix custom values in spacing props #28770
  • Multiple updates on the docs site #28760

Version 0.1.0#

Breaking Changes#

  • BREAKING: Merged the Stack and Inline component into a single component called Flex. #28634
  • This is the first alpha release for Canon. As part of this release we are introducing 5 layout components and 7 components. All theming is done through CSS variables. #28562
  • BREAKING: Fixing css structure and making sure that props are applying the correct styles for all responsive values. #28630
  • Updated core CSS tokens and fixing the Button component accordingly. #28789
  • Updated core CSS tokens and fixing the Button component accordingly. #28789
  • BREAKING: Merged the Stack and Inline component into a single component called Flex. #28634
  • BREAKING: Fixing css structure and making sure that props are applying the correct styles for all responsive values. #28630
  • This is the first alpha release for Canon. As part of this release we are introducing 5 layout components and 7 components. All theming is done through CSS variables. #28562

Bug Fixes#

  • Removed client directive as they are not needed in React 18. #28626
  • Fix spacing props not being applied for custom values. #28770
  • Removed older versions of React packages as a preparatory step for upgrading to React 19. This commit does not introduce any functional changes, but removes dependencies on previous React versions, allowing for a cleaner upgrade path in subsequent commits. #28579
  • Fix spacing props not being applied for custom values. #28770
  • Removed client directive as they are not needed in React 18. #28626
  • Removed older versions of React packages as a preparatory step for upgrading to React 19. This commit does not introduce any functional changes, but removes dependencies on previous React versions, allowing for a cleaner upgrade path in subsequent commits. #28579

Version 0.1.0#

We're excited to share the initial release of Backstage UI 💚 In this first alpha version, you'll find the foundation of our design system: a set of versatile layout components and a handful of essential atomic elements to help you get started. While Backstage UI is still in its early stages, it's ready for exploration and we'd love for you to give it a try and share your feedback.