AppSideNav::List:Link - Fix styles when rendered as button
#3026
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…nk` element (to avoid inheriting from the `<button>` element when it’s a button and not a link
….hds-[app-]side-nav__list-item-link` is a button
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
didoo
force-pushed
the
sidenav-list-link-fix-button-styles
branch
from
306eb3f to
6c7cebb
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📌 Summary
While working on #3025 I noticed that when the
AppSideNav::List:Linkis rendered as a<button>, it inherits some of the styles from the HTML element itself.This PR addresses this issue.
🛠️ Detailed description
In this PR I have:
.hds-app-side-nav__list-item-linkelement.hds-side-nav__list-item-linkelement because in that case abackground-colorwas specifically assigned.hds-[app-]side-nav__list-item-linkelements.hds-[app-]side-nav__list-item-linkis a button📸 Screenshots
Before:
After:
🔗 External links
Jira ticket: https://hashicorp.atlassian.net/browse/HDS-5153
👀 Component checklist
💬 Please consider using conventional comments when reviewing this PR.
📋 PCI review checklist
Examples of changes to controls include access controls, encryption, logging, etc.
Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.