vmware-archive/clarity

typography core/clr-modal

coryrylan opened this issue · 1 comments

coryrylan commented

Describe the bug

How to reproduce

https://stackblitz.com/edit/clarity-dark-theme-v5-vzy4py?file=src%2Fapp%2Fapp.component.html

When using the clr-modal the CSS overrides the cds-text utilities if used on the modal heading. Teams wanting to use cds-text cannot since the specificity is high on the modal heading.

Expected behavior

The fix would be to use :not([cds-text]) selector with the modal heading selector to ensure the clr-modal heading styles only apply if cds-text is not used. This will allow us to fix the issue without having to increase the specificity of the cds-text utils. See clr-ui css for similar uses of :not([cds-text]). At minimum for this fix ensure any projected styles of the modal have the not selector to support the cds-text utils.

Versions

Clarity project:

  • Clarity Core
  • Clarity Angular/UI

Clarity version:

  • v3.x
  • v4.x
  • v5.x

Framework:

  • Angular
  • React
  • Vue
  • Other:

Framework version:
ie: Angular 11

Device:

  • Type: [e.g. MacBook]
  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Additional notes

Add any other notes about the problem here.

github-actions commented

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.