feat(Accordion): applied tokens by thatblindgeye · Pull Request #6058 · patternfly/patternfly

thatblindgeye · 2023-11-14T14:18:15Z

Work towards #5729

Need to wait to be able to pull in the v6 rebase so that I can make updates to the "toggle on the left/at the start" variant.

This required some markup change as well as moving where the pf-m-expanded class gets applied (a wrapper element rather than the toggle <button>). This at least aligns with expandable section's markup a little more, since the expanded classes is applied to a wrapper there as well instead of the <button>.

patternfly-build · 2023-11-14T14:23:22Z

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

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

thatblindgeye · 2023-11-16T14:44:28Z

src/patternfly/components/Accordion/accordion.scss

-  // This component always needs to be light
-  @include pf-v5-t-light;
+  --#{$accordion}--m-bordered--RowGap: 0;
+  --#{$accordion}__item--m-bordered--BorderBottomWidth: var(--pf-t--global--border--width--100);


There are several border width tokens that have the 1px value needed, though I'm not sure if any of them are applicable to this component. There's "divider", "control", and "button" border-width tokens. EDIT: use Divider

mcoker · 2023-11-27T20:08:41Z

src/patternfly/components/Accordion/accordion.scss

  &:hover {
    background-color: var(--#{$accordion}__toggle--hover--BackgroundColor);
-
-    .#{$accordion}__toggle-text {
-      color: var(--#{$accordion}__toggle--hover__toggle-text--Color);
-    }
  }

  &:focus {
    background-color: var(--#{$accordion}__toggle--focus--BackgroundColor);
-
-    .#{$accordion}__toggle-text {
-      font-weight: var(--#{$accordion}__toggle--focus__toggle-text--FontWeight);
-      color: var(--#{$accordion}__toggle--focus__toggle-text--Color);
-    }
  }

  &:active {
    background-color: var(--#{$accordion}__toggle--active--BackgroundColor);
-
-    .#{$accordion}__toggle-text {
-      font-weight: var(--#{$accordion}__toggle--active__toggle-text--FontWeight);
-      color: var(--#{$accordion}__toggle--active__toggle-text--Color);
-    }
  }
 }


Just a couple of nits, not necessary to fix before merging:

We don't need to style :active and can remove --#{$accordion}__toggle--active--BackgroundColor

Since we combine :hover and :focus styles, this could also be rewritten as:

.pf-v5-c-accordion__toggle:is(:hover, :focus) { --pf-v5-c-accordion__toggle--BackgroundColor: var(--pf-v5-c-accordion__toggle--hover--BackgroundColor); }

Made these updates, let me know what you think

srambach · 2023-11-28T19:17:34Z

src/patternfly/components/Accordion/accordion.scss

+  --#{$accordion}--m-display-lg__toggle--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$accordion}--m-display-lg__toggle--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --#{$accordion}--m-display-lg__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+  --#{$accordion}--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--bold);


I think this should probably be a body text font weight icon @lboehling @mcoker - once we get the semibold issue figured out?

srambach

Just a question on the font but otherwise looks great!

mcoker

Just one nit!

mcoker · 2023-11-30T19:11:00Z

src/patternfly/components/Accordion/accordion.scss

+  --#{$accordion}--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$accordion}--m-display-lg__toggle--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$accordion}--m-display-lg__toggle--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --#{$accordion}--m-display-lg__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--bold);


This should probably just be --pf-t--global--font--weight--heading

mcoker

one more nit!

mcoker · 2023-11-30T19:16:53Z

src/patternfly/components/Accordion/accordion.scss

-
-  &:hover {
+  &:is(:hover, :focus) {
    background-color: var(--#{$accordion}__toggle--hover--BackgroundColor);


Suggested change

background-color: var(--#{$accordion}__toggle--hover--BackgroundColor);

--#{$accordion}__toggle--BackgroundColor: var(--#{$accordion}__toggle--hover--BackgroundColor);

mcoker

L🍕TM!

patternfly-build · 2023-11-30T19:48:10Z

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

The release is available on:

Your semantic-release bot 📦🚀

* 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 <srambach@redhat.com> Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> Co-authored-by: Matt Nolting <matthew.nolting@gmail.com> Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> Co-authored-by: Austin Sullivan <ausulliv@redhat.com> Co-authored-by: Andrew Ronaldson <aronalds@redhat.com> Co-authored-by: kmcfaul <45077788+kmcfaul@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

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

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

The release is available on:

Your semantic-release bot 📦🚀

thatblindgeye commented Nov 16, 2023

View reviewed changes

thatblindgeye linked an issue Nov 16, 2023 that may be closed by this pull request

Consume tokens: Accordion and Expandable section #5729

Closed

thatblindgeye force-pushed the accordionPenta branch from 4117253 to dccb567 Compare November 27, 2023 15:37

thatblindgeye marked this pull request as ready for review November 27, 2023 15:46

thatblindgeye requested review from a team and mattnolting and removed request for a team November 27, 2023 15:46

mcoker approved these changes Nov 27, 2023

View reviewed changes

thatblindgeye force-pushed the accordionPenta branch from f108927 to 7b5cec7 Compare November 28, 2023 13:12

srambach reviewed Nov 28, 2023

View reviewed changes

srambach approved these changes Nov 28, 2023

View reviewed changes

mcoker reviewed Nov 30, 2023

View reviewed changes

Eric Olkowski added 8 commits November 30, 2023 14:15

feat(Accordion): applied tokens

bd02d3e

Updated examples

9d1b39e

Updated documentation

9745134

Removed extraneous vars/tokens

5b23bfd

Updated border token

f2ec0ab

Updated toggle start styling and example

329dc5c

Removed themes directory

e9e924d

Updated focus/hover styling, removed active style

f9da754

mcoker reviewed Nov 30, 2023

View reviewed changes

Updated fontweight and backgroundcolor tokens

ae23ccb

thatblindgeye force-pushed the accordionPenta branch from 7b5cec7 to ae23ccb Compare November 30, 2023 19:31

mcoker approved these changes Nov 30, 2023

View reviewed changes

mcoker merged commit f77ffd5 into patternfly:v6 Nov 30, 2023

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(Accordion): applied tokens (patternfly#6058)

ecae5c3

tlabaj mentioned this pull request Dec 4, 2023

Expandable Section: Consume Penta tokens patternfly/patternfly-react#9850

Closed

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

feat(Accordion): applied tokens (patternfly#6058)

eb37941

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

feat(Accordion): applied tokens (patternfly#6058)

16982f8

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

feat(Accordion): applied tokens (patternfly#6058)

0717781

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

feat(Accordion): applied tokens (patternfly#6058)

1bec11e

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

feat(Accordion): applied tokens (patternfly#6058)

0a84451

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

feat(Accordion): applied tokens (patternfly#6058)

b4943ca

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

feat(Accordion): applied tokens (patternfly#6058)

ed9b82b

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

feat(Accordion): applied tokens (patternfly#6058)

3575bba

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

feat(Accordion): applied tokens (patternfly#6058)

3a352a9

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

feat(Accordion): applied tokens (patternfly#6058)

d08369a

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

feat(Accordion): applied tokens (patternfly#6058)

a8c6776

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

feat(Accordion): applied tokens (patternfly#6058)

9404e2e

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

feat(Accordion): applied tokens (patternfly#6058)

32737e3

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

feat(Accordion): applied tokens (patternfly#6058)

3aba87e

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

feat(Accordion): applied tokens (patternfly#6058)

8cd13ac

thatblindgeye mentioned this pull request Jan 23, 2024

V6 rebase patternfly/patternfly-react#10033

Merged

patternfly-build mentioned this pull request Apr 16, 2025

The automated release is failing 🚨 #7464

Closed

	background-color: var(--#{$accordion}__toggle--hover--BackgroundColor);
	--#{$accordion}__toggle--BackgroundColor: var(--#{$accordion}__toggle--hover--BackgroundColor);

Conversation

thatblindgeye 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!

thatblindgeye Nov 16, 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!

mcoker Nov 27, 2023

Choose a reason for hiding this comment

Uh oh!

thatblindgeye Nov 28, 2023

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!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker Nov 30, 2023

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker Nov 30, 2023

Choose a reason for hiding this comment

Uh oh!

mcoker 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!

4 participants

thatblindgeye commented Nov 14, 2023 •

edited

Loading

patternfly-build commented Nov 14, 2023 •

edited

Loading

thatblindgeye Nov 16, 2023 •

edited

Loading