Remove Focus rings on buttons

[sami-azzam]

Is your feature request related to a problem? Please describe.

I really like Hope UI, it seems like the best UI library for Solid atm. However, I personally dislike the focus rings on buttons, I prefer the way Mantine handles it as an example.

Describe the solution you'd like

It would be great if focus rings on buttons were to be removed. In Mantine, focus rings only show when navigating with the keyboard, which is much cleaner in my opinion.

Describe alternatives you've considered

• When using React: Mantine,
• When using Solid: manually trying to figure it out in CSS using Hope UI

Additional Notes

One more (less important) thing... Is there a way to change the style of focus rings on text input components?

Looking forward to your response

[fabien-ml]

Hi, It's already planned in the 1.0 rewrite. Hope UI will use solid-aria focus ring primitive which show focus ring only with keyboard navigation.

[fabien-ml]

For the input focus style you can use the _focus or css props to override it but it will not be applied globally. Please note that the style props API will be removed in 1.0 in favor of plain old CSS.

[sami-azzam]

Hi, It's already planned in the 1.0 rewrite. Hope UI will use solid-aria focus ring primitive which show focus ring only with keyboard navigation.

Great to hear that, thanks!

[danielo515]

Is there any way to opt-out of the _hover stiles applied? I don't want to override them, because then I will be having the same problem of sticky background colors. What I want is to not have any style applied on hover for any variant, so I can use the _active selector that works better on mobile

[fabien-ml]

No its not possible, hover styles of button are "hard coded" in the button.styles.ts. The only solution is to override the styles with _hover or css prop.

[danielo515]

That's very unfortunate. Please note that using _hover or css to override it is not a solution. The problem is that the hover state sticks, so even if I override it to have the same background as the non hover state my override will also stick which is the same problem as the original because it shadows the "active" state that I want to use to denote a user tap/click. Maybe if I use both active + hover I can make it work.

On Sun, Jul 10, 2022 at 10:40 PM Fabien MARIE-LOUISE < @.***> wrote:

No its not possible, hover styles of button are "hard coded" in the button.styles.ts. The only solution is to override the styles with _hover or css prop.

— Reply to this email directly, view it on GitHub https://github.com/fabien-ml/hope-ui/issues/174#issuecomment-1179795721, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARKJWMAYTTXRWDPPRREKODVTMYMDANCNFSM5ZFEWHJQ . You are receiving this because you commented.Message ID: @.***>

--

https://danielorodriguez.com

[fabien-ml]

Yeah i understand, you've reach the point of "that's too cumbersome to customize to fit my need" 😅. The library is not that customizable.

[fabien-ml]

Update, in 1.0 the focus behavior is the same as in Mantine.