Button focus styles are overlapping with the border

tablecheck / tablekit

Next generation UI component library

https://tablekit.tablecheck.com/

MIT License

8 stars 2 forks source link

Button focus styles are overlapping with the border #134

Closed SimeonC closed 1 year ago

SimeonC commented 1 year ago

Having an inconsistent width border has issues like below, this needs to be fixed in both Button and Button Icon components. CleanShot 2022-10-03 at 10 22 03

Possible solutions here: https://stackoverflow.com/questions/38165317/dont-affect-positioning-of-other-elements-on-border-width-changes

hachi-studio commented 1 year ago

@SimeonC In buttonGroup @SashaShostyr has used box-shadow inset for the button borders, and a standard border for the focus which seems to work nicely.

Just tried this on iconButton and it keeps a consistent total height of buttons regardless if they have borders or not, and seems to solve this issue.

Any issue with using this approach? If not I'll update the button to follow suit

SimeonC commented 1 year ago

I think there may have been some issues with the button group, but apart from that yea I think this should be OK.

It'd be great if we could just globally apply this to :focus-visible rather than have to add it to each component 🤔