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

Add hover state to IssueLabelToken #3112

Merged
merged 7 commits into from
Apr 13, 2023
Merged

Conversation

langermank
Copy link
Contributor

The most elegant solution for adding state to user generated colors is probably to use the upcoming color-mix() function. It doesn't have full browser support yet, so I added a fallback using background-image with a linear-gradient.

This is just a draft/prototype as I think it needs some fine tuning.

Closes #3072

Screenshots

CleanShot.2023-04-03.at.11.59.42.mp4

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

@changeset-bot
Copy link

changeset-bot bot commented Apr 3, 2023

🦋 Changeset detected

Latest commit: a8de9fb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Apr 3, 2023

size-limit report 📦

Path Size
dist/browser.esm.js 95.86 KB (+0.1% 🔺)
dist/browser.umd.js 96.46 KB (+0.09% 🔺)

@langermank langermank temporarily deployed to github-pages April 3, 2023 19:08 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-3112 April 3, 2023 19:09 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-3112 April 12, 2023 11:17 Inactive
@lukasoppermann
Copy link
Contributor

@langermank I think the way it was set up does not work. Due to the gradient overlaying the bg, the color-mix did not have a great effect.

I replaced this now with an overlay for light and a hsla color change for dark mode. That should fix it for now. It will never be as good as with predefined colors that have pre-defined hover colors though.

@lukasoppermann lukasoppermann temporarily deployed to github-pages April 12, 2023 12:21 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-3112 April 12, 2023 12:21 Inactive
@lukasoppermann lukasoppermann temporarily deployed to github-pages April 12, 2023 13:12 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-3112 April 12, 2023 13:12 Inactive
@lukasoppermann lukasoppermann marked this pull request as ready for review April 12, 2023 13:36
@lukasoppermann lukasoppermann requested review from a team, mperrotti and colebemis April 12, 2023 13:36
@lukasoppermann lukasoppermann temporarily deployed to github-pages April 12, 2023 13:59 — with GitHub Actions Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-3112 April 12, 2023 13:59 Inactive
Copy link
Contributor

@colebemis colebemis left a comment

Choose a reason for hiding this comment

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

Looks great in Storybook 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Interactive IssueLabelToken does not render any hover effects
3 participants