Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Button] Make ghost buttons consistent #1496

Open
Tracked by #1163
Diaan opened this issue Sep 3, 2024 · 0 comments
Open
Tracked by #1163

[Button] Make ghost buttons consistent #1496

Diaan opened this issue Sep 3, 2024 · 0 comments
Labels
bug Something isn't working UI High-fidelty (multi-brand) design

Comments

@Diaan
Copy link
Collaborator

Diaan commented Sep 3, 2024

There are inconsistencies in how we make (visually) borderless (ghost) buttons. These inconsistencies cause problems in the code.
The proposal for now is to match Neon and ClickEdu to all the other team; give them a border (in the default width) in the same colour as the background.

In the toggle group the fill of the toggle buttons was set to 'ghost', but this caused issues for some themes (esp. Clickedu) because there the border was set to 0 (logical, because there is no border), while in other themes the border-width of the ghost button was the same as of the other fills (for example outline), but the colour of the border was the same as the background, so you would not see it.
This border-width is used to calculate the correct padding to end up with a 32 or 40 px button.
In the toggle-group the actual border of the toggle-button is set to 0 (so the button will be less than 32 or 40 px high) and then "replaced" by the button on the group, so it's back to its original height
If the button is already 0, the height of the button won't change, but the group-border will add extra height.

Most themes have a border width set for the ghost button, Neon and Click Edu are the only ones that don't.
Image

I would suggest making this uniform to prevent surprises like this one in the future.

Originally posted by @Diaan in #1480

@Diaan Diaan added bug Something isn't working UI High-fidelty (multi-brand) design labels Sep 3, 2024
@Diaan Diaan changed the title Make ghost buttons consistent [Button] Make ghost buttons consistent Sep 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working UI High-fidelty (multi-brand) design
Projects
Status: 👩‍🏭 Refining
Development

No branches or pull requests

1 participant