feat(Card): Consume penta tokens

[tlabaj]

What: Closes #9991

Codemod issue opened: patternfly/pf-codemods#560

[patternfly-build]

Preview: https://patternfly-react-pr-10056.surge.sh

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

[tlabaj]

@edonehoo I added a new example and a secondary styling switcher to some examples. Can you please take a look.

[edonehoo]

content looks good to me!

[andrew-ronaldson]

LGTM thanks

[kmcfaul]

lgtm.

Only thing I noticed between core & react is the menu toggle is using the old dropdown toggle css on core. The border around the menu toggle appearing in this PR should be automatically resolved when the menu toggle penta updates are merged in.

[srambach]

It looks like the menu isn't escaping the confines of the expandable/expandable with icon cards - does the menu need to be attached differently?

Second thing, the disabled card in https://patternfly-react-pr-10056.surge.sh/components/card#clickable-and-selectable has the wrong text color on the title. In core that's an inline link button, and the correct text color is coming from the styling on a disabled button. Do we want to make a change in core to accommodate using an <a> there or should this change to use the button?

[srambach]

^^ questions above

[thatblindgeye]

I believe we should be able to remove this registerTitleId here and from the context (and its use within CardTitle), as well as the containsCardTitleChildRef ref. It was really only being used to get the card title ID from CardTitle to set the aria-labelledby attribute in Card.

In CardTitle we should be able to remove the useEffect on line ~25, too.

[thatblindgeye]

@srambach for that bug where the menu isn't escaping the Card container, looks like it's due to the pf-v5-c-card's overflow property that was added? Removing overflow: auto on the card prevents that bug. If we need to have that overflow auto then we could update this particular example to pass to the Dropdown, popperProps={{appendTo: () => document.body}}, but may be worth looking into further as a followup for another solution if we can keep the menu appended as close to the trigger as possible

[wise-king-sullyman]

Other than @thatblindgeye's comment above LGTM

[tlabaj]

Second thing, the disabled card in https://patternfly-react-pr-10056.surge.sh/components/card#clickable-and-selectable has the wrong text color on the title. In core that's an inline link button, and the correct text color is coming from the styling on a disabled button. Do we want to make a change in core to accommodate using an <a> there or should this change to use the button?

@srambach The consumer is responsible for adding the button to the title. They may add one one that is an <a>. We have controll of that from the react side . Is there a reason to not support <a> in a card title?

[tlabaj]

@srambach for that bug where the menu isn't escaping the Card container, looks like it's due to the pf-v5-c-card's overflow property that was added? Removing overflow: auto on the card prevents that bug. If we need to have that overflow auto then we could update this particular example to pass to the Dropdown, popperProps={{appendTo: () => document.body}}, but may be worth looking into further as a followup for another solution if we can keep the menu appended as close to the trigger as possible

@srambach can we look into this on the core side. We try and append the menu as close to the trigger as possible.

[srambach]

I created an issue to address the title link color on disabled cards
And updated the issue to find a solution for rounded corners that clip the right things and not the wrong things...

✅ CSS

[patternfly-build]

Your changes have been released in:

• @patternfly/react-code-editor@6.0.0-alpha.31
• @patternfly/react-core@6.0.0-alpha.31
• @patternfly/react-docs@7.0.0-alpha.32
• @patternfly/react-drag-drop@6.0.0-alpha.12
• @patternfly/react-integration@6.0.0-alpha.15
• demo-app-ts@5.1.1-alpha.30
• @patternfly/react-table@6.0.0-alpha.31

Thanks for your contribution! 🎉