@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.8

package/src/components/Menu/examples/MenuFilterDrilldown.tsx

@@ -16,13 +16,18 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
   const [menuHeights, setMenuHeights] = React.useState<any>({});
   const [activeMenu, setActiveMenu] = React.useState<string>('filter_drilldown-rootMenu');
 
-  const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
+  const drillIn = (
+    _event: React.KeyboardEvent | React.MouseEvent,
+    fromMenuId: string,
+    toMenuId: string,
+    pathId: string
+  ) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
     setDrilldownPath([...drilldownPath, pathId]);
     setActiveMenu(toMenuId);
   };
 
-  const drillOut = (toMenuId: string) => {
+  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
     const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);
     const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);
     setMenuDrilledIn(menuDrilledInSansLast);
@@ -103,7 +108,7 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
                     value={startInput}
                     aria-label="Filter menu items"
                     type="search"
-                    onChange={value => handleStartTextInputChange(value)}
+                    onChange={(_event, value) => handleStartTextInputChange(value)}
                   />
                 </MenuInput>
                 <Divider component="li" />

package/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx

@@ -39,7 +39,7 @@ export const MenuFilteringWithSearchInput: React.FunctionComponent = () => {
           value={input}
           aria-label="Filter menu items"
           type="search"
-          onChange={value => handleTextInputChange(value)}
+          onChange={(_event, value) => handleTextInputChange(value)}
         />
       </MenuInput>
       <Divider />

package/src/components/Menu/examples/MenuOptionMultiSelect.tsx

@@ -15,9 +15,9 @@ export const MenuOptionMultiSelect: React.FunctionComponent = () => {
   };
 
   return (
-    <Menu onSelect={onSelect} activeItemId={0} selected={selectedItems}>
+    <Menu role="listbox" onSelect={onSelect} activeItemId={0} selected={selectedItems}>
       <MenuContent>
-        <MenuList>
+        <MenuList isAriaMultiselectable aria-label="Menu multi select example">
           <MenuItem itemId={0}>Option 1</MenuItem>
           <MenuItem itemId={1}>Option 2</MenuItem>
           <MenuItem icon={<TableIcon aria-hidden />} itemId={2}>

package/src/components/Menu/examples/MenuOptionSingleSelect.tsx

@@ -12,9 +12,9 @@ export const MenuOptionSingleSelect: React.FunctionComponent = () => {
   };
 
   return (
-    <Menu onSelect={onSelect} activeItemId={activeItem} selected={selectedItem}>
+    <Menu role="listbox" onSelect={onSelect} activeItemId={activeItem} selected={selectedItem}>
       <MenuContent>
-        <MenuList>
+        <MenuList aria-label="Menu single select example">
           <MenuItem itemId={0}>Option 1</MenuItem>
           <MenuItem itemId={1}>Option 2</MenuItem>
           <MenuItem icon={<TableIcon aria-hidden />} itemId={2}>

package/src/components/Menu/examples/MenuWithDrilldown.tsx

@@ -11,13 +11,18 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
   const [menuHeights, setMenuHeights] = React.useState<any>({});
   const [activeMenu, setActiveMenu] = React.useState<string>('drilldown-rootMenu');
 
-  const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
+  const drillIn = (
+    _event: React.KeyboardEvent | React.MouseEvent,
+    fromMenuId: string,
+    toMenuId: string,
+    pathId: string
+  ) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
     setDrilldownPath([...drilldownPath, pathId]);
     setActiveMenu(toMenuId);
   };
 
-  const drillOut = (toMenuId: string) => {
+  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
     const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);
     const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);
     setMenuDrilledIn(menuDrilledInSansLast);

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -52,7 +52,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     setWithMaxMenuHeight(checked);
   };
 
-  const drillOut = (toMenuId: string, fromPathId: string, breadcrumb: JSX.Element | null) => {
+  const drillOut = (
+    _event: React.KeyboardEvent<Element> | MouseEvent | React.MouseEvent<any, MouseEvent>,
+    toMenuId: string,
+    fromPathId: string,
+    breadcrumb: JSX.Element | null
+  ) => {
     setMenuDrilledIn(prevMenuDrilledIn => {
       const indexOfMenuId = prevMenuDrilledIn.indexOf(toMenuId);
       return prevMenuDrilledIn.slice(0, indexOfMenuId);
@@ -71,7 +76,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     }
   };
 
-  const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
+  const drillIn = (
+    _event: React.KeyboardEvent | React.MouseEvent,
+    fromMenuId: string,
+    toMenuId: string,
+    pathId: string
+  ) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
     setDrilldownPath([...drilldownPath, pathId]);
     setActiveMenu(toMenuId);
@@ -79,7 +89,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
 
   const startRolloutBreadcrumb = (
     <Breadcrumb>
-      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
+      <BreadcrumbItem
+        component="button"
+        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+      >
         Root
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Start rollout</BreadcrumbHeading>
@@ -88,7 +101,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
 
   const appGroupingBreadcrumb = (isOpen: boolean) => (
     <Breadcrumb>
-      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
+      <BreadcrumbItem
+        component="button"
+        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+      >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
@@ -104,8 +120,8 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
               key="dropdown-start"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={() =>
-                drillOut('breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
+              onClick={event =>
+                drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
               }
             >
               Start rollout
@@ -119,7 +135,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
 
   const labelsBreadcrumb = (isOpen: boolean) => (
     <Breadcrumb>
-      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
+      <BreadcrumbItem
+        component="button"
+        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
+      >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
@@ -135,7 +154,9 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
               key="dropdown-start"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={() => drillOut('breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)}
+              onClick={event =>
+                drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)
+              }
             >
               Start rollout
             </DropdownItem>
@@ -148,7 +169,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
 
   const pauseRolloutsBreadcrumb = (
     <Breadcrumb>
-      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
+      <BreadcrumbItem
+        component="button"
+        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+      >
         Root
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Pause rollouts</BreadcrumbHeading>
@@ -157,7 +181,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
 
   const pauseRolloutsAppGrpBreadcrumb = (isOpen: boolean) => (
     <Breadcrumb>
-      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
+      <BreadcrumbItem
+        component="button"
+        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+      >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
@@ -173,7 +200,9 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
               key="dropdown-pause"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)}
+              onClick={event =>
+                drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)
+              }
             >
               Pause rollouts
             </DropdownItem>
@@ -186,7 +215,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
 
   const pauseRolloutsLabelsBreadcrumb = (isOpen: boolean) => (
     <Breadcrumb>
-      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
+      <BreadcrumbItem
+        component="button"
+        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
+      >
         Root
       </BreadcrumbItem>
       <BreadcrumbItem isDropdown>
@@ -202,7 +234,9 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
               key="dropdown-pause"
               component="button"
               icon={<AngleLeftIcon />}
-              onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)}
+              onClick={event =>
+                drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)
+              }
             >
               Pause rollouts
             </DropdownItem>
@@ -215,7 +249,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
 
   const addStorageBreadcrumb = (
     <Breadcrumb>
-      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:storage', null)}>
+      <BreadcrumbItem
+        component="button"
+        onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:storage', null)}
+      >
         Root
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Add storage</BreadcrumbHeading>

package/src/components/Menu/examples/MenuWithDrilldownInitialState.tsx

@@ -14,13 +14,18 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
   const [menuHeights, setMenuHeights] = React.useState<any>({ 'initial-state-rootMenu': 216 }); // The root menu height must be defined when starting from a drilled in state
   const [activeMenu, setActiveMenu] = React.useState<string>('initial-state-drilldownMenuStartGrouping');
 
-  const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
+  const drillIn = (
+    _event: React.KeyboardEvent | React.MouseEvent,
+    fromMenuId: string,
+    toMenuId: string,
+    pathId: string
+  ) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
     setDrilldownPath([...drilldownPath, pathId]);
     setActiveMenu(toMenuId);
   };
 
-  const drillOut = (toMenuId: string) => {
+  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
     const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);
     const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);
     setMenuDrilledIn(menuDrilledInSansLast);

package/src/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx

@@ -11,13 +11,18 @@ export const MenuWithDrilldownSubmenuFunctions: React.FunctionComponent = () =>
   const [menuHeights, setMenuHeights] = React.useState<any>({});
   const [activeMenu, setActiveMenu] = React.useState<string>('functions-rootMenu');
 
-  const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
+  const drillIn = (
+    _event: React.KeyboardEvent | React.MouseEvent,
+    fromMenuId: string,
+    toMenuId: string,
+    pathId: string
+  ) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
     setDrilldownPath([...drilldownPath, pathId]);
     setActiveMenu(toMenuId);
   };
 
-  const drillOut = (toMenuId: string) => {
+  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
     const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);
     const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);
     setMenuDrilledIn(menuDrilledInSansLast);

package/src/components/Modal/examples/Modal.md

@@ -13,84 +13,119 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 ## Examples
 
-### Basic
+### Basic modals
+
+Basic modals give users the option to either confirm or cancel an action. To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
 
 ```ts file="./ModalBasic.tsx"
 ```
 
-### With description
+### Scrollable modals
+
+To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={0}` to the `<Modal>`.
+
+```ts file="ModalWithOverflowingContent.tsx"
+```
+
+### With a static description
+
+To provide additional information about a modal, use the `description` property. Descriptions are static and do not scroll with other modal content.
 
 ```ts file="./ModalWithDescription.tsx"
 ```
 
 ### Top aligned
 
+To override a modal's default center alignment, use the `position` property. In this example, `position` is set to "top", which moves the modal to the top of the screen.
+
 ```ts file="./ModalTopAligned.tsx"
 ```
 
-### Small
+### Small modal
+
+To adjust the size of a modal, use the `variant` property. Modal variants include "small", "medium", "large", and "default". 
+
+The following example displays a "small" modal by passing in `variant={ModalVariant.small}`.
 
 ```ts file="./ModalSmall.tsx"
 ```
 
-### Medium
+### Medium modal
+
+The following example displays a "medium" modal by passing in `variant={ModalVariant.medium}`.
 
 ```ts file="./ModalMedium.tsx"
 ```
 
-### Large
+### Large modal
+
+The following example displays a "large" modal by passing in `variant={ModalVariant.large}`.
 
 ```ts file="./ModalLarge.tsx"
 ```
 
 ### Custom width
 
+To choose a specific width for a modal, use the `width` property. The following example has a `width` of "50%".
+
 ```ts file="./ModalCustomWidth.tsx"
 ```
 
 ### Custom header and footer
 
+To add a custom header and footer to a modal, set the `header` and `footer` properties to a custom implementation. The following example passes title components into both the header and the footer and also passes an icon to the footer.
+
 ```ts file="./ModalCustomHeaderFooter.tsx"
 ```
 
 ### No header or footer
 
+To exclusively present information in a modal, remove the `header` and/or `footer`.
+
 ```ts file="./ModalNoHeaderFooter.tsx"
 ```
 
 ### Title icon
 
+To add an icon before a modal’s title, use the `titleIconVariant`, which can be set to one of the predefined variants -- "success", "danger", "warning", "info", and "default" -- or to an imported custom icon. The following example uses a "warning" variant.
+
 ```ts file="./ModalTitleIcon.tsx"
 ```
 
 ### Custom title icon
 
+To add a custom icon before a modal’s title, set `titleIconVariant` to an imported custom icon. The following example imports and uses a bullhorn icon.
+
 ```ts file="./ModalCustomTitleIcon.tsx"
 ```
 
 ### With wizard
 
+To guide users through a series of steps in a modal, you can add a [wizard](/components/wizard) to a modal. To configure the `<Wizard>`, pass an array that contains a “name” and “component” value for each step into the `steps` property.
+
 ```ts file="./ModalWithWizard.tsx"
 ```
 
 ### With dropdown
 
+To present a menu of actions or links to a user, you can add a [dropdown](/components/dropdown) to a modal. To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+
 ```ts file="./ModalWithDropdown.tsx"
 ```
 
 ### With help
 
+To help simplify and explain complex models, add a help [popover](/components/popover). Only place a help icon at the modal level if its information applies to all content in the modal. If the help popover is specific to a particular modal section, place the help icon beside that section instead.
+
 ```ts file="./ModalWithHelp.tsx"
 ```
 
 ### With form
 
-```ts file="ModalWithForm.tsx"
-```
-
-### With overflowing content
+To collect user input within a modal, you can add a [form](/components/form). 
 
-If the content that you're passing to the modal is likely to overflow the modal content area, pass `tabIndex={0}` to the modal to enable keyboard accessible scrolling.
+To submit the form from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id. 
 
-```ts file="ModalWithOverflowingContent.tsx"
+```ts file="ModalWithForm.tsx"
 ```
+

package/src/components/Nav/examples/NavDrilldown.tsx

@@ -51,13 +51,18 @@ export const NavigationDrilldown: React.FunctionComponent = () => {
   const [menuHeights, setMenuHeights] = React.useState<MenuHeights>({});
   const [activeMenu, setActiveMenu] = React.useState('rootMenu');
 
-  const onDrillIn = (fromItemId: string, toItemId: string, itemId: string) => {
+  const onDrillIn = (
+    _event: React.KeyboardEvent | React.MouseEvent,
+    fromItemId: string,
+    toItemId: string,
+    itemId: string
+  ) => {
     setMenuDrilledIn(prevMenuDrilledIn => [...prevMenuDrilledIn, fromItemId]);
     setDrilldownPath(prevDrilldownPath => [...prevDrilldownPath, itemId]);
     setActiveMenu(toItemId);
   };
 
-  const onDrillOut = (toItemId: string, _itemId: string) => {
+  const onDrillOut = (_event: React.KeyboardEvent | React.MouseEvent, toItemId: string, _itemId: string) => {
     setMenuDrilledIn(prevMenuDrilledIn => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1));
     setDrilldownPath(prevDrilldownPath => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1));
     setActiveMenu(toItemId);

package/src/components/NumberInput/NumberInput.tsx

@@ -51,6 +51,8 @@ export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   minusBtnProps?: ButtonProps;
   /** Additional properties added to the plus button */
   plusBtnProps?: ButtonProps;
+  /** Allow the user to clear out the input to an empty string (recommended) */
+  allowEmptyInput?: boolean;
 }
 
 type DefaultKeyDownHandlerArgs = Pick<NumberInputProps, 'inputName' | 'onMinus' | 'onPlus'>;
@@ -87,8 +89,12 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   inputProps,
   minusBtnProps,
   plusBtnProps,
+  allowEmptyInput = false,
   ...props
 }: NumberInputProps) => {
+  if (!allowEmptyInput) {
+    value = value || 0;
+  }
   const numberInputUnit = <div className={css(styles.numberInputUnit)}>{unit}</div>;
   const keyDownHandler =
     inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });

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

@@ -207,9 +207,15 @@ describe('numberInput', () => {
     expect(input).toHaveDisplayValue('0');
   });
 
-  test('renders nothing if null value passed', () => {
+  test('renders 0 if null value passed', () => {
     render(<NumberInput value={null} />);
     const input = screen.getByRole('spinbutton');
+    expect(input).toHaveDisplayValue('0');
+  });
+
+  test('renders nothing if null value passed with allow empty', () => {
+    render(<NumberInput allowEmptyInput value={null} />);
+    const input = screen.getByRole('spinbutton');
     expect(input).toHaveDisplayValue('');
   });
 

package/src/components/NumberInput/examples/NumberInputCustomStep.tsx

@@ -24,6 +24,7 @@ export const NumberInputCustomStep: React.FunctionComponent = () => {
       inputAriaLabel="number input"
       minusBtnAriaLabel="minus"
       plusBtnAriaLabel="plus"
+      allowEmptyInput
     />
   );
 };

package/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx

@@ -46,6 +46,7 @@ export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () =>
       inputAriaLabel="number input"
       minusBtnAriaLabel="minus"
       plusBtnAriaLabel="plus"
+      allowEmptyInput
     />
   );
 };

package/src/components/NumberInput/examples/NumberInputDefault.tsx

@@ -29,6 +29,7 @@ export const NumberInputDefault: React.FunctionComponent = () => {
       inputAriaLabel="number input"
       minusBtnAriaLabel="minus"
       plusBtnAriaLabel="plus"
+      allowEmptyInput
     />
   );
 };

package/src/components/NumberInput/examples/NumberInputDisabled.tsx

@@ -35,6 +35,7 @@ export const NumberInputDisabled: React.FunctionComponent = () => {
       plusBtnAriaLabel="plus"
       unit="%"
       isDisabled
+      allowEmptyInput
     />
   );
 };

package/src/components/NumberInput/examples/NumberInputUnit.tsx

@@ -37,6 +37,7 @@ export const NumberInputUnit: React.FunctionComponent = () => {
         minusBtnAriaLabel="minus 1"
         plusBtnAriaLabel="plus 1"
         unit="%"
+        allowEmptyInput
       />
       <br />
       <br />
@@ -51,6 +52,7 @@ export const NumberInputUnit: React.FunctionComponent = () => {
         plusBtnAriaLabel="plus 0.01"
         unit="$"
         unitPosition="before"
+        allowEmptyInput
       />
     </React.Fragment>
   );

package/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx

@@ -59,6 +59,7 @@ export const NumberInputUnitThreshold: React.FunctionComponent = () => {
         minusBtnAriaLabel="minus"
         plusBtnAriaLabel="plus"
         unit="%"
+        allowEmptyInput
       />
     </React.Fragment>
   );

package/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx

@@ -35,6 +35,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
         minusBtnAriaLabel="input 2 minus"
         plusBtnAriaLabel="input 2 plus"
         widthChars={1}
+        allowEmptyInput
       />
       <br />
       <br />
@@ -48,6 +49,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
         minusBtnAriaLabel="input 2 minus"
         plusBtnAriaLabel="input 2 plus"
         widthChars={10}
+        allowEmptyInput
       />
       <br />
       <br />
@@ -61,6 +63,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
         minusBtnAriaLabel="input 3 minus"
         plusBtnAriaLabel="input 3 plus"
         widthChars={5}
+        allowEmptyInput
       />
       <br />
       <br />
@@ -74,6 +77,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
         minusBtnAriaLabel="input 4 minus"
         plusBtnAriaLabel="input 4 plus"
         widthChars={5}
+        allowEmptyInput
       />
     </React.Fragment>
   );

package/src/components/NumberInput/examples/NumberInputWithStatus.tsx

@@ -53,6 +53,7 @@ export const NumberInputWithStatus: React.FunctionComponent = () => {
         inputAriaLabel="number input"
         minusBtnAriaLabel="minus"
         plusBtnAriaLabel="plus"
+        allowEmptyInput
       />
     </>
   );