fix: [pfe-badge] adds dark variant

[rmscampos]

Related issues

[fix] pfe-badge | adds dark variant #1772

• (switching from .compiled.js to .umd.js #100) Description of issue

PFE-badge variants are barely visible against the background of the RHEC Search pages.

Preview

Link(s) to demo page(s) where this element can be viewed:

• Local: pfe-badge demo page
• Netlify: pfe-badge demo page

What has changed and why

• added a "dark" variant to the pfe-badge files

Testing instructions

• Test case upgraded storybook to the latest alpha release and added a command fo… #1
  1. Go here
  2. Do this
• Test case adding command for new RHElement using generator-rhelement #2
  1. Go here
  2. Do this

Browser requirements

Your component should work in all of the following environments:

• Latest 2 versions of Edge
• Internet Explorer 11 (should be useable, not pixel perfect)
• Latest 2 versions of Firefox (one on Mac OS, one of Windows OS)
• Firefox 78 (or latest version for Red Hat Enterprise Linux distribution)
• Latest 2 versions of Chrome (one on Mac OS, one of Windows OS)
• Latest 2 versions of Safari
• Android mobile device (such as the Galaxy S9)
• Apple mobile device (such as the iPhone X)
• Apple tablet device (such as the iPhone Pro)

Ready-for-merge Checklist

• Expected files: all files in this pull request are related to one request or issue (no stragglers or scope-creep).
• Tests have been updated to cover these changes.
• Browser testing passed.
• Changelog updated.
• Documentation (README.md, WHY.md, etc.) updated or added.
• Link to the demo recording:
• Approved by designer.

Merging

Please squash when merging and ensure your commit message uses conventional commit formatting.

Be sure to share your updates with the [email protected] mailing list!

[netlify]

✔️ Deploy Preview for patternfly-elements ready!

🔨 Explore the source changes: 3ac8ad1

🔍 Inspect the deploy log: https://app.netlify.com/sites/patternfly-elements/deploys/61f9ac705bd9560008057e42

😎 Browse the preview: https://deploy-preview-1783--patternfly-elements.netlify.app

[kylebuch8]

@rmscampos - Thanks for sending this in. I think we want to take a different approach with this issue. Instead of adding another state, like dark, I think we need to take advantage of the context system we have with PatternFly Elements.

https://patternflyelements.org/theming/colors/#contextually-aware-content

I think what we'll end up doing is to make pfe-badge "contextually aware" so the default state of the badge can change its colors based on the context. We have two Sass mixins, pfe-contexts and pfe-surfaces, that helps us accomplish this without too much work.

https://github.com/patternfly/patternfly-elements/blob/master/elements/pfe-sass/mixins/_custom-properties.scss#L181
https://github.com/patternfly/patternfly-elements/blob/master/elements/pfe-sass/mixins/_custom-properties.scss#L142

We're going to get some help from the design team on some background and text colors. I've been chatting with them this morning. Once we get the colors, I can work with you to implement the context aware piece for pfe-badge.

[coreyvickery]

@kylebuch8 Does this still need to be reviewed? @rmscampos Can you provide a preview link? I don't think I saw one.

[rmscampos]

@kylebuch8 Does this still need to be reviewed? @rmscampos Can you provide a preview link? I don't think I saw one.

@coreyvickery Since we're going to be working on an alternative solution, I don't think this needs to be reviewed anymore. Thanks!

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3ac8ad1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[bennypowers]

Closing based on #1783 (comment)

Let's open a new PR against the 2.0 main branch if this is still relevant