add isHidden, add example & desc

patternfly · Sep 23, 2024 · 9a3ada6 · 9a3ada6
1 parent 1967c42
commit 9a3ada6
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 7 deletions.
diff --git 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<HTMLDivElement> {
@@ -142,7 +144,11 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           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<CardHeaderProps> = ({
             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
@@ -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
@@ -21,7 +21,8 @@ export const CardTile: React.FunctionComponent = () => {
             selectableActionAriaLabelledby: 'tile-example-1',
             name: id1,
             variant: 'single',
-            onChange
+            onChange,
+            isHidden: true
           }}
         >
           <PlusIcon />
@@ -36,7 +37,8 @@ export const CardTile: React.FunctionComponent = () => {
             selectableActionAriaLabelledby: 'tile-example-2',
             name: id2,
             variant: 'single',
-            onChange
+            onChange,
+            isHidden: true
           }}
         >
           <PlusIcon />
@@ -51,11 +53,12 @@ export const CardTile: React.FunctionComponent = () => {
             selectableActionAriaLabelledby: 'tile-example-3',
             name: id3,
             variant: 'single',
-            onChange
+            onChange,
+            isHidden: true
           }}
         >
           <PlusIcon />
-          <b>Tile header</b>
+          <b>Tile header (disabled)</b>
         </CardHeader>
         <CardBody>Tile content and description</CardBody>
       </Card>

diff --git a/packages/react-core/src/components/Card/examples/CardTileMulti.tsx 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<HTMLInputElement>, 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 (
+    <Gallery hasGutter>
+      <Card id="multi-tile-example-1" isSelectable isSelected={isChecked1}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'multi-tile-example-1',
+            name: id1,
+            onChange,
+            isHidden: true
+          }}
+        >
+          <PlusIcon />
+          <b>Tile header</b>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="multi-tile-example-2" isSelectable isSelected={isChecked2}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'multi-tile-example-2',
+            name: id2,
+            onChange,
+            isHidden: true
+          }}
+        >
+          <PlusIcon />
+          <b>Tile header</b>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="multi-tile-example-3" isSelectable isDisabled isSelected={isChecked3}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'multi-tile-example-3',
+            name: id3,
+            onChange,
+            isHidden: true
+          }}
+        >
+          <PlusIcon />
+          <b>Tile header (disabled)</b>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+    </Gallery>
+  );
+};