search

WestpacGEL / GEL-next

Design System for Westpac
https://gel.westpacgroup.com.au
8 stars 4 forks source link

Default Badges - Text position #787

Closed justinspencer closed 4 months ago

justinspencer commented 4 months ago

The text position in the default badge is not correct. It should be vertically (optically) centred. I've had a look at the CSS and I think I've found a solution:

Use the "normal" value in the line-height property.

However... only do this for the Default Badge as the normal value seems to break all the other components.

I've tested this in Chrome and Safari (Mac) and it looks like it works. I've attached screen grabs showing the 2 versions.

01-incorrect 02-correct
tomjackking commented 4 months ago

@justinspencer this is how it looks on Windows Chrome when setting line height to normal: image This looks like the text is too low to me.

justinspencer commented 4 months ago

@tomjackking Yep you're right. Looks like we'll have to increase the size of the Default label to 20px. This would make them exactly the same as the Github badges which seem to work.

KateMacdonald commented 4 months ago

@tomjackking Hey Tom, while you're in there, we also need to update the label colour of the Faint badge styles to be Text (Muted wasn't accessible).

New colours Faint style colours: Fill=Border Label=Text

Faint soft style colours: Fill=White Border=Border Label=Text

tomjackking commented 4 months ago

This has been merged to develop. For documentation purposes we found in a discussion that the difference in the badge visually between Windows and Mac was because of the Windows font Segoe UI not centring itself. We decided to go with an option that looks visually good on Mac and acceptable on Windows.