search

RedHat-UX / red-hat-design-system

Red Hat's Design System
https://ux.redhat.com
MIT License
92 stars 18 forks source link

[bug] `color-palette` not respected for components inside the shadow root when the host is a provider #1773

Closed adamjohnson closed 6 hours ago

adamjohnson commented 3 weeks ago

Describe the bug

If you have a component that is a colorContextProvider and nest an RHDS component in the shadowDOM of that provider, the nested component does not receive the appropriate color context from the host.

I'm currently nesting rh-button in the shadowDOM and not seeing the appropriate color palette on rh-button when color-palette="dark" is applied to the host.

Screenshots

Screenshot of a dark palette card with a close button next to the CTA that should be lighter than it is

Steps to reproduce

  1. Clone RHDS, install dependencies and type npm run dev.
  2. Go to elements/rh-card/rh-card.ts
  3. On line 8, add import '@rhds/elements/rh-button/rh-button.js';
  4. After line 104, hit enter and add <rh-button variant="close">Close</rh-button> (or anywhere inside the render() method.
  5. Go to elements/rh-card/demo/rh-card.html and add color-palette="dark" to the card.
  6. View the demo in your browser at http://localhost:8000/elements/card/demo/

Results

While the rh-card has a dark color context, the rh-button element still displays in the light color context.

Expected behavior

The rh-button should inherit the color palette from the host and display light on light contexts and dark on dark contexts.

Operating System and Browsers

All

adamjohnson commented 3 weeks ago

@zeroedin Also mentioned this bug in this rh-video-embed comment.

bennypowers commented 6 hours ago

I took the following steps:

  1. checkout clefairy branch
  2. npm ci
  3. npm run dev
  4. navigate to http://localhost:8000/elements/card/demo/
  5. run this script in the console:
const card = $('rh-card')
card.colorPalette = 'darkest'
card.shadowRoot.getElementById('container').append(card.querySelector('rh-cta'))

I then observed that the cta, now in the shadow root, has the proper colours

I do believe that this addresses the issue as presented. It could be that adjustments on a per-element basis need to be made in #1853, so let's address any that come up over there.