feat(breadcrumb): apply tokens #6060

kmcfaul · 2023-11-14T16:33:08Z

First pass at this!

I couldn't find an analog for $pf-v5-global--spacer--form-element in the new design tokens (equates to 6px), should I use --pf-t--global--spacer--sm (8px) and subtract 2 inline or is there another token I'm overlooking?
Edit: per penta happy hour, replacing with --pf-t--global--spacer--sm for now

I also noticed that --pf-t--global--link--text-decoration was also set to --pf-t--global--text-decoration--200 (same as hover state) and it should probably be --pf-t--global--text-decoration--100 instead? I adjusted it in this PR but am unsure if I'm right and if so whether that's the right location to fix it.

Beyond those token specific questions there are some differences I'm noticing between the css and figma that I'm less sure about editing (such as figma using padding over margin, and line height ending up different despite using the analogous token) so would love some feedback
Edit: also from happy hour, some differences are still to be expected about padding v margin, and line height token will be fixed in another update. That said, there's still a bit of a difference in the spacing between items I'd like some feedback on.

patternfly-build · 2023-11-14T16:38:32Z

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

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

kmcfaul · 2023-11-15T19:25:56Z

@srambach @lboehling @andrew-ronaldson Want to confirm that the --pf-t--global--link--text-decoration is meant to be none and not underline (it was set to underline and this PR changes it to none so as to match the figma).

@srambach @mcoker I'm a little unsure why the figma's spacing between items looks a little wider than what I'm getting on the surge/locally, it should be using the same token.

srambach · 2023-11-17T18:48:32Z

I think the difference in spacing is from the caret icon, which is square in Figma but is just the size of the icon here. We just talked about how this should be fixed by adoption of the new icon set, I believe - @mcoker @lboehling is that correct?

That said, I also think the flex container could be changed here to use gap rather than using a margin on each item. @kmcfaul is that something you'd feel comfortable tackling? We can do a follow-on if not.

kmcfaul · 2023-12-04T15:51:43Z

@srambach Opened #6097 to follow up with the gap

andrew-ronaldson · 2023-12-05T13:29:36Z

@srambach @lboehling @andrew-ronaldson Want to confirm that the --pf-t--global--link--text-decoration is meant to be none and not underline (it was set to underline and this PR changes it to none so as to match the figma).

In the Figma file I have a underline on the hover state of the interactive breadcrumb elements.

srambach

🍞

thatblindgeye

Just one question below, otherwise looks good

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

src/patternfly/components/Breadcrumb/breadcrumb.scss

 // @debug $breadcrumb; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss

-.#{$breadcrumb} {
+:root, .#{$breadcrumb} {


Should this be just :root? EDIT: answered on Meet, this is intended

patternfly-build · 2023-12-07T19:25:29Z

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

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:41Z

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

The release is available on:

Your semantic-release bot 📦🚀

feat(breadcrumb): apply tokens

394a240

kmcfaul requested a review from srambach November 14, 2023 18:51

kmcfaul linked an issue Nov 15, 2023 that may be closed by this pull request

Consume tokens: Breadcrumb #5731

Closed

fix(?): update font-spacer token

9ce087d

kmcfaul mentioned this pull request Dec 4, 2023

Breadcrumb penta updates #6097

Closed

fix(): update to root

cb10f5a

fix(): add class selector

94bb92c

srambach approved these changes Dec 7, 2023

View reviewed changes

mcoker merged commit acacfe8 into patternfly:v6 Dec 7, 2023

thatblindgeye reviewed Dec 7, 2023

View reviewed changes

patternfly-build added the released on @alpha label Dec 7, 2023

andrew-ronaldson self-requested a review December 7, 2023 23:48

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

feat(breadcrumb): apply tokens (patternfly#6060)

757e7bd

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

feat(breadcrumb): apply tokens (#6060)

ee06828

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

feat(breadcrumb): apply tokens (patternfly#6060)

2af6e31

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

feat(breadcrumb): apply tokens (#6060)

e9e7657

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

feat(breadcrumb): apply tokens (patternfly#6060)

47e7aff

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

feat(breadcrumb): apply tokens (patternfly#6060)

d695826

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

feat(breadcrumb): apply tokens (patternfly#6060)

e3e2bb7

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

feat(breadcrumb): apply tokens (patternfly#6060)

a089b37

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

feat(breadcrumb): apply tokens (patternfly#6060)

f7c1037

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

feat(breadcrumb): apply tokens (patternfly#6060)

0e4f469

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

feat(breadcrumb): apply tokens (patternfly#6060)

6ad597d

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

feat(breadcrumb): apply tokens (patternfly#6060)

a0cfd05

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

feat(breadcrumb): apply tokens (patternfly#6060)

5b9b68a

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

feat(breadcrumb): apply tokens (patternfly#6060)

b331e7d

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

feat(breadcrumb): apply tokens (patternfly#6060)

aa6d54d

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

feat(breadcrumb): apply tokens (patternfly#6060)

b8fcc54

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

feat(breadcrumb): apply tokens (patternfly#6060)

055befc

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

feat(breadcrumb): apply tokens (patternfly#6060)

68f344f

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

feat(breadcrumb): apply tokens (patternfly#6060)

97adf2f

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

feat(breadcrumb): apply tokens (patternfly#6060)

ed841d0

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

feat(breadcrumb): apply tokens (patternfly#6060)

1417b23

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

feat(breadcrumb): apply tokens (patternfly#6060)

ca93616

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(breadcrumb): apply tokens #6060

feat(breadcrumb): apply tokens #6060

Uh oh!

kmcfaul commented Nov 14, 2023 •

edited

Loading

Uh oh!

patternfly-build commented Nov 14, 2023 •

edited

Loading

Uh oh!

kmcfaul commented Nov 15, 2023 •

edited

Loading

Uh oh!

srambach commented Nov 17, 2023

Uh oh!

kmcfaul commented Dec 4, 2023

Uh oh!

andrew-ronaldson commented Dec 5, 2023

Uh oh!

srambach left a comment

Uh oh!

thatblindgeye left a comment

Uh oh!

thatblindgeye Dec 7, 2023 •

edited

Loading

Uh oh!

patternfly-build commented Dec 7, 2023

Uh oh!

patternfly-build commented Jan 14, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

feat(breadcrumb): apply tokens #6060

feat(breadcrumb): apply tokens #6060

Uh oh!

Conversation

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

srambach commented Nov 17, 2023

Uh oh!

kmcfaul commented Dec 4, 2023

Uh oh!

andrew-ronaldson commented Dec 5, 2023

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!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

patternfly-build commented Dec 7, 2023

Uh oh!

patternfly-build commented Jan 14, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

kmcfaul commented Nov 14, 2023 •

edited

Loading

patternfly-build commented Nov 14, 2023 •

edited

Loading

kmcfaul commented Nov 15, 2023 •

edited

Loading

thatblindgeye Dec 7, 2023 •

edited

Loading