feat(ExpandableSection): added tokens #6063

thatblindgeye · 2023-11-15T16:32:35Z

Work towards #5729

Expandable section preview

Still need to go through examples/documentation and make any necessary updates.

Some comments/clarification needed:

For the toggle text, Figma uses a global--color--brand--default token, which I've applied in this PR. Previously we were using a --#{$pf-global}--link--Color, so just curious if we should be using the brand token or the --pf-t--global--text--color--link--default token. EDIT: per design we should use the brand token here
For the disclosure variant, the background on hover changes. Is the intent that it also changes when expanded, or should the background only change on hover when not expanded? If the former, then would need input whether the border radius should remain as currently this is what it looks like on hover + expanded (image is showing the focus state which is similar to hover, hover just doesn't have the black outline): EDIT: Per design, trying out applying the border radius only to top left and top right of the toggle for the disclosure variant when expanded
In the designs the detached variant looks like it's meant to be encompassed by a single expandable section wrapper (based on the disclosure + detached design), however the current implementation has the toggle and content in their own wrappers, inside of stack layouts. Should this still be the case, or are we wanting to/should we move towards more of a "toggle position: top or bottom" setup? cc @mcoker since it looks like you originally added the detached example. EDIT: not supporting a detached + disclosure variant
Does the pf-m-display-lg class/verbiage still make sense or should that be updated to pf-m-disclosure or some other class?

patternfly-build · 2023-11-15T16:36:04Z

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

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

srambach

LGTM

mcoker

LGTM! 🐸

patternfly-build · 2023-11-27T20:27:27Z

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

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:40:14Z

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

The release is available on:

Your semantic-release bot 📦🚀

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

Consume tokens: Accordion and Expandable section #5729

Closed

Eric Olkowski added 4 commits November 16, 2023 14:27

feat(ExpandableSection): added tokens

1683ee1

Reordered examples and added disclosure indented example

bf0a74c

Updated toggle icon color token

f34fa45

Updated disclosure border radius for expanded state

1392caf

thatblindgeye force-pushed the expandableSectionPenta branch from f6afe82 to 1392caf Compare November 16, 2023 19:32

thatblindgeye marked this pull request as ready for review November 16, 2023 19:46

thatblindgeye requested review from a team, lboehling and mcoker and removed request for a team November 16, 2023 19:46

srambach approved these changes Nov 21, 2023

View reviewed changes

mcoker approved these changes Nov 27, 2023

View reviewed changes

mcoker merged commit 6031257 into patternfly:v6 Nov 27, 2023

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

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

feat(ExpandableSection): added tokens (patternfly#6063)

19b410c

tlabaj mentioned this pull request Dec 4, 2023

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

Closed

wise-king-sullyman mentioned this pull request Dec 4, 2023

Consume tokens: Accordion and Expandable section #5729

Closed

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

feat(ExpandableSection): added tokens (#6063)

777b8a9

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

feat(ExpandableSection): added tokens (patternfly#6063)

05ab62d

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

feat(ExpandableSection): added tokens (#6063)

cc87f09

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

feat(ExpandableSection): added tokens (patternfly#6063)

7f7a0ab

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

feat(ExpandableSection): added tokens (patternfly#6063)

14f4e4a

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

feat(ExpandableSection): added tokens (patternfly#6063)

0c1422f

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

feat(ExpandableSection): added tokens (patternfly#6063)

3ba87f0

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

feat(ExpandableSection): added tokens (patternfly#6063)

0056c99

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

feat(ExpandableSection): added tokens (patternfly#6063)

9bac6ae

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

feat(ExpandableSection): added tokens (patternfly#6063)

3f95e62

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

feat(ExpandableSection): added tokens (patternfly#6063)

f837915

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

feat(ExpandableSection): added tokens (patternfly#6063)

4f12e15

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

feat(ExpandableSection): added tokens (patternfly#6063)

23f8e04

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

feat(ExpandableSection): added tokens (patternfly#6063)

143b49d

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

feat(ExpandableSection): added tokens (patternfly#6063)

f81a476

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

feat(ExpandableSection): added tokens (patternfly#6063)

d10dc51

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

feat(ExpandableSection): added tokens (patternfly#6063)

37a821f

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

feat(ExpandableSection): added tokens (patternfly#6063)

d6a1580

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

feat(ExpandableSection): added tokens (patternfly#6063)

47853c9

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

feat(ExpandableSection): added tokens (patternfly#6063)

190dbce

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

feat(ExpandableSection): added tokens (patternfly#6063)

fc1f5b0

renovate bot mentioned this pull request Mar 20, 2025

Update patternfly (major) patternfly-extension-testing/tackle2-ui#26

Open

1 task

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(ExpandableSection): added tokens #6063

feat(ExpandableSection): added tokens #6063

Uh oh!

thatblindgeye commented Nov 15, 2023 •

edited

Loading

Uh oh!

patternfly-build commented Nov 15, 2023 •

edited

Loading

Uh oh!

srambach left a comment

Uh oh!

mcoker left a comment

Uh oh!

patternfly-build commented Nov 27, 2023

Uh oh!

patternfly-build commented Jan 14, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat(ExpandableSection): added tokens #6063

feat(ExpandableSection): added tokens #6063

Uh oh!

Conversation

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

Uh oh!

Uh oh!

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

Uh oh!

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!

patternfly-build commented Nov 27, 2023

Uh oh!

patternfly-build commented Jan 14, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

thatblindgeye commented Nov 15, 2023 •

edited

Loading

patternfly-build commented Nov 15, 2023 •

edited

Loading