@patternfly/patternfly 6.0.0-alpha.98 → 6.0.0-alpha.99

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 (166) hide show
  1. package/components/Card/card.css +1 -0
  2. package/components/Card/card.scss +1 -0
  3. package/components/Check/check.css +10 -3
  4. package/components/Check/check.scss +17 -4
  5. package/components/Masthead/masthead.css +17 -9
  6. package/components/Masthead/masthead.scss +18 -9
  7. package/components/MenuToggle/menu-toggle.css +4 -4
  8. package/components/MenuToggle/menu-toggle.scss +4 -4
  9. package/components/ModalBox/modal-box.css +11 -7
  10. package/components/ModalBox/modal-box.scss +27 -12
  11. package/components/Nav/nav.css +64 -110
  12. package/components/Nav/nav.scss +70 -143
  13. package/components/Page/page.css +9 -17
  14. package/components/Page/page.scss +10 -23
  15. package/components/Radio/radio.css +12 -5
  16. package/components/Radio/radio.scss +21 -6
  17. package/components/Table/table-grid.css +30 -35
  18. package/components/Table/table-grid.scss +44 -32
  19. package/components/Table/table-scrollable.css +14 -6
  20. package/components/Table/table-scrollable.scss +6 -1
  21. package/components/Table/table-tree-view.css +5 -5
  22. package/components/Table/table-tree-view.scss +14 -8
  23. package/components/Table/table.css +90 -254
  24. package/components/Table/table.scss +158 -347
  25. package/components/Toolbar/toolbar.css +66 -2
  26. package/components/Toolbar/toolbar.scss +21 -2
  27. package/docs/components/AboutModalBox/examples/AboutModalBox.md +12 -12
  28. package/docs/components/Accordion/examples/Accordion.md +19 -19
  29. package/docs/components/ActionList/examples/ActionList.md +5 -5
  30. package/docs/components/Alert/examples/Alert.md +26 -26
  31. package/docs/components/AppLauncher/deprecated/application-launcher.md +31 -31
  32. package/docs/components/Avatar/examples/Avatar.md +8 -8
  33. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  34. package/docs/components/Backdrop/examples/Backdrop.md +3 -3
  35. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  36. package/docs/components/Badge/examples/Badge.md +6 -6
  37. package/docs/components/Banner/examples/Banner.md +17 -17
  38. package/docs/components/Brand/examples/Brand.css +3 -3
  39. package/docs/components/Brand/examples/Brand.md +7 -7
  40. package/docs/components/Breadcrumb/examples/Breadcrumb.md +12 -12
  41. package/docs/components/Button/examples/Button.css +2 -2
  42. package/docs/components/Button/examples/Button.md +35 -35
  43. package/docs/components/CalendarMonth/examples/CalendarMonth.md +29 -29
  44. package/docs/components/Card/examples/Card.md +30 -30
  45. package/docs/components/Check/examples/Check.md +12 -12
  46. package/docs/components/Chip/examples/Chip.md +21 -21
  47. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +19 -19
  48. package/docs/components/CodeBlock/examples/CodeBlock.md +8 -8
  49. package/docs/components/CodeEditor/examples/CodeEditor.md +14 -14
  50. package/docs/components/Content/examples/Content.md +5 -5
  51. package/docs/components/ContextSelector/deprecated/context-selector.md +23 -23
  52. package/docs/components/DataList/examples/DataList.md +177 -112
  53. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  54. package/docs/components/DescriptionList/examples/DescriptionList.md +29 -29
  55. package/docs/components/Divider/examples/Divider.md +7 -7
  56. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  57. package/docs/components/Drawer/examples/Drawer.md +36 -36
  58. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  59. package/docs/components/Dropdown/deprecated/Dropdown.md +47 -47
  60. package/docs/components/DualListSelector/examples/DualListSelector.md +41 -41
  61. package/docs/components/EmptyState/examples/EmptyState.md +21 -21
  62. package/docs/components/ExpandableSection/examples/ExpandableSection.md +18 -18
  63. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  64. package/docs/components/Form/examples/Form.md +52 -52
  65. package/docs/components/FormControl/examples/FormControl.md +22 -22
  66. package/docs/components/HelperText/examples/HelperText.md +11 -11
  67. package/docs/components/Hint/examples/Hint.md +6 -6
  68. package/docs/components/Icon/examples/Icon.md +13 -13
  69. package/docs/components/InlineEdit/examples/InlineEdit.md +54 -138
  70. package/docs/components/InputGroup/examples/InputGroup.md +10 -10
  71. package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
  72. package/docs/components/Label/examples/Label.css +4 -4
  73. package/docs/components/Label/examples/Label.md +45 -45
  74. package/docs/components/List/examples/List.md +6 -6
  75. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  76. package/docs/components/LogViewer/examples/LogViewer.md +45 -165
  77. package/docs/components/Login/examples/Login.md +21 -21
  78. package/docs/components/Masthead/examples/masthead.md +7 -7
  79. package/docs/components/Menu/examples/Menu.md +60 -60
  80. package/docs/components/MenuToggle/examples/MenuToggle.md +34 -106
  81. package/docs/components/ModalBox/examples/ModalBox.md +75 -34
  82. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +21 -21
  83. package/docs/components/Nav/examples/Navigation.css +20 -3
  84. package/docs/components/Nav/examples/Navigation.md +44 -50
  85. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  86. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +36 -36
  87. package/docs/components/NumberInput/examples/NumberInput.md +13 -13
  88. package/docs/components/OptionsMenu/deprecated/options-menu.md +22 -22
  89. package/docs/components/OverflowMenu/examples/overflow-menu.md +20 -20
  90. package/docs/components/Page/deprecated/PageHeader.md +30 -30
  91. package/docs/components/Page/examples/Page.md +55 -54
  92. package/docs/components/Pagination/examples/Pagination.md +25 -25
  93. package/docs/components/Panel/examples/Panel.md +10 -10
  94. package/docs/components/Popover/examples/Popover.md +30 -30
  95. package/docs/components/Progress/examples/Progress.md +31 -31
  96. package/docs/components/ProgressStepper/examples/ProgressStepper.md +17 -17
  97. package/docs/components/Radio/examples/Radio.md +9 -9
  98. package/docs/components/Select/deprecated/Select.md +110 -110
  99. package/docs/components/Sidebar/examples/Sidebar.md +16 -16
  100. package/docs/components/SimpleList/examples/SimpleList.md +9 -9
  101. package/docs/components/Skeleton/examples/Skeleton.md +14 -14
  102. package/docs/components/SkipToContent/examples/SkipToContent.md +4 -4
  103. package/docs/components/Slider/examples/Slider.md +33 -33
  104. package/docs/components/Spinner/examples/Spinner.md +14 -14
  105. package/docs/components/Switch/examples/Switch.md +14 -14
  106. package/docs/components/TabContent/examples/TabContent.md +10 -10
  107. package/docs/components/Table/examples/Table.md +5395 -15077
  108. package/docs/components/Tabs/examples/Tabs.md +39 -39
  109. package/docs/components/TextInputGroup/examples/TextInputGroup.md +1 -1
  110. package/docs/components/Tile/examples/Tile.md +12 -12
  111. package/docs/components/Timestamp/examples/Timestamp.md +4 -4
  112. package/docs/components/Title/examples/Title.md +20 -20
  113. package/docs/components/ToggleGroup/examples/toggle-group.md +10 -10
  114. package/docs/components/Toolbar/examples/Toolbar.md +68 -200
  115. package/docs/components/Tooltip/examples/Tooltip.md +9 -9
  116. package/docs/components/TreeView/examples/TreeView.md +31 -31
  117. package/docs/components/Truncate/examples/Truncate.md +8 -8
  118. package/docs/components/Wizard/examples/Wizard.md +46 -46
  119. package/docs/demos/AboutModal/examples/AboutModal.md +4 -52
  120. package/docs/demos/Alert/examples/Alert.md +12 -156
  121. package/docs/demos/BackToTop/examples/BackToTop.md +4 -52
  122. package/docs/demos/Banner/examples/Banner.md +9 -105
  123. package/docs/demos/Card/examples/Card.md +12 -19
  124. package/docs/demos/CardView/examples/CardView.md +5 -65
  125. package/docs/demos/ContextSelector/examples/ContextSelector.md +12 -156
  126. package/docs/demos/Dashboard/examples/Dashboard.md +4 -52
  127. package/docs/demos/DataList/examples/DataList.md +200 -553
  128. package/docs/demos/DescriptionList/examples/DescriptionList.md +18 -156
  129. package/docs/demos/Drawer/examples/Drawer.md +20 -260
  130. package/docs/demos/JumpLinks/examples/JumpLinks.md +24 -312
  131. package/docs/demos/Masthead/examples/Masthead.md +23 -255
  132. package/docs/demos/Modal/examples/Modal.md +24 -312
  133. package/docs/demos/Nav/examples/Nav.md +69 -461
  134. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +20 -260
  135. package/docs/demos/Page/examples/Page.md +39 -505
  136. package/docs/demos/Page/examples/Penta.md +120 -53
  137. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +35 -455
  138. package/docs/demos/Skeleton/examples/Skeleton.md +4 -52
  139. package/docs/demos/Table/examples/Table.md +1598 -6045
  140. package/docs/demos/Tabs/examples/Tabs.md +143 -499
  141. package/docs/demos/Toolbar/examples/Toolbar.md +245 -925
  142. package/docs/demos/Wizard/examples/Wizard.md +36 -468
  143. package/docs/layouts/Bullseye/examples/Bullseye.md +3 -3
  144. package/docs/layouts/Flex/examples/Flex.md +76 -76
  145. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  146. package/docs/layouts/Grid/examples/Grid.md +8 -8
  147. package/docs/layouts/Level/examples/Level.md +4 -4
  148. package/docs/layouts/Split/examples/Split.md +6 -6
  149. package/docs/layouts/Stack/examples/Stack.md +5 -5
  150. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  151. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  152. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +10 -10
  153. package/docs/utilities/BoxShadow/examples/box-shadow.md +20 -20
  154. package/docs/utilities/Display/examples/Display.md +9 -9
  155. package/docs/utilities/Flex/examples/Flex.md +32 -32
  156. package/docs/utilities/Float/examples/Float.md +2 -2
  157. package/docs/utilities/Sizing/examples/Sizing.md +41 -41
  158. package/docs/utilities/Spacing/examples/Spacing.md +11 -11
  159. package/docs/utilities/Text/examples/Text.md +28 -28
  160. package/package.json +2 -1
  161. package/patternfly-no-globals.css +347 -463
  162. package/patternfly-theme-dark-unversioned.css +347 -463
  163. package/patternfly.css +347 -463
  164. package/patternfly.min.css +1 -1
  165. package/patternfly.min.css.map +1 -1
  166. package/components/Table/themes/dark/table.scss +0 -16
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  id: Wizard
3
3
  section: components
4
- cssPrefix: pf-v5-c-wizard
4
+ cssPrefix: pf-v6-c-wizard
5
5
  wrapperTag: div
6
6
  ---import './Wizard.css'
7
7
 
@@ -543,7 +543,7 @@ wrapperTag: div
543
543
  <div class="pf-v6-c-drawer__content">
544
544
  <div class="pf-v6-c-wizard__main-body">
545
545
  <button
546
- class="pf-v6-c-button pf-v5-u-hidden pf-m-link pf-m-inline pf-v5-u-float-right pf-v5-u-ml-md"
546
+ class="pf-v6-c-button pf-v6-u-hidden pf-m-link pf-m-inline pf-v5-u-float-right pf-v5-u-ml-md"
547
547
  type="button"
548
548
  >Open drawer</button>
549
549
  <form class="pf-v6-c-form pf-m-limit-width" novalidate>
@@ -1352,52 +1352,52 @@ wrapperTag: div
1352
1352
 
1353
1353
  | Attribute | Applied to | Outcome |
1354
1354
  | -- | -- | -- |
1355
- | `aria-expanded="true"` | `.pf-v5-c-wizard__toggle` | Indicates that the steps menu is visible. **Required** |
1356
- | `aria-expanded="false"` | `.pf-v5-c-wizard__toggle` | Indicates that the steps menu is hidden. **Required** |
1357
- | `aria-label="close"` | `.pf-v5-c-wizard__toggle-icon` | Gives the close button an accessible name. **Required** |
1358
- | `aria-hidden="true"` | `.pf-v5-c-wizard__toggle-icon`, `.pf-v5-c-wizard__toggle-divider` | Hides the icon from assistive technologies. **Required** |
1359
- | `aria-label="Steps"` | `.pf-v5-c-wizard__nav` | Gives the steps nav element an accessible name. **Required** |
1360
- | `disabled` | `button.pf-v5-c-wizard__nav-link` | Indicates that the element is disabled. **Required when a nav item is disabled** |
1361
- | `aria-disabled="true"` | `a.pf-v5-c-wizard__nav-link` | Indicates that the element is disabled. **Required for disabled links with `.pf-m-disabled`** |
1362
- | `aria-current="page"` | `.pf-v5-c-wizard__nav-link` | Indicates the current page link. Can only occur once on page. **Required for the current link** |
1363
- | `aria-expanded="true"` | `.pf-v5-c-wizard__nav-link` | Indicates that the link subnav is visible. **Required** |
1364
- | `aria-expanded="false"` | `.pf-v5-c-wizard__nav-link` | Indicates that the link subnav is hidden. **Required** |
1365
- | `tabindex="-1"` | `a.pf-v5-c-wizard__nav-link` | Removes a link from keyboard focus. **Required for disabled links with `.pf-m-disabled`** |
1366
- | `tabindex="0"` | `.pf-v5-c-wizard__main` | If the wizard main section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the section must include either a focusable element within the scrollable region or the section itself must be focusable by adding `tabindex="0"`. |
1355
+ | `aria-expanded="true"` | `.pf-v6-c-wizard__toggle` | Indicates that the steps menu is visible. **Required** |
1356
+ | `aria-expanded="false"` | `.pf-v6-c-wizard__toggle` | Indicates that the steps menu is hidden. **Required** |
1357
+ | `aria-label="close"` | `.pf-v6-c-wizard__toggle-icon` | Gives the close button an accessible name. **Required** |
1358
+ | `aria-hidden="true"` | `.pf-v6-c-wizard__toggle-icon`, `.pf-v6-c-wizard__toggle-divider` | Hides the icon from assistive technologies. **Required** |
1359
+ | `aria-label="Steps"` | `.pf-v6-c-wizard__nav` | Gives the steps nav element an accessible name. **Required** |
1360
+ | `disabled` | `button.pf-v6-c-wizard__nav-link` | Indicates that the element is disabled. **Required when a nav item is disabled** |
1361
+ | `aria-disabled="true"` | `a.pf-v6-c-wizard__nav-link` | Indicates that the element is disabled. **Required for disabled links with `.pf-m-disabled`** |
1362
+ | `aria-current="page"` | `.pf-v6-c-wizard__nav-link` | Indicates the current page link. Can only occur once on page. **Required for the current link** |
1363
+ | `aria-expanded="true"` | `.pf-v6-c-wizard__nav-link` | Indicates that the link subnav is visible. **Required** |
1364
+ | `aria-expanded="false"` | `.pf-v6-c-wizard__nav-link` | Indicates that the link subnav is hidden. **Required** |
1365
+ | `tabindex="-1"` | `a.pf-v6-c-wizard__nav-link` | Removes a link from keyboard focus. **Required for disabled links with `.pf-m-disabled`** |
1366
+ | `tabindex="0"` | `.pf-v6-c-wizard__main` | If the wizard main section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the section must include either a focusable element within the scrollable region or the section itself must be focusable by adding `tabindex="0"`. |
1367
1367
 
1368
1368
  ### Usage
1369
1369
 
1370
1370
  | Class | Applied to | Outcome |
1371
1371
  | -- | -- | -- |
1372
- | `.pf-v5-c-wizard` | `<div>` | Initiates the wizard component. **Required** |
1373
- | `.pf-v5-c-wizard__header` | `<header>` | Initiates the header. **Required** when the wizard is in a modal. Not recommended to use when the wizard is placed on a page. |
1374
- | `.pf-v5-c-wizard__close` | `<div>` | Initiates the close button. **Required** |
1375
- | `.pf-v5-c-wizard__title` | `<div>` | Initiates the title container. **Required** |
1376
- | `.pf-v5-c-wizard__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Initiates the wizard title text. |
1377
- | `.pf-v5-c-wizard__description` | `<div>`, `<p>` | Initiates the description. |
1378
- | `.pf-v5-c-wizard__toggle` | `<button>` | Initiates the mobile steps menu toggle button. **Required** |
1379
- | `.pf-v5-c-wizard__toggle-list` | `<span>` | Initiates the toggle list. **Required** |
1380
- | `.pf-v5-c-wizard__toggle-list-item` | `<span>` | Initiates a toggle list item. **Required** |
1381
- | `.pf-v5-c-wizard__toggle-num` | `<span>` | Initiates the step number. **Required** |
1382
- | `.pf-v5-c-wizard__toggle-separator` | `<i>` | Initiates the separator between steps. |
1383
- | `.pf-v5-c-wizard__toggle-icon` | `<span>` | Initiates the toggle icon wrapper. **Required** |
1384
- | `.pf-v5-c-wizard__outer-wrap` | `<div>` | Initiates the outer wrapper. **Required** |
1385
- | `.pf-v5-c-wizard__inner-wrap` | `<div>` | Initiates the inner wrapper. **Required** |
1386
- | `.pf-v5-c-wizard__nav` | `<nav>` | Initiates the steps nav. **Required** |
1387
- | `.pf-v5-c-wizard__nav-list` | `<ol>` | Initiates a list of steps. **Required** |
1388
- | `.pf-v5-c-wizard__nav-item` | `<li>` | Initiates a step list item. **Required** |
1389
- | `.pf-v5-c-wizard__nav-link` | `<a>`, `<button>` | Initiates a step link. **Required** |
1390
- | `.pf-v5-c-wizard__nav-link-text` | `<span>` | Initiates the link text container. **Required when nav item is expandable** |
1391
- | `.pf-v5-c-wizard__nav-link-toggle` | `<span>` | Initiates the toggle container. **Required when nav item is expandable** |
1392
- | `.pf-v5-c-wizard__nav-link-toggle-icon` | `<span>` | Initiates the toggle icon container. **Required when nav item is expandable** |
1393
- | `.pf-v5-c-wizard__main` | `<main>`, `<div>` | Initiates the main container. **Required** Note: use the `<main>` element when when there are no other `<main>` elements on the page.|
1394
- | `.pf-v5-c-wizard__main-body` | `<div>` | Initiates the main container body section. **Required** |
1395
- | `.pf-v5-c-wizard__footer` | `<footer>` | Initiates the footer. **Required** |
1396
- | `.pf-v5-c-wizard__footer-cancel` | `<div>` | Initiates the cancel button. **Required** |
1397
- | `.pf-m-expanded` | `.pf-v5-c-wizard__toggle`, `.pf-v5-c-wizard__nav` | Modifies the mobile steps toggle and steps menu for the expanded state. |
1398
- | `.pf-m-finished` | `.pf-v5-c-wizard` | Modifies the wizard for the finished state. |
1399
- | `.pf-m-expandable` | `.pf-v5-c-wizard__nav-item` | Modifies a nav item for the expandable state. |
1400
- | `.pf-m-expanded` | `.pf-v5-c-wizard__nav-item` | Modifies a nav item for the expanded state. |
1401
- | `.pf-m-current` | `.pf-v5-c-wizard__nav-link` | Modifies a step link for the current state. **Required** |
1402
- | `.pf-m-disabled` | `.pf-v5-c-wizard__nav-link` | Modifies a step link for the disabled state. |
1403
- | `.pf-m-no-padding` | `.pf-v5-c-wizard__main-body` | Modifies the main container body to remove the padding. |
1372
+ | `.pf-v6-c-wizard` | `<div>` | Initiates the wizard component. **Required** |
1373
+ | `.pf-v6-c-wizard__header` | `<header>` | Initiates the header. **Required** when the wizard is in a modal. Not recommended to use when the wizard is placed on a page. |
1374
+ | `.pf-v6-c-wizard__close` | `<div>` | Initiates the close button. **Required** |
1375
+ | `.pf-v6-c-wizard__title` | `<div>` | Initiates the title container. **Required** |
1376
+ | `.pf-v6-c-wizard__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Initiates the wizard title text. |
1377
+ | `.pf-v6-c-wizard__description` | `<div>`, `<p>` | Initiates the description. |
1378
+ | `.pf-v6-c-wizard__toggle` | `<button>` | Initiates the mobile steps menu toggle button. **Required** |
1379
+ | `.pf-v6-c-wizard__toggle-list` | `<span>` | Initiates the toggle list. **Required** |
1380
+ | `.pf-v6-c-wizard__toggle-list-item` | `<span>` | Initiates a toggle list item. **Required** |
1381
+ | `.pf-v6-c-wizard__toggle-num` | `<span>` | Initiates the step number. **Required** |
1382
+ | `.pf-v6-c-wizard__toggle-separator` | `<i>` | Initiates the separator between steps. |
1383
+ | `.pf-v6-c-wizard__toggle-icon` | `<span>` | Initiates the toggle icon wrapper. **Required** |
1384
+ | `.pf-v6-c-wizard__outer-wrap` | `<div>` | Initiates the outer wrapper. **Required** |
1385
+ | `.pf-v6-c-wizard__inner-wrap` | `<div>` | Initiates the inner wrapper. **Required** |
1386
+ | `.pf-v6-c-wizard__nav` | `<nav>` | Initiates the steps nav. **Required** |
1387
+ | `.pf-v6-c-wizard__nav-list` | `<ol>` | Initiates a list of steps. **Required** |
1388
+ | `.pf-v6-c-wizard__nav-item` | `<li>` | Initiates a step list item. **Required** |
1389
+ | `.pf-v6-c-wizard__nav-link` | `<a>`, `<button>` | Initiates a step link. **Required** |
1390
+ | `.pf-v6-c-wizard__nav-link-text` | `<span>` | Initiates the link text container. **Required when nav item is expandable** |
1391
+ | `.pf-v6-c-wizard__nav-link-toggle` | `<span>` | Initiates the toggle container. **Required when nav item is expandable** |
1392
+ | `.pf-v6-c-wizard__nav-link-toggle-icon` | `<span>` | Initiates the toggle icon container. **Required when nav item is expandable** |
1393
+ | `.pf-v6-c-wizard__main` | `<main>`, `<div>` | Initiates the main container. **Required** Note: use the `<main>` element when when there are no other `<main>` elements on the page.|
1394
+ | `.pf-v6-c-wizard__main-body` | `<div>` | Initiates the main container body section. **Required** |
1395
+ | `.pf-v6-c-wizard__footer` | `<footer>` | Initiates the footer. **Required** |
1396
+ | `.pf-v6-c-wizard__footer-cancel` | `<div>` | Initiates the cancel button. **Required** |
1397
+ | `.pf-m-expanded` | `.pf-v6-c-wizard__toggle`, `.pf-v6-c-wizard__nav` | Modifies the mobile steps toggle and steps menu for the expanded state. |
1398
+ | `.pf-m-finished` | `.pf-v6-c-wizard` | Modifies the wizard for the finished state. |
1399
+ | `.pf-m-expandable` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expandable state. |
1400
+ | `.pf-m-expanded` | `.pf-v6-c-wizard__nav-item` | Modifies a nav item for the expanded state. |
1401
+ | `.pf-m-current` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the current state. **Required** |
1402
+ | `.pf-m-disabled` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the disabled state. |
1403
+ | `.pf-m-no-padding` | `.pf-v6-c-wizard__main-body` | Modifies the main container body to remove the padding. |
package/docs/demos/AboutModal/examples/AboutModal.md CHANGED
@@ -150,19 +150,7 @@ This demo implements the about modal, including the backdrop.
150
150
  aria-label="Application launcher"
151
151
  >
152
152
  <span class="pf-v6-c-menu-toggle__icon">
153
- <svg
154
- class="pf-v5-svg"
155
- viewBox="0 0 192 512"
156
- fill="currentColor"
157
- aria-hidden="true"
158
- role="img"
159
- width="1em"
160
- height="1em"
161
- >
162
- <path
163
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
164
- />
165
- </svg>
153
+ <i class="fas fa-th" aria-hidden="true"></i>
166
154
  </span>
167
155
  </button>
168
156
  </div>
@@ -174,19 +162,7 @@ This demo implements the about modal, including the backdrop.
174
162
  aria-label="Settings"
175
163
  >
176
164
  <span class="pf-v6-c-menu-toggle__icon">
177
- <svg
178
- class="pf-v5-svg"
179
- viewBox="0 0 192 512"
180
- fill="currentColor"
181
- aria-hidden="true"
182
- role="img"
183
- width="1em"
184
- height="1em"
185
- >
186
- <path
187
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
188
- />
189
- </svg>
165
+ <i class="fas fa-cog" aria-hidden="true"></i>
190
166
  </span>
191
167
  </button>
192
168
  </div>
@@ -198,19 +174,7 @@ This demo implements the about modal, including the backdrop.
198
174
  aria-label="Help"
199
175
  >
200
176
  <span class="pf-v6-c-menu-toggle__icon">
201
- <svg
202
- class="pf-v5-svg"
203
- viewBox="0 0 192 512"
204
- fill="currentColor"
205
- aria-hidden="true"
206
- role="img"
207
- width="1em"
208
- height="1em"
209
- >
210
- <path
211
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
212
- />
213
- </svg>
177
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
214
178
  </span>
215
179
  </button>
216
180
  </div>
@@ -223,19 +187,7 @@ This demo implements the about modal, including the backdrop.
223
187
  aria-label="Actions"
224
188
  >
225
189
  <span class="pf-v6-c-menu-toggle__icon">
226
- <svg
227
- class="pf-v5-svg"
228
- viewBox="0 0 192 512"
229
- fill="currentColor"
230
- aria-hidden="true"
231
- role="img"
232
- width="1em"
233
- height="1em"
234
- >
235
- <path
236
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
237
- />
238
- </svg>
190
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
239
191
  </span>
240
192
  </button>
241
193
  </div>
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -148,19 +148,7 @@ section: components
148
148
  aria-label="Application launcher"
149
149
  >
150
150
  <span class="pf-v6-c-menu-toggle__icon">
151
- <svg
152
- class="pf-v5-svg"
153
- viewBox="0 0 192 512"
154
- fill="currentColor"
155
- aria-hidden="true"
156
- role="img"
157
- width="1em"
158
- height="1em"
159
- >
160
- <path
161
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
162
- />
163
- </svg>
151
+ <i class="fas fa-th" aria-hidden="true"></i>
164
152
  </span>
165
153
  </button>
166
154
  </div>
@@ -172,19 +160,7 @@ section: components
172
160
  aria-label="Settings"
173
161
  >
174
162
  <span class="pf-v6-c-menu-toggle__icon">
175
- <svg
176
- class="pf-v5-svg"
177
- viewBox="0 0 192 512"
178
- fill="currentColor"
179
- aria-hidden="true"
180
- role="img"
181
- width="1em"
182
- height="1em"
183
- >
184
- <path
185
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
186
- />
187
- </svg>
163
+ <i class="fas fa-cog" aria-hidden="true"></i>
188
164
  </span>
189
165
  </button>
190
166
  </div>
@@ -196,19 +172,7 @@ section: components
196
172
  aria-label="Help"
197
173
  >
198
174
  <span class="pf-v6-c-menu-toggle__icon">
199
- <svg
200
- class="pf-v5-svg"
201
- viewBox="0 0 192 512"
202
- fill="currentColor"
203
- aria-hidden="true"
204
- role="img"
205
- width="1em"
206
- height="1em"
207
- >
208
- <path
209
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
210
- />
211
- </svg>
175
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
212
176
  </span>
213
177
  </button>
214
178
  </div>
@@ -221,19 +185,7 @@ section: components
221
185
  aria-label="Actions"
222
186
  >
223
187
  <span class="pf-v6-c-menu-toggle__icon">
224
- <svg
225
- class="pf-v5-svg"
226
- viewBox="0 0 192 512"
227
- fill="currentColor"
228
- aria-hidden="true"
229
- role="img"
230
- width="1em"
231
- height="1em"
232
- >
233
- <path
234
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
235
- />
236
- </svg>
188
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
237
189
  </span>
238
190
  </button>
239
191
  </div>
@@ -580,19 +532,7 @@ section: components
580
532
  aria-label="Application launcher"
581
533
  >
582
534
  <span class="pf-v6-c-menu-toggle__icon">
583
- <svg
584
- class="pf-v5-svg"
585
- viewBox="0 0 192 512"
586
- fill="currentColor"
587
- aria-hidden="true"
588
- role="img"
589
- width="1em"
590
- height="1em"
591
- >
592
- <path
593
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
594
- />
595
- </svg>
535
+ <i class="fas fa-th" aria-hidden="true"></i>
596
536
  </span>
597
537
  </button>
598
538
  </div>
@@ -604,19 +544,7 @@ section: components
604
544
  aria-label="Settings"
605
545
  >
606
546
  <span class="pf-v6-c-menu-toggle__icon">
607
- <svg
608
- class="pf-v5-svg"
609
- viewBox="0 0 192 512"
610
- fill="currentColor"
611
- aria-hidden="true"
612
- role="img"
613
- width="1em"
614
- height="1em"
615
- >
616
- <path
617
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
618
- />
619
- </svg>
547
+ <i class="fas fa-cog" aria-hidden="true"></i>
620
548
  </span>
621
549
  </button>
622
550
  </div>
@@ -628,19 +556,7 @@ section: components
628
556
  aria-label="Help"
629
557
  >
630
558
  <span class="pf-v6-c-menu-toggle__icon">
631
- <svg
632
- class="pf-v5-svg"
633
- viewBox="0 0 192 512"
634
- fill="currentColor"
635
- aria-hidden="true"
636
- role="img"
637
- width="1em"
638
- height="1em"
639
- >
640
- <path
641
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
642
- />
643
- </svg>
559
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
644
560
  </span>
645
561
  </button>
646
562
  </div>
@@ -653,19 +569,7 @@ section: components
653
569
  aria-label="Actions"
654
570
  >
655
571
  <span class="pf-v6-c-menu-toggle__icon">
656
- <svg
657
- class="pf-v5-svg"
658
- viewBox="0 0 192 512"
659
- fill="currentColor"
660
- aria-hidden="true"
661
- role="img"
662
- width="1em"
663
- height="1em"
664
- >
665
- <path
666
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
667
- />
668
- </svg>
572
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
669
573
  </span>
670
574
  </button>
671
575
  </div>
@@ -1105,19 +1009,7 @@ section: components
1105
1009
  aria-label="Application launcher"
1106
1010
  >
1107
1011
  <span class="pf-v6-c-menu-toggle__icon">
1108
- <svg
1109
- class="pf-v5-svg"
1110
- viewBox="0 0 192 512"
1111
- fill="currentColor"
1112
- aria-hidden="true"
1113
- role="img"
1114
- width="1em"
1115
- height="1em"
1116
- >
1117
- <path
1118
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
1119
- />
1120
- </svg>
1012
+ <i class="fas fa-th" aria-hidden="true"></i>
1121
1013
  </span>
1122
1014
  </button>
1123
1015
  </div>
@@ -1129,19 +1021,7 @@ section: components
1129
1021
  aria-label="Settings"
1130
1022
  >
1131
1023
  <span class="pf-v6-c-menu-toggle__icon">
1132
- <svg
1133
- class="pf-v5-svg"
1134
- viewBox="0 0 192 512"
1135
- fill="currentColor"
1136
- aria-hidden="true"
1137
- role="img"
1138
- width="1em"
1139
- height="1em"
1140
- >
1141
- <path
1142
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
1143
- />
1144
- </svg>
1024
+ <i class="fas fa-cog" aria-hidden="true"></i>
1145
1025
  </span>
1146
1026
  </button>
1147
1027
  </div>
@@ -1153,19 +1033,7 @@ section: components
1153
1033
  aria-label="Help"
1154
1034
  >
1155
1035
  <span class="pf-v6-c-menu-toggle__icon">
1156
- <svg
1157
- class="pf-v5-svg"
1158
- viewBox="0 0 192 512"
1159
- fill="currentColor"
1160
- aria-hidden="true"
1161
- role="img"
1162
- width="1em"
1163
- height="1em"
1164
- >
1165
- <path
1166
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
1167
- />
1168
- </svg>
1036
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1169
1037
  </span>
1170
1038
  </button>
1171
1039
  </div>
@@ -1178,19 +1046,7 @@ section: components
1178
1046
  aria-label="Actions"
1179
1047
  >
1180
1048
  <span class="pf-v6-c-menu-toggle__icon">
1181
- <svg
1182
- class="pf-v5-svg"
1183
- viewBox="0 0 192 512"
1184
- fill="currentColor"
1185
- aria-hidden="true"
1186
- role="img"
1187
- width="1em"
1188
- height="1em"
1189
- >
1190
- <path
1191
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
1192
- />
1193
- </svg>
1049
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1194
1050
  </span>
1195
1051
  </button>
1196
1052
  </div>
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -149,19 +149,7 @@ cssPrefix: pf-d-back-to-top
149
149
  aria-label="Application launcher"
150
150
  >
151
151
  <span class="pf-v6-c-menu-toggle__icon">
152
- <svg
153
- class="pf-v5-svg"
154
- viewBox="0 0 192 512"
155
- fill="currentColor"
156
- aria-hidden="true"
157
- role="img"
158
- width="1em"
159
- height="1em"
160
- >
161
- <path
162
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
163
- />
164
- </svg>
152
+ <i class="fas fa-th" aria-hidden="true"></i>
165
153
  </span>
166
154
  </button>
167
155
  </div>
@@ -173,19 +161,7 @@ cssPrefix: pf-d-back-to-top
173
161
  aria-label="Settings"
174
162
  >
175
163
  <span class="pf-v6-c-menu-toggle__icon">
176
- <svg
177
- class="pf-v5-svg"
178
- viewBox="0 0 192 512"
179
- fill="currentColor"
180
- aria-hidden="true"
181
- role="img"
182
- width="1em"
183
- height="1em"
184
- >
185
- <path
186
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
187
- />
188
- </svg>
164
+ <i class="fas fa-cog" aria-hidden="true"></i>
189
165
  </span>
190
166
  </button>
191
167
  </div>
@@ -197,19 +173,7 @@ cssPrefix: pf-d-back-to-top
197
173
  aria-label="Help"
198
174
  >
199
175
  <span class="pf-v6-c-menu-toggle__icon">
200
- <svg
201
- class="pf-v5-svg"
202
- viewBox="0 0 192 512"
203
- fill="currentColor"
204
- aria-hidden="true"
205
- role="img"
206
- width="1em"
207
- height="1em"
208
- >
209
- <path
210
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
211
- />
212
- </svg>
176
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
213
177
  </span>
214
178
  </button>
215
179
  </div>
@@ -222,19 +186,7 @@ cssPrefix: pf-d-back-to-top
222
186
  aria-label="Actions"
223
187
  >
224
188
  <span class="pf-v6-c-menu-toggle__icon">
225
- <svg
226
- class="pf-v5-svg"
227
- viewBox="0 0 192 512"
228
- fill="currentColor"
229
- aria-hidden="true"
230
- role="img"
231
- width="1em"
232
- height="1em"
233
- >
234
- <path
235
- d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
236
- />
237
- </svg>
189
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
238
190
  </span>
239
191
  </button>
240
192
  </div>