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

feat(badge): evo updates #1493 #1516

Merged
merged 2 commits into from
Jul 20, 2021
Merged

feat(badge): evo updates #1493 #1516

merged 2 commits into from
Jul 20, 2021

Conversation

ianmcburnie
Copy link
Contributor

@ianmcburnie ianmcburnie commented Jul 19, 2021

Close #1493

Updates badge, icon-button, menu & menu-button with latest badge styles from evo.

There's a little bit of hackery with padding to get the text lining up right. Some numbers can look a little uncentered across different browsers. The outer padding when number grows to 2 digit isn't exactly in line with the designs either. I think this is about the most precision we can get though without going and adding a new flex element inside the badge (i.e. a nested span). I'm not opposed to doing that if we have to.

Also, I'll probably come back and fine tune the position of the badge on the icon button. The top and left might need a little adjustment.

I also had to add a new menu__item--badged modifier. This will need adding in coreui.

Screen Shot 2021-07-19 at 3 53 53 PM
Screen Shot 2021-07-19 at 3 52 49 PM

Screen Shot 2021-07-19 at 4 37 25 PM
Screen Shot 2021-07-19 at 4 37 39 PM

Screen Shot 2021-07-19 at 3 53 46 PM
Screen Shot 2021-07-19 at 3 53 36 PM

Screen Shot 2021-07-19 at 4 34 01 PM

@ianmcburnie ianmcburnie self-assigned this Jul 19, 2021
@austingardner
Copy link
Contributor

Yeah I think we should just bite the bullet and add a new flex container if that's what we need to do. That 2 definitely doesn't look centered.

@ianmcburnie
Copy link
Contributor Author

ianmcburnie commented Jul 20, 2021

Small padding adjustment. The single digit now looks more centered.

Screen Shot 2021-07-20 at 11 24 01 AM

Let's merge this PR, as it improves the currently broken state of badge in 13.0.0 branch. Then we can investigate the additional element in a follow up. I think it would certainly simplify the CSS and be more robust across browsers.

Copy link
Contributor

@austingardner austingardner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@ianmcburnie ianmcburnie merged commit de05d40 into 13.0.0 Jul 20, 2021
@ianmcburnie ianmcburnie deleted the 1493-badge-evo branch August 11, 2021 16:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants