Skip to content

fix(nav): remove underline on hover#6787

Merged
mcoker merged 2 commits into
patternfly:v6from
mcoker:issue-6765
Jun 14, 2024
Merged

fix(nav): remove underline on hover#6787
mcoker merged 2 commits into
patternfly:v6from
mcoker:issue-6765

Conversation

@mcoker

@mcoker mcoker commented Jun 13, 2024

Copy link
Copy Markdown
Contributor

fixes #6765

@patternfly-build

patternfly-build commented Jun 13, 2024

Copy link
Copy Markdown
Collaborator

@srambach srambach left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Delineful!

@mattnolting mattnolting left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like we apply text-decoration: none; to the interactive element itself within several components (icon, jump-links, menu-item, simple-list-item-link, tab-link) and on :hover/:focus in others (breadcrumb-link, label, toggle-group). I prefer setting on the element itself, but we use both, so not a blocker. WDYT about moving to the element's default state?

@andrew-ronaldson andrew-ronaldson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You've crossed the line from awesome to super hero!

@mattnolting

Copy link
Copy Markdown
Collaborator

Also, should you use the semantic token --pf-t--global--link--text-decoration instead of text-decoration: none?

@mcoker

mcoker commented Jun 13, 2024

Copy link
Copy Markdown
Contributor Author

Also, should you use the semantic token --pf-t--global--link--text-decoration instead of text-decoration: none?

@mattnolting I don't think so, reason being --pf-t--global--link--text-decoration is the token/setting for a link's default text decoration. If you were to set that to something custom in an app, we wouldn't want that styling to apply to nav/other (more-button-looking links in components) on hover/focus.

@mcoker

mcoker commented Jun 14, 2024

Copy link
Copy Markdown
Contributor Author

Looks like we apply text-decoration: none; to the interactive element itself within several components (icon, jump-links, menu-item, simple-list-item-link, tab-link) and on :hover/:focus in others (breadcrumb-link, label, toggle-group). I prefer setting on the element itself, but we use both, so not a blocker. WDYT about moving to the element's default state?

@mattnolting nice! We should probably move the rule to the base element. If someone declared --pf-t--global--link--text-decoration to underline regular text links, we wouldn't want that to persist to nav and components like this that we don't want to present like text links 👍👍

@mcoker mcoker requested a review from srambach June 14, 2024 15:23

@srambach srambach left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LPTM 🚀

@mcoker mcoker merged commit a9b79b2 into patternfly:v6 Jun 14, 2024
@patternfly-build

Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 6.0.0-alpha.161 🎉

The release is available on:

Your semantic-release bot 📦🚀

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jun 21, 2024
* fix(nav): remove underline on hover

* fix(nav): move text decoration rule to nav link
@mcoker mcoker deleted the issue-6765 branch January 7, 2025 16:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants