From efd9cc64f04d3f5cfdea6667a6f6f712023d0bee Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Fri, 15 Mar 2024 15:02:25 -0400
Subject: [PATCH 1/5] fix(Card): updated logic to prevent unclickable cards

---
 .../react-core/src/components/Card/Card.tsx   | 40 +++++++++++++++----
 .../src/components/Card/CardHeader.tsx        | 20 +++++-----
 .../src/components/Card/examples/Card.md      | 21 +++++-----
 .../Card/examples/CardSelectable.tsx          | 36 ++++++++++++++---
 .../Card/examples/CardSingleSelectable.tsx    | 17 ++++++--
 5 files changed, 101 insertions(+), 33 deletions(-)

diff --git a/packages/react-core/src/components/Card/Card.tsx b/packages/react-core/src/components/Card/Card.tsx
index 08ec332a5a0..5a6eece1311 100644
--- a/packages/react-core/src/components/Card/Card.tsx
+++ b/packages/react-core/src/components/Card/Card.tsx
@@ -14,13 +14,21 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   component?: keyof JSX.IntrinsicElements;
   /** Modifies the card to include compact styling. Should not be used with isLarge. */
   isCompact?: boolean;
-  /** Modifies the card to include selectable styling */
+  /** Flag indicating that the card is selectable. */
   isSelectable?: boolean;
-  /** Modifies the card to include selected styling */
-  isSelected?: boolean;
-  /** Modifies the card to include clickable styling */
+  /** Flag indicating whether the input of a selectable card should be visually hidden. */
+  isSelectableInputHidden?: boolean;
+  /** Flag indicating that the card is clickable and contains some action that triggers on click. */
   isClickable?: boolean;
-  /** Modifies a clickable or selectable card to have disabled styling. */
+  /** Flag indicating whether a card that is both clickable and selectable is currently selected and has selected styling.
+   * This will not determine the card's actual selected state.
+   */
+  isSelected?: boolean;
+  /** Flag indicating whether a card that is either only clickable or that is both clickable and selectable
+   * is currently clicked and has clicked styling.
+   */
+  isClicked?: boolean;
+  /** Flag indicating that a clickable or selectable card is disabled. */
   isDisabled?: boolean;
   /** Modifies the card to be large. Should not be used with isCompact. */
   isLarge?: boolean;
@@ -43,6 +51,8 @@ interface CardContextProps {
   isExpanded: boolean;
   isClickable: boolean;
   isSelectable: boolean;
+  isSelectableInputHidden: boolean;
+  isClicked: boolean;
   isDisabled: boolean;
 }
 
@@ -51,6 +61,8 @@ export const CardContext = React.createContext<Partial<CardContextProps>>({
   isExpanded: false,
   isClickable: false,
   isSelectable: false,
+  isSelectableInputHidden: false,
+  isClicked: false,
   isDisabled: false
 });
 
@@ -61,9 +73,11 @@ export const Card: React.FunctionComponent<CardProps> = ({
   component = 'div',
   isCompact = false,
   isSelectable = false,
+  isSelectableInputHidden = false,
   isClickable = false,
   isDisabled = false,
   isSelected = false,
+  isClicked = false,
   isExpanded = false,
   isLarge = false,
   isFullHeight = false,
@@ -82,10 +96,20 @@ export const Card: React.FunctionComponent<CardProps> = ({
     console.warn('Card: Cannot use isCompact with isLarge. Defaulting to isCompact');
     isLarge = false;
   }
+  if (isSelectableInputHidden && isClickable && isSelectable) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Card: Cannot set isSelectableInputHidden to true if the card is both selectable and clickable. Doing so would prevent selection.'
+    );
+  }
 
   const getSelectableModifiers = () => {
     if (isSelectable && isClickable) {
-      return css(styles.modifiers.selectable, styles.modifiers.clickable, isSelected && styles.modifiers.current);
+      return css(
+        styles.modifiers.selectable,
+        styles.modifiers.clickable,
+        (isSelected || isClicked) && styles.modifiers.current
+      );
     }
 
     if (isSelectable) {
@@ -93,7 +117,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
     }
 
     if (isClickable) {
-      return css(styles.modifiers.clickable, isSelected && styles.modifiers.selected);
+      return css(styles.modifiers.clickable, isClicked && styles.modifiers.current);
     }
 
     return '';
@@ -106,6 +130,8 @@ export const Card: React.FunctionComponent<CardProps> = ({
         isExpanded,
         isClickable,
         isSelectable,
+        isSelectableInputHidden,
+        isClicked,
         isDisabled
       }}
     >
diff --git a/packages/react-core/src/components/Card/CardHeader.tsx b/packages/react-core/src/components/Card/CardHeader.tsx
index adc3bfddaba..8e674a3012b 100644
--- a/packages/react-core/src/components/Card/CardHeader.tsx
+++ b/packages/react-core/src/components/Card/CardHeader.tsx
@@ -79,7 +79,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   ...props
 }: CardHeaderProps) => (
   <CardContext.Consumer>
-    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled }) => {
+    {({ cardId, isClickable, isSelectable, isSelectableInputHidden, isClicked, isDisabled: isCardDisabled }) => {
       const cardHeaderToggle = (
         <div className={css(styles.cardHeaderToggle)}>
           <Button
@@ -108,19 +108,17 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
       }
 
       const handleActionClick = (event: React.FormEvent<HTMLInputElement> | React.MouseEvent) => {
-        if (isClickable) {
-          if (selectableActions?.onClickAction) {
-            selectableActions.onClickAction(event);
-          } else if (selectableActions?.to) {
-            window.open(selectableActions.to, selectableActions.isExternalLink ? '_blank' : '_self');
-          }
+        if (selectableActions?.onClickAction) {
+          selectableActions.onClickAction(event);
+        } else if (selectableActions?.to) {
+          window.open(selectableActions.to, selectableActions.isExternalLink ? '_blank' : '_self');
         }
       };
 
       const getClickableSelectableProps = () => {
         const baseProps = {
           className: 'pf-m-standalone',
-          inputClassName: isClickable && !isSelectable && 'pf-v6-screen-reader',
+          inputClassName: ((isClickable && !isSelectable) || isSelectableInputHidden) && 'pf-v6-screen-reader',
           label: <></>,
           'aria-label': selectableActions.selectableActionAriaLabel,
           'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
@@ -130,7 +128,11 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
         };
 
         if (isClickable && !isSelectable) {
-          return { ...baseProps, onClick: handleActionClick };
+          return {
+            ...baseProps,
+            onClick: handleActionClick,
+            isChecked: isClicked
+          };
         }
         if (isSelectable) {
           return { ...baseProps, onChange: selectableActions.onChange, isChecked: selectableActions.isChecked };
diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md
index 8300dd7f572..9097c8f90e9 100644
--- a/packages/react-core/src/components/Card/examples/Card.md
+++ b/packages/react-core/src/components/Card/examples/Card.md
@@ -115,9 +115,9 @@ A common use case of this is to set all but one body section to `isFilled={false
 
 ### Selectable
 
-A card can be selected by clicking anywhere within the card.
+A selectable card can be selected by clicking anywhere within the card. You can visually hide the input in a card by passing the `isSelectableInputHidden` property to `<Card>`.
 
-You must avoid rendering any other interactive content within the `<Card>` when it is meant to be selectable only. Refer to our [clickable and selectable example](#clickable-and-selectable-cards) if you need a card that is both selectable and has other interactive content.
+You must avoid rendering any other interactive content within the `<Card>` when it is meant to be selectable only. Refer to our [actionable and selectable example](#clickable-and-selectable-cards) if you need a card that is both selectable and has other interactive content.
 
 ```ts file='./CardSelectable.tsx'
 
@@ -125,27 +125,29 @@ You must avoid rendering any other interactive content within the `<Card>` when
 
 ### Single selectable
 
-When a group of single selectable cards are related, you should pass the same `name` property to each card's `selectableActions` property.
+When a group of single selectable cards are related, you must pass the same `name` property to each card's `selectableActions` property.
 
 ```ts file='./CardSingleSelectable.tsx'
 
 ```
 
-### Clickable
+### Actionable
 
-A card can perform an action or navigate to a link by clicking anywhere within the card. You can also pass in the `isExternalLink` property to `selectableActions` if you want a clickable card's link to open in a new tab or window.
+An actionable card can perform an action or navigate to a link by clicking anywhere within the card. You can also pass in the `isExternalLink` property to `selectableActions` if you want an actionable card's link to open in a new tab or window.
 
-When a card is meant to be clickable only, you must avoid rendering any other interactive content within the `<Card>`, similar to selectable cards.
+You can pass the `isClicked` property to `<Card>` to convey that a card is the currently clicked one, such as when clicking a card would open a primary detail view. This must not be used simply for "selection" of a card, and you should instead use our [selectable card](#selectable) or [single selectable card](#single-selectable).
+
+When a card is meant to be actionable only, you must avoid rendering any other interactive content within the `<Card>`, similar to selectable cards.
 
 ```ts file='./CardClickable.tsx'
 
 ```
 
-### Clickable and selectable
+### Actionable and selectable
 
-A card can be selectable and have additional interactive content by passing both the `isClickable` and `isSelectable` properties to `<Card>`. The following example shows how the "clickable" functionality can be rendered anywhere within a selectable card.
+A card can be selectable and have additional interactive content by passing both the `isClickable` and `isSelectable` properties to `<Card>`. The following example shows how the actionable functionality can be rendered anywhere within a selectable card.
 
-When passing interactive content to a clickable and selectable card that is disabled, you should also ensure the interactive content is disabled as well, if applicable.
+When passing interactive content to an actionable and selectable card that is disabled, you should also ensure the interactive content is disabled as well, if applicable.
 
 ```ts file='./CardClickableSelectable.tsx'
 
@@ -170,6 +172,7 @@ An image can be placed in the card header to show users an icon beside the expan
 ```
 
 ### Card with dividers
+
 Dividers can be placed between sections of the card.
 
 ```ts file='./CardWithDividers.tsx'
diff --git a/packages/react-core/src/components/Card/examples/CardSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
index 413977da3de..ffba8fbb8db 100644
--- a/packages/react-core/src/components/Card/examples/CardSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
@@ -6,6 +6,7 @@ export const SelectableCard: React.FunctionComponent = () => {
   const [isChecked2, setIsChecked2] = React.useState(false);
   const [isChecked3, setIsChecked3] = React.useState(false);
   const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
+  const [isInputHidden, setIsInputHidden] = React.useState<boolean>(false);
 
   const id1 = 'selectable-card-input-1';
   const id2 = 'selectable-card-input-2';
@@ -30,20 +31,34 @@ export const SelectableCard: React.FunctionComponent = () => {
   const toggleVariant = (checked: boolean) => {
     setIsSecondary(checked);
   };
+  const toggleInputHidden = (checked: boolean) => {
+    setIsInputHidden(checked);
+  };
 
   return (
     <>
       <Checkbox
-        label="secondary styling"
+        label="Secondary card styling"
         isChecked={isSecondary}
         onChange={(_event, checked) => toggleVariant(checked)}
-        aria-label="add secondary styling"
         id="toggle-variant-selectable"
         name="toggle-variant"
       />
+      <Checkbox
+        label="Card inputs hidden"
+        isChecked={isInputHidden}
+        onChange={(_event, checked) => toggleInputHidden(checked)}
+        id="toggle-input-hidden-selectable"
+        name="toggle-input-hidden"
+      />
       <div style={{ marginTop: '15px' }}>
         <Gallery hasGutter>
-          <Card id="selectable-card-example-1" isSelectable variant={isSecondary ? 'secondary' : 'default'}>
+          <Card
+            id="selectable-card-example-1"
+            isSelectable
+            variant={isSecondary ? 'secondary' : 'default'}
+            isSelectableInputHidden={isInputHidden}
+          >
             <CardHeader
               selectableActions={{
                 selectableActionId: id1,
@@ -57,7 +72,12 @@ export const SelectableCard: React.FunctionComponent = () => {
             </CardHeader>
             <CardBody>This card is selectable.</CardBody>
           </Card>
-          <Card id="selectable-card-example-2" isSelectable variant={isSecondary ? 'secondary' : 'default'}>
+          <Card
+            id="selectable-card-example-2"
+            isSelectable
+            variant={isSecondary ? 'secondary' : 'default'}
+            isSelectableInputHidden={isInputHidden}
+          >
             <CardHeader
               selectableActions={{
                 selectableActionId: id2,
@@ -71,7 +91,13 @@ export const SelectableCard: React.FunctionComponent = () => {
             </CardHeader>
             <CardBody>This card is selectable.</CardBody>
           </Card>
-          <Card id="selectable-card-example-3" isSelectable isDisabled variant={isSecondary ? 'secondary' : 'default'}>
+          <Card
+            id="selectable-card-example-3"
+            isSelectable
+            isDisabled
+            variant={isSecondary ? 'secondary' : 'default'}
+            isSelectableInputHidden={isInputHidden}
+          >
             <CardHeader
               selectableActions={{
                 selectableActionId: id3,
diff --git a/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx
index 18854d98d4f..b4784e89827 100644
--- a/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx
@@ -2,10 +2,15 @@ import React from 'react';
 import { Card, CardHeader, CardTitle, CardBody, Gallery } from '@patternfly/react-core';
 
 export const SingleSelectableCard: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState('');
   const id1 = 'single-selectable-card-input-1';
   const id2 = 'single-selectable-card-input-2';
   const id3 = 'single-selectable-card-input-3';
 
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(event.currentTarget.id);
+  };
+
   return (
     <Gallery hasGutter>
       <Card id="single-selectable-card-example-1" isSelectable>
@@ -14,7 +19,9 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
             selectableActionId: id1,
             selectableActionAriaLabelledby: 'single-selectable-card-example-1',
             name: 'single-selectable-card-example',
-            variant: 'single'
+            variant: 'single',
+            isChecked: isChecked === id1,
+            onChange
           }}
         >
           <CardTitle>First card</CardTitle>
@@ -27,7 +34,9 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
             selectableActionId: id2,
             selectableActionAriaLabelledby: 'single-selectable-card-example-2',
             name: 'single-selectable-card-example',
-            variant: 'single'
+            variant: 'single',
+            isChecked: isChecked === id2,
+            onChange
           }}
         >
           <CardTitle>Second card</CardTitle>
@@ -40,7 +49,9 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
             selectableActionId: id3,
             selectableActionAriaLabelledby: 'single-selectable-card-example-3',
             name: 'single-selectable-card-example',
-            variant: 'single'
+            variant: 'single',
+            isChecked: isChecked === id3,
+            onChange
           }}
         >
           <CardTitle>Third card</CardTitle>

From d587b8e4bce2c33fa55e23111c7bf74d7257d217 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Mon, 25 Mar 2024 15:08:03 -0400
Subject: [PATCH 2/5] Removed prop to hide input, updated cypress test

---
 packages/react-core/src/components/Card/Card.tsx     | 12 ------------
 .../react-core/src/components/Card/CardHeader.tsx    |  4 ++--
 .../cypress/integration/card.spec.ts                 |  2 --
 3 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/packages/react-core/src/components/Card/Card.tsx b/packages/react-core/src/components/Card/Card.tsx
index 5a6eece1311..5fafa58e53d 100644
--- a/packages/react-core/src/components/Card/Card.tsx
+++ b/packages/react-core/src/components/Card/Card.tsx
@@ -16,8 +16,6 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isCompact?: boolean;
   /** Flag indicating that the card is selectable. */
   isSelectable?: boolean;
-  /** Flag indicating whether the input of a selectable card should be visually hidden. */
-  isSelectableInputHidden?: boolean;
   /** Flag indicating that the card is clickable and contains some action that triggers on click. */
   isClickable?: boolean;
   /** Flag indicating whether a card that is both clickable and selectable is currently selected and has selected styling.
@@ -51,7 +49,6 @@ interface CardContextProps {
   isExpanded: boolean;
   isClickable: boolean;
   isSelectable: boolean;
-  isSelectableInputHidden: boolean;
   isClicked: boolean;
   isDisabled: boolean;
 }
@@ -61,7 +58,6 @@ export const CardContext = React.createContext<Partial<CardContextProps>>({
   isExpanded: false,
   isClickable: false,
   isSelectable: false,
-  isSelectableInputHidden: false,
   isClicked: false,
   isDisabled: false
 });
@@ -73,7 +69,6 @@ export const Card: React.FunctionComponent<CardProps> = ({
   component = 'div',
   isCompact = false,
   isSelectable = false,
-  isSelectableInputHidden = false,
   isClickable = false,
   isDisabled = false,
   isSelected = false,
@@ -96,12 +91,6 @@ export const Card: React.FunctionComponent<CardProps> = ({
     console.warn('Card: Cannot use isCompact with isLarge. Defaulting to isCompact');
     isLarge = false;
   }
-  if (isSelectableInputHidden && isClickable && isSelectable) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'Card: Cannot set isSelectableInputHidden to true if the card is both selectable and clickable. Doing so would prevent selection.'
-    );
-  }
 
   const getSelectableModifiers = () => {
     if (isSelectable && isClickable) {
@@ -130,7 +119,6 @@ export const Card: React.FunctionComponent<CardProps> = ({
         isExpanded,
         isClickable,
         isSelectable,
-        isSelectableInputHidden,
         isClicked,
         isDisabled
       }}
diff --git a/packages/react-core/src/components/Card/CardHeader.tsx b/packages/react-core/src/components/Card/CardHeader.tsx
index 8e674a3012b..6a2cdccf3c2 100644
--- a/packages/react-core/src/components/Card/CardHeader.tsx
+++ b/packages/react-core/src/components/Card/CardHeader.tsx
@@ -79,7 +79,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   ...props
 }: CardHeaderProps) => (
   <CardContext.Consumer>
-    {({ cardId, isClickable, isSelectable, isSelectableInputHidden, isClicked, isDisabled: isCardDisabled }) => {
+    {({ cardId, isClickable, isSelectable, isClicked, isDisabled: isCardDisabled }) => {
       const cardHeaderToggle = (
         <div className={css(styles.cardHeaderToggle)}>
           <Button
@@ -118,7 +118,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
       const getClickableSelectableProps = () => {
         const baseProps = {
           className: 'pf-m-standalone',
-          inputClassName: ((isClickable && !isSelectable) || isSelectableInputHidden) && 'pf-v6-screen-reader',
+          inputClassName: isClickable && !isSelectable && 'pf-v6-screen-reader',
           label: <></>,
           'aria-label': selectableActions.selectableActionAriaLabel,
           'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
diff --git a/packages/react-integration/cypress/integration/card.spec.ts b/packages/react-integration/cypress/integration/card.spec.ts
index 899e5b7861e..3cd387ee2d2 100644
--- a/packages/react-integration/cypress/integration/card.spec.ts
+++ b/packages/react-integration/cypress/integration/card.spec.ts
@@ -62,10 +62,8 @@ describe('Card Demo Test', () => {
 
   it('Verify clickable only card action is triggered', () => {
     cy.get('#clickable-card-drawer').should('not.have.class', 'pf-m-expanded');
-    cy.get('#clickable-card-example-1 #clickable-card-input-1').should('not.be.checked');
     cy.get('#clickable-card-example-1').click();
     cy.get('#clickable-card-drawer').should('have.class', 'pf-m-expanded');
-    cy.get('#clickable-card-example-1 #clickable-card-input-1').should('be.checked');
   });
 
   it('Verify clickable only card link is navigated to', () => {

From b5baa1078a18a271b4865182a61a524612f3ad14 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Mon, 25 Mar 2024 15:15:17 -0400
Subject: [PATCH 3/5] Removed old prop from example

---
 .../Card/examples/CardSelectable.tsx          | 33 ++-----------------
 1 file changed, 3 insertions(+), 30 deletions(-)

diff --git a/packages/react-core/src/components/Card/examples/CardSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
index ffba8fbb8db..085e7a1c789 100644
--- a/packages/react-core/src/components/Card/examples/CardSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
@@ -6,7 +6,6 @@ export const SelectableCard: React.FunctionComponent = () => {
   const [isChecked2, setIsChecked2] = React.useState(false);
   const [isChecked3, setIsChecked3] = React.useState(false);
   const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
-  const [isInputHidden, setIsInputHidden] = React.useState<boolean>(false);
 
   const id1 = 'selectable-card-input-1';
   const id2 = 'selectable-card-input-2';
@@ -31,9 +30,6 @@ export const SelectableCard: React.FunctionComponent = () => {
   const toggleVariant = (checked: boolean) => {
     setIsSecondary(checked);
   };
-  const toggleInputHidden = (checked: boolean) => {
-    setIsInputHidden(checked);
-  };
 
   return (
     <>
@@ -44,21 +40,9 @@ export const SelectableCard: React.FunctionComponent = () => {
         id="toggle-variant-selectable"
         name="toggle-variant"
       />
-      <Checkbox
-        label="Card inputs hidden"
-        isChecked={isInputHidden}
-        onChange={(_event, checked) => toggleInputHidden(checked)}
-        id="toggle-input-hidden-selectable"
-        name="toggle-input-hidden"
-      />
       <div style={{ marginTop: '15px' }}>
         <Gallery hasGutter>
-          <Card
-            id="selectable-card-example-1"
-            isSelectable
-            variant={isSecondary ? 'secondary' : 'default'}
-            isSelectableInputHidden={isInputHidden}
-          >
+          <Card id="selectable-card-example-1" isSelectable variant={isSecondary ? 'secondary' : 'default'}>
             <CardHeader
               selectableActions={{
                 selectableActionId: id1,
@@ -72,12 +56,7 @@ export const SelectableCard: React.FunctionComponent = () => {
             </CardHeader>
             <CardBody>This card is selectable.</CardBody>
           </Card>
-          <Card
-            id="selectable-card-example-2"
-            isSelectable
-            variant={isSecondary ? 'secondary' : 'default'}
-            isSelectableInputHidden={isInputHidden}
-          >
+          <Card id="selectable-card-example-2" isSelectable variant={isSecondary ? 'secondary' : 'default'}>
             <CardHeader
               selectableActions={{
                 selectableActionId: id2,
@@ -91,13 +70,7 @@ export const SelectableCard: React.FunctionComponent = () => {
             </CardHeader>
             <CardBody>This card is selectable.</CardBody>
           </Card>
-          <Card
-            id="selectable-card-example-3"
-            isSelectable
-            isDisabled
-            variant={isSecondary ? 'secondary' : 'default'}
-            isSelectableInputHidden={isInputHidden}
-          >
+          <Card id="selectable-card-example-3" isSelectable isDisabled variant={isSecondary ? 'secondary' : 'default'}>
             <CardHeader
               selectableActions={{
                 selectableActionId: id3,

From c090826b451d98872cf6cc708065df046a7a03bc Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 26 Mar 2024 08:16:46 -0400
Subject: [PATCH 4/5] Removed mention of old prop from docs

---
 packages/react-core/src/components/Card/examples/Card.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md
index 9097c8f90e9..ce6164b0318 100644
--- a/packages/react-core/src/components/Card/examples/Card.md
+++ b/packages/react-core/src/components/Card/examples/Card.md
@@ -115,9 +115,9 @@ A common use case of this is to set all but one body section to `isFilled={false
 
 ### Selectable
 
-A selectable card can be selected by clicking anywhere within the card. You can visually hide the input in a card by passing the `isSelectableInputHidden` property to `<Card>`.
+A selectable card can be selected by clicking anywhere within the card.
 
-You must avoid rendering any other interactive content within the `<Card>` when it is meant to be selectable only. Refer to our [actionable and selectable example](#clickable-and-selectable-cards) if you need a card that is both selectable and has other interactive content.
+You must avoid rendering any other interactive content within the `<Card>` when it is meant to be selectable only. Refer to our [actionable and selectable example](#clickable-and-selectable-cards) if you need a card that is both selectable and has other interactive, actionable content.
 
 ```ts file='./CardSelectable.tsx'
 
@@ -135,7 +135,7 @@ When a group of single selectable cards are related, you must pass the same `nam
 
 An actionable card can perform an action or navigate to a link by clicking anywhere within the card. You can also pass in the `isExternalLink` property to `selectableActions` if you want an actionable card's link to open in a new tab or window.
 
-You can pass the `isClicked` property to `<Card>` to convey that a card is the currently clicked one, such as when clicking a card would open a primary detail view. This must not be used simply for "selection" of a card, and you should instead use our [selectable card](#selectable) or [single selectable card](#single-selectable).
+You can pass the `isClicked` property to `<Card>` to convey that a card is the currently clicked one, such as when clicking a card would open a [primary-detail view](/patterns/primary-detail). This must not be used simply for "selection" of a card, and you should instead use our [selectable card](#selectable) or [single selectable card](#single-selectable).
 
 When a card is meant to be actionable only, you must avoid rendering any other interactive content within the `<Card>`, similar to selectable cards.
 

From 0bb8e59b023df18f2bcdff6598c8c0f8b00a5f7e Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 28 Mar 2024 15:39:08 -0400
Subject: [PATCH 5/5] Updated API to have isSelected control selectable card
 state

---
 .../react-core/src/components/Card/Card.tsx   |  7 +++--
 .../src/components/Card/CardHeader.tsx        |  9 ++++--
 .../src/components/Card/examples/Card.md      |  2 +-
 .../Card/examples/CardClickableSelectable.tsx | 12 +++----
 .../Card/examples/CardSelectable.tsx          | 25 +++++++++++----
 .../Card/examples/CardSingleSelectable.tsx    |  9 ++----
 .../components/demos/CardDemo/CardDemo.tsx    | 31 ++++++++++++++++---
 7 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/packages/react-core/src/components/Card/Card.tsx b/packages/react-core/src/components/Card/Card.tsx
index 5fafa58e53d..79e282dcc2d 100644
--- a/packages/react-core/src/components/Card/Card.tsx
+++ b/packages/react-core/src/components/Card/Card.tsx
@@ -18,8 +18,8 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isSelectable?: boolean;
   /** Flag indicating that the card is clickable and contains some action that triggers on click. */
   isClickable?: boolean;
-  /** Flag indicating whether a card that is both clickable and selectable is currently selected and has selected styling.
-   * This will not determine the card's actual selected state.
+  /** Flag indicating whether a card that is either selectable only or both clickable and selectable is
+   * currently selected and has selected styling.
    */
   isSelected?: boolean;
   /** Flag indicating whether a card that is either only clickable or that is both clickable and selectable
@@ -49,6 +49,7 @@ interface CardContextProps {
   isExpanded: boolean;
   isClickable: boolean;
   isSelectable: boolean;
+  isSelected: boolean;
   isClicked: boolean;
   isDisabled: boolean;
 }
@@ -58,6 +59,7 @@ export const CardContext = React.createContext<Partial<CardContextProps>>({
   isExpanded: false,
   isClickable: false,
   isSelectable: false,
+  isSelected: false,
   isClicked: false,
   isDisabled: false
 });
@@ -119,6 +121,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
         isExpanded,
         isClickable,
         isSelectable,
+        isSelected,
         isClicked,
         isDisabled
       }}
diff --git a/packages/react-core/src/components/Card/CardHeader.tsx b/packages/react-core/src/components/Card/CardHeader.tsx
index 6a2cdccf3c2..96d248dd31c 100644
--- a/packages/react-core/src/components/Card/CardHeader.tsx
+++ b/packages/react-core/src/components/Card/CardHeader.tsx
@@ -44,7 +44,9 @@ export interface CardHeaderSelectableActionsObject {
   isExternalLink?: boolean;
   /** Name for the input element of a clickable or selectable card. */
   name?: string;
-  /** Flag indicating whether the selectable card input is checked */
+  /** @deprecated Flag indicating whether the selectable card input is checked. We recommend using
+   * the isSelected prop on the card component instead.
+   */
   isChecked?: boolean;
 }
 
@@ -79,7 +81,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   ...props
 }: CardHeaderProps) => (
   <CardContext.Consumer>
-    {({ cardId, isClickable, isSelectable, isClicked, isDisabled: isCardDisabled }) => {
+    {({ cardId, isClickable, isSelectable, isSelected, isClicked, isDisabled: isCardDisabled }) => {
       const cardHeaderToggle = (
         <div className={css(styles.cardHeaderToggle)}>
           <Button
@@ -126,6 +128,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           name: selectableActions.name,
           isDisabled: isCardDisabled
         };
+        const isSelectableInputChecked = selectableActions.isChecked ?? isSelected;
 
         if (isClickable && !isSelectable) {
           return {
@@ -135,7 +138,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           };
         }
         if (isSelectable) {
-          return { ...baseProps, onChange: selectableActions.onChange, isChecked: selectableActions.isChecked };
+          return { ...baseProps, onChange: selectableActions.onChange, isChecked: isSelectableInputChecked };
         }
 
         return baseProps;
diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md
index ce6164b0318..cb7b5293ca2 100644
--- a/packages/react-core/src/components/Card/examples/Card.md
+++ b/packages/react-core/src/components/Card/examples/Card.md
@@ -133,7 +133,7 @@ When a group of single selectable cards are related, you must pass the same `nam
 
 ### Actionable
 
-An actionable card can perform an action or navigate to a link by clicking anywhere within the card. You can also pass in the `isExternalLink` property to `selectableActions` if you want an actionable card's link to open in a new tab or window.
+An actionable card can perform an action or navigate to a link by clicking anywhere within the card. To open a link in a new tab or window, pass the `isExternalLink` property to `selectableActions`.
 
 You can pass the `isClicked` property to `<Card>` to convey that a card is the currently clicked one, such as when clicking a card would open a [primary-detail view](/patterns/primary-detail). This must not be used simply for "selection" of a card, and you should instead use our [selectable card](#selectable) or [single selectable card](#single-selectable).
 
diff --git a/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx b/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx
index 8beb5aff080..76226a796fb 100644
--- a/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx
@@ -5,7 +5,7 @@ export const CardClickable: React.FunctionComponent = () => {
   const [isChecked1, setIsChecked1] = React.useState(false);
   const [isChecked2, setIsChecked2] = React.useState(false);
   const [isChecked3, setIsChecked3] = React.useState(false);
-  const [isSelected1, setIsSelected1] = React.useState(false);
+  const [isClicked, setIsClicked] = React.useState(false);
   const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
 
   const id1 = 'clickable-selectable-card-input-1';
@@ -13,7 +13,7 @@ export const CardClickable: React.FunctionComponent = () => {
   const id3 = 'clickable-selectable-card-input-3';
 
   const onClick = () => {
-    setIsSelected1((prevState) => !prevState);
+    setIsClicked((prevState) => !prevState);
   };
 
   const onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
@@ -52,7 +52,8 @@ export const CardClickable: React.FunctionComponent = () => {
             id="clickable-selectable-card-example-1"
             isClickable
             isSelectable
-            isSelected={isSelected1}
+            isSelected={isChecked1}
+            isClicked={isClicked}
             variant={isSecondary ? 'secondary' : 'default'}
           >
             <CardHeader
@@ -60,7 +61,6 @@ export const CardClickable: React.FunctionComponent = () => {
                 selectableActionId: id1,
                 selectableActionAriaLabelledby: 'clickable-selectable-card-example-1',
                 name: id1,
-                isChecked: isChecked1,
                 onChange
               }}
             >
@@ -76,6 +76,7 @@ export const CardClickable: React.FunctionComponent = () => {
             id="clickable-selectable-card-example-2"
             isClickable
             isSelectable
+            isSelected={isChecked2}
             variant={isSecondary ? 'secondary' : 'default'}
           >
             <CardHeader
@@ -83,7 +84,6 @@ export const CardClickable: React.FunctionComponent = () => {
                 selectableActionId: id2,
                 selectableActionAriaLabelledby: 'clickable-selectable-card-example-2',
                 name: id2,
-                isChecked: isChecked2,
                 onChange
               }}
             >
@@ -102,6 +102,7 @@ export const CardClickable: React.FunctionComponent = () => {
             isClickable
             isSelectable
             isDisabled
+            isSelected={isChecked3}
             variant={isSecondary ? 'secondary' : 'default'}
           >
             <CardHeader
@@ -109,7 +110,6 @@ export const CardClickable: React.FunctionComponent = () => {
                 selectableActionId: id3,
                 selectableActionAriaLabelledby: 'clickable-selectable-card-example-3',
                 name: id3,
-                isChecked: isChecked3,
                 onChange
               }}
             >
diff --git a/packages/react-core/src/components/Card/examples/CardSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
index 085e7a1c789..cb32f98bac6 100644
--- a/packages/react-core/src/components/Card/examples/CardSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardSelectable.tsx
@@ -42,13 +42,17 @@ export const SelectableCard: React.FunctionComponent = () => {
       />
       <div style={{ marginTop: '15px' }}>
         <Gallery hasGutter>
-          <Card id="selectable-card-example-1" isSelectable variant={isSecondary ? 'secondary' : 'default'}>
+          <Card
+            id="selectable-card-example-1"
+            isSelectable
+            isSelected={isChecked1}
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
             <CardHeader
               selectableActions={{
                 selectableActionId: id1,
                 selectableActionAriaLabelledby: 'selectable-card-example-1',
                 name: id1,
-                isChecked: isChecked1,
                 onChange
               }}
             >
@@ -56,13 +60,17 @@ export const SelectableCard: React.FunctionComponent = () => {
             </CardHeader>
             <CardBody>This card is selectable.</CardBody>
           </Card>
-          <Card id="selectable-card-example-2" isSelectable variant={isSecondary ? 'secondary' : 'default'}>
+          <Card
+            id="selectable-card-example-2"
+            isSelectable
+            isSelected={isChecked2}
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
             <CardHeader
               selectableActions={{
                 selectableActionId: id2,
                 selectableActionAriaLabelledby: 'selectable-card-example-2',
                 name: id2,
-                isChecked: isChecked2,
                 onChange
               }}
             >
@@ -70,13 +78,18 @@ export const SelectableCard: React.FunctionComponent = () => {
             </CardHeader>
             <CardBody>This card is selectable.</CardBody>
           </Card>
-          <Card id="selectable-card-example-3" isSelectable isDisabled variant={isSecondary ? 'secondary' : 'default'}>
+          <Card
+            id="selectable-card-example-3"
+            isSelectable
+            isDisabled
+            isSelected={isChecked3}
+            variant={isSecondary ? 'secondary' : 'default'}
+          >
             <CardHeader
               selectableActions={{
                 selectableActionId: id3,
                 selectableActionAriaLabelledby: 'selectable-card-example-3',
                 name: id3,
-                isChecked: isChecked3,
                 onChange
               }}
             >
diff --git a/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx
index b4784e89827..b8e599e9575 100644
--- a/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx
+++ b/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx
@@ -13,14 +13,13 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
 
   return (
     <Gallery hasGutter>
-      <Card id="single-selectable-card-example-1" isSelectable>
+      <Card id="single-selectable-card-example-1" isSelectable isSelected={isChecked === id1}>
         <CardHeader
           selectableActions={{
             selectableActionId: id1,
             selectableActionAriaLabelledby: 'single-selectable-card-example-1',
             name: 'single-selectable-card-example',
             variant: 'single',
-            isChecked: isChecked === id1,
             onChange
           }}
         >
@@ -28,14 +27,13 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
         </CardHeader>
         <CardBody>This card is single selectable.</CardBody>
       </Card>
-      <Card id="single-selectable-card-example-2" isSelectable>
+      <Card id="single-selectable-card-example-2" isSelectable isSelected={isChecked === id2}>
         <CardHeader
           selectableActions={{
             selectableActionId: id2,
             selectableActionAriaLabelledby: 'single-selectable-card-example-2',
             name: 'single-selectable-card-example',
             variant: 'single',
-            isChecked: isChecked === id2,
             onChange
           }}
         >
@@ -43,14 +41,13 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
         </CardHeader>
         <CardBody>This card is single selectable.</CardBody>
       </Card>
-      <Card id="single-selectable-card-example-3" isSelectable isDisabled>
+      <Card id="single-selectable-card-example-3" isSelectable isDisabled isSelected={isChecked === id3}>
         <CardHeader
           selectableActions={{
             selectableActionId: id3,
             selectableActionAriaLabelledby: 'single-selectable-card-example-3',
             name: 'single-selectable-card-example',
             variant: 'single',
-            isChecked: isChecked === id3,
             onChange
           }}
         >
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
index 3a4e949433a..7d309b23684 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
@@ -26,13 +26,14 @@ interface CardDemoState {
   isOpen: boolean;
   selectableChecked1: boolean;
   selectableChecked2: boolean;
+  singleSelectableChecked: string;
   drawerIsExpanded: boolean;
   selectableClickableChecked: boolean;
   selectableClickableSelected: boolean;
   selectaleClickableDrawerIsExpanded: boolean;
 }
 
-export class CardDemo extends Component {
+class CardDemo extends Component {
   static displayName = 'CardDemo';
 
   state: CardDemoState = {
@@ -41,6 +42,7 @@ export class CardDemo extends Component {
     isOpen: false,
     selectableChecked1: false,
     selectableChecked2: false,
+    singleSelectableChecked: '',
     drawerIsExpanded: false,
     selectableClickableChecked: false,
     selectableClickableSelected: false,
@@ -94,6 +96,10 @@ export class CardDemo extends Component {
     }
   };
 
+  onSingleSelectableChange = (event: React.FormEvent<HTMLInputElement>) => {
+    this.setState({ singleSelectableChecked: (event.target as HTMLElement).id });
+  };
+
   onSelectableClickableChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     this.setState({ selectableClickableChecked: checked });
   };
@@ -109,6 +115,7 @@ export class CardDemo extends Component {
     const {
       selectableChecked1,
       selectableChecked2,
+      singleSelectableChecked,
       drawerIsExpanded,
       selectableClickableChecked,
       selectableClickableSelected,
@@ -213,26 +220,36 @@ export class CardDemo extends Component {
           <CardBody>This card is selectable.</CardBody>
         </Card>
         <br></br>
-        <Card id="single-selectable-card-example-1" isSelectable>
+        <Card
+          id="single-selectable-card-example-1"
+          isSelectable
+          isSelected={singleSelectableChecked === 'single-selectable-card-input-1'}
+        >
           <CardHeader
             selectableActions={{
               selectableActionId: 'single-selectable-card-input-1',
               selectableActionAriaLabelledby: 'single-selectable-card-example-1',
               name: 'single-selectable-card-example',
-              variant: 'single'
+              variant: 'single',
+              onChange: this.onSingleSelectableChange
             }}
           >
             <CardTitle>First single selectable card</CardTitle>
           </CardHeader>
           <CardBody>This card is single selectable.</CardBody>
         </Card>
-        <Card id="single-selectable-card-example-2" isSelectable>
+        <Card
+          id="single-selectable-card-example-2"
+          isSelectable
+          isSelected={singleSelectableChecked === 'single-selectable-card-input-2'}
+        >
           <CardHeader
             selectableActions={{
               selectableActionId: 'single-selectable-card-input-2',
               selectableActionAriaLabelledby: 'single-selectable-card-example-2',
               name: 'single-selectable-card-example',
-              variant: 'single'
+              variant: 'single',
+              onChange: this.onSingleSelectableChange
             }}
           >
             <CardTitle>Second single selectable card</CardTitle>
@@ -325,3 +342,7 @@ export class CardDemo extends Component {
     );
   }
 }
+
+CardDemo.displayName = 'CardDemo';
+
+export { CardDemo };