fix(card/menu-toggle/check): alignment bugs by mcoker · Pull Request #6110 · patternfly/patternfly

mcoker · 2023-12-06T03:54:35Z

Fixes everything except https://core-staging.patternfly.org/components/card/#clickable-and-selectable

Looking at that, here are some issues aside from the misalignment:

The presence of the checkbox is changing the layout/spacing compared with a card without it (delete the checkbox and watch the layout change)
The checkbox is using the standalone variation, but the label element is present - the standalone variant should only have the checkbox input as a child.

In those examples, probably the simplest way to fix that is to remove .pf-m-standalone? That isn't ideal, but it addresses the issues mentioned above.

Longer term, I wonder if those checkboxes (in all of the selectable/clickable card variants) can be updated to the standalone variant with the <label> wrapping the input, which you can see in the standalone example in core.

wdyt @srambach? You're probably most familiar with the clickable/selectable cards.

patternfly-build · 2023-12-06T03:58:05Z

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

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

srambach · 2023-12-06T18:59:58Z

I'd say yes to both of those - removing pf-m-standalone is a good short term fix and then rearranging the label is probably a good idea.

mcoker · 2023-12-07T02:24:42Z

@srambach updated and added a custom style to remove the small grid gap that shows up. 3a517dc

In the card's checkbox/radio hbs, I added --IsStandalone, --text, then just copied/pasted the existing --modifier and --attribute stuff that was already there.

Created an issue to clean this up #6119

srambach · 2023-12-07T15:17:37Z

src/patternfly/components/Card/card--check.hbs

-  {{/if}}
-{{/check}}
+{{> check
+    check--IsStandalone=(inverse card--IsSelectable)


patternfly-build · 2023-12-07T15:44:39Z

🎉 This PR is included in version 5.2.0-prerelease.7 🎉

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

* 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 · 2023-12-13T18:12:15Z

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

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-02-28T22:40:03Z

🎉 This PR is included in version 5.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

patternfly-build · 2024-05-01T14:56:43Z

🎉 This PR is included in version 5.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

fix(card/menu-toggle/check): alignment bugs

e0a0685

mcoker requested review from srambach and thatblindgeye December 6, 2023 03:54

chore(card): updates

3a517dc

mcoker mentioned this pull request Dec 7, 2023

Bug - Selectable/clickable cards - clean up use of radio/check components #6119

Closed

mcoker closed this Dec 7, 2023

mcoker reopened this Dec 7, 2023

srambach approved these changes Dec 7, 2023

View reviewed changes

src/patternfly/components/Card/card--check.hbs

{{/if}}

{{/check}}

{{> check

check--IsStandalone=(inverse card--IsSelectable)

Copy link

Member

srambach Dec 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

mcoker merged commit 87d4503 into patternfly:main Dec 7, 2023

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

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

fix(card/menu-toggle/check): alignment bugs (#6110)

862e7ec

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

fix(card/menu-toggle/check): alignment bugs (#6110)

02c52c4

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

fix(card/menu-toggle/check): alignment bugs (patternfly#6110)

ab8e7b5

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

fix(card/menu-toggle/check): alignment bugs (#6110)

f03ce9b

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

fix(card/menu-toggle/check): alignment bugs (#6110)

277c5dc

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

fix(card/menu-toggle/check): alignment bugs (patternfly#6110)

9835c8d

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

fix(card/menu-toggle/check): alignment bugs (patternfly#6110)

26e5a6c

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

patternfly-build added the released on @prerelease-bugfix label Feb 28, 2024

mcoker deleted the issue-6007 branch January 7, 2025 16:47

renovate bot mentioned this pull request Mar 6, 2025

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

Closed

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

fix(card/menu-toggle/check): alignment bugs#6110

fix(card/menu-toggle/check): alignment bugs#6110
mcoker merged 2 commits intopatternfly:mainfrom
mcoker:issue-6007

mcoker commented Dec 6, 2023

Uh oh!

patternfly-build commented Dec 6, 2023 •

edited

Loading

Uh oh!

srambach commented Dec 6, 2023

Uh oh!

mcoker commented Dec 7, 2023 •

edited

Loading

Uh oh!

srambach Dec 7, 2023

Uh oh!

patternfly-build commented Dec 7, 2023

Uh oh!

patternfly-build commented Dec 13, 2023

Uh oh!

patternfly-build commented Feb 28, 2024

Uh oh!

patternfly-build commented May 1, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

mcoker commented Dec 6, 2023

Uh oh!

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

Uh oh!

Uh oh!

srambach commented Dec 6, 2023

Uh oh!

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

Uh oh!

Uh oh!

srambach Dec 7, 2023

Choose a reason for hiding this comment

Uh oh!

patternfly-build commented Dec 7, 2023

Uh oh!

patternfly-build commented Dec 13, 2023

Uh oh!

patternfly-build commented Feb 28, 2024

Uh oh!

patternfly-build commented May 1, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

patternfly-build commented Dec 6, 2023 •

edited

Loading

mcoker commented Dec 7, 2023 •

edited

Loading