@patternfly/react-core 4.232.11 → 4.233.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.232.11",
+  "version": "4.233.0",
   "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",
@@ -50,16 +50,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.83.11",
-    "@patternfly/react-styles": "^4.82.11",
-    "@patternfly/react-tokens": "^4.84.11",
+    "@patternfly/react-icons": "^4.84.0",
+    "@patternfly/react-styles": "^4.83.0",
+    "@patternfly/react-tokens": "^4.85.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.208.1",
+    "@patternfly/patternfly": "4.209.0",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
@@ -76,5 +76,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "3b4fe0a85d88aa9616d7a6768d187d6fc87abb32"
+  "gitHead": "816b8605d11e6374b6f6b4c5d6da80d43265fc70"
 }

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -1,13 +1,19 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
 import { css } from '@patternfly/react-styles';
+import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { PickOptional } from '../../helpers/typeUtils';
 
+export enum ExpandableSectionVariant {
+  default = 'default',
+  truncate = 'truncate'
+}
+
 export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the Expandable Component */
+  /** Content rendered inside the expandable section. */
   children?: React.ReactNode;
-  /** Additional classes added to the Expandable Component */
+  /** Additional classes added to the expandable section. */
   className?: string;
   /** Flag to indicate if the content is expanded */
   isExpanded?: boolean;
@@ -19,7 +25,7 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
   toggleTextCollapsed?: string;
   /** React node that appears in the attached toggle in place of toggle text */
   toggleContent?: React.ReactNode;
-  /** Callback function to toggle the expandable content. Detached expandable sections should use the onToggle property of ExpandableSectionToggle. */
+  /** Callback function to toggle the expandable section. Detached expandable sections should use the onToggle property of the expandable section toggle sub-component. */
   onToggle?: (isExpanded: boolean) => void;
   /** Forces active state */
   isActive?: boolean;
@@ -33,12 +39,27 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
   isWidthLimited?: boolean;
   /** Flag to indicate if the content is indented */
   isIndented?: boolean;
+  /** @beta Determines the variant of the expandable section. When passing in "truncate" as the
+   * variant, the expandable content will be truncated after 3 lines by default.
+   */
+  variant?: 'default' | 'truncate';
+  /** @beta Truncates the expandable content to the specified number of lines when using the
+   * "truncate" variant. */
+  truncateMaxLines?: number;
 }
 
 interface ExpandableSectionState {
   isExpanded: boolean;
 }
 
+const setLineClamp = (lines: number, element: HTMLDivElement) => {
+  if (!element || lines < 1) {
+    return;
+  }
+
+  element.style.setProperty(lineClamp.name, lines.toString());
+};
+
 export class ExpandableSection extends React.Component<ExpandableSectionProps, ExpandableSectionState> {
   static displayName = 'ExpandableSection';
   constructor(props: ExpandableSectionProps) {
@@ -49,6 +70,7 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     };
   }
 
+  expandableContentRef = React.createRef<HTMLDivElement>();
   static defaultProps: PickOptional<ExpandableSectionProps> = {
     className: '',
     toggleText: '',
@@ -61,7 +83,8 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     displaySize: 'default',
     isWidthLimited: false,
     isIndented: false,
-    contentId: ''
+    contentId: '',
+    variant: 'default'
   };
 
   private calculateToggleText(
@@ -79,6 +102,23 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     return toggleText;
   }
 
+  componentDidMount() {
+    if (this.props.variant === ExpandableSectionVariant.truncate && this.props.truncateMaxLines) {
+      const expandableContent = this.expandableContentRef.current;
+      setLineClamp(this.props.truncateMaxLines, expandableContent);
+    }
+  }
+
+  componentDidUpdate(prevProps: ExpandableSectionProps) {
+    if (
+      this.props.variant === ExpandableSectionVariant.truncate &&
+      prevProps.truncateMaxLines !== this.props.truncateMaxLines
+    ) {
+      const expandableContent = this.expandableContentRef.current;
+      setLineClamp(this.props.truncateMaxLines, expandableContent);
+    }
+  }
+
   render() {
     const {
       onToggle: onToggleProp,
@@ -96,6 +136,9 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
       isWidthLimited,
       isIndented,
       contentId,
+      variant,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      truncateMaxLines,
       ...props
     } = this.props;
     let onToggle = onToggleProp;
@@ -116,9 +159,24 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
       propOrStateIsExpanded
     );
 
+    const expandableToggle = !isDetached && (
+      <button
+        className={css(styles.expandableSectionToggle)}
+        type="button"
+        aria-expanded={propOrStateIsExpanded}
+        onClick={() => onToggle(!propOrStateIsExpanded)}
+      >
+        {variant !== ExpandableSectionVariant.truncate && (
+          <span className={css(styles.expandableSectionToggleIcon)}>
+            <AngleRightIcon aria-hidden />
+          </span>
+        )}
+        <span className={css(styles.expandableSectionToggleText)}>{toggleContent || computedToggleText}</span>
+      </button>
+    );
+
     return (
       <div
-        {...props}
         className={css(
           styles.expandableSection,
           propOrStateIsExpanded && styles.modifiers.expanded,
@@ -127,25 +185,21 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
           displaySize === 'large' && styles.modifiers.displayLg,
           isWidthLimited && styles.modifiers.limitWidth,
           isIndented && styles.modifiers.indented,
+          variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate,
           className
         )}
+        {...props}
       >
-        {!isDetached && (
-          <button
-            className={css(styles.expandableSectionToggle)}
-            type="button"
-            aria-expanded={propOrStateIsExpanded}
-            onClick={() => onToggle(!propOrStateIsExpanded)}
-          >
-            <span className={css(styles.expandableSectionToggleIcon)}>
-              <AngleRightIcon aria-hidden />
-            </span>
-            <span className={css(styles.expandableSectionToggleText)}>{toggleContent || computedToggleText}</span>
-          </button>
-        )}
-        <div className={css(styles.expandableSectionContent)} hidden={!propOrStateIsExpanded} id={contentId}>
+        {variant === ExpandableSectionVariant.default && expandableToggle}
+        <div
+          ref={this.expandableContentRef}
+          className={css(styles.expandableSectionContent)}
+          hidden={variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded}
+          id={contentId}
+        >
           {children}
         </div>
+        {variant === ExpandableSectionVariant.truncate && expandableToggle}
       </div>
     );
   }

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -16,6 +16,8 @@ export interface ExpandableSectionToggleProps extends React.HTMLProps<HTMLDivEle
   contentId?: string;
   /** Direction the toggle arrow should point when the expandable section is expanded. */
   direction?: 'up' | 'down';
+  /** @beta Flag to determine toggle styling when the expandable content is truncated. */
+  hasTruncatedContent?: boolean;
 }
 
 export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionToggleProps> = ({
@@ -25,16 +27,18 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   onToggle,
   contentId,
   direction = 'down',
+  hasTruncatedContent = false,
   ...props
 }: ExpandableSectionToggleProps) => (
   <div
-    {...props}
     className={css(
       styles.expandableSection,
       isExpanded && styles.modifiers.expanded,
       styles.modifiers.detached,
+      hasTruncatedContent && styles.modifiers.truncate,
       className
     )}
+    {...props}
   >
     <button
       className={css(styles.expandableSectionToggle)}
@@ -43,14 +47,16 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
       aria-controls={contentId}
       onClick={() => onToggle(!isExpanded)}
     >
-      <span
-        className={css(
-          styles.expandableSectionToggleIcon,
-          isExpanded && direction === 'up' && styles.modifiers.expandTop
-        )}
-      >
-        <AngleRightIcon aria-hidden />
-      </span>
+      {!hasTruncatedContent && (
+        <span
+          className={css(
+            styles.expandableSectionToggleIcon,
+            isExpanded && direction === 'up' && styles.modifiers.expandTop
+          )}
+        >
+          <AngleRightIcon aria-hidden />
+        </span>
+      )}
       <span className={css(styles.expandableSectionToggleText)}>{children}</span>
     </button>
   </div>

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { ExpandableSection } from '../ExpandableSection';
+import { ExpandableSection, ExpandableSectionVariant } from '../ExpandableSection';
 import { ExpandableSectionToggle } from '../ExpandableSectionToggle';
 
 const props = {};
@@ -64,3 +64,29 @@ test('Renders ExpandableSection indented', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Does not render with pf-m-truncate class when variant is not passed', () => {
+  render(<ExpandableSection {...props}>test</ExpandableSection>);
+
+  expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate');
+});
+
+test('Does not render with pf-m-truncate class when variant is not truncate', () => {
+  render(
+    <ExpandableSection variant={ExpandableSectionVariant.default} {...props}>
+      test
+    </ExpandableSection>
+  );
+
+  expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate');
+});
+
+test('Renders with pf-m-truncate class when variant is truncate', () => {
+  render(
+    <ExpandableSection variant={ExpandableSectionVariant.truncate} {...props}>
+      test
+    </ExpandableSection>
+  );
+
+  expect(screen.getByText('test').parentElement).toHaveClass('pf-m-truncate');
+});

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -45,3 +45,10 @@ By using the `toggleContent` prop, you can pass in content other than a simple s
 
 ```ts file="ExpandableSectionCustomToggle.tsx"
 ```
+
+### Truncate expansion
+
+By passing in `variant="truncate"`, the expandable content will be visible up to a maximum number of lines before being truncated, with the toggle revealing or hiding the truncated content. By default the expandable content will truncate after 3 lines, and this can be customized by also passing in the `truncateMaxLines` prop.
+
+```ts file="ExpandableSectionTruncateExpansion.tsx" isBeta
+```

package/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ExpandableSection, ExpandableSectionVariant } from '@patternfly/react-core';
+
+export const ExpandableSectionTruncateExpansion: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      variant={ExpandableSectionVariant.truncate}
+      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus.
+      Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient
+      montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla,
+      eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam,
+      tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus.
+      Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante
+      commodo tincidunt. Integer tincidunt at ipsum non aliquet.
+    </ExpandableSection>
+  );
+};

package/src/components/InputGroup/InputGroup.tsx

@@ -31,9 +31,11 @@ export const InputGroup: React.FunctionComponent<InputGroupProps> = ({
     <div ref={inputGroupRef} className={css(styles.inputGroup, className)} {...props}>
       {idItem
         ? React.Children.map(children, (child: any) =>
-            formCtrls.includes(child.type.displayName)
-              ? React.cloneElement(child, { 'aria-describedby': idItem.props.id })
-              : child
+            !formCtrls.includes(child.type.displayName) || child.props['aria-describedby']
+              ? child
+              : React.cloneElement(child, {
+                  'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem.props.id
+                })
           )
         : children}
     </div>

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

@@ -20,4 +20,34 @@ describe('InputGroup', () => {
     );
     expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'button-id');
   });
+
+  test('wont add aria-describedby to form-control if describedby is empty string', () => {
+    // In this test, TextInput is a form-control component and Button is not.
+    // If Button has an id props, this should be used in aria-describedby, but this
+    // example has an empty aria-describedby to prevent that from happening.
+    render(
+      <InputGroup>
+        <TextInput value="some data" aria-describedby="" aria-label="some text" />
+        <Button id="button-id">
+          hello
+        </Button>
+      </InputGroup>
+    );
+    expect(screen.getByLabelText('some text')).not.toHaveAttribute('aria-describedby');
+  });
+
+  test('wont override aria-describedby in form-control if describedby has value', () => {
+    // In this test, TextInput is a form-control component and Button is not.
+    // If Button has an id props, this should be used in aria-describedby, but this
+    // example has a predefined aria-describedby to prevent that from happening
+    render(
+      <InputGroup>
+        <TextInput value="some data" aria-describedby="myself" aria-label="some text" />
+        <Button id="button-id">
+          hello
+        </Button>
+      </InputGroup>
+    );
+    expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'myself');
+  });
 });

package/src/components/Label/Label.tsx

@@ -104,7 +104,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   render,
   ...props
 }: LabelProps) => {
-  const [isEditableActive, setIsEditableActive] = useState(false);
+  const [isEditableActive, setIsEditableActive] = useState<boolean>(false);
   const [currValue, setCurrValue] = useState(children);
   const editableButtonRef = React.useRef<HTMLButtonElement>();
   const editableInputRef = React.useRef<HTMLInputElement>();
@@ -151,6 +151,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         onEditComplete && onEditComplete(editableInputRef.current.value);
       }
       setIsEditableActive(false);
+      editableButtonRef?.current?.focus();
     }
     if (isEditableActive && key === 'Escape') {
       event.preventDefault();
@@ -161,6 +162,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         onEditCancel && onEditCancel(children as string);
       }
       setIsEditableActive(false);
+      editableButtonRef?.current?.focus();
     }
     if (!isEditableActive && key === 'Enter') {
       event.preventDefault();

package/src/components/LabelGroup/LabelGroup.tsx

@@ -52,13 +52,13 @@ export interface LabelGroupProps extends React.HTMLProps<HTMLUListElement> {
     | 'right-end';
   /** Flag to implement a vertical layout */
   isVertical?: boolean;
-  /** @beta Flag indicating contained labels are editable. Allows spacing for a text input after the labels. */
+  /** Flag indicating contained labels are editable. Allows spacing for a text input after the labels. */
   isEditable?: boolean;
-  /** @beta Flag indicating the editable label group should be appended with a textarea. */
+  /** Flag indicating the editable label group should be appended with a textarea. */
   hasEditableTextArea?: boolean;
-  /** @beta Additional props passed to the editable textarea. */
+  /** Additional props passed to the editable textarea. */
   editableTextAreaProps?: any;
-  /** @beta Control for adding new labels */
+  /** Control for adding new labels */
   addLabelControl?: React.ReactNode;
 }
 

package/src/components/LabelGroup/examples/LabelGroup.md

@@ -38,7 +38,7 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 
 ### Editable labels
 
-```ts file="LabelGroupEditableLabels.tsx" isBeta
+```ts file="LabelGroupEditableLabels.tsx"
 ```
 
 ### Editable labels with add button

package/src/components/LabelGroup/examples/LabelGroupEditableAdd.tsx

@@ -58,7 +58,7 @@ export const LabelGroupEditableAdd: React.FunctionComponent = () => {
     >
       {labels.map((label, index) => (
         <Label
-          key={`${label.name}-${index}`}
+          key={label.id}
           id={`${label.name}-${index}`}
           color="blue"
           onClose={() => onClose(label.id)}

package/src/components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx

@@ -121,7 +121,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
       >
         {labels.map((label, index) => (
           <Label
-            key={`${label.name}-${index}`}
+            key={label.id}
             id={`${label.name}-${index}`}
             color="blue"
             onClose={() => onClose(label.id)}

package/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx

@@ -27,17 +27,17 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   const [labelType, setLabelType] = React.useState<string>('filled');
   const [isClosable, setIsCloseable] = React.useState<boolean>(false);
   const [isEditable, setIsEditable] = React.useState<boolean>(false);
-  const labelInputRef = React.useRef();
+  const labelInputRef = React.useRef(null);
 
   const [isColorOpen, setIsColorOpen] = React.useState<boolean>(false);
-  const colorMenuRef = React.useRef<HTMLDivElement>();
-  const colorContainerRef = React.useRef<HTMLDivElement>();
-  const colorToggleRef = React.useRef<HTMLButtonElement>();
+  const colorMenuRef = React.useRef<HTMLDivElement>(null);
+  const colorContainerRef = React.useRef<HTMLDivElement>(null);
+  const colorToggleRef = React.useRef<HTMLButtonElement>(null);
 
   const [isIconOpen, setIsIconOpen] = React.useState<boolean>(false);
-  const iconMenuRef = React.useRef<HTMLDivElement>();
-  const iconContainerRef = React.useRef<HTMLDivElement>();
-  const iconToggleRef = React.useRef<HTMLButtonElement>();
+  const iconMenuRef = React.useRef<HTMLDivElement>(null);
+  const iconContainerRef = React.useRef<HTMLDivElement>(null);
+  const iconToggleRef = React.useRef<HTMLButtonElement>(null);
 
   const [labels, setLabels] = React.useState<any>([
     { name: 'Label 1', id: 0 },
@@ -65,7 +65,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   };
 
   const onAdd = () => {
-    let labelIcon = null;
+    let labelIcon: any;
     if (icon === 'Info circle icon') {
       labelIcon = <InfoCircleIcon />;
     }
@@ -92,7 +92,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
     setModalOpen(!isModalOpen);
     setIdIndex(idIndex + 1);
     setLabelText('');
-    setColor(null);
+    setColor('');
     setIcon(null);
     setLabelType('filled');
     setIsCloseable(false);
@@ -110,25 +110,25 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   }, [isModalOpen]);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isColorOpen && colorMenuRef.current.contains(event.target as Node)) {
+    if (isColorOpen && colorMenuRef?.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsColorOpen(!isColorOpen);
-        colorToggleRef.current.focus();
+        colorToggleRef?.current?.focus();
       }
     }
-    if (isIconOpen && iconMenuRef.current.contains(event.target as Node)) {
+    if (isIconOpen && iconMenuRef?.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsIconOpen(!isIconOpen);
-        iconToggleRef.current.focus();
+        iconToggleRef?.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isColorOpen && !colorMenuRef.current.contains(event.target as Node)) {
+    if (isColorOpen && !colorMenuRef?.current?.contains(event.target as Node)) {
       setIsColorOpen(false);
     }
-    if (isIconOpen && !iconMenuRef.current.contains(event.target as Node)) {
+    if (isIconOpen && !iconMenuRef?.current?.contains(event.target as Node)) {
       setIsIconOpen(false);
     }
   };
@@ -164,7 +164,8 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
       ref={colorMenuRef}
       activeItemId={color}
       onSelect={(_ev, itemId) => {
-        setColor(itemId.toString());
+        setColor(itemId?.toString());
+        colorToggleRef?.current?.focus();
         setIsColorOpen(false);
       }}
       selected={color}
@@ -205,7 +206,8 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
       ref={iconMenuRef}
       activeItemId={icon}
       onSelect={(_ev, itemId) => {
-        setIcon(itemId.toString());
+        setIcon(itemId?.toString());
+        iconToggleRef?.current?.focus();
         setIsIconOpen(false);
       }}
       selected={icon}
@@ -234,9 +236,9 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
           </Label>
         }
       >
-        {labels.map((label, index) => (
+        {labels.map((label: { name: string; id: string; props: any }, index: number) => (
           <Label
-            key={`${label.name}-${index}`}
+            key={label.id}
             id={`${label.name}-${index}`}
             color="blue"
             onClose={() => onClose(label.id)}
@@ -278,7 +280,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
               <Popper
                 trigger={colorToggle}
                 popper={colorMenu}
-                appendTo={colorContainerRef.current}
+                appendTo={colorContainerRef.current as HTMLElement}
                 isVisible={isColorOpen}
                 popperMatchesTriggerWidth={false}
               />
@@ -289,7 +291,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
               <Popper
                 trigger={iconToggle}
                 popper={iconMenu}
-                appendTo={iconContainerRef.current}
+                appendTo={iconContainerRef.current as HTMLElement}
                 isVisible={isIconOpen}
                 popperMatchesTriggerWidth={false}
               />

package/src/components/NumberInput/NumberInput.tsx

@@ -5,7 +5,8 @@ import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import { InputGroup } from '../InputGroup';
 import { Button, ButtonProps } from '../Button';
-import { KEY_CODES } from '../../helpers';
+import { KEY_CODES, ValidatedOptions } from '../../helpers';
+import { TextInput } from '../TextInput';
 
 export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   /** Value of the number input */
@@ -16,6 +17,10 @@ export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   widthChars?: number;
   /** Indicates the whole number input should be disabled */
   isDisabled?: boolean;
+  /** Value to indicate if the input is modified to show that validation state
+   * @beta
+   */
+  validated?: 'default' | 'error' | 'warning' | 'success' | ValidatedOptions;
   /** Callback for the minus button */
   onMinus?: (event: React.MouseEvent, name?: string) => void;
   /** Callback for the text input changing */
@@ -66,6 +71,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   className,
   widthChars,
   isDisabled = false,
+  validated = ValidatedOptions.default,
   onMinus = () => {},
   onChange,
   onBlur,
@@ -99,7 +105,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
 
   return (
     <div
-      className={css(styles.numberInput, className)}
+      className={css(styles.numberInput, validated !== 'default' && styles.modifiers.status, className)}
       {...(widthChars && {
         style: {
           '--pf-c-number-input--c-form-control--width-chars': widthChars,
@@ -121,18 +127,18 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
             <MinusIcon aria-hidden="true" />
           </span>
         </Button>
-        <input
-          className={css(styles.formControl)}
+        <TextInput
           type="number"
           value={value}
           name={inputName}
           aria-label={inputAriaLabel}
-          {...(isDisabled && { disabled: isDisabled })}
-          {...(onChange && { onChange })}
+          {...(isDisabled && { isDisabled })}
+          {...(onChange && { onChange: (value, event) => onChange(event) })}
           onBlur={handleBlur}
-          {...(!onChange && { readOnly: true })}
-          {...inputProps}
+          {...(!onChange && { isReadOnly: true })}
           onKeyDown={keyDownHandler}
+          validated={validated}
+          {...inputProps}
         />
         <Button
           variant="control"