@patternfly/patternfly 5.0.0-alpha.3 → 5.0.0-alpha.31

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 (290) hide show
  1. package/RELEASE-NOTES.md +17 -0
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/pficon/pficon.scss +6 -0
  4. package/assets/pficon/pficon.woff +0 -0
  5. package/assets/pficon/pficon.woff2 +0 -0
  6. package/base/_base.scss +0 -18
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/_fonts.scss +22 -22
  10. package/base/_globals.scss +1 -1
  11. package/base/_icons.scss +1 -28
  12. package/base/_svg-icons.scss +6 -0
  13. package/base/_variables.scss +1 -1
  14. package/base/patternfly-common.css +0 -10
  15. package/base/patternfly-fonts.css +17 -17
  16. package/base/patternfly-icons.css +6 -20
  17. package/base/patternfly-pf-icons.css +5 -1
  18. package/base/themes/dark/_globals.scss +1 -1
  19. package/base/themes/dark/_variables.scss +1 -1
  20. package/components/AboutModalBox/about-modal-box.css +7 -7
  21. package/components/AboutModalBox/about-modal-box.scss +7 -7
  22. package/components/Accordion/accordion.css +2 -0
  23. package/components/Accordion/accordion.scss +2 -0
  24. package/components/Alert/alert.css +3 -3
  25. package/components/Alert/alert.scss +3 -3
  26. package/components/AppLauncher/app-launcher.css +2 -0
  27. package/components/AppLauncher/app-launcher.scss +2 -0
  28. package/components/Avatar/avatar.scss +2 -2
  29. package/components/Banner/banner.css +14 -14
  30. package/components/Banner/banner.scss +9 -13
  31. package/components/Breadcrumb/breadcrumb.css +2 -0
  32. package/components/Breadcrumb/breadcrumb.scss +2 -0
  33. package/components/CalendarMonth/calendar-month.css +2 -2
  34. package/components/CalendarMonth/calendar-month.scss +3 -3
  35. package/components/Card/card.css +20 -21
  36. package/components/Card/card.scss +22 -26
  37. package/components/Chip/chip.css +33 -24
  38. package/components/Chip/chip.scss +40 -31
  39. package/components/ChipGroup/chip-group.css +27 -17
  40. package/components/ChipGroup/chip-group.scss +36 -22
  41. package/components/Content/content.css +11 -5
  42. package/components/Content/content.scss +17 -9
  43. package/components/ContextSelector/context-selector.css +5 -1
  44. package/components/ContextSelector/context-selector.scss +6 -2
  45. package/components/DataList/data-list-grid.css +7 -7
  46. package/components/DataList/data-list-grid.scss +1 -1
  47. package/components/DataList/data-list.css +12 -11
  48. package/components/DataList/data-list.scss +5 -4
  49. package/components/DescriptionList/description-list.css +7 -7
  50. package/components/DescriptionList/description-list.scss +7 -7
  51. package/components/Divider/divider.css +2 -2
  52. package/components/Divider/divider.scss +3 -3
  53. package/components/Drawer/drawer.css +15 -16
  54. package/components/Drawer/drawer.scss +2 -3
  55. package/components/Dropdown/dropdown.css +12 -10
  56. package/components/Dropdown/dropdown.scss +2 -0
  57. package/components/DualListSelector/dual-list-selector.css +1 -1
  58. package/components/DualListSelector/dual-list-selector.scss +1 -1
  59. package/components/EmptyState/empty-state.css +46 -52
  60. package/components/EmptyState/empty-state.scss +58 -57
  61. package/components/ExpandableSection/expandable-section.css +2 -0
  62. package/components/ExpandableSection/expandable-section.scss +2 -0
  63. package/components/Form/form.css +12 -12
  64. package/components/Form/form.scss +7 -7
  65. package/components/FormControl/form-control.css +2 -5
  66. package/components/FormControl/themes/dark/form-control.scss +2 -6
  67. package/components/Hint/hint.css +2 -2
  68. package/components/Hint/hint.scss +2 -2
  69. package/components/Label/label.css +43 -30
  70. package/components/Label/label.scss +49 -34
  71. package/components/LabelGroup/label-group.css +26 -22
  72. package/components/LabelGroup/label-group.scss +31 -26
  73. package/components/Login/login.css +11 -11
  74. package/components/Login/login.scss +10 -10
  75. package/components/Masthead/masthead.css +4 -4
  76. package/components/Masthead/masthead.scss +4 -4
  77. package/components/Menu/menu.css +9 -6
  78. package/components/Menu/menu.scss +34 -31
  79. package/components/MenuToggle/menu-toggle.css +3 -1
  80. package/components/MenuToggle/menu-toggle.scss +3 -1
  81. package/components/ModalBox/modal-box.css +9 -8
  82. package/components/ModalBox/modal-box.scss +11 -11
  83. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  84. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  85. package/components/Nav/nav.css +1 -1
  86. package/components/Nav/nav.scss +2 -2
  87. package/components/NotificationDrawer/notification-drawer.css +3 -3
  88. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  89. package/components/Page/page.css +71 -71
  90. package/components/Page/page.scss +12 -12
  91. package/components/Pagination/pagination.css +2 -2
  92. package/components/Popover/popover.css +25 -31
  93. package/components/Popover/popover.scss +27 -32
  94. package/components/Popover/themes/dark/popover.scss +2 -8
  95. package/components/Progress/progress.css +13 -10
  96. package/components/Progress/progress.scss +13 -10
  97. package/components/ProgressStepper/progress-stepper.css +5 -5
  98. package/components/ProgressStepper/progress-stepper.scss +5 -5
  99. package/components/SearchInput/search-input.css +4 -2
  100. package/components/SearchInput/search-input.scss +4 -2
  101. package/components/Select/select.css +1 -1
  102. package/components/Select/select.scss +1 -1
  103. package/components/Sidebar/sidebar.css +69 -26
  104. package/components/Sidebar/sidebar.scss +84 -27
  105. package/components/SimpleList/simple-list.css +1 -1
  106. package/components/SimpleList/simple-list.scss +2 -2
  107. package/components/Spinner/spinner.css +4 -4
  108. package/components/Spinner/spinner.scss +4 -4
  109. package/components/Table/table-grid.css +28 -28
  110. package/components/Table/table-scrollable.css +31 -26
  111. package/components/Table/table-scrollable.scss +33 -28
  112. package/components/Table/table-tree-view.css +14 -4
  113. package/components/Table/table-tree-view.scss +15 -0
  114. package/components/Table/table.css +7 -2
  115. package/components/Table/table.scss +9 -2
  116. package/components/Tabs/tabs.css +0 -4
  117. package/components/Tabs/tabs.scss +0 -7
  118. package/components/TextInputGroup/text-input-group.css +6 -4
  119. package/components/TextInputGroup/text-input-group.scss +6 -5
  120. package/components/Tile/tile.css +1 -1
  121. package/components/Tile/tile.scss +1 -1
  122. package/components/Timestamp/timestamp.css +3 -3
  123. package/components/Timestamp/timestamp.scss +3 -3
  124. package/components/Toolbar/toolbar.css +78 -43
  125. package/components/Toolbar/toolbar.scss +50 -10
  126. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  127. package/components/Tooltip/tooltip.css +7 -12
  128. package/components/Tooltip/tooltip.scss +6 -3
  129. package/components/TreeView/tree-view.css +7 -15
  130. package/components/TreeView/tree-view.scss +7 -18
  131. package/components/Wizard/wizard.css +16 -1
  132. package/components/Wizard/wizard.scss +20 -2
  133. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -13
  134. package/docs/components/Accordion/examples/Accordion.md +12 -12
  135. package/docs/components/ActionList/examples/ActionList.md +6 -6
  136. package/docs/components/Alert/examples/Alert.md +19 -19
  137. package/docs/components/AlertGroup/examples/AlertGroup.md +12 -12
  138. package/docs/components/AppLauncher/examples/application-launcher.md +51 -46
  139. package/docs/components/Avatar/examples/Avatar.md +11 -11
  140. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  141. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  142. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  143. package/docs/components/Badge/examples/Badge.md +5 -5
  144. package/docs/components/Banner/examples/Banner.md +8 -8
  145. package/docs/components/Brand/examples/Brand.md +9 -9
  146. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  147. package/docs/components/Button/examples/Button.md +35 -35
  148. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -32
  149. package/docs/components/Card/examples/Card.md +139 -64
  150. package/docs/components/Check/examples/Check.md +15 -19
  151. package/docs/components/Chip/examples/Chip.md +70 -52
  152. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  153. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  154. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  155. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  156. package/docs/components/Content/examples/Content.md +37 -9
  157. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  158. package/docs/components/ContextSelector/examples/context-selector.md +86 -80
  159. package/docs/components/DataList/examples/DataList.md +187 -148
  160. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  161. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  162. package/docs/components/Divider/examples/Divider.md +10 -10
  163. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  164. package/docs/components/Drawer/examples/Drawer.md +43 -43
  165. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  166. package/docs/components/Dropdown/examples/Dropdown.md +123 -99
  167. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  168. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  169. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  170. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  171. package/docs/components/Form/examples/Form.md +64 -64
  172. package/docs/components/FormControl/examples/FormControl.md +20 -20
  173. package/docs/components/HelperText/examples/HelperText.md +12 -12
  174. package/docs/components/Hint/examples/Hint.md +7 -7
  175. package/docs/components/Icon/examples/Icon.md +10 -10
  176. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  177. package/docs/components/InputGroup/examples/InputGroup.md +10 -10
  178. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  179. package/docs/components/Label/examples/Label.md +1427 -746
  180. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  181. package/docs/components/List/examples/List.md +18 -18
  182. package/docs/components/LogViewer/examples/LogViewer.md +79 -73
  183. package/docs/components/Login/examples/Login.md +32 -32
  184. package/docs/components/Masthead/examples/masthead.md +9 -9
  185. package/docs/components/Menu/examples/Menu.md +82 -80
  186. package/docs/components/MenuToggle/examples/MenuToggle.md +28 -28
  187. package/docs/components/ModalBox/examples/ModalBox.md +106 -85
  188. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +25 -25
  189. package/docs/components/Nav/examples/Navigation.md +69 -69
  190. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  191. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +44 -44
  192. package/docs/components/NumberInput/examples/NumberInput.md +12 -12
  193. package/docs/components/OptionsMenu/examples/options-menu.md +27 -28
  194. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  195. package/docs/components/Page/examples/Page.md +54 -54
  196. package/docs/components/Pagination/examples/Pagination.md +27 -27
  197. package/docs/components/Panel/examples/Panel.md +10 -10
  198. package/docs/components/Popover/examples/Popover.md +201 -144
  199. package/docs/components/Progress/examples/Progress.md +31 -60
  200. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -38
  201. package/docs/components/Radio/examples/Radio.md +11 -11
  202. package/docs/components/SearchInput/examples/SearchInput.md +34 -34
  203. package/docs/components/Select/examples/Select.md +367 -313
  204. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  205. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  206. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  207. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  208. package/docs/components/Slider/examples/Slider.md +24 -24
  209. package/docs/components/Spinner/examples/Spinner.md +24 -24
  210. package/docs/components/Switch/examples/Switch.md +19 -19
  211. package/docs/components/TabContent/examples/TabContent.md +13 -13
  212. package/docs/components/Table/examples/Table.css +4 -0
  213. package/docs/components/Table/examples/Table.md +3163 -1712
  214. package/docs/components/Tabs/examples/Tabs.md +149 -149
  215. package/docs/components/TextInputGroup/examples/TextInputGroup.md +362 -280
  216. package/docs/components/Tile/examples/Tile.md +15 -15
  217. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  218. package/docs/components/Title/examples/Title.md +17 -17
  219. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  220. package/docs/components/Toolbar/examples/Toolbar.md +466 -373
  221. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  222. package/docs/components/TreeView/examples/TreeView.md +34 -34
  223. package/docs/components/Truncate/examples/Truncate.md +4 -4
  224. package/docs/components/Wizard/examples/Wizard.md +119 -127
  225. package/docs/demos/AboutModal/examples/AboutModal.md +4 -4
  226. package/docs/demos/Alert/examples/Alert.md +13 -13
  227. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  228. package/docs/demos/Banner/examples/Banner.md +8 -9
  229. package/docs/demos/Card/examples/Card.md +219 -156
  230. package/docs/demos/CardView/examples/CardView.md +56 -29
  231. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  232. package/docs/demos/Dashboard/examples/Dashboard.md +51 -35
  233. package/docs/demos/DataList/examples/DataList.md +158 -109
  234. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  235. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  236. package/docs/demos/Form/examples/BasicForms.md +28 -22
  237. package/docs/demos/HelperText/examples/HelperText.md +8 -9
  238. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  239. package/docs/demos/Masthead/examples/Masthead.md +29 -32
  240. package/docs/demos/Modal/examples/Modal.md +54 -66
  241. package/docs/demos/Nav/examples/Nav.md +47 -47
  242. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -28
  243. package/docs/demos/Page/examples/Page.md +37 -37
  244. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +32 -33
  245. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +74 -64
  246. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  247. package/docs/demos/Table/examples/Table.md +2454 -467
  248. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  249. package/docs/demos/Toolbar/examples/Toolbar.md +1808 -174
  250. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  251. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  252. package/docs/layouts/Flex/examples/Flex.md +98 -98
  253. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  254. package/docs/layouts/Grid/examples/Grid.md +9 -9
  255. package/docs/layouts/Level/examples/Level.md +5 -5
  256. package/docs/layouts/Split/examples/Split.md +7 -7
  257. package/docs/layouts/Stack/examples/Stack.md +6 -6
  258. package/docs/utilities/Accessibility/examples/Accessibility.md +4 -4
  259. package/docs/utilities/Alignment/examples/Alignment.md +6 -6
  260. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +12 -12
  261. package/docs/utilities/BoxShadow/examples/box-shadow.md +22 -22
  262. package/docs/utilities/Display/examples/Display.md +11 -11
  263. package/docs/utilities/Flex/examples/Flex.md +34 -34
  264. package/docs/utilities/Float/examples/Float.md +4 -4
  265. package/docs/utilities/Sizing/examples/Sizing.md +50 -50
  266. package/docs/utilities/Spacing/examples/Spacing.md +34 -34
  267. package/docs/utilities/Text/examples/Text.md +27 -27
  268. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  269. package/layouts/Gallery/gallery.css +1 -1
  270. package/layouts/Gallery/gallery.scss +1 -1
  271. package/layouts/Grid/grid.css +7 -7
  272. package/layouts/Grid/grid.scss +2 -2
  273. package/package.json +59 -65
  274. package/patternfly-base-no-reset.css +23 -47
  275. package/patternfly-base.css +23 -47
  276. package/patternfly-no-reset.css +781 -656
  277. package/patternfly.css +781 -656
  278. package/patternfly.min.css +1 -1
  279. package/patternfly.min.css.map +1 -1
  280. package/sass-utilities/functions.scss +8 -24
  281. package/sass-utilities/mixins.scss +15 -39
  282. package/sass-utilities/scss-variables.scss +1 -1
  283. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  284. package/utilities/Spacing/spacing.scss +2 -2
  285. package/base/_shield-inheritable.scss +0 -69
  286. package/base/_shield-noninheritable.scss +0 -13
  287. package/base/patternfly-shield-inheritable.css +0 -66
  288. package/base/patternfly-shield-inheritable.scss +0 -4
  289. package/base/patternfly-shield-noninheritable.css +0 -9
  290. package/base/patternfly-shield-noninheritable.scss +0 -4
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -96,7 +96,7 @@ wrapperTag: div
96
96
  </div>
97
97
  <section class="pf-c-app-launcher__group">
98
98
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
99
- <ul>
99
+ <ul role="list">
100
100
  <li
101
101
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
102
102
  >
@@ -148,7 +148,7 @@ wrapperTag: div
148
148
  <hr class="pf-c-divider" />
149
149
  <section class="pf-c-app-launcher__group">
150
150
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
151
- <ul>
151
+ <ul role="list">
152
152
  <li
153
153
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
154
154
  >
@@ -803,7 +803,7 @@ wrapperTag: div
803
803
  id="data-list-basic-example-primary-nav"
804
804
  aria-label="Global"
805
805
  >
806
- <ul class="pf-c-nav__list">
806
+ <ul class="pf-c-nav__list" role="list">
807
807
  <li class="pf-c-nav__item">
808
808
  <a href="#" class="pf-c-nav__link">System panel</a>
809
809
  </li>
@@ -835,7 +835,7 @@ wrapperTag: div
835
835
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
836
836
  <div class="pf-c-page__main-body">
837
837
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
838
- <ol class="pf-c-breadcrumb__list">
838
+ <ol class="pf-c-breadcrumb__list" role="list">
839
839
  <li class="pf-c-breadcrumb__item">
840
840
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
841
841
  </li>
@@ -888,11 +888,14 @@ wrapperTag: div
888
888
  class="pf-c-dropdown__toggle-check"
889
889
  for="-bulk-select-toggle-check"
890
890
  >
891
- <input
892
- type="checkbox"
893
- id="-bulk-select-toggle-check"
894
- aria-label="Select all"
895
- />
891
+ <div class="pf-c-check pf-m-standalone">
892
+ <input
893
+ class="pf-c-check__input"
894
+ type="checkbox"
895
+ id="-bulk-select-toggle-check"
896
+ aria-label="Select all"
897
+ />
898
+ </div>
896
899
  </label>
897
900
 
898
901
  <button
@@ -960,7 +963,7 @@ wrapperTag: div
960
963
  </div>
961
964
  </div>
962
965
  </div>
963
- <ul class="pf-c-context-selector__menu-list">
966
+ <ul class="pf-c-context-selector__menu-list" role="list">
964
967
  <li>My project</li>
965
968
  <li>OpenShift cluster</li>
966
969
  <li>Production Ansible</li>
@@ -1611,7 +1614,7 @@ wrapperTag: div
1611
1614
  </div>
1612
1615
  <section class="pf-c-app-launcher__group">
1613
1616
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1614
- <ul>
1617
+ <ul role="list">
1615
1618
  <li
1616
1619
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1617
1620
  >
@@ -1663,7 +1666,7 @@ wrapperTag: div
1663
1666
  <hr class="pf-c-divider" />
1664
1667
  <section class="pf-c-app-launcher__group">
1665
1668
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1666
- <ul>
1669
+ <ul role="list">
1667
1670
  <li
1668
1671
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
1669
1672
  >
@@ -2318,7 +2321,7 @@ wrapperTag: div
2318
2321
  id="data-list-actionable-example-primary-nav"
2319
2322
  aria-label="Global"
2320
2323
  >
2321
- <ul class="pf-c-nav__list">
2324
+ <ul class="pf-c-nav__list" role="list">
2322
2325
  <li class="pf-c-nav__item">
2323
2326
  <a href="#" class="pf-c-nav__link">System panel</a>
2324
2327
  </li>
@@ -2350,7 +2353,7 @@ wrapperTag: div
2350
2353
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2351
2354
  <div class="pf-c-page__main-body">
2352
2355
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
2353
- <ol class="pf-c-breadcrumb__list">
2356
+ <ol class="pf-c-breadcrumb__list" role="list">
2354
2357
  <li class="pf-c-breadcrumb__item">
2355
2358
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
2356
2359
  </li>
@@ -2417,11 +2420,14 @@ wrapperTag: div
2417
2420
  class="pf-c-dropdown__toggle-check"
2418
2421
  for="-bulk-select-toggle-check"
2419
2422
  >
2420
- <input
2421
- type="checkbox"
2422
- id="-bulk-select-toggle-check"
2423
- aria-label="Select all"
2424
- />
2423
+ <div class="pf-c-check pf-m-standalone">
2424
+ <input
2425
+ class="pf-c-check__input"
2426
+ type="checkbox"
2427
+ id="-bulk-select-toggle-check"
2428
+ aria-label="Select all"
2429
+ />
2430
+ </div>
2425
2431
  </label>
2426
2432
 
2427
2433
  <button
@@ -2494,7 +2500,7 @@ wrapperTag: div
2494
2500
  </div>
2495
2501
  </div>
2496
2502
  </div>
2497
- <ul class="pf-c-context-selector__menu-list">
2503
+ <ul class="pf-c-context-selector__menu-list" role="list">
2498
2504
  <li>My project</li>
2499
2505
  <li>OpenShift cluster</li>
2500
2506
  <li>Production Ansible</li>
@@ -2651,11 +2657,14 @@ wrapperTag: div
2651
2657
  <div class="pf-c-data-list__item-row">
2652
2658
  <div class="pf-c-data-list__item-control">
2653
2659
  <div class="pf-c-data-list__check">
2654
- <input
2655
- type="checkbox"
2656
- name="check-action-check1"
2657
- aria-labelledby="data-list-actionable-example-data-list-item-1"
2658
- />
2660
+ <div class="pf-c-check pf-m-standalone">
2661
+ <input
2662
+ class="pf-c-check__input"
2663
+ type="checkbox"
2664
+ name="check-action-check1"
2665
+ aria-labelledby="data-list-actionable-example-data-list-item-1"
2666
+ />
2667
+ </div>
2659
2668
  </div>
2660
2669
  </div>
2661
2670
  <div class="pf-c-data-list__item-content">
@@ -2721,11 +2730,14 @@ wrapperTag: div
2721
2730
  <div class="pf-c-data-list__item-row">
2722
2731
  <div class="pf-c-data-list__item-control">
2723
2732
  <div class="pf-c-data-list__check">
2724
- <input
2725
- type="checkbox"
2726
- name="check-action-check2"
2727
- aria-labelledby="data-list-actionable-example-data-list-item-2"
2728
- />
2733
+ <div class="pf-c-check pf-m-standalone">
2734
+ <input
2735
+ class="pf-c-check__input"
2736
+ type="checkbox"
2737
+ name="check-action-check2"
2738
+ aria-labelledby="data-list-actionable-example-data-list-item-2"
2739
+ />
2740
+ </div>
2729
2741
  </div>
2730
2742
  </div>
2731
2743
  <div class="pf-c-data-list__item-content">
@@ -2815,11 +2827,14 @@ wrapperTag: div
2815
2827
  <div class="pf-c-data-list__item-row">
2816
2828
  <div class="pf-c-data-list__item-control">
2817
2829
  <div class="pf-c-data-list__check">
2818
- <input
2819
- type="checkbox"
2820
- name="check-action-check3"
2821
- aria-labelledby="data-list-actionable-example-data-list-item-3"
2822
- />
2830
+ <div class="pf-c-check pf-m-standalone">
2831
+ <input
2832
+ class="pf-c-check__input"
2833
+ type="checkbox"
2834
+ name="check-action-check3"
2835
+ aria-labelledby="data-list-actionable-example-data-list-item-3"
2836
+ />
2837
+ </div>
2823
2838
  </div>
2824
2839
  </div>
2825
2840
  <div class="pf-c-data-list__item-content">
@@ -2846,11 +2861,14 @@ wrapperTag: div
2846
2861
  <div class="pf-c-data-list__item-row">
2847
2862
  <div class="pf-c-data-list__item-control">
2848
2863
  <div class="pf-c-data-list__check">
2849
- <input
2850
- type="checkbox"
2851
- name="check-action-check4"
2852
- aria-labelledby="data-list-actionable-example-data-list-item-4"
2853
- />
2864
+ <div class="pf-c-check pf-m-standalone">
2865
+ <input
2866
+ class="pf-c-check__input"
2867
+ type="checkbox"
2868
+ name="check-action-check4"
2869
+ aria-labelledby="data-list-actionable-example-data-list-item-4"
2870
+ />
2871
+ </div>
2854
2872
  </div>
2855
2873
  </div>
2856
2874
  <div class="pf-c-data-list__item-content">
@@ -3104,7 +3122,7 @@ wrapperTag: div
3104
3122
  </div>
3105
3123
  <section class="pf-c-app-launcher__group">
3106
3124
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
3107
- <ul>
3125
+ <ul role="list">
3108
3126
  <li
3109
3127
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3110
3128
  >
@@ -3156,7 +3174,7 @@ wrapperTag: div
3156
3174
  <hr class="pf-c-divider" />
3157
3175
  <section class="pf-c-app-launcher__group">
3158
3176
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
3159
- <ul>
3177
+ <ul role="list">
3160
3178
  <li
3161
3179
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
3162
3180
  >
@@ -3811,7 +3829,7 @@ wrapperTag: div
3811
3829
  id="data-list-expandable-example-primary-nav"
3812
3830
  aria-label="Global"
3813
3831
  >
3814
- <ul class="pf-c-nav__list">
3832
+ <ul class="pf-c-nav__list" role="list">
3815
3833
  <li class="pf-c-nav__item">
3816
3834
  <a href="#" class="pf-c-nav__link">System panel</a>
3817
3835
  </li>
@@ -3843,7 +3861,7 @@ wrapperTag: div
3843
3861
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
3844
3862
  <div class="pf-c-page__main-body">
3845
3863
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
3846
- <ol class="pf-c-breadcrumb__list">
3864
+ <ol class="pf-c-breadcrumb__list" role="list">
3847
3865
  <li class="pf-c-breadcrumb__item">
3848
3866
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
3849
3867
  </li>
@@ -3922,11 +3940,14 @@ wrapperTag: div
3922
3940
  class="pf-c-dropdown__toggle-check"
3923
3941
  for="-bulk-select-toggle-check"
3924
3942
  >
3925
- <input
3926
- type="checkbox"
3927
- id="-bulk-select-toggle-check"
3928
- aria-label="Select all"
3929
- />
3943
+ <div class="pf-c-check pf-m-standalone">
3944
+ <input
3945
+ class="pf-c-check__input"
3946
+ type="checkbox"
3947
+ id="-bulk-select-toggle-check"
3948
+ aria-label="Select all"
3949
+ />
3950
+ </div>
3930
3951
  </label>
3931
3952
 
3932
3953
  <button
@@ -3995,7 +4016,6 @@ wrapperTag: div
3995
4016
  role="listbox"
3996
4017
  aria-labelledby="-select-name-label"
3997
4018
  hidden
3998
- style="width: 175px"
3999
4019
  >
4000
4020
  <li role="presentation">
4001
4021
  <button
@@ -4043,9 +4063,9 @@ wrapperTag: div
4043
4063
  </span>
4044
4064
  <input
4045
4065
  class="pf-c-text-input-group__text-input"
4046
- type="text"
4047
- value
4066
+ type="search"
4048
4067
  placeholder="Filter by name"
4068
+ value
4049
4069
  aria-label="Type to filter"
4050
4070
  />
4051
4071
  </span>
@@ -4204,11 +4224,14 @@ wrapperTag: div
4204
4224
  </div>
4205
4225
 
4206
4226
  <div class="pf-c-data-list__check">
4207
- <input
4208
- type="checkbox"
4209
- name="check-expandable-check1"
4210
- aria-labelledby="data-list-expandable-example-data-list-item-1"
4211
- />
4227
+ <div class="pf-c-check pf-m-standalone">
4228
+ <input
4229
+ class="pf-c-check__input"
4230
+ type="checkbox"
4231
+ name="check-expandable-check1"
4232
+ aria-labelledby="data-list-expandable-example-data-list-item-1"
4233
+ />
4234
+ </div>
4212
4235
  </div>
4213
4236
  </div>
4214
4237
  <div class="pf-c-data-list__item-content">
@@ -4282,11 +4305,14 @@ wrapperTag: div
4282
4305
  <thead>
4283
4306
  <tr role="row">
4284
4307
  <td class="pf-c-table__check" role="cell">
4285
- <input
4286
- type="checkbox"
4287
- name="check-all"
4288
- aria-label="Select all rows"
4289
- />
4308
+ <div class="pf-c-check pf-m-standalone">
4309
+ <input
4310
+ class="pf-c-check__input"
4311
+ type="checkbox"
4312
+ name="check-all"
4313
+ aria-label="Select all rows"
4314
+ />
4315
+ </div>
4290
4316
  </td>
4291
4317
  <th role="columnheader" scope="col">Contributor</th>
4292
4318
  <th role="columnheader" scope="col">Position</th>
@@ -4305,11 +4331,14 @@ wrapperTag: div
4305
4331
  <tbody role="rowgroup">
4306
4332
  <tr role="row">
4307
4333
  <td class="pf-c-table__check" role="cell">
4308
- <input
4309
- type="checkbox"
4310
- name="checkrow1"
4311
- aria-labelledby="compact-table-demo-data-list-name1"
4312
- />
4334
+ <div class="pf-c-check pf-m-standalone">
4335
+ <input
4336
+ class="pf-c-check__input"
4337
+ type="checkbox"
4338
+ name="checkrow1"
4339
+ aria-labelledby="compact-table-demo-data-list-name1"
4340
+ />
4341
+ </div>
4313
4342
  </td>
4314
4343
  <td role="cell" data-label="Contributor">
4315
4344
  <span id="compact-table-demo-data-list-name1">Sam Jones</span>
@@ -4381,11 +4410,14 @@ wrapperTag: div
4381
4410
  </tr>
4382
4411
  <tr role="row">
4383
4412
  <td class="pf-c-table__check" role="cell">
4384
- <input
4385
- type="checkbox"
4386
- name="checkrow2"
4387
- aria-labelledby="compact-table-demo-data-list-name2"
4388
- />
4413
+ <div class="pf-c-check pf-m-standalone">
4414
+ <input
4415
+ class="pf-c-check__input"
4416
+ type="checkbox"
4417
+ name="checkrow2"
4418
+ aria-labelledby="compact-table-demo-data-list-name2"
4419
+ />
4420
+ </div>
4389
4421
  </td>
4390
4422
  <th role="columnheader" data-label="Contributor">
4391
4423
  <span id="compact-table-demo-data-list-name2">Amy Miller</span>
@@ -4457,11 +4489,14 @@ wrapperTag: div
4457
4489
  </tr>
4458
4490
  <tr role="row">
4459
4491
  <td class="pf-c-table__check" role="cell">
4460
- <input
4461
- type="checkbox"
4462
- name="checkrow3"
4463
- aria-labelledby="compact-table-demo-data-list-name3"
4464
- />
4492
+ <div class="pf-c-check pf-m-standalone">
4493
+ <input
4494
+ class="pf-c-check__input"
4495
+ type="checkbox"
4496
+ name="checkrow3"
4497
+ aria-labelledby="compact-table-demo-data-list-name3"
4498
+ />
4499
+ </div>
4465
4500
  </td>
4466
4501
  <th role="columnheader" data-label="Contributor">
4467
4502
  <span
@@ -4539,11 +4574,14 @@ wrapperTag: div
4539
4574
  </tr>
4540
4575
  <tr role="row">
4541
4576
  <td class="pf-c-table__check" role="cell">
4542
- <input
4543
- type="checkbox"
4544
- name="checkrow4"
4545
- aria-labelledby="compact-table-demo-data-list-name4"
4546
- />
4577
+ <div class="pf-c-check pf-m-standalone">
4578
+ <input
4579
+ class="pf-c-check__input"
4580
+ type="checkbox"
4581
+ name="checkrow4"
4582
+ aria-labelledby="compact-table-demo-data-list-name4"
4583
+ />
4584
+ </div>
4547
4585
  </td>
4548
4586
  <td role="cell" data-label="Contributor name">
4549
4587
  <span
@@ -4648,11 +4686,14 @@ wrapperTag: div
4648
4686
  </div>
4649
4687
 
4650
4688
  <div class="pf-c-data-list__check">
4651
- <input
4652
- type="checkbox"
4653
- name="check-expandable-check2"
4654
- aria-labelledby="data-list-expandable-example-data-list-item-2"
4655
- />
4689
+ <div class="pf-c-check pf-m-standalone">
4690
+ <input
4691
+ class="pf-c-check__input"
4692
+ type="checkbox"
4693
+ name="check-expandable-check2"
4694
+ aria-labelledby="data-list-expandable-example-data-list-item-2"
4695
+ />
4696
+ </div>
4656
4697
  </div>
4657
4698
  </div>
4658
4699
  <div class="pf-c-data-list__item-content">
@@ -4768,11 +4809,14 @@ wrapperTag: div
4768
4809
  </div>
4769
4810
 
4770
4811
  <div class="pf-c-data-list__check">
4771
- <input
4772
- type="checkbox"
4773
- name="check-expandable-check3"
4774
- aria-labelledby="data-list-expandable-example-data-list-item-3"
4775
- />
4812
+ <div class="pf-c-check pf-m-standalone">
4813
+ <input
4814
+ class="pf-c-check__input"
4815
+ type="checkbox"
4816
+ name="check-expandable-check3"
4817
+ aria-labelledby="data-list-expandable-example-data-list-item-3"
4818
+ />
4819
+ </div>
4776
4820
  </div>
4777
4821
  </div>
4778
4822
  <div class="pf-c-data-list__item-content">
@@ -4818,11 +4862,14 @@ wrapperTag: div
4818
4862
  </div>
4819
4863
 
4820
4864
  <div class="pf-c-data-list__check">
4821
- <input
4822
- type="checkbox"
4823
- name="check-expandable-check4"
4824
- aria-labelledby="data-list-expandable-example-data-list-item-4"
4825
- />
4865
+ <div class="pf-c-check pf-m-standalone">
4866
+ <input
4867
+ class="pf-c-check__input"
4868
+ type="checkbox"
4869
+ name="check-expandable-check4"
4870
+ aria-labelledby="data-list-expandable-example-data-list-item-4"
4871
+ />
4872
+ </div>
4826
4873
  </div>
4827
4874
  </div>
4828
4875
  <div class="pf-c-data-list__item-content">
@@ -4914,11 +4961,14 @@ wrapperTag: div
4914
4961
  </div>
4915
4962
 
4916
4963
  <div class="pf-c-data-list__check">
4917
- <input
4918
- type="checkbox"
4919
- name="check-expandable-check5"
4920
- aria-labelledby="data-list-expandable-example-data-list-item-5"
4921
- />
4964
+ <div class="pf-c-check pf-m-standalone">
4965
+ <input
4966
+ class="pf-c-check__input"
4967
+ type="checkbox"
4968
+ name="check-expandable-check5"
4969
+ aria-labelledby="data-list-expandable-example-data-list-item-5"
4970
+ />
4971
+ </div>
4922
4972
  </div>
4923
4973
  </div>
4924
4974
  <div class="pf-c-data-list__item-content">
@@ -5206,7 +5256,7 @@ wrapperTag: div
5206
5256
  </div>
5207
5257
  <section class="pf-c-app-launcher__group">
5208
5258
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
5209
- <ul>
5259
+ <ul role="list">
5210
5260
  <li
5211
5261
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
5212
5262
  >
@@ -5258,7 +5308,7 @@ wrapperTag: div
5258
5308
  <hr class="pf-c-divider" />
5259
5309
  <section class="pf-c-app-launcher__group">
5260
5310
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
5261
- <ul>
5311
+ <ul role="list">
5262
5312
  <li
5263
5313
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
5264
5314
  >
@@ -5913,7 +5963,7 @@ wrapperTag: div
5913
5963
  id="data-list-static-bottom-example-primary-nav"
5914
5964
  aria-label="Global"
5915
5965
  >
5916
- <ul class="pf-c-nav__list">
5966
+ <ul class="pf-c-nav__list" role="list">
5917
5967
  <li class="pf-c-nav__item">
5918
5968
  <a href="#" class="pf-c-nav__link">System panel</a>
5919
5969
  </li>
@@ -5945,7 +5995,7 @@ wrapperTag: div
5945
5995
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
5946
5996
  <div class="pf-c-page__main-body">
5947
5997
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
5948
- <ol class="pf-c-breadcrumb__list">
5998
+ <ol class="pf-c-breadcrumb__list" role="list">
5949
5999
  <li class="pf-c-breadcrumb__item">
5950
6000
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
5951
6001
  </li>
@@ -6039,7 +6089,6 @@ wrapperTag: div
6039
6089
  role="listbox"
6040
6090
  aria-labelledby="-select-name-label"
6041
6091
  hidden
6042
- style="width: 175px"
6043
6092
  >
6044
6093
  <li role="presentation">
6045
6094
  <button
@@ -6087,9 +6136,9 @@ wrapperTag: div
6087
6136
  </span>
6088
6137
  <input
6089
6138
  class="pf-c-text-input-group__text-input"
6090
- type="text"
6091
- value
6139
+ type="search"
6092
6140
  placeholder="Filter by name"
6141
+ value
6093
6142
  aria-label="Type to filter"
6094
6143
  />
6095
6144
  </span>