@patternfly/react-core 4.221.6 → 4.221.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.221.6",
+  "version": "4.221.9",
   "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,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.72.6",
-    "@patternfly/react-styles": "^4.71.6",
-    "@patternfly/react-tokens": "^4.73.6",
+    "@patternfly/react-icons": "^4.72.9",
+    "@patternfly/react-styles": "^4.71.9",
+    "@patternfly/react-tokens": "^4.73.9",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "f8533a8cf5b7ffa149f5fc2d54fd02731ea8bfa8"
+  "gitHead": "caf3cacb7a188572da906aa223edb8e6003493c6"
 }

package/src/components/EmptyState/examples/EmptyState.md

@@ -9,222 +9,36 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h4" size="lg">
-    Empty state
-  </Title>
-  <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.
-  </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>
-</EmptyState>
+```ts file="EmptyStateBasic.tsx"
 ```
 
 ### Extra small
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
 
-<EmptyState variant={EmptyStateVariant.xs}>
-  <Title headingLevel="h4" size="md">
-    Empty state
-  </Title>
-  <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.
-  </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>
-</EmptyState>
+```ts file="EmptyStateExtraSmall.tsx"
 ```
 
 ### Small
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState variant={EmptyStateVariant.small}>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h4" size="lg">
-    Empty state
-  </Title>
-  <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.
-  </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>
-</EmptyState>
+```ts file="EmptyStateSmall.tsx"
 ```
 
 ### Large
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState variant={EmptyStateVariant.large}>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h4" size="lg">
-    Empty state
-  </Title>
-  <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.
-  </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>
-</EmptyState>
+```ts file="EmptyStateLarge.tsx"
 ```
 
 ### Extra large
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState variant={EmptyStateVariant.xl}>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h5" size="4xl">
-    Empty state
-  </Title>
-  <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.
-  </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>
-</EmptyState>
+```ts file="EmptyStateExtraLarge.tsx"
 ```
 
 ### Spinner
-```js
-import React from 'react';
-import {
-  Title,
-  EmptyState,
-  EmptyStateIcon,
-  Spinner
-} from '@patternfly/react-core';
 
-
-EmptyStateSpinner = () => {
-  return (
-    <EmptyState>
-      <EmptyStateIcon variant="container" component={Spinner} />
-      <Title size="lg" headingLevel="h4">
-        Loading
-      </Title>
-    </EmptyState>
-  );
-}
+```ts file="EmptyStateSpinner.tsx"
 ```
 
 ### No match found
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStatePrimary,
-  EmptyStateIcon,
-  EmptyStateBody
-} from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-
 
-<EmptyState>
-  <EmptyStateIcon icon={SearchIcon} />
-  <Title size="lg" headingLevel="h4">
-    No results found
-  </Title>
-  <EmptyStateBody>
-    No results match the filter criteria. Clear all filters and try again.
-  </EmptyStateBody>
-  <EmptyStatePrimary>
-    <Button variant="link">Clear all filters</Button>
-  </EmptyStatePrimary>
-</EmptyState>
+```ts file="EmptyStateNoMatchFound.tsx"
 ```

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const EmptyStateBasic: React.FunctionComponent = () => (
+  <EmptyState>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title headingLevel="h4" size="lg">
+      Empty state
+    </Title>
+    <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.
+    </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>
+  </EmptyState>
+);

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} 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>
+    <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.
+    </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>
+  </EmptyState>
+);

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+
+export const EmptyStateExtraSmall: React.FunctionComponent = () => (
+  <EmptyState variant={EmptyStateVariant.xs}>
+    <Title headingLevel="h4" size="md">
+      Empty state
+    </Title>
+    <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.
+    </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>
+  </EmptyState>
+);

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} 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>
+    <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.
+    </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>
+  </EmptyState>
+);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Title, Button, EmptyState, EmptyStatePrimary, EmptyStateIcon, EmptyStateBody } 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>
+    <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+    <EmptyStatePrimary>
+      <Button variant="link">Clear all filters</Button>
+    </EmptyStatePrimary>
+  </EmptyState>
+);

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} 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>
+    <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.
+    </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>
+  </EmptyState>
+);

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

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

package/src/components/HelperText/examples/HelperText.md

@@ -15,177 +15,30 @@ import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-
 
 ### Static
 
-```js
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-
-<React.Fragment>
-  <HelperText>
-    <HelperTextItem>This is default helper text</HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem variant="indeterminate">This is indeterminate helper text</HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem variant="warning">This is warning helper text</HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem variant="success">This is success helper text</HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem variant="error">This is error helper text</HelperTextItem>
-  </HelperText>
-</React.Fragment>;
+```ts file="HelperTextStatic.tsx"
 ```
 
 ### Static with default icons
 
-```js
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
-import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-
-<React.Fragment>
-  <HelperText>
-    <HelperTextItem hasIcon>This is default helper text</HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem variant="indeterminate" hasIcon>
-      This is indeterminate helper text
-    </HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem variant="warning" hasIcon>
-      This is warning helper text
-    </HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem variant="success" hasIcon>
-      This is success helper text
-    </HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem variant="error" hasIcon>
-      This is error helper text
-    </HelperTextItem>
-  </HelperText>
-</React.Fragment>;
+```ts file="HelperTextStaticWithDefaultIcon.tsx"
 ```
 
 ### Static with custom icons
 
-```js
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
-import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
-import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-
-<React.Fragment>
-  <HelperText>
-    <HelperTextItem icon={<InfoIcon />}>This is default helper text</HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem variant="indeterminate" icon={<QuestionIcon />}>
-      This is indeterminate helper text
-    </HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem variant="warning" icon={<ExclamationIcon />}>
-      This is warning helper text
-    </HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem variant="success" icon={<CheckIcon />}>
-      This is success helper text
-    </HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem variant="error" icon={<TimesIcon />}>
-      This is error helper text
-    </HelperTextItem>
-  </HelperText>
-</React.Fragment>;
+```ts file="HelperTextStaticWithCustomIcon.tsx"
 ```
 
 ### Multiple static
 
-```js
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-
-<HelperText>
-  <HelperTextItem>This is default helper text</HelperTextItem>
-  <HelperTextItem>This is another default helper text in the same block</HelperTextItem>
-  <HelperTextItem>And this is more default text in the same block</HelperTextItem>
-</HelperText>;
+```ts file="HelperTextMultipleStatic.tsx"
 ```
 
 ### Dynamic
 
-```js
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-
-<React.Fragment>
-  <HelperText>
-    <HelperTextItem isDynamic>This is default helper text</HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem isDynamic variant="indeterminate">
-      This is indeterminate helper text
-    </HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem isDynamic variant="warning">
-      This is warning helper text
-    </HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem isDynamic variant="success">
-      This is success helper text
-    </HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem isDynamic variant="error">
-      This is error helper text
-    </HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem isDynamic variant="error" icon={<TimesIcon />}>
-      This is error helper text with a custom icon
-    </HelperTextItem>
-  </HelperText>
-  <HelperText>
-    <HelperTextItem isDynamic variant="error" hasIcon={false}>
-      This is error helper text with no icon
-    </HelperTextItem>
-  </HelperText>
-</React.Fragment>;
+```ts file="HelperTextDynamic.tsx"
 ```
 
 ### Dynamic list
 
-```js
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-
-<HelperText component="ul">
-  <HelperTextItem isDynamic variant="success" component="li">
-    Must be at least 14 characters
-  </HelperTextItem>
-  <HelperTextItem isDynamic variant="error" component="li">
-    Cannot contain any variation of the word "redhat"
-  </HelperTextItem>
-  <HelperTextItem isDynamic variant="success" component="li">
-    Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
-  </HelperTextItem>
-</HelperText>;
+```ts file="HelperTextDynamicList.tsx"
 ```

package/src/components/HelperText/examples/HelperTextDynamic.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const HelperTextDynamic: React.FunctionComponent = () => (
+  <React.Fragment>
+    <HelperText>
+      <HelperTextItem isDynamic>This is default helper text</HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem isDynamic variant="indeterminate">
+        This is indeterminate helper text
+      </HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem isDynamic variant="warning">
+        This is warning helper text
+      </HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem isDynamic variant="success">
+        This is success helper text
+      </HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem isDynamic variant="error">
+        This is error helper text
+      </HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem isDynamic variant="error" icon={<TimesIcon />}>
+        This is error helper text with a custom icon
+      </HelperTextItem>
+    </HelperText>
+    <HelperText>
+      <HelperTextItem isDynamic variant="error" hasIcon={false}>
+        This is error helper text with no icon
+      </HelperTextItem>
+    </HelperText>
+  </React.Fragment>
+);