v2 Improve Button docs for hoverIndicator

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 https://v2.grommet.io/button#hoverIndicator 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

[oorestisime]

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 ?

[jaynammodi]

@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. https://codesandbox.io/s/buttonhovertheme-02teb

https://codesandbox.io/s/buttonhoverindicatorprop-l8zvk

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