Update: Multi Content Card

[kaylachumley]

https://issues.redhat.com/browse/RHCLOUD-34201

Structurally/architecturally this component would be a reflection of the way it is built within the horizontal card

• !important override being used to control margin. It is set to 16px override but should be updated to 8px using: global/spacer/gap/text-to-element: 8px/spacer-200 -- this might be automatically fixed when the changes to semantic spacers are launched, not sure. Lets try to avoid overrides if possible :)

• Icon color and section heading text color need updated to be global/icon/color/brand/default and global/text/color/brand/default

• Card heading size H4 needs updated to be Heading/sm(h3)

[kaylachumley]

icon color should be --pf-t--global--icon--color--regular

[kaylachumley]

heading text color should be --pf-t--global--text--color--brand--default

[kaylachumley]

heading size should be --pf-t--global--font--size--heading--h3

[kaylachumley]

Hey @fhlavac Looks like the spacing is off on the expandable multi content card - Seems correct on the basic. When I inspected it, it appears that there is a 24px top padding applied to the class="pf-v6-c-card__header" for "Getting Started" Lets remove the 24px top padding on all headings below the expandable content heading. Not sure if it's best practice to apply margin to correct the spacing of the item or use padding to correct the spacing?? Thinking the top level heading that says expandable card toggle text needs to have a bottom padding of 16px applied and the 2nd level headings that say "getting started" and "next steps" should have no top heading or margin applied.

Also thinking that maybe we can apply some labels to show that this is an option?

Heres a screenshot of what it needs to look like for spacing :

Here is an example of a label within the multi content card:

[fhlavac]

@kaylachumley I opened a PR adding these changes, just not sure about the heading sizes - expand toggle vs the card titles (Getting started, Next steps - should probably be smaller) https://react-component-groups-pr-component-groups-245.surge.sh/extensions/component-groups/multi-content-card#expandable-multi-content-card-with-actions-and-labels
Thank you

[kaylachumley]

Hey! @fhlavac I added a screenshot to show context for what the text sizing should visually look like. Let's make all the main heading that says "Card actions with toggle text" to be --pf-t--global--font--size--heading--h3 and then lets make all second level headings "Getting started"and "next steps" etc. to be --pf-t--global--font--size--heading--h4

But note that there is not always a scenario to have an H4 across all use cases. I imagine there being use cases where there is only a label.

[github-actions]

🎉 This issue has been resolved in version 6.0.0-alpha.7 🎉

The release is available on:

• GitHub release
• npm package (@alpha dist-tag)

Your semantic-release bot 📦🚀