Feature Overview (aka. Goal Summary)

Add support for the new Backstage UI library (previously called Canon):

1. https://ui.backstage.io/
2. https://backstage.io/storybook/

Goals (aka. expected user outcomes)

Support plugins that uses the Backstage UI library by loading at least the necessary CSS files.

Questions that should be answered:

1. Is it possible to use it today?
   • Yes, also if its still called alpha.
   • Plugin support is enabled by default in Backstage
2. Is any backstage/backstage or backstage/community-plugins code is adopting it already?
   • Jan 22nd, 2025: No plugin is using it at the moment
   • Jun 23nd, 2025: No plugin adoption in BCP so far
   • Sep 18th, 2025: First plugin has adopted it: report-portal
3. How does it work together with MUI?
   • It uses it's own CSS scope, both live side by side
4. How does it work together with Dynamic plugins?
   • Because it uses global variables in CSS it should work well.
   • The only problem could happen if a plugin uses another version of Backstage UI then the RHDH core
5. Is there a Backstage compatibility (planned), so that the colors are picked up automatically? What is required to support customization in our RHDH theme? In the best case, we want to use colors from our existing theme to style Canon components automatically.
6. Are there known bugs or need-help issues?
7. Does it support good a11y? For example, I noticed that the buttons don't have a focus indicator at the moment. We should report bugs if needed.

Requirements (aka. Acceptance Criteria):

1. The questions above should be answered
2. Support plugins that uses the Backstage UI library
3. Create a small Backstage UI test plugin (we have similar test plugins for MUI v4 and MUI v5 in the theme repo: https://github.com/redhat-developer/rhdh-plugins/tree/main/workspaces/theme/plugins)
4. Align the design of Backstage UI components (Button, Card) with PatternFly / RHDH theme
5. Pick up colors from the Backstage Theme / RHDH theme

Out of Scope (Optional)

Customer Considerations (Optional)

1. Customers might want use the new Backstage UI library for their own plugin?
2. Marketplace/Community plugins might adapt the library in the future.

Documentation Considerations

1. Does our dynamic plugin documentation or customer documentation contain info about MUI?