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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (163) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/LICENSE +21 -0
  3. package/package.json +12 -11
  4. package/patternfly-docs/generated/components/about-modal/react.js +0 -149
  5. package/patternfly-docs/generated/components/accordion/react.js +0 -262
  6. package/patternfly-docs/generated/components/action-list/react.js +0 -144
  7. package/patternfly-docs/generated/components/alert/react-demos.js +0 -56
  8. package/patternfly-docs/generated/components/alert/react.js +0 -1433
  9. package/patternfly-docs/generated/components/avatar/react.js +0 -166
  10. package/patternfly-docs/generated/components/back-to-top/react-demos.js +0 -60
  11. package/patternfly-docs/generated/components/back-to-top/react.js +0 -77
  12. package/patternfly-docs/generated/components/backdrop/react.js +0 -64
  13. package/patternfly-docs/generated/components/background-image/react.js +0 -62
  14. package/patternfly-docs/generated/components/badge/react.js +0 -97
  15. package/patternfly-docs/generated/components/banner/react-demos.js +0 -57
  16. package/patternfly-docs/generated/components/banner/react.js +0 -148
  17. package/patternfly-docs/generated/components/brand/react.js +0 -142
  18. package/patternfly-docs/generated/components/breadcrumb/react.js +0 -206
  19. package/patternfly-docs/generated/components/button/react-demos.js +0 -57
  20. package/patternfly-docs/generated/components/button/react.js +0 -826
  21. package/patternfly-docs/generated/components/card/react-demos.js +0 -201
  22. package/patternfly-docs/generated/components/card/react.js +0 -1015
  23. package/patternfly-docs/generated/components/charts/area-chart/-Victory.js +0 -1350
  24. package/patternfly-docs/generated/components/charts/bar-chart/-Victory.js +0 -1334
  25. package/patternfly-docs/generated/components/charts/box-plot-chart/-Victory.js +0 -1282
  26. package/patternfly-docs/generated/components/charts/bullet-chart/-Victory.js +0 -848
  27. package/patternfly-docs/generated/components/charts/colors-for-charts/-Victory.js +0 -192
  28. package/patternfly-docs/generated/components/charts/donut-chart/-Victory.js +0 -426
  29. package/patternfly-docs/generated/components/charts/donut-utilization-chart/-Victory.js +0 -804
  30. package/patternfly-docs/generated/components/charts/legends/-Victory.js +0 -3230
  31. package/patternfly-docs/generated/components/charts/line-chart/-Victory.js +0 -1178
  32. package/patternfly-docs/generated/components/charts/line-chart/ECharts.js +0 -525
  33. package/patternfly-docs/generated/components/charts/patterns/-Victory.js +0 -3382
  34. package/patternfly-docs/generated/components/charts/pie-chart/-Victory.js +0 -377
  35. package/patternfly-docs/generated/components/charts/resize-observer/-Victory.js +0 -2475
  36. package/patternfly-docs/generated/components/charts/sankey-chart/ECharts.js +0 -538
  37. package/patternfly-docs/generated/components/charts/scatter-chart/-Victory.js +0 -1551
  38. package/patternfly-docs/generated/components/charts/skeletons/-Victory.js +0 -4115
  39. package/patternfly-docs/generated/components/charts/sparkline-chart/-Victory.js +0 -955
  40. package/patternfly-docs/generated/components/charts/stack-chart/-Victory.js +0 -1173
  41. package/patternfly-docs/generated/components/charts/threshold-chart/-Victory.js +0 -1166
  42. package/patternfly-docs/generated/components/charts/tooltips/-Victory.js +0 -413
  43. package/patternfly-docs/generated/components/chip/react-deprecated.js +0 -323
  44. package/patternfly-docs/generated/components/clipboard-copy/react.js +0 -373
  45. package/patternfly-docs/generated/components/code-block/react.js +0 -148
  46. package/patternfly-docs/generated/components/code-editor/react.js +0 -659
  47. package/patternfly-docs/generated/components/compass/react-demos.js +0 -147
  48. package/patternfly-docs/generated/components/compass/react.js +0 -440
  49. package/patternfly-docs/generated/components/content/react.js +0 -248
  50. package/patternfly-docs/generated/components/data-list/react-demos.js +0 -90
  51. package/patternfly-docs/generated/components/data-list/react.js +0 -709
  52. package/patternfly-docs/generated/components/date-and-time/calendar-month/react.js +0 -283
  53. package/patternfly-docs/generated/components/date-and-time/date-and-time-picker/react-demos.js +0 -64
  54. package/patternfly-docs/generated/components/date-and-time/date-picker/react-demos.js +0 -83
  55. package/patternfly-docs/generated/components/date-and-time/date-picker/react.js +0 -395
  56. package/patternfly-docs/generated/components/date-and-time/time-picker/react.js +0 -241
  57. package/patternfly-docs/generated/components/description-list/react-demos.js +0 -58
  58. package/patternfly-docs/generated/components/description-list/react.js +0 -743
  59. package/patternfly-docs/generated/components/divider/react.js +0 -126
  60. package/patternfly-docs/generated/components/drag-and-drop/react-demos.js +0 -351
  61. package/patternfly-docs/generated/components/drag-and-drop/react-deprecated.js +0 -184
  62. package/patternfly-docs/generated/components/drag-and-drop/react.js +0 -137
  63. package/patternfly-docs/generated/components/drawer/react.js +0 -598
  64. package/patternfly-docs/generated/components/dual-list-selector/react-deprecated.js +0 -772
  65. package/patternfly-docs/generated/components/dual-list-selector/react.js +0 -594
  66. package/patternfly-docs/generated/components/empty-state/react.js +0 -199
  67. package/patternfly-docs/generated/components/expandable-section/react-demos.js +0 -65
  68. package/patternfly-docs/generated/components/expandable-section/react.js +0 -408
  69. package/patternfly-docs/generated/components/file-upload/multiple-file-upload/react-demos.js +0 -52
  70. package/patternfly-docs/generated/components/file-upload/multiple-file-upload/react.js +0 -398
  71. package/patternfly-docs/generated/components/file-upload/simple-file-upload/react.js +0 -749
  72. package/patternfly-docs/generated/components/forms/checkbox/react.js +0 -222
  73. package/patternfly-docs/generated/components/forms/form/react.js +0 -1106
  74. package/patternfly-docs/generated/components/forms/form-select/react.js +0 -208
  75. package/patternfly-docs/generated/components/forms/radio/react.js +0 -212
  76. package/patternfly-docs/generated/components/forms/text-area/react.js +0 -160
  77. package/patternfly-docs/generated/components/forms/text-input/react.js +0 -216
  78. package/patternfly-docs/generated/components/helper-text/react-demos.js +0 -180
  79. package/patternfly-docs/generated/components/helper-text/react.js +0 -164
  80. package/patternfly-docs/generated/components/hero/react.js +0 -88
  81. package/patternfly-docs/generated/components/hint/react.js +0 -169
  82. package/patternfly-docs/generated/components/icon/react.js +0 -215
  83. package/patternfly-docs/generated/components/input-group/react.js +0 -182
  84. package/patternfly-docs/generated/components/jump-links/react-demos.js +0 -154
  85. package/patternfly-docs/generated/components/jump-links/react.js +0 -212
  86. package/patternfly-docs/generated/components/label/react-demos.js +0 -57
  87. package/patternfly-docs/generated/components/label/react.js +0 -417
  88. package/patternfly-docs/generated/components/list/react.js +0 -175
  89. package/patternfly-docs/generated/components/login-page/react.js +0 -587
  90. package/patternfly-docs/generated/components/masthead/react-demos.js +0 -79
  91. package/patternfly-docs/generated/components/masthead/react.js +0 -291
  92. package/patternfly-docs/generated/components/menus/application-launcher/react-demos.js +0 -769
  93. package/patternfly-docs/generated/components/menus/context-selector/react-demos.js +0 -665
  94. package/patternfly-docs/generated/components/menus/custom-menus/react-demos.js +0 -187
  95. package/patternfly-docs/generated/components/menus/dropdown/react-templates.js +0 -163
  96. package/patternfly-docs/generated/components/menus/dropdown/react.js +0 -998
  97. package/patternfly-docs/generated/components/menus/menu/react.js +0 -1540
  98. package/patternfly-docs/generated/components/menus/menu-toggle/react.js +0 -747
  99. package/patternfly-docs/generated/components/menus/options-menu/react-demos.js +0 -508
  100. package/patternfly-docs/generated/components/menus/select/react-templates.js +0 -257
  101. package/patternfly-docs/generated/components/menus/select/react.js +0 -998
  102. package/patternfly-docs/generated/components/modal/react-deprecated.js +0 -554
  103. package/patternfly-docs/generated/components/modal/react.js +0 -597
  104. package/patternfly-docs/generated/components/navigation/react-demos.js +0 -356
  105. package/patternfly-docs/generated/components/navigation/react.js +0 -409
  106. package/patternfly-docs/generated/components/notification-badge/react.js +0 -196
  107. package/patternfly-docs/generated/components/notification-drawer/react-demos.js +0 -107
  108. package/patternfly-docs/generated/components/notification-drawer/react.js +0 -394
  109. package/patternfly-docs/generated/components/number-input/react.js +0 -210
  110. package/patternfly-docs/generated/components/overflow-menu/react.js +0 -274
  111. package/patternfly-docs/generated/components/page/react-demos.js +0 -149
  112. package/patternfly-docs/generated/components/page/react.js +0 -1352
  113. package/patternfly-docs/generated/components/pagination/react.js +0 -492
  114. package/patternfly-docs/generated/components/panel/react.js +0 -236
  115. package/patternfly-docs/generated/components/popover/react.js +0 -390
  116. package/patternfly-docs/generated/components/progress/react-demos.js +0 -59
  117. package/patternfly-docs/generated/components/progress/react.js +0 -283
  118. package/patternfly-docs/generated/components/progress-stepper/react-demos.js +0 -45
  119. package/patternfly-docs/generated/components/progress-stepper/react.js +0 -219
  120. package/patternfly-docs/generated/components/search-input/react-demos.js +0 -113
  121. package/patternfly-docs/generated/components/search-input/react.js +0 -263
  122. package/patternfly-docs/generated/components/sidebar/react.js +0 -236
  123. package/patternfly-docs/generated/components/simple-list/react.js +0 -200
  124. package/patternfly-docs/generated/components/skeleton/react-demos.js +0 -44
  125. package/patternfly-docs/generated/components/skeleton/react.js +0 -122
  126. package/patternfly-docs/generated/components/skip-to-content/react.js +0 -73
  127. package/patternfly-docs/generated/components/slider/react.js +0 -309
  128. package/patternfly-docs/generated/components/spinner/react.js +0 -111
  129. package/patternfly-docs/generated/components/switch/react.js +0 -163
  130. package/patternfly-docs/generated/components/table/react-demos.js +0 -355
  131. package/patternfly-docs/generated/components/table/react-deprecated.js +0 -1350
  132. package/patternfly-docs/generated/components/table/react.js +0 -3241
  133. package/patternfly-docs/generated/components/tabs/react-demos.js +0 -108
  134. package/patternfly-docs/generated/components/tabs/react.js +0 -1359
  135. package/patternfly-docs/generated/components/text-input-group/react-demos.js +0 -152
  136. package/patternfly-docs/generated/components/text-input-group/react.js +0 -278
  137. package/patternfly-docs/generated/components/tile/react-deprecated.js +0 -242
  138. package/patternfly-docs/generated/components/timestamp/react.js +0 -283
  139. package/patternfly-docs/generated/components/title/react.js +0 -94
  140. package/patternfly-docs/generated/components/toggle-group/react.js +0 -299
  141. package/patternfly-docs/generated/components/toolbar/react-demos.js +0 -66
  142. package/patternfly-docs/generated/components/toolbar/react.js +0 -932
  143. package/patternfly-docs/generated/components/tooltip/react.js +0 -241
  144. package/patternfly-docs/generated/components/tree-view/react.js +0 -429
  145. package/patternfly-docs/generated/components/truncate/react.js +0 -211
  146. package/patternfly-docs/generated/components/wizard/react-demos.js +0 -87
  147. package/patternfly-docs/generated/components/wizard/react-deprecated.js +0 -788
  148. package/patternfly-docs/generated/components/wizard/react.js +0 -986
  149. package/patternfly-docs/generated/developer-guides/open-ui-automation/react.js +0 -285
  150. package/patternfly-docs/generated/foundations-and-styles/layouts/bullseye/react.js +0 -70
  151. package/patternfly-docs/generated/foundations-and-styles/layouts/flex/react.js +0 -506
  152. package/patternfly-docs/generated/foundations-and-styles/layouts/gallery/react.js +0 -94
  153. package/patternfly-docs/generated/foundations-and-styles/layouts/grid/react.js +0 -272
  154. package/patternfly-docs/generated/foundations-and-styles/layouts/level/react.js +0 -87
  155. package/patternfly-docs/generated/foundations-and-styles/layouts/split/react.js +0 -124
  156. package/patternfly-docs/generated/foundations-and-styles/layouts/stack/react.js +0 -112
  157. package/patternfly-docs/generated/index.js +0 -1769
  158. package/patternfly-docs/generated/patterns/card-view/react-demos.js +0 -78
  159. package/patternfly-docs/generated/patterns/filters/react-demos.js +0 -141
  160. package/patternfly-docs/generated/patterns/password-generator/react-demos.js +0 -51
  161. package/patternfly-docs/generated/patterns/password-strength/react-demos.js +0 -61
  162. package/patternfly-docs/generated/patterns/primary-detail/react-demos.js +0 -124
  163. package/patternfly-docs/generated/patterns/right-to-left/react-demos.js +0 -81
@@ -1,216 +0,0 @@
1
- import React from 'react';
2
- import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
3
- import { useRef, useState } from 'react';
4
- import RhUiCalendarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-fill-icon';
5
- import RhUiClockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-fill-icon';
6
- const pageData = {
7
- "id": "Text input",
8
- "section": "components",
9
- "subsection": "forms",
10
- "deprecated": false,
11
- "template": false,
12
- "beta": false,
13
- "demo": false,
14
- "newImplementationLink": false,
15
- "source": "react",
16
- "tabName": null,
17
- "slug": "/components/forms/text-input/react",
18
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/TextInput/examples/TextInput.md",
19
- "relPath": "packages/react-core/src/components/TextInput/examples/TextInput.md",
20
- "propComponents": [
21
- {
22
- "name": "TextInput",
23
- "description": "",
24
- "props": [
25
- {
26
- "name": "aria-label",
27
- "type": "string",
28
- "description": "Aria-label. The text input requires an associated id or aria-label."
29
- },
30
- {
31
- "name": "className",
32
- "type": "string",
33
- "description": "Additional classes added to the text input."
34
- },
35
- {
36
- "name": "customIcon",
37
- "type": "React.ReactNode",
38
- "description": "Custom icon to render. If the validated prop is also passed, this will render an icon in addition to a validated icon."
39
- },
40
- {
41
- "name": "expandedProps",
42
- "type": "TextInputExpandedObj",
43
- "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."
44
- },
45
- {
46
- "name": "isDisabled",
47
- "type": "boolean",
48
- "description": "Flag to show if the text input is disabled."
49
- },
50
- {
51
- "name": "isExpanded",
52
- "type": "boolean",
53
- "description": "Flag to apply expanded styling. expandedProps should now be used instead.",
54
- "deprecated": true
55
- },
56
- {
57
- "name": "isLeftTruncated",
58
- "type": "boolean",
59
- "description": "Use isStartTruncated instead. Trim text at start",
60
- "deprecated": true
61
- },
62
- {
63
- "name": "isRequired",
64
- "type": "boolean",
65
- "description": "Flag indicating whether the input is required"
66
- },
67
- {
68
- "name": "isStartTruncated",
69
- "type": "boolean",
70
- "description": "Trim text at start"
71
- },
72
- {
73
- "name": "onBlur",
74
- "type": "(event?: any) => void",
75
- "description": "Callback function when text input is blurred (focus leaves)"
76
- },
77
- {
78
- "name": "onChange",
79
- "type": "(event: React.FormEvent<HTMLInputElement>, value: string) => void",
80
- "description": "A callback for when the text input value changes."
81
- },
82
- {
83
- "name": "onFocus",
84
- "type": "(event?: any) => void",
85
- "description": "Callback function when text input is focused"
86
- },
87
- {
88
- "name": "ouiaId",
89
- "type": "number | string",
90
- "description": "Value to overwrite the randomly generated data-ouia-component-id."
91
- },
92
- {
93
- "name": "ouiaSafe",
94
- "type": "boolean",
95
- "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."
96
- },
97
- {
98
- "name": "placeholder",
99
- "type": "string",
100
- "description": "Placeholder of the text input when there is no value"
101
- },
102
- {
103
- "name": "readOnlyVariant",
104
- "type": "'plain' | 'default'",
105
- "description": "Sets the input as readonly and determines the readonly styling."
106
- },
107
- {
108
- "name": "type",
109
- "type": "| 'text'\n| 'date'\n| 'datetime-local'\n| 'email'\n| 'month'\n| 'number'\n| 'password'\n| 'search'\n| 'tel'\n| 'time'\n| 'url'",
110
- "description": "Type that the text input accepts."
111
- },
112
- {
113
- "name": "validated",
114
- "type": "'success' | 'warning' | 'error' | 'default'",
115
- "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."
116
- },
117
- {
118
- "name": "value",
119
- "type": "string | number",
120
- "description": "Value of the text input."
121
- }
122
- ]
123
- },
124
- {
125
- "name": "TextInputExpandedObj",
126
- "description": "",
127
- "props": [
128
- {
129
- "name": "ariaControls",
130
- "type": "string",
131
- "description": "Id of the element that the text input is controlling expansion of.",
132
- "required": true
133
- },
134
- {
135
- "name": "isExpanded",
136
- "type": "boolean",
137
- "description": "Flag to apply expanded styling.",
138
- "required": true
139
- }
140
- ]
141
- }
142
- ],
143
- "cssPrefix": [
144
- "pf-v6-c-form-control"
145
- ],
146
- "examples": [
147
- "Basic",
148
- "Disabled",
149
- "Truncated at start",
150
- "Read only",
151
- "Invalid",
152
- "Select text using ref",
153
- "Custom icon",
154
- "Custom icon and invalid"
155
- ]
156
- };
157
- pageData.liveContext = {
158
- useRef,
159
- useState,
160
- RhUiCalendarFillIcon,
161
- RhUiClockFillIcon
162
- };
163
- pageData.examples = {
164
- 'Basic': props =>
165
- <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":""}}>
166
-
167
- </Example>,
168
- 'Disabled': props =>
169
- <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":""}}>
170
-
171
- </Example>,
172
- 'Truncated at start': props =>
173
- <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":""}}>
174
-
175
- </Example>,
176
- 'Read only': props =>
177
- <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":""}}>
178
-
179
- </Example>,
180
- 'Invalid': props =>
181
- <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":""}}>
182
-
183
- </Example>,
184
- 'Select text using ref': props =>
185
- <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":""}}>
186
-
187
- </Example>,
188
- 'Custom icon': props =>
189
- <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":""}}>
190
-
191
- </Example>,
192
- 'Custom icon and invalid': props =>
193
- <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":""}}>
194
-
195
- </Example>
196
- };
197
-
198
- const Component = () => (
199
- <React.Fragment>
200
- <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
201
- {`Examples`}
202
- </AutoLinkHeader>
203
- {React.createElement(pageData.examples["Basic"])}
204
- {React.createElement(pageData.examples["Disabled"])}
205
- {React.createElement(pageData.examples["Truncated at start"])}
206
- {React.createElement(pageData.examples["Read only"])}
207
- {React.createElement(pageData.examples["Invalid"])}
208
- {React.createElement(pageData.examples["Select text using ref"])}
209
- {React.createElement(pageData.examples["Custom icon"])}
210
- {React.createElement(pageData.examples["Custom icon and invalid"])}
211
- </React.Fragment>
212
- );
213
- Component.displayName = 'ComponentsFormsTextInputReactDocs';
214
- Component.pageData = pageData;
215
-
216
- export default Component;
@@ -1,180 +0,0 @@
1
- import React from 'react';
2
- import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
3
- import { useEffect, useState } from 'react';
4
- import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
5
- import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
6
- import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
7
- import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
8
- import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
9
- import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
10
- const pageData = {
11
- "id": "Helper text",
12
- "section": "components",
13
- "subsection": "",
14
- "deprecated": false,
15
- "template": false,
16
- "beta": false,
17
- "demo": false,
18
- "newImplementationLink": false,
19
- "source": "react-demos",
20
- "tabName": null,
21
- "slug": "/components/helper-text/react-demos",
22
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/HelperText.md",
23
- "relPath": "packages/react-core/src/demos/HelperText.md",
24
- "examples": [
25
- "Static helper text",
26
- "Dynamic helper text",
27
- "Static text and dynamic status"
28
- ]
29
- };
30
- pageData.liveContext = {
31
- useEffect,
32
- useState,
33
- MinusIcon,
34
- RhUiWarningFillIcon,
35
- RhUiCheckCircleFillIcon,
36
- RhUiErrorFillIcon,
37
- CheckIcon,
38
- RhMicronsCloseIcon
39
- };
40
- pageData.examples = {
41
- 'Static helper text': props =>
42
- <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":""}}>
43
-
44
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
45
- {`In this demo the text content of the helper text item will always be visible to users and will never change.`}
46
- </p>
47
-
48
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
49
- {`The `}
50
-
51
- <code {...{"className":"ws-code "}}>
52
- {`aria-describedby`}
53
- </code>
54
- {` attribute is passed into the text input component and is linked to the `}
55
-
56
- <code {...{"className":"ws-code "}}>
57
- {`id`}
58
- </code>
59
- {` 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.`}
60
- </p>
61
-
62
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
63
- {`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 `}
64
-
65
- <code {...{"className":"ws-code "}}>
66
- {`aria-invalid`}
67
- </code>
68
- {` and `}
69
-
70
- <code {...{"className":"ws-code "}}>
71
- {`aria-live`}
72
- </code>
73
- {` attributes to the appropriate components.`}
74
- </p>
75
- </Example>,
76
- 'Dynamic helper text': props =>
77
- <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":""}}>
78
-
79
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
80
- {`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 `}
81
-
82
- <code {...{"className":"ws-code "}}>
83
- {`johndoe`}
84
- </code>
85
- {`, 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.`}
86
- </p>
87
-
88
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
89
- {`The `}
90
-
91
- <code {...{"className":"ws-code "}}>
92
- {`aria-describedby`}
93
- </code>
94
- {` attribute is passed into the text input component and is linked to the `}
95
-
96
- <code {...{"className":"ws-code "}}>
97
- {`id`}
98
- </code>
99
- {` 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.`}
100
- </p>
101
-
102
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
103
- {`An `}
104
-
105
- <code {...{"className":"ws-code "}}>
106
- {`aria-live`}
107
- </code>
108
- {` 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.`}
109
- </p>
110
-
111
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
112
- {`The `}
113
-
114
- <code {...{"className":"ws-code "}}>
115
- {`aria-invalid`}
116
- </code>
117
- {` 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, `}
118
-
119
- <code {...{"className":"ws-code "}}>
120
- {`aria-describedby`}
121
- </code>
122
- {` and `}
123
-
124
- <code {...{"className":"ws-code "}}>
125
- {`aria-live`}
126
- </code>
127
- {` help accomplish this.`}
128
- </p>
129
- </Example>,
130
- 'Static text and dynamic status': props =>
131
- <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":""}}>
132
-
133
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
134
- {`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.`}
135
- </p>
136
-
137
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
138
- {`The `}
139
-
140
- <code {...{"className":"ws-code "}}>
141
- {`aria-describedby`}
142
- </code>
143
- {` attribute is passed into the text input component and is linked to the `}
144
-
145
- <code {...{"className":"ws-code "}}>
146
- {`id`}
147
- </code>
148
- {` 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.`}
149
- </p>
150
-
151
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
152
- {`Similar to the `}
153
-
154
- <PatternflyThemeLink {...{"to":"/components/helper-text/react-demos#with-dynamic-text","className":""}}>
155
- {`with dynamic text example`}
156
- </PatternflyThemeLink>
157
- {`, the `}
158
-
159
- <code {...{"className":"ws-code "}}>
160
- {`aria-invalid`}
161
- </code>
162
- {` attribute is passed in, allowing assistive technologies to announce to users when at least 1 item is causing the input to be invalid.`}
163
- </p>
164
- </Example>
165
- };
166
-
167
- const Component = () => (
168
- <React.Fragment>
169
- <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
170
- {`Demos`}
171
- </AutoLinkHeader>
172
- {React.createElement(pageData.examples["Static helper text"])}
173
- {React.createElement(pageData.examples["Dynamic helper text"])}
174
- {React.createElement(pageData.examples["Static text and dynamic status"])}
175
- </React.Fragment>
176
- );
177
- Component.displayName = 'ComponentsHelperTextReactDemosDocs';
178
- Component.pageData = pageData;
179
-
180
- export default Component;
@@ -1,164 +0,0 @@
1
- import React from 'react';
2
- import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
3
- import { Fragment } from 'react';
4
- import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
5
- import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
6
- import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
7
- import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
8
- import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
9
- const pageData = {
10
- "id": "Helper text",
11
- "section": "components",
12
- "subsection": "",
13
- "deprecated": false,
14
- "template": false,
15
- "beta": false,
16
- "demo": false,
17
- "newImplementationLink": false,
18
- "source": "react",
19
- "tabName": null,
20
- "slug": "/components/helper-text/react",
21
- "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/HelperText/examples/HelperText.md",
22
- "relPath": "packages/react-core/src/components/HelperText/examples/HelperText.md",
23
- "propComponents": [
24
- {
25
- "name": "HelperText",
26
- "description": "",
27
- "props": [
28
- {
29
- "name": "aria-label",
30
- "type": "string",
31
- "description": "Adds an accessible label to the helper text when component is a \"ul\"."
32
- },
33
- {
34
- "name": "children",
35
- "type": "React.ReactNode",
36
- "description": "Content rendered inside the helper text container."
37
- },
38
- {
39
- "name": "className",
40
- "type": "string",
41
- "description": "Additional classes applied to the helper text container."
42
- },
43
- {
44
- "name": "component",
45
- "type": "'div' | 'ul'",
46
- "description": "Component type of the helper text container",
47
- "defaultValue": "'div'"
48
- },
49
- {
50
- "name": "id",
51
- "type": "string",
52
- "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."
53
- },
54
- {
55
- "name": "isLiveRegion",
56
- "type": "boolean",
57
- "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.",
58
- "defaultValue": "false"
59
- }
60
- ]
61
- },
62
- {
63
- "name": "HelperTextItem",
64
- "description": "",
65
- "props": [
66
- {
67
- "name": "children",
68
- "type": "React.ReactNode",
69
- "description": "Content rendered inside the helper text item."
70
- },
71
- {
72
- "name": "className",
73
- "type": "string",
74
- "description": "Additional classes applied to the helper text item."
75
- },
76
- {
77
- "name": "component",
78
- "type": "'div' | 'li'",
79
- "description": "Sets the component type of the helper text item.",
80
- "defaultValue": "'div'"
81
- },
82
- {
83
- "name": "icon",
84
- "type": "React.ReactNode",
85
- "description": "Custom icon prefixing the helper text. This property will override the default icon when the variant property is passed in."
86
- },
87
- {
88
- "name": "id",
89
- "type": "string",
90
- "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."
91
- },
92
- {
93
- "name": "screenReaderText",
94
- "type": "string",
95
- "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\"."
96
- },
97
- {
98
- "name": "variant",
99
- "type": "'default' | 'indeterminate' | 'warning' | 'success' | 'error'",
100
- "description": "Variant styling of the helper text item. Will also render a default icon, which can be overridden\nwith the icon prop.",
101
- "defaultValue": "'default'"
102
- }
103
- ]
104
- }
105
- ],
106
- "cssPrefix": [
107
- "pf-v6-c-helper-text"
108
- ],
109
- "examples": [
110
- "Basic",
111
- "With custom icons",
112
- "Multiple items"
113
- ]
114
- };
115
- pageData.liveContext = {
116
- Fragment,
117
- InfoIcon,
118
- QuestionIcon,
119
- CheckIcon,
120
- RhMicronsCloseIcon,
121
- ExclamationIcon
122
- };
123
- pageData.examples = {
124
- 'Basic': props =>
125
- <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":""}}>
126
-
127
- </Example>,
128
- 'With custom icons': props =>
129
- <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":""}}>
130
-
131
- </Example>,
132
- 'Multiple items': props =>
133
- <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":""}}>
134
-
135
- <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
136
- {`You can pass multiple `}
137
-
138
- <code {...{"className":"ws-code "}}>
139
- {`<HelperTextItem>`}
140
- </code>
141
- {` components inside a single `}
142
-
143
- <code {...{"className":"ws-code "}}>
144
- {`<Helpertext>`}
145
- </code>
146
- {` container.`}
147
- </p>
148
- </Example>
149
- };
150
-
151
- const Component = () => (
152
- <React.Fragment>
153
- <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
154
- {`Examples`}
155
- </AutoLinkHeader>
156
- {React.createElement(pageData.examples["Basic"])}
157
- {React.createElement(pageData.examples["With custom icons"])}
158
- {React.createElement(pageData.examples["Multiple items"])}
159
- </React.Fragment>
160
- );
161
- Component.displayName = 'ComponentsHelperTextReactDocs';
162
- Component.pageData = pageData;
163
-
164
- export default Component;