From e3515e77945acbc9355816a97e3bc29e0683e80b Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 30 Jul 2024 14:02:54 -0400 Subject: [PATCH 1/7] feat(Tile): deprecate in docs --- .../src/components/Tile/examples/Tile.md | 31 ++++++++++++++++--- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/packages/react-core/src/components/Tile/examples/Tile.md b/packages/react-core/src/components/Tile/examples/Tile.md index d5b77885080..8157fc1fd37 100644 --- a/packages/react-core/src/components/Tile/examples/Tile.md +++ b/packages/react-core/src/components/Tile/examples/Tile.md @@ -3,46 +3,67 @@ id: Tile section: components cssPrefix: pf-v6-c-tile propComponents: ['Tile'] +deprecated: true --- import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import './Tile.css'; +Note: Tile has been deprecated, please use the [Card](/components/card) component. + ## Examples Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos). ### Basic tile + Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties `isSelected` and `isDisabled`. + ```ts file="./TileBasic.tsx" + ``` -### With subtext -Tile subtext can provide users with additional context. To add subtext, pass a short description to the `` component. +### With subtext + +Tile subtext can provide users with additional context. To add subtext, pass a short description to the `` component. + ```ts file="./TileWithSubtext.tsx" + ``` ### With icon + Icons can provide a visual cue that helps users understand what the tile is being used for. To add an icon, use the `icon` property. + ```ts file="./TileWithIcon.tsx" + ``` ### With stacked icon + You can further customize a tile’s appearance by placing an icon above the title. To stack your icon on top of a tile’s title, use the `isStacked` property. + ```ts file="./TileStacked.tsx" + ``` ### With large icons -You can make your icons larger to help catch a user’s attention. To increase the size of an icon, use the `isDisplayLarge` property. -Be aware that `isDisplayLarge` can only be used when `isStacked` is also applied. +You can make your icons larger to help catch a user’s attention. To increase the size of an icon, use the `isDisplayLarge` property. + +Be aware that `isDisplayLarge` can only be used when `isStacked` is also applied. + ```ts file="./TileStackedWithLargeIcons.tsx" + ``` ### With long subtext -To provide users with a large amount of context, subtext can be elongated to wrap around to the next line. To format a long subtext, you can pass the component `Flex` into ``. + +To provide users with a large amount of context, subtext can be elongated to wrap around to the next line. To format a long subtext, you can pass the component `Flex` into ``. You can also change the type of `Flex` you can use so that the line breaks in the subtext fits your needs. You can do this by changing the default flex. The standard is `default: “flex_1”`, and changing the number in the default will also change where the sentence breaks. + ```ts file="./TileWithExtraContent.tsx" + ``` From 7adc231926d9ac0a4f41c2bda5b0e239de0ad5f3 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 5 Aug 2024 15:37:31 -0400 Subject: [PATCH 2/7] moved Tile to deprecated dir --- .../src/components/Card/examples/Card.md | 7 ++ .../src/components/Card/examples/CardTile.tsx | 64 +++++++++++++++++ packages/react-core/src/components/index.ts | 1 - .../{ => deprecated}/components/Tile/Tile.tsx | 0 .../components/Tile/__tests__/Tile.test.tsx | 0 .../__snapshots__/Tile.test.tsx.snap | 0 .../components/Tile/examples/Tile.css | 0 .../components/Tile/examples/Tile.md} | 69 ++++++++++++++++++- .../components/Tile/examples/TileBasic.tsx | 2 +- .../components/Tile/examples/TileStacked.tsx | 2 +- .../examples/TileStackedWithLargeIcons.tsx | 2 +- .../Tile/examples/TileWithExtraContent.tsx | 3 +- .../components/Tile/examples/TileWithIcon.tsx | 2 +- .../Tile/examples/TileWithSubtext.tsx | 2 +- .../{ => deprecated}/components/Tile/index.ts | 0 .../src/deprecated/components/index.ts | 1 + 16 files changed, 146 insertions(+), 9 deletions(-) create mode 100644 packages/react-core/src/components/Card/examples/CardTile.tsx rename packages/react-core/src/{ => deprecated}/components/Tile/Tile.tsx (100%) rename packages/react-core/src/{ => deprecated}/components/Tile/__tests__/Tile.test.tsx (100%) rename packages/react-core/src/{ => deprecated}/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap (100%) rename packages/react-core/src/{ => deprecated}/components/Tile/examples/Tile.css (100%) rename packages/react-core/src/{demos/TileDemo.md => deprecated/components/Tile/examples/Tile.md} (55%) rename packages/react-core/src/{ => deprecated}/components/Tile/examples/TileBasic.tsx (83%) rename packages/react-core/src/{ => deprecated}/components/Tile/examples/TileStacked.tsx (90%) rename packages/react-core/src/{ => deprecated}/components/Tile/examples/TileStackedWithLargeIcons.tsx (91%) rename packages/react-core/src/{ => deprecated}/components/Tile/examples/TileWithExtraContent.tsx (91%) rename packages/react-core/src/{ => deprecated}/components/Tile/examples/TileWithIcon.tsx (90%) rename packages/react-core/src/{ => deprecated}/components/Tile/examples/TileWithSubtext.tsx (87%) rename packages/react-core/src/{ => deprecated}/components/Tile/index.ts (100%) diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md index b819eecc855..9c4f613b931 100644 --- a/packages/react-core/src/components/Card/examples/Card.md +++ b/packages/react-core/src/components/Card/examples/Card.md @@ -19,6 +19,7 @@ ouia: true import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg'; import pfLogoSmall from '../../assets/PF-IconLogo.svg'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; ## Examples @@ -178,3 +179,9 @@ Dividers can be placed between sections of the card. ```ts file='./CardWithDividers.tsx' ``` + +### Cards as tiles + +```ts file='./CardTile.tsx' + +``` diff --git a/packages/react-core/src/components/Card/examples/CardTile.tsx b/packages/react-core/src/components/Card/examples/CardTile.tsx new file mode 100644 index 00000000000..9417e73c87b --- /dev/null +++ b/packages/react-core/src/components/Card/examples/CardTile.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { Card, CardHeader, CardBody, Gallery } from '@patternfly/react-core'; +import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; + +export const CardTile: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(''); + const id1 = 'tile-1'; + const id2 = 'tile-2'; + const id3 = 'tile-3'; + + const onChange = (event: React.FormEvent) => { + setIsChecked(event.currentTarget.id); + }; + + return ( + + + + + Tile header + + Tile content and description + + + + + Tile header + + Tile content and description + + + + + Tile header + + Tile content and description + + + ); +}; diff --git a/packages/react-core/src/components/index.ts b/packages/react-core/src/components/index.ts index 681a6834e64..5c9f602ca73 100644 --- a/packages/react-core/src/components/index.ts +++ b/packages/react-core/src/components/index.ts @@ -65,7 +65,6 @@ export * from './Switch'; export * from './Tabs'; export * from './TextArea'; export * from './TextInput'; -export * from './Tile'; export * from './TimePicker'; export * from './Timestamp'; export * from './Title'; diff --git a/packages/react-core/src/components/Tile/Tile.tsx b/packages/react-core/src/deprecated/components/Tile/Tile.tsx similarity index 100% rename from packages/react-core/src/components/Tile/Tile.tsx rename to packages/react-core/src/deprecated/components/Tile/Tile.tsx diff --git a/packages/react-core/src/components/Tile/__tests__/Tile.test.tsx b/packages/react-core/src/deprecated/components/Tile/__tests__/Tile.test.tsx similarity index 100% rename from packages/react-core/src/components/Tile/__tests__/Tile.test.tsx rename to packages/react-core/src/deprecated/components/Tile/__tests__/Tile.test.tsx diff --git a/packages/react-core/src/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap b/packages/react-core/src/deprecated/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap similarity index 100% rename from packages/react-core/src/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap rename to packages/react-core/src/deprecated/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap diff --git a/packages/react-core/src/components/Tile/examples/Tile.css b/packages/react-core/src/deprecated/components/Tile/examples/Tile.css similarity index 100% rename from packages/react-core/src/components/Tile/examples/Tile.css rename to packages/react-core/src/deprecated/components/Tile/examples/Tile.css diff --git a/packages/react-core/src/demos/TileDemo.md b/packages/react-core/src/deprecated/components/Tile/examples/Tile.md similarity index 55% rename from packages/react-core/src/demos/TileDemo.md rename to packages/react-core/src/deprecated/components/Tile/examples/Tile.md index e65369c1383..b4235d6e0e2 100644 --- a/packages/react-core/src/demos/TileDemo.md +++ b/packages/react-core/src/deprecated/components/Tile/examples/Tile.md @@ -1,15 +1,80 @@ --- id: Tile section: components +cssPrefix: pf-v5-c-tile +propComponents: ['Tile'] +deprecated: true --- +import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import './Tile.css'; + +Note: Tile has been deprecated, please use the [Card](/components/card) component. + +## Examples + +Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos). + +### Basic tile + +Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties `isSelected` and `isDisabled`. + +```ts file="./TileBasic.tsx" + +``` + +### With subtext + +Tile subtext can provide users with additional context. To add subtext, pass a short description to the `` component. + +```ts file="./TileWithSubtext.tsx" + +``` + +### With icon + +Icons can provide a visual cue that helps users understand what the tile is being used for. To add an icon, use the `icon` property. + +```ts file="./TileWithIcon.tsx" + +``` + +### With stacked icon + +You can further customize a tile’s appearance by placing an icon above the title. To stack your icon on top of a tile’s title, use the `isStacked` property. + +```ts file="./TileStacked.tsx" + +``` + +### With large icons + +You can make your icons larger to help catch a user’s attention. To increase the size of an icon, use the `isDisplayLarge` property. + +Be aware that `isDisplayLarge` can only be used when `isStacked` is also applied. + +```ts file="./TileStackedWithLargeIcons.tsx" + +``` + +### With long subtext + +To provide users with a large amount of context, subtext can be elongated to wrap around to the next line. To format a long subtext, you can pass the component `Flex` into ``. + +You can also change the type of `Flex` you can use so that the line breaks in the subtext fits your needs. You can do this by changing the default flex. The standard is `default: “flex_1”`, and changing the number in the default will also change where the sentence breaks. + +```ts file="./TileWithExtraContent.tsx" + +``` + ## Demos ### Tiles with single selection ```ts import React from 'react'; -import { Tile } from '@patternfly/react-core'; +import { Tile } from '@patternfly/react-core/deprecated'; const TileSingleSelect: React.FunctionComponent = () => { const [selectedId, setSelectedId] = React.useState(''); @@ -40,7 +105,7 @@ const TileSingleSelect: React.FunctionComponent = () => { ```ts import React from 'react'; -import { Tile } from '@patternfly/react-core'; +import { Tile } from '@patternfly/react-core/deprecated'; const TileMultiSelect: React.FunctionComponent = () => { const [selectedIds, setSelectedIds] = React.useState([]); diff --git a/packages/react-core/src/components/Tile/examples/TileBasic.tsx b/packages/react-core/src/deprecated/components/Tile/examples/TileBasic.tsx similarity index 83% rename from packages/react-core/src/components/Tile/examples/TileBasic.tsx rename to packages/react-core/src/deprecated/components/Tile/examples/TileBasic.tsx index 40549eb85e0..72a0bc535eb 100644 --- a/packages/react-core/src/components/Tile/examples/TileBasic.tsx +++ b/packages/react-core/src/deprecated/components/Tile/examples/TileBasic.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Tile } from '@patternfly/react-core'; +import { Tile } from '@patternfly/react-core/deprecated'; export const TileBasic: React.FunctionComponent = () => (
diff --git a/packages/react-core/src/components/Tile/examples/TileStacked.tsx b/packages/react-core/src/deprecated/components/Tile/examples/TileStacked.tsx similarity index 90% rename from packages/react-core/src/components/Tile/examples/TileStacked.tsx rename to packages/react-core/src/deprecated/components/Tile/examples/TileStacked.tsx index 82728f9cda8..f3ede9249a8 100644 --- a/packages/react-core/src/components/Tile/examples/TileStacked.tsx +++ b/packages/react-core/src/deprecated/components/Tile/examples/TileStacked.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Tile } from '@patternfly/react-core'; +import { Tile } from '@patternfly/react-core/deprecated'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; export const TileStacked: React.FunctionComponent = () => ( diff --git a/packages/react-core/src/components/Tile/examples/TileStackedWithLargeIcons.tsx b/packages/react-core/src/deprecated/components/Tile/examples/TileStackedWithLargeIcons.tsx similarity index 91% rename from packages/react-core/src/components/Tile/examples/TileStackedWithLargeIcons.tsx rename to packages/react-core/src/deprecated/components/Tile/examples/TileStackedWithLargeIcons.tsx index ccaf2ce1c56..bf498a81ce5 100644 --- a/packages/react-core/src/components/Tile/examples/TileStackedWithLargeIcons.tsx +++ b/packages/react-core/src/deprecated/components/Tile/examples/TileStackedWithLargeIcons.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Tile } from '@patternfly/react-core'; +import { Tile } from '@patternfly/react-core/deprecated'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; export const TileStackedWithLargeIcons: React.FunctionComponent = () => ( diff --git a/packages/react-core/src/components/Tile/examples/TileWithExtraContent.tsx b/packages/react-core/src/deprecated/components/Tile/examples/TileWithExtraContent.tsx similarity index 91% rename from packages/react-core/src/components/Tile/examples/TileWithExtraContent.tsx rename to packages/react-core/src/deprecated/components/Tile/examples/TileWithExtraContent.tsx index b71e4094ac6..5a7982a3553 100644 --- a/packages/react-core/src/components/Tile/examples/TileWithExtraContent.tsx +++ b/packages/react-core/src/deprecated/components/Tile/examples/TileWithExtraContent.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Tile, Flex } from '@patternfly/react-core'; +import { Flex } from '@patternfly/react-core'; +import { Tile } from '@patternfly/react-core/deprecated'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; export const TileWithExtraContent: React.FunctionComponent = () => ( diff --git a/packages/react-core/src/components/Tile/examples/TileWithIcon.tsx b/packages/react-core/src/deprecated/components/Tile/examples/TileWithIcon.tsx similarity index 90% rename from packages/react-core/src/components/Tile/examples/TileWithIcon.tsx rename to packages/react-core/src/deprecated/components/Tile/examples/TileWithIcon.tsx index 8d6110b0ab1..2c320ff2a23 100644 --- a/packages/react-core/src/components/Tile/examples/TileWithIcon.tsx +++ b/packages/react-core/src/deprecated/components/Tile/examples/TileWithIcon.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Tile } from '@patternfly/react-core'; +import { Tile } from '@patternfly/react-core/deprecated'; import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; export const TileWithIcon: React.FunctionComponent = () => ( diff --git a/packages/react-core/src/components/Tile/examples/TileWithSubtext.tsx b/packages/react-core/src/deprecated/components/Tile/examples/TileWithSubtext.tsx similarity index 87% rename from packages/react-core/src/components/Tile/examples/TileWithSubtext.tsx rename to packages/react-core/src/deprecated/components/Tile/examples/TileWithSubtext.tsx index 73e39747999..c04d2f2a2b0 100644 --- a/packages/react-core/src/components/Tile/examples/TileWithSubtext.tsx +++ b/packages/react-core/src/deprecated/components/Tile/examples/TileWithSubtext.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Tile } from '@patternfly/react-core'; +import { Tile } from '@patternfly/react-core/deprecated'; export const TileWithSubtext: React.FunctionComponent = () => (
diff --git a/packages/react-core/src/components/Tile/index.ts b/packages/react-core/src/deprecated/components/Tile/index.ts similarity index 100% rename from packages/react-core/src/components/Tile/index.ts rename to packages/react-core/src/deprecated/components/Tile/index.ts diff --git a/packages/react-core/src/deprecated/components/index.ts b/packages/react-core/src/deprecated/components/index.ts index 9d36fef85c2..39cc31d69fb 100644 --- a/packages/react-core/src/deprecated/components/index.ts +++ b/packages/react-core/src/deprecated/components/index.ts @@ -2,4 +2,5 @@ export * from './Chip'; export * from './DragDrop'; export * from './Modal'; export * from './DualListSelector'; +export * from './Tile'; export * from './Wizard'; From c9a53b8583cd77fa46810e302975af5d754dd41c Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 27 Aug 2024 13:13:04 -0400 Subject: [PATCH 3/7] add isHidden, add example & desc --- .../src/components/Card/CardHeader.tsx | 14 +++- .../src/components/Card/examples/Card.md | 12 ++- .../src/components/Card/examples/CardTile.tsx | 11 ++- .../Card/examples/CardTileMulti.tsx | 78 +++++++++++++++++++ 4 files changed, 108 insertions(+), 7 deletions(-) create mode 100644 packages/react-core/src/components/Card/examples/CardTileMulti.tsx diff --git a/packages/react-core/src/components/Card/CardHeader.tsx b/packages/react-core/src/components/Card/CardHeader.tsx index 1ee98dbee92..1d60227b579 100644 --- a/packages/react-core/src/components/Card/CardHeader.tsx +++ b/packages/react-core/src/components/Card/CardHeader.tsx @@ -54,6 +54,8 @@ export interface CardHeaderSelectableActionsObject { * the isSelected prop on the card component instead. */ isChecked?: boolean; + /** Flag indicating the action is hidden */ + isHidden?: boolean; } export interface CardHeaderProps extends React.HTMLProps { @@ -142,7 +144,11 @@ export const CardHeader: React.FunctionComponent = ({ isDisabled: isCardDisabled, onChange: selectableActions.onChange, isChecked: selectableActions.isChecked ?? isSelected, - ...selectableActions.selectableActionProps + ...selectableActions.selectableActionProps, + style: { + ...selectableActions.selectableActionProps?.style, + ...(selectableActions?.isHidden && { visibility: 'hidden' }) + } }); const isClickableLinkCard = selectableActions?.to !== undefined; @@ -154,7 +160,11 @@ export const CardHeader: React.FunctionComponent = ({ id: selectableActions.selectableActionId, 'aria-label': selectableActions.selectableActionAriaLabel, 'aria-labelledby': selectableActions.selectableActionAriaLabelledby, - ...selectableActions.selectableActionProps + ...selectableActions.selectableActionProps, + style: { + ...selectableActions.selectableActionProps?.style, + ...(selectableActions?.isHidden && { visibility: 'hidden' }) + } }; if (isClickableLinkCard) { diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md index 9c4f613b931..0612cfd633f 100644 --- a/packages/react-core/src/components/Card/examples/Card.md +++ b/packages/react-core/src/components/Card/examples/Card.md @@ -180,8 +180,18 @@ Dividers can be placed between sections of the card. ``` -### Cards as tiles +## Cards as tiles + +Sets of selectable cards may also be used as tiles, and may be made either single selectable or multiselectable by passing the `variant` property to the `selectableActions` object. You may toggle the visibility of the radio or checkbox by additionally passing the `isHidden` property to the `selectableActions` object. + +### Single selectable tiles ```ts file='./CardTile.tsx' ``` + +### Multi selectable tiles + +```ts file='./CardTileMulti.tsx' + +``` diff --git a/packages/react-core/src/components/Card/examples/CardTile.tsx b/packages/react-core/src/components/Card/examples/CardTile.tsx index 9417e73c87b..9561464bc90 100644 --- a/packages/react-core/src/components/Card/examples/CardTile.tsx +++ b/packages/react-core/src/components/Card/examples/CardTile.tsx @@ -21,7 +21,8 @@ export const CardTile: React.FunctionComponent = () => { selectableActionAriaLabelledby: 'tile-example-1', name: id1, variant: 'single', - onChange + onChange, + isHidden: true }} > @@ -36,7 +37,8 @@ export const CardTile: React.FunctionComponent = () => { selectableActionAriaLabelledby: 'tile-example-2', name: id2, variant: 'single', - onChange + onChange, + isHidden: true }} > @@ -51,11 +53,12 @@ export const CardTile: React.FunctionComponent = () => { selectableActionAriaLabelledby: 'tile-example-3', name: id3, variant: 'single', - onChange + onChange, + isHidden: true }} > - Tile header + Tile header (disabled) Tile content and description diff --git a/packages/react-core/src/components/Card/examples/CardTileMulti.tsx b/packages/react-core/src/components/Card/examples/CardTileMulti.tsx new file mode 100644 index 00000000000..b78f9f3640e --- /dev/null +++ b/packages/react-core/src/components/Card/examples/CardTileMulti.tsx @@ -0,0 +1,78 @@ +import React from 'react'; +import { Card, CardHeader, CardBody, Gallery } from '@patternfly/react-core'; +import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; + +export const CardTileMulti: React.FunctionComponent = () => { + const [isChecked1, setIsChecked1] = React.useState(false); + const [isChecked2, setIsChecked2] = React.useState(false); + const [isChecked3, setIsChecked3] = React.useState(false); + const id1 = 'multi-tile-1'; + const id2 = 'multi-tile-2'; + const id3 = 'multi-tile-3'; + + const onChange = (event: React.FormEvent, checked: boolean) => { + const name = event.currentTarget.name; + + switch (name) { + case id1: + setIsChecked1(checked); + break; + case id2: + setIsChecked2(checked); + break; + case id3: + setIsChecked3(checked); + break; + } + }; + + return ( + + + + + Tile header + + Tile content and description + + + + + Tile header + + Tile content and description + + + + + Tile header (disabled) + + Tile content and description + + + ); +}; From df10f13802b5d628d18e976cc0e1449a9822fb4e Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 4 Sep 2024 11:17:16 -0400 Subject: [PATCH 4/7] update to screenreader css, add link --- .../src/components/Card/CardHeader.tsx | 20 ++++++++----------- .../components/Tile/examples/Tile.md | 2 +- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/react-core/src/components/Card/CardHeader.tsx b/packages/react-core/src/components/Card/CardHeader.tsx index 1d60227b579..c6df10efd0e 100644 --- a/packages/react-core/src/components/Card/CardHeader.tsx +++ b/packages/react-core/src/components/Card/CardHeader.tsx @@ -135,7 +135,7 @@ export const CardHeader: React.FunctionComponent = ({ const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox; const getSelectableProps = () => ({ - className: 'pf-m-standalone', + className: css('pf-m-standalone', selectableActions?.isHidden && 'pf-v6-screen-reader'), label: <>, 'aria-label': selectableActions.selectableActionAriaLabel, 'aria-labelledby': selectableActions.selectableActionAriaLabelledby, @@ -144,11 +144,7 @@ export const CardHeader: React.FunctionComponent = ({ isDisabled: isCardDisabled, onChange: selectableActions.onChange, isChecked: selectableActions.isChecked ?? isSelected, - ...selectableActions.selectableActionProps, - style: { - ...selectableActions.selectableActionProps?.style, - ...(selectableActions?.isHidden && { visibility: 'hidden' }) - } + ...selectableActions.selectableActionProps }); const isClickableLinkCard = selectableActions?.to !== undefined; @@ -156,15 +152,15 @@ export const CardHeader: React.FunctionComponent = ({ const getClickableProps = () => { const isDisabledLinkCard = isCardDisabled && isClickableLinkCard; const baseProps = { - className: css('pf-v6-c-card__clickable-action', isDisabledLinkCard && styles.modifiers.disabled), + className: css( + 'pf-v6-c-card__clickable-action', + isDisabledLinkCard && styles.modifiers.disabled, + selectableActions?.isHidden && 'pf-v6-screen-reader' + ), id: selectableActions.selectableActionId, 'aria-label': selectableActions.selectableActionAriaLabel, 'aria-labelledby': selectableActions.selectableActionAriaLabelledby, - ...selectableActions.selectableActionProps, - style: { - ...selectableActions.selectableActionProps?.style, - ...(selectableActions?.isHidden && { visibility: 'hidden' }) - } + ...selectableActions.selectableActionProps }; if (isClickableLinkCard) { diff --git a/packages/react-core/src/deprecated/components/Tile/examples/Tile.md b/packages/react-core/src/deprecated/components/Tile/examples/Tile.md index b4235d6e0e2..ce3de47c2ee 100644 --- a/packages/react-core/src/deprecated/components/Tile/examples/Tile.md +++ b/packages/react-core/src/deprecated/components/Tile/examples/Tile.md @@ -10,7 +10,7 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import './Tile.css'; -Note: Tile has been deprecated, please use the [Card](/components/card) component. +Note: Tile has been deprecated, please use the [Card](/components/card#cards-as-tiles) component. ## Examples From c27b66e630065f0729f25cc714a697e728b7e76f Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 23 Sep 2024 11:49:14 -0400 Subject: [PATCH 5/7] rebase, use styles obj, fix screenreader application --- .../src/components/Card/CardHeader.tsx | 6 +- .../src/components/Card/examples/Card.md | 8 ++- .../src/components/Tile/examples/Tile.md | 69 ------------------- .../components/Tile/examples/Tile.md | 4 +- 4 files changed, 13 insertions(+), 74 deletions(-) delete mode 100644 packages/react-core/src/components/Tile/examples/Tile.md diff --git a/packages/react-core/src/components/Card/CardHeader.tsx b/packages/react-core/src/components/Card/CardHeader.tsx index c6df10efd0e..2c1a16bf29e 100644 --- a/packages/react-core/src/components/Card/CardHeader.tsx +++ b/packages/react-core/src/components/Card/CardHeader.tsx @@ -1,6 +1,7 @@ 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'; import { CardContext } from './Card'; import { CardHeaderMain } from './CardHeaderMain'; import { CardActions } from './CardActions'; @@ -135,7 +136,8 @@ export const CardHeader: React.FunctionComponent = ({ const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox; const getSelectableProps = () => ({ - className: css('pf-m-standalone', selectableActions?.isHidden && 'pf-v6-screen-reader'), + className: css('pf-m-standalone'), + inputClassName: css(selectableActions?.isHidden && accessibilityStyles.screenReader), label: <>, 'aria-label': selectableActions.selectableActionAriaLabel, 'aria-labelledby': selectableActions.selectableActionAriaLabelledby, @@ -155,7 +157,7 @@ export const CardHeader: React.FunctionComponent = ({ className: css( 'pf-v6-c-card__clickable-action', isDisabledLinkCard && styles.modifiers.disabled, - selectableActions?.isHidden && 'pf-v6-screen-reader' + selectableActions?.isHidden && accessibilityStyles.screenReader ), id: selectableActions.selectableActionId, 'aria-label': selectableActions.selectableActionAriaLabel, diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md index 0612cfd633f..ef2946b0a30 100644 --- a/packages/react-core/src/components/Card/examples/Card.md +++ b/packages/react-core/src/components/Card/examples/Card.md @@ -182,16 +182,22 @@ Dividers can be placed between sections of the card. ## Cards as tiles -Sets of selectable cards may also be used as tiles, and may be made either single selectable or multiselectable by passing the `variant` property to the `selectableActions` object. You may toggle the visibility of the radio or checkbox by additionally passing the `isHidden` property to the `selectableActions` object. +Sets of selectable cards can be used as tiles, which are static options that users can select. + +They can be either single selectable or multi selectable, by passing the `variant` property to the `selectableActions` object. You can also toggle the visibility of the radio or checkbox by passing the `isHidden` property to the `selectableActions` object. ### Single selectable tiles +To prevent users from selecting more than 1 tile in a set, set `variant` to "single" within the `selectableActions` object of ``. + ```ts file='./CardTile.tsx' ``` ### Multi selectable tiles +To allow users to select more than 1 tile in a set, do not set `variant` within the `selectableActions` object of ``. + ```ts file='./CardTileMulti.tsx' ``` diff --git a/packages/react-core/src/components/Tile/examples/Tile.md b/packages/react-core/src/components/Tile/examples/Tile.md deleted file mode 100644 index 8157fc1fd37..00000000000 --- a/packages/react-core/src/components/Tile/examples/Tile.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: Tile -section: components -cssPrefix: pf-v6-c-tile -propComponents: ['Tile'] -deprecated: true ---- - -import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; -import './Tile.css'; - -Note: Tile has been deprecated, please use the [Card](/components/card) component. - -## Examples - -Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos). - -### Basic tile - -Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties `isSelected` and `isDisabled`. - -```ts file="./TileBasic.tsx" - -``` - -### With subtext - -Tile subtext can provide users with additional context. To add subtext, pass a short description to the `` component. - -```ts file="./TileWithSubtext.tsx" - -``` - -### With icon - -Icons can provide a visual cue that helps users understand what the tile is being used for. To add an icon, use the `icon` property. - -```ts file="./TileWithIcon.tsx" - -``` - -### With stacked icon - -You can further customize a tile’s appearance by placing an icon above the title. To stack your icon on top of a tile’s title, use the `isStacked` property. - -```ts file="./TileStacked.tsx" - -``` - -### With large icons - -You can make your icons larger to help catch a user’s attention. To increase the size of an icon, use the `isDisplayLarge` property. - -Be aware that `isDisplayLarge` can only be used when `isStacked` is also applied. - -```ts file="./TileStackedWithLargeIcons.tsx" - -``` - -### With long subtext - -To provide users with a large amount of context, subtext can be elongated to wrap around to the next line. To format a long subtext, you can pass the component `Flex` into ``. - -You can also change the type of `Flex` you can use so that the line breaks in the subtext fits your needs. You can do this by changing the default flex. The standard is `default: “flex_1”`, and changing the number in the default will also change where the sentence breaks. - -```ts file="./TileWithExtraContent.tsx" - -``` diff --git a/packages/react-core/src/deprecated/components/Tile/examples/Tile.md b/packages/react-core/src/deprecated/components/Tile/examples/Tile.md index ce3de47c2ee..aa989ab5f1c 100644 --- a/packages/react-core/src/deprecated/components/Tile/examples/Tile.md +++ b/packages/react-core/src/deprecated/components/Tile/examples/Tile.md @@ -1,7 +1,7 @@ --- id: Tile section: components -cssPrefix: pf-v5-c-tile +cssPrefix: pf-v6-c-tile propComponents: ['Tile'] deprecated: true --- @@ -10,7 +10,7 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import './Tile.css'; -Note: Tile has been deprecated, please use the [Card](/components/card#cards-as-tiles) component. +**Note:** Tile has been deprecated. Use the [card](/components/card#cards-as-tiles) component instead. ## Examples From eb29f0f26225d3e4a8de5d24894f67471d6a6a9b Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 25 Sep 2024 09:28:00 -0400 Subject: [PATCH 6/7] add more spacing to icon --- .../src/components/Card/examples/CardTile.tsx | 20 ++++++++++++------- .../Card/examples/CardTileMulti.tsx | 20 ++++++++++++------- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/packages/react-core/src/components/Card/examples/CardTile.tsx b/packages/react-core/src/components/Card/examples/CardTile.tsx index 9561464bc90..a24d4facbe3 100644 --- a/packages/react-core/src/components/Card/examples/CardTile.tsx +++ b/packages/react-core/src/components/Card/examples/CardTile.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Card, CardHeader, CardBody, Gallery } from '@patternfly/react-core'; +import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core'; import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; export const CardTile: React.FunctionComponent = () => { @@ -25,8 +25,10 @@ export const CardTile: React.FunctionComponent = () => { isHidden: true }} > - - Tile header + + + Tile header + Tile content and description @@ -41,8 +43,10 @@ export const CardTile: React.FunctionComponent = () => { isHidden: true }} > - - Tile header + + + Tile header + Tile content and description @@ -57,8 +61,10 @@ export const CardTile: React.FunctionComponent = () => { isHidden: true }} > - - Tile header (disabled) + + + Tile header (disabled) + Tile content and description diff --git a/packages/react-core/src/components/Card/examples/CardTileMulti.tsx b/packages/react-core/src/components/Card/examples/CardTileMulti.tsx index b78f9f3640e..f2b0d085321 100644 --- a/packages/react-core/src/components/Card/examples/CardTileMulti.tsx +++ b/packages/react-core/src/components/Card/examples/CardTileMulti.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Card, CardHeader, CardBody, Gallery } from '@patternfly/react-core'; +import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core'; import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; export const CardTileMulti: React.FunctionComponent = () => { @@ -38,8 +38,10 @@ export const CardTileMulti: React.FunctionComponent = () => { isHidden: true }} > - - Tile header + + + Tile header + Tile content and description @@ -53,8 +55,10 @@ export const CardTileMulti: React.FunctionComponent = () => { isHidden: true }} > - - Tile header + + + Tile header + Tile content and description @@ -68,8 +72,10 @@ export const CardTileMulti: React.FunctionComponent = () => { isHidden: true }} > - - Tile header (disabled) + + + Tile header (disabled) + Tile content and description From f303da6b9e43a71d93581140df277ed24986fddd Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 25 Sep 2024 13:11:27 -0400 Subject: [PATCH 7/7] revert stylesheet import, adjust flex --- packages/react-core/src/components/Card/CardHeader.tsx | 5 ++--- .../react-core/src/components/Card/examples/CardTile.tsx | 6 +++--- .../src/components/Card/examples/CardTileMulti.tsx | 6 +++--- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/react-core/src/components/Card/CardHeader.tsx b/packages/react-core/src/components/Card/CardHeader.tsx index 2c1a16bf29e..5ccdfb29e4a 100644 --- a/packages/react-core/src/components/Card/CardHeader.tsx +++ b/packages/react-core/src/components/Card/CardHeader.tsx @@ -1,7 +1,6 @@ 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'; import { CardContext } from './Card'; import { CardHeaderMain } from './CardHeaderMain'; import { CardActions } from './CardActions'; @@ -137,7 +136,7 @@ export const CardHeader: React.FunctionComponent = ({ const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox; const getSelectableProps = () => ({ className: css('pf-m-standalone'), - inputClassName: css(selectableActions?.isHidden && accessibilityStyles.screenReader), + inputClassName: css(selectableActions?.isHidden && 'pf-v6-screen-reader'), label: <>, 'aria-label': selectableActions.selectableActionAriaLabel, 'aria-labelledby': selectableActions.selectableActionAriaLabelledby, @@ -157,7 +156,7 @@ export const CardHeader: React.FunctionComponent = ({ className: css( 'pf-v6-c-card__clickable-action', isDisabledLinkCard && styles.modifiers.disabled, - selectableActions?.isHidden && accessibilityStyles.screenReader + selectableActions?.isHidden && 'pf-v6-screen-reader' ), id: selectableActions.selectableActionId, 'aria-label': selectableActions.selectableActionAriaLabel, diff --git a/packages/react-core/src/components/Card/examples/CardTile.tsx b/packages/react-core/src/components/Card/examples/CardTile.tsx index a24d4facbe3..9fdbadaacea 100644 --- a/packages/react-core/src/components/Card/examples/CardTile.tsx +++ b/packages/react-core/src/components/Card/examples/CardTile.tsx @@ -25,7 +25,7 @@ export const CardTile: React.FunctionComponent = () => { isHidden: true }} > - + Tile header @@ -43,7 +43,7 @@ export const CardTile: React.FunctionComponent = () => { isHidden: true }} > - + Tile header @@ -61,7 +61,7 @@ export const CardTile: React.FunctionComponent = () => { isHidden: true }} > - + Tile header (disabled) diff --git a/packages/react-core/src/components/Card/examples/CardTileMulti.tsx b/packages/react-core/src/components/Card/examples/CardTileMulti.tsx index f2b0d085321..87a453ad1d5 100644 --- a/packages/react-core/src/components/Card/examples/CardTileMulti.tsx +++ b/packages/react-core/src/components/Card/examples/CardTileMulti.tsx @@ -38,7 +38,7 @@ export const CardTileMulti: React.FunctionComponent = () => { isHidden: true }} > - + Tile header @@ -55,7 +55,7 @@ export const CardTileMulti: React.FunctionComponent = () => { isHidden: true }} > - + Tile header @@ -72,7 +72,7 @@ export const CardTileMulti: React.FunctionComponent = () => { isHidden: true }} > - + Tile header (disabled)