@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

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":"5.1.0-prerelease.0","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":"5.1.1-prerelease.1","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":"5.1.0-prerelease.0","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":"5.1.1-prerelease.1","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":"5.1.0-prerelease.0","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":"5.1.1-prerelease.1","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.0",
+  "version": "5.1.1-prerelease.2",
   "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",
@@ -21,8 +21,7 @@
     "*.scss"
   ],
   "publishConfig": {
-    "access": "public",
-    "tag": "alpha"
+    "access": "public"
   },
   "repository": {
     "type": "git",
@@ -46,16 +45,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/patternfly": "5.0.2",
-    "@patternfly/react-icons": "^5.1.0",
-    "@patternfly/react-styles": "^5.1.0",
-    "@patternfly/react-tokens": "^5.1.0",
-    "focus-trap": "7.4.3",
+    "@patternfly/react-icons": "^5.1.1-prerelease.2",
+    "@patternfly/react-styles": "^5.1.1-prerelease.2",
+    "@patternfly/react-tokens": "^5.1.1-prerelease.2",
+    "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-prerelease.16",
+    "@patternfly/patternfly": "5.1.0-prerelease.13",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -72,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "788b50e975fd7a913f3c892ae68f426fd95b6ea2"
+  "gitHead": "52cbf11e7e407d70d674a160da7f432d197c5f57"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
+import backgroundImage from '@patternfly/react-tokens/dist/esm/c_about_modal_box_BackgroundImage';
 import { AboutModalBoxContent } from './AboutModalBoxContent';
 import { AboutModalBoxHeader } from './AboutModalBoxHeader';
 import { AboutModalBoxBrand } from './AboutModalBoxBrand';
@@ -87,9 +88,9 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
           hasNoBodyWrapper
         >
           <AboutModalBox
-             style={
+            style={
               backgroundImageSrc
-                ? { ['--pf-v5-c-about-modal-box--BackgroundImage']: `url(${backgroundImageSrc})` } as React.CSSProperties  
+                ? ({ [backgroundImage.name]: `url(${backgroundImageSrc})` } as React.CSSProperties)
                 : {}
             }
             className={css(className)}

package/src/components/AboutModal/AboutModalBoxCloseButton.tsx

@@ -12,7 +12,7 @@ export interface AboutModalBoxCloseButtonProps extends React.HTMLProps<HTMLDivEl
 }
 
 export const AboutModalBoxCloseButton: React.FunctionComponent<AboutModalBoxCloseButtonProps> = ({
-  onClose = _e => undefined as any,
+  onClose = (_e) => undefined as any,
   'aria-label': ariaLabel = 'Close Dialog',
   ...props
 }: AboutModalBoxCloseButtonProps) => (

package/src/components/AboutModal/examples/AboutModal.md

@@ -4,8 +4,8 @@ section: components
 cssPrefix: pf-v5-c-about-modal-box
 propComponents: ['AboutModal']
 ---
-import brandImg from './brandImg.svg';
-import bgImg from './patternfly-orb.svg';
+import brandImg from '../../assets/brandImg.svg';
+import bgImg from '../../assets/patternfly-orb.svg';
 
 ## Examples
 ### Basic

package/src/components/AboutModal/examples/AboutModalBasic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from './brandImg.svg';
+import brandImg from '../../assets/brandImg.svg';
 
 export const AboutModalBasic: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -20,7 +20,7 @@ export const AboutModalBasic: React.FunctionComponent = () => {
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
-        backgroundImageSrc='/assets/images/pfbg-icon.svg'
+        backgroundImageSrc="/assets/images/pfbg-icon.svg"
         productName="Product Name"
       >
         <TextContent>

package/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from './brandImg.svg';
+import brandImg from '../../assets/brandImg.svg';
 
 export const AboutModalComplexUserPositionedContent: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -20,7 +20,7 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
-        backgroundImageSrc='/assets/images/pfbg-icon.svg'
+        backgroundImageSrc="/assets/images/pfbg-icon.svg"
         hasNoContentContainer={true}
         productName="Product Name"
       >

package/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from './brandImg.svg';
+import brandImg from '../../assets/brandImg.svg';
 
 export const AboutModalWithoutProductName: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -20,7 +20,7 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
-        backgroundImageSrc='/assets/images/pfbg-icon.svg'
+        backgroundImageSrc="/assets/images/pfbg-icon.svg"
         aria-label="No product name about modal"
       >
         <TextContent>

package/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx

@@ -4,7 +4,7 @@ import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@pa
 export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent = () => {
   const [expanded, setExpanded] = React.useState(['ex2-toggle4']);
 
-  const toggle = id => {
+  const toggle = (id) => {
     const index = expanded.indexOf(id);
     const newExpanded: string[] =
       index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];

package/src/components/Alert/Alert.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
-import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 import { AlertIcon } from './AlertIcon';
 import { capitalize, useOUIAProps, OUIAProps } from '../../helpers';
 import { AlertContext } from './AlertContext';
@@ -117,7 +116,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   const ouiaProps = useOUIAProps(Alert.displayName, ouiaId, ouiaSafe, variant);
   const getHeadingContent = (
     <React.Fragment>
-      <span className={css(accessibleStyles.screenReader)}>{variantLabel}</span>
+      <span className="pf-v5-screen-reader">{variantLabel}</span>
       {title}
     </React.Fragment>
   );

package/src/components/Alert/AlertActionLink.tsx

@@ -6,8 +6,8 @@ import { Button, ButtonVariant, ButtonProps } from '../Button';
  */
 
 export interface AlertActionLinkProps extends ButtonProps {
-  /** Content rendered inside the alert action link.  */
-  children?: string;
+  /** Content rendered inside the alert action link. Interactive content such as anchor elements should not be passed in. */
+  children?: React.ReactNode;
   /** Additional classes added to the alert action link.  */
   className?: string;
 }

package/src/components/Alert/AlertGroup.tsx

@@ -26,7 +26,7 @@ interface AlertGroupState {
   container: HTMLElement;
 }
 
-export class AlertGroup extends React.Component<AlertGroupProps, AlertGroupState> {
+class AlertGroup extends React.Component<AlertGroupProps, AlertGroupState> {
   static displayName = 'AlertGroup';
   state = {
     container: undefined
@@ -93,3 +93,5 @@ export class AlertGroup extends React.Component<AlertGroupProps, AlertGroupState
     return ReactDOM.createPortal(alertGroup, container);
   }
 }
+
+export { AlertGroup };

package/src/components/Alert/__tests__/AlertActionLink.test.tsx

@@ -20,6 +20,18 @@ test('Renders children', () => {
   expect(screen.getByRole('button')).toBeVisible();
 });
 
+test('Renders ReactNode as children', () => {
+  render(
+    <AlertActionLink>
+      <div>
+        <span>Learn More</span>
+      </div>
+    </AlertActionLink>
+  );
+
+  expect(screen.getByText('Learn More')).toBeVisible();
+});
+
 test('Renders with custom class names provided via prop', () => {
   render(<AlertActionLink className="custom-class">Test</AlertActionLink>);
 

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

@@ -23,7 +23,7 @@ exports[`Matches snapshot 1`] = `
       class="pf-v5-c-alert__title"
     >
       <span
-        class="pf-v5-u-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Custom alert:
       </span>

package/src/components/Alert/examples/AlertAsyncLiveRegion.tsx

@@ -13,7 +13,7 @@ export const AsyncLiveRegionAlert: React.FunctionComponent = () => {
   const getUniqueId: () => number = () => new Date().getTime();
 
   const addAlert = (alertInfo: AlertInfo) => {
-    setAlerts(prevAlertInfo => [...prevAlertInfo, alertInfo]);
+    setAlerts((prevAlertInfo) => [...prevAlertInfo, alertInfo]);
   };
 
   React.useEffect(() => {

package/src/components/Alert/examples/AlertDynamicLiveRegion.tsx

@@ -13,7 +13,7 @@ export const DynamicLiveRegionAlert: React.FunctionComponent = () => {
   const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');
 
   const addAlert = (alertInfo: AlertInfo) => {
-    setAlerts(prevAlertInfo => [...prevAlertInfo, alertInfo]);
+    setAlerts((prevAlertInfo) => [...prevAlertInfo, alertInfo]);
   };
 
   const addSuccessAlert = () => {

package/src/components/Alert/examples/AlertGroupAsync.tsx

@@ -19,7 +19,7 @@ export const AlertGroupAsync: React.FunctionComponent = () => {
   const getUniqueId = () => new Date().getTime();
 
   const addAlert = () => {
-    setAlerts(prevAlerts => [
+    setAlerts((prevAlerts) => [
       ...prevAlerts,
       {
         title: `Async notification ${prevAlerts.length + 1} was added to the queue.`,
@@ -30,7 +30,7 @@ export const AlertGroupAsync: React.FunctionComponent = () => {
   };
 
   const removeAlert = (key: React.Key) => {
-    setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
+    setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]);
   };
 
   const startAsyncAlerts = () => {

package/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx

@@ -13,11 +13,11 @@ export const AlertGroupMultipleDynamic: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
 
   const addAlerts = (incomingAlerts: Partial<AlertProps>[]) => {
-    setAlerts(prevAlerts => [...prevAlerts, ...incomingAlerts]);
+    setAlerts((prevAlerts) => [...prevAlerts, ...incomingAlerts]);
   };
 
   const removeAlert = (key: React.Key) => {
-    setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
+    setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]);
   };
 
   const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');

package/src/components/Alert/examples/AlertGroupSingularDynamic.tsx

@@ -13,11 +13,11 @@ export const AlertGroupSingularDynamic: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
 
   const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
-    setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);
+    setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]);
   };
 
   const removeAlert = (key: React.Key) => {
-    setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
+    setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]);
   };
 
   const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');

package/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx

@@ -24,12 +24,12 @@ export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () =>
   };
 
   const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
-    setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);
+    setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]);
     setOverflowMessage(getOverflowMessage(alerts.length + 1));
   };
 
   const removeAlert = (key: React.Key) => {
-    const newAlerts = alerts.filter(alert => alert.key !== key);
+    const newAlerts = alerts.filter((alert) => alert.key !== key);
     setAlerts(newAlerts);
     setOverflowMessage(getOverflowMessage(newAlerts.length));
   };

package/src/components/Alert/examples/AlertGroupToast.tsx

@@ -13,11 +13,11 @@ export const AlertGroupToast: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<Partial<AlertProps>[]>([]);
 
   const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
-    setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);
+    setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]);
   };
 
   const removeAlert = (key: React.Key) => {
-    setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]);
+    setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]);
   };
 
   const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' ');

package/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx

@@ -24,12 +24,12 @@ export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => {
   };
 
   const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => {
-    setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]);
+    setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]);
     setOverflowMessage(getOverflowMessage(alerts.length + 1));
   };
 
   const removeAlert = (key: React.Key) => {
-    const newAlerts = alerts.filter(alert => alert.key !== key);
+    const newAlerts = alerts.filter((alert) => alert.key !== key);
     setAlerts(newAlerts);
     setOverflowMessage(getOverflowMessage(newAlerts.length));
   };

package/src/components/Alert/index.ts

@@ -2,4 +2,4 @@ export * from './Alert';
 export * from './AlertContext';
 export * from './AlertActionCloseButton';
 export * from './AlertActionLink';
-export * from './AlertGroup';
+export * from './AlertGroup';

package/src/components/Avatar/examples/Avatar.md

@@ -5,8 +5,8 @@ cssPrefix: pf-v5-c-avatar
 propComponents: ['Avatar']
 ---
 
-import avatarImg from './avatarImg.svg';
-import avatarImgDark from './avatarImgDark.svg';
+import avatarImg from '../../assets/avatarImg.svg';
+import avatarImgDark from '../../assets/avatarImgDark.svg';
 import './example.css';
 
 ## Examples
@@ -16,7 +16,7 @@ import './example.css';
 ```ts
 import React from 'react';
 import { Avatar } from '@patternfly/react-core';
-import avatarImg from './avatarImg.svg';
+import avatarImg from '../../assets/avatarImg.svg';
 
 <Avatar src={avatarImg} alt="avatar" />;
 ```
@@ -26,7 +26,7 @@ import avatarImg from './avatarImg.svg';
 ```ts
 import React from 'react';
 import { Avatar } from '@patternfly/react-core';
-import avatarImg from './avatarImg.svg';
+import avatarImg from '../../assets/avatarImg.svg';
 
 <React.Fragment>
   Small
@@ -52,7 +52,7 @@ import avatarImg from './avatarImg.svg';
 ```ts
 import React from 'react';
 import { Avatar } from '@patternfly/react-core';
-import avatarImg from './img_avatar.svg';
+import avatarImg from '../../assets/avatarImg.svg';
 
 <Avatar src={avatarImg} alt="avatar" border="light" />;
 ```
@@ -62,7 +62,7 @@ import avatarImg from './img_avatar.svg';
 ```ts
 import React from 'react';
 import { Avatar } from '@patternfly/react-core';
-import avatarImgDark from './img_avatar-dark.svg';
+import avatarImgDark from '../../assets/avatarImgDark.svg';
 
 <Avatar src={avatarImgDark} alt="avatar" border="dark" />;
 ```

package/src/components/Banner/Banner.tsx

@@ -34,7 +34,7 @@ export const Banner: React.FunctionComponent<BannerProps> = ({
     )}
     {...props}
   >
-    {screenReaderText && <span className="pf-v5-u-screen-reader">{screenReaderText}</span>}
+    {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
     {children}
   </div>
 );

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

@@ -51,9 +51,9 @@ test('Renders with class name pf-m-blue when "blue" is passed to variant prop',
   expect(screen.getByText('Test')).toHaveClass('pf-m-blue');
 });
 
-test('Does not render pf-v5-u-screen-reader class by default', () => {
+test('Does not render pf-v5-screen-reader class by default', () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-u-screen-reader"></span>');
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');
 });
 
 test('Renders screenReaderText passed via prop', () => {

package/src/components/Brand/Brand.tsx

@@ -68,7 +68,13 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
         <img src={src} alt={alt} />
       </picture>
     ) : (
-      <img {...props} className={css(styles.brand, className)} style={{ ...style, ...responsiveStyles }} src={src} alt={alt} />
+      <img
+        {...props}
+        className={css(styles.brand, className)}
+        style={{ ...style, ...responsiveStyles }}
+        src={src}
+        alt={alt}
+      />
     )
   );
 };

package/src/components/Brand/examples/Brand.md

@@ -5,13 +5,13 @@ cssPrefix: null
 propComponents: ['Brand']
 ---
 
-import pfLogo from './pfLogo.svg';
-import logoXl from './pf-c-brand--logo-on-xl.svg';
-import logoLg from './pf-c-brand--logo-on-lg.svg';
-import logoMd from './pf-c-brand--logo-on-md.svg';
-import logoSm from './pf-c-brand--logo-on-sm.svg';
-import logo from './pf-c-brand--logo.svg';
-import logoBase from './pf-c-brand--logo-base.jpg';
+import pfLogo from '../../assets/pfLogo.svg';
+import logoXl from '../../assets/pf-c-brand--logo-on-xl.svg';
+import logoLg from '../../assets/pf-c-brand--logo-on-lg.svg';
+import logoMd from '../../assets/pf-c-brand--logo-on-md.svg';
+import logoSm from '../../assets/pf-c-brand--logo-on-sm.svg';
+import logo from '../../assets/pf-c-brand--logo.svg';
+import logoBase from '../../assets/pf-c-brand--logo-base.jpg';
 
 ## Examples
 

package/src/components/Brand/examples/BrandBasic.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Brand } from '@patternfly/react-core';
-import pfLogo from './pfLogo.svg';
+import pfLogo from '../../assets/pfLogo.svg';
 
-export const BrandBasic: React.FunctionComponent = () => <Brand src={pfLogo} alt="Patternfly Logo" widths={{ default: '200px', md: '400px', xl: '600px' }} />;
+export const BrandBasic: React.FunctionComponent = () => (
+  <Brand src={pfLogo} alt="Patternfly Logo" widths={{ default: '200px', md: '400px', xl: '600px' }} />
+);

package/src/components/Brand/examples/BrandResponsive.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Brand } from '@patternfly/react-core';
-import logoXl from './pf-c-brand--logo-on-xl.svg';
-import logoLg from './pf-c-brand--logo-on-lg.svg';
-import logoMd from './pf-c-brand--logo-on-md.svg';
-import logoSm from './pf-c-brand--logo-on-sm.svg';
-import logo from './pf-c-brand--logo.svg';
-import logoBase from './pf-c-brand--logo-base.jpg';
+import logoXl from '../../assets/pf-c-brand--logo-on-xl.svg';
+
+import logoLg from '../../assets/pf-c-brand--logo-on-lg.svg';
+import logoMd from '../../assets/pf-c-brand--logo-on-md.svg';
+import logoSm from '../../assets/pf-c-brand--logo-on-sm.svg';
+import logo from '../../assets/pf-c-brand--logo.svg';
+import logoBase from '../../assets/pf-c-brand--logo-base.jpg';
 
 export const BrandBasic: React.FunctionComponent = () => (
   <Brand src={logoBase} alt="Fallback patternfly default logo" widths={{ default: '40px', sm: '60px', md: '220px' }}>

package/src/components/Button/Button.tsx

@@ -158,7 +158,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         isActive && styles.modifiers.active,
         isInline && variant === ButtonVariant.link && styles.modifiers.inline,
         isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles.modifiers.danger,
-        isLoading !== null && children !== null && styles.modifiers.progress,
+        isLoading !== null && variant !== ButtonVariant.plain && styles.modifiers.progress,
         isLoading && styles.modifiers.inProgress,
         size === ButtonSize.sm && styles.modifiers.small,
         size === ButtonSize.lg && styles.modifiers.displayLg,

package/src/components/Button/examples/ButtonVariations.tsx

@@ -7,12 +7,24 @@ import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 
 export const ButtonVariations: React.FunctionComponent = () => (
   <React.Fragment>
-    <Button variant="primary" ouiaId="Primary">Primary</Button> <Button variant="secondary" ouiaId="Secondary">Secondary</Button>{' '}
+    <Button variant="primary" ouiaId="Primary">
+      Primary
+    </Button>{' '}
+    <Button variant="secondary" ouiaId="Secondary">
+      Secondary
+    </Button>{' '}
     <Button variant="secondary" ouiaId="DangerSecondary" isDanger>
       Danger Secondary
     </Button>{' '}
-    <Button variant="tertiary" ouiaId="Tertiary">Tertiary</Button> <Button variant="danger" ouiaId="Danger">Danger</Button>{' '}
-    <Button variant="warning" ouiaId="Warning">Warning</Button>
+    <Button variant="tertiary" ouiaId="Tertiary">
+      Tertiary
+    </Button>{' '}
+    <Button variant="danger" ouiaId="Danger">
+      Danger
+    </Button>{' '}
+    <Button variant="warning" ouiaId="Warning">
+      Warning
+    </Button>
     <br />
     <br />
     <Button variant="link" icon={<PlusCircleIcon />}>

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -180,11 +180,8 @@ export const CalendarMonth = ({
 
   useEffect(() => {
     // Calendar month should not be focused on page load
-    // Datepicker should place focus in calendar month when opened
     if ((shouldFocus || isDateFocused) && focusedDateValidated && focusRef.current) {
       focusRef.current.focus();
-    } else {
-      setShouldFocus(true);
     }
   }, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);
 

package/src/components/Card/Card.tsx

@@ -57,6 +57,8 @@ interface CardContextProps {
   isClickable: boolean;
   isSelectable: boolean;
   isDisabled: boolean;
+  // TODO: Remove hasSelectableInput when deprecated prop is removed
+  hasSelectableInput: boolean;
 }
 
 interface AriaProps {
@@ -160,7 +162,9 @@ export const Card: React.FunctionComponent<CardProps> = ({
         isExpanded,
         isClickable,
         isSelectable,
-        isDisabled
+        isDisabled,
+        // TODO: Remove hasSelectableInput when deprecated prop is removed
+        hasSelectableInput
       }}
     >
       {hasSelectableInput && (

package/src/components/Card/CardHeader.tsx

@@ -79,7 +79,8 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   ...props
 }: CardHeaderProps) => (
   <CardContext.Consumer>
-    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled }) => {
+    {/* TODO: Remove hasSelectableInput when deprecated props are removed */}
+    {({ cardId, isClickable, isSelectable, isDisabled: isCardDisabled, hasSelectableInput }) => {
       const cardHeaderToggle = (
         <div className={css(styles.cardHeaderToggle)}>
           <Button
@@ -97,7 +98,11 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
         </div>
       );
 
-      if (actions?.actions && !(isClickable && isSelectable)) {
+      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) {
         // eslint-disable-next-line no-console
         console.warn(
           `${

package/src/components/Card/CardHeaderMain.tsx

@@ -14,7 +14,7 @@ export const CardHeaderMain: React.FunctionComponent<CardHeaderMainProps> = ({
   className,
   ...props
 }: CardHeaderMainProps) => (
-  <div className={css(styles.cardHeaderMain ,className)} {...props}>
+  <div className={css(styles.cardHeaderMain, className)} {...props}>
     {children}
   </div>
 );

package/src/components/Card/CardTitle.tsx

@@ -28,7 +28,7 @@ export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
     return () => registerTitleId('');
   }, [registerTitleId, titleId]);
 
-    return (
+  return (
     <div className={css(styles.cardTitle)}>
       <Component className={css(styles.cardTitleText, className)} id={titleId || undefined} {...props}>
         {children}