@patternfly/patternfly 5.0.0-alpha.14 → 5.0.0-alpha.18

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 (157) hide show
  1. package/assets/pficon/pficon.woff +0 -0
  2. package/assets/pficon/pficon.woff2 +0 -0
  3. package/components/Accordion/accordion.css +2 -0
  4. package/components/Accordion/accordion.scss +2 -0
  5. package/components/AppLauncher/app-launcher.css +2 -0
  6. package/components/AppLauncher/app-launcher.scss +2 -0
  7. package/components/Breadcrumb/breadcrumb.css +2 -0
  8. package/components/Breadcrumb/breadcrumb.scss +2 -0
  9. package/components/ContextSelector/context-selector.css +5 -1
  10. package/components/ContextSelector/context-selector.scss +6 -2
  11. package/components/DataList/data-list.css +2 -0
  12. package/components/DataList/data-list.scss +2 -0
  13. package/components/Drawer/drawer.css +13 -13
  14. package/components/Dropdown/dropdown.css +12 -10
  15. package/components/Dropdown/dropdown.scss +2 -0
  16. package/components/ExpandableSection/expandable-section.css +2 -0
  17. package/components/ExpandableSection/expandable-section.scss +2 -0
  18. package/components/Label/label.css +2 -0
  19. package/components/Label/label.scss +2 -0
  20. package/components/Login/login.css +1 -1
  21. package/components/Menu/menu.css +2 -0
  22. package/components/Menu/menu.scss +2 -0
  23. package/components/MenuToggle/menu-toggle.css +2 -0
  24. package/components/MenuToggle/menu-toggle.scss +2 -0
  25. package/components/Page/page.css +60 -60
  26. package/components/Pagination/pagination.css +2 -2
  27. package/components/SearchInput/search-input.css +2 -0
  28. package/components/SearchInput/search-input.scss +2 -0
  29. package/components/Table/table-grid.css +28 -28
  30. package/components/Table/table-tree-view.css +4 -4
  31. package/components/TextInputGroup/text-input-group.css +4 -2
  32. package/components/TextInputGroup/text-input-group.scss +4 -3
  33. package/components/Toolbar/toolbar.css +35 -35
  34. package/components/TreeView/tree-view.css +7 -15
  35. package/components/TreeView/tree-view.scss +7 -18
  36. package/components/Wizard/wizard.css +2 -0
  37. package/components/Wizard/wizard.scss +2 -0
  38. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -13
  39. package/docs/components/Accordion/examples/Accordion.md +12 -12
  40. package/docs/components/ActionList/examples/ActionList.md +6 -6
  41. package/docs/components/Alert/examples/Alert.md +19 -19
  42. package/docs/components/AlertGroup/examples/AlertGroup.md +10 -10
  43. package/docs/components/AppLauncher/examples/application-launcher.md +34 -34
  44. package/docs/components/Avatar/examples/Avatar.md +11 -11
  45. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  46. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  47. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  48. package/docs/components/Badge/examples/Badge.md +5 -5
  49. package/docs/components/Banner/examples/Banner.md +8 -8
  50. package/docs/components/Brand/examples/Brand.md +9 -9
  51. package/docs/components/Breadcrumb/examples/Breadcrumb.md +15 -15
  52. package/docs/components/Button/examples/Button.md +35 -35
  53. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -32
  54. package/docs/components/Card/examples/Card.md +27 -27
  55. package/docs/components/Check/examples/Check.md +13 -13
  56. package/docs/components/Chip/examples/Chip.md +13 -13
  57. package/docs/components/ChipGroup/examples/ChipGroup.md +15 -15
  58. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  59. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  60. package/docs/components/CodeEditor/examples/CodeEditor.md +56 -33
  61. package/docs/components/Content/examples/Content.md +10 -10
  62. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  63. package/docs/components/ContextSelector/examples/context-selector.md +80 -74
  64. package/docs/components/DataList/examples/DataList.md +83 -83
  65. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  66. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  67. package/docs/components/Divider/examples/Divider.md +9 -9
  68. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  69. package/docs/components/Drawer/examples/Drawer.md +43 -43
  70. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  71. package/docs/components/Dropdown/examples/Dropdown.md +50 -50
  72. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  73. package/docs/components/EmptyState/examples/EmptyState.md +19 -19
  74. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  75. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  76. package/docs/components/Form/examples/Form.md +64 -64
  77. package/docs/components/FormControl/examples/FormControl.md +20 -20
  78. package/docs/components/HelperText/examples/HelperText.md +11 -11
  79. package/docs/components/Hint/examples/Hint.md +7 -7
  80. package/docs/components/Icon/examples/Icon.md +10 -10
  81. package/docs/components/InlineEdit/examples/InlineEdit.md +24 -24
  82. package/docs/components/InputGroup/examples/InputGroup.md +10 -10
  83. package/docs/components/JumpLinks/examples/JumpLinks.md +21 -21
  84. package/docs/components/Label/examples/Label.md +31 -31
  85. package/docs/components/LabelGroup/examples/LabelGroup.md +22 -22
  86. package/docs/components/List/examples/List.md +6 -6
  87. package/docs/components/LogViewer/examples/LogViewer.md +69 -69
  88. package/docs/components/Login/examples/Login.md +22 -22
  89. package/docs/components/Masthead/examples/masthead.md +9 -9
  90. package/docs/components/Menu/examples/Menu.md +78 -76
  91. package/docs/components/MenuToggle/examples/MenuToggle.md +24 -24
  92. package/docs/components/ModalBox/examples/ModalBox.md +35 -35
  93. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +22 -22
  94. package/docs/components/Nav/examples/Navigation.md +36 -36
  95. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  96. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +39 -39
  97. package/docs/components/NumberInput/examples/NumberInput.md +12 -12
  98. package/docs/components/OptionsMenu/examples/options-menu.md +27 -28
  99. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  100. package/docs/components/Page/examples/Page.md +54 -54
  101. package/docs/components/Pagination/examples/Pagination.md +27 -27
  102. package/docs/components/Panel/examples/Panel.md +10 -10
  103. package/docs/components/Popover/examples/Popover.md +34 -34
  104. package/docs/components/Progress/examples/Progress.md +31 -31
  105. package/docs/components/ProgressStepper/examples/ProgressStepper.md +24 -24
  106. package/docs/components/Radio/examples/Radio.md +11 -11
  107. package/docs/components/SearchInput/examples/SearchInput.md +34 -34
  108. package/docs/components/Select/examples/Select.md +143 -143
  109. package/docs/components/Sidebar/examples/Sidebar.md +14 -14
  110. package/docs/components/SimpleList/examples/SimpleList.md +11 -11
  111. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  112. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  113. package/docs/components/Slider/examples/Slider.md +24 -24
  114. package/docs/components/Spinner/examples/Spinner.md +24 -24
  115. package/docs/components/Switch/examples/Switch.md +19 -19
  116. package/docs/components/TabContent/examples/TabContent.md +13 -13
  117. package/docs/components/Table/examples/Table.md +155 -155
  118. package/docs/components/Tabs/examples/Tabs.md +47 -47
  119. package/docs/components/TextInputGroup/examples/TextInputGroup.md +19 -19
  120. package/docs/components/Tile/examples/Tile.md +15 -15
  121. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  122. package/docs/components/Title/examples/Title.md +17 -17
  123. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  124. package/docs/components/Toolbar/examples/Toolbar.md +113 -113
  125. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  126. package/docs/components/TreeView/examples/TreeView.md +34 -34
  127. package/docs/components/Truncate/examples/Truncate.md +4 -4
  128. package/docs/components/Wizard/examples/Wizard.md +47 -47
  129. package/docs/demos/DataList/examples/DataList.md +4 -4
  130. package/docs/demos/Masthead/examples/Masthead.md +6 -6
  131. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6 -6
  132. package/docs/demos/Table/examples/Table.md +22 -22
  133. package/docs/demos/Toolbar/examples/Toolbar.md +8 -8
  134. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  135. package/docs/layouts/Flex/examples/Flex.md +98 -98
  136. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  137. package/docs/layouts/Grid/examples/Grid.md +9 -9
  138. package/docs/layouts/Level/examples/Level.md +5 -5
  139. package/docs/layouts/Split/examples/Split.md +7 -7
  140. package/docs/layouts/Stack/examples/Stack.md +6 -6
  141. package/docs/utilities/Accessibility/examples/Accessibility.md +4 -4
  142. package/docs/utilities/Alignment/examples/Alignment.md +6 -6
  143. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +12 -12
  144. package/docs/utilities/BoxShadow/examples/box-shadow.md +22 -22
  145. package/docs/utilities/Display/examples/Display.md +11 -11
  146. package/docs/utilities/Flex/examples/Flex.md +34 -34
  147. package/docs/utilities/Float/examples/Float.md +4 -4
  148. package/docs/utilities/Sizing/examples/Sizing.md +50 -50
  149. package/docs/utilities/Spacing/examples/Spacing.md +34 -34
  150. package/docs/utilities/Text/examples/Text.md +27 -27
  151. package/icons/{pf-icons.json → pf-icons.mjs} +1 -1
  152. package/layouts/Grid/grid.css +5 -5
  153. package/package.json +56 -61
  154. package/patternfly-no-reset.css +196 -176
  155. package/patternfly.css +196 -176
  156. package/patternfly.min.css +1 -1
  157. package/patternfly.min.css.map +1 -1
package/docs/components/EmptyState/examples/EmptyState.md CHANGED
@@ -188,25 +188,25 @@ cssPrefix: pf-c-empty-state
188
188
 
189
189
  ### Accessibility
190
190
 
191
- | Attribute | Applied to | Outcome |
192
- | -------------------- | ------------------------- | --------------------------------------------------- |
193
- | `aria-hidden="true"` | `.pf-c-empty-state__icon` | Hides icon for assistive technologies. **Required** |
191
+ | Attribute | Applied to | Outcome |
192
+ | -- | -- | -- |
193
+ | `aria-hidden="true"` | `.pf-c-empty-state__icon` | Hides icon for assistive technologies. **Required** |
194
194
 
195
195
  ### Usage
196
196
 
197
- | Class | Applied to | Outcome |
198
- | ------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
199
- | `.pf-c-empty-state` | `<div>` | Initiates an empty state component. The empty state centers its content (`.pf-c-empty-state__content`) vertically and horizontally. **Required** |
200
- | `.pf-c-empty-state__content` | `<div>` | Creates the content container. **Required** |
201
- | `.pf-c-empty-state__header` | `<div>` | Creates the header container. **Required** |
202
- | `.pf-c-empty-state__title` | `<div>` | Creates the empty state title container. **Required** |
203
- | `.pf-c-empty-state__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates the empty state title text container. |
204
- | `.pf-c-empty-state__icon` | `<div>` | Creates the empty state icon container. |
205
- | `.pf-c-empty-state__body` | `<div>` | Creates the empty state body content. There can be more than one `.pf-c-empty-state__body` elements. |
206
- | `.pf-c-empty-state__footer` | `<div>` | Creates the footer container. **Required** |
207
- | `.pf-c-empty-state__actions` | `<div>` | Container for actions. **Required** |
208
- | `.pf-m-xs` | `.pf-c-empty-state` | Modifies the empty state for an extra small variation and max-width. |
209
- | `.pf-m-sm` | `.pf-c-empty-state` | Modifies the empty state for a small max-width. |
210
- | `.pf-m-lg` | `.pf-c-empty-state` | Modifies the empty state for a large max-width. |
211
- | `.pf-m-xl` | `.pf-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
212
- | `.pf-m-full-height` | `.pf-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-c-empty-state` have an implicit or explicit `height` defined. |
197
+ | Class | Applied to | Outcome |
198
+ | -- | -- | -- |
199
+ | `.pf-c-empty-state` | `<div>` | Initiates an empty state component. The empty state centers its content (`.pf-c-empty-state__content`) vertically and horizontally. **Required** |
200
+ | `.pf-c-empty-state__content` | `<div>` | Creates the content container. **Required** |
201
+ | `.pf-c-empty-state__header` | `<div>` | Creates the header container. **Required** |
202
+ | `.pf-c-empty-state__title` | `<div>` | Creates the empty state title container. **Required** |
203
+ | `.pf-c-empty-state__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates the empty state title text container. |
204
+ | `.pf-c-empty-state__icon` | `<div>` | Creates the empty state icon container. |
205
+ | `.pf-c-empty-state__body` | `<div>` | Creates the empty state body content. There can be more than one `.pf-c-empty-state__body` elements. |
206
+ | `.pf-c-empty-state__footer` | `<div>` | Creates the footer container. **Required** |
207
+ | `.pf-c-empty-state__actions` | `<div>` | Container for actions. **Required** |
208
+ | `.pf-m-xs` | `.pf-c-empty-state` | Modifies the empty state for an extra small variation and max-width. |
209
+ | `.pf-m-sm` | `.pf-c-empty-state` | Modifies the empty state for a small max-width. |
210
+ | `.pf-m-lg` | `.pf-c-empty-state` | Modifies the empty state for a large max-width. |
211
+ | `.pf-m-xl` | `.pf-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
212
+ | `.pf-m-full-height` | `.pf-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-c-empty-state` have an implicit or explicit `height` defined. |
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -185,29 +185,29 @@ cssPrefix: pf-c-expandable-section
185
185
 
186
186
  ### Accessibility
187
187
 
188
- | Attribute | Applied to | Outcome |
189
- | ----------------------------------------- | -------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
190
- | `aria-expanded="true"` | `.pf-c-expandable-section__toggle` | Indicates that the expandable section content is visible. **Required** |
191
- | `aria-expanded="false"` | `.pf-c-expandable-section__toggle` | Indicates the the expandable section content is hidden. **Required** |
192
- | `hidden` | `.pf-c-expandable-section__content` | Indicates that the expandable section content element is hidden. Use with `aria-expanded="false"` **Required** |
193
- | `aria-hidden="true"` | `.pf-c-expandable-section__toggle-icon` | Hides the icon from screen readers. **Required** |
194
- | `aria-controls="[id of content element]"` | `.pf-c-expandable-section.pf-m-detached .pf-c-expandable-section__toggle` | Identifies the element controlled by the toggle button. **Required** |
195
- | `id` | `.pf-c-expandable-section.pf-m-detached .pf-c-expandable-section__content` | Gives the content an `id` for use with `aria-controls` on `.pf-c-expandable-section__toggle`. **Required** |
188
+ | Attribute | Applied to | Outcome |
189
+ | -- | -- | -- |
190
+ | `aria-expanded="true"` | `.pf-c-expandable-section__toggle` | Indicates that the expandable section content is visible. **Required** |
191
+ | `aria-expanded="false"` | `.pf-c-expandable-section__toggle` | Indicates the the expandable section content is hidden. **Required** |
192
+ | `hidden` | `.pf-c-expandable-section__content` | Indicates that the expandable section content element is hidden. Use with `aria-expanded="false"` **Required** |
193
+ | `aria-hidden="true"` | `.pf-c-expandable-section__toggle-icon` | Hides the icon from screen readers. **Required** |
194
+ | `aria-controls="[id of content element]"` | `.pf-c-expandable-section.pf-m-detached .pf-c-expandable-section__toggle` | Identifies the element controlled by the toggle button. **Required** |
195
+ | `id` | `.pf-c-expandable-section.pf-m-detached .pf-c-expandable-section__content` | Gives the content an `id` for use with `aria-controls` on `.pf-c-expandable-section__toggle`. **Required** |
196
196
 
197
197
  ### Usage
198
198
 
199
- | Class | Applied to | Outcome |
200
- | ----------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
201
- | `.pf-c-expandable-section` | `<div>` | Initiates the expandable section component. **Required** |
202
- | `.pf-c-expandable-section__toggle` | `<button>` | Initiates the expandable section toggle. **Required** |
203
- | `.pf-c-expandable-section__toggle-text` | `<span>` | Initiates the expandable toggle text. **Required** |
204
- | `.pf-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. **Required** |
205
- | `.pf-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
206
- | `.pf-m-expanded` | `.pf-c-expandable-section` | Modifies the component for the expanded state. |
207
- | `.pf-m-display-lg` | `.pf-c-expandable-section` | Modifies the styling of the component to have large display styling. |
208
- | `.pf-m-detached` | `.pf-c-expandable-section` | Indicates that the expandable section toggle and content are detached from one another, so you can move them around independently in the markup. |
209
- | `.pf-m-indented` | `.pf-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
210
- | `.pf-m-truncate` | `.pf-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
211
- | `.pf-m-active` | `.pf-c-expandable-section__toggle` | Forces display of the active state of the toggle. |
212
- | `.pf-m-expand-top` | `.pf-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
213
- | `--pf-c-expandable-section--m-truncate__content--LineClamp` | `.pf-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |
199
+ | Class | Applied to | Outcome |
200
+ | -- | -- | -- |
201
+ | `.pf-c-expandable-section` | `<div>` | Initiates the expandable section component. **Required** |
202
+ | `.pf-c-expandable-section__toggle` | `<button>` | Initiates the expandable section toggle. **Required** |
203
+ | `.pf-c-expandable-section__toggle-text` | `<span>` | Initiates the expandable toggle text. **Required** |
204
+ | `.pf-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. **Required** |
205
+ | `.pf-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
206
+ | `.pf-m-expanded` | `.pf-c-expandable-section` | Modifies the component for the expanded state. |
207
+ | `.pf-m-display-lg` | `.pf-c-expandable-section` | Modifies the styling of the component to have large display styling. |
208
+ | `.pf-m-detached` | `.pf-c-expandable-section` | Indicates that the expandable section toggle and content are detached from one another, so you can move them around independently in the markup. |
209
+ | `.pf-m-indented` | `.pf-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
210
+ | `.pf-m-truncate` | `.pf-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
211
+ | `.pf-m-active` | `.pf-c-expandable-section__toggle` | Forces display of the active state of the toggle. |
212
+ | `.pf-m-expand-top` | `.pf-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
213
+ | `--pf-c-expandable-section--m-truncate__content--LineClamp` | `.pf-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |
package/docs/components/FileUpload/examples/FileUpload.md CHANGED
@@ -255,11 +255,11 @@ cssPrefix: pf-c-file-upload
255
255
 
256
256
  ### Usage
257
257
 
258
- | Class | Applied to | Outcome |
259
- | ----------------------------------------- | ------------------- | --------------------------------------------------------------------------------------- |
260
- | `.pf-c-file-upload` | `<div>`, `<form>` | Initiates the file upload component. **Required**. |
261
- | `.pf-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** |
262
- | `.pf-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** |
263
- | `.pf-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** |
264
- | `.pf-m-drag-hover` | `.pf-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
265
- | `.pf-m-loading` | `.pf-c-file-upload` | Modifies file upload for the loading state. |
258
+ | Class | Applied to | Outcome |
259
+ | -- | -- | -- |
260
+ | `.pf-c-file-upload` | `<div>`, `<form>` | Initiates the file upload component. **Required**. |
261
+ | `.pf-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** |
262
+ | `.pf-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** |
263
+ | `.pf-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** |
264
+ | `.pf-m-drag-hover` | `.pf-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
265
+ | `.pf-m-loading` | `.pf-c-file-upload` | Modifies file upload for the loading state. |
package/docs/components/Form/examples/Form.md CHANGED
@@ -681,70 +681,70 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
681
681
 
682
682
  ### Accessibility
683
683
 
684
- | Attribute | Applied to | Outcome |
685
- | -------------------------------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
686
- | `for` | `<label>` | Each `<label>` must have a `for` attribute that matches its form field id. **Required** |
687
- | `id` | `<input type="radio/checkbox/text">`, `<select>`, `<textarea>` | Each `<form>` field must have an `id` attribute that matches its label's `for` value. **Required** |
688
- | `required` | `<input>`, `<select>`, `<textarea>` | Required fields must include these attributes. |
689
- | `id="{helper_text_id}"` | `.pf-c-form__helper-text` | Form fields with related `.pf-c-form__helper-text` require this attribute. Usage `<p class="pf-c-form__helper-text" id="{helper_text_id}">`. |
690
- | `aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | Form fields with related `.pf-c-form__helper-text` require this attribute. Usage `<input aria-describedby="{helper_text_id}">`. |
691
- | `aria-invalid="true" aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | When form validation fails `aria-describedby` is used to communicate the error to the user. These attributes need to be handled with Javascript so that `aria-describedby` only references help text that explains the error, and so that `aria-invalid="true"` is only present when validation fails. For proper styling of errors `aria-invalid="true"` is required. |
692
- | `aria-hidden="true"` | `.pf-c-form__label-required` | Hides the required indicator from assistive technologies. |
693
- | `role="group"` | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides group role for form groups, form sections, and form field groups. **Required for checkbox groups, form groups, form sections, and form field groups.** |
694
- | `role="radiogroup"` | `.pf-c-form__group` | Provides group role for radio input groups. **Required for radio input groups** |
695
- | `role="button"` | `.pf-c-form__group-label-help` | Provides button role for group label help spans. **Required for group label help.** |
696
- | `id` | `.pf-c-form__group-label` | Generates an `id` for use in the `aria-labelledby` attribute in a checkbox or radio form group. |
697
- | `id` | `.pf-c-form__field-group-title-text` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
698
- | `id` | `.pf-c-form__field-group-toggle-button > button` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
699
- | `aria-labelledby="{label id}"` | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides an accessible label for form groups, form sections, and form field groups. **Required for form groups, form sections, and form field groups that contain labels.** |
700
- | `aria-label` | `.pf-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. |
701
- | `aria-labelledby="{title id} {toggle button id}"` | `.pf-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. |
702
- | `aria-expanded="true/false"` | `.pf-c-form__field-group-toggle-button > button` | Indicates whether the field group body is visible or hidden. |
703
- | `id="{form_label_id}"` | `.pf-c-form__label` | Generates an `id` for use in the `aria-describedby` attribute in a `.pf-c-form__group-label-help`. |
704
- | `aria-label="{descriptive text}" aria-describedby="{form_label_id}"` | `.pf-c-form__group-label-help` | Provides an accessible label on a button that provides additional information for a form element. |
684
+ | Attribute | Applied to | Outcome |
685
+ | -- | -- | -- |
686
+ | `for` | `<label>` | Each `<label>` must have a `for` attribute that matches its form field id. **Required** |
687
+ | `id` | `<input type="radio/checkbox/text">`, `<select>`, `<textarea>` | Each `<form>` field must have an `id` attribute that matches its label's `for` value. **Required** |
688
+ | `required` | `<input>`, `<select>`, `<textarea>` | Required fields must include these attributes. |
689
+ | `id="{helper_text_id}"` | `.pf-c-form__helper-text` | Form fields with related `.pf-c-form__helper-text` require this attribute. Usage `<p class="pf-c-form__helper-text" id="{helper_text_id}">`. |
690
+ | `aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | Form fields with related `.pf-c-form__helper-text` require this attribute. Usage `<input aria-describedby="{helper_text_id}">`. |
691
+ | `aria-invalid="true" aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | When form validation fails `aria-describedby` is used to communicate the error to the user. These attributes need to be handled with Javascript so that `aria-describedby` only references help text that explains the error, and so that `aria-invalid="true"` is only present when validation fails. For proper styling of errors `aria-invalid="true"` is required. |
692
+ | `aria-hidden="true"` | `.pf-c-form__label-required` | Hides the required indicator from assistive technologies. |
693
+ | `role="group"` | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides group role for form groups, form sections, and form field groups. **Required for checkbox groups, form groups, form sections, and form field groups.** |
694
+ | `role="radiogroup"` | `.pf-c-form__group` | Provides group role for radio input groups. **Required for radio input groups** |
695
+ | `role="button"` | `.pf-c-form__group-label-help` | Provides button role for group label help spans. **Required for group label help.** |
696
+ | `id` | `.pf-c-form__group-label` | Generates an `id` for use in the `aria-labelledby` attribute in a checkbox or radio form group. |
697
+ | `id` | `.pf-c-form__field-group-title-text` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
698
+ | `id` | `.pf-c-form__field-group-toggle-button > button` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
699
+ | `aria-labelledby="{label id}"` | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides an accessible label for form groups, form sections, and form field groups. **Required for form groups, form sections, and form field groups that contain labels.** |
700
+ | `aria-label` | `.pf-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. |
701
+ | `aria-labelledby="{title id} {toggle button id}"` | `.pf-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. |
702
+ | `aria-expanded="true/false"` | `.pf-c-form__field-group-toggle-button > button` | Indicates whether the field group body is visible or hidden. |
703
+ | `id="{form_label_id}"` | `.pf-c-form__label` | Generates an `id` for use in the `aria-describedby` attribute in a `.pf-c-form__group-label-help`. |
704
+ | `aria-label="{descriptive text}" aria-describedby="{form_label_id}"` | `.pf-c-form__group-label-help` | Provides an accessible label on a button that provides additional information for a form element. |
705
705
 
706
706
  ### Usage
707
707
 
708
- | Class | Applied to | Outcome |
709
- | ------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
710
- | `.pf-c-form` | `<form>` | Initiates a standard form. **Required** |
711
- | `.pf-c-form__section` | `<div>, <section>` | Initiates a form section. |
712
- | `.pf-c-form__section-title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a form section title. |
713
- | `.pf-c-form__group` | `<div>` | Initiates a form group. |
714
- | `.pf-c-form__group-label` | `<div>` | Initiates a form group label. |
715
- | `.pf-c-form__label` | `<label>`, `<span>` | Initiates a form label. **Required** |
716
- | `.pf-c-form__label-text` | `<span>` | Initiates a form label text. **Required** |
717
- | `.pf-c-form__label-required` | `<span>` | Initiates a form label required indicator. |
718
- | `.pf-c-form__group-label-main` | `<div>` | Initiates a form group label main container. |
719
- | `.pf-c-form__group-label-info` | `<div>` | Initiates a form group info label. |
720
- | `.pf-c-form__group-label-help` | `<button>`, `<span>` | Initiates a field level help span/button. |
721
- | `.pf-c-form__group-control` | `<div>` | Initiates a form group control section. |
722
- | `.pf-c-form__actions` | `<div>` | Iniates a row of actions. |
723
- | `.pf-c-form__helper-text` | `<p>`, `<div>` | Initiates a form helper text block. |
724
- | `.pf-c-form__helper-text-icon` | `<span>` | Initiates a form helper text icon. |
725
- | `.pf-c-form__alert` | `<div>` | Initiates the form alert container for inline alerts. |
726
- | `.pf-c-form__field-group` | `<div>` | Initiates a form field group. |
727
- | `.pf-c-form__field-group-toggle` | `<div>` | Initiates the form field group toggle. |
728
- | `.pf-c-form__field-group-toggle-button` | `<div>` | Initiates the form field group toggle button. |
729
- | `.pf-c-form__field-group-toggle-icon` | `<span>` | Initiates the form field group toggle icon. |
730
- | `.pf-c-form__field-group-header` | `<div>` | Initiates the form field group header. |
731
- | `.pf-c-form__field-group-header-main` | `<div>` | Initiates the form field group main section. |
732
- | `.pf-c-form__field-group-header-title` | `<div>` | Initiates the form field group title. |
733
- | `.pf-c-form__field-group-header-title-text` | `<div>` | Initiates the form field group title text. |
734
- | `.pf-c-form__field-group-header-description` | `<div>` | Initiates the form field group description. |
735
- | `.pf-c-form__field-group-header-actions` | `<div>` | Initiates the form field group actions container. |
736
- | `.pf-c-form__field-group-body` | `<div>` | Initiates the form field group body. |
737
- | `.pf-m-horizontal{-on-[xs, sm, md, lg, xl, 2xl]}` | `.pf-c-form` | Modifies the form for a horizontal layout at an optional breakpoint. The default breakpoint is `-md`. |
738
- | `.pf-m-limit-width` | `.pf-c-form` | Limits the overall max-width of the form. Configurable by defining `--pf-c-form--m-limit-width--MaxWidth`. |
739
- | `.pf-m-info` | `.pf-c-form__group-label` | Modifies the form group label to contain form group label info. |
740
- | `.pf-m-action` | `.pf-c-form__group` | Modifies form group margin-top. |
741
- | `.pf-m-success` | `.pf-c-form__helper-text` | Modifies text color of helper text for success state. |
742
- | `.pf-m-warning` | `.pf-c-form__helper-text` | Modifies text color of helper text for warning state. |
743
- | `.pf-m-error` | `.pf-c-form__helper-text` | Modifies text color of helper text for error state. |
744
- | `.pf-m-inactive` | `.pf-c-form__helper-text` | Modifies display of helper text to none. |
745
- | `.pf-m-disabled` | `.pf-c-form__label` | Modifies form label to show disabled state. |
746
- | `.pf-m-no-padding-top` | `.pf-c-form__group-label` | Removes top padding from the label element for labels adjacent to an element that isn't a form control. |
747
- | `.pf-m-inline` | `.pf-c-form__group-control` | Modifies form group children to be inline (this is primarily for radio buttons and checkboxes). |
748
- | `.pf-m-stack` | `.pf-c-form__group-control` | Modifies form group children to be stacked with space between children. |
749
- | `.pf-m-expanded` | `.pf-c-form__field-group` | Modifies an expandable field group for the expanded state. |
750
- | `--pf-c-form--m-limit-width--MaxWidth` | `.pf-c-form.pf-m-limit-width` | Sets a custom `max-width` for a width limited form. |
708
+ | Class | Applied to | Outcome |
709
+ | -- | -- | -- |
710
+ | `.pf-c-form` | `<form>` | Initiates a standard form. **Required** |
711
+ | `.pf-c-form__section` | `<div>, <section>` | Initiates a form section. |
712
+ | `.pf-c-form__section-title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a form section title. |
713
+ | `.pf-c-form__group` | `<div>` | Initiates a form group. |
714
+ | `.pf-c-form__group-label` | `<div>` | Initiates a form group label. |
715
+ | `.pf-c-form__label` | `<label>`, `<span>` | Initiates a form label. **Required** |
716
+ | `.pf-c-form__label-text` | `<span>` | Initiates a form label text. **Required** |
717
+ | `.pf-c-form__label-required` | `<span>` | Initiates a form label required indicator. |
718
+ | `.pf-c-form__group-label-main` | `<div>` | Initiates a form group label main container. |
719
+ | `.pf-c-form__group-label-info` | `<div>` | Initiates a form group info label. |
720
+ | `.pf-c-form__group-label-help` | `<button>`, `<span>` | Initiates a field level help span/button. |
721
+ | `.pf-c-form__group-control` | `<div>` | Initiates a form group control section. |
722
+ | `.pf-c-form__actions` | `<div>` | Iniates a row of actions. |
723
+ | `.pf-c-form__helper-text` | `<p>`, `<div>` | Initiates a form helper text block. |
724
+ | `.pf-c-form__helper-text-icon` | `<span>` | Initiates a form helper text icon. |
725
+ | `.pf-c-form__alert` | `<div>` | Initiates the form alert container for inline alerts. |
726
+ | `.pf-c-form__field-group` | `<div>` | Initiates a form field group. |
727
+ | `.pf-c-form__field-group-toggle` | `<div>` | Initiates the form field group toggle. |
728
+ | `.pf-c-form__field-group-toggle-button` | `<div>` | Initiates the form field group toggle button. |
729
+ | `.pf-c-form__field-group-toggle-icon` | `<span>` | Initiates the form field group toggle icon. |
730
+ | `.pf-c-form__field-group-header` | `<div>` | Initiates the form field group header. |
731
+ | `.pf-c-form__field-group-header-main` | `<div>` | Initiates the form field group main section. |
732
+ | `.pf-c-form__field-group-header-title` | `<div>` | Initiates the form field group title. |
733
+ | `.pf-c-form__field-group-header-title-text` | `<div>` | Initiates the form field group title text. |
734
+ | `.pf-c-form__field-group-header-description` | `<div>` | Initiates the form field group description. |
735
+ | `.pf-c-form__field-group-header-actions` | `<div>` | Initiates the form field group actions container. |
736
+ | `.pf-c-form__field-group-body` | `<div>` | Initiates the form field group body. |
737
+ | `.pf-m-horizontal{-on-[xs, sm, md, lg, xl, 2xl]}` | `.pf-c-form` | Modifies the form for a horizontal layout at an optional breakpoint. The default breakpoint is `-md`. |
738
+ | `.pf-m-limit-width` | `.pf-c-form` | Limits the overall max-width of the form. Configurable by defining `--pf-c-form--m-limit-width--MaxWidth`. |
739
+ | `.pf-m-info` | `.pf-c-form__group-label` | Modifies the form group label to contain form group label info. |
740
+ | `.pf-m-action` | `.pf-c-form__group` | Modifies form group margin-top. |
741
+ | `.pf-m-success` | `.pf-c-form__helper-text` | Modifies text color of helper text for success state. |
742
+ | `.pf-m-warning` | `.pf-c-form__helper-text` | Modifies text color of helper text for warning state. |
743
+ | `.pf-m-error` | `.pf-c-form__helper-text`| Modifies text color of helper text for error state. |
744
+ | `.pf-m-inactive` | `.pf-c-form__helper-text`| Modifies display of helper text to none. |
745
+ | `.pf-m-disabled` | `.pf-c-form__label` | Modifies form label to show disabled state. |
746
+ | `.pf-m-no-padding-top` | `.pf-c-form__group-label` | Removes top padding from the label element for labels adjacent to an element that isn't a form control. |
747
+ | `.pf-m-inline` | `.pf-c-form__group-control` | Modifies form group children to be inline (this is primarily for radio buttons and checkboxes). |
748
+ | `.pf-m-stack` | `.pf-c-form__group-control` | Modifies form group children to be stacked with space between children. |
749
+ | `.pf-m-expanded` | `.pf-c-form__field-group` | Modifies an expandable field group for the expanded state. |
750
+ | `--pf-c-form--m-limit-width--MaxWidth` | `.pf-c-form.pf-m-limit-width` | Sets a custom `max-width` for a width limited form. |
package/docs/components/FormControl/examples/FormControl.md CHANGED
@@ -498,26 +498,26 @@ cssPrefix: pf-c-form-control
498
498
 
499
499
  ### Accessibility
500
500
 
501
- | Attribute | Applied to | Outcome |
502
- | ------------------------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
503
- | `id` | `.pf-c-form-control` | Provides an `id` value that can be used with the `for` attribute on an associated `<label>` element to provide an accessible label for the form control element. |
504
- | `aria-invalid="true"` | `.pf-c-form-control` | Indicates that the form control is in the error state and applies error state styling. |
505
- | `aria-label="descriptive text"` | `.pf-c-form-control` | Provides an accessible label for assistive technology. |
506
- | `aria-expanded="true"` | `.pf-c-form-control.pf-m-expanded` | Indicates that clicking in the form control has toggled something else to be expanded. |
501
+ | Attribute | Applied to | Outcome |
502
+ | -- | -- | -- |
503
+ | `id` | `.pf-c-form-control` | Provides an `id` value that can be used with the `for` attribute on an associated `<label>` element to provide an accessible label for the form control element.
504
+ | `aria-invalid="true"` | `.pf-c-form-control` | Indicates that the form control is in the error state and applies error state styling. |
505
+ | `aria-label="descriptive text"` | `.pf-c-form-control` | Provides an accessible label for assistive technology. |
506
+ | `aria-expanded="true"` | `.pf-c-form-control.pf-m-expanded` | Indicates that clicking in the form control has toggled something else to be expanded. |
507
507
 
508
508
  ### Usage
509
509
 
510
- | Class | Applied to | Outcome |
511
- | ------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
512
- | `.pf-c-form-control` | `<input>`,`<textarea>`, `<select>` | Initiates an input, textarea or select. For styling of checkboxes or radios see the [checkbox component](/components/checkbox) or [radio component](/components/radio). **Required** |
513
- | `.pf-m-resize-vertical` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized vertically along the y-axis. |
514
- | `.pf-m-resize-horizontal` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized horizontally along the x-axis. |
515
- | `.pf-m-success` | `.pf-c-form-control` | Modifies a form control for the success state. |
516
- | `.pf-m-warning` | `.pf-c-form-control` | Modifies a form control for the warning state. |
517
- | `.pf-m-icon-sprite` | `.pf-c-form-control` | Modifies form control element to use an external SVG sprite instead of embedded data URIs for icons. For use with apps whose content security policies disallow the use of data URIs. |
518
- | `.pf-m-icon` | `input.pf-c-form-control` | Modifies a form control text input to be able to specify a custom SVG background via `--pf-c-form-control--m-icon--BackgroundUrl`, and other optional vars for other background properties. |
519
- | `.pf-m-calendar` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the calendar icon. |
520
- | `.pf-m-clock` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the clock icon. |
521
- | `.pf-m-expanded` | `input.pf-c-form-control` | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
522
- | `.pf-m-placeholder` | `select.pf-c-form-control` | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
523
- | `.pf-m-plain` | `input[readonly].pf-c-form-control`, `textarea[readonly].pf-c-form-control` | Modifies an `<input>` or `<textarea>` with a `readonly` attribute to be presented as normal text. |
510
+ | Class | Applied to | Outcome |
511
+ | -- | -- | -- |
512
+ | `.pf-c-form-control` | `<input>`,`<textarea>`, `<select>` | Initiates an input, textarea or select. For styling of checkboxes or radios see the [checkbox component](/components/checkbox) or [radio component](/components/radio). **Required** |
513
+ | `.pf-m-resize-vertical` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized vertically along the y-axis. |
514
+ | `.pf-m-resize-horizontal` | `textarea.pf-m-form-control` | Modifies a `textarea.pf-c-form-control` element so it can only be resized horizontally along the x-axis. |
515
+ | `.pf-m-success` | `.pf-c-form-control` | Modifies a form control for the success state. |
516
+ | `.pf-m-warning` | `.pf-c-form-control` | Modifies a form control for the warning state. |
517
+ | `.pf-m-icon-sprite` | `.pf-c-form-control` | Modifies form control element to use an external SVG sprite instead of embedded data URIs for icons. For use with apps whose content security policies disallow the use of data URIs. |
518
+ | `.pf-m-icon` | `input.pf-c-form-control` | Modifies a form control text input to be able to specify a custom SVG background via `--pf-c-form-control--m-icon--BackgroundUrl`, and other optional vars for other background properties.
519
+ | `.pf-m-calendar` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the calendar icon. |
520
+ | `.pf-m-clock` | `.pf-c-form-control.pf-m-icon` | Modifies a form control to support the clock icon. |
521
+ | `.pf-m-expanded` | `input.pf-c-form-control` | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
522
+ | `.pf-m-placeholder` | `select.pf-c-form-control` | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
523
+ | `.pf-m-plain` | `input[readonly].pf-c-form-control`, `textarea[readonly].pf-c-form-control` | Modifies an `<input>` or `<textarea>` with a `readonly` attribute to be presented as normal text. |
package/docs/components/HelperText/examples/HelperText.md CHANGED
@@ -192,14 +192,14 @@ cssPrefix: pf-c-helper-text
192
192
 
193
193
  ### Usage
194
194
 
195
- | Class | Applied to | Outcome |
196
- | ------------------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
197
- | `.pf-c-helper-text` | `<div>`, `<ul>` | Initiates the helper text component. **Required** |
198
- | `.pf-c-helper-text__item` | `<div>`, `<li>` | Initiates a helper text item. **Required** |
199
- | `.pf-c-helper-text__item-icon` | `<span>` | Initiates a helper text item icon. **Required when used in `.pf-c-helper-text__item.pf-m-dynamic`** |
200
- | `.pf-c-helper-text__item-text` | `<span>` | Initiates a helper text item text. **Required** |
201
- | `.pf-m-dynamic` | `.pf-c-helper-text__item` | Modifies a helper text item to be dynamic. For use when the item changes state as the form field the text is associated with is updated. |
202
- | `.pf-m-indeterminate` | `.pf-c-helper-text__item` | Modifies a helper text item for indeterminate state styles. |
203
- | `.pf-m-warning` | `.pf-c-helper-text__item` | Modifies a helper text item for warning state styles. |
204
- | `.pf-m-success` | `.pf-c-helper-text__item` | Modifies a helper text item for success state styles. |
205
- | `.pf-m-error` | `.pf-c-helper-text__item` | Modifies a helper text item for error state styles. |
195
+ | Class | Applied to | Outcome |
196
+ | -- | -- | -- |
197
+ | `.pf-c-helper-text` | `<div>`, `<ul>` | Initiates the helper text component. **Required** |
198
+ | `.pf-c-helper-text__item` | `<div>`, `<li>` | Initiates a helper text item. **Required** |
199
+ | `.pf-c-helper-text__item-icon` | `<span>` | Initiates a helper text item icon. **Required when used in `.pf-c-helper-text__item.pf-m-dynamic`** |
200
+ | `.pf-c-helper-text__item-text` | `<span>` | Initiates a helper text item text. **Required** |
201
+ | `.pf-m-dynamic` | `.pf-c-helper-text__item` | Modifies a helper text item to be dynamic. For use when the item changes state as the form field the text is associated with is updated. |
202
+ | `.pf-m-indeterminate` | `.pf-c-helper-text__item` | Modifies a helper text item for indeterminate state styles. |
203
+ | `.pf-m-warning` | `.pf-c-helper-text__item` | Modifies a helper text item for warning state styles. |
204
+ | `.pf-m-success` | `.pf-c-helper-text__item` | Modifies a helper text item for success state styles. |
205
+ | `.pf-m-error` | `.pf-c-helper-text__item` | Modifies a helper text item for error state styles. |
package/docs/components/Hint/examples/Hint.md CHANGED
@@ -193,10 +193,10 @@ cssPrefix: pf-c-hint
193
193
 
194
194
  ### Usage
195
195
 
196
- | Class | Applied to | Outcome |
197
- | --------------------- | ---------- | ------------------------------------------ |
198
- | `.pf-c-hint` | `<div>` | Initiates the hint component. **Required** |
199
- | `.pf-c-hint__title` | `<div>` | Initiates the hint title element. |
200
- | `.pf-c-hint__body` | `<div>` | Initiates the hint body element. |
201
- | `.pf-c-hint__footer` | `<div>` | Initiates the hint footer element. |
202
- | `.pf-c-hint__actions` | `<div>` | Initiates the hint actions element. |
196
+ | Class | Applied to | Outcome |
197
+ | -- | -- | -- |
198
+ | `.pf-c-hint` | `<div>` | Initiates the hint component. **Required** |
199
+ | `.pf-c-hint__title` | `<div>` | Initiates the hint title element. |
200
+ | `.pf-c-hint__body` | `<div>` | Initiates the hint body element. |
201
+ | `.pf-c-hint__footer` | `<div>` | Initiates the hint footer element. |
202
+ | `.pf-c-hint__actions` | `<div>` | Initiates the hint actions element. |
package/docs/components/Icon/examples/Icon.md CHANGED
@@ -243,13 +243,13 @@ Refer to the [icons](/guidelines/icons) page for information about the PatternFl
243
243
 
244
244
  ### Usage
245
245
 
246
- | Class | Applied to | Outcome |
247
- | ------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
248
- | `.pf-c-icon` | `<span>`, `<div>` | Initiates an icon component. **Required** |
249
- | `.pf-c-icon__content` | `<span>`, `<div>` | Initiates the icon content. **Required** |
250
- | `.pf-c-icon__progress` | `<span>`, `<div>` | Initiates a container for a progress spinner. |
251
- | `.pf-m-inline` | `.pf-c-icon` | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
252
- | `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon` | Modifies the icon container to be small, medium, large, or extra large. |
253
- | `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon__content`, `pf-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
254
- | `.pf-m-in-progress` | `.pf-c-icon` | Shows the progress element in place of the icon content. |
255
- | `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-default` | `.pf-c-icon__content` | Modifies the icon content to use a status color. |
246
+ | Class | Applied to | Outcome |
247
+ | -- | -- | -- |
248
+ | `.pf-c-icon` | `<span>`, `<div>` | Initiates an icon component. **Required** |
249
+ | `.pf-c-icon__content` | `<span>`, `<div>` | Initiates the icon content. **Required** |
250
+ | `.pf-c-icon__progress` | `<span>`, `<div>` | Initiates a container for a progress spinner. |
251
+ | `.pf-m-inline` | `.pf-c-icon` | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
252
+ | `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon` | Modifies the icon container to be small, medium, large, or extra large. |
253
+ | `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon__content`, `pf-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
254
+ | `.pf-m-in-progress` | `.pf-c-icon` | Shows the progress element in place of the icon content. |
255
+ | `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-default` | `.pf-c-icon__content` | Modifies the icon content to use a status color. |
package/docs/components/InlineEdit/examples/InlineEdit.md CHANGED
@@ -830,34 +830,34 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
830
830
 
831
831
  All accessibility requirements for inputs apply to elements within inline edit.
832
832
 
833
- | Attribute | Applied to | Outcome |
834
- | ---------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------ |
835
- | `id` | `[labelling element]` | Provides a reference for toggle button and/or editable content. |
836
- | `aria-label="descriptive text"` | `.pf-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
833
+ | Attribute | Applied to | Outcome |
834
+ | -- | -- | -- |
835
+ | `id` | `[labelling element]` | Provides a reference for toggle button and/or editable content. |
836
+ | `aria-label="descriptive text"` | `.pf-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
837
837
  | `aria-labelledby="[labelling element] [toggle button id]"` | `.pf-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
838
- | `aria-label="descriptive text"` | `[radio button group]` | Provides an accessible description for radio groups. **Required** |
839
- | `contenteditable="true"` | `.pf-c-inline-edit__editable-text` | Ensures the text node is editable. |
840
- | `role="textbox"` | `.pf-c-inline-edit__editable-text` | Identifies an element that allows the input of free-form text. |
841
- | `role="radiogroup"` | `[radio button group]` | Provides an accessible role for radio buttons groups. **Required** |
838
+ | `aria-label="descriptive text"` | `[radio button group]` | Provides an accessible description for radio groups. **Required** |
839
+ | `contenteditable="true"` | `.pf-c-inline-edit__editable-text` | Ensures the text node is editable. |
840
+ | `role="textbox"` | `.pf-c-inline-edit__editable-text` | Identifies an element that allows the input of free-form text. |
841
+ | `role="radiogroup"` | `[radio button group]` | Provides an accessible role for radio buttons groups. **Required** |
842
842
 
843
843
  ### Usage
844
844
 
845
- | Class | Applied to | Outcome |
846
- | ---------------------------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
847
- | `.pf-c-inline-edit` | `<form>`, `<div>` | Initiates the inline edit component. **Required** |
848
- | `.pf-c-inline-edit__value` | `*` | Initiates an inline edit value. **Required** |
849
- | `.pf-c-inline-edit__input` | `*` | Initiates an inline edit input. **Required** |
850
- | `.pf-c-inline-edit__editable-text` | `*` | Initiates an inline editable text element. |
851
- | `.pf-c-inline-edit__label` | `*` | Initiates an inline edit label. |
852
- | `.pf-c-inline-edit__action` | `*` | Initiates an inline edit action (visible when inline edit region is active). **Required** |
853
- | `.pf-m-inline-editable` | `.pf-c-inline-edit`, `.pf-c-inline-edit [block level element]` | Modifies an inline edit region for editable state. |
854
- | `.pf-m-action-group` | `.pf-c-inline-edit__group` | Modifies group for action group. |
855
- | `.pf-m-icon-group` | `.pf-c-inline-edit__group` | Modifies an action group item spacing. |
856
- | `.pf-m-column` | `.pf-c-inline-edit__group` | Modifies an action group flex direction. |
857
- | `.pf-m-footer` | `.pf-c-inline-edit__group` | Modifies an inline edit group margin-top. |
858
- | `.pf-m-bold` | `.pf-c-inline-edit__label` | Modifies an inline edit label's `font-weight`. |
859
- | `.pf-m-valid` | `.pf-c-inline-edit__action` | Modifies the action button state. |
860
- | `.pf-m-enable-editable` | `.pf-c-inline-edit__action` | Exposes an inline edit action by default. |
845
+ | Class | Applied to | Outcome |
846
+ | -- | -- | -- |
847
+ | `.pf-c-inline-edit` | `<form>`, `<div>` | Initiates the inline edit component. **Required** |
848
+ | `.pf-c-inline-edit__value` | `*` | Initiates an inline edit value. **Required** |
849
+ | `.pf-c-inline-edit__input` | `*` | Initiates an inline edit input. **Required** |
850
+ | `.pf-c-inline-edit__editable-text` | `*` | Initiates an inline editable text element. |
851
+ | `.pf-c-inline-edit__label` | `*` | Initiates an inline edit label. |
852
+ | `.pf-c-inline-edit__action` | `*` | Initiates an inline edit action (visible when inline edit region is active). **Required** |
853
+ | `.pf-m-inline-editable` | `.pf-c-inline-edit`, `.pf-c-inline-edit [block level element]` | Modifies an inline edit region for editable state. |
854
+ | `.pf-m-action-group` | `.pf-c-inline-edit__group` | Modifies group for action group. |
855
+ | `.pf-m-icon-group` | `.pf-c-inline-edit__group` | Modifies an action group item spacing. |
856
+ | `.pf-m-column` | `.pf-c-inline-edit__group` | Modifies an action group flex direction. |
857
+ | `.pf-m-footer` | `.pf-c-inline-edit__group` | Modifies an inline edit group margin-top. |
858
+ | `.pf-m-bold` | `.pf-c-inline-edit__label` | Modifies an inline edit label's `font-weight`. |
859
+ | `.pf-m-valid` | `.pf-c-inline-edit__action` | Modifies the action button state. |
860
+ | `.pf-m-enable-editable` | `.pf-c-inline-edit__action` | Exposes an inline edit action by default. |
861
861
 
862
862
  <!--
863
863
  ### Bulk edit dl (default)
package/docs/components/InputGroup/examples/InputGroup.md CHANGED
@@ -221,16 +221,16 @@ Use the input group to extend form controls by adding text, buttons, selects, et
221
221
 
222
222
  When using the `.pf-c-input-group` always ensure labels are used outside the input group with the `.pf-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).
223
223
 
224
- | Attribute | Applied to | Outcome |
225
- | ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------- |
226
- | `aria-describedby` | `.pf-c-form-control` | When using `.pf-c-input-group__text` or `.pf-c-input-group__action` make use of this on the input field. |
224
+ | Attribute | Applied to | Outcome |
225
+ | -- | -- | -- |
226
+ | `aria-describedby` | `.pf-c-form-control` | When using `.pf-c-input-group__text` or `.pf-c-input-group__action` make use of this on the input field. |
227
227
 
228
228
  ### Usage
229
229
 
230
- | Class | Applied to | Outcome |
231
- | ------------------------- | ------------------------- | -------------------------------------------------------------------------------------------- |
232
- | `.pf-c-input-group` | `<div>` | Initiates the input group. **Required** |
233
- | `.pf-c-input-group__text` | `<span>` | Initiates the input group text. This can be used to show text, radio, icons, or check boxes. |
234
- | `.pf-m-plain` | `.pf-c-input-group` | Removes the background from the input group. |
235
- | `.pf-m-plain` | `.pf-c-input-group__text` | Removes the border from the text element. |
236
- | `.pf-m-disabled` | `.pf-c-input-group__text` | Adds disabled styling to match a disabled input within the input group. |
230
+ | Class | Applied to | Outcome |
231
+ | -- | -- | -- |
232
+ | `.pf-c-input-group` | `<div>` | Initiates the input group. **Required** |
233
+ | `.pf-c-input-group__text` | `<span>` | Initiates the input group text. This can be used to show text, radio, icons, or check boxes. |
234
+ | `.pf-m-plain` | `.pf-c-input-group` | Removes the background from the input group. |
235
+ | `.pf-m-plain` | `.pf-c-input-group__text` | Removes the border from the text element. |
236
+ | `.pf-m-disabled` | `.pf-c-input-group__text` | Adds disabled styling to match a disabled input within the input group. |