@patternfly/react-core 6.0.0-alpha.5 → 6.0.0-alpha.51

package/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,8 +81,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   ...props
 }: CardHeaderProps) => (
   <CardContext.Consumer>
-    {/* TODO: Remove hasSelectableInput when deprecated props are removed */}
-    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled, hasSelectableInput }) => {
+    {({ cardId, isClickable, isSelectable, isSelected, isClicked, isDisabled: isCardDisabled }) => {
       const cardHeaderToggle = (
         <div className={css(styles.cardHeaderToggle)}>
           <Button
@@ -99,10 +100,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
       );
 
       const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
-      // TODO: Remove following variable and update if block when deprecated prop is removed
-      // We don't want to throw a warning for the deprecated card
-      const isDeprecatedSelectableCard = hasSelectableInput;
-      if (actions?.actions && isClickableOrSelectableOnly && !isDeprecatedSelectableCard) {
+      if (actions?.actions && isClickableOrSelectableOnly) {
         // eslint-disable-next-line no-console
         console.warn(
           `${
@@ -112,19 +110,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-v5-screen-reader',
+          inputClassName: isClickable && !isSelectable && 'pf-v6-screen-reader',
           label: <></>,
           'aria-label': selectableActions.selectableActionAriaLabel,
           'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
@@ -132,12 +128,17 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           name: selectableActions.name,
           isDisabled: isCardDisabled
         };
+        const isSelectableInputChecked = selectableActions.isChecked ?? isSelected;
 
         if (isClickable && !isSelectable) {
-          return { ...baseProps, onClick: handleActionClick };
+          return {
+            ...baseProps,
+            onClick: handleActionClick,
+            isChecked: isClicked
+          };
         }
         if (isSelectable) {
-          return { ...baseProps, onChange: selectableActions.onChange, isChecked: selectableActions.isChecked };
+          return { ...baseProps, onChange: selectableActions.onChange, isChecked: isSelectableInputChecked };
         }
 
         return baseProps;

package/src/components/Card/CardTitle.tsx

@@ -18,16 +18,10 @@ export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
   component = 'div',
   ...props
 }: CardTitleProps) => {
-  const { cardId, registerTitleId } = React.useContext(CardContext);
+  const { cardId } = React.useContext(CardContext);
   const Component = component as any;
   const titleId = cardId ? `${cardId}-title` : '';
 
-  React.useEffect(() => {
-    registerTitleId(titleId);
-
-    return () => registerTitleId('');
-  }, [registerTitleId, titleId]);
-
   return (
     <div className={css(styles.cardTitle)}>
       <Component className={css(styles.cardTitleText, className)} id={titleId || undefined} {...props}>

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-import { Card, CardContext } from '../Card';
+import { Card } from '../Card';
 
 describe('Card', () => {
   test('renders with PatternFly Core styles', () => {
@@ -69,47 +69,11 @@ describe('Card', () => {
     expect(card.getAttribute('tabindex')).toBeNull();
   });
 
-  test('card with isDisabledRaised applied', () => {
-    render(<Card isDisabledRaised>disabled raised card</Card>);
-    expect(screen.getByText('disabled raised card')).toHaveClass('pf-m-non-selectable-raised');
-  });
-
-  test('card with isSelectableRaised applied - not change', () => {
-    render(<Card isSelectableRaised>raised selectable card</Card>);
-
-    const card = screen.getByText('raised selectable card');
-    expect(card).toHaveClass('pf-m-selectable-raised');
-    expect(card).toHaveAttribute('tabindex', '0');
-  });
-
-  test('card with isSelectableRaised and isSelected applied ', () => {
-    render(
-      <Card isSelected isSelectableRaised>
-        raised selected card
-      </Card>
-    );
-
-    const card = screen.getByText('raised selected card');
-    expect(card).toHaveClass('pf-m-selectable-raised');
-    expect(card).toHaveClass('pf-m-selected-raised');
-    expect(card).toHaveAttribute('tabindex', '0');
-  });
-
-  test('card with isFlat applied', () => {
-    render(<Card isFlat>flat card</Card>);
-    expect(screen.getByText('flat card')).toHaveClass('pf-m-flat');
-  });
-
   test('card with isExpanded applied', () => {
     render(<Card isExpanded>expanded card</Card>);
     expect(screen.getByText('expanded card')).toHaveClass('pf-m-expanded');
   });
 
-  test('card with isRounded applied', () => {
-    render(<Card isRounded>rounded card</Card>);
-    expect(screen.getByText('rounded card')).toHaveClass('pf-m-rounded');
-  });
-
   test('card with isLarge applied', () => {
     render(<Card isLarge>large card</Card>);
     expect(screen.getByText('large card')).toHaveClass('pf-m-display-lg');
@@ -123,87 +87,10 @@ describe('Card', () => {
     expect(consoleWarnMock).toHaveBeenCalled();
   });
 
-  test('card renders with a hidden input to improve a11y when hasSelectableInput is passed', () => {
-    render(<Card isSelectable hasSelectableInput />);
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
-
-    expect(selectableInput).toBeInTheDocument();
-  });
-
-  test('card does not render the hidden input when hasSelectableInput is not passed', () => {
-    render(<Card isSelectable />);
-
-    const selectableInput = screen.queryByRole('checkbox', { hidden: true });
-
-    expect(selectableInput).not.toBeInTheDocument();
-  });
-
-  test('card warns when hasSelectableInput is passed without selectableInputAriaLabel or a card title', () => {
-    const consoleWarnMock = jest.fn();
-    global.console = { warn: consoleWarnMock } as any;
-
-    render(<Card isSelectable hasSelectableInput />);
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
-
-    expect(consoleWarnMock).toBeCalled();
-    expect(selectableInput).toHaveAccessibleName('');
-  });
-
-  test('card applies selectableInputAriaLabel to the hidden input', () => {
-    render(<Card isSelectable hasSelectableInput selectableInputAriaLabel="Input label test" />);
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
-
-    expect(selectableInput).toHaveAccessibleName('Input label test');
-  });
-
-  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);
-      const id = 'card-title-id';
-
-      React.useEffect(() => {
-        registerTitleId(id);
-      });
-
-      return <div id={id}>{children}</div>;
-    };
-
-    render(
-      <Card id="card" isSelectable hasSelectableInput>
-        <MockCardTitle>Card title from title component</MockCardTitle>
-      </Card>
-    );
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
-
-    expect(selectableInput).toHaveAccessibleName('Card title from title component');
-  });
-
-  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);
-      const id = 'card-title-id';
-
-      React.useEffect(() => {
-        registerTitleId(id);
-      });
-
-      return <div id={id}>{children}</div>;
-    };
-
-    render(
-      <Card id="card" isSelectable hasSelectableInput selectableInputAriaLabel="Input label test">
-        <MockCardTitle>Card title from title component</MockCardTitle>
-      </Card>
-    );
-
-    const selectableInput = screen.getByRole('checkbox', { hidden: true });
+  test('card with variant set to secondary ', () => {
+    render(<Card variant="secondary">secondary card</Card>);
 
-    expect(selectableInput).toHaveAccessibleName('Input label test');
+    const card = screen.getByText('secondary card');
+    expect(card).toHaveClass('pf-m-secondary');
   });
 });

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

@@ -19,10 +19,10 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-v5-c-card__selectable-actions', () => {
+test('Renders with class name pf-v6-c-card__selectable-actions', () => {
   render(<CardSelectableActions>Test</CardSelectableActions>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-card__selectable-actions');
+  expect(screen.getByText('Test')).toHaveClass('pf-v6-c-card__selectable-actions');
 });
 
 test('Renders with custom class names provided via prop', () => {

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardTitle } from '../CardTitle';
-import { CardContext } from '../Card';
 
 describe('CardTitle', () => {
   test('renders with PatternFly Core styles', () => {
@@ -20,16 +19,4 @@ describe('CardTitle', () => {
     render(<CardTitle data-testid={testId} />);
     expect(screen.getByTestId(testId)).toBeInTheDocument();
   });
-
-  test('calls the registerTitleId function provided by the CardContext with the generated title id', () => {
-    const mockRegisterTitleId = jest.fn();
-
-    render(
-      <CardContext.Provider value={{ cardId: 'card', registerTitleId: mockRegisterTitleId }}>
-        <CardTitle>text</CardTitle>
-      </CardContext.Provider>
-    );
-
-    expect(mockRegisterTitleId).toHaveBeenCalledWith('card-title');
-  });
 });

package/src/components/Card/__tests__/Generated/__snapshots__/CardActions.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CardActions should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-card__actions ''"
+    class="pf-v6-c-card__actions ''"
   >
     ReactNode
   </div>

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

@@ -3,7 +3,7 @@
 exports[`Card card with isCompact applied  1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-card pf-m-compact"
+    class="pf-v6-c-card pf-m-compact"
     data-ouia-component-id="OUIA-Generated-Card-6"
     data-ouia-component-type="PF5/Card"
     data-ouia-safe="true"
@@ -15,7 +15,7 @@ exports[`Card card with isCompact applied  1`] = `
 exports[`Card renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-card"
+    class="pf-v6-c-card"
     data-ouia-component-id="OUIA-Generated-Card-1"
     data-ouia-component-type="PF5/Card"
     data-ouia-safe="true"

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

@@ -3,7 +3,7 @@
 exports[`CardBody body with no-fill applied 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-card__body pf-m-no-fill"
+    class="pf-v6-c-card__body pf-m-no-fill"
   />
 </DocumentFragment>
 `;
@@ -11,7 +11,7 @@ exports[`CardBody body with no-fill applied 1`] = `
 exports[`CardBody renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-card__body"
+    class="pf-v6-c-card__body"
   />
 </DocumentFragment>
 `;

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

@@ -3,7 +3,7 @@
 exports[`renders successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-card__expandable-content"
+    class="pf-v6-c-card__expandable-content"
   />
 </DocumentFragment>
 `;

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

@@ -3,7 +3,7 @@
 exports[`CardFooter renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-card__footer"
+    class="pf-v6-c-card__footer"
   />
 </DocumentFragment>
 `;

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

@@ -3,10 +3,10 @@
 exports[`CardHeader actions are rendered 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-card__header"
+    class="pf-v6-c-card__header"
   >
     <div
-      class="pf-v5-c-card__actions"
+      class="pf-v6-c-card__actions"
     />
   </div>
 </DocumentFragment>
@@ -15,25 +15,25 @@ exports[`CardHeader actions are rendered 1`] = `
 exports[`CardHeader onExpand adds the toggle button 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-card__header"
+    class="pf-v6-c-card__header"
   >
     <div
-      class="pf-v5-c-card__header-toggle"
+      class="pf-v6-c-card__header-toggle"
     >
       <button
         aria-disabled="false"
-        class="pf-v5-c-button pf-m-plain"
+        class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         type="button"
       >
         <span
-          class="pf-v5-c-card__header-toggle-icon"
+          class="pf-v6-c-card__header-toggle-icon"
         >
           <svg
             aria-hidden="true"
-            class="pf-v5-svg"
+            class="pf-v6-svg"
             fill="currentColor"
             height="1em"
             role="img"

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

@@ -3,7 +3,7 @@
 exports[`CardHeaderMain renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-card__header-main"
+    class="pf-v6-c-card__header-main"
   >
     text
   </div>

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-card__selectable-actions"
+    class="pf-v6-c-card__selectable-actions"
   >
     Test
   </div>

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

@@ -3,10 +3,10 @@
 exports[`CardTitle renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-card__title"
+    class="pf-v6-c-card__title"
   >
     <div
-      class="pf-v5-c-card__title-text"
+      class="pf-v6-c-card__title-text"
     >
       text
     </div>

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

@@ -16,8 +16,8 @@ propComponents:
 ouia: true
 ---
 
-import pfLogo from '../../assets/pfLogo.svg';
-import pfLogoSmall from '../../assets/pf-c-brand--logo-on-sm.svg';
+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';
 
 ## Examples
@@ -30,6 +30,14 @@ Basic cards typically have a `<CardTitle>`, `<CardBody>` and `<CardFooter>`. You
 
 ```
 
+### Secondary cards
+
+You can apply secondary background color styling to a card by setting the `variant` property to `secondary`.
+
+```ts file='./CardSecondary.tsx'
+
+```
+
 ### Modifiers
 
 You can further modify the styling of the card's content by using the properties outlined below. In this example, you can enable each modifier by selecting its respective checkbox.
@@ -43,8 +51,6 @@ 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. |
@@ -109,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 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, actionable content.
 
 ```ts file='./CardSelectable.tsx'
 
@@ -119,62 +125,34 @@ 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
+
+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`.
 
-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.
+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 clickable only, you must avoid rendering any other interactive content within the `<Card>`, similar to selectable cards.
+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'
 
 ```
 
-### Selectable cards (deprecated)
-
-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.
-
-A `tabIndex={0}` is also manually passed to allow the card to be focused and clicked via keyboard.
-
-```ts file='./CardDeprecatedSelectable.tsx' isDeprecated
-
-```
-
-### 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.
-
-The first card sets `hasSelectableInput` to true, which renders a checkbox input that is only visible to, and navigable by, screen readers. This input communicates to assistive technology users that a card is selectable, and if so, also communicates the current selection state.
-
-By default, this input will have an aria-label that corresponds to the `<CardTitle>`. If this isn't defined, then you must pass a custom aria-label using the `selectableInputAriaLabel` property.
-
-The first card passes an onChange callback to `onSelectableInputChange` to enable the selection/deselection of the associated card via checkbox input.
-
-The second card does not set `hasSelectableInput` to true, so neither the input nor the selection state is communicated to users of assistive technologies.
-
-We recommend navigating this example using a screen reader to best understand both cards.
-
-```ts file='./CardDeprecatedSelectableA11yHighlight.tsx' isDeprecated
-
-```
-
 ### Expandable cards
 
 A card can be made expandable using the `isExpanded` property. In the collapsed state, only the card header is shown, and the user can click the caret to view the rest of the card content.
@@ -192,3 +170,11 @@ An image can be placed in the card header to show users an icon beside the expan
 ```ts file='./CardExpandableWithIcon.tsx'
 
 ```
+
+### Card with dividers
+
+Dividers can be placed between sections of the card.
+
+```ts file='./CardWithDividers.tsx'
+
+```