feat(banner): refactor with tokens #6081

wise-king-sullyman · 2023-11-28T14:17:49Z

Convenience link: https://patternfly-pr-6081.surge.sh/components/banner

patternfly-build · 2023-11-28T14:21:24Z

Preview: https://patternfly-pr-6081.surge.sh

A11y report: https://patternfly-pr-6081-a11y.surge.sh

thatblindgeye · 2023-11-29T13:51:04Z

One quick thing I'm noticing is the color contrast for the status examples is failing for the success and danger banners in light mode. Updating them to the same color as the info banner resolves that. cc @lboehling @andrew-ronaldson

In dark mode the danger and info banners I'm not personally sure about the color and background contrast. They aren't being flagged by aXe, but they seem a little difficult for me to make out personally. Those ones aren't a blocker since it could be my eyes this morning and worth getting other opinions on.

lboehling · 2023-11-29T14:12:57Z

can you make sure that the text and icon colors are using the on-status text color tokens? text--color--status--on-danger, on-success, etc. and icon--color--status--on-danger, on-success, etc.? this should fix this issue. it won't match up to the figma file since the figma file has updated brand colors that haven't been pulled into code yet, but updating these tokens will make sure it's accessible once that's pulled in.

srambach

LOL, I had the same comment as @lboehling and @thatblindgeye but forgot to submit the review!

srambach · 2023-11-28T21:57:52Z

src/patternfly/components/Banner/banner.scss

+
+  &.pf-m-info {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-info--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-info--Color);


I think to be safe, we need to follow this pattern of setting the color to the "-on-" color for each variation. (e.g. --pf-t-global-text-color-nonstatus-on-orange-default)

srambach

My only question is for design - whether we want to rearrange the order of the examples and documentation sections to emphasize the status variants over the individual color variants.
Otherwise, ⭐ 🚀

thatblindgeye

Looks good! Some of the color contrasts seem a little low for me personally, but they aren't failing AA in aXe in Chrome so I wouldn't block + we can always revisit if we receive similar comments from consumers/users

patternfly-build · 2023-11-30T20:19:21Z

🎉 This PR is included in version 6.0.0-alpha.28 🎉

The release is available on:

Your semantic-release bot 📦🚀

* feat(breaker): bump this version to 6.0 (#5800) * fix: use prerelease tag format with dry run * fix: turn off dryrun * feat(tokens): add initial global tokens (#5843) * feat(Button): adds tokens and applies to buttons (#5908) * feat(table): apply tokens from hackathon (#5965) * feat(menu-toggle): add in work from hackathon (#5931) * feat(nav): adds tokens to page and nav (#5942) * chore(tokens): update tokens from figma (#5970) * feat(page): page and masthead updates from hackathon (#5968) * fix(tokens): add dark theme blend mode token (#5992) * feat(notificationBadge): refactor with tokens (#5991) * chore(masthead ): applied tokens (#6004) * feat(alert): apply tokens (#6002) * feat(alert): apply tokens * feat(alert): remove unused background color * feat(page): apply tokens (#6021) * feat(page): apply tokens * feat(page): undo menu__list change * feat(page): tweak spacing * fix(table): fix clickable overlay (#6025) * fix(box-shadow): typo in box shadow token names (#6039) * fix(badge): adds tokens, dropdown toggle icon (#6037) * feat(hint): apply tokens (#6030) * feat(hint): apply tokens * feat(hint): fix typo * feat(hint): update spacing * feat(hint): update border radius * feat(hint): fix heading font * feat(text, title, list): apply tokens (#6031) * feat(page): remove padding on nav sidebar (#6053) * fix(tokens): adjust font-weight base for headings (#6070) * feat(login): apply tokens (#6028) * feat(modal): add tokens to modal and about modal (#6042) * fix(font): use variable font, add opt-in for legacy font (#6073) * feat(ExpandableSection): added tokens (#6063) * feat(Tooltip): applied tokens (#6064) * feat(Popover): applied tokens (#6065) * feat(BackToTop): refactor with tokens (#6085) * feat(SkipToContent): refactor with tokens (#6090) * feat(Accordion): applied tokens (#6058) * feat(banner): refactor with tokens (#6081) * feat(InlineEdit): applied tokens Took a stab at applying the tokens here. There are some items that will be fixed with icon buttons. * chore(tokens): updates tokens from figma (#6103) * chore(tokens): updating usage of new font tokens (#6111) * feat(breadcrumb): apply tokens (#6060) * feat(HelperText): apply tokens (#6118) * feat(HelperText): first tokens * feat(HelperText): tokens changes * feat(HelperText): fixes * feat(Pagination): applied tokens (#6089) * feat(Pagination): applied tokens * Removed themes directory * Removed button and menutoggle styles, added wrapper * Removed padding vars for pagination container * Updated tokens and vars for padding * fix(Pagination): updated property order * Updated var names to remove md text * feat(avatar): apply tokens (#6122) * chore(ExpandableSection): updated Penta docs and focus/hover styling (#6124) * feat(EmptyState): apply tokens (#6056) * fix(form): keep form groups/controls from growing too wide (#6109) * chore(deps): update dependency @patternfly/react-core to v5.1.2 (#6113) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @patternfly/react-code-editor to v5.1.2 (#6112) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @patternfly/react-table to v5.1.2 (#6114) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(card/menu-toggle/check): alignment bugs (#6110) * feat(SimpleList): pull in new v6 branch (#6128) * chore: turn on dryrun until release fixed [ci skip] --------- Co-authored-by: Sarah Rambacher <[email protected]> Co-authored-by: Michael Coker <[email protected]> Co-authored-by: Matt Nolting <[email protected]> Co-authored-by: Eric Olkowski <[email protected]> Co-authored-by: Austin Sullivan <[email protected]> Co-authored-by: Andrew Ronaldson <[email protected]> Co-authored-by: kmcfaul <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* feat(breaker): bump this version to 6.0 (patternfly#5800) * fix: use prerelease tag format with dry run * fix: turn off dryrun * feat(tokens): add initial global tokens (patternfly#5843) * feat(Button): adds tokens and applies to buttons (patternfly#5908) * feat(table): apply tokens from hackathon (patternfly#5965) * feat(menu-toggle): add in work from hackathon (patternfly#5931) * feat(nav): adds tokens to page and nav (patternfly#5942) * chore(tokens): update tokens from figma (patternfly#5970) * feat(page): page and masthead updates from hackathon (patternfly#5968) * fix(tokens): add dark theme blend mode token (patternfly#5992) * feat(notificationBadge): refactor with tokens (patternfly#5991) * chore(masthead ): applied tokens (patternfly#6004) * feat(alert): apply tokens (patternfly#6002) * feat(alert): apply tokens * feat(alert): remove unused background color * feat(page): apply tokens (patternfly#6021) * feat(page): apply tokens * feat(page): undo menu__list change * feat(page): tweak spacing * fix(table): fix clickable overlay (patternfly#6025) * fix(box-shadow): typo in box shadow token names (patternfly#6039) * fix(badge): adds tokens, dropdown toggle icon (patternfly#6037) * feat(hint): apply tokens (patternfly#6030) * feat(hint): apply tokens * feat(hint): fix typo * feat(hint): update spacing * feat(hint): update border radius * feat(hint): fix heading font * feat(text, title, list): apply tokens (patternfly#6031) * feat(page): remove padding on nav sidebar (patternfly#6053) * fix(tokens): adjust font-weight base for headings (patternfly#6070) * feat(login): apply tokens (patternfly#6028) * feat(modal): add tokens to modal and about modal (patternfly#6042) * fix(font): use variable font, add opt-in for legacy font (patternfly#6073) * feat(ExpandableSection): added tokens (patternfly#6063) * feat(Tooltip): applied tokens (patternfly#6064) * feat(Popover): applied tokens (patternfly#6065) * feat(BackToTop): refactor with tokens (patternfly#6085) * feat(SkipToContent): refactor with tokens (patternfly#6090) * feat(Accordion): applied tokens (patternfly#6058) * feat(banner): refactor with tokens (patternfly#6081) * feat(InlineEdit): applied tokens Took a stab at applying the tokens here. There are some items that will be fixed with icon buttons. * chore(tokens): updates tokens from figma (patternfly#6103) * chore(tokens): updating usage of new font tokens (patternfly#6111) * feat(breadcrumb): apply tokens (patternfly#6060) * feat(HelperText): apply tokens (patternfly#6118) * feat(HelperText): first tokens * feat(HelperText): tokens changes * feat(HelperText): fixes * feat(Pagination): applied tokens (patternfly#6089) * feat(Pagination): applied tokens * Removed themes directory * Removed button and menutoggle styles, added wrapper * Removed padding vars for pagination container * Updated tokens and vars for padding * fix(Pagination): updated property order * Updated var names to remove md text * feat(avatar): apply tokens (patternfly#6122) * chore(ExpandableSection): updated Penta docs and focus/hover styling (patternfly#6124) * feat(EmptyState): apply tokens (patternfly#6056) * fix(form): keep form groups/controls from growing too wide (patternfly#6109) * chore(deps): update dependency @patternfly/react-core to v5.1.2 (patternfly#6113) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @patternfly/react-code-editor to v5.1.2 (patternfly#6112) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @patternfly/react-table to v5.1.2 (patternfly#6114) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(card/menu-toggle/check): alignment bugs (patternfly#6110) * feat(SimpleList): pull in new v6 branch (patternfly#6128) * chore: turn on dryrun until release fixed [ci skip] --------- Co-authored-by: Sarah Rambacher <[email protected]> Co-authored-by: Michael Coker <[email protected]> Co-authored-by: Matt Nolting <[email protected]> Co-authored-by: Eric Olkowski <[email protected]> Co-authored-by: Austin Sullivan <[email protected]> Co-authored-by: Andrew Ronaldson <[email protected]> Co-authored-by: kmcfaul <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

patternfly-build · 2024-01-14T14:39:47Z

🎉 This PR is included in version 6.0.0-alpha.61 🎉

The release is available on:

Your semantic-release bot 📦🚀

feat(banner): refactor with tokens

5c4dd71

wise-king-sullyman added 2 commits November 28, 2023 09:48

chore(banner): remove dark theme

d113173

chore(banner): update class documentation

19275e0

wise-king-sullyman requested review from a team, andrew-ronaldson and mattnolting and removed request for a team November 28, 2023 14:59

srambach reviewed Nov 29, 2023

View reviewed changes

wise-king-sullyman linked an issue Nov 29, 2023 that may be closed by this pull request

Banner tokens #6082

Closed

feat(banner): add text color tokens

6d0d82c

wise-king-sullyman requested review from lboehling, srambach and thatblindgeye November 29, 2023 21:59

srambach approved these changes Nov 30, 2023

View reviewed changes

thatblindgeye approved these changes Nov 30, 2023

View reviewed changes

mcoker merged commit 81e5308 into patternfly:v6 Nov 30, 2023

mcoker mentioned this pull request Nov 30, 2023

Banner tokens #6082

Closed

patternfly-build added the released on @alpha label Nov 30, 2023

mcoker pushed a commit to mcoker/patternfly that referenced this pull request Dec 1, 2023

feat(banner): refactor with tokens (patternfly#6081)

0ffd7a1

wise-king-sullyman deleted the tokenize-banner branch December 7, 2023 22:08

nicolethoen pushed a commit that referenced this pull request Dec 12, 2023

feat(banner): refactor with tokens (#6081)

b18d07f

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Dec 12, 2023

feat(banner): refactor with tokens (patternfly#6081)

6d2dd7d

nicolethoen pushed a commit that referenced this pull request Dec 12, 2023

feat(banner): refactor with tokens (#6081)

0b37889

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Dec 13, 2023

feat(banner): refactor with tokens (patternfly#6081)

9215c26

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Dec 19, 2023

feat(banner): refactor with tokens (patternfly#6081)

5bcb072

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Dec 27, 2023

feat(banner): refactor with tokens (patternfly#6081)

df7e28b

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 2, 2024

feat(banner): refactor with tokens (patternfly#6081)

b5b0d5b

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 3, 2024

feat(banner): refactor with tokens (patternfly#6081)

7135ea5

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 4, 2024

feat(banner): refactor with tokens (patternfly#6081)

09f2828

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 15, 2024

feat(banner): refactor with tokens (patternfly#6081)

b4667a5

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 15, 2024

feat(banner): refactor with tokens (patternfly#6081)

4a00d9d

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 15, 2024

feat(banner): refactor with tokens (patternfly#6081)

33ac721

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 15, 2024

feat(banner): refactor with tokens (patternfly#6081)

af1b87f

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 15, 2024

feat(banner): refactor with tokens (patternfly#6081)

4f1f44e

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 16, 2024

feat(banner): refactor with tokens (patternfly#6081)

35ae154

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jan 16, 2024

feat(banner): refactor with tokens (patternfly#6081)

0d6e1ff

patternfly-build mentioned this pull request Apr 16, 2025

The automated release is failing 🚨 #7464

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(banner): refactor with tokens #6081

feat(banner): refactor with tokens #6081

Uh oh!

wise-king-sullyman commented Nov 28, 2023 •

edited

Loading

Uh oh!

patternfly-build commented Nov 28, 2023 •

edited

Loading

Uh oh!

thatblindgeye commented Nov 29, 2023 •

edited

Loading

Uh oh!

lboehling commented Nov 29, 2023

Uh oh!

srambach left a comment

Uh oh!

srambach Nov 28, 2023

Uh oh!

srambach left a comment

Uh oh!

thatblindgeye left a comment

Uh oh!

patternfly-build commented Nov 30, 2023

Uh oh!

patternfly-build commented Jan 14, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

feat(banner): refactor with tokens #6081

feat(banner): refactor with tokens #6081

Uh oh!

Conversation

wise-king-sullyman commented Nov 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patternfly-build commented Nov 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thatblindgeye commented Nov 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lboehling commented Nov 29, 2023

Uh oh!

srambach left a comment

Choose a reason for hiding this comment

Uh oh!

srambach Nov 28, 2023

Choose a reason for hiding this comment

Uh oh!

srambach left a comment

Choose a reason for hiding this comment

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

patternfly-build commented Nov 30, 2023

Uh oh!

patternfly-build commented Jan 14, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

wise-king-sullyman commented Nov 28, 2023 •

edited

Loading

patternfly-build commented Nov 28, 2023 •

edited

Loading

thatblindgeye commented Nov 29, 2023 •

edited

Loading