@patternfly/react-core 5.0.0-alpha.98 → 5.0.0-prerelease.1

package/src/components/Card/CardHeader.tsx

@@ -4,8 +4,11 @@ import styles from '@patternfly/react-styles/css/components/Card/card';
 import { CardContext } from './Card';
 import { CardHeaderMain } from './CardHeaderMain';
 import { CardActions } from './CardActions';
+import { CardSelectableActions } from './CardSelectableActions';
 import { Button } from '../Button';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import { Radio } from '../Radio';
+import { Checkbox } from '../Checkbox';
 
 export interface CardHeaderActionsObject {
   /** Actions of the card header */
@@ -16,6 +19,35 @@ export interface CardHeaderActionsObject {
   className?: string;
 }
 
+export interface CardHeaderSelectableActionsObject {
+  /** Determines the type of input to be used for a selectable card. */
+  variant?: 'single' | 'multiple';
+  /** Flag indicating that the actions have no offset */
+  hasNoOffset?: boolean;
+  /** Additional classes added to the selectable actions wrapper */
+  className?: string;
+  /** ID passed to the selectable or clickable input */
+  selectableActionId: string;
+  /** Adds an accessible label to the selectable or clickable input */
+  selectableActionAriaLabel?: string;
+  /** Adds an accessible label to the selectable or clickable input by passing in a
+   * space separated list of id's.
+   */
+  selectableActionAriaLabelledby?: string;
+  /** Callback for when a selectable card input changes */
+  onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
+  /** Action to call when clickable card is clicked */
+  onClickAction?: (event: React.FormEvent<HTMLInputElement> | React.MouseEvent) => void;
+  /** Link to navigate to when clickable card is clicked */
+  to?: string;
+  /** Flag to indicate whether a clickable card's link should open in a new tab/window. */
+  isExternalLink?: boolean;
+  /** Name for the input element of a clickable or selectable card. */
+  name?: string;
+  /** Flag indicating whether the selectable card input is checked */
+  isChecked?: boolean;
+}
+
 export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the card header */
   children?: React.ReactNode;
@@ -23,6 +55,8 @@ export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Actions of the card header */
   actions?: CardHeaderActionsObject;
+  /** Selectable actions of the card header */
+  selectableActions?: CardHeaderSelectableActionsObject;
   /** ID of the card header. */
   id?: string;
   /** Callback expandable card */
@@ -37,6 +71,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   children,
   className,
   actions,
+  selectableActions,
   id,
   onExpand,
   toggleButtonProps,
@@ -44,7 +79,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   ...props
 }: CardHeaderProps) => (
   <CardContext.Consumer>
-    {({ cardId }) => {
+    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled }) => {
       const cardHeaderToggle = (
         <div className={css(styles.cardHeaderToggle)}>
           <Button
@@ -62,6 +97,47 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
         </div>
       );
 
+      if (actions?.actions && !(isClickable && isSelectable)) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `${
+            isClickable ? 'Clickable' : 'Selectable'
+          } only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
+        );
+      }
+
+      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');
+          }
+        }
+      };
+
+      const getClickableSelectableProps = () => {
+        const baseProps = {
+          className: 'pf-m-standalone',
+          inputClassName: isClickable && !isSelectable && 'pf-v5-screen-reader',
+          label: <></>,
+          'aria-label': selectableActions.selectableActionAriaLabel,
+          'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
+          id: selectableActions.selectableActionId,
+          name: selectableActions.name,
+          isDisabled: isCardDisabled
+        };
+
+        if (isClickable && !isSelectable) {
+          return { ...baseProps, onClick: handleActionClick };
+        }
+        if (isSelectable) {
+          return { ...baseProps, onChange: selectableActions.onChange, isChecked: selectableActions.isChecked };
+        }
+
+        return baseProps;
+      };
+
       return (
         <div
           className={css(styles.cardHeader, isToggleRightAligned && styles.modifiers.toggleRight, className)}
@@ -69,7 +145,23 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           {...props}
         >
           {onExpand && !isToggleRightAligned && cardHeaderToggle}
-          {actions && <CardActions className={actions?.className} hasNoOffset={actions?.hasNoOffset}> {actions.actions} </CardActions>}
+          {(actions || (selectableActions && (isClickable || isSelectable))) && (
+            <CardActions
+              className={actions?.className}
+              hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
+            >
+              {actions?.actions}
+              {selectableActions && (isClickable || isSelectable) && (
+                <CardSelectableActions className={selectableActions?.className}>
+                  {selectableActions?.variant === 'single' || (isClickable && !isSelectable) ? (
+                    <Radio {...getClickableSelectableProps()} />
+                  ) : (
+                    <Checkbox {...getClickableSelectableProps()} />
+                  )}
+                </CardSelectableActions>
+              )}
+            </CardActions>
+          )}
           {children && <CardHeaderMain>{children}</CardHeaderMain>}
           {onExpand && isToggleRightAligned && cardHeaderToggle}
         </div>

package/src/components/Card/CardSelectableActions.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Card/card';
+
+export interface CardActionsProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the card action */
+  children?: React.ReactNode;
+  /** Additional classes added to the action */
+  className?: string;
+}
+
+export const CardSelectableActions: React.FunctionComponent<CardActionsProps> = ({
+  children,
+  className,
+  ...props
+}: CardActionsProps) => (
+  <div className={css(styles.cardSelectableActions, className)} {...props}>
+    {children}
+  </div>
+);
+CardSelectableActions.displayName = 'CardSelectableActions';

package/src/components/Card/__tests__/Card.test.tsx

@@ -33,7 +33,7 @@ describe('Card', () => {
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
 
-    render(<Card component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<Card component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 
@@ -47,16 +47,18 @@ describe('Card', () => {
 
     const card = screen.getByText('selectable card');
     expect(card).toHaveClass('pf-m-selectable');
-    expect(card).toHaveAttribute('tabindex', '0');
   });
 
   test('card with isSelectable and isSelected applied ', () => {
-    render(<Card isSelectable isSelected>selected and selectable card</Card>);
+    render(
+      <Card isSelectable isSelected>
+        selected and selectable card
+      </Card>
+    );
 
     const card = screen.getByText('selected and selectable card');
     expect(card).toHaveClass('pf-m-selectable');
     expect(card).toHaveClass('pf-m-selected');
-    expect(card).toHaveAttribute('tabindex', '0');
   });
 
   test('card with only isSelected applied - not change', () => {
@@ -81,7 +83,11 @@ describe('Card', () => {
   });
 
   test('card with isSelectableRaised and isSelected applied ', () => {
-    render(<Card isSelected isSelectableRaised>raised selected card</Card>);
+    render(
+      <Card isSelected isSelectableRaised>
+        raised selected card
+      </Card>
+    );
 
     const card = screen.getByText('raised selected card');
     expect(card).toHaveClass('pf-m-selectable-raised');
@@ -154,7 +160,6 @@ describe('Card', () => {
   });
 
   test('card applies the supplied card title as the aria label of the hidden input', () => {
-
     // this component is used to mock the CardTitle's title registry behavior to keep this a pure unit test
     const MockCardTitle = ({ children }) => {
       const { registerTitleId } = React.useContext(CardContext);
@@ -179,7 +184,6 @@ describe('Card', () => {
   });
 
   test('card prioritizes selectableInputAriaLabel over card title labelling via card title', () => {
-
     // this component is used to mock the CardTitle's title registry behavior to keep this a pure unit test
     const MockCardTitle = ({ children }) => {
       const { registerTitleId } = React.useContext(CardContext);

package/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap

@@ -7,9 +7,7 @@ exports[`CardHeader actions are rendered 1`] = `
   >
     <div
       class="pf-v5-c-card__actions"
-    >
-        
-    </div>
+    />
   </div>
 </DocumentFragment>
 `;

package/src/components/Card/examples/Card.md

@@ -1,9 +1,18 @@
 ---
 id: Card
 section: components
-cssPrefix: pf-c-card
+cssPrefix: pf-v5-c-card
 propComponents:
-  ['Card', 'CardHeader', 'CardHeaderActionsObject', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent']
+  [
+    'Card',
+    'CardHeader',
+    'CardHeaderActionsObject',
+    'CardHeaderSelectableActionsObject',
+    'CardTitle',
+    'CardBody',
+    'CardFooter',
+    'CardExpandableContent'
+  ]
 ouia: true
 ---
 
@@ -31,14 +40,14 @@ Most modifiers can be used in combination with each other, except for `isCompact
 
 ```
 
-| Modifier | Description |
-| --- | --- |
-| isCompact | Modifies the card to include compact styling. Should not be used with isLarge. |
-| isFlat | Modifies the card to include flat styling. |
-| isRounded | Modifies the card to include rounded border styling. |
-| isLarge | Modifies the card to be large. Should not be used with isCompact. |
-| isFullHeight | Modifies the card so that it fills the total available height of its container. |
-| isPlain | Modifies the card to include plain styling, which removes the border and background. |
+| Modifier     | Description                                                                          |
+| ------------ | ------------------------------------------------------------------------------------ |
+| isCompact    | Modifies the card to include compact styling. Should not be used with isLarge.       |
+| isFlat       | Modifies the card to include flat styling.                                           |
+| isRounded    | Modifies the card to include rounded border styling.                                 |
+| isLarge      | Modifies the card to be large. Should not be used with isCompact.                    |
+| isFullHeight | Modifies the card so that it fills the total available height of its container.      |
+| isPlain      | Modifies the card to include plain styling, which removes the border and background. |
 
 ### Header images and actions
 
@@ -98,23 +107,57 @@ A common use case of this is to set all but one body section to `isFilled={false
 
 ```
 
-### Selectable cards
+### Selectable
 
-Selectable cards can only be selected one at a time, and are intended for use with [primary-detail layout](/demos/primary-detail).
+A 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 [clickable 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'
 
 ```
 
-### Legacy selectable cards
+### Single selectable
+
+When a group of single selectable cards are related, you should pass the same `name` property to each card's `selectableActions` property.
+
+```ts file='./CardSingleSelectable.tsx'
+
+```
+
+### Clickable
+
+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.
+
+When a card is meant to be clickable only, you must avoid rendering any other interactive content within the `<Card>`, similar to selectable cards.
+
+```ts file='./CardClickable.tsx'
+
+```
+
+### Clickable 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.
+
+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.
+
+```ts file='./CardClickableSelectable.tsx'
+
+```
+
+### Selectable cards (deprecated)
 
-The following example shows a legacy implementation of selectable cards. This example uses the `isSelectable` property instead of `isSelectableRaised`, which is the current recommendation for implementation. `isSelectable` applies selectable styling, but does not apply raised styling on hover and selection as `isSelectableRaised` does.
+The following example shows a deprecated implementation of selectable cards. This example uses the `isSelectable` property instead of `isSelectableRaised`, which is the current recommendation for implementation. `isSelectable` applies selectable styling, but does not apply raised styling on hover and selection as `isSelectableRaised` does.
 
-```ts file='./CardLegacySelectable.tsx'
+A `tabIndex={0}` is also manually passed to allow the card to be focused and clicked via keyboard.
+
+```ts file='./CardDeprecatedSelectable.tsx'
 
 ```
 
-### Selectable card accessibility features
+### Selectable card accessibility features (deprecated)
+
+Note: the following example uses deprecated properties. We recommend using the new `selectableActions` property for the `CardHeader` instead.
 
 The following cards demonstrate how the `hasSelectableInput` and `onSelectableInputChange` properties improve accessibility for selectable cards.
 
@@ -128,7 +171,7 @@ The second card does not set `hasSelectableInput` to true, so neither the input
 
 We recommend navigating this example using a screen reader to best understand both cards.
 
-```ts file='./CardSelectableA11yHighlight.tsx'
+```ts file='./CardDeprecatedSelectableA11yHighlight.tsx'
 
 ```
 

package/src/components/Card/examples/CardClickable.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
+
+export const CardClickable: React.FunctionComponent = () => {
+  const id1 = 'clickable-card-input-1';
+  const id2 = 'clickable-card-input-2';
+  const id3 = 'clickable-card-input-3';
+
+  return (
+    <React.Fragment>
+      <Card id="clickable-card-example-1" isClickable>
+        <CardHeader
+          selectableActions={{
+            // eslint-disable-next-line no-console
+            onClickAction: () => console.log(`${id1} clicked`),
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'clickable-card-example-1',
+            name: 'clickable-card-example'
+          }}
+        >
+          <CardTitle>First card</CardTitle>
+        </CardHeader>
+        <CardBody>This card performs an action on click.</CardBody>
+      </Card>
+      <Card id="clickable-card-example-2" isClickable>
+        <CardHeader
+          selectableActions={{
+            to: '#',
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'clickable-card-example-2',
+            name: 'clickable-card-example'
+          }}
+        >
+          <CardTitle>Second card</CardTitle>
+        </CardHeader>
+        <CardBody>This card can navigate to a link on click.</CardBody>
+      </Card>
+      <Card id="clickable-card-example-3" isClickable isDisabled>
+        <CardHeader
+          selectableActions={{
+            // eslint-disable-next-line no-console
+            onClickAction: () => console.log(`${id3} clicked`),
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'clickable-card-example-3',
+            name: 'clickable-card-example'
+          }}
+        >
+          <CardTitle>Third card</CardTitle>
+        </CardHeader>
+        <CardBody>This card is clickable but disabled.</CardBody>
+      </Card>
+    </React.Fragment>
+  );
+};

package/src/components/Card/examples/CardClickableSelectable.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Card, CardHeader, CardTitle, CardBody, Button } from '@patternfly/react-core';
+
+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 id1 = 'clickable-selectable-card-input-1';
+  const id2 = 'clickable-selectable-card-input-2';
+  const id3 = 'clickable-selectable-card-input-3';
+
+  const onClick = () => {
+    setIsSelected1((prevState) => !prevState);
+  };
+
+  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 (
+    <React.Fragment>
+      <Card id="clickable-selectable-card-example-1" isClickable isSelectable isSelected={isSelected1}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'clickable-selectable-card-example-1',
+            name: id1,
+            isChecked: isChecked1,
+            onChange
+          }}
+        >
+          <CardTitle>
+            <Button variant="link" isInline onClick={onClick}>
+              First card
+            </Button>
+          </CardTitle>
+        </CardHeader>
+        <CardBody>This card performs an action upon clicking the card title and is selectable.</CardBody>
+      </Card>
+      <Card id="clickable-selectable-card-example-2" isClickable isSelectable>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'clickable-selectable-card-example-2',
+            name: id2,
+            isChecked: isChecked2,
+            onChange
+          }}
+        >
+          <CardTitle>Second Card</CardTitle>
+        </CardHeader>
+        <CardBody>
+          This card is selectable and has a link in the card body that navigates to{' '}
+          <Button variant="link" isInline component="a" href="#">
+            Patternfly
+          </Button>
+          .
+        </CardBody>
+      </Card>
+      <Card id="clickable-selectable-card-example-3" isClickable isSelectable isDisabled>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'clickable-selectable-card-example-3',
+            name: id3,
+            isChecked: isChecked3,
+            onChange
+          }}
+        >
+          <CardTitle>
+            <Button isDisabled variant="link" isInline component="a" href="https://www.patternfly.org/">
+              Third card
+            </Button>
+          </CardTitle>
+        </CardHeader>
+        <CardBody>This card is clickable and selectable, but disabled.</CardBody>
+      </Card>
+    </React.Fragment>
+  );
+};

package/src/components/Card/examples/{CardLegacySelectable.tsx → CardDeprecatedSelectable.tsx}

@@ -102,6 +102,7 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
         isSelectable
         isSelected={selected === 'legacy-first-card'}
         hasSelectableInput
+        tabIndex={0}
       >
         <CardHeader actions={{ actions: headerActions }} />
         <CardTitle>First legacy selectable card</CardTitle>
@@ -116,6 +117,7 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
         isSelectable
         isSelected={selected === 'legacy-second-card'}
         hasSelectableInput
+        tabIndex={0}
       >
         <CardTitle>Second legacy selectable card</CardTitle>
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>

package/src/components/Card/examples/{CardSelectableA11yHighlight.tsx → CardDeprecatedSelectableA11yHighlight.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 
-export const CardSelectableA11yHighlight: React.FunctionComponent = () => {
+export const CardLegacySelectableA11yHighlight: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('');
 
   const onKeyDown = (event: React.KeyboardEvent) => {