Uploaded image for project: 'Red Hat Internal Developer Platform'
  1. Red Hat Internal Developer Platform
  2. RHIDP-3471

Theme issues with plugins using material 5

Prepare for Y ReleasePrepare for Z ReleaseRemove QuarterXMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Done
    • Icon: Blocker Blocker
    • 1.3
    • None
    • UI
    • 5
    • False
    • Hide

      None

      Show
      None
    • False
    • RHIDP-3825 - Provide the ability to load a custom Backstage theme from a dynamic plugin
    • Hide
      Before this update, {product-short} had theme issues with plugins using Material UI (MUI) 5.

      With this update, {product-short} includes additional MUI 5 related packages, added to the application shell as shared modules.
      Therefore, dynamic plugins that use MUI 5 components and tss-react can properly load the currently selected theme.
      This ensures that MUI 5 components have the correct colors and styling applied to them.

      While not strictly a requirement, if a dynamic plugin relies on MUI 5 components with a class name prefix, that behavior can be added to a frontend dynamic plugin by adding the following code to the plugin's index.ts:

      ----
      import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';

      ClassNameGenerator.configure(componentName => {
        return componentName.startsWith('v5-')
          ? componentName
          : `v5-${componentName}`;
      })
      ----

      This update requires using a version of the @janus-idp/cli package > 1.13.1.
      Show
      Before this update, {product-short} had theme issues with plugins using Material UI (MUI) 5. With this update, {product-short} includes additional MUI 5 related packages, added to the application shell as shared modules. Therefore, dynamic plugins that use MUI 5 components and tss-react can properly load the currently selected theme. This ensures that MUI 5 components have the correct colors and styling applied to them. While not strictly a requirement, if a dynamic plugin relies on MUI 5 components with a class name prefix, that behavior can be added to a frontend dynamic plugin by adding the following code to the plugin's index.ts: ---- import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className'; ClassNameGenerator.configure(componentName => {   return componentName.startsWith('v5-')     ? componentName     : `v5-${componentName}`; }) ---- This update requires using a version of the @janus-idp/cli package > 1.13.1.
    • Bug Fix
    • Done
    • RHDH Dynamic Plugins Team 3263

      Description of problem:

      Incorrect dark text color in dark mode for plugins using material 5

      Prerequisites (if any, like setup, operators/versions):

      Steps to Reproduce

      1. create a plugin that uses material 5 and includes the stepper component. An example is available here
      2. create a dynamic plugin from it and run it locally by following the instructions in backstage-showcase.
      3. go to settings and select Dark Theme in Appearance card.
      4. Observe that the label of the steps are with dark color.

      Actual results:

      Dark text color for stepper label

      Expected results:

      White text color for stepper label

      Reproducibility (Always/Intermittent/Only Once):

      Always

      Build Details:

      Local run of backstage-showcase

      Additional info (Such as Logs, Screenshots, etc):

        1. image (1).png
          image (1).png
          6 kB
        2. screenshot-1.png
          screenshot-1.png
          109 kB

            stlewis_2 Stan Lewis
            brotman@redhat.com Bat-Zion Rotman
            RHIDP - Dynamic Plugins
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: