8000 fix(components): various fixes for banner, timestamp, and content dl by andrew-ronaldson · Pull Request #6953 · patternfly/patternfly · GitHub
[go: up one dir, main page]

Skip to content

fix(components): various fixes for banner, timestamp, and content dl#6953

Merged
mcoker merged 7 commits intopatternfly:v6from
andrew-ronaldson:penta-updates
Aug 27, 2024
Merged

fix(components): various fixes for banner, timestamp, and content dl#6953
mcoker merged 7 commits intopatternfly:v6from
andrew-ronaldson:penta-updates

Conversation

@andrew-ronaldson
Copy link
Collaborator
@andrew-ronaldson andrew-ronaldson commented Aug 8, 2024

Closes #6907, #6729 and #6871

@patternfly-build
Copy link
Collaborator
patternfly-build commented Aug 8, 2024

@andrew-ronaldson andrew-ronaldson marked this pull request as ready for review August 9, 2024 17:41
@andrew-ronaldson andrew-ronaldson requested review from AdamJ, kaylachumley, mcoker and srambach and removed request for AdamJ August 9, 2024 17:42
@mcoker mcoker changed the title penta component updates fix(components): various fixes for banner, timestamp, and content dl Aug 9, 2024
Copy link
Contributor
@mcoker mcoker left a comment

Choose a reason for hiding this comment

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

Looks good! Just a wee bit of feedback, nothing is blocking though if you'd prefer merge this as-is and follow up. Just lemme know if you'd prefer do that.

grid-template: auto / auto 1fr;
grid-template: auto / 12ch 1fr;
grid-row-gap: var(--#{$content}--dl--RowGap);
grid-column-gap: var(--#{$content}--dl--ColumnGap);
Copy link
Contributor

Choose a reason for hiding this comment

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

The column gap for <dl>'s is 2xl and the row gap is md. Do we want to update that? Some thoughts:

  • In figma, the description list default column gap is sm, and row gap is lg. The compact description list column gap is sm, and row gap is md
  • Currently our description list component's column and row gaps match what's in figma
  • We have gap spacer tokens here -
    --pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--md);
    --pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs);
    --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
    --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md);
    --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm);
    --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
    --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
    --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
    • For the default <dl> we could use gap--text-to-element and gap--group-to-group--vertical? I'm not 100% those are the right tokens though.
    • There are no compact variants of gap tokens.
    • If we update to gap spacer tokens, should we also update the description list component?

@mcoker mcoker self-requested a review August 19, 2024 14:52
Copy link
Contributor
@mcoker mcoker left a comment

Choose a reason for hiding this comment

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

LGTM! Just want to confirm that we don't want to update the column/row gap for the content component <dl>? IMO it looks like there is too much space between term and description. Here's what it is currently:

Screenshot 2024-08-19 at 6 54 41 PM

And here's the horizontal description list component's column/row gap:

Screenshot 2024-08-19 at 6 54 59 PM Screenshot 2024-08-19 at 6 54 53 PM

Copy link
Contributor
@mcoker mcoker left a comment

Choose a reason for hiding this comment

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

LPTM! Backstop report if you're interested. zandrew-the-true-king-of-the-north.psd.v2-final.ammend.client-approved.pdf

Some notes about the report:

  • Skip to content diff is just spacing from the content component <dl> on that example
  • Label group diff - font (not)awesome didn't load
  • Card with the missing kebab - icon font didn't load
  • Wizard example with missing reference file - I think that's my oopsie from a previous visual regression report

Copy link
Member
@srambach srambach left a comment

Choose a reason for hiding this comment

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

✨ looks great!

@patternfly-build
Copy link
Collaborator

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

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

0