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

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 (159) 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/Progress/progress.css +5 -2
  28. package/components/Progress/progress.scss +5 -2
  29. package/components/SearchInput/search-input.css +2 -0
  30. package/components/SearchInput/search-input.scss +2 -0
  31. package/components/Table/table-grid.css +28 -28
  32. package/components/Table/table-tree-view.css +4 -4
  33. package/components/TextInputGroup/text-input-group.css +4 -2
  34. package/components/TextInputGroup/text-input-group.scss +4 -3
  35. package/components/Toolbar/toolbar.css +35 -35
  36. package/components/TreeView/tree-view.css +7 -15
  37. package/components/TreeView/tree-view.scss +7 -18
  38. package/components/Wizard/wizard.css +2 -0
  39. package/components/Wizard/wizard.scss +2 -0
  40. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -13
  41. package/docs/components/Accordion/examples/Accordion.md +12 -12
  42. package/docs/components/ActionList/examples/ActionList.md +6 -6
  43. package/docs/components/Alert/examples/Alert.md +19 -19
  44. package/docs/components/AlertGroup/examples/AlertGroup.md +10 -10
  45. package/docs/components/AppLauncher/examples/application-launcher.md +34 -34
  46. package/docs/components/Avatar/examples/Avatar.md +11 -11
  47. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  48. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  49. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  50. package/docs/components/Badge/examples/Badge.md +5 -5
  51. package/docs/components/Banner/examples/Banner.md +8 -8
  52. package/docs/components/Brand/examples/Brand.md +9 -9
  53. package/docs/components/Breadcrumb/examples/Breadcrumb.md +15 -15
  54. package/docs/components/Button/examples/Button.md +35 -35
  55. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -32
  56. package/docs/components/Card/examples/Card.md +27 -27
  57. package/docs/components/Check/examples/Check.md +13 -13
  58. package/docs/components/Chip/examples/Chip.md +13 -13
  59. package/docs/components/ChipGroup/examples/ChipGroup.md +15 -15
  60. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  61. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  62. package/docs/components/CodeEditor/examples/CodeEditor.md +56 -33
  63. package/docs/components/Content/examples/Content.md +10 -10
  64. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  65. package/docs/components/ContextSelector/examples/context-selector.md +80 -74
  66. package/docs/components/DataList/examples/DataList.md +83 -83
  67. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  68. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  69. package/docs/components/Divider/examples/Divider.md +9 -9
  70. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  71. package/docs/components/Drawer/examples/Drawer.md +43 -43
  72. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  73. package/docs/components/Dropdown/examples/Dropdown.md +50 -50
  74. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  75. package/docs/components/EmptyState/examples/EmptyState.md +19 -19
  76. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  77. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  78. package/docs/components/Form/examples/Form.md +64 -64
  79. package/docs/components/FormControl/examples/FormControl.md +20 -20
  80. package/docs/components/HelperText/examples/HelperText.md +11 -11
  81. package/docs/components/Hint/examples/Hint.md +7 -7
  82. package/docs/components/Icon/examples/Icon.md +10 -10
  83. package/docs/components/InlineEdit/examples/InlineEdit.md +24 -24
  84. package/docs/components/InputGroup/examples/InputGroup.md +10 -10
  85. package/docs/components/JumpLinks/examples/JumpLinks.md +21 -21
  86. package/docs/components/Label/examples/Label.md +31 -31
  87. package/docs/components/LabelGroup/examples/LabelGroup.md +22 -22
  88. package/docs/components/List/examples/List.md +6 -6
  89. package/docs/components/LogViewer/examples/LogViewer.md +69 -69
  90. package/docs/components/Login/examples/Login.md +22 -22
  91. package/docs/components/Masthead/examples/masthead.md +9 -9
  92. package/docs/components/Menu/examples/Menu.md +78 -76
  93. package/docs/components/MenuToggle/examples/MenuToggle.md +24 -24
  94. package/docs/components/ModalBox/examples/ModalBox.md +35 -35
  95. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +22 -22
  96. package/docs/components/Nav/examples/Navigation.md +36 -36
  97. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  98. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +39 -39
  99. package/docs/components/NumberInput/examples/NumberInput.md +12 -12
  100. package/docs/components/OptionsMenu/examples/options-menu.md +27 -28
  101. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  102. package/docs/components/Page/examples/Page.md +54 -54
  103. package/docs/components/Pagination/examples/Pagination.md +27 -27
  104. package/docs/components/Panel/examples/Panel.md +10 -10
  105. package/docs/components/Popover/examples/Popover.md +34 -34
  106. package/docs/components/Progress/examples/Progress.md +31 -60
  107. package/docs/components/ProgressStepper/examples/ProgressStepper.md +24 -24
  108. package/docs/components/Radio/examples/Radio.md +11 -11
  109. package/docs/components/SearchInput/examples/SearchInput.md +34 -34
  110. package/docs/components/Select/examples/Select.md +143 -143
  111. package/docs/components/Sidebar/examples/Sidebar.md +14 -14
  112. package/docs/components/SimpleList/examples/SimpleList.md +11 -11
  113. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  114. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  115. package/docs/components/Slider/examples/Slider.md +24 -24
  116. package/docs/components/Spinner/examples/Spinner.md +24 -24
  117. package/docs/components/Switch/examples/Switch.md +19 -19
  118. package/docs/components/TabContent/examples/TabContent.md +13 -13
  119. package/docs/components/Table/examples/Table.md +155 -155
  120. package/docs/components/Tabs/examples/Tabs.md +47 -47
  121. package/docs/components/TextInputGroup/examples/TextInputGroup.md +19 -19
  122. package/docs/components/Tile/examples/Tile.md +15 -15
  123. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  124. package/docs/components/Title/examples/Title.md +17 -17
  125. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  126. package/docs/components/Toolbar/examples/Toolbar.md +113 -113
  127. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  128. package/docs/components/TreeView/examples/TreeView.md +34 -34
  129. package/docs/components/Truncate/examples/Truncate.md +4 -4
  130. package/docs/components/Wizard/examples/Wizard.md +47 -51
  131. package/docs/demos/DataList/examples/DataList.md +4 -4
  132. package/docs/demos/Masthead/examples/Masthead.md +6 -6
  133. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6 -6
  134. package/docs/demos/Table/examples/Table.md +22 -22
  135. package/docs/demos/Toolbar/examples/Toolbar.md +8 -8
  136. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  137. package/docs/layouts/Flex/examples/Flex.md +98 -98
  138. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  139. package/docs/layouts/Grid/examples/Grid.md +9 -9
  140. package/docs/layouts/Level/examples/Level.md +5 -5
  141. package/docs/layouts/Split/examples/Split.md +7 -7
  142. package/docs/layouts/Stack/examples/Stack.md +6 -6
  143. package/docs/utilities/Accessibility/examples/Accessibility.md +4 -4
  144. package/docs/utilities/Alignment/examples/Alignment.md +6 -6
  145. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +12 -12
  146. package/docs/utilities/BoxShadow/examples/box-shadow.md +22 -22
  147. package/docs/utilities/Display/examples/Display.md +11 -11
  148. package/docs/utilities/Flex/examples/Flex.md +34 -34
  149. package/docs/utilities/Float/examples/Float.md +4 -4
  150. package/docs/utilities/Sizing/examples/Sizing.md +50 -50
  151. package/docs/utilities/Spacing/examples/Spacing.md +34 -34
  152. package/docs/utilities/Text/examples/Text.md +27 -27
  153. package/icons/{pf-icons.json → pf-icons.mjs} +1 -1
  154. package/layouts/Grid/grid.css +5 -5
  155. package/package.json +56 -61
  156. package/patternfly-no-reset.css +201 -178
  157. package/patternfly.css +201 -178
  158. package/patternfly.min.css +1 -1
  159. package/patternfly.min.css.map +1 -1
@@ -502,28 +502,28 @@ cssPrefix: pf-c-jump-links
502
502
 
503
503
  ### Accessibility
504
504
 
505
- | Attribute | Applied to | Outcome |
506
- | ------------ | ------------------ | ----------------------------------------------- |
505
+ | Attribute | Applied to | Outcome |
506
+ | -- | -- | -- |
507
507
  | `aria-label` | `.pf-c-jump-links` | Provides an accessible name for the jump links. |
508
508
 
509
509
  ### Usage
510
510
 
511
- | Class | Applied to | Outcome |
512
- | ---------------------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
513
- | `.pf-c-jump-links` | `<div>` | Initiates the jump links container. |
514
- | `.pf-c-jump-links__header` | `<div>` | Initiates the jump links header. |
515
- | `.pf-c-jump-links__toggle` | `<div>` | Initiates the jump links expandable toggle. |
516
- | `.pf-c-jump-links__toggle-text` | `<span>` | Initiates the jump links expandable toggle text. |
517
- | `.pf-c-jump-links__toggle-icon` | `<span>` | Initiates the jump links expandable toggle icon. |
518
- | `.pf-c-jump-links__label` | `<div>` | Initiates the jump links label. |
519
- | `.pf-c-jump-links__main` | `<div>` | Initiates the jump links main container for when a label and list is used in the horizontal variation. |
520
- | `.pf-c-jump-links__list` | `<ul>` | Initiates the jump links list. |
521
- | `.pf-c-jump-links__item` | `<li>` | Initiates the jump links list item. |
522
- | `.pf-c-jump-links__link` | `<button>` | Initiates the jump links link. |
523
- | `.pf-c-jump-links__link-text` | `<div>` | Initiates the jump links link text. |
524
- | `.pf-m-vertical` | `.pf-c-jump-links` | Modifies the jump links component to be vertical. |
525
- | `.pf-m-center` | `.pf-c-jump-links` | Modifies the jump links component to center its list and label. |
526
- | `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-jump-links` | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical jump links only. |
527
- | `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-jump-links` | Modifies the jump links component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
528
- | `.pf-m-expanded` | `.pf-c-jump-links` | Modifies the expandable jump links component for the expanded state. |
529
- | `.pf-m-current` | `.pf-c-jump-links__item` | Modifies the jump links item to be current. |
511
+ | Class | Applied to | Outcome |
512
+ | -- | -- | -- |
513
+ | `.pf-c-jump-links` | `<div>` | Initiates the jump links container. |
514
+ | `.pf-c-jump-links__header` | `<div>` | Initiates the jump links header. |
515
+ | `.pf-c-jump-links__toggle` | `<div>` | Initiates the jump links expandable toggle. |
516
+ | `.pf-c-jump-links__toggle-text` | `<span>` | Initiates the jump links expandable toggle text. |
517
+ | `.pf-c-jump-links__toggle-icon` | `<span>` | Initiates the jump links expandable toggle icon. |
518
+ | `.pf-c-jump-links__label` | `<div>` | Initiates the jump links label. |
519
+ | `.pf-c-jump-links__main` | `<div>` | Initiates the jump links main container for when a label and list is used in the horizontal variation. |
520
+ | `.pf-c-jump-links__list` | `<ul>` | Initiates the jump links list. |
521
+ | `.pf-c-jump-links__item` | `<li>` | Initiates the jump links list item. |
522
+ | `.pf-c-jump-links__link` | `<button>` | Initiates the jump links link. |
523
+ | `.pf-c-jump-links__link-text` | `<div>` | Initiates the jump links link text. |
524
+ | `.pf-m-vertical` | `.pf-c-jump-links` | Modifies the jump links component to be vertical. |
525
+ | `.pf-m-center` | `.pf-c-jump-links` | Modifies the jump links component to center its list and label. |
526
+ | `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-jump-links` | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical jump links only. |
527
+ | `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-jump-links` | Modifies the jump links component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
528
+ | `.pf-m-expanded` | `.pf-c-jump-links` | Modifies the expandable jump links component for the expanded state. |
529
+ | `.pf-m-current` | `.pf-c-jump-links__item`| Modifies the jump links item to be current. |
@@ -1277,17 +1277,17 @@ This style of label is used to indicate overflow within a label group.
1277
1277
 
1278
1278
  **Note: Editable label behavior must be handled with JavaScript.**
1279
1279
 
1280
- - `.pf-c-label__editable-text` onClick event should:
1281
- - Set `.pf-m-editable-active` on `.pf-c-label`
1282
- - Change `.pf-c-label__editable-text`from a button to an input
1283
- - Return keypress, when content is editable, should:
1284
- - Be captured to prevent line wrapping and save updates to label text
1285
- - Remove `.pf-m-editable-active` from `.pf-c-label`
1286
- - Change `.pf-c-label__editable-text` back from an input to a button and set the `currvalue` of the button to the contents of the input
1287
- - Esc keypress, when content is editable, should:
1288
- - Undo any update to label text
1289
- - Remove `.pf-m-editable-active` from `.pf-c-label`
1290
- - Change `.pf-c-label__editable-text` back to a button
1280
+ * `.pf-c-label__editable-text` onClick event should:
1281
+ * Set `.pf-m-editable-active` on `.pf-c-label`
1282
+ * Change `.pf-c-label__editable-text`from a button to an input
1283
+ * Return keypress, when content is editable, should:
1284
+ * Be captured to prevent line wrapping and save updates to label text
1285
+ * Remove `.pf-m-editable-active` from `.pf-c-label`
1286
+ * Change `.pf-c-label__editable-text` back from an input to a button and set the `currvalue` of the button to the contents of the input
1287
+ * Esc keypress, when content is editable, should:
1288
+ * Undo any update to label text
1289
+ * Remove `.pf-m-editable-active` from `.pf-c-label`
1290
+ * Change `.pf-c-label__editable-text` back to a button
1291
1291
 
1292
1292
  ```html isBeta
1293
1293
  <span class="pf-c-label pf-m-blue pf-m-editable">
@@ -1367,23 +1367,23 @@ This style of label is used to add new labels to a label group.
1367
1367
 
1368
1368
  ### Usage
1369
1369
 
1370
- | Class | Applied to | Outcome |
1371
- | ---------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
1372
- | `.pf-c-label` | `<span>`, `<button>` | Initiates a label. Without a color modifier, the label's default style is grey. Use a color modifier to change the label color. Use a `<button>` if the label is an overflow label used in the label group. **Required** |
1373
- | `.pf-c-label__content` | `<span>`, `<a>`, `<button>` | Iniates a label content. Use as an `<a>` element if the label serves as a link. Use a `<button>` if the label serves as an action. **Required** |
1374
- | `.pf-c-label__icon` | `<span>` | Initiates a label icon. |
1375
- | `.pf-c-label__text` | `<span>` | Initiates label text. |
1376
- | `.pf-c-label__editable-text` | `<button>`, `<input>` | Initiates editable label text. See the [editable](#editable) example for details about handling behavior in Javascript. |
1377
- | `.pf-m-outline` | `.pf-c-label` | Modifies label for outline styles. |
1378
- | `.pf-m-compact` | `.pf-c-label` | Modifies label for compact styles. |
1379
- | `.pf-m-overflow` | `.pf-c-label` | Modifies label for overflow styles for use in a label group. |
1380
- | `.pf-m-add` | `.pf-c-label` | Modifies label for add styles for use in a label group. |
1381
- | `.pf-m-blue` | `.pf-c-label` | Modifies the label to have blue colored styling. |
1382
- | `.pf-m-green` | `.pf-c-label` | Modifies the label to have green colored styling. |
1383
- | `.pf-m-orange` | `.pf-c-label` | Modifies the label to have orange colored styling. |
1384
- | `.pf-m-red` | `.pf-c-label` | Modifies the label to have red colored styling. |
1385
- | `.pf-m-purple` | `.pf-c-label` | Modifies the label to have purple colored styling. |
1386
- | `.pf-m-cyan` | `.pf-c-label` | Modifies the label to have cyan colored styling. |
1387
- | `.pf-m-gold` | `.pf-c-label` | Modifies the label to have gold colored styling. |
1388
- | `.pf-m-editable` | `.pf-c-label` | Modifies label for editable styles. |
1389
- | `.pf-m-editable-active` | `.pf-c-label.pf-m-editable` | Modifies editable label for active styles. |
1370
+ | Class | Applied to | Outcome |
1371
+ | -- | -- | -- |
1372
+ | `.pf-c-label` | `<span>`, `<button>` | Initiates a label. Without a color modifier, the label's default style is grey. Use a color modifier to change the label color. Use a `<button>` if the label is an overflow label used in the label group. **Required** |
1373
+ | `.pf-c-label__content` | `<span>`, `<a>`, `<button>` | Iniates a label content. Use as an `<a>` element if the label serves as a link. Use a `<button>` if the label serves as an action. **Required** |
1374
+ | `.pf-c-label__icon` | `<span>` | Initiates a label icon. |
1375
+ | `.pf-c-label__text` | `<span>` | Initiates label text. |
1376
+ | `.pf-c-label__editable-text` | `<button>`, `<input>` | Initiates editable label text. See the [editable](#editable) example for details about handling behavior in Javascript.|
1377
+ | `.pf-m-outline` | `.pf-c-label` | Modifies label for outline styles. |
1378
+ | `.pf-m-compact` | `.pf-c-label` | Modifies label for compact styles. |
1379
+ | `.pf-m-overflow` | `.pf-c-label` | Modifies label for overflow styles for use in a label group. |
1380
+ | `.pf-m-add` | `.pf-c-label` | Modifies label for add styles for use in a label group. |
1381
+ | `.pf-m-blue` | `.pf-c-label` | Modifies the label to have blue colored styling. |
1382
+ | `.pf-m-green` | `.pf-c-label` | Modifies the label to have green colored styling. |
1383
+ | `.pf-m-orange` | `.pf-c-label` | Modifies the label to have orange colored styling. |
1384
+ | `.pf-m-red` | `.pf-c-label` | Modifies the label to have red colored styling. |
1385
+ | `.pf-m-purple` | `.pf-c-label` | Modifies the label to have purple colored styling. |
1386
+ | `.pf-m-cyan` | `.pf-c-label` | Modifies the label to have cyan colored styling. |
1387
+ | `.pf-m-gold` | `.pf-c-label` | Modifies the label to have gold colored styling. |
1388
+ | `.pf-m-editable` | `.pf-c-label` | Modifies label for editable styles. |
1389
+ | `.pf-m-editable-active` | `.pf-c-label.pf-m-editable` | Modifies editable label for active styles. |
@@ -606,7 +606,7 @@ cssPrefix: pf-c-label-group
606
606
 
607
607
  In addition to the JavaScript management of [editable labels](/components/label#editable), dynamic label groups also need:
608
608
 
609
- - `.pf-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-c-label-group__textarea`
609
+ * `.pf-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-c-label-group__textarea`
610
610
 
611
611
  ### Editable labels, dynamic label group
612
612
 
@@ -1073,27 +1073,27 @@ In addition to the JavaScript management of [editable labels](/components/label#
1073
1073
 
1074
1074
  ### Accessibility
1075
1075
 
1076
- | Attribute | Applied to | Outcome |
1077
- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1078
- | `role="list"` | `.pf-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
1079
- | `aria-label="[button label text]"` | `.pf-c-label-group__close > button` | Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
1080
- | `aria-labelledby="[id value of .pf-c-label-group__close > button] [id value of .pf-c-label-group__label]"` | `.pf-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
1081
- | `aria-label="[label text]"` | `.pf-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |
1082
- | `row="1"` | `.pf-c-label-group__textarea` | Indicates that the label group textarea is one row. **Required** |
1083
- | `tabindex="0"` | `.pf-c-label-group__textarea` | Inserts the label group textarea into the tab order of the page so that it is focusable. **Required** |
1076
+ | Attribute | Applied to | Outcome |
1077
+ | -- | -- | -- |
1078
+ | `role="list"` | `.pf-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
1079
+ | `aria-label="[button label text]"` | `.pf-c-label-group__close > button` | Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
1080
+ | `aria-labelledby="[id value of .pf-c-label-group__close > button] [id value of .pf-c-label-group__label]"` | `.pf-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
1081
+ | `aria-label="[label text]"` | `.pf-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |
1082
+ | `row="1"` | `.pf-c-label-group__textarea` | Indicates that the label group textarea is one row. **Required** |
1083
+ | `tabindex="0"` | `.pf-c-label-group__textarea` | Inserts the label group textarea into the tab order of the page so that it is focusable. **Required** |
1084
1084
 
1085
1085
  ### Usage
1086
1086
 
1087
- | Class | Applied to | Outcome |
1088
- | ------------------------------ | ----------------------------------- | -------------------------------------------------------------------------------------------- |
1089
- | `.pf-c-label-group` | `<div>` | Initiates the label group component. **Required.** |
1090
- | `.pf-c-label-group__list` | `<ul>` | Initiates the container for a list of labels. **Required.** |
1091
- | `.pf-c-label-group__list-item` | `<li>` | Initiates the list item inside of the label group. **Required.** |
1092
- | `.pf-c-label-group__main` | `<div>` | Initiates the main element in the label group. **Required when label and list are present** |
1093
- | `.pf-c-label-group__textarea` | `<textarea>` | Initiates the textarea element in the label group. **Required when label group is editable** |
1094
- | `.pf-c-label-group__label` | `<span>` | Initiates the label to be used in the label group. |
1095
- | `.pf-c-label-group__close` | `<div>` | Initiates the container used for the button to remove the label group. |
1096
- | `.pf-c-button` | `.pf-c-label-group__close <button>` | Initiates the button used to remove the label group. |
1097
- | `.pf-m-editable` | `.pf-c-label-group` | Modifies the label group to support editable styling. |
1098
- | `.pf-m-category` | `.pf-c-label-group` | Modifies the label group to support category styling. |
1099
- | `.pf-m-textarea` | `.pf-c-label-group__list-item` | Modifies the label group list item to support textarea. |
1087
+ | Class | Applied to | Outcome |
1088
+ | -- | -- | -- |
1089
+ | `.pf-c-label-group` | `<div>` | Initiates the label group component. **Required.** |
1090
+ | `.pf-c-label-group__list` | `<ul>` | Initiates the container for a list of labels. **Required.** |
1091
+ | `.pf-c-label-group__list-item` | `<li>` | Initiates the list item inside of the label group. **Required.** |
1092
+ | `.pf-c-label-group__main` | `<div>` | Initiates the main element in the label group. **Required when label and list are present** |
1093
+ | `.pf-c-label-group__textarea` | `<textarea>` | Initiates the textarea element in the label group. **Required when label group is editable** |
1094
+ | `.pf-c-label-group__label` | `<span>` | Initiates the label to be used in the label group. |
1095
+ | `.pf-c-label-group__close` | `<div>` | Initiates the container used for the button to remove the label group. |
1096
+ | `.pf-c-button` | `.pf-c-label-group__close <button>` | Initiates the button used to remove the label group. |
1097
+ | `.pf-m-editable` | `.pf-c-label-group` | Modifies the label group to support editable styling. |
1098
+ | `.pf-m-category` | `.pf-c-label-group` | Modifies the label group to support category styling. |
1099
+ | `.pf-m-textarea` | `.pf-c-label-group__list-item` | Modifies the label group list item to support textarea. |
@@ -163,10 +163,10 @@ Non-inline lists can be nested up to any level.
163
163
 
164
164
  ### Usage
165
165
 
166
- | Class | Applied to | Outcome |
167
- | ---------------- | ------------ | ----------------------------------------------- |
168
- | `.pf-c-list` | `<ul>, <ol>` | Initiates a list. **Required** |
169
- | `.pf-m-inline` | `.pf-c-list` | Displays list items inline. |
170
- | `.pf-m-plain` | `.pf-c-list` | Removes the list marker and base indentation. |
166
+ | Class | Applied to | Outcome |
167
+ | -- | -- | -- |
168
+ | `.pf-c-list` | `<ul>, <ol>` | Initiates a list. **Required** |
169
+ | `.pf-m-inline` | `.pf-c-list` | Displays list items inline. |
170
+ | `.pf-m-plain` | `.pf-c-list` | Removes the list marker and base indentation. |
171
171
  | `.pf-m-bordered` | `.pf-c-list` | Add horizontal divider between items in a list. |
172
- | `.pf-m-icon-lg` | `.pf-c-list` | Show all the icons or logos in the list large. |
172
+ | `.pf-m-icon-lg` | `.pf-c-list` | Show all the icons or logos in the list large. |
@@ -98,9 +98,9 @@ cssPrefix: pf-c-log-viewer
98
98
  </span>
99
99
  <input
100
100
  class="pf-c-text-input-group__text-input"
101
- type="text"
102
- value
101
+ type="search"
103
102
  placeholder="Find"
103
+ value
104
104
  aria-label="Type to filter"
105
105
  />
106
106
  </span>
@@ -446,9 +446,9 @@ cssPrefix: pf-c-log-viewer
446
446
  </span>
447
447
  <input
448
448
  class="pf-c-text-input-group__text-input"
449
- type="text"
450
- value
449
+ type="search"
451
450
  placeholder="Find"
451
+ value
452
452
  aria-label="Type to filter"
453
453
  />
454
454
  </span>
@@ -650,9 +650,9 @@ cssPrefix: pf-c-log-viewer
650
650
  </span>
651
651
  <input
652
652
  class="pf-c-text-input-group__text-input"
653
- type="text"
654
- value
653
+ type="search"
655
654
  placeholder="Find"
655
+ value
656
656
  aria-label="Type to filter"
657
657
  />
658
658
  </span>
@@ -998,9 +998,9 @@ cssPrefix: pf-c-log-viewer
998
998
  </span>
999
999
  <input
1000
1000
  class="pf-c-text-input-group__text-input"
1001
- type="text"
1002
- value
1001
+ type="search"
1003
1002
  placeholder="Find"
1003
+ value
1004
1004
  aria-label="Type to filter"
1005
1005
  />
1006
1006
  </span>
@@ -1202,9 +1202,9 @@ cssPrefix: pf-c-log-viewer
1202
1202
  </span>
1203
1203
  <input
1204
1204
  class="pf-c-text-input-group__text-input"
1205
- type="text"
1206
- value
1205
+ type="search"
1207
1206
  placeholder="Find"
1207
+ value
1208
1208
  aria-label="Type to filter"
1209
1209
  />
1210
1210
  </span>
@@ -1550,9 +1550,9 @@ cssPrefix: pf-c-log-viewer
1550
1550
  </span>
1551
1551
  <input
1552
1552
  class="pf-c-text-input-group__text-input"
1553
- type="text"
1554
- value
1553
+ type="search"
1555
1554
  placeholder="Find"
1555
+ value
1556
1556
  aria-label="Type to filter"
1557
1557
  />
1558
1558
  </span>
@@ -1754,9 +1754,9 @@ cssPrefix: pf-c-log-viewer
1754
1754
  </span>
1755
1755
  <input
1756
1756
  class="pf-c-text-input-group__text-input"
1757
- type="text"
1758
- value
1757
+ type="search"
1759
1758
  placeholder="Find"
1759
+ value
1760
1760
  aria-label="Type to filter"
1761
1761
  />
1762
1762
  </span>
@@ -2102,9 +2102,9 @@ cssPrefix: pf-c-log-viewer
2102
2102
  </span>
2103
2103
  <input
2104
2104
  class="pf-c-text-input-group__text-input"
2105
- type="text"
2106
- value
2105
+ type="search"
2107
2106
  placeholder="Find"
2107
+ value
2108
2108
  aria-label="Type to filter"
2109
2109
  />
2110
2110
  </span>
@@ -2306,9 +2306,9 @@ cssPrefix: pf-c-log-viewer
2306
2306
  </span>
2307
2307
  <input
2308
2308
  class="pf-c-text-input-group__text-input"
2309
- type="text"
2310
- value
2309
+ type="search"
2311
2310
  placeholder="Find"
2311
+ value
2312
2312
  aria-label="Type to filter"
2313
2313
  />
2314
2314
  </span>
@@ -2654,9 +2654,9 @@ cssPrefix: pf-c-log-viewer
2654
2654
  </span>
2655
2655
  <input
2656
2656
  class="pf-c-text-input-group__text-input"
2657
- type="text"
2658
- value
2657
+ type="search"
2659
2658
  placeholder="Find"
2659
+ value
2660
2660
  aria-label="Type to filter"
2661
2661
  />
2662
2662
  </span>
@@ -2858,9 +2858,9 @@ cssPrefix: pf-c-log-viewer
2858
2858
  </span>
2859
2859
  <input
2860
2860
  class="pf-c-text-input-group__text-input"
2861
- type="text"
2862
- value="openshift"
2861
+ type="search"
2863
2862
  placeholder="Find"
2863
+ value="openshift"
2864
2864
  aria-label="Type to filter"
2865
2865
  />
2866
2866
  </span>
@@ -3233,9 +3233,9 @@ cssPrefix: pf-c-log-viewer
3233
3233
  </span>
3234
3234
  <input
3235
3235
  class="pf-c-text-input-group__text-input"
3236
- type="text"
3237
- value="openshift"
3236
+ type="search"
3238
3237
  placeholder="Find"
3238
+ value="openshift"
3239
3239
  aria-label="Type to filter"
3240
3240
  />
3241
3241
  </span>
@@ -3480,9 +3480,9 @@ cssPrefix: pf-c-log-viewer
3480
3480
  </span>
3481
3481
  <input
3482
3482
  class="pf-c-text-input-group__text-input"
3483
- type="text"
3484
- value
3483
+ type="search"
3485
3484
  placeholder="Find"
3485
+ value
3486
3486
  aria-label="Type to filter"
3487
3487
  />
3488
3488
  </span>
@@ -3828,9 +3828,9 @@ cssPrefix: pf-c-log-viewer
3828
3828
  </span>
3829
3829
  <input
3830
3830
  class="pf-c-text-input-group__text-input"
3831
- type="text"
3832
- value
3831
+ type="search"
3833
3832
  placeholder="Find"
3833
+ value
3834
3834
  aria-label="Type to filter"
3835
3835
  />
3836
3836
  </span>
@@ -4032,9 +4032,9 @@ cssPrefix: pf-c-log-viewer
4032
4032
  </span>
4033
4033
  <input
4034
4034
  class="pf-c-text-input-group__text-input"
4035
- type="text"
4036
- value
4035
+ type="search"
4037
4036
  placeholder="Find"
4037
+ value
4038
4038
  aria-label="Type to filter"
4039
4039
  />
4040
4040
  </span>
@@ -4378,9 +4378,9 @@ cssPrefix: pf-c-log-viewer
4378
4378
  </span>
4379
4379
  <input
4380
4380
  class="pf-c-text-input-group__text-input"
4381
- type="text"
4382
- value
4381
+ type="search"
4383
4382
  placeholder="Find"
4383
+ value
4384
4384
  aria-label="Type to filter"
4385
4385
  />
4386
4386
  </span>
@@ -4582,9 +4582,9 @@ cssPrefix: pf-c-log-viewer
4582
4582
  </span>
4583
4583
  <input
4584
4584
  class="pf-c-text-input-group__text-input"
4585
- type="text"
4586
- value
4585
+ type="search"
4587
4586
  placeholder="Find"
4587
+ value
4588
4588
  aria-label="Type to filter"
4589
4589
  />
4590
4590
  </span>
@@ -4930,9 +4930,9 @@ cssPrefix: pf-c-log-viewer
4930
4930
  </span>
4931
4931
  <input
4932
4932
  class="pf-c-text-input-group__text-input"
4933
- type="text"
4934
- value
4933
+ type="search"
4935
4934
  placeholder="Find"
4935
+ value
4936
4936
  aria-label="Type to filter"
4937
4937
  />
4938
4938
  </span>
@@ -5157,9 +5157,9 @@ cssPrefix: pf-c-log-viewer
5157
5157
  </span>
5158
5158
  <input
5159
5159
  class="pf-c-text-input-group__text-input"
5160
- type="text"
5161
- value="openshift"
5160
+ type="search"
5162
5161
  placeholder="Find"
5162
+ value="openshift"
5163
5163
  aria-label="Type to filter"
5164
5164
  />
5165
5165
  </span>
@@ -5532,9 +5532,9 @@ cssPrefix: pf-c-log-viewer
5532
5532
  </span>
5533
5533
  <input
5534
5534
  class="pf-c-text-input-group__text-input"
5535
- type="text"
5536
- value="openshift"
5535
+ type="search"
5537
5536
  placeholder="Find"
5537
+ value="openshift"
5538
5538
  aria-label="Type to filter"
5539
5539
  />
5540
5540
  </span>
@@ -5693,35 +5693,35 @@ cssPrefix: pf-c-log-viewer
5693
5693
 
5694
5694
  ### Accessibility
5695
5695
 
5696
- | Attribute | Applied | Outcome |
5697
- | ------------------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
5698
- | `aria-label="Log viewer"` | `.pf-c-log-viewer` | Provides an accessible label for the log viewer. |
5699
- | `role="log"` | `.pf-c-log-viewer__main` | Identifies an element that creates a live region where new information is added in a meaningful order and old information may disappear. **Required** |
5700
- | `aria-live="polite"` | `.pf-c-log-viewer__list` | Allows assistive technologies to automatically read new content within the aria-live region on the place where the text is displayed. |
5701
- | `aria-atomic="true"` | `.pf-c-log-viewer__list` | Allows assistive technologies to notify a user when log messages are added. |
5702
- | `tabindex="0"` | `.pf-c-log-viewer`, `.pf-c-log-viewer__list` | Inserts the element into the tab order of the page so that it is focusable. **Required** |
5703
- | `aria-hidden="true"` | `.pf-c-log-viewer__index` | Hides an index from assistive technologies. |
5696
+ | Attribute | Applied | Outcome |
5697
+ | -- | -- | -- |
5698
+ | `aria-label="Log viewer"` | `.pf-c-log-viewer` | Provides an accessible label for the log viewer. |
5699
+ | `role="log"` | `.pf-c-log-viewer__main` | Identifies an element that creates a live region where new information is added in a meaningful order and old information may disappear. **Required** |
5700
+ | `aria-live="polite"` | `.pf-c-log-viewer__list` | Allows assistive technologies to automatically read new content within the aria-live region on the place where the text is displayed. |
5701
+ | `aria-atomic="true"` | `.pf-c-log-viewer__list` | Allows assistive technologies to notify a user when log messages are added. |
5702
+ | `tabindex="0"` | `.pf-c-log-viewer`, `.pf-c-log-viewer__list` | Inserts the element into the tab order of the page so that it is focusable. **Required** |
5703
+ | `aria-hidden="true"` | `.pf-c-log-viewer__index` | Hides an index from assistive technologies. |
5704
5704
 
5705
5705
  ### Usage
5706
5706
 
5707
- | Class | Applied to | Outcome |
5708
- | ---------------------------------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
5709
- | `.pf-c-log-viewer` | `<div>` | Initiates a log viewer. **Required** |
5710
- | `.pf-c-log-viewer__header` | `<div>` | Initiates the header container for a log viewer. **Required** |
5711
- | `.pf-c-log-viewer__main` | `<div>` | Initiates the main container for a log viewer. **Required** |
5712
- | `.pf-c-log-viewer__scroll-container` | `<div>` | Initiates the scroll container for a log viewer. **Required** |
5713
- | `.pf-c-log-viewer__list` | `<ul>` | Initiates the log viewer list. **Required** |
5714
- | `.pf-c-log-viewer__list-item` | `<li>` | Initiates a log viewer list item. **Required** |
5715
- | `.pf-c-log-viewer__index` | `<span>` | Initiates a log viewer index element. **Required for numbered list** |
5716
- | `.pf-c-log-viewer__text` | `<div>` | Initiates a log viewer text element. **Required** |
5717
- | `.pf-c-log-viewer__string` | `<span>` | Initiates a log viewer string element. |
5718
- | `.pf-c-log-viewer__timestamp` | `<div>` | Initiates a log viewer text element. **Required** |
5719
- | `.pf-m-wrap-text` | `.pf-c-log-viewer` | Modifies the log viewer text to wrap. |
5720
- | `.pf-m-nowrap` | `.pf-c-log-viewer` | Modifies the log viewer text to not wrap. |
5721
- | `.pf-m-line-numbers` | `.pf-c-log-viewer` | Modifies the log viewer to display line numbers. |
5722
- | `.pf-m-line-number-chars` | `.pf-c-log-viewer` | Modifies the log viewer allow for a custom line number column size. Use with `--pf-c-log-viewer--line-number-chars`. |
5723
- | `.pf-m-dark` | `.pf-c-log-viewer` | Modifies the log viewer content for dark theme. |
5724
- | `.pf-m-match` | `.pf-c-log-viewer__string` | Indicates a string is a search result. |
5725
- | `.pf-m-current` | `.pf-c-log-viewer__string` | Indicates a string is the current search result. |
5726
- | `--pf-c-log-viewer--line-number-chars` | `.pf-c-log-viewer` | With a number passed as the value, modifies the width of the line number column to show the specified number of characters. |
5727
- | `--pf-c-log-viewer--MaxHeight{-on-[breakpoint]}: {height}` | `.pf-c-log-viewer` | Modifies the height value of a log viewer at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
5707
+ | Class | Applied to | Outcome |
5708
+ | -- | -- | -- |
5709
+ | `.pf-c-log-viewer` | `<div>` | Initiates a log viewer. **Required** |
5710
+ | `.pf-c-log-viewer__header` | `<div>` | Initiates the header container for a log viewer. **Required** |
5711
+ | `.pf-c-log-viewer__main` | `<div>` | Initiates the main container for a log viewer. **Required** |
5712
+ | `.pf-c-log-viewer__scroll-container` | `<div>` | Initiates the scroll container for a log viewer. **Required** |
5713
+ | `.pf-c-log-viewer__list` | `<ul>` | Initiates the log viewer list. **Required** |
5714
+ | `.pf-c-log-viewer__list-item` | `<li>` | Initiates a log viewer list item. **Required** |
5715
+ | `.pf-c-log-viewer__index` | `<span>` | Initiates a log viewer index element. **Required for numbered list** |
5716
+ | `.pf-c-log-viewer__text` | `<div>` | Initiates a log viewer text element. **Required** |
5717
+ | `.pf-c-log-viewer__string` | `<span>` | Initiates a log viewer string element. |
5718
+ | `.pf-c-log-viewer__timestamp` | `<div>` | Initiates a log viewer text element. **Required** |
5719
+ | `.pf-m-wrap-text` | `.pf-c-log-viewer` | Modifies the log viewer text to wrap. |
5720
+ | `.pf-m-nowrap` | `.pf-c-log-viewer` | Modifies the log viewer text to not wrap. |
5721
+ | `.pf-m-line-numbers` | `.pf-c-log-viewer` | Modifies the log viewer to display line numbers. |
5722
+ | `.pf-m-line-number-chars` | `.pf-c-log-viewer` | Modifies the log viewer allow for a custom line number column size. Use with `--pf-c-log-viewer--line-number-chars`. |
5723
+ | `.pf-m-dark` | `.pf-c-log-viewer` | Modifies the log viewer content for dark theme. |
5724
+ | `.pf-m-match` | `.pf-c-log-viewer__string` | Indicates a string is a search result. |
5725
+ | `.pf-m-current` | `.pf-c-log-viewer__string` | Indicates a string is the current search result. |
5726
+ | `--pf-c-log-viewer--line-number-chars` | `.pf-c-log-viewer` | With a number passed as the value, modifies the width of the line number column to show the specified number of characters. |
5727
+ | `--pf-c-log-viewer--MaxHeight{-on-[breakpoint]}: {height}` | `.pf-c-log-viewer` | Modifies the height value of a log viewer at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
@@ -1163,25 +1163,25 @@ wrapperTag: div
1163
1163
 
1164
1164
  ### Usage
1165
1165
 
1166
- | Class | Applied to | Outcome |
1167
- | --------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------------------------------------------------------- |
1168
- | `.pf-c-login` | `<div>` | Initializes the login component. **Required** |
1169
- | `.pf-c-login__container` | `<div>` | Positions the login component content. **Required** |
1170
- | `.pf-c-login__header` | `<header>` | Positions the login header. **Required** |
1171
- | `.pf-c-login__header .pf-c-brand` | `<img>` | Creates a brand image inside of login header. **Required** |
1172
- | `.pf-c-login__main` | `<main>` | Positions the login main area. **Required** |
1173
- | `.pf-c-login__main-header` | `<header>` | Creates the header of the main area. **Required** |
1174
- | `.pf-c-login__main-header .pf-c-title` | `<h1>,<h2>,<h3>,<h4>,<h5>,<h6>` | Creates a title in the main header area. **Required** |
1175
- | `.pf-c-login__main-header-desc` | `<p>` | Creates the description in the main area header. |
1176
- | `.pf-c-login__main-header-utilities` | `<div>` | Creates a utilities section in the main header area. **Note:** For use with a language selector menu. |
1177
- | `.pf-c-login__main-body` | `<div>` | Creates the body of the main area. **Required** |
1178
- | `.pf-c-login__main-body .pf-c-form` | `<form>` | Creates the login form in the main body area. **Required** |
1179
- | `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text.pf-m-error` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden.` **Required** |
1180
- | `.pf-c-login__main-footer` | `<footer>` | Creates the footer of the main area. **Required** |
1181
- | `.pf-c-login__main-footer-links` | `<ul>` | Creates a list of links in the main footer. **Required** |
1182
- | `.pf-c-login__main-footer-links-item` | `<li>` | Creates proper spacing for links in the main footer. **Required** |
1183
- | `.pf-c-login__main-footer-links-item-link` | `<a>` | Creates link in links list in footer. **Required** |
1184
- | `.pf-c-login__main-footer-band` | `<div>` | Styles a band in the footer. |
1185
- | `.pf-c-login__main-footer-band-item` | `<p>` | Adds information to the band in the footer. |
1186
- | `.pf-c-login__footer` | `<footer>` | Positions the login footer. **Required** |
1187
- | `.pf-c-login__footer .pf-c-list` | `<ul>` | Creates a list of links in the login footer. **Required** |
1166
+ | Class | Applied to | Outcome |
1167
+ | -- | -- | -- |
1168
+ | `.pf-c-login` | `<div>` | Initializes the login component. **Required**|
1169
+ | `.pf-c-login__container` | `<div>` | Positions the login component content. **Required**|
1170
+ | `.pf-c-login__header` | `<header>` | Positions the login header. **Required**|
1171
+ | `.pf-c-login__header .pf-c-brand` | `<img>` | Creates a brand image inside of login header. **Required** |
1172
+ | `.pf-c-login__main` | `<main>` | Positions the login main area. **Required** |
1173
+ | `.pf-c-login__main-header` | `<header>` | Creates the header of the main area. **Required** |
1174
+ | `.pf-c-login__main-header .pf-c-title` | `<h1>,<h2>,<h3>,<h4>,<h5>,<h6>` | Creates a title in the main header area. **Required** |
1175
+ | `.pf-c-login__main-header-desc` | `<p>` | Creates the description in the main area header. |
1176
+ | `.pf-c-login__main-header-utilities` | `<div>` | Creates a utilities section in the main header area. **Note:** For use with a language selector menu. |
1177
+ | `.pf-c-login__main-body` | `<div>` | Creates the body of the main area. **Required** |
1178
+ | `.pf-c-login__main-body .pf-c-form` | `<form>` | Creates the login form in the main body area. **Required**|
1179
+ | `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text.pf-m-error` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden.` **Required** |
1180
+ | `.pf-c-login__main-footer` | `<footer>` | Creates the footer of the main area. **Required** |
1181
+ | `.pf-c-login__main-footer-links` | `<ul>` | Creates a list of links in the main footer. **Required** |
1182
+ | `.pf-c-login__main-footer-links-item` | `<li>` | Creates proper spacing for links in the main footer. **Required** |
1183
+ | `.pf-c-login__main-footer-links-item-link` | `<a>` | Creates link in links list in footer. **Required** |
1184
+ | `.pf-c-login__main-footer-band` | `<div>` | Styles a band in the footer. |
1185
+ | `.pf-c-login__main-footer-band-item` | `<p>` | Adds information to the band in the footer. |
1186
+ | `.pf-c-login__footer` | `<footer>` | Positions the login footer. **Required** |
1187
+ | `.pf-c-login__footer .pf-c-list` | `<ul>` | Creates a list of links in the login footer. **Required** |