The button hoverIndicator property does not work as expected

This is a separate issue, but related to #5680

Expected Behavior

Given that #5680 is fixed or just using JavaScript instead of TypeScript, the button defined as follows:

<Button 
  primary
  label='Click Me!'
  onClick={doStuff}
  hoverIndicator {{ background: { color: 'red' }, elevation: 'small' }} />

Should have a noticeable shadow when hovered over with the mouse.

Actual Behavior

There is no noticeable shadow. Looking at the actual styles in the browser dev tools I see that the shadow that should have been applied by the elevation: 'small' property is being overwritten by what is apparently the “default” shadow of the Button hover state:

.iHgHqy:hover {
  background-color: red;
  color: #000000;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.20); // <- this is the desired shadow set by the "elevation" property
  box-shadow: 0px 0px 0px 2px #439F00; // <- this is the "default" shadow apparently derived from the base button color
}

• Grommet version: 2.18.0
• Browser Name and version: MS Edge
• Operating System and version (desktop or mobile): macOS Big Sur

[chrisvalmonte]

I fixed this initially in #5729, but the PR handled too many concerns so I had to remove it… the box-shadow returned from getHoverIndicatorStyle (at src/js/utils/background.js) gets overriden by the box-shadow defined in StyledButton (at src/js/components/Button/StyledButton.js, line 105) when the plain prop is falsey

[tromgy]

Here’s the sandbox link that shows the issue. Open it and then click “Button” under “Controls” on the page shown in preview.

You should see the behavior described. You can also right-click the button, select Inspect, and then force the “hover” state using the browser dev tools and see the styles: