@patternfly/react-docs 7.6.0-prerelease.7 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/forms/text-input/react.js

@@ -0,0 +1,216 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useRef, useState } from 'react';
+import RhUiCalendarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-fill-icon';
+import RhUiClockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-fill-icon';
+const pageData = {
+  "id": "Text input",
+  "section": "components",
+  "subsection": "forms",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/forms/text-input/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/TextInput/examples/TextInput.md",
+  "relPath": "packages/react-core/src/components/TextInput/examples/TextInput.md",
+  "propComponents": [
+    {
+      "name": "TextInput",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Aria-label. The text input requires an associated id or aria-label."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the text input."
+        },
+        {
+          "name": "customIcon",
+          "type": "React.ReactNode",
+          "description": "Custom icon to render. If the validated prop is also passed, this will render an icon in addition to a validated icon."
+        },
+        {
+          "name": "expandedProps",
+          "type": "TextInputExpandedObj",
+          "description": "Prop to apply expanded styling to the text input and link it to the element it is controlling. This should be used when the input controls a menu and that menu is expandable."
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag to show if the text input is disabled."
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag to apply expanded styling. expandedProps should now be used instead.",
+          "deprecated": true
+        },
+        {
+          "name": "isLeftTruncated",
+          "type": "boolean",
+          "description": "Use isStartTruncated instead. Trim text at start",
+          "deprecated": true
+        },
+        {
+          "name": "isRequired",
+          "type": "boolean",
+          "description": "Flag indicating whether the input is required"
+        },
+        {
+          "name": "isStartTruncated",
+          "type": "boolean",
+          "description": "Trim text at start"
+        },
+        {
+          "name": "onBlur",
+          "type": "(event?: any) => void",
+          "description": "Callback function when text input is blurred (focus leaves)"
+        },
+        {
+          "name": "onChange",
+          "type": "(event: React.FormEvent<HTMLInputElement>, value: string) => void",
+          "description": "A callback for when the text input value changes."
+        },
+        {
+          "name": "onFocus",
+          "type": "(event?: any) => void",
+          "description": "Callback function when text input is focused"
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "description": "Placeholder of the text input when there is no value"
+        },
+        {
+          "name": "readOnlyVariant",
+          "type": "'plain' | 'default'",
+          "description": "Sets the input as readonly and determines the readonly styling."
+        },
+        {
+          "name": "type",
+          "type": "| 'text'\n| 'date'\n| 'datetime-local'\n| 'email'\n| 'month'\n| 'number'\n| 'password'\n| 'search'\n| 'tel'\n| 'time'\n| 'url'",
+          "description": "Type that the text input accepts."
+        },
+        {
+          "name": "validated",
+          "type": "'success' | 'warning' | 'error' | 'default'",
+          "description": "Value to indicate if the text input is modified to show that validation state.\nIf set to success, text input will be modified to indicate valid state.\nIf set to error, text input will be modified to indicate error state."
+        },
+        {
+          "name": "value",
+          "type": "string | number",
+          "description": "Value of the text input."
+        }
+      ]
+    },
+    {
+      "name": "TextInputExpandedObj",
+      "description": "",
+      "props": [
+        {
+          "name": "ariaControls",
+          "type": "string",
+          "description": "Id of the element that the text input is controlling expansion of.",
+          "required": true
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag to apply expanded styling.",
+          "required": true
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-form-control"
+  ],
+  "examples": [
+    "Basic",
+    "Disabled",
+    "Truncated at start",
+    "Read only",
+    "Invalid",
+    "Select text using ref",
+    "Custom icon",
+    "Custom icon and invalid"
+  ]
+};
+pageData.liveContext = {
+  useRef,
+  useState,
+  RhUiCalendarFillIcon,
+  RhUiClockFillIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TextInput } from '@patternfly/react-core';\n\nexport const TextInputBasic: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  return (\n    <TextInput\n      value={value}\n      type=\"text\"\n      onChange={(_event, value) => setValue(value)}\n      aria-label=\"text input example\"\n    />\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Disabled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { TextInput } from '@patternfly/react-core';\n\nexport const TextInputBasic: React.FunctionComponent = () => (\n  <TextInput value=\"disabled text input example\" type=\"text\" aria-label=\"disabled text input example\" isDisabled />\n);\n","title":"Disabled","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Truncated at start': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TextInput } from '@patternfly/react-core';\n\nexport const StartTruncatedTextInput: React.FunctionComponent = () => {\n  const [value, setValue] = useState(\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'\n  );\n  return (\n    <TextInput\n      isStartTruncated\n      value={value}\n      type=\"text\"\n      onChange={(_event, value) => setValue(value)}\n      aria-label=\"start-truncated text input example\"\n    />\n  );\n};\n","title":"Truncated at start","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Read only': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Checkbox, TextInput } from '@patternfly/react-core';\n\nexport const TextInputReadOnly: React.FunctionComponent = () => {\n  const [isPlainChecked, setIsPlainChecked] = useState(false);\n  return (\n    <>\n      <div style={{ marginBottom: '12px' }}>\n        <Checkbox\n          id=\"isPlain\"\n          key=\"isPlain\"\n          label=\"Plain read only variant\"\n          isChecked={isPlainChecked}\n          onChange={(_event, checked) => setIsPlainChecked(checked)}\n        />\n      </div>\n      <TextInput\n        value=\"read only text input example\"\n        type=\"text\"\n        readOnlyVariant={isPlainChecked ? 'plain' : 'default'}\n        aria-label=\"readonly input example\"\n      />\n    </>\n  );\n};\n","title":"Read only","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Invalid': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TextInput, ValidatedOptions } from '@patternfly/react-core';\n\nexport const TextInputInvalid: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  return (\n    <TextInput\n      value={value}\n      onChange={(_event, value) => setValue(value)}\n      isRequired\n      validated={ValidatedOptions.error}\n      type=\"text\"\n      aria-label=\"invalid text input example\"\n    />\n  );\n};\n","title":"Invalid","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Select text using ref': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useRef, useState } from 'react';\nimport { TextInput } from '@patternfly/react-core';\n\nexport const TextInputSelectUsingRef: React.FunctionComponent = () => {\n  const [value, setValue] = useState('select all on click');\n  const ref = useRef<HTMLInputElement>(null);\n  return (\n    <TextInput\n      ref={ref}\n      value={value}\n      onFocus={() => ref?.current?.select()}\n      onChange={(_event, value) => setValue(value)}\n      aria-label=\"select-all\"\n    />\n  );\n};\n","title":"Select text using ref","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Custom icon': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TextInput } from '@patternfly/react-core';\nimport RhUiCalendarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-fill-icon';\nimport RhUiClockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-fill-icon';\n\nexport const TextInputCustomIcon: React.FunctionComponent = () => {\n  const [calendar, setCalendar] = useState('');\n  const [clock, setClock] = useState('');\n\n  return (\n    <>\n      <TextInput\n        value={calendar}\n        type=\"text\"\n        customIcon={<RhUiCalendarFillIcon />}\n        onChange={(_event, value) => setCalendar(value)}\n        aria-label=\"text input example with calendar icon\"\n      />\n      <br />\n      <br />\n      <TextInput\n        value={clock}\n        type=\"text\"\n        customIcon={<RhUiClockFillIcon />}\n        onChange={(_event, value) => setClock(value)}\n        aria-label=\"text input example with clock icon\"\n      />\n    </>\n  );\n};\n","title":"Custom icon","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Custom icon and invalid': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TextInput, ValidatedOptions } from '@patternfly/react-core';\nimport RhUiCalendarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-fill-icon';\n\nexport const TextInputCustomIconInvalid: React.FunctionComponent = () => {\n  const [calendar, setCalendar] = useState('');\n\n  return (\n    <>\n      <TextInput\n        value={calendar}\n        type=\"text\"\n        validated={ValidatedOptions.error}\n        customIcon={<RhUiCalendarFillIcon />}\n        onChange={(_event, value) => setCalendar(value)}\n        aria-label=\"text input example with calendar icon\"\n      />\n    </>\n  );\n};\n","title":"Custom icon and invalid","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Disabled"])}
+    {React.createElement(pageData.examples["Truncated at start"])}
+    {React.createElement(pageData.examples["Read only"])}
+    {React.createElement(pageData.examples["Invalid"])}
+    {React.createElement(pageData.examples["Select text using ref"])}
+    {React.createElement(pageData.examples["Custom icon"])}
+    {React.createElement(pageData.examples["Custom icon and invalid"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsFormsTextInputReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/helper-text/react-demos.js

@@ -0,0 +1,180 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useEffect, useState } from 'react';
+import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import RhMicronsCloseIcon from  '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+const pageData = {
+  "id": "Helper text",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/helper-text/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/HelperText.md",
+  "relPath": "packages/react-core/src/demos/HelperText.md",
+  "examples": [
+    "Static helper text",
+    "Dynamic helper text",
+    "Static text and dynamic status"
+  ]
+};
+pageData.liveContext = {
+  useEffect,
+  useState,
+  MinusIcon,
+  RhUiWarningFillIcon,
+  RhUiCheckCircleFillIcon,
+  RhUiErrorFillIcon,
+  CheckIcon,
+  RhMicronsCloseIcon
+};
+pageData.examples = {
+  'Static helper text': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';\n\nexport const HelperTextStaticText: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n\n  const handleInputChange = (_event, inputValue: string) => {\n    setValue(inputValue);\n  };\n\n  return (\n    <Form>\n      <FormGroup label=\"Middle Name\" fieldId=\"login-input-helper-text1\">\n        <TextInput\n          type=\"text\"\n          id=\"login-input-helper-text1\"\n          name=\"login-input-helper-text1\"\n          onChange={handleInputChange}\n          aria-describedby=\"helper-text1\"\n          value={value}\n        />\n        <FormHelperText>\n          <HelperText id=\"helper-text1\">\n            <HelperTextItem>Enter your middle name or your middle initial</HelperTextItem>\n          </HelperText>\n        </FormHelperText>\n      </FormGroup>\n    </Form>\n  );\n};\n","title":"Static helper text","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`In this demo the text content of the helper text item will always be visible to users and will never change.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-describedby`}
+        </code>
+        {` attribute is passed into the text input component and is linked to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`id`}
+        </code>
+        {` of the helper text component. This allows assistive technologies to notify users of the helper text content when the input receives focus, which can be helpful if a user navigates away from and then back to the input.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Note that this demo does not validate the text input component. When it would need to be validated, there are other steps that would need to be taken to make it accessible, such as passing in `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-invalid`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-live`}
+        </code>
+        {` attributes to the appropriate components.`}
+      </p>
+    </Example>,
+  'Dynamic helper text': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useState } from 'react';\nimport { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';\n\nexport const HelperTextDynamic: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  const [inputValidation, setInputValidation] = useState('default');\n\n  const handleInputChange = (_event, inputValue: string) => {\n    setValue(inputValue);\n  };\n\n  useEffect(() => {\n    if (value === '') {\n      setInputValidation('default');\n    } else if (value === 'johndoe') {\n      setInputValidation('error');\n    } else {\n      setInputValidation('success');\n    }\n  }, [value]);\n\n  return (\n    <Form>\n      <FormGroup label=\"Username\" isRequired fieldId=\"login-input-helper-text2\">\n        <TextInput\n          isRequired\n          type=\"text\"\n          id=\"login-input-helper-text2\"\n          name=\"login-input-helper-text2\"\n          onChange={handleInputChange}\n          aria-describedby=\"helper-text2\"\n          aria-invalid={inputValidation === 'error'}\n          value={value}\n        />\n        <FormHelperText>\n          <HelperText id=\"helper-text2\" aria-live=\"polite\">\n            {inputValidation !== 'success' && (\n              <HelperTextItem variant={inputValidation as any}>\n                {inputValidation === 'default' ? 'Please enter a username' : 'Username already exists'}\n              </HelperTextItem>\n            )}\n          </HelperText>\n        </FormHelperText>\n      </FormGroup>\n    </Form>\n  );\n};\n","title":"Dynamic helper text","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`In this demo the text content of the helper text item dynamically updates based on the input value. When the input has a value of `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`johndoe`}
+        </code>
+        {`, an error is rendered to simulate a username already being taken, while an empty input renders default text. When the input is valid, no helper text is rendered.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-describedby`}
+        </code>
+        {` attribute is passed into the text input component and is linked to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`id`}
+        </code>
+        {` of the helper text component. Similar to the static variant with static text demo, this allows assistive technologies to notify users of the helper text content when the navigating to the input.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`An `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-live`}
+        </code>
+        {` region is passed into the helper text component, which allows assistive technologies to announce to users when any dynamic content within it updates, such as when the text content changes or gets rendered. Without this attribute, a user would have to navigate out of and back into the input field multiple times to check the status of their input.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-invalid`}
+        </code>
+        {` attribute is also passed into the text input, which allows assistive technologies to notify users that an input is invalid. When this attribute is true, it's important that users are notified of what is causing the input to be invalid; in this case, `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-describedby`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-live`}
+        </code>
+        {` help accomplish this.`}
+      </p>
+    </Example>,
+  'Static text and dynamic status': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useState } from 'react';\nimport { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';\n\nexport const HelperTextStaticTextDynamicVariant: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  const [inputValidation, setInputValidation] = useState({\n    ruleLength: 'indeterminate',\n    ruleCharacterTypes: 'indeterminate'\n  });\n  const { ruleLength, ruleCharacterTypes } = inputValidation;\n\n  useEffect(() => {\n    let lengthVariant = ruleLength;\n    let typeVariant = ruleCharacterTypes;\n\n    if (value === '') {\n      setInputValidation({\n        ruleLength: 'indeterminate',\n        ruleCharacterTypes: 'indeterminate'\n      });\n      return;\n    }\n\n    if (!/\\d/g.test(value)) {\n      typeVariant = 'error';\n    } else {\n      typeVariant = 'success';\n    }\n\n    if (value.length < 5) {\n      lengthVariant = 'error';\n    } else {\n      lengthVariant = 'success';\n    }\n\n    setInputValidation({ ruleLength: lengthVariant, ruleCharacterTypes: typeVariant });\n  }, [value, ruleLength, ruleCharacterTypes]);\n\n  const handleInputChange = (_event, inputValue: string) => {\n    setValue(inputValue);\n  };\n\n  const filterValidations = () => Object.keys(inputValidation).filter((item) => inputValidation[item] !== 'success');\n\n  return (\n    <Form>\n      <FormGroup label=\"Username\" isRequired fieldId=\"login-input-helper-text3\">\n        <TextInput\n          isRequired\n          type=\"text\"\n          id=\"login-input-helper-text3\"\n          name=\"login-input-helper-text3\"\n          onChange={handleInputChange}\n          aria-describedby={filterValidations().join(' ')}\n          aria-invalid={ruleCharacterTypes === 'error' || ruleLength === 'error'}\n          value={value}\n        />\n        <FormHelperText>\n          <HelperText component=\"ul\">\n            <HelperTextItem component=\"li\" id=\"ruleLength\" variant={ruleLength as any}>\n              Must be at least 5 characters in length\n            </HelperTextItem>\n            <HelperTextItem component=\"li\" id=\"ruleCharacterTypes\" variant={ruleCharacterTypes as any}>\n              Must include at least 1 number\n            </HelperTextItem>\n          </HelperText>\n        </FormHelperText>\n      </FormGroup>\n    </Form>\n  );\n};\n","title":"Static text and dynamic status","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`In this demo the text content of the helper text item remains static and never changes, but the icons and styling will change as the validation of the input changes.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-describedby`}
+        </code>
+        {` attribute is passed into the text input component and is linked to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`id`}
+        </code>
+        {` attribute of a helper text item that results in an invalid input. This will allow assistive technologies to only be notified of any outstanding criteria that has not been met when the input receives focus.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Similar to the `}
+        
+        <PatternflyThemeLink {...{"to":"/components/helper-text/react-demos#with-dynamic-text","className":""}}>
+          {`with dynamic text example`}
+        </PatternflyThemeLink>
+        {`, the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-invalid`}
+        </code>
+        {` attribute is passed in, allowing assistive technologies to announce to users when at least 1 item is causing the input to be invalid.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Static helper text"])}
+    {React.createElement(pageData.examples["Dynamic helper text"])}
+    {React.createElement(pageData.examples["Static text and dynamic status"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsHelperTextReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/helper-text/react.js

@@ -0,0 +1,164 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment } from 'react';
+import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
+import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import RhMicronsCloseIcon from  '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
+const pageData = {
+  "id": "Helper text",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/helper-text/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/HelperText/examples/HelperText.md",
+  "relPath": "packages/react-core/src/components/HelperText/examples/HelperText.md",
+  "propComponents": [
+    {
+      "name": "HelperText",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds an accessible label to the helper text when component is a \"ul\"."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the helper text container."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes applied to the helper text container."
+        },
+        {
+          "name": "component",
+          "type": "'div' | 'ul'",
+          "description": "Component type of the helper text container",
+          "defaultValue": "'div'"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "ID for the helper text container. The value of this prop can be passed into a form component's\naria-describedby prop when you intend for all helper text items to be announced to\nassistive technologies."
+        },
+        {
+          "name": "isLiveRegion",
+          "type": "boolean",
+          "description": "Flag for indicating whether the helper text container is a live region. Use this prop when you\nexpect or intend for any helper text items within the container to be dynamically updated.",
+          "defaultValue": "false"
+        }
+      ]
+    },
+    {
+      "name": "HelperTextItem",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the helper text item."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes applied to the helper text item."
+        },
+        {
+          "name": "component",
+          "type": "'div' | 'li'",
+          "description": "Sets the component type of the helper text item.",
+          "defaultValue": "'div'"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Custom icon prefixing the helper text. This property will override the default icon when the variant property is passed in."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "ID for the helper text item. The value of this prop can be passed into a form component's\naria-describedby prop when you intend for only specific helper text items to be announced to\nassistive technologies."
+        },
+        {
+          "name": "screenReaderText",
+          "type": "string",
+          "description": "Text that is only accessible to screen readers in order to announce the variant of a helper text item.\nThis prop can only be used when the variant prop has a value other than \"default\"."
+        },
+        {
+          "name": "variant",
+          "type": "'default' | 'indeterminate' | 'warning' | 'success' | 'error'",
+          "description": "Variant styling of the helper text item. Will also render a default icon, which can be overridden\nwith the icon prop.",
+          "defaultValue": "'default'"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-helper-text"
+  ],
+  "examples": [
+    "Basic",
+    "With custom icons",
+    "Multiple items"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  InfoIcon,
+  QuestionIcon,
+  CheckIcon,
+  RhMicronsCloseIcon,
+  ExclamationIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { HelperText, HelperTextItem } from '@patternfly/react-core';\n\nexport const HelperTextBasic: React.FunctionComponent = () => (\n  <Fragment>\n    <HelperText>\n      <HelperTextItem>This is default helper text</HelperTextItem>\n    </HelperText>\n    <HelperText>\n      <HelperTextItem variant=\"indeterminate\">This is indeterminate helper text</HelperTextItem>\n    </HelperText>\n    <HelperText>\n      <HelperTextItem variant=\"warning\">This is warning helper text</HelperTextItem>\n    </HelperText>\n    <HelperText>\n      <HelperTextItem variant=\"success\">This is success helper text</HelperTextItem>\n    </HelperText>\n    <HelperText>\n      <HelperTextItem variant=\"error\">This is error helper text</HelperTextItem>\n    </HelperText>\n  </Fragment>\n);\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With custom icons': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { HelperText, HelperTextItem } from '@patternfly/react-core';\nimport InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';\nimport QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';\nimport ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';\nimport CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\n\nexport const HelperTextWithCustomIcon: React.FunctionComponent = () => (\n  <Fragment>\n    <HelperText>\n      <HelperTextItem icon={<InfoIcon />}>This is default helper text</HelperTextItem>\n    </HelperText>\n    <HelperText>\n      <HelperTextItem variant=\"indeterminate\" icon={<QuestionIcon />}>\n        This is indeterminate helper text\n      </HelperTextItem>\n    </HelperText>\n    <HelperText>\n      <HelperTextItem variant=\"warning\" icon={<ExclamationIcon />}>\n        This is warning helper text\n      </HelperTextItem>\n    </HelperText>\n    <HelperText>\n      <HelperTextItem variant=\"success\" icon={<CheckIcon />}>\n        This is success helper text\n      </HelperTextItem>\n    </HelperText>\n    <HelperText>\n      <HelperTextItem variant=\"error\" icon={<RhMicronsCloseIcon />}>\n        This is error helper text\n      </HelperTextItem>\n    </HelperText>\n  </Fragment>\n);\n","title":"With custom icons","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Multiple items': props => 
+    <Example {...pageData} {...props} {...{"code":"import { HelperText, HelperTextItem } from '@patternfly/react-core';\n\nexport const HelperTextMultipleItems: React.FunctionComponent = () => (\n  <HelperText component=\"ul\">\n    <HelperTextItem component=\"li\">This is default helper text</HelperTextItem>\n    <HelperTextItem component=\"li\">This is another default helper text in the same HelperText block</HelperTextItem>\n    <HelperTextItem component=\"li\">And this is more default text in the same HelperText block</HelperTextItem>\n  </HelperText>\n);\n","title":"Multiple items","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can pass multiple `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<HelperTextItem>`}
+        </code>
+        {` components inside a single `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Helpertext>`}
+        </code>
+        {` container.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["With custom icons"])}
+    {React.createElement(pageData.examples["Multiple items"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsHelperTextReactDocs';
+Component.pageData = pageData;
+
+export default Component;