@patternfly/react-core 5.0.0-alpha.41 → 5.0.0-alpha.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.41",
+  "version": "5.0.0-alpha.43",
   "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",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "c8a84859edab851733312c80d2f83689610d1e9b"
+  "gitHead": "1c0a7e2579922f20207946a8f8beb0fe1217ed34"
 }

package/src/components/Banner/Banner.tsx

@@ -14,7 +14,7 @@ export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
    */
   screenReaderText?: string;
   /** Variant styles for the banner. */
-  variant?: 'default' | 'info' | 'danger' | 'success' | 'warning';
+  variant?: 'default' | 'blue' | 'red' | 'green' | 'gold';
 }
 
 export const Banner: React.FunctionComponent<BannerProps> = ({
@@ -28,7 +28,7 @@ export const Banner: React.FunctionComponent<BannerProps> = ({
   <div
     className={css(
       styles.banner,
-      styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'],
+      styles.modifiers[variant as 'green' | 'red' | 'gold' | 'blue'],
       isSticky && styles.modifiers.sticky,
       className
     )}

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

@@ -31,24 +31,24 @@ test('Renders without any modifier class when variant prop is not passed', () =>
   expect(screen.getByText('Test')).toHaveClass('pf-c-banner', { exact: true });
 });
 
-test('Renders with class name pf-m-success when "success" is passed to variant prop', () => {
-  render(<Banner variant="success">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-success');
+test('Renders with class name pf-m-green when "green" is passed to variant prop', () => {
+  render(<Banner variant="green">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-green');
 });
 
-test('Renders with class name pf-m-danger when "danger" is passed to variant prop', () => {
-  render(<Banner variant="danger">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-danger');
+test('Renders with class name pf-m-red when "red" is passed to variant prop', () => {
+  render(<Banner variant="red">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-red');
 });
 
-test('Renders with class name pf-m-warning when "warning" is passed to variant prop', () => {
-  render(<Banner variant="warning">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-warning');
+test('Renders with class name pf-m-gold when "gold" is passed to variant prop', () => {
+  render(<Banner variant="gold">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-gold');
 });
 
-test('Renders with class name pf-m-info when "info" is passed to variant prop', () => {
-  render(<Banner variant="info">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-info');
+test('Renders with class name pf-m-blue when "blue" is passed to variant prop', () => {
+  render(<Banner variant="blue">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-blue');
 });
 
 test('Does not render pf-u-screen-reader class by default', () => {

package/src/components/Banner/examples/BannerBasic.tsx

@@ -5,12 +5,12 @@ export const BannerBasic: React.FunctionComponent = () => (
   <>
     <Banner>Default banner</Banner>
     <br />
-    <Banner variant="info">Blue banner</Banner>
+    <Banner variant="blue">Blue banner</Banner>
     <br />
-    <Banner variant="danger">Red banner</Banner>
+    <Banner variant="red">Red banner</Banner>
     <br />
-    <Banner variant="success">Green banner</Banner>
+    <Banner variant="green">Green banner</Banner>
     <br />
-    <Banner variant="warning">Gold banner</Banner>
+    <Banner variant="gold">Gold banner</Banner>
   </>
 );

package/src/components/Banner/examples/BannerStatus.tsx

@@ -17,7 +17,7 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Info banner" variant="info">
+    <Banner screenReaderText="Info banner" variant="blue">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <InfoCircleIcon />
@@ -26,7 +26,7 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Danger banner" variant="danger">
+    <Banner screenReaderText="Danger banner" variant="red">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <ExclamationCircleIcon />
@@ -35,7 +35,7 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Success banner" variant="success">
+    <Banner screenReaderText="Success banner" variant="green">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <CheckCircleIcon />
@@ -44,7 +44,7 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Warning banner" variant="warning">
+    <Banner screenReaderText="Warning banner" variant="gold">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <ExclamationTriangleIcon />

package/src/components/Dropdown/DropdownToggleCheckbox.tsx

@@ -21,7 +21,7 @@ export interface DropdownToggleCheckboxProps
   /** Alternate Flag to show if the checkbox is checked */
   checked?: boolean | null;
   /** A callback for when the checkbox selection changes */
-  onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
   /** Element to be rendered inside the <span> */
   children?: React.ReactNode;
   /** Id of the checkbox */
@@ -55,7 +55,7 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
   }
 
   handleChange = (event: React.FormEvent<HTMLInputElement>) => {
-    this.props.onChange?.((event.target as HTMLInputElement).checked, event);
+    this.props.onChange?.(event, (event.target as HTMLInputElement).checked);
   };
 
   calculateChecked = () => {
@@ -111,7 +111,7 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
           {...props}
           {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
           type="checkbox"
-          ref={elem => elem && (elem.indeterminate = isChecked === null)}
+          ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
           aria-invalid={!isValid}
           disabled={isDisabled}
           checked={this.calculateChecked()}

package/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx

@@ -56,10 +56,10 @@ describe('DropdownToggleCheckbox', () => {
 
   test('checkbox passes value and event to onChange handler', async () => {
     const user = userEvent.setup();
-    
+
     render(<DropdownToggleCheckbox id="check" {...props} aria-label="check" />);
 
     await user.click(screen.getByRole('checkbox'));
-    expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
+    expect(props.onChange).toHaveBeenCalledWith(expect.any(Object), true);
   });
 });

package/src/components/Dropdown/examples/DropdownSplitButtonProgressCheckbox.tsx

@@ -97,7 +97,7 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
           <DropdownToggle
             splitButtonItems={[
               <DropdownToggleCheckbox
-                onChange={onChange1}
+                onChange={(_, checked) => onChange1(checked)}
                 isChecked={isChecked1}
                 isInProgress={!isTimedOut1}
                 id="split-button-progress-toggle-checkbox"
@@ -118,7 +118,7 @@ export const DropdownSplitButtonProgressCheckbox: React.FunctionComponent = () =
           <DropdownToggle
             splitButtonItems={[
               <DropdownToggleCheckbox
-                onChange={onChange2}
+                onChange={(_, checked) => onChange2(checked)}
                 isChecked={isChecked2}
                 isInProgress={!isTimedOut2}
                 id="split-button-progress-text-checkbox"