Clarity v15 Tabs hovering event not having dark theme style specified
YunjunWang opened this issue · comments
This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.
If you are a VMware employee or a contractor in VMware, please use our support channel in slack to raise Clarity issues.
Describe the bug
A clear and concise description of what the bug is, and the conditions when it occurs.
How to reproduce
Please provide a link to a reproduction scenario using one of the Clarity Stackblitz templates. Reports without a clear reproduction may not be prioritized until one is provided.
Steps to reproduce the behavior:
- Go to 'https://stackblitz.com/edit/clarity-dark-theme-clr15-4dwdvg'
- Click on 'Tab 1'
- Hovering on 'Tab 2'
- See error that the tab which has mouse hovering on has default grey background color rather have dark themed background color
- Inspect on 'Tab 2' and check the css styles applied, there's no .nav-link:hover with background-color specified for dark/light themes.
Expected behavior
The tab item which has mouse hovering on should have dark/light themed background colors specified in both clr-ui.min.css and clr-ui-dark.min.css files
Versions
Clarity version:
- v15.x
Framework version:
ie: Angular 15
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.
This looks like a bug in the legacy @clr/ui dark theme (clr-ui-dark.min.css). It is fixed in the @cds/core shim. Your example does not import in the shim file.
See here for a working example: https://stackblitz.com/edit/clarity-dark-theme-clr15-bh5xbf?file=src%2Fstyles.scss,src%2Findex.html
Closed due to inactivity and have a proposed solution.
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.