@patternfly/patternfly 6.0.0-alpha.97 → 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 (153) 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 +20 -6
  8. package/components/MenuToggle/menu-toggle.scss +32 -6
  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 +35 -35
  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 +106 -22
  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 +57 -57
  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/Banner/examples/Banner.md +1 -1
  120. package/docs/demos/Card/examples/Card.md +12 -19
  121. package/docs/demos/DataList/examples/DataList.md +179 -280
  122. package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -0
  123. package/docs/demos/Masthead/examples/Masthead.md +4 -8
  124. package/docs/demos/Nav/examples/Nav.md +45 -149
  125. package/docs/demos/Page/examples/Page.md +3 -37
  126. package/docs/demos/Page/examples/Penta.md +119 -40
  127. package/docs/demos/Table/examples/Table.md +1531 -4970
  128. package/docs/demos/Tabs/examples/Tabs.md +118 -174
  129. package/docs/demos/Toolbar/examples/Toolbar.md +220 -600
  130. package/docs/layouts/Bullseye/examples/Bullseye.md +3 -3
  131. package/docs/layouts/Flex/examples/Flex.md +76 -76
  132. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  133. package/docs/layouts/Grid/examples/Grid.md +8 -8
  134. package/docs/layouts/Level/examples/Level.md +4 -4
  135. package/docs/layouts/Split/examples/Split.md +6 -6
  136. package/docs/layouts/Stack/examples/Stack.md +5 -5
  137. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  138. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  139. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +10 -10
  140. package/docs/utilities/BoxShadow/examples/box-shadow.md +20 -20
  141. package/docs/utilities/Display/examples/Display.md +9 -9
  142. package/docs/utilities/Flex/examples/Flex.md +32 -32
  143. package/docs/utilities/Float/examples/Float.md +2 -2
  144. package/docs/utilities/Sizing/examples/Sizing.md +41 -41
  145. package/docs/utilities/Spacing/examples/Spacing.md +11 -11
  146. package/docs/utilities/Text/examples/Text.md +28 -28
  147. package/package.json +2 -1
  148. package/patternfly-no-globals.css +363 -465
  149. package/patternfly-theme-dark-unversioned.css +363 -465
  150. package/patternfly.css +363 -465
  151. package/patternfly.min.css +1 -1
  152. package/patternfly.min.css.map +1 -1
  153. package/components/Table/themes/dark/table.scss +0 -16
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  id: Popover
3
3
  section: components
4
- cssPrefix: pf-v5-c-popover
4
+ cssPrefix: pf-v6-c-popover
5
5
  ---import './Popover.css'
6
6
 
7
7
  ## Examples
@@ -646,37 +646,37 @@ A popover is used to provide contextual information for another component on cli
646
646
 
647
647
  | Attribute | Applies to | Outcome |
648
648
  | -- | -- | -- |
649
- | `role="dialog"` | `.pf-v5-c-popover` | Identifies the element that serves as the popover container. **Required** |
650
- | `aria-labelledby="[id value of .pf-v5-c-title]"` | `.pf-v5-c-popover` | Gives the popover an accessible name by referring to the element that provides the dialog title. **Required when .pf-v5-c-title is present** |
651
- | `aria-label="[title of popover]"` | `.pf-v5-c-popover` | Gives the popover an accessible name. **Required when .pf-v5-c-title is *not* present** |
652
- | `aria-describedby="[id value of applicable content]"` | `.pf-v5-c-popover` | Gives the popover an accessible description by referring to the popover content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the popover. |
653
- | `aria-modal="true"` | `.pf-v5-c-popover` | Tells assistive technologies that the windows underneath the current popover are not available for interaction. **Required**|
654
- | `aria-label="Close"` | `.pf-v5-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required**|
655
- | `aria-hidden="true"` | Parent element containing the page contents when the popover is open. | Hides main contents of the page from screen readers. The element with `.pf-v5-c-popover` must not be a descendent of the element with `aria-hidden="true"`. For more info, see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
656
- | `.pf-v5-screen-reader` | `.pf-v5-c-popover__title-text <span>` | Adds text to be read saying the alert status before the title. If `.pf-v5-c-popover__title-text` is not used to create a title, this must be added within the title. **Required for popovers that are alerts** |
649
+ | `role="dialog"` | `.pf-v6-c-popover` | Identifies the element that serves as the popover container. **Required** |
650
+ | `aria-labelledby="[id value of .pf-v6-c-title]"` | `.pf-v6-c-popover` | Gives the popover an accessible name by referring to the element that provides the dialog title. **Required when .pf-v6-c-title is present** |
651
+ | `aria-label="[title of popover]"` | `.pf-v6-c-popover` | Gives the popover an accessible name. **Required when .pf-v6-c-title is *not* present** |
652
+ | `aria-describedby="[id value of applicable content]"` | `.pf-v6-c-popover` | Gives the popover an accessible description by referring to the popover content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the popover. |
653
+ | `aria-modal="true"` | `.pf-v6-c-popover` | Tells assistive technologies that the windows underneath the current popover are not available for interaction. **Required**|
654
+ | `aria-label="Close"` | `.pf-v6-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required**|
655
+ | `aria-hidden="true"` | Parent element containing the page contents when the popover is open. | Hides main contents of the page from screen readers. The element with `.pf-v6-c-popover` must not be a descendent of the element with `aria-hidden="true"`. For more info, see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
656
+ | `.pf-v6-screen-reader` | `.pf-v6-c-popover__title-text <span>` | Adds text to be read saying the alert status before the title. If `.pf-v6-c-popover__title-text` is not used to create a title, this must be added within the title. **Required for popovers that are alerts** |
657
657
 
658
658
  ### Usage
659
659
 
660
660
  | Class | Applied to | Outcome |
661
661
  | -- | -- | -- |
662
- | `.pf-v5-c-popover` | `<div>` | Creates a popover. Always use it with a modifier class that positions the popover relative to the element that triggered it. **Required** |
663
- | `.pf-v5-c-popover__arrow` | `<div>` | Creates an arrow pointing towards the element the popover describes. **Required** |
664
- | `.pf-v5-c-popover__content` | `<div>` | Creates the content area of the popover. **Required** |
665
- | `.pf-v5-c-popover__close` | `<div>` | Positions the close icon in the top-right corner of the popover. **Required if there is a close button** |
666
- | `.pf-v5-c-popover__header` | `<header>` | Creates the popover header. **Required if there is a title**|
667
- | `.pf-v5-c-popover__title` | `<div>` | Creates the popover title. |
668
- | `.pf-v5-c-popover__title-icon` | `<span>` | Creates the popover title icon. |
669
- | `.pf-v5-c-popover__title-text` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`,`<span>` | Creates the popover title text. |
670
- | `.pf-v5-c-popover__body` | `<div>` | The popover's body text. **Required** |
671
- | `.pf-v5-c-popover__footer` | `<footer>` | Initiates a popover footer. |
672
- | `.pf-m-left{-top/bottom}` | `.pf-v5-c-popover` | Positions the popover to the left (or left top/left bottom) of the element. |
673
- | `.pf-m-right{-top/bottom}` | `.pf-v5-c-popover` | Positions the popover to the right (or right top/right bottom) of the element. |
674
- | `.pf-m-top{-left/right}` | `.pf-v5-c-popover` | Positions the popover to the top (or top left/top right) of the element. |
675
- | `.pf-m-bottom{-left/right}` | `.pf-v5-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
676
- | `.pf-m-no-padding` | `.pf-v5-c-popover` | Removes the outer padding from the popover content. |
677
- | `.pf-m-width-auto` | `.pf-v5-c-popover` | Allows popover width to be defined by the popover content. |
678
- | `.pf-m-custom` | `.pf-v5-c-popover` | Modifies for the custom alert state. |
679
- | `.pf-m-info` | `.pf-v5-c-popover` | Modifies for the info alert state. |
680
- | `.pf-m-success` | `.pf-v5-c-popover` | Modifies for the success alert state. |
681
- | `.pf-m-warning` | `.pf-v5-c-popover` | Modifies for the warning alert state. |
682
- | `.pf-m-danger` | `.pf-v5-c-popover` | Modifies for the danger alert state. |
662
+ | `.pf-v6-c-popover` | `<div>` | Creates a popover. Always use it with a modifier class that positions the popover relative to the element that triggered it. **Required** |
663
+ | `.pf-v6-c-popover__arrow` | `<div>` | Creates an arrow pointing towards the element the popover describes. **Required** |
664
+ | `.pf-v6-c-popover__content` | `<div>` | Creates the content area of the popover. **Required** |
665
+ | `.pf-v6-c-popover__close` | `<div>` | Positions the close icon in the top-right corner of the popover. **Required if there is a close button** |
666
+ | `.pf-v6-c-popover__header` | `<header>` | Creates the popover header. **Required if there is a title**|
667
+ | `.pf-v6-c-popover__title` | `<div>` | Creates the popover title. |
668
+ | `.pf-v6-c-popover__title-icon` | `<span>` | Creates the popover title icon. |
669
+ | `.pf-v6-c-popover__title-text` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`,`<span>` | Creates the popover title text. |
670
+ | `.pf-v6-c-popover__body` | `<div>` | The popover's body text. **Required** |
671
+ | `.pf-v6-c-popover__footer` | `<footer>` | Initiates a popover footer. |
672
+ | `.pf-m-left{-top/bottom}` | `.pf-v6-c-popover` | Positions the popover to the left (or left top/left bottom) of the element. |
673
+ | `.pf-m-right{-top/bottom}` | `.pf-v6-c-popover` | Positions the popover to the right (or right top/right bottom) of the element. |
674
+ | `.pf-m-top{-left/right}` | `.pf-v6-c-popover` | Positions the popover to the top (or top left/top right) of the element. |
675
+ | `.pf-m-bottom{-left/right}` | `.pf-v6-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
676
+ | `.pf-m-no-padding` | `.pf-v6-c-popover` | Removes the outer padding from the popover content. |
677
+ | `.pf-m-width-auto` | `.pf-v6-c-popover` | Allows popover width to be defined by the popover content. |
678
+ | `.pf-m-custom` | `.pf-v6-c-popover` | Modifies for the custom alert state. |
679
+ | `.pf-m-info` | `.pf-v6-c-popover` | Modifies for the info alert state. |
680
+ | `.pf-m-success` | `.pf-v6-c-popover` | Modifies for the success alert state. |
681
+ | `.pf-m-warning` | `.pf-v6-c-popover` | Modifies for the warning alert state. |
682
+ | `.pf-m-danger` | `.pf-v6-c-popover` | Modifies for the danger alert state. |
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  id: Progress
3
3
  section: components
4
- cssPrefix: pf-v5-c-progress
4
+ cssPrefix: pf-v6-c-progress
5
5
  ---## Examples
6
6
 
7
7
  ### Simple
@@ -378,7 +378,7 @@ cssPrefix: pf-v5-c-progress
378
378
  <div
379
379
  class="pf-v6-c-progress pf-m-outside pf-m-lg"
380
380
  id="progress-outside-static-width-4-example"
381
- style="--pf-v5-c-progress__measure--m-static-width--MinWidth: 6ch;"
381
+ style="--pf-v6-c-progress__measure--m-static-width--MinWidth: 6ch;"
382
382
  >
383
383
  <div class="pf-v6-c-progress__status" aria-hidden="true">
384
384
  <span class="pf-v6-c-progress__measure pf-m-static-width">1,000</span>
@@ -399,7 +399,7 @@ cssPrefix: pf-v5-c-progress
399
399
  <div
400
400
  class="pf-v6-c-progress pf-m-outside pf-m-lg"
401
401
  id="progress-outside-static-width-5-example"
402
- style="--pf-v5-c-progress__measure--m-static-width--MinWidth: 6ch;"
402
+ style="--pf-v6-c-progress__measure--m-static-width--MinWidth: 6ch;"
403
403
  >
404
404
  <div class="pf-v6-c-progress__status" aria-hidden="true">
405
405
  <span class="pf-v6-c-progress__measure pf-m-static-width">50,000</span>
@@ -420,7 +420,7 @@ cssPrefix: pf-v5-c-progress
420
420
  <div
421
421
  class="pf-v6-c-progress pf-m-outside pf-m-lg"
422
422
  id="progress-outside-static-width-6-example"
423
- style="--pf-v5-c-progress__measure--m-static-width--MinWidth: 6ch;"
423
+ style="--pf-v6-c-progress__measure--m-static-width--MinWidth: 6ch;"
424
424
  >
425
425
  <div class="pf-v6-c-progress__status" aria-hidden="true">
426
426
  <span class="pf-v6-c-progress__measure pf-m-static-width">100,000</span>
@@ -635,35 +635,35 @@ If this component is describing the loading progress of a particular region of a
635
635
 
636
636
  | Attribute | Applied to | Outcome |
637
637
  | -- | -- | -- |
638
- | `role="progressbar"` | `.pf-v5-c-progress__bar` | This role is used for an element that displays the progress status for a task that takes a long time or consists of several steps. |
639
- | `aria-valuenow=""` | `.pf-v5-c-progress__bar` | This value needs to be updated as progress continues. |
640
- | `aria-valuemin="0"` | `.pf-v5-c-progress__bar` | The minimum value for the progress bar. |
641
- | `aria-valuemax="100"` | `.pf-v5-c-progress__bar` | The maximum value for the progress bar. If the progress is only defined using `aria-valuenow` (e.g a percentage), the value should be set to "100". If the progress is defined using `aria-valuetext`, then this value can be a number other than 100. For example, if `aria-valuetext` is "2 of 5 units", then `aria-valuemax` can be "5" and `aria-valuenow` can be "2". |
642
- | `aria-label="[id of .pf-v5-c-progress__description]"` | `.pf-v5-c-progress__bar` | Provides an accessible name for the progress component. |
643
- | `aria-labelledby="[id element that labels the progress]"` | `.pf-v5-c-progress__bar` | Provides an accessible name for the progress component. |
644
- | `aria-describedby="[id of element that describes the progress]"` | `.pf-v5-c-progress__bar` | Provides an accessible description for the progress component. |
645
- | `aria-valuetext="[loading state]"` | `.pf-v5-c-progress__bar` | Provide a text string that communicates current status. Only use if the important information about status is included in the text string. Do not use if percentage is the most important value to communicate. Some screen readers will ignore the percentage value determined from `aria-valuenow` when `aria-valuetext` is used. |
646
- | `aria-hidden="true"` | `.pf-v5-c-progress__status` | Hides the visible progress bar status from screen readers. This information is communicated by the aria attributes defined on the `.pf-v5-c-progress__bar` element. |
638
+ | `role="progressbar"` | `.pf-v6-c-progress__bar` | This role is used for an element that displays the progress status for a task that takes a long time or consists of several steps. |
639
+ | `aria-valuenow=""` | `.pf-v6-c-progress__bar` | This value needs to be updated as progress continues. |
640
+ | `aria-valuemin="0"` | `.pf-v6-c-progress__bar` | The minimum value for the progress bar. |
641
+ | `aria-valuemax="100"` | `.pf-v6-c-progress__bar` | The maximum value for the progress bar. If the progress is only defined using `aria-valuenow` (e.g a percentage), the value should be set to "100". If the progress is defined using `aria-valuetext`, then this value can be a number other than 100. For example, if `aria-valuetext` is "2 of 5 units", then `aria-valuemax` can be "5" and `aria-valuenow` can be "2". |
642
+ | `aria-label="[id of .pf-v6-c-progress__description]"` | `.pf-v6-c-progress__bar` | Provides an accessible name for the progress component. |
643
+ | `aria-labelledby="[id element that labels the progress]"` | `.pf-v6-c-progress__bar` | Provides an accessible name for the progress component. |
644
+ | `aria-describedby="[id of element that describes the progress]"` | `.pf-v6-c-progress__bar` | Provides an accessible description for the progress component. |
645
+ | `aria-valuetext="[loading state]"` | `.pf-v6-c-progress__bar` | Provide a text string that communicates current status. Only use if the important information about status is included in the text string. Do not use if percentage is the most important value to communicate. Some screen readers will ignore the percentage value determined from `aria-valuenow` when `aria-valuetext` is used. |
646
+ | `aria-hidden="true"` | `.pf-v6-c-progress__status` | Hides the visible progress bar status from screen readers. This information is communicated by the aria attributes defined on the `.pf-v6-c-progress__bar` element. |
647
647
 
648
648
  ### Usage
649
649
 
650
650
  | Class | Applied to | Outcome |
651
651
  | -- | -- | -- |
652
- | `.pf-v5-c-progress` | `<div>` | Initiates a progress component. |
653
- | `.pf-v5-c-progress__description` | `<div>` | The description for a progress bar. |
654
- | `.pf-v5-c-progress__status` | `<div>` | Displays the % of progress and status icons. |
655
- | `.pf-v5-c-progress__measure` | `<span>` | Displays the % complete. |
656
- | `.pf-v5-c-progress__status-icon` | `<span>` | Displays the status icon. (optional) |
657
- | `.pf-v5-c-progress__bar` | `<div>` | Displays across the entire width and represents the completed state. |
658
- | `.pf-v5-c-progress__indicator` | `<div>` | Displays with the `.pf-v5-c-progress__bar` to indicate the progress so far. |
659
- | `.pf-v5-c-progress__helper-text` | `<div>` | Displays additional text below the progress bar. (optional) |
660
- | `.pf-m-lg` | `.pf-v5-c-progress` | Modifies the progress bar to be larger. |
661
- | `.pf-m-sm` | `.pf-v5-c-progress` | Modifies the progress bar to be smaller. |
662
- | `.pf-m-inside` | `.pf-v5-c-progress` | Shows the measure within the progress indicator. NOTE: This option requires `.pf-m-lg`.|
663
- | `.pf-m-outside` | `.pf-v5-c-progress` | Shows the measure and status icon to the right of the progress bar. |
664
- | `.pf-m-singleline` | `.pf-v5-c-progress` | Modifies the progress component to exist on one row. If a measure is needed, use with `.pf-m-inside` or `.pf-m-outside`|
665
- | `.pf-m-success` | `.pf-v5-c-progress` | Changes the appearance of the progess component to indicate a success state. |
666
- | `.pf-m-warning` | `.pf-v5-c-progress` | Changes the appearance of the progess component to indicate a warning state. |
667
- | `.pf-m-danger` | `.pf-v5-c-progress` | Changes the appearance of the progess component to indicate a danger (failure) state. |
668
- | `.pf-m-truncate` | `.pf-v5-c-progress__description` | Modifies the description to display a single line and truncate any overflow text with ellipses. |
669
- | `.pf-m-static-width` | `.pf-v5-c-progress.pf-m-outside .pf-v5-c-progress__measure` | Modifies the measure element to have a static `min-width` that will hold 0-100%. Overridable by setting `--pf-v5-c-progress__measure--m-static-width--MinWidth`. |
652
+ | `.pf-v6-c-progress` | `<div>` | Initiates a progress component. |
653
+ | `.pf-v6-c-progress__description` | `<div>` | The description for a progress bar. |
654
+ | `.pf-v6-c-progress__status` | `<div>` | Displays the % of progress and status icons. |
655
+ | `.pf-v6-c-progress__measure` | `<span>` | Displays the % complete. |
656
+ | `.pf-v6-c-progress__status-icon` | `<span>` | Displays the status icon. (optional) |
657
+ | `.pf-v6-c-progress__bar` | `<div>` | Displays across the entire width and represents the completed state. |
658
+ | `.pf-v6-c-progress__indicator` | `<div>` | Displays with the `.pf-v6-c-progress__bar` to indicate the progress so far. |
659
+ | `.pf-v6-c-progress__helper-text` | `<div>` | Displays additional text below the progress bar. (optional) |
660
+ | `.pf-m-lg` | `.pf-v6-c-progress` | Modifies the progress bar to be larger. |
661
+ | `.pf-m-sm` | `.pf-v6-c-progress` | Modifies the progress bar to be smaller. |
662
+ | `.pf-m-inside` | `.pf-v6-c-progress` | Shows the measure within the progress indicator. NOTE: This option requires `.pf-m-lg`.|
663
+ | `.pf-m-outside` | `.pf-v6-c-progress` | Shows the measure and status icon to the right of the progress bar. |
664
+ | `.pf-m-singleline` | `.pf-v6-c-progress` | Modifies the progress component to exist on one row. If a measure is needed, use with `.pf-m-inside` or `.pf-m-outside`|
665
+ | `.pf-m-success` | `.pf-v6-c-progress` | Changes the appearance of the progess component to indicate a success state. |
666
+ | `.pf-m-warning` | `.pf-v6-c-progress` | Changes the appearance of the progess component to indicate a warning state. |
667
+ | `.pf-m-danger` | `.pf-v6-c-progress` | Changes the appearance of the progess component to indicate a danger (failure) state. |
668
+ | `.pf-m-truncate` | `.pf-v6-c-progress__description` | Modifies the description to display a single line and truncate any overflow text with ellipses. |
669
+ | `.pf-m-static-width` | `.pf-v6-c-progress.pf-m-outside .pf-v6-c-progress__measure` | Modifies the measure element to have a static `min-width` that will hold 0-100%. Overridable by setting `--pf-v6-c-progress__measure--m-static-width--MinWidth`. |
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  id: 'Progress stepper'
3
3
  section: components
4
- cssPrefix: pf-v5-c-progress-stepper
4
+ cssPrefix: pf-v6-c-progress-stepper
5
5
  ---## Examples
6
6
 
7
7
  ### Basic
@@ -918,29 +918,29 @@ Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, `.p
918
918
 
919
919
  | Attribute | Applied to | Outcome |
920
920
  | -- | -- | -- |
921
- | `aria-label="[State of the step]"` | `.pf-v5-c-progress-stepper__step` | Provides an accessible label for the step. |
922
- | `aria-hidden="true"` | `.pf-v5-c-progress-stepper__step-icon <i>` | Hides icon for assistive technologies. **Required** |
921
+ | `aria-label="[State of the step]"` | `.pf-v6-c-progress-stepper__step` | Provides an accessible label for the step. |
922
+ | `aria-hidden="true"` | `.pf-v6-c-progress-stepper__step-icon <i>` | Hides icon for assistive technologies. **Required** |
923
923
 
924
924
  ### Usage
925
925
 
926
926
  | Class | Applied to | Outcome |
927
927
  | -- | -- | -- |
928
- | `.pf-v5-c-progress-stepper` | `<ol>` | Applies default progress stepper styling. **Required** |
929
- | `.pf-v5-c-progress-stepper__step` | `<li>` | Defines each step of the progress stepper. **Required** |
928
+ | `.pf-v6-c-progress-stepper` | `<ol>` | Applies default progress stepper styling. **Required** |
929
+ | `.pf-v6-c-progress-stepper__step` | `<li>` | Defines each step of the progress stepper. **Required** |
930
930
  | `.progress-stepper__step-connector` | `<div>` | Creates the connecting line between steps **Required** |
931
931
  | `.progress-stepper__step-icon` | `<span>` | Creates the step node and contains the icon designating the type of step. This element is required, but may be empty if no icon is used for the step. **Required** |
932
932
  | `.progress-stepper__step-main` | `<div>` | Contains the main text content of the step. This element is required, but may be empty if title and description are not used. **Required** |
933
933
  | `.progress-stepper__step-title` | `<div>`, `<button>` | Contains the title of the step. **Note:** the step title is a `<button>` when it has `.pf-m-help-text` and is used to trigger a popover with help text. |
934
934
  | `.progress-stepper__step-description` | `<div>` | Contains the description of the step. |
935
- | `.pf-m-center`| `.pf-v5-c-progress-stepper` | Modifies to center each step. |
936
- | `.pf-m-vertical{-on-[breakpoint]}`| `.pf-v5-c-progress-stepper` | Modifies progress stepper vertical layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
937
- | `.pf-m-horizontal{-on-[breakpoint]}`| `.pf-v5-c-progress-stepper` | Modifies progress stepper horizontal layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
938
- | `.pf-m-compact`| `.pf-v5-c-progress-stepper` | Modifies for compact styling. |
939
- | `.pf-m-success`| `.pf-v5-c-progress-stepper__step` | Modifies for success styling. |
940
- | `.pf-m-warning`| `.pf-v5-c-progress-stepper__step` | Modifies for warning styling. |
941
- | `.pf-m-danger`| `.pf-v5-c-progress-stepper__step` | Modifies for danger styling. |
942
- | `.pf-m-info`| `.pf-v5-c-progress-stepper__step` | Modifies for info styling. |
943
- | `.pf-m-custom`| `.pf-v5-c-progress-stepper__step` | Modifies for custom styling. |
944
- | `.pf-m-current`| `.pf-v5-c-progress-stepper__step` | Modifies styling for the current step. |
945
- | `.pf-m-pending`| `.pf-v5-c-progress-stepper__step` | Modifies styling for pending steps. |
946
- | `.pf-m-help-text`| `.pf-v5-c-progress-stepper__step-title` | Modifies styling for steps that have help text. |
935
+ | `.pf-m-center`| `.pf-v6-c-progress-stepper` | Modifies to center each step. |
936
+ | `.pf-m-vertical{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper vertical layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
937
+ | `.pf-m-horizontal{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper horizontal layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
938
+ | `.pf-m-compact`| `.pf-v6-c-progress-stepper` | Modifies for compact styling. |
939
+ | `.pf-m-success`| `.pf-v6-c-progress-stepper__step` | Modifies for success styling. |
940
+ | `.pf-m-warning`| `.pf-v6-c-progress-stepper__step` | Modifies for warning styling. |
941
+ | `.pf-m-danger`| `.pf-v6-c-progress-stepper__step` | Modifies for danger styling. |
942
+ | `.pf-m-info`| `.pf-v6-c-progress-stepper__step` | Modifies for info styling. |
943
+ | `.pf-m-custom`| `.pf-v6-c-progress-stepper__step` | Modifies for custom styling. |
944
+ | `.pf-m-current`| `.pf-v6-c-progress-stepper__step` | Modifies styling for the current step. |
945
+ | `.pf-m-pending`| `.pf-v6-c-progress-stepper__step` | Modifies styling for pending steps. |
946
+ | `.pf-m-help-text`| `.pf-v6-c-progress-stepper__step-title` | Modifies styling for steps that have help text. |
@@ -2,7 +2,7 @@
2
2
  id: Radio
3
3
  section: components
4
4
  subsection: forms
5
- cssPrefix: pf-v5-c-radio
5
+ cssPrefix: pf-v6-c-radio
6
6
  ---## Examples
7
7
 
8
8
  ### Basic
@@ -206,16 +206,16 @@ If you extend this component or modify the styles of this component, then make s
206
206
  | Attribute | Applied to | Outcome |
207
207
  | -- | -- | -- |
208
208
  | `disabled` | `<input type="radio">` | Indicates that the element is unavailable and removes it from keyboard focus. **Required when input is disabled** |
209
- | `aria-describedby` | `.pf-v5-c-radio__input` | When using `.pf-v5-c-radio__description` make use of this on the input. |
209
+ | `aria-describedby` | `.pf-v6-c-radio__input` | When using `.pf-v6-c-radio__description` make use of this on the input. |
210
210
 
211
211
  ### Usage
212
212
 
213
213
  | Class | Applied to | Outcome |
214
214
  | -- | -- | -- |
215
- | `.pf-v5-c-radio` | `<div>`, `<label>` | Initiates the radio component. **Required** |
216
- | `.pf-v5-c-radio__input` | `<input type="radio">` | Initiates a radio input. **Required** |
217
- | `.pf-v5-c-radio__label` | `<label>`, `<span>` | Initiates a label. **Required** |
218
- | `.pf-v5-c-radio__description` | `<span>` | Initiates a radio description. |
219
- | `.pf-v5-c-radio__body` | `<span>` | Initiates a radio body. |
220
- | `.pf-m-standalone` | `.pf-v5-c-radio` | Modifies the radio component for use with a standalone `<input type="radio">`. **Required when there is no label** |
221
- | `.pf-m-disabled` | `.pf-v5-c-radio__label` | Modifies the radio component for the disabled state. **Required when input is disabled** |
215
+ | `.pf-v6-c-radio` | `<div>`, `<label>` | Initiates the radio component. **Required** |
216
+ | `.pf-v6-c-radio__input` | `<input type="radio">` | Initiates a radio input. **Required** |
217
+ | `.pf-v6-c-radio__label` | `<label>`, `<span>` | Initiates a label. **Required** |
218
+ | `.pf-v6-c-radio__description` | `<span>` | Initiates a radio description. |
219
+ | `.pf-v6-c-radio__body` | `<span>` | Initiates a radio body. |
220
+ | `.pf-m-standalone` | `.pf-v6-c-radio` | Modifies the radio component for use with a standalone `<input type="radio">`. **Required when there is no label** |
221
+ | `.pf-m-disabled` | `.pf-v6-c-radio__label` | Modifies the radio component for the disabled state. **Required when input is disabled** |