Orange-OpenSource
[Component] Update `badge` component (badge, badge count, badge icon (v1.2)
Description
Verbatim of @MaximeTonnerre
Release note:
- The component now has two states: Enabled and Disabled.
- Documentation has been updated and published in Zeroeight, with use case examples provided for every state.
- The colors and background tokens for the functional states of the positive and info statuses have been changed.
- The minimum required contrast ratio has been corrected from 3:1 to 4.5:1 between content (icon) and background for Enable state.
- Functional badges (Positive, Warning, Negative, Info) differ from non-functional ones: they can only use functional icons, while non-functional badges are not supported.
- For the “Status neutral” variant:
- The content token “color-content-on-status-neutral-emphasized” has been replaced by the token “color-content-inverse”
- The surface token “color-surface-status-neutral-emphasized” has been replaced by the token “color-surface-inverse-high”
Definition of Ready
To be defined
Definition of Done
To be defined
Resources
See internal Figma
@hannahiss when testing in firefox mac, only in some cases, the icon is not centered within the badge (the other icons in the page seem fine):
This seems ok in chrome, edge and safari on mac. I have not tested on a pc.
For functionnal badges, the accessiilty § is not enough: "Keep in mind that color should not be the only way to convey information. In functional badges, the color has a strong meaning, it must be reflected in the badge's .visually-hidden associated text. Read more about badges accessibility here."
ît should be something like: "Keep in mind that color should not be the only way to convey information. In functional badges, the color has a strong meaning; it must be reflected in the badge's .visually-hidden associated text. Furthermore, for colorblind users and some visually impaired people, if there's more than one colored badge used in the same context, only colors convey information. In this case, an icon must be used to give the same information transmitted by the different colors. Read more about badges accessibility here." and perhaps we must add a clear example.
Hello @B3nz01d , Thanks for the feedback, we already knew that it was already like that on some screens. It seems to be related to pixel density rather than the browser being used. Anyway we'll fix that, but it was already like that before and not something introduced with tokens update, so we decided not to wait for this fix to merge the token update. We took a look at the issue and tried some things, but it not as trivial as it could seems to be. I created this issue for the bug : https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/3237
On a PC eburo I get the same issues on all browsers (Chrome, Firefox, Edge) for the badge count, but no issues for the badge icon:
@B3nz01d Yes, but on mine, with Chrome and Firefox, it's just right:
It seems to depend on the screen... So the problem is not simple.
NB: on wich branch/preview are you to have this old version of doc? You should test on ouds-main (https://ouds-main--boosted.netlify.app/orange/docs/0.5/components/badges/)
I propose to continue discussion around the vertical shift in the corresponding issue : https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/3237 to avoid mixing update linked to the component and tokens with something that is not related to that.
