Vocabulary: The hover state of button component is not correct

[panchovm]

Describe the bug

The button has a different background color and it has an underline style during the hover state. In the default state, the icon has an incorrect color.

Expected behavior

1. It should not have an underline style
2. The background color should be the interaction color defined in the Design Library.
3. The icon should be white with 50% opacity in default and hover state.

Screenshots

[LarrySul]

@brenoferreira I see you are transferring the issue but I'm curious as to know why . Although I just started contributing yesterday so I have a little understanding .

[LarrySul]

@panchovm has the issue been assigned yet ? Would like to work on it 😊

[dhruvkb]

@LarrySul you can work on it but only after you've resolved the other issues assigned to you.

[LarrySul]

@panchovm could you help with the value of the defined background color ? @dhruvkb noted !

[panchovm]

Here is the Design Library. Page Color.

1. Background color, default state: ForestGreen
2. Background color, hover state: BrighterForestGreen

[LarrySul]

@panchovm alright ...

[Dishebh]

@dhruvkb @LarrySul I would like to work on the issue.

[LarrySul]

@Dishebh please go ahead with it ...

[Dishebh]

@panchovm @LarrySul can you please tell how do I replicate the issue? All the buttons I see in the repo do not have any style underline on hover. I also don't see the button (given in PR description) in the project website.

[LarrySul]

@Dishebh that's more reason I wasn't able to make a PR to close the issue so I thought I probably wasn't doing something right, so I wanted to let someone else try it out ... Everything seems okay to me tho . I guess someone else already fixed this from another PR that was merged

[Dishebh]

@panchovm I guess the issue has been resolved.

[panchovm]

Let me tag @dhruvkb since he is more aware of all ticket's progress.

[dhruvkb]

@Dishebh this issue arises because of a feature that allows anchor links to be styled as buttons. None of the Button stories on Vocabulary demonstrate this feature (which is a shortcoming of the docs that you should ideally address when solving this issue).

To see the issue, you can see the underline by hovering on the "Go to image's website" button on CC Search.

To reproduce this issue, style an anchor tag like so:

<a class="button is-success" href="#">
  I'm pretending to be a button
</a>

[Dishebh]

@dhruvkb so should I make a separate section under buttons that have both buttons as buttons and anchor tags styled as buttons, and then correct the styling of the anchor buttons (as per this issue description)? Because, as you mentioned, there are no anchor tags (currently in the storybook) styled as buttons having class .is-success. Please let me know if we are on the same page here. Thanks!

[dhruvkb]

@Dishebh you can just add the corresponding anchor-tag buttons in all the stories of the button-tag buttons but fix their styling so that they work exactly the same?

[Dishebh]

@dhruvkb something like this? (Both having the same styling)

[Dhruvi16]

I guess these issues are fixed.