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

package/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx

@@ -1,33 +1,35 @@
 import React from 'react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateSecondaryActions
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateIcon
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateExtraLarge: React.FunctionComponent = () => (
   <EmptyState variant={EmptyStateVariant.xl}>
-    <EmptyStateIcon icon={CubesIcon} />
-    <Title headingLevel="h5" size="4xl">
-      Empty state
-    </Title>
+    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
     <EmptyStateBody>
-      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-      enough to meet a variety of needs.
+      This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
+      meet a variety of needs.
     </EmptyStateBody>
-    <Button variant="primary">Primary action</Button>
-    <EmptyStateSecondaryActions>
-      <Button variant="link">Multiple</Button>
-      <Button variant="link">Action Buttons</Button>
-      <Button variant="link">Can</Button>
-      <Button variant="link">Go here</Button>
-      <Button variant="link">In the secondary</Button>
-      <Button variant="link">Action area</Button>
-    </EmptyStateSecondaryActions>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="primary">Primary action</Button>
+      </EmptyStateActions>
+      <EmptyStateActions>
+        <Button variant="link">Multiple</Button>
+        <Button variant="link">Action Buttons</Button>
+        <Button variant="link">Can</Button>
+        <Button variant="link">Go here</Button>
+        <Button variant="link">In the secondary</Button>
+        <Button variant="link">Action area</Button>
+      </EmptyStateActions>
+    </EmptyStateFooter>
   </EmptyState>
 );

package/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx

@@ -1,29 +1,30 @@
 import React from 'react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
   EmptyStateBody,
-  EmptyStateSecondaryActions
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter
 } from '@patternfly/react-core';
 
 export const EmptyStateExtraSmall: React.FunctionComponent = () => (
   <EmptyState variant={EmptyStateVariant.xs}>
-    <Title headingLevel="h4" size="md">
-      Empty state
-    </Title>
+    <EmptyStateHeader titleText="Empty state" headingLevel="h4" />
     <EmptyStateBody>
-      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-      enough to meet a variety of needs.
+      This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
+      meet a variety of needs.
     </EmptyStateBody>
-    <EmptyStateSecondaryActions>
-      <Button variant="link">Multiple</Button>
-      <Button variant="link">Action Buttons</Button>
-      <Button variant="link">Can</Button>
-      <Button variant="link">Go here</Button>
-      <Button variant="link">In the secondary</Button>
-      <Button variant="link">Action area</Button>
-    </EmptyStateSecondaryActions>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="link">Multiple</Button>
+        <Button variant="link">Action Buttons</Button>
+        <Button variant="link">Can</Button>
+        <Button variant="link">Go here</Button>
+        <Button variant="link">In the secondary</Button>
+        <Button variant="link">Action area</Button>
+      </EmptyStateActions>
+    </EmptyStateFooter>
   </EmptyState>
 );

package/src/components/EmptyState/examples/EmptyStateLarge.tsx

@@ -1,33 +1,35 @@
 import React from 'react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateSecondaryActions
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateIcon
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateLarge: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.large}>
-    <EmptyStateIcon icon={CubesIcon} />
-    <Title headingLevel="h4" size="lg">
-      Empty state
-    </Title>
+  <EmptyState variant={EmptyStateVariant.lg}>
+    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
     <EmptyStateBody>
-      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-      enough to meet a variety of needs.
+      This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
+      meet a variety of needs.
     </EmptyStateBody>
-    <Button variant="primary">Primary action</Button>
-    <EmptyStateSecondaryActions>
-      <Button variant="link">Multiple</Button>
-      <Button variant="link">Action Buttons</Button>
-      <Button variant="link">Can</Button>
-      <Button variant="link">Go here</Button>
-      <Button variant="link">In the secondary</Button>
-      <Button variant="link">Action area</Button>
-    </EmptyStateSecondaryActions>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="primary">Primary action</Button>
+      </EmptyStateActions>
+      <EmptyStateActions>
+        <Button variant="link">Multiple</Button>
+        <Button variant="link">Action Buttons</Button>
+        <Button variant="link">Can</Button>
+        <Button variant="link">Go here</Button>
+        <Button variant="link">In the secondary</Button>
+        <Button variant="link">Action area</Button>
+      </EmptyStateActions>
+    </EmptyStateFooter>
   </EmptyState>
 );

package/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx

@@ -1,16 +1,23 @@
 import React from 'react';
-import { Title, Button, EmptyState, EmptyStatePrimary, EmptyStateIcon, EmptyStateBody } from '@patternfly/react-core';
+import {
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateActions,
+  EmptyStateIcon
+} from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const EmptyStateNoMatchFound: React.FunctionComponent = () => (
   <EmptyState>
-    <EmptyStateIcon icon={SearchIcon} />
-    <Title size="lg" headingLevel="h4">
-      No results found
-    </Title>
+    <EmptyStateHeader titleText="No results found" headingLevel="h4" icon={<EmptyStateIcon icon={SearchIcon} />} />
     <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
-    <EmptyStatePrimary>
-      <Button variant="link">Clear all filters</Button>
-    </EmptyStatePrimary>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="link">Clear all filters</Button>
+      </EmptyStateActions>
+    </EmptyStateFooter>
   </EmptyState>
 );

package/src/components/EmptyState/examples/EmptyStateSmall.tsx

@@ -1,33 +1,35 @@
 import React from 'react';
 import {
-  Title,
   Button,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateSecondaryActions
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateIcon
 } from '@patternfly/react-core';
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateSmall: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.small}>
-    <EmptyStateIcon icon={CubesIcon} />
-    <Title headingLevel="h4" size="lg">
-      Empty state
-    </Title>
+  <EmptyState variant={EmptyStateVariant.sm}>
+    <EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} />
     <EmptyStateBody>
-      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-      enough to meet a variety of needs.
+      This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
+      meet a variety of needs.
     </EmptyStateBody>
-    <Button variant="primary">Primary action</Button>
-    <EmptyStateSecondaryActions>
-      <Button variant="link">Multiple</Button>
-      <Button variant="link">Action Buttons</Button>
-      <Button variant="link">Can</Button>
-      <Button variant="link">Go here</Button>
-      <Button variant="link">In the secondary</Button>
-      <Button variant="link">Action area</Button>
-    </EmptyStateSecondaryActions>
+    <EmptyStateFooter>
+      <EmptyStateActions>
+        <Button variant="primary">Primary action</Button>
+      </EmptyStateActions>
+      <EmptyStateActions>
+        <Button variant="link">Multiple</Button>
+        <Button variant="link">Action Buttons</Button>
+        <Button variant="link">Can</Button>
+        <Button variant="link">Go here</Button>
+        <Button variant="link">In the secondary</Button>
+        <Button variant="link">Action area</Button>
+      </EmptyStateActions>
+    </EmptyStateFooter>
   </EmptyState>
 );

package/src/components/EmptyState/examples/EmptyStateSpinner.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
-import { Title, EmptyState, EmptyStateIcon, Spinner } from '@patternfly/react-core';
+import { EmptyState, EmptyStateHeader, EmptyStateIcon, Spinner } from '@patternfly/react-core';
 
 export const EmptyStateSpinner: React.FunctionComponent = () => (
   <EmptyState>
-    <EmptyStateIcon variant="container" component={Spinner} />
-    <Title size="lg" headingLevel="h4">
-      Loading
-    </Title>
+    <EmptyStateHeader titleText="Loading" headingLevel="h4" icon={<EmptyStateIcon icon={Spinner} />} />
   </EmptyState>
 );

package/src/components/EmptyState/index.ts

@@ -1,5 +1,6 @@
 export * from './EmptyState';
-export * from './EmptyStateBody';
+export * from './EmptyStateHeader';
 export * from './EmptyStateIcon';
-export * from './EmptyStateSecondaryActions';
-export * from './EmptyStatePrimary';
+export * from './EmptyStateBody';
+export * from './EmptyStateFooter';
+export * from './EmptyStateActions';

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -4,6 +4,8 @@ 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';
+import { debounce } from '../../helpers/util';
+import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export enum ExpandableSectionVariant {
   default = 'default',
@@ -61,6 +63,8 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
 
 interface ExpandableSectionState {
   isExpanded: boolean;
+  hasToggle: boolean;
+  previousWidth: number;
 }
 
 const setLineClamp = (lines: number, element: HTMLDivElement) => {
@@ -77,11 +81,15 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     super(props);
 
     this.state = {
-      isExpanded: props.isExpanded
+      isExpanded: props.isExpanded,
+      hasToggle: true,
+      previousWidth: undefined
     };
   }
 
   expandableContentRef = React.createRef<HTMLDivElement>();
+  observer: any = () => {};
+
   static defaultProps: PickOptional<ExpandableSectionProps> = {
     className: '',
     toggleText: '',
@@ -114,9 +122,16 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
   }
 
   componentDidMount() {
-    if (this.props.variant === ExpandableSectionVariant.truncate && this.props.truncateMaxLines) {
+    if (this.props.variant === ExpandableSectionVariant.truncate) {
       const expandableContent = this.expandableContentRef.current;
-      setLineClamp(this.props.truncateMaxLines, expandableContent);
+      this.setState({ previousWidth: expandableContent.offsetWidth });
+      this.observer = getResizeObserver(expandableContent, this.handleResize, false);
+
+      if (this.props.truncateMaxLines) {
+        setLineClamp(this.props.truncateMaxLines, expandableContent);
+      }
+
+      this.checkToggleVisibility();
     }
   }
 
@@ -127,9 +142,38 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     ) {
       const expandableContent = this.expandableContentRef.current;
       setLineClamp(this.props.truncateMaxLines, expandableContent);
+      this.checkToggleVisibility();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.variant === ExpandableSectionVariant.truncate) {
+      this.observer();
     }
   }
 
+  checkToggleVisibility = () => {
+    if (this.expandableContentRef?.current) {
+      const maxLines = this.props.truncateMaxLines || parseInt(lineClamp.value);
+      const totalLines =
+        this.expandableContentRef.current.scrollHeight /
+        parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight);
+
+      this.setState({
+        hasToggle: totalLines > maxLines
+      });
+    }
+  };
+
+  resize = () => {
+    const { offsetWidth } = this.expandableContentRef.current;
+    if (this.state.previousWidth !== offsetWidth) {
+      this.setState({ previousWidth: offsetWidth });
+      this.checkToggleVisibility();
+    }
+  };
+  handleResize = debounce(this.resize, 250);
+
   render() {
     const {
       onToggle: onToggleProp,
@@ -210,7 +254,7 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
         >
           {children}
         </div>
-        {variant === ExpandableSectionVariant.truncate && expandableToggle}
+        {variant === ExpandableSectionVariant.truncate && this.state.hasToggle && expandableToggle}
       </div>
     );
   }

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

@@ -26,12 +26,10 @@ exports[`Detached ExpandableSection renders successfully 1`] = `
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
-          style="vertical-align: -0.125em;"
           viewBox="0 0 256 512"
-          width="1em"
         >
           <path
             d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -62,12 +60,10 @@ exports[`Disclosure ExpandableSection 1`] = `
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
-          style="vertical-align: -0.125em;"
           viewBox="0 0 256 512"
-          width="1em"
         >
           <path
             d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -103,12 +99,10 @@ exports[`ExpandableSection 1`] = `
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
-          style="vertical-align: -0.125em;"
           viewBox="0 0 256 512"
-          width="1em"
         >
           <path
             d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -145,12 +139,10 @@ exports[`Renders ExpandableSection expanded 1`] = `
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
-          style="vertical-align: -0.125em;"
           viewBox="0 0 256 512"
-          width="1em"
         >
           <path
             d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -186,12 +178,10 @@ exports[`Renders ExpandableSection indented 1`] = `
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
-          style="vertical-align: -0.125em;"
           viewBox="0 0 256 512"
-          width="1em"
         >
           <path
             d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -226,12 +216,10 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
-          style="vertical-align: -0.125em;"
           viewBox="0 0 256 512"
-          width="1em"
         >
           <path
             d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"

package/src/components/FileUpload/FileUpload.tsx

@@ -64,7 +64,7 @@ export interface FileUploadProps
   // Props available in FileUpload but not FileUploadField:
 
   /** Optional extra props to customize react-dropzone. */
-  dropzoneProps?: DropzoneOptions;
+  dropzoneProps?: Partial<DropzoneOptions>;
   /** Clear button was clicked. */
   onClearClick?: React.MouseEventHandler<HTMLButtonElement>;
   /** On data changed - if type='text' or type='dataURL' and file was loaded it will call this method */

package/src/components/FileUpload/examples/FileUpload.md

@@ -1,15 +1,16 @@
 ---
-id: File upload
+id: Simple file upload
 cssPrefix: pf-c-file-upload
 propComponents: ['FileUpload', 'FileUploadField']
 section: components
+subsection: file-upload
 ---
 
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
 
 ## Examples
 
-The basic `FileUpload` component can accept a file via browse or drag-and-drop, and behaves like a standard form field with its `value` and `onFileInputChange` event that is similar to `<input onChange="...">` prop. The `type` prop determines how the `FileUpload` component behaves upon accepting a file, what type of value it passes to its `onDataChange` event.
+The `FileUpload` component can accept a file via browse or drag-and-drop, and behaves like a standard form field with its `value` and `onFileInputChange` event that is similar to `<input onChange="...">` prop. The `type` prop determines how the `FileUpload` component behaves upon accepting a file, what type of value it passes to its `onDataChange` event.
 
 ### Text files
 

package/src/components/FileUpload/examples/FileUploadCustomPreview.tsx

@@ -29,7 +29,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
     >
       {value && (
         <div className="pf-u-m-md">
-          <FileUploadIcon size="lg" /> Custom preview here for your {value.size}-byte file named {value.name}
+          <FileUploadIcon width="2em" height="2em" /> Custom preview here for your {value.size}-byte file named {value.name}
         </div>
       )}
     </FileUpload>

package/src/components/FileUpload/examples/FileUploadCustomUpload.tsx

@@ -89,7 +89,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
           label={stateKey}
           aria-label={stateKey}
           isChecked={checkedState[index]}
-          onChange={checked => handleOnChange(checked, stateKey, index)}
+          onChange={(_event, checked) => handleOnChange(checked, stateKey, index)}
         />
       ))}
       <br />

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FileUpload, Form, FormGroup } from '@patternfly/react-core';
+import { FileUpload, Form, FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
@@ -35,12 +35,7 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
 
   return (
     <Form>
-      <FormGroup
-        fieldId="text-file-with-restrictions-example"
-        helperText="Upload a CSV file"
-        helperTextInvalid="Must be a CSV file no larger than 1 KB"
-        validated={isRejected ? 'error' : 'default'}
-      >
+      <FormGroup fieldId="text-file-with-restrictions-example">
         <FileUpload
           id="text-file-with-restrictions-example"
           type="text"
@@ -62,6 +57,13 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
           validated={isRejected ? 'error' : 'default'}
           browseButtonText="Upload"
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={isRejected ? 'error' : 'default'}>
+              {isRejected ? 'Must be a CSV file no larger than 1 KB' : 'Upload a CSV file'}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );

package/src/components/Form/FormGroup.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { ASTERISK } from '../../helpers/htmlConstants';
 import { css } from '@patternfly/react-styles';
-import { ValidatedOptions } from '../../helpers/constants';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
@@ -18,28 +17,12 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
   labelIcon?: React.ReactElement;
   /** Sets the FormGroup required. */
   isRequired?: boolean;
-  /**
-   * Sets the FormGroup validated. If you set to success, text color of helper text will be modified to indicate valid state.
-   * If set to error, text color of helper text will be modified to indicate error state.
-   * If set to warning, text color of helper text will be modified to indicate warning state.
-   */
-  validated?: 'success' | 'warning' | 'error' | 'default';
   /** Sets the FormGroup isInline. */
   isInline?: boolean;
   /** Sets the FormGroupControl to be stacked */
   isStack?: boolean;
   /** Removes top spacer from label. */
   hasNoPaddingTop?: boolean;
-  /** Helper text regarding the field. It can be a simple text or an object. */
-  helperText?: React.ReactNode;
-  /** Flag to position the helper text before the field. False by default */
-  isHelperTextBeforeField?: boolean;
-  /** Helper text after the field when the field is invalid. It can be a simple text or an object. */
-  helperTextInvalid?: React.ReactNode;
-  /** Icon displayed to the left of the helper text. */
-  helperTextIcon?: React.ReactNode;
-  /** Icon displayed to the left of the helper text when the field is invalid. */
-  helperTextInvalidIcon?: React.ReactNode;
   /** ID of an individual field or a group of multiple fields. Required when a role of "group" or "radiogroup" is passed in.
    * If only one field is included, its ID attribute and this prop must be the same.
    */
@@ -57,53 +40,13 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   labelInfo,
   labelIcon,
   isRequired = false,
-  validated = 'default',
   isInline = false,
   hasNoPaddingTop = false,
   isStack = false,
-  helperText,
-  isHelperTextBeforeField = false,
-  helperTextInvalid,
-  helperTextIcon,
-  helperTextInvalidIcon,
   fieldId,
   role,
   ...props
 }: FormGroupProps) => {
-  const validHelperText =
-    typeof helperText !== 'string' ? (
-      helperText
-    ) : (
-      <div
-        className={css(
-          styles.formHelperText,
-          validated === ValidatedOptions.success && styles.modifiers.success,
-          validated === ValidatedOptions.warning && styles.modifiers.warning
-        )}
-        id={`${fieldId}-helper`}
-        aria-live="polite"
-      >
-        {helperTextIcon && <span className={css(styles.formHelperTextIcon)}>{helperTextIcon}</span>}
-        {helperText}
-      </div>
-    );
-
-  const inValidHelperText =
-    typeof helperTextInvalid !== 'string' ? (
-      helperTextInvalid
-    ) : (
-      <div className={css(styles.formHelperText, styles.modifiers.error)} id={`${fieldId}-helper`} aria-live="polite">
-        {helperTextInvalidIcon && <span className={css(styles.formHelperTextIcon)}>{helperTextInvalidIcon}</span>}
-        {helperTextInvalid}
-      </div>
-    );
-
-  const showValidHelperTxt = (validationType: 'success' | 'warning' | 'error' | 'default') =>
-    validationType !== ValidatedOptions.error && helperText ? validHelperText : '';
-
-  const helperTextToDisplay =
-    validated === ValidatedOptions.error && helperTextInvalid ? inValidHelperText : showValidHelperTxt(validated);
-
   const isGroupOrRadioGroup = role === 'group' || role === 'radiogroup';
   const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label';
 
@@ -124,7 +67,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
 
   return (
     <GenerateId>
-      {randomId => (
+      {(randomId) => (
         <div
           className={css(styles.formGroup, className)}
           {...(role && { role })}
@@ -156,9 +99,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
               isStack && styles.modifiers.stack
             )}
           >
-            {isHelperTextBeforeField && helperTextToDisplay}
             {children}
-            {!isHelperTextBeforeField && helperTextToDisplay}
           </div>
         </div>
       )}