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