@patternfly/react-core 5.2.0-prerelease.2 → 5.2.0-prerelease.20

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/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/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/Checkbox/__tests__/Checkbox.test.tsx

@@ -4,92 +4,247 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Checkbox } from '../Checkbox';
+import styles from '@patternfly/react-styles/css/components/Check/check';
 
-describe('Checkbox', () => {
-  test('controlled', () => {
-    const { asFragment } = render(<Checkbox isChecked id="check" aria-label="check" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders with only the class ${styles.checkInput} on the check by default`, () => {
+  render(<Checkbox id="test-id" />);
 
-  test('controlled - 3rd state', () => {
-    const { asFragment } = render(<Checkbox isChecked={null} id="check" aria-label="check" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+  expect(screen.getByRole('checkbox')).toHaveClass(styles.checkInput, { exact: true });
+});
 
-  test('uncontrolled', () => {
-    const { asFragment } = render(<Checkbox id="check" aria-label="check" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test(`Renders with only the classes ${styles.check} and ${styles.modifiers.standalone} on the check wrapper by default`, () => {
+  render(<Checkbox id="test-id" />);
 
-  test('isDisabled', () => {
-    const { asFragment } = render(<Checkbox id="check" isDisabled aria-label="check" />);
-    expect(asFragment()).toMatchSnapshot();
+  expect(screen.getByRole('checkbox').parentElement).toHaveClass(`${styles.check} ${styles.modifiers.standalone}`, {
+    exact: true
   });
+});
 
-  test('label is string', () => {
-    const { asFragment } = render(<Checkbox label="Label" id="check" isChecked aria-label="check" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with additional classes passed via className', () => {
+  render(<Checkbox id="test-id" className="test-class" />);
 
-  test('label is function', () => {
-    const functionLabel = () => <h1>Header</h1>;
-    const { asFragment } = render(<Checkbox label={functionLabel()} id="check" isChecked aria-label="check" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+  expect(screen.getByRole('checkbox').parentElement).toHaveClass('test-class');
+});
 
-  test('label is node', () => {
-    const { asFragment } = render(<Checkbox label={<h1>Header</h1>} id="check" isChecked aria-label="check" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with additional classes passed via inputClassName', () => {
+  render(<Checkbox id="test-id" inputClassName="test-class" />);
 
-  test('passing class', () => {
-    const { asFragment } = render(
-      <Checkbox label="label" className="class-123" id="check" isChecked aria-label="check" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+  expect(screen.getByRole('checkbox')).toHaveClass('test-class');
+});
 
-  test('passing HTML attribute', () => {
-    const { asFragment } = render(
-      <Checkbox label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Does not set the checkbox as invalid by default', () => {
+  render(<Checkbox id="test-id" />);
 
-  test('passing description', () => {
-    render(<Checkbox id="check" label="checkbox" description="Text description..." />);
-    expect(screen.getByText('Text description...')).toBeInTheDocument();
-  });
+  expect(screen.getByRole('checkbox')).toBeValid();
+});
 
-  test('passing body', () => {
-    render(<Checkbox id="check" label="checkbox" body="This is where custom content goes." />);
+test('Sets the checkbox as invalid when isValid is false', () => {
+  render(<Checkbox id="test-id" isValid={false} />);
 
-    expect(screen.getByText('This is where custom content goes.')).toBeInTheDocument();
-  });
+  expect(screen.getByRole('checkbox')).toBeInvalid();
+});
 
-  test('checkbox onChange handler called when component is clicked', async () => {
-    const onChangeHandler = jest.fn();
-    const user = userEvent.setup();
+test('Does not set the checkbox as disabled by default', () => {
+  render(<Checkbox id="test-id" />);
 
-    render(<Checkbox id="check" onChange={onChangeHandler} aria-label="check" isChecked={false} />);
+  expect(screen.getByRole('checkbox')).not.toBeDisabled();
+});
 
-    await user.click(screen.getByLabelText('check'));
-    expect(onChangeHandler).toHaveBeenCalled();
-  });
+test(`Sets the checkbox as disabled when isDisabled is passed`, () => {
+  render(<Checkbox id="test-id" isDisabled />);
 
-  test('should throw console error when no id is given', () => {
-    const myMock = jest.fn();
-    global.console = { ...global.console, error: myMock };
+  expect(screen.getByRole('checkbox')).toBeDisabled();
+});
 
-    render(<Checkbox id={undefined} />);
-    expect(myMock).toHaveBeenCalled();
-  });
+test('Sets the label as disabled when isDisabled and label are passed', () => {
+  render(<Checkbox id="test-id" isDisabled label="test label" />);
 
-  test('renders component wrapper as span', () => {
-    const { container } = render(
-      <Checkbox component="span" label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />
-    );
-    const span = container.querySelector('span');
-    expect(span).toHaveClass('pf-v5-c-check');
-  });
+  expect(screen.getByLabelText('test label')).toBeDisabled();
+});
+
+test('Does not set the checkbox as required by default', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.getByRole('checkbox')).not.toBeRequired();
+});
+
+test(`Sets the checkbox as required when isRequired is passed`, () => {
+  render(<Checkbox id="test-id" isRequired />);
+
+  expect(screen.getByRole('checkbox')).toBeRequired();
+});
+
+test('Does not set the checkbox as checked by default', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.getByRole('checkbox')).not.toBeChecked();
+});
+
+test(`Sets the checkbox as checked when isChecked is passed`, () => {
+  render(<Checkbox id="test-id" isChecked />);
+
+  expect(screen.getByRole('checkbox')).toBeChecked();
+});
+
+test(`Sets the checkbox as checked when checked is passed`, () => {
+  render(<Checkbox id="test-id" checked />);
+
+  expect(screen.getByRole('checkbox')).toBeChecked();
+});
+
+test(`Calls onChange when the checkbox is clicked`, async () => {
+  const user = userEvent.setup();
+  const onChange = jest.fn();
+  render(<Checkbox id="test-id" onChange={onChange} />);
+
+  await user.click(screen.getByRole('checkbox'));
+
+  expect(onChange).toHaveBeenCalledTimes(1);
+});
+
+test('Does not call onChange when the checkbox is not clicked', () => {
+  const onChange = jest.fn();
+  render(<Checkbox id="test-id" onChange={onChange} />);
+
+  expect(onChange).not.toHaveBeenCalled();
+});
+
+test(`Calls onChange with the event and the checked value when the checkbox is clicked`, async () => {
+  const user = userEvent.setup();
+  const onChange = jest.fn();
+  render(<Checkbox id="test-id" onChange={onChange} />);
+
+  await user.click(screen.getByRole('checkbox'));
+
+  expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ type: 'change' }), true);
+});
+
+test(`Calls onChange with the event and the checked value when the checkbox is clicked and isChecked is passed`, async () => {
+  const user = userEvent.setup();
+  const onChange = jest.fn();
+  render(<Checkbox id="test-id" isChecked onChange={onChange} />);
+
+  await user.click(screen.getByRole('checkbox'));
+
+  expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ type: 'change' }), false);
+});
+
+test('Does not render a label by default', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.queryByLabelText(/\w+/)).not.toBeInTheDocument();
+});
+
+test('Renders a label when label is passed', () => {
+  render(<Checkbox id="test-id" label="test label" />);
+
+  expect(screen.getByLabelText('test label')).toBeVisible();
+});
+
+test('Associates the label with the checkbox', () => {
+  render(<Checkbox id="test-id" label="test label" />);
+
+  expect(screen.getByRole('checkbox')).toHaveAccessibleName('test label');
+});
+
+test('Does not render an asterisk when a label is passed but isRequired is not', () => {
+  render(<Checkbox id="test-id" label="test label" />);
+
+  expect(screen.queryByText('*')).not.toBeInTheDocument();
+});
+
+test('Renders an asterisk when isRequired and a label are passed', () => {
+  render(<Checkbox id="test-id" isRequired label="test label" />);
+
+  expect(screen.getByText('*')).toBeVisible();
+});
+
+test(`Wraps the required asterisk in the ${styles.checkLabelRequired} className`, () => {
+  render(<Checkbox id="test-id" isRequired label="test label" />);
+
+  expect(screen.getByText('*')).toHaveClass(styles.checkLabelRequired, { exact: true });
+});
+
+test('Renders with the provided id', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.getByRole('checkbox')).toHaveAttribute('id', 'test-id');
+});
+
+test('Does not render an aria-label by default', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.getByRole('checkbox')).not.toHaveAttribute('aria-label');
+});
+
+test('Sets the name to the passed aria-label', () => {
+  render(<Checkbox id="test-id" aria-label="test aria-label" />);
+
+  expect(screen.getByRole('checkbox')).toHaveAccessibleName('test aria-label');
+});
+
+test('Does not render a description by default', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.queryByText(/\w+/)).not.toBeInTheDocument();
+});
+
+test('Renders a description when description is passed', () => {
+  render(<Checkbox id="test-id" description="test description" />);
+
+  expect(screen.getByText('test description')).toBeVisible();
+});
+
+test(`Renders the passed description with the ${styles.checkDescription} className`, () => {
+  render(<Checkbox id="test-id" description="test description" />);
+
+  expect(screen.getByText('test description')).toHaveClass(styles.checkDescription, { exact: true });
+});
+
+test('Does not render a body by default', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.queryByText(/\w+/)).not.toBeInTheDocument();
+});
+
+test('Renders a body when body is passed', () => {
+  render(<Checkbox id="test-id" body="test body" />);
+
+  expect(screen.getByText('test body')).toBeVisible();
+});
+
+test(`Renders the passed body with the ${styles.checkBody} className`, () => {
+  render(<Checkbox id="test-id" body="test body" />);
+
+  expect(screen.getByText('test body')).toHaveClass(styles.checkBody, { exact: true });
+});
+
+test('Renders the check wrapper as a div by default', () => {
+  render(<Checkbox id="test-id" />);
+
+  expect(screen.getByRole('checkbox').parentElement?.tagName).toBe('DIV');
+});
+
+test('Renders with the provided component', () => {
+  render(<Checkbox id="test-id" component="span" />);
+
+  expect(screen.getByRole('checkbox').parentElement?.tagName).toBe('SPAN');
+});
+
+test(`Spreads additional props`, () => {
+  render(<Checkbox id="test-id" data-testid="test-id" />);
+
+  expect(screen.getByTestId('test-id')).toBeInTheDocument();
+});
+
+test(`Sets the checkbox as checked by default when defaultChecked is passed`, () => {
+  render(<Checkbox id="test-id" defaultChecked />);
+
+  expect(screen.getByRole('checkbox')).toBeChecked();
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(<Checkbox id="test-id" ouiaId="ouia-id" />);
+
+  expect(asFragment()).toMatchSnapshot();
 });