Addition of medium size for badge component

[brenner-company]

Within Kaleidos we could use an additional size for the AuBadge component as default is pretty big & small is too discrete for use within, for example, a step or timeline structure/set-up:

I would suggest an additional medium size for this.

FYI: I have the necessary changes at the ready (inside a branch) for implementation as we needed this already within Kaleidos.

[Windvis]

I'm not 100% sure, but I think the current AuBadge implementation doesn't fully match the Webuniversum version: https://overheid.vlaanderen.be/webuniversum/v3/documentation/atoms/vl-ui-badge

Does the Kaleidos one correspond with one of the Webuniversum sizes?

[brenner-company]

It seems they don't match, but that is not a big issue I think. I'll give it a look when I return from my vacation in about a week 👍

[brenner-company]

I've taken a look at the sizes from both vl-ui-badge and au-badge.

vl-ui-badge:

• large: 57,5px
• medium (default): 45px
• small: 27,5px
• xsmall: 20px

au-badge:

• (default): 48px (no size label specified here)
• medium: 35px (addition we could use within Kaleidos)
• small: 24px

I don't think those can be synced, at first glance, without impact on the projects that use them.

I'm tending towards just adding the medium size and not syncing with webuniversum until later on (maybe a major release with this as a breaking change). What are your thoughts on this?

[Windvis]

Well, I would prefer to stick as close to Webuniversum as possible. If we ignore the 35px that Kaleidos needs for a second, those match more or less, no?

Our default: 48px Webuniversum default: 45px

Our small: 24px Webuniversum small: 27.5px

That seems like we could make them match without it being a breaking change?

I wonder if the Kaleidos case actually needs to be a new option for the AuBadge, or if it could be something custom for the step / timeline component you are building there?

[brenner-company]

Oh, it seems like I was looking at it wrong (keeping tabs on too many things at the moment 😅). With the medium size omitted, it can be synced of course.

That size is something we also need outside the step/timeline context. If needed we can keep the au-c-badge--medium override class within Kaleidos for the moment.

[Windvis]

Yea, I'm not sure to be honest. If it's something custom I always try to determine if it's something that other projects will use, or simply a project specific thing. If you think this size has a use outside of Kaleidos, feel free to add it (but maybe use a different name than the Webuniversum sizes so we can still sync those).

[brenner-company]

I made a visual comparison today (between a few elements/contexts), changing from the local medium size to the default size (from ember-appuniversum) and I think the change will spark remarks from users (without checking with them first) because content next to the badge will get more compressed now (they mostly work on smaller screens).

I think I'll leave it at that at the moment and wait for the sync with webuniversum to change/finalize them. That'll be easier to justify towards the users.

Thanks for the feedback/help!

[Windvis]

Sorry to gate-keep features all the time 😅 . I do really appreciate all the work you do.

[brenner-company]

No, that's ok 🙂 You (or anyone in that matter) have to filter them at a certain point to avoid clutter, abundance, etc. And with a small issue like this, I'm certainly fine with it.