feat(Tile): deprecate

[kmcfaul]

What: Closes #8542

Moves Tile to deprecated directory. Moves Tile demos to Tile examples so they are all sorted under a deprecated tab. Adds a new Card demo meant to mock up Tile - may need some additional work/support to fully replace Tile.

[patternfly-build]

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

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

[kmcfaul]

@patternfly/design-reviewers Re: the new example in Card, is that sufficient for "Card as a tile" (since Cards kind of replace Tile, but don't look exactly the same), or do we want to revisit tile design and maybe make updates to Card?

[edonehoo]

I think an example description would be helpful. Are these only selectable as a toggle function, rather than triggering an action or an outbound link?

"Card tiles"? And maybe adding checkboxes/radios within the example to toggle between:

• single select input
• multi select input
• no input

[kmcfaul]

cc @edonehoo @thatblindgeye Updated with feedback.

Added an isHidden property to the selectableActions object, though fwiw it technically would already be possible to hide the radio/checkbox on the user end if they passed selectableActionProps: { style: { visibility: 'hidden' } } to selectableActions. isHidden is just a shorthand for setting the style manually, and we could remove it and update the examples if we'd prefer to leave it out of the props.

Added another example for multiselect tiles as well.

[kmcfaul]

Missing border should be fixed by the correct application of the screenreader class

[andrew-ronaldson]

Thanks for the updates! I noticed there isn't the usual spacing between the + icon and the card title.

[kmcfaul]

usual spacing

Might be overlooking it, but Card doesn't have a built in support for icon with text like via a prop (the Card example with an icon and text uses Brand) so I've passed it directly. I did increase the spacing by wrapping them with a Flex. How does that look? @andrew-ronaldson

[andrew-ronaldson]

The old tile examples use margin-inline-end: var(--pf-v6-c-tile__icon--MarginInlineEnd); for the spacer after the icon.

[kmcfaul]

@andrew-ronaldson @mcoker Card doesn't have an equivalent for icon spacing in the header. Could this be added post-v6 in a follow up if the Flex spacing is sufficient for now? Or should I add manual styling that uses the deprecated tile css?

[mcoker]

@andrew-ronaldson @mcoker Card doesn't have an equivalent for icon spacing in the header. Could this be added post-v6 in a follow up if the Flex spacing is sufficient for now? Or should I add manual styling that uses the deprecated tile css?

@kmcfaul (as discussed in standup) IMO we should add support for an icon in the card header, but I think that can be a follow-up since it would be non-breaking to add the enhancement then update our example. Using <Flex> lgtm for now

[andrew-ronaldson]

• For the flex layout with the icon/text, I'd bump the spacer down to 'sm', and use the gap/column-gap spacer (instead of the default spacer system, which uses margins). The core class to add would be .pf-m-gap-sm. You could also add whatever the react prop is for .pf-m-align-items-center and it will vertically align the icon and text (as long as the text doesn't wrap)

yes to Michael's comment

[mcoker]

Should I make a Core issue?

@andrew-ronaldson yes plz!

[andrew-ronaldson]

Latest changes look great! Thanks!