@patternfly/react-core 4.224.3 → 4.224.6

package/src/components/Modal/examples/ModalWithWizard.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Modal, ModalVariant, Button, Wizard } from '@patternfly/react-core';
+
+export const ModalWithWizard: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const steps = [
+    { name: 'Step 1', component: <p>Step 1</p> },
+    { name: 'Step 2', component: <p>Step 2</p> },
+    { name: 'Step 3', component: <p>Step 3</p> },
+    { name: 'Step 4', component: <p>Step 4</p> },
+    { name: 'Review', component: <p>Review Step</p>, nextButtonText: 'Finish' }
+  ];
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show wizard modal
+      </Button>
+      <Modal
+        variant={ModalVariant.large}
+        showClose={false}
+        isOpen={isModalOpen}
+        aria-labelledby="modal-wizard-label"
+        aria-describedby="modal-wizard-description"
+        onClose={handleModalToggle}
+        hasNoBodyWrapper
+      >
+        <Wizard
+          titleId="modal-wizard-label"
+          descriptionId="modal-wizard-description"
+          title="Wizard modal"
+          description="This is a wizard inside of a modal."
+          steps={steps}
+          onClose={handleModalToggle}
+          height={400}
+        />
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/components/NotificationBadge/examples/NotificationBadge.md

@@ -8,79 +8,11 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import './notificationBadge.css';
 
 ## Examples
-### Basic
-```js
-import React from 'react';
-import { NotificationBadge } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-
-class SimpleNotificationBadge extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      unreadVariant: 'unread',
-      attentionVariant: 'attention'
-    };
-    this.onFirstClick = () => {
-      this.setState({
-        unreadVariant: 'read'
-      });
-    };
-    this.onSecondClick = () => {
-      this.setState({
-        attentionVariant: 'read'
-      });
-    };
-  }
 
-  render() {
-    const { unreadVariant, attentionVariant } = this.state;
-    return (
-      <div className="pf-t-dark">
-        <NotificationBadge variant={unreadVariant} onClick={this.onFirstClick} aria-label="First notifications" />
-        <NotificationBadge variant={attentionVariant} onClick={this.onSecondClick} aria-label="Second notifications" />
-      </div>
-    );
-  }
-}
+### Basic
+```ts file='./NotificationBadgeBasic.tsx' 
 ```
 
-## Examples
 ### With count
-```js
-import React from 'react';
-import { NotificationBadge } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-
-class NotificationBadgeWithCount extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      firstVariant: 'unread',
-      firstCount: 30,
-      secondVariant: 'attention',
-      secondCount: 30
-    };
-    this.onFirstClick = () => {
-      this.setState({
-        firstVariant: 'read',
-      });
-    };
-    this.onSecondClick = () => {
-      this.setState({
-        secondVariant: 'read'
-      });
-    };
-  }
-
-  render() {
-    const { firstVariant, firstCount, secondVariant, secondCount } = this.state;
-    return (
-      <div className="pf-t-dark">
-        <NotificationBadge variant={firstVariant} onClick={this.onFirstClick} aria-label="First notifications" count={firstCount} />
-        <NotificationBadge variant={secondVariant} onClick={this.onSecondClick} aria-label="Second notifications" count={secondCount} />
-      </div>
-    );
-  }
-}
-```
+```ts file='./NotificationBadgeWithCount.tsx' 
+```

package/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core';
+
+export const SimpleNotificationBadge: React.FunctionComponent = () => {
+  const [unreadVariant, setUnreadVariant] = React.useState(NotificationBadgeVariant.unread);
+  const [attentionVariant, setAttentionVariant] = React.useState(NotificationBadgeVariant.attention);
+
+  const onFirstClick = (value: NotificationBadgeVariant) => {
+    setUnreadVariant(value);
+  };
+
+  const onSecondClick = (value: NotificationBadgeVariant) => {
+    setAttentionVariant(value);
+  };
+
+  return (
+    <div className="pf-t-dark">
+      <NotificationBadge
+        variant={unreadVariant}
+        onClick={() => onFirstClick(NotificationBadgeVariant.read)}
+        aria-label="First notifications"
+      />
+      <NotificationBadge
+        variant={attentionVariant}
+        onClick={() => onSecondClick(NotificationBadgeVariant.read)}
+        aria-label="Second notifications"
+      />
+    </div>
+  );
+};

package/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core';
+
+export const NotificationBadgeWithCount: React.FunctionComponent = () => {
+  const [firstVariant, setFirstVariant] = React.useState(NotificationBadgeVariant.unread);
+  const [firstVariantCount, setFirstVariantCount] = React.useState(30);
+  const [secondVariant, setSecondVariant] = React.useState(NotificationBadgeVariant.attention);
+  const [secondVariantCount, setSecondVariantCount] = React.useState(30);
+
+  const onFirstClick = (value: NotificationBadgeVariant) => {
+    setFirstVariant(value);
+    setFirstVariantCount(10);
+  };
+
+  const onSecondClick = (value: NotificationBadgeVariant) => {
+    setSecondVariant(value);
+    setSecondVariantCount(10);
+  };
+
+  return (
+    <div className="pf-t-dark">
+      <NotificationBadge
+        variant={firstVariant}
+        onClick={() => onFirstClick(NotificationBadgeVariant.read)}
+        aria-label="First notifications"
+        count={firstVariantCount}
+      />
+      <NotificationBadge
+        variant={secondVariant}
+        onClick={() => onSecondClick(NotificationBadgeVariant.read)}
+        aria-label="Second notifications"
+        count={secondVariantCount}
+      />
+    </div>
+  );
+};

package/src/components/NumberInput/NumberInput.tsx

@@ -87,6 +87,16 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   const keyDownHandler =
     inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });
 
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    event.target.value = Number(event.target.value).toString();
+    if (onChange) {
+      onChange(event);
+    }
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+
   return (
     <div
       className={css(styles.numberInput, className)}
@@ -119,7 +129,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           aria-label={inputAriaLabel}
           {...(isDisabled && { disabled: isDisabled })}
           {...(onChange && { onChange })}
-          {...(onBlur && { onBlur })}
+          onBlur={handleBlur}
           {...(!onChange && { readOnly: true })}
           {...inputProps}
           onKeyDown={keyDownHandler}

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { NumberInput } from '../NumberInput';
+import userEvent from '@testing-library/user-event';
 
 describe('numberInput', () => {
   test('renders defaults & extra props', () => {
@@ -60,4 +61,96 @@ describe('numberInput', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('renders negative value', () => {
+    render(<NumberInput value={-999} />);
+    expect(screen.getByDisplayValue('-999')).toBeInTheDocument();
+  });
+
+  test('renders decimal value', () => {
+    render(<NumberInput value={5.5} />);
+    expect(screen.getByDisplayValue('5.5')).toBeInTheDocument();
+  });
+
+  test('renders negative decimal value', () => {
+    render(<NumberInput value={-5.2} />);
+    expect(screen.getByDisplayValue('-5.2')).toBeInTheDocument();
+  });
+
+  test('does not call onChange callback when the input does not change', () => {
+    const onChangeMock = jest.fn();
+
+    render(<NumberInput onChange={onChangeMock}>5</NumberInput>);
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+  });
+
+  test('calls onChange callback when input changes', () => {
+    const onChangeMock = jest.fn();
+    render(<NumberInput onChange={onChangeMock}>55</NumberInput>);
+
+    const input = screen.getByRole('spinbutton');
+    userEvent.type(input, '55');
+
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+  });
+
+  test('does not call onBlur callback when input does not lose focus', () => {
+    const onBlurMock = jest.fn();
+
+    render(<NumberInput onBlur={onBlurMock}>5</NumberInput>);
+
+    const input = screen.getByRole('spinbutton');
+    userEvent.click(input);
+
+    expect(onBlurMock).not.toHaveBeenCalled();
+  });
+
+  test('calls onBlur callback when input loses focus', () => {
+    const onBlurMock = jest.fn();
+
+    render(<NumberInput onBlur={onBlurMock}>5</NumberInput>);
+
+    const input = screen.getByRole('spinbutton');
+    userEvent.click(input);
+    userEvent.click(document.body);
+
+    expect(onBlurMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('removes leading zeros from a positive whole number', () => {
+    render(<NumberInput value={10} onChange={() => {}} />);
+  
+    const input = screen.getByRole('spinbutton');
+    userEvent.type(input, '{arrowleft}{arrowleft}0');
+    expect(input).toHaveDisplayValue('010');
+  
+    userEvent.click(document.body);
+  
+    expect(input).toHaveDisplayValue('10');
+  });
+
+  test('removes leading zeros from a negative whole number', () => {
+    render(<NumberInput value={-18} onChange={() => {}} />);
+  
+    const input = screen.getByRole('spinbutton');
+    userEvent.type(input, '{arrowleft}{arrowleft}0');
+    expect(input).toHaveDisplayValue('-018');
+  
+    userEvent.click(document.body);
+  
+    expect(input).toHaveDisplayValue('-18');
+  });
+
+  test('removes leading zeros from a decimal number', () => {
+    render(<NumberInput value={47.01} onChange={() => {}} />);
+  
+    const input = screen.getByRole('spinbutton');
+    userEvent.type(input, '{arrowleft}{arrowleft}{arrowleft}{arrowleft}{arrowleft}0');
+    expect(input).toHaveDisplayValue('047.01');
+  
+    userEvent.click(document.body);
+  
+    expect(input).toHaveDisplayValue('47.01');
+  });
 });

package/src/components/NumberInput/examples/NumberInput.md

@@ -96,7 +96,6 @@ class UnitNumberInput extends React.Component {
     };
 
     this.onChange2 = event => {
-      console.log(event.target.value);
       this.setState({
         value2: event.target.value
       });