feat(Tile): deprecate by kmcfaul · Pull Request #10821 · patternfly/patternfly-react

kmcfaul · 2024-07-30T18:03:28Z

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 · 2024-07-30T18:07:41Z

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

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

kmcfaul · 2024-08-08T15:09:03Z

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

thatblindgeye

Regarding the comment above, maybe we should introduce that prop we originally were going to to visually hide the input element? Like the following screenshot:

Could we also add an example description? Maybe mentioning that a card as a tile can be setup with either single or multi selectability and, if we add a prop to hide the input, mentioning that. cc @edonehoo do you have any suggestions?

edonehoo · 2024-08-22T14:25:24Z

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 · 2024-08-27T17:17:35Z

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.

packages/react-core/src/components/Card/CardHeader.tsx

packages/react-core/src/deprecated/components/Tile/examples/Tile.md

edonehoo

A few suggestions!

Just fyi (and a note to myself), will also need to move some of the tile guidelines in the card design guidelines for more info here, so I'll handle that

packages/react-core/src/components/Card/examples/Card.md

packages/react-core/src/deprecated/components/Tile/examples/Tile.md

andrew-ronaldson

Just noticed the examples don't line up. The border is missing on the card as a tile section
Tile page

Card as tile page

kmcfaul · 2024-09-23T15:50:55Z

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

andrew-ronaldson · 2024-09-24T14:17:54Z

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

kmcfaul · 2024-09-25T13:31:17Z

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 · 2024-09-25T14:20:13Z

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

kmcfaul · 2024-09-25T14:22:56Z

@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 · 2024-09-25T14:57:45Z

@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

mcoker

Looks good to me though if possible...

I left a comment about using .pf-v6-screen-reader instead of importing the a11y utility class. Sometimes those utility class stylesheets can be really big, so the standalone class would be preferred.
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)

mcoker · 2024-09-25T14:33:21Z

packages/react-core/src/components/Card/CardHeader.tsx

 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
+import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';


We have a global class .pf-v6-screen-reader that you can use instead of importing the entire utility class stylesheet.

andrew-ronaldson

Sounds good @kmcfaul and @mcoker. I agree with adding card with icon in header support. Should I make a Core issue?

andrew-ronaldson · 2024-09-25T15:17:43Z

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 · 2024-09-25T15:19:51Z

Should I make a Core issue?

@andrew-ronaldson yes plz!

andrew-ronaldson · 2024-09-25T17:22:02Z

Latest changes look great! Thanks!

Comments have been addressed.

kmcfaul linked an issue Jul 30, 2024 that may be closed by this pull request

Tile - deprecate Tile component #8542

Closed

kmcfaul marked this pull request as draft July 31, 2024 14:01

kmcfaul mentioned this pull request Aug 5, 2024

Tile - update imports to new deprecated path patternfly/pf-codemods#731

Closed

kmcfaul marked this pull request as ready for review August 5, 2024 19:52

kmcfaul changed the title ~~feat(Tile): deprecate in docs~~ feat(Tile): deprecate Aug 19, 2024

kmcfaul mentioned this pull request Aug 19, 2024

feat(Tile): add deprecated import update mod patternfly/pf-codemods#740

Merged

thatblindgeye reviewed Aug 22, 2024

View reviewed changes

kmcfaul force-pushed the tile-dep branch from e7dcc18 to fde826b Compare August 27, 2024 17:14

thatblindgeye reviewed Aug 27, 2024

View reviewed changes

packages/react-core/src/components/Card/CardHeader.tsx Outdated Show resolved Hide resolved

tlabaj requested review from a team, andrew-ronaldson, mattnolting, mmenestr, tlabaj and wise-king-sullyman and removed request for a team and mmenestr August 28, 2024 14:38

tlabaj added css review labels Aug 28, 2024

andrew-ronaldson reviewed Aug 28, 2024

View reviewed changes

packages/react-core/src/deprecated/components/Tile/examples/Tile.md Outdated Show resolved Hide resolved

edonehoo previously requested changes Sep 11, 2024

View reviewed changes

andrew-ronaldson reviewed Sep 23, 2024

View reviewed changes

kmcfaul force-pushed the tile-dep branch from 4a8f399 to dc4b967 Compare September 23, 2024 15:50

thatblindgeye approved these changes Sep 23, 2024

View reviewed changes

tlabaj requested review from andrew-ronaldson and edonehoo September 23, 2024 19:36

kmcfaul added 6 commits September 25, 2024 10:05

feat(Tile): deprecate in docs

e3515e7

moved Tile to deprecated dir

7adc231

add isHidden, add example & desc

c9a53b8

update to screenreader css, add link

df10f13

rebase, use styles obj, fix screenreader application

c27b66e

add more spacing to icon

eb29f0f

kmcfaul force-pushed the tile-dep branch from 1090cda to eb29f0f Compare September 25, 2024 14:06

mcoker approved these changes Sep 25, 2024

View reviewed changes

andrew-ronaldson approved these changes Sep 25, 2024

View reviewed changes

revert stylesheet import, adjust flex

f303da6

mcoker approved these changes Sep 25, 2024

View reviewed changes

tlabaj approved these changes Sep 26, 2024

View reviewed changes

tlabaj merged commit 548cd34 into patternfly:main Sep 26, 2024

tlabaj mentioned this pull request Oct 24, 2024

docs(release-highlights): Adds additional updates for v6 release. patternfly/patternfly-org#4317

Merged

Comments

Conversation

kmcfaul commented Jul 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patternfly-build commented Jul 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kmcfaul commented Aug 8, 2024

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

edonehoo commented Aug 22, 2024

Uh oh!

kmcfaul commented Aug 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

edonehoo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

andrew-ronaldson left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kmcfaul commented Sep 23, 2024

Uh oh!

andrew-ronaldson commented Sep 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kmcfaul commented Sep 25, 2024

Uh oh!

andrew-ronaldson commented Sep 25, 2024

Uh oh!

kmcfaul commented Sep 25, 2024

Uh oh!

mcoker commented Sep 25, 2024

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker Sep 25, 2024

Choose a reason for hiding this comment

Uh oh!

andrew-ronaldson left a comment

Choose a reason for hiding this comment

Uh oh!

andrew-ronaldson commented Sep 25, 2024

Uh oh!

mcoker commented Sep 25, 2024

Uh oh!

andrew-ronaldson commented Sep 25, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

kmcfaul commented Jul 30, 2024 •

edited

Loading

patternfly-build commented Jul 30, 2024 •

edited

Loading

kmcfaul commented Aug 27, 2024 •

edited

Loading

andrew-ronaldson left a comment •

edited

Loading

andrew-ronaldson commented Sep 24, 2024 •

edited

Loading