feat(HelperText): apply tokens by andrew-ronaldson · Pull Request #6118 · patternfly/patternfly

andrew-ronaldson · 2023-12-06T21:08:29Z

patternfly-build · 2023-12-06T21:13:35Z

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

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

mcoker

Just a couple of comments. An aside, we can probably remove all of the text color vars, and just keep the one for indeterminate text to make it grey/subtle, but that can happen later, too.

src/patternfly/components/HelperText/helper-text.scss

mcoker · 2023-12-06T22:16:23Z

src/patternfly/components/HelperText/helper-text.scss


 .#{$helper-text}__item {
  display: flex;
+  font-weight: var(--#{$helper-text}__item--FontWeight);


While I doubt this would be an issue... I think this belongs on __item-text since the text is what we want bolded. Say we added something like sub-text later down the road, or a plain action menu, those and any of their children would be bold from this declaration when we probably don't want that as the default.

Updated these lines to add the __item-text and removed the unused text-color stuff

mcoker

LGTM. Question for you and @lboehling - is there a need for dynamic helper text now? Or do we simply have helper text that's shown the way it is here? That's another bit we can remove if it's no longer a way we intend helper text to be used.

thatblindgeye

Just a comment below. As part of a followup, since all helper text text is now the same color (instead of red for danger, etc) we should also update the "static" example so that it doesn't use status verbiage; ideally we'd probably want to recommend using icons if a helper text is meant to convey status.

thatblindgeye · 2023-12-07T19:38:14Z

src/patternfly/components/HelperText/helper-text.scss

  // icon
-  --#{$helper-text}__item-icon--MarginRight: var(--#{$pf-global}--spacer--xs);
-
+  --#{$helper-text}__item-icon--MarginRight: var(--pf-t--global--spacer--xs);


@mcoker would we want to replace this with a gap on helper-itext__item as a followup instead? May not be viable if we want to consider the possibility of adding other elements that can be rendered inside a helper-text__item, but adding anything extra to a helper text may not be ideal

@thatblindgeye yep! exactly my thinking 👍

patternfly-build · 2023-12-07T20:39:41Z

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

The release is available on:

Your semantic-release bot 📦🚀

* feat(HelperText): first tokens * feat(HelperText): tokens changes * feat(HelperText): fixes

* 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(HelperText): first tokens * feat(HelperText): tokens changes * feat(HelperText): fixes

* 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>