Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

v2 Improve Button docs for hoverIndicator

See original GitHub issue

The Button’s hoverIndicator prop does not work as the docs say.

Expected Behavior

Something like: { dark: { color: 'dark-2', opacity: '1', }, light: { color: 'light-2', opacity: '1', },

Actual Behavior

true false "string" "background" { background: "boolean" "string" }

URL, screen shot, or Codepen exhibiting the issue

No need, specifying hoverindicator as in the docs does nothing.

Steps to Reproduce

See and also #3287

Your Environment

Linux, chrome, whatever 😃

  • Grommet version: 2.7.8
  • Browser Name and version: Chrome latest
  • Operating System and version (desktop or mobile): Ubuntu 19.4

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:20 (3 by maintainers)

github_iconTop GitHub Comments

oorestisimecommented, Sep 16, 2019

Another thing that is not explained is what is the purpose of “dark” and “light”. And why “dark” has “boolean” (meaning what?) and “light” does not; why the difference?

that’s another good suggestion. @britt6612 since you owned these changes you might want to think on how to explain these a bit more ?

jaynammodicommented, Feb 13, 2021

@juanlanus I created 2 code sandboxes for you to take a quick look at. I want to understand the problem you had when trying to pass in the object color to the hoverIndicator prop. Also with the theme I did make another code sandbox that uses a custom theme which was very similar to your example you gave.

Please feel free to let me know what was still not clear in the documentation 👍

how do i animate the background image’s position using the hoverIndicator prop? it should be possible but isnt clear enough in the docs

Read more comments on GitHub >

github_iconTop Results From Across the Web

The Best CSS Button Hover Effects You Can Use Too
This article will show you 20 various CSS button hover effects. All are lightweight, simple, and easy to utilize. Even with minimal knowledge...
Read more >
10 Best CSS button hover effects - Alvaro Trigo
Use this buttons CSS hover effects and you'll impress your visitors for sure! Gradients, shadows, transitions, rotations, animations and ...
Read more >
How to fade a button on hover - Learn web development | MDN
In this guide you can find out how to do a gentle fade between two colors when hovering over a button.
Read more >
3 Awesome CSS Button Hover Effects Using HTML & CSS
Follow along step-by-step in this web design tutorial as you learn how to create 3 modern CSS hover effects with HTML and CSS....
Read more >
30 CSS Button Hover Effects That Will Help You Create A ...
A collection of CSS Button Hover Effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found