@patternfly/react-core 4.234.2 → 4.235.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.234.2",
+  "version": "4.235.0",
   "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",
@@ -50,16 +50,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.85.2",
-    "@patternfly/react-styles": "^4.84.2",
-    "@patternfly/react-tokens": "^4.86.2",
+    "@patternfly/react-icons": "^4.86.0",
+    "@patternfly/react-styles": "^4.85.0",
+    "@patternfly/react-tokens": "^4.87.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.210.1",
+    "@patternfly/patternfly": "4.210.2",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
@@ -76,5 +76,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "b0e9f5f00090e529aa29d5476b883807fc7a3bb4"
+  "gitHead": "0b52df617c2521bea942def9a0b514c16b4859b0"
 }

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

@@ -9,101 +9,130 @@ ouia: true
 import pfLogo from './pfLogo.svg';
 import pfLogoSmall from './pf-logo-small.svg';
 
-## Examples
 
-### Basic
+## Examples 
+
+### Basic cards
+
+Basic cards typically have a `<CardTitle>`, `<CardBody>` and `<CardFooter>`. You may omit these components as needed, but it is recommended to at least include a `<CardBody>` to provide details about the card item.
 
 ```ts file='./CardBasic.tsx'
 ```
 
-### With modifiers
+### 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.
+
+Most modifiers can be used in combination with each other, except for `isCompact` and `isLarge`, since they are contradictory.
 
 ```ts file='./CardWithModifiers.tsx'
 ```
 
-### With image and actions
+| 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. | 
 
-```ts file='./CardWithImageAndActions.tsx'
-```
 
-### Header in card head
+### Header images and actions
 
-```ts file='./CardHeaderInCardHead.tsx'
-```
+You can include header images within `<CardHeaderMain>` and header actions within `<CardActions>`. The following example includes an image using the [Brand](/components/brand) component, and also includes a kebab dropdown and a checkbox in `<CardActions>`.
 
-### Only actions in card head (no header/footer)
+`<CardActions>` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with `<CardActions>`. 
 
-```ts file='./CardOnlyActionsInCardHead.tsx'
-```
+You may use `hasNoOffset` to remove this negative margin, which better aligns `<CardActions>` in implementations that use large card titles or tall header images, for example. 
 
-### Only image in card head
+Select the "actions hasNoOffset" checkbox in the example below to illustrate this behavior.
 
-```ts file='./CardOnlyImageInCardHead.tsx'
+```ts file='./CardWithImageAndActions.tsx'
 ```
 
-### With no footer
+### Title inline with images and actions
 
-```ts file='./CardWithNoFooter.tsx'
+Moving `<CardTitle>` within the `<CardHeader>` will style it inline with any images or actions.
+
+```ts file='./CardHeaderInCardHead.tsx'
 ```
 
-### With no header
+### Card header without title
 
-```ts file='./CardWithNoHeader.tsx'
+`<CardActions>` can be placed in the card header even without a `<CardTitle>`.
+
+Images can also be placed in the card header within `<CardHeaderMain>` without a `<CardTitle>`.
+
+```ts file='./CardOnlyActionsInCardHead.tsx'
 ```
 
-### With only a body section
+### With HTML heading element
+
+You may use the `component` property to place the card's title within an HTML heading element.
 
-```ts file='./CardWithOnlyBodySection.tsx'
+```ts file='./CardWithHeadingElement.tsx'
 ```
 
 ### With multiple body sections
 
+You may use multiple body sections to visually separate blocks of content.
+
 ```ts file='./CardWithMultipleBodySections.tsx'
 ```
 
-### With only a body section that fills
+### With a primary body section that fills
+
+`<CardBody>` sections will fill the available height of the card when `isFilled` equals `{true}`, which is the default value. Set `isFilled` to `{false}` to disable this behavior for one or more body sections. The remaining available height of the card will be split between any `<CardBody>` section that does not set `isFilled` to `{false}`.
+
+A common use case of this is to set all but one body section to `isFilled={false}` so that a primary body section fills the available space of the card as seen in the example below. This example has 3 `<CardBody>` sections, two of which set `isFilled` to `{false}`. The third `<CardBody>` fills the remaining height of the card. 
 
 ```ts file='./CardWithBodySectionFills.tsx'
 ```
 
-### Selectable
+### Selectable cards
+
+Selectable cards can only be selected one at a time, and are intended for use with [primary-detail layout](/demos/primary-detail).
 
 ```ts file='./CardSelectable.tsx'
 ```
 
-### Selectable accessibility highlight
+### Legacy selectable cards
+
+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.
+
+```ts file='./CardLegacySelectable.tsx'
+```
 
-This example demonstrates how the `hasSelectableInput` and `onSelectableInputChange` props improve accessibility for selectable cards.
+### Selectable card accessibility features
 
-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, it communicates the current selection state as well.
+The following cards demonstrate how the `hasSelectableInput` and `onSelectableInputChange` properties improve accessibility for selectable cards.
 
-By default this input will have an aria-label that corresponds to the title given to the card if using the card title component. If you don't use the card title component in your selectable card, you must pass a custom aria-label for this input using the `selectableInputAriaLabel` prop.
+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.
 
-The first card also (by passing an onchange callback to `onSelectableInputChange`) enables the selection/deselection of the associated card by checking/unchecking the checkbox input.
+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 second card does not set `hasSelectableInput` to true, so the input is not rendered. It does not communicate to screen reader users that it is selectable or if it is currently selected.
+The first card passes an onChange callback to `onSelectableInputChange` to enable the selection/deselection of the associated card via checkbox input.
 
-To best understand this example it is encouraged that you navigate both of these cards using a screen reader.
+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='./CardSelectableA11yHighlight.tsx'
 ```
 
-### With heading element
+### Expandable cards
 
-```ts file='./CardWithHeadingElement.tsx'
-```
+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. 
 
-### Expandable
+Place any content that you want to be hidden within the `<CardExpandableContent>` component.
 
 ```ts file='./CardExpandable.tsx'
 ```
 
 ### Expandable with icon
 
-```ts file='./CardExpandableWithIcon.tsx'
-```
-
-### Legacy selectable
+An image can be placed in the card header to show users an icon beside the expansion caret.
 
-```ts file='./CardLegacySelectable.tsx'
+```ts file='./CardExpandableWithIcon.tsx'
 ```

package/src/components/LoginPage/LoginFooterItem.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
 export interface LoginFooterItemProps extends React.HTMLProps<HTMLAnchorElement> {
-  /** Content rendered inside the footer Link Item */
+  /** Content rendered inside the footer link item */
   children?: React.ReactNode;
-  /** Additional classes added to the Footer Link Item  */
+  /** Additional classes added to the footer link item  */
   className?: string;
-  /** The URL of the Footer Link Item */
+  /** The URL of the footer link item */
   href?: string;
   /** Specifies where to open the linked document */
   target?: string;

package/src/components/LoginPage/LoginForm.tsx

@@ -11,29 +11,29 @@ import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 export interface LoginFormProps extends React.HTMLProps<HTMLFormElement> {
   /** Flag to indicate if the first dropdown item should not gain initial focus */
   noAutoFocus?: boolean;
-  /** Additional classes added to the Login Main Body's Form */
+  /** Additional classes added to the login main body's form */
   className?: string;
-  /** Flag indicating the Helper Text is visible * */
+  /** Flag indicating the helper text is visible * */
   showHelperText?: boolean;
-  /** Content displayed in the Helper Text component * */
+  /** Content displayed in the helper text component * */
   helperText?: React.ReactNode;
-  /** Icon displayed to the left in the Helper Text */
+  /** Icon displayed to the left in the helper text */
   helperTextIcon?: React.ReactNode;
-  /** Label for the Username Input Field */
+  /** Label for the username input field */
   usernameLabel?: string;
-  /** Value for the Username */
+  /** Value for the username */
   usernameValue?: string;
-  /** Function that handles the onChange event for the Username */
+  /** Function that handles the onChange event for the username */
   onChangeUsername?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  /** Flag indicating if the Username is valid */
+  /** Flag indicating if the username is valid */
   isValidUsername?: boolean;
-  /** Label for the Password Input Field */
+  /** Label for the password input field */
   passwordLabel?: string;
-  /** Value for the Password */
+  /** Value for the password */
   passwordValue?: string;
-  /** Function that handles the onChange event for the Password */
+  /** Function that handles the onChange event for the password */
   onChangePassword?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  /** Flag indicating if the Password is valid */
+  /** Flag indicating if the password is valid */
   isValidPassword?: boolean;
   /** Flag indicating if the user can toggle hiding the password */
   isShowPasswordEnabled?: boolean;
@@ -41,17 +41,17 @@ export interface LoginFormProps extends React.HTMLProps<HTMLFormElement> {
   showPasswordAriaLabel?: string;
   /** Accessible label for the hide password button */
   hidePasswordAriaLabel?: string;
-  /** Label for the Log in Button Input */
+  /** Label for the log in button input */
   loginButtonLabel?: string;
-  /** Flag indicating if the Login Button is disabled */
+  /** Flag indicating if the login button is disabled */
   isLoginButtonDisabled?: boolean;
-  /** Function that is called when the Login button is clicked */
+  /** Function that is called when the login button is clicked */
   onLoginButtonClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  /** Label for the Remember Me Checkbox that indicates the user should be kept logged in.  If the label is not provided, the checkbox will not show. */
+  /** Label for the remember me checkbox that indicates the user should be kept logged in.  If the label is not provided, the checkbox will not show. */
   rememberMeLabel?: string;
-  /** Flag indicating if the remember me Checkbox is checked. */
+  /** Flag indicating if the remember me checkbox is checked. */
   isRememberMeChecked?: boolean;
-  /** Function that handles the onChange event for the Remember Me Checkbox */
+  /** Function that handles the onChange event for the remember me checkbox */
   onChangeRememberMe?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
 }
 

package/src/components/LoginPage/LoginHeader.tsx

@@ -7,7 +7,7 @@ export interface LoginHeaderProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the login header */
   className?: string;
-  /** Header Brand component (e.g. <LoginHeader />) */
+  /** Header brand component (e.g. <LoginHeader />) */
   headerBrand?: React.ReactNode;
 }
 

package/src/components/LoginPage/LoginMainBody.tsx

@@ -3,9 +3,9 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Login/login';
 
 export interface LoginMainBodyProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the Login Main Body */
+  /** Content rendered inside the login main body */
   children?: React.ReactNode;
-  /** Additional classes added to the Login Main Body */
+  /** Additional classes added to the login main body */
   className?: string;
 }
 

package/src/components/LoginPage/LoginMainFooter.tsx

@@ -3,15 +3,15 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Login/login';
 
 export interface LoginMainFooterProps extends React.HTMLProps<HTMLDivElement> {
-  /** Additional classes added to the Login Main Footer */
+  /** Additional classes added to the login main footer */
   className?: string;
-  /** Content rendered inside the Login Main Footer */
+  /** Content rendered inside the login main footer */
   children?: React.ReactNode;
-  /** Content rendered inside the Login Main Footer as Social Media Links* */
+  /** Content rendered inside the login main footer as social media links* */
   socialMediaLoginContent?: React.ReactNode;
-  /** Content rendered inside of Login Main Footer Band to display a sign up for account message */
+  /** Content rendered inside of login main footer band to display a sign up for account message */
   signUpForAccountMessage?: React.ReactNode;
-  /** Content rendered inside of Login Main Footer Band do display a forgot credentials link* */
+  /** Content rendered inside of login main footer band do display a forgot credentials link* */
   forgotCredentials?: React.ReactNode;
 }
 

package/src/components/LoginPage/LoginMainFooterBandItem.tsx

@@ -3,9 +3,9 @@ import styles from '@patternfly/react-styles/css/components/Login/login';
 import { css } from '@patternfly/react-styles';
 
 export interface LoginMainFooterBandItemProps extends React.HTMLProps<HTMLParagraphElement> {
-  /** Content rendered inside the footer Link Item */
+  /** Content rendered inside the footer link item */
   children?: React.ReactNode;
-  /** Additional classes added to the Footer Link Item  */
+  /** Additional classes added to the footer link item  */
   className?: string;
 }
 

package/src/components/LoginPage/LoginMainFooterLinksItem.tsx

@@ -3,15 +3,15 @@ import styles from '@patternfly/react-styles/css/components/Login/login';
 import { css } from '@patternfly/react-styles';
 
 export interface LoginMainFooterLinksItemProps extends React.HTMLProps<HTMLLIElement> {
-  /** Content rendered inside the footer Link Item */
+  /** Content rendered inside the footer link item */
   children?: React.ReactNode;
-  /** HREF for Footer Link Item */
+  /** HREF for footer link item */
   href?: string;
-  /** Target for Footer Link Item */
+  /** Target for footer link item */
   target?: string;
-  /** Additional classes added to the Footer Link Item  */
+  /** Additional classes added to the footer link item  */
   className?: string;
-  /** Component used to render the Footer Link Item */
+  /** Component used to render the footer link item */
   linkComponent?: React.ReactNode;
   /** Props for the LinkComponent */
   linkComponentProps?: any;

package/src/components/LoginPage/LoginMainHeader.tsx

@@ -4,14 +4,16 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Login/login';
 
 export interface LoginMainHeaderProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the Login Main Header */
+  /** Content rendered inside the login main header */
   children?: React.ReactNode;
-  /** Additional classes added to the Login Main Header */
+  /** Additional classes added to the login main header */
   className?: string;
-  /** Title for the Login Main Header */
+  /** Title for the login main header */
   title?: string;
-  /** Subtitle that contains the Text, URL, and URL Text for the Login Main Header */
+  /** Subtitle that contains the text, URL, and URL text for the login main header */
   subtitle?: string;
+  /** Actions that render for the login main header */
+  headerUtilities?: React.ReactNode;
 }
 
 export const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps> = ({
@@ -19,6 +21,7 @@ export const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps> = ({
   className = '',
   title = '',
   subtitle = '',
+  headerUtilities = null,
   ...props
 }: LoginMainHeaderProps) => (
   <header className={css(styles.loginMainHeader, className)} {...props}>
@@ -28,6 +31,7 @@ export const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps> = ({
       </Title>
     )}
     {subtitle && <p className={css(styles.loginMainHeaderDesc)}>{subtitle}</p>}
+    {headerUtilities && <div className={css(styles.loginMainHeaderUtilities)}>{headerUtilities}</div>}
     {children}
   </header>
 );

package/src/components/LoginPage/LoginPage.tsx

@@ -13,33 +13,35 @@ import { LoginMainBody } from './LoginMainBody';
 import { LoginMainFooter } from './LoginMainFooter';
 
 export interface LoginPageProps extends React.HTMLProps<HTMLDivElement> {
-  /** Anything that can be rendered inside of the LoginPage (e.g. <LoginPageForm>) */
+  /** Anything that can be rendered inside of the login page (e.g. <LoginPageForm>) */
   children?: React.ReactNode;
-  /** Additional classes added to the LoginPage. */
+  /** Additional classes added to the login page */
   className?: string;
-  /** Attribute that specifies the URL of the brand image for the LoginPage */
+  /** Attribute that specifies the URL of the brand image for the login page */
   brandImgSrc?: string;
-  /** Attribute that specifies the alt text of the brand image for the LoginPage. */
+  /** Attribute that specifies the alt text of the brand image for the login page */
   brandImgAlt?: string;
-  /** Attribute that specifies the URL of the background image for the LoginPage */
+  /** Attribute that specifies the URL of the background image for the login page */
   backgroundImgSrc?: string | BackgroundImageSrcMap;
-  /** Attribute that specifies the alt text of the background image for the LoginPage. */
+  /** Attribute that specifies the alt text of the background image for the login page */
   backgroundImgAlt?: string;
-  /** Content rendered inside of the Text Component of the LoginPage */
+  /** Content rendered inside of the text component of the login page */
   textContent?: string;
-  /** Items rendered inside of the Footer List Component of the LoginPage */
+  /** Items rendered inside of the footer list component of the login page */
   footerListItems?: React.ReactNode;
-  /** Adds list variant styles for the Footer List component of the LoginPage. The only current value is'inline' */
+  /** Adds list variant styles for the footer list component of the login page. The only current value is'inline' */
   footerListVariants?: ListVariant.inline;
-  /** Title for the Login Main Body Header of the LoginPage */
+  /** Title for the login main body header of the login page */
   loginTitle: string;
-  /** Subtitle for the Login Main Body Header of the LoginPage */
+  /** Subtitle for the login main body header of the login page */
   loginSubtitle?: string;
-  /** Content rendered inside of Login Main Footer Band to display a sign up for account message */
+  /** @beta Header utilities for the login main body header of the login page */
+  headerUtilities?: React.ReactNode;
+  /** Content rendered inside of login main footer band to display a sign up for account message */
   signUpForAccountMessage?: React.ReactNode;
-  /** Content rendered inside of Login Main Footer Band to display a forgot credentials link* */
+  /** Content rendered inside of login main footer band to display a forgot credentials link. */
   forgotCredentials?: React.ReactNode;
-  /** Content rendered inside of Social Media Login footer section . */
+  /** Content rendered inside of social media login footer section */
   socialMediaLoginContent?: React.ReactNode;
 }
 
@@ -55,6 +57,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
   footerListVariants,
   loginTitle,
   loginSubtitle,
+  headerUtilities,
   signUpForAccountMessage = null,
   forgotCredentials = null,
   socialMediaLoginContent = null,
@@ -77,7 +80,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
     <React.Fragment>
       {backgroundImgSrc && <BackgroundImage src={backgroundImgSrc} alt={backgroundImgAlt} />}
       <Login header={Header} footer={Footer} className={css(className)} {...props}>
-        <LoginMainHeader title={loginTitle} subtitle={loginSubtitle} />
+        <LoginMainHeader title={loginTitle} subtitle={loginSubtitle} headerUtilities={headerUtilities} />
         <LoginMainBody>{children}</LoginMainBody>
         {(socialMediaLoginContent || forgotCredentials || signUpForAccountMessage) && (
           <LoginMainFooter

package/src/components/LoginPage/examples/LoginPage.md

@@ -29,3 +29,11 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam
 ### Show/hide password
 ```ts file='./LoginPageShowHidePassword.tsx' isFullscreen
 ```
+
+### Customizing the header utilities
+
+`headerUtilities` is a prop that can be customized to allow components to be placed into the header of the login page, likely for the user to take an action. The following example demonstrates the use of a Select component to display a list a languages.
+
+### With header utilities
+```ts file='./LoginPageLanguageSelect.tsx' isFullscreen
+```

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -129,7 +129,6 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
       brandImgSrc={brandImg2}
       brandImgAlt="PatternFly logo"
       backgroundImgSrc={images}
-      backgroundImgAlt="Images"
       footerListItems={listItem}
       textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."
       loginTitle="Log in to your account"