Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added :focus-within for .table-hover class #38825

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

tobiasnitsche
Copy link

Adds the css state :focus-within to .table-hover, to keep the hover state visually.

Description

When you are hovering with the mouse over a "tbody > tr", which has the ".table-hover" class, it works great.

If you do a right click on the row, the row looses this effect. So i added ".focus-within" to the ".table-hover" class.

Motivation & Context

Which problem does it solve? Actually we have tables which have a stretched link above the whole "tr" which works great. But what if the user does a right click on the "tr" ? Then the user does not know which row the right click happened.

Type of changes

New feature (think so)

Checklist

  • [ x] I have read the [contributing guidelines]
  • [ x] My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation (not needed)
  • [x ] I have updated the documentation accordingly
  • I have added tests to cover my changes(not needed)
  • [x ] All new and existing tests passed

Preview

Row keeps the "hover" state on right click

grafik

Related issues

Adds the css state :focus-within to .table-hover, to keep the hover state visually.
@tobiasnitsche tobiasnitsche requested a review from a team as a code owner June 26, 2023 13:01
scss/_tables.scss Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants