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

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Undefined Undefined
    • 1.3
    • None
    • UI
    • None
    • False
    • Hide

      None

      Show
      None
    • False
    • RHIDP-3825 - Provide the ability to load a custom Backstage theme from a dynamic plugin
    • Hide
      This change introduces several additional MUI 5 related packages to the Red Hat Developer Hub application shell as shared modules. This enables dynamic plugins that use MUI 5 components and tss-react to properly load the currently selected theme. This ensures that MUI 5 components will have the correct colors and styling applied to them.

      While not strictly a requirement, if a dynamic plugin relies on MUI v5 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 ( proper version TBD)
      Show
      This change introduces several additional MUI 5 related packages to the Red Hat Developer Hub application shell as shared modules. This enables dynamic plugins that use MUI 5 components and tss-react to properly load the currently selected theme. This ensures that MUI 5 components will have the correct colors and styling applied to them. While not strictly a requirement, if a dynamic plugin relies on MUI v5 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 ( proper version TBD)
    • Bug Fix

      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:
            2 Start watching this issue

              Created:
              Updated: