@patternfly/react-core 4.198.17 → 4.198.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.198.17",
+  "version": "4.198.20",
   "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",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.49.17",
-    "@patternfly/react-styles": "^4.48.17",
-    "@patternfly/react-tokens": "^4.50.17",
+    "@patternfly/react-icons": "^4.49.20",
+    "@patternfly/react-styles": "^4.48.20",
+    "@patternfly/react-tokens": "^4.50.20",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.179.3",
+    "@patternfly/patternfly": "4.183.1",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "0a5989506d02f2a0eef3f0a714dbcee41c556494"
+  "gitHead": "bc50956d075edd59c346cfbc2b9635a850f057bb"
 }

package/src/components/AlertGroup/AlertGroup.tsx

@@ -14,6 +14,10 @@ export interface AlertGroupProps extends Omit<React.HTMLProps<HTMLUListElement>,
   isLiveRegion?: boolean;
   /** Determine where the alert is appended to */
   appendTo?: HTMLElement | (() => HTMLElement);
+  /** Function to call if user clicks on overflow message */
+  onOverflowClick?: () => void;
+  /** Custom text to show for the overflow message */
+  overflowMessage?: string;
 }
 
 interface AlertGroupState {
@@ -49,9 +53,16 @@ export class AlertGroup extends React.Component<AlertGroupProps, AlertGroupState
   }
 
   render() {
-    const { className, children, isToast, isLiveRegion, ...props } = this.props;
+    const { className, children, isToast, isLiveRegion, onOverflowClick, overflowMessage, ...props } = this.props;
     const alertGroup = (
-      <AlertGroupInline className={className} isToast={isToast} isLiveRegion={isLiveRegion} {...props}>
+      <AlertGroupInline
+        onOverflowClick={onOverflowClick}
+        className={className}
+        isToast={isToast}
+        isLiveRegion={isLiveRegion}
+        overflowMessage={overflowMessage}
+        {...props}
+      >
         {children}
       </AlertGroupInline>
     );

package/src/components/AlertGroup/AlertGroupInline.tsx

@@ -8,6 +8,8 @@ export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   children,
   isToast,
   isLiveRegion,
+  onOverflowClick,
+  overflowMessage,
   ...rest
 }: AlertGroupProps) => (
   <ul
@@ -19,6 +21,13 @@ export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
     {React.Children.toArray(children).map((Alert: React.ReactNode, index: number) => (
       <li key={index}>{Alert}</li>
     ))}
+    {overflowMessage && (
+      <li>
+        <button onClick={onOverflowClick} className={css(styles.alertGroupOverflowButton)}>
+          {overflowMessage}
+        </button>
+      </li>
+    )}
   </ul>
 );
 AlertGroupInline.displayName = 'AlertGroupInline';

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

@@ -28,6 +28,21 @@ test('Alert Group works with n children', () => {
   expect(view).toBeTruthy();
 });
 
+test('Alert group overflow shows up', () => {
+  const overflowMessage = "View 2 more alerts";
+  const onOverflowClick = jest.fn();
+  const wrapper = mount(
+    <AlertGroup overflowMessage={overflowMessage} onOverflowClick={onOverflowClick}>
+      <Alert variant="danger" title="alert title" />
+    </AlertGroup>
+  )
+  expect(wrapper.find('.pf-c-alert-group > li')).toHaveLength(2);
+  expect(wrapper.find('.pf-c-alert-group__overflow-button').text()).toContain(overflowMessage);
+  expect(wrapper).toMatchSnapshot();
+  wrapper.find('.pf-c-alert-group__overflow-button').simulate('click');
+  expect(onOverflowClick).toBeCalled();
+});
+
 test('Standard Alert Group is not a toast alert group', () => {
   const wrapper = mount(
     <AlertGroup>

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

@@ -8,6 +8,95 @@ exports[`Alert Group should match snapshot 1`] = `
 </div>
 `;
 
+exports[`Alert group overflow shows up 1`] = `
+<AlertGroup
+  onOverflowClick={[MockFunction]}
+  overflowMessage="View 2 more alerts"
+>
+  <AlertGroupInline
+    onOverflowClick={[MockFunction]}
+    overflowMessage="View 2 more alerts"
+  >
+    <ul
+      aria-atomic={null}
+      aria-live={null}
+      className="pf-c-alert-group"
+    >
+      <li
+        key="0"
+      >
+        <Alert
+          key=".0"
+          title="alert title"
+          variant="danger"
+        >
+          <div
+            aria-label="Danger Alert"
+            className="pf-c-alert pf-m-danger"
+            data-ouia-component-id="OUIA-Generated-Alert-danger-1"
+            data-ouia-component-type="PF4/Alert"
+            data-ouia-safe={true}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+          >
+            <AlertIcon
+              variant="danger"
+            >
+              <div
+                className="pf-c-alert__icon"
+              >
+                <ExclamationCircleIcon
+                  color="currentColor"
+                  noVerticalAlign={false}
+                  size="sm"
+                >
+                  <svg
+                    aria-hidden={true}
+                    aria-labelledby={null}
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    style={
+                      Object {
+                        "verticalAlign": "-0.125em",
+                      }
+                    }
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                    />
+                  </svg>
+                </ExclamationCircleIcon>
+              </div>
+            </AlertIcon>
+            <h4
+              className="pf-c-alert__title"
+            >
+              <span
+                className="pf-u-screen-reader"
+              >
+                Danger alert:
+              </span>
+              alert title
+            </h4>
+          </div>
+        </Alert>
+      </li>
+      <li>
+        <button
+          className="pf-c-alert-group__overflow-button"
+          onClick={[MockFunction]}
+        >
+          View 2 more alerts
+        </button>
+      </li>
+    </ul>
+  </AlertGroupInline>
+</AlertGroup>
+`;
+
 exports[`Standard Alert Group is not a toast alert group 1`] = `
 <AlertGroup>
   <AlertGroupInline>
@@ -27,7 +116,7 @@ exports[`Standard Alert Group is not a toast alert group 1`] = `
           <div
             aria-label="Danger Alert"
             className="pf-c-alert pf-m-danger"
-            data-ouia-component-id="OUIA-Generated-Alert-danger-1"
+            data-ouia-component-id="OUIA-Generated-Alert-danger-2"
             data-ouia-component-type="PF4/Alert"
             data-ouia-safe={true}
             onMouseEnter={[Function]}
@@ -215,6 +304,7 @@ exports[`alertgroup closes when alerts are closed 1`] = `
 <AlertGroup
   appendTo={
     <body>
+      <div />
       <div />
       <div>
         <ul
@@ -420,6 +510,7 @@ exports[`alertgroup closes when alerts are closed 1`] = `
     <AlertGroupInline
       appendTo={
         <body>
+          <div />
           <div />
           <div>
             <ul
@@ -547,6 +638,7 @@ exports[`alertgroup closes when alerts are closed 1`] = `
       <ul
         appendTo={
           <body>
+            <div />
             <div />
             <div>
               <ul

package/src/components/AlertGroup/examples/AlertGroup.md

@@ -78,6 +78,79 @@ class ToastAlertGroup extends React.Component {
 }
 ```
 
+### Toast alert group with overflow capture
+After a specified number of alerts displayed is reached, we will see an overflow message instead of new alerts. Alerts asynchronously appended into dynamic AlertGroups with `isLiveRegion` will be announced to assistive technology at the moment the change happens. When the overflow message appears or is updated in AlertGroups with `isLiveRegion`, the `View 1 more alert` text will be read, but the alert message will not be read. screen reader user or keyboard user will need a way to navigate to and reveal the hidden alerts before they disappear. Alternatively, there should be a place that notifications or alerts are collected to be viewed or read later. In this example we are showing a max of 4 alerts.
+```js isBeta
+import React from 'react';
+import { Alert, AlertGroup, AlertActionCloseButton, AlertVariant, InputGroup } from '@patternfly/react-core';
+class ToastAlertGroup extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      alerts: [],
+      maxDisplayed: "4",
+      overflowMessage: ''
+    };
+    this.getOverflowMessage = (alertsNumber) => {
+      const overflow = alertsNumber - this.state.maxDisplayed;
+      if (overflow > 0) {
+        return "View " + (overflow) + " more alerts";
+      }
+      return '';
+    };
+    this.addAlert = (title, variant, key) => {
+      this.setState({
+        ...this.state,
+        alerts: [ ...this.state.alerts, { title: title, variant: variant, key }],
+        overflowMessage: this.getOverflowMessage(this.state.alerts.length + 1)
+      });
+    };
+    this.removeAlert = key => {
+      const newAlerts = [...this.state.alerts.filter(el => el.key !== key)];
+      this.setState({
+        ...this.state,
+        alerts: newAlerts,
+        overflowMessage: this.getOverflowMessage(newAlerts.length)
+      });
+    };
+  }
+  render() {
+    const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+    const getUniqueId = () => (new Date().getTime());
+    const addSuccessAlert = () => { this.addAlert('Toast success alert', 'success', getUniqueId()) };
+    const addDangerAlert = () => { this.addAlert('Toast danger alert', 'danger', getUniqueId()) };
+    const addInfoAlert = () => { this.addAlert('Toast info alert', 'info', getUniqueId()) };
+    const onOverflowClick = () => {
+      console.log('Overflow message clicked');
+    };
+    return (
+      <React.Fragment>
+        <InputGroup style={{ marginBottom: '16px' }}>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>Add toast success alert</button>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>Add toast danger alert</button>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>Add toast info alert</button>
+        </InputGroup>
+        <AlertGroup isToast isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={this.state.overflowMessage}>
+          {this.state.alerts.slice(0, this.state.maxDisplayed).map(({key, variant, title}) => (
+            <Alert
+              variant={AlertVariant[variant]}
+              title={title}
+              actionClose={
+                <AlertActionCloseButton
+                  title={title}
+                  variantLabel={`${variant} alert`}
+                  onClose={() => this.removeAlert(key)}
+                />
+              }
+              key={key} />
+          ))}
+        </AlertGroup>
+      </React.Fragment>
+    );
+  }
+}
+```
+
 ### Singular dynamic alert group
 This alert will appear in the page, most likely in response to a user action.
 ```js
@@ -131,6 +204,80 @@ class SingularAdditiveAlertGroup extends React.Component {
 }
 ```
 
+### Singular dynamic alert group with overflow message
+This alert will appear in the page, most likely in response to a user action. In this example we are showing a max of 4 alerts.
+```js isBeta
+import React from 'react';
+import { Alert, AlertGroup, AlertVariant, AlertActionCloseButton, InputGroup } from '@patternfly/react-core';
+class SingularAdditiveAlertGroup extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      alerts: [],
+      maxDisplayed: "4",
+      overflowMessage: ''
+    };
+    this.getOverflowMessage = (alertsNumber) => {
+      const overflow = alertsNumber - this.state.maxDisplayed;
+      if (overflow > 0) {
+        return "View " + (overflow) + " more alerts";
+      }
+      return '';
+    };
+    this.addAlert = (title, variant, key) => {
+      this.setState({
+        ...this.state,
+        alerts: [ ...this.state.alerts, { title: title, variant: variant, key }],
+        overflowMessage: this.getOverflowMessage(this.state.alerts.length + 1)
+      });
+    };
+    this.removeAlert = key => {
+      const newAlerts = [...this.state.alerts.filter(el => el.key !== key)];
+      this.setState({
+        ...this.state,
+        alerts: newAlerts,
+        overflowMessage: this.getOverflowMessage(newAlerts.length)
+      });
+    };
+  }
+  render() {
+    const btnClasses = ['pf-c-button', 'pf-m-secondary'].join(' ');
+    const getUniqueId = () => (new Date().getTime());
+    const addSuccessAlert = () => { this.addAlert('Single success alert', 'success', getUniqueId()) };
+    const addDangerAlert = () => { this.addAlert('Single danger alert', 'danger', getUniqueId()) };
+    const addInfoAlert = () => { this.addAlert('Single info alert', 'info', getUniqueId()) };
+    const onOverflowClick = () => {
+      console.log('Overflow message clicked');
+    };
+    return (
+      <React.Fragment>
+        <InputGroup style={{ marginBottom: '16px' }}>
+          <button onClick={addSuccessAlert} type="button" className={btnClasses}>Add single success alert</button>
+          <button onClick={addDangerAlert} type="button" className={btnClasses}>Add single danger alert</button>
+          <button onClick={addInfoAlert} type="button" className={btnClasses}>Add single info alert</button>
+        </InputGroup>
+        <AlertGroup isLiveRegion overflowMessage={this.state.overflowMessage} onOverflowClick={onOverflowClick}>
+          {this.state.alerts.slice(0, this.state.maxDisplayed).map(({ title, variant, key }) => (
+            <Alert
+              isInline
+              variant={AlertVariant[variant]}
+              title={title}
+              key={key}
+              actionClose={
+                <AlertActionCloseButton
+                  title={title}
+                  variantLabel={`${variant} alert`}
+                  onClose={() => this.removeAlert(key)}
+                />
+              }/>
+          ))}
+        </AlertGroup>
+      </React.Fragment>
+    );
+  }
+}
+```
+
 ### Multiple dynamic alert group
 These alerts will appear in the page, most likely in response to a user action.
 ```js

package/src/components/NumberInput/NumberInput.tsx

@@ -83,6 +83,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   const numberInputUnit = <div className={css(styles.numberInputUnit)}>{unit}</div>;
   const keyDownHandler =
     inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });
+
   return (
     <div
       className={css(styles.numberInput, className)}
@@ -99,7 +100,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
         <Button
           variant="control"
           aria-label={minusBtnAriaLabel}
-          isDisabled={isDisabled || value === min}
+          isDisabled={isDisabled || value <= min}
           onClick={evt => onMinus(evt, inputName)}
           {...minusBtnProps}
         >
@@ -122,7 +123,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
         <Button
           variant="control"
           aria-label={plusBtnAriaLabel}
-          isDisabled={isDisabled || value === max}
+          isDisabled={isDisabled || value >= max}
           onClick={evt => onPlus(evt, inputName)}
           {...plusBtnProps}
         >

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

@@ -159,9 +159,20 @@ class UnitThresholdNumberInput extends React.Component {
     this.minValue = 0;
     this.maxValue = 10;
 
+    this.normalizeBetween = (value, min, max) => {
+      if (min !== undefined && max !== undefined) {
+        return Math.max(Math.min(value, max), min);
+      } else if (value <= min) {
+        return min;
+      } else if (value >= max) {
+        return max;
+      }
+      return value;
+    };
+
     this.onMinus = () => {
       this.setState({
-        value: this.state.value - 1
+        value: this.normalizeBetween(this.state.value - 1, this.minValue, this.maxValue)
       });
     };
 
@@ -174,7 +185,7 @@ class UnitThresholdNumberInput extends React.Component {
 
     this.onPlus = () => {
       this.setState({
-        value: this.state.value + 1
+        value: this.normalizeBetween(this.state.value + 1, this.minValue, this.maxValue)
       });
     };
   }
@@ -369,12 +380,12 @@ class CustomStepNumberInput extends React.Component {
     super(props);
     this.state = {
       value: 90,
-      step: 3,
+      step: 3
     };
 
     this.stepper = step => () => {
-      this.setState(prev => ({...prev, value: prev.value + step }))
-    }
+      this.setState(prev => ({ ...prev, value: prev.value + step }));
+    };
 
     this.onChange = event => {
       this.setState({
@@ -400,3 +411,65 @@ class CustomStepNumberInput extends React.Component {
   }
 }
 ```
+
+### Custom increment/decrement and thresholds
+
+```js
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+class CustomStepNumberInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 90,
+      step: 3
+    };
+    this.minValue = 90;
+    this.maxValue = 100;
+
+    this.normalizeBetween = (value, min, max) => {
+      if (min !== undefined && max !== undefined) {
+        return Math.max(Math.min(value, max), min);
+      } else if (value <= min) {
+        return min;
+      } else if (value >= max) {
+        return max;
+      }
+      return value;
+    };
+
+    this.stepper = step => () => {
+      this.setState(prev => ({
+        ...prev,
+        value: this.normalizeBetween(prev.value + step, this.minValue, this.maxValue)
+      }));
+    };
+
+    this.onChange = event => {
+      const newValue = isNaN(event.target.value) ? 0 : Number(event.target.value);
+      this.setState({
+        value: newValue > this.maxValue ? this.maxValue : newValue < this.minValue ? this.minValue : newValue
+      });
+    };
+  }
+
+  render() {
+    const { value } = this.state;
+    return (
+      <NumberInput
+        value={value}
+        min={this.minValue}
+        max={this.maxValue}
+        onMinus={this.stepper(-3)}
+        onChange={this.onChange}
+        onPlus={this.stepper(3)}
+        inputName="input"
+        inputAriaLabel="number input"
+        minusBtnAriaLabel="minus"
+        plusBtnAriaLabel="plus"
+      />
+    );
+  }
+}
+```