@patternfly/react-core 5.2.0-prerelease.5 → 5.2.0-prerelease.50

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Backdrop } from '../Backdrop';
+import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the pf-v5-c-backdrop', () => {
+test(`Renders with the ${styles.backdrop}`, () => {
   render(<Backdrop>Test</Backdrop>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-backdrop');
+  expect(screen.getByText('Test')).toHaveClass(styles.backdrop);
 });
 
-test('Renders with only the class pf-v5-c-backdrop by default', () => {
+test(`Renders with only the class ${styles.backdrop} by default`, () => {
   render(<Backdrop>Test</Backdrop>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-backdrop', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.backdrop, { exact: true });
 });
 
 test('Renders with custom class name when className prop is passed', () => {

package/src/components/BackgroundImage/BackgroundImage.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
+import cssBackgroundImage from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage';
 
 export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement> {
   /** The URL or file path of the image for the background */
@@ -19,7 +20,7 @@ export const BackgroundImage: React.FunctionComponent<BackgroundImageProps> = ({
     className={css(styles.backgroundImage, className)}
     style={
       {
-        '--pf-v5-c-background-image--BackgroundImage': `url(${src})`
+        [cssBackgroundImage.name]: `url(${src})`
       } as React.CSSProperties
     }
     {...props}

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { BackgroundImage } from '../BackgroundImage';
 import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
+import cssBackgroundImage from '@patternfly/react-tokens/dist/esm/c_background_image_BackgroundImage';
 
 test(`renders with default className ${styles.backgroundImage}`, () => {
   render(<BackgroundImage src="/image/url.png" data-testid="test-id" />);
@@ -15,11 +16,7 @@ test('spreads additional props', () => {
 
 test('has src URL applied to style', () => {
   render(<BackgroundImage src="/image/url.png" data-testid="test-id" />);
-
-  expect(screen.getByTestId('test-id')).toHaveAttribute(
-    'style',
-    '--pf-v5-c-background-image--BackgroundImage: url(/image/url.png);'
-  );
+  expect(screen.getByTestId('test-id')).toHaveAttribute('style', `${cssBackgroundImage.name}: url(/image/url.png);`);
 });
 
 test('renders with custom className when one is provided', () => {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Badge } from '../Badge';
+import styles from '@patternfly/react-styles/css/components/Badge/badge';
 
 test('Renders without children', () => {
   render(
@@ -16,14 +17,14 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-v5-c-badge', () => {
+test(`Renders with class name ${styles.badge}`, () => {
   render(<Badge>Test</Badge>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-badge');
+  expect(screen.getByText('Test')).toHaveClass(styles.badge);
 });
 
-test('Renders with class name pf-m-unread by default', () => {
+test(`Renders with class name ${styles.modifiers.unread} by default`, () => {
   render(<Badge>Test</Badge>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-unread');
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.unread);
 });
 
 test('Renders with class name pf-m-read when isRead prop is true', () => {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Banner } from '../Banner';
+import styles from '@patternfly/react-styles/css/components/Banner/banner';
 
 test('Renders without children', () => {
   render(
@@ -16,9 +17,9 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-v5-c-banner', () => {
+test(`Renders with class name ${styles.banner}`, () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-banner');
+  expect(screen.getByText('Test')).toHaveClass(styles.banner);
 });
 
 test('Renders with custom class name when className prop is provided', () => {
@@ -28,7 +29,7 @@ test('Renders with custom class name when className prop is provided', () => {
 
 test('Renders without any modifier class when variant prop is not passed', () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-banner', { exact: true });
+  expect(screen.getByText('Test')).toHaveClass(styles.banner, { exact: true });
 });
 
 test('Renders with class name pf-m-green when "green" is passed to variant prop', () => {

package/src/components/Brand/Brand.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Brand/brand';
 import { setBreakpointCssVars } from '../../helpers';
+import cssBrandHeight from '@patternfly/react-tokens/dist/esm/c_brand_Height';
+import cssBrandWidth from '@patternfly/react-tokens/dist/esm/c_brand_Width';
+
 export interface BrandProps
   extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
   /** Transforms the Brand into a <picture> element from an <img> element. Container for <source> child elements. */
@@ -45,14 +48,14 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
   let responsiveStyles;
   if (widths !== undefined) {
     responsiveStyles = {
-      ...setBreakpointCssVars(widths, '--pf-v5-c-brand--Width')
+      ...setBreakpointCssVars(widths, cssBrandWidth.name)
     };
   }
 
   if (heights !== undefined) {
     responsiveStyles = {
       ...responsiveStyles,
-      ...setBreakpointCssVars(heights, '--pf-v5-c-brand--Height')
+      ...setBreakpointCssVars(heights, cssBrandHeight.name)
     };
   }
 

package/src/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Button/button';
 import { css } from '@patternfly/react-styles';
 import { Spinner, spinnerSize } from '../Spinner';
-import { useOUIAProps, OUIAProps } from '../../helpers';
+import { useOUIAProps, OUIAProps } from '../../helpers/OUIA/ouia';
 import { Badge } from '../Badge';
 
 export enum ButtonVariant {

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import CartArrowDownIcon from '@patternfly/react-icons/dist/esm/icons/cart-arrow-down-icon';
 import { Button, ButtonVariant } from '../Button';
 
 Object.values(ButtonVariant).forEach((variant) => {

package/src/components/Button/examples/Button.md

@@ -32,7 +32,7 @@ PatternFly supports several button styling variants to be used in different scen
 | Warning | Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way. |
 | Link | Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the `isInline` property.|
 | Plain | Plain buttons have no styling and are intended to be labeled with icons. |
-| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](https://www.patternfly.org/v4/components/input-group). | 
+| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](/components/input-group). |
 
 ### Disabled buttons
 

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

@@ -10,6 +10,9 @@ export const ButtonVariations: React.FunctionComponent = () => (
     <Button variant="primary" ouiaId="Primary">
       Primary
     </Button>{' '}
+    <Button variant="primary" icon={<ExternalLinkSquareAltIcon />} ouiaId="PrimaryWithIcon">
+      Primary with icon
+    </Button>{' '}
     <Button variant="secondary" ouiaId="Secondary">
       Secondary
     </Button>{' '}

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -154,12 +154,13 @@ export const CalendarMonth = ({
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
 
   const getInitialDate = () => {
-    const initDate = new Date(dateProp);
-    if (isValidDate(initDate)) {
-      return initDate;
-    } else {
-      return isValidDate(rangeStart) ? rangeStart : today;
+    if (isValidDate(dateProp)) {
+      return dateProp;
     }
+    if (isValidDate(rangeStart)) {
+      return rangeStart;
+    }
+    return today;
   };
   const initialDate = getInitialDate();
   const [focusedDate, setFocusedDate] = React.useState(initialDate);
@@ -211,43 +212,25 @@ export const CalendarMonth = ({
     }
   };
 
-  const changeMonth = (month: number) => {
-    const newDate = new Date(focusedDate);
-    const desiredDay = newDate.getDate();
-    const monthDays = new Date(newDate.getFullYear(), (month + 1) % 12, 0).getDate(); // Setting day 0 of the next month returns the last day of current month
-
-    if (monthDays < desiredDay) {
-      newDate.setDate(monthDays);
-    }
-
-    newDate.setMonth(month);
-
-    if (initialDate.getDate() > desiredDay && monthDays > desiredDay) {
-      newDate.setDate(initialDate.getDate());
-    }
+  const changeYear = (newYear: number) => changeMonth(focusedDate.getMonth(), newYear);
 
-    return newDate;
-  };
+  const changeMonth = (newMonth: number, newYear?: number) =>
+    new Date(newYear ?? focusedDate.getFullYear(), newMonth, 1);
 
   const addMonth = (toAdd: -1 | 1) => {
-    let newMonth = new Date(focusedDate).getMonth() + toAdd;
+    let newMonth = focusedDate.getMonth() + toAdd;
+    let newYear = focusedDate.getFullYear();
+
     if (newMonth === -1) {
       newMonth = 11;
+      newYear--;
     } else if (newMonth === 12) {
       newMonth = 0;
+      newYear++;
     }
-    const newDate = changeMonth(newMonth);
-    if (toAdd === 1 && newMonth === 0) {
-      newDate.setFullYear(newDate.getFullYear() + 1);
-    }
-    if (toAdd === -1 && newMonth === 11) {
-      newDate.setFullYear(newDate.getFullYear() - 1);
-    }
-    return newDate;
-  };
 
-  const yearHasFebruary29th = (year: number) => new Date(year, 1, 29).getMonth() === 1;
-  const dateIsFebruary29th = (date: Date) => date.getMonth() === 1 && date.getDate() === 29;
+    return changeMonth(newMonth, newYear);
+  };
 
   const prevMonth = addMonth(-1);
   const nextMonth = addMonth(1);
@@ -340,19 +323,11 @@ export const CalendarMonth = ({
                 type="number"
                 value={yearFormatted}
                 onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
-                  const newDate = new Date(focusedDate);
-                  if (dateIsFebruary29th(newDate) && !yearHasFebruary29th(+year)) {
-                    newDate.setDate(28);
-                    newDate.setMonth(1);
-                  }
-                  if (dateIsFebruary29th(initialDate) && yearHasFebruary29th(+year)) {
-                    newDate.setFullYear(+year);
-                    newDate.setDate(29);
-                  }
-                  newDate.setFullYear(+year);
+                  const newDate = changeYear(Number(year));
                   setFocusedDate(newDate);
                   setHoveredDate(newDate);
                   setShouldFocus(false);
+                  focusRef.current?.blur(); // will unfocus a date when changing year via up/down arrows
                   onMonthChange(ev, newDate);
                 }}
               />

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

@@ -57,7 +57,9 @@ test('Next year dates have correct year in aria label', () => {
 });
 
 test('InlineProps render correct wrapper component and attributes', () => {
-  render(<CalendarMonth inlineProps={{component: 'article', title: <div id="hi">Title</div>, ariaLabelledby: "hi"}} />);
+  render(
+    <CalendarMonth inlineProps={{ component: 'article', title: <div id="hi">Title</div>, ariaLabelledby: 'hi' }} />
+  );
 
   const article = screen.getByRole('article');
   expect(article).toHaveAttribute('aria-labelledby', 'hi');

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

@@ -30,7 +30,7 @@ describe('CardBody', () => {
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
 
-    render(<CardBody component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<CardBody component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 

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

@@ -27,7 +27,7 @@ describe('CardFooter', () => {
 
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
-    render(<CardFooter component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<CardFooter component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 });

package/src/components/Checkbox/Checkbox.tsx

@@ -8,10 +8,16 @@ import { ASTERISK } from '../../helpers/htmlConstants';
 export interface CheckboxProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>,
     OUIAProps {
-  /** Additional classes added to the checkbox. */
+  /** Additional classes added to the checkbox wrapper. This wrapper will be div element by default. It will be a label element if
+   * isLabelWrapped is true, or it can be overridden by any element specified in the component prop.
+   */
   className?: string;
-  /** Additional classed added to the radio input */
+  /** Additional classes added to the checkbox input. */
   inputClassName?: string;
+  /** Flag to indicate whether the checkbox wrapper element is a <label> element for the checkbox input. Will not apply if a component prop (with a value other than a "label") is specified. */
+  isLabelWrapped?: boolean;
+  /** Flag to show if the checkbox label is shown before the checkbox input. */
+  isLabelBeforeButton?: boolean;
   /** Flag to show if the checkbox selection is valid or invalid. */
   isValid?: boolean;
   /** Flag to show if the checkbox is disabled. */
@@ -33,7 +39,7 @@ export interface CheckboxProps
   description?: React.ReactNode;
   /** Body text of the checkbox */
   body?: React.ReactNode;
-  /** Sets the input wrapper component to render. Defaults to <div> */
+  /** Sets the checkbox wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified. */
   component?: React.ElementType;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
@@ -52,13 +58,13 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
   static displayName = 'Checkbox';
   static defaultProps: PickOptional<CheckboxProps> = {
     className: '',
+    isLabelWrapped: false,
     isValid: true,
     isDisabled: false,
     isRequired: false,
     isChecked: false,
     onChange: defaultOnChange,
-    ouiaSafe: true,
-    component: 'div'
+    ouiaSafe: true
   };
 
   constructor(props: any) {
@@ -78,6 +84,8 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       className,
       inputClassName,
       onChange,
+      isLabelWrapped,
+      isLabelBeforeButton,
       isValid,
       isDisabled,
       isRequired,
@@ -89,7 +97,7 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       body,
       ouiaId,
       ouiaSafe,
-      component: Component,
+      component,
       ...props
     } = this.props;
     if (!props.id) {
@@ -107,31 +115,57 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       checkedProps.defaultChecked = defaultChecked;
     }
 
+    const inputRendered = (
+      <input
+        {...props}
+        className={css(styles.checkInput, inputClassName)}
+        type="checkbox"
+        onChange={this.handleChange}
+        aria-invalid={!isValid}
+        aria-label={ariaLabel}
+        disabled={isDisabled}
+        required={isRequired}
+        ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
+        {...checkedProps}
+        {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
+      />
+    );
+
+    const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
+
+    const Label = wrapWithLabel ? 'span' : 'label';
+    const labelRendered = label ? (
+      <Label
+        className={css(styles.checkLabel, isDisabled && styles.modifiers.disabled)}
+        htmlFor={!wrapWithLabel ? props.id : undefined}
+      >
+        {label}
+        {isRequired && (
+          <span className={css(styles.checkLabelRequired)} aria-hidden="true">
+            {ASTERISK}
+          </span>
+        )}
+      </Label>
+    ) : null;
+
+    const Component = component ?? (wrapWithLabel ? 'label' : 'div');
+
     checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
     return (
-      <Component className={css(styles.check, !label && styles.modifiers.standalone, className)}>
-        <input
-          {...props}
-          className={css(styles.checkInput, inputClassName)}
-          type="checkbox"
-          onChange={this.handleChange}
-          aria-invalid={!isValid}
-          aria-label={ariaLabel}
-          disabled={isDisabled}
-          required={isRequired}
-          ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
-          {...checkedProps}
-          {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-        />
-        {label && (
-          <label className={css(styles.checkLabel, isDisabled && styles.modifiers.disabled)} htmlFor={props.id}>
-            {label}
-            {isRequired && (
-              <span className={css(styles.checkLabelRequired)} aria-hidden="true">
-                {ASTERISK}
-              </span>
-            )}
-          </label>
+      <Component
+        className={css(styles.check, !label && styles.modifiers.standalone, className)}
+        htmlFor={wrapWithLabel ? props.id : undefined}
+      >
+        {isLabelBeforeButton ? (
+          <>
+            {labelRendered}
+            {inputRendered}
+          </>
+        ) : (
+          <>
+            {inputRendered}
+            {labelRendered}
+          </>
         )}
         {description && <span className={css(styles.checkDescription)}>{description}</span>}
         {body && <span className={css(styles.checkBody)}>{body}</span>}