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: Add LabelCustomColor component #125

Merged
merged 16 commits into from
Mar 22, 2023

Conversation

mturley
Copy link
Collaborator

@mturley mturley commented Mar 21, 2023

Adds a LabelCustomColor component which attempts to render a PatternFly Label with any given hex color, adjusting colors to maintain acceptable text/background contrast.

Idea: If we have a defined set of colors for Tackle Hub, we could write unit tests here that render labels in every one of those colors and check the contrast with real a11y validators like axe.

@migtools-preview-bot
Copy link

🚀 Deployed Storybook Preview: http://migtools-lib-ui-pr-125-preview.surge.sh

@mturley mturley force-pushed the label-custom-color branch from 66f26d4 to 1e809db Compare March 21, 2023 20:19
mturley added 2 commits March 21, 2023 16:31
Signed-off-by: Mike Turley <[email protected]>
Signed-off-by: Mike Turley <[email protected]>
const blackTextReadability = () => tinycolor.readability(bgColorObj, '#000000');
const whiteTextReadability = () => tinycolor.readability(bgColorObj, '#FFFFFF');
while (blackTextReadability() < 9 && whiteTextReadability() < 9) {
bgColorObj.lighten(5);
Copy link
Collaborator

Choose a reason for hiding this comment

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

Nice

}

const globalColorCache: Record<
string,
Copy link
Collaborator

Choose a reason for hiding this comment

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

👍

Copy link
Collaborator

@ibolton336 ibolton336 left a comment

Choose a reason for hiding this comment

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

Very cool, Mike!

@ibolton336 ibolton336 merged commit 9817e08 into migtools:main Mar 22, 2023
@migtools-release-bot
Copy link
Collaborator

🎉 This PR is included in version 8.7.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@mturley mturley deleted the label-custom-color branch March 22, 2023 16:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants