@patternfly/react-core 6.0.0-alpha.47 → 6.0.0-alpha.49

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.46","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.48","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.46","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.48","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.46","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.48","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.47",
+  "version": "6.0.0-alpha.49",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.17",
-    "@patternfly/react-styles": "^6.0.0-alpha.17",
-    "@patternfly/react-tokens": "^6.0.0-alpha.17",
+    "@patternfly/react-icons": "^6.0.0-alpha.18",
+    "@patternfly/react-styles": "^6.0.0-alpha.18",
+    "@patternfly/react-tokens": "^6.0.0-alpha.18",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.100",
+    "@patternfly/patternfly": "6.0.0-alpha.107",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -74,5 +74,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "eb6848fd5f74a7f4fe20b7d2bb449ece2eeff354"
+  "gitHead": "7ef53d89f6130ae4c15364059920a230c3d8d8d3"
 }

package/src/components/Card/Card.tsx

@@ -14,13 +14,19 @@ 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 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 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
+   * 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 +49,8 @@ interface CardContextProps {
   isExpanded: boolean;
   isClickable: boolean;
   isSelectable: boolean;
+  isSelected: boolean;
+  isClicked: boolean;
   isDisabled: boolean;
 }
 
@@ -51,6 +59,8 @@ export const CardContext = React.createContext<Partial<CardContextProps>>({
   isExpanded: false,
   isClickable: false,
   isSelectable: false,
+  isSelected: false,
+  isClicked: false,
   isDisabled: false
 });
 
@@ -64,6 +74,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
   isClickable = false,
   isDisabled = false,
   isSelected = false,
+  isClicked = false,
   isExpanded = false,
   isLarge = false,
   isFullHeight = false,
@@ -85,7 +96,11 @@ export const Card: React.FunctionComponent<CardProps> = ({
 
   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 +108,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 +121,8 @@ export const Card: React.FunctionComponent<CardProps> = ({
         isExpanded,
         isClickable,
         isSelectable,
+        isSelected,
+        isClicked,
         isDisabled
       }}
     >

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,7 +81,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   ...props
 }: CardHeaderProps) => (
   <CardContext.Consumer>
-    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled }) => {
+    {({ cardId, isClickable, isSelectable, isSelected, isClicked, isDisabled: isCardDisabled }) => {
       const cardHeaderToggle = (
         <div className={css(styles.cardHeaderToggle)}>
           <Button
@@ -108,12 +110,10 @@ 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');
         }
       };
 
@@ -128,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/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 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'
 
@@ -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. To open a link in a new tab or window, pass the `isExternalLink` property to `selectableActions`.
 
-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](/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.
 
 ```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'

package/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
               }}
             >

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

@@ -34,22 +34,25 @@ export const SelectableCard: React.FunctionComponent = () => {
   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"
       />
       <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
               }}
             >
@@ -57,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
               }}
             >
@@ -71,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
               }}
             >

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

@@ -2,45 +2,53 @@ 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>
+      <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'
+            variant: 'single',
+            onChange
           }}
         >
           <CardTitle>First 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={isChecked === id2}>
         <CardHeader
           selectableActions={{
             selectableActionId: id2,
             selectableActionAriaLabelledby: 'single-selectable-card-example-2',
             name: 'single-selectable-card-example',
-            variant: 'single'
+            variant: 'single',
+            onChange
           }}
         >
           <CardTitle>Second card</CardTitle>
         </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'
+            variant: 'single',
+            onChange
           }}
         >
           <CardTitle>Third card</CardTitle>

package/src/components/Drawer/DrawerContent.tsx

@@ -2,7 +2,13 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerMain } from './DrawerMain';
-import { DrawerColorVariant, DrawerContext } from './Drawer';
+import { DrawerContext } from './Drawer';
+
+export enum DrawerContentColorVariant {
+  default = 'default',
+  primary = 'primary',
+  secondary = 'secondary'
+}
 
 export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Drawer. */
@@ -12,14 +18,14 @@ export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in the drawer panel. */
   panelContent: React.ReactNode;
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
+  colorVariant?: DrawerContentColorVariant | 'default' | 'primary' | 'secondary';
 }
 
 export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
   className,
   children,
   panelContent,
-  colorVariant = DrawerColorVariant.default,
+  colorVariant = DrawerContentColorVariant.default,
   ...props
 }: DrawerContentProps) => {
   const { drawerContentRef } = React.useContext(DrawerContext);
@@ -29,8 +35,8 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
       <div
         className={css(
           styles.drawerContent,
-          colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
-          colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
+          colorVariant === DrawerContentColorVariant.primary && styles.modifiers.primary,
+          colorVariant === DrawerContentColorVariant.secondary && styles.modifiers.secondary,
           className
         )}
         ref={drawerContentRef}

package/src/components/Drawer/examples/DrawerSecondaryBackground.tsx

@@ -10,7 +10,8 @@ import {
   DrawerCloseButton,
   DrawerSection,
   Button,
-  DrawerColorVariant
+  DrawerColorVariant,
+  DrawerContentColorVariant
 } from '@patternfly/react-core';
 
 export const DrawerSecondaryBackground: React.FunctionComponent = () => {
@@ -96,7 +97,7 @@ export const DrawerSecondaryBackground: React.FunctionComponent = () => {
           drawer-section
         </DrawerSection>
         <DrawerContent
-          colorVariant={contentSecondary ? DrawerColorVariant.secondary : DrawerColorVariant.default}
+          colorVariant={contentSecondary ? DrawerContentColorVariant.secondary : DrawerContentColorVariant.default}
           panelContent={panelContent}
         >
           <DrawerContentBody>{drawerContent}</DrawerContentBody>

package/src/components/Page/Page.tsx

@@ -295,19 +295,21 @@ class Page extends React.Component<PageProps, PageState> {
     const Component: keyof JSX.IntrinsicElements = mainComponent;
 
     const main = (
-      <Component
-        ref={this.mainRef}
-        role={role}
-        id={mainContainerId}
-        className={css(styles.pageMain)}
-        tabIndex={mainTabIndex}
-        aria-label={mainAriaLabel}
-      >
-        {group}
-        {!isHorizontalSubnavGrouped && nav}
-        {!isBreadcrumbGrouped && crumb}
-        {children}
-      </Component>
+      <div className={css(styles.pageMainContainer)}>
+        <Component
+          ref={this.mainRef}
+          role={role}
+          id={mainContainerId}
+          className={css(styles.pageMain)}
+          tabIndex={mainTabIndex}
+          aria-label={mainAriaLabel}
+        >
+          {group}
+          {!isHorizontalSubnavGrouped && nav}
+          {!isBreadcrumbGrouped && crumb}
+          {children}
+        </Component>
+      </div>
     );
 
     const panelContent = <DrawerPanelContent>{notificationDrawer}</DrawerPanelContent>;