@patternfly/patternfly 5.0.0-alpha.2 → 5.0.0-alpha.20

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 (222) hide show
  1. package/README.md +1 -1
  2. package/RELEASE-NOTES.md +47 -0
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/pficon/pficon.scss +6 -0
  5. package/assets/pficon/pficon.woff +0 -0
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/patternfly-common.css +0 -10
  10. package/base/patternfly-icons.css +5 -1
  11. package/base/patternfly-pf-icons.css +5 -1
  12. package/components/Accordion/accordion.css +2 -0
  13. package/components/Accordion/accordion.scss +2 -0
  14. package/components/AppLauncher/app-launcher.css +2 -0
  15. package/components/AppLauncher/app-launcher.scss +2 -0
  16. package/components/Breadcrumb/breadcrumb.css +2 -0
  17. package/components/Breadcrumb/breadcrumb.scss +2 -0
  18. package/components/CalendarMonth/calendar-month.css +1 -1
  19. package/components/CalendarMonth/calendar-month.scss +1 -1
  20. package/components/Card/card.css +9 -12
  21. package/components/Card/card.scss +11 -17
  22. package/components/ChipGroup/chip-group.css +27 -17
  23. package/components/ChipGroup/chip-group.scss +36 -22
  24. package/components/Content/content.css +6 -0
  25. package/components/Content/content.scss +8 -0
  26. package/components/ContextSelector/context-selector.css +5 -1
  27. package/components/ContextSelector/context-selector.scss +6 -2
  28. package/components/DataList/data-list.css +2 -1
  29. package/components/DataList/data-list.scss +2 -1
  30. package/components/Drawer/drawer.css +13 -14
  31. package/components/Drawer/drawer.scss +0 -1
  32. package/components/Dropdown/dropdown.css +27 -10
  33. package/components/Dropdown/dropdown.scss +22 -0
  34. package/components/EmptyState/empty-state.css +46 -52
  35. package/components/EmptyState/empty-state.scss +58 -57
  36. package/components/ExpandableSection/expandable-section.css +2 -0
  37. package/components/ExpandableSection/expandable-section.scss +2 -0
  38. package/components/FormControl/form-control.css +1 -1
  39. package/components/FormControl/themes/dark/form-control.scss +1 -1
  40. package/components/InputGroup/input-group.css +14 -0
  41. package/components/InputGroup/input-group.scss +9 -0
  42. package/components/InputGroup/themes/dark/input-group.scss +8 -0
  43. package/components/Label/label.css +2 -0
  44. package/components/Label/label.scss +2 -0
  45. package/components/LabelGroup/label-group.css +26 -22
  46. package/components/LabelGroup/label-group.scss +31 -26
  47. package/components/Login/login.css +1 -1
  48. package/components/Menu/menu.css +7 -0
  49. package/components/Menu/menu.scss +8 -0
  50. package/components/MenuToggle/menu-toggle.css +2 -0
  51. package/components/MenuToggle/menu-toggle.scss +2 -0
  52. package/components/ModalBox/modal-box.css +9 -8
  53. package/components/ModalBox/modal-box.scss +11 -11
  54. package/components/Page/page.css +60 -60
  55. package/components/Pagination/pagination.css +122 -2
  56. package/components/Pagination/pagination.scss +24 -1
  57. package/components/Popover/popover.css +2 -7
  58. package/components/Popover/themes/dark/popover.scss +2 -8
  59. package/components/Progress/progress.css +5 -2
  60. package/components/Progress/progress.scss +5 -2
  61. package/components/SearchInput/search-input.css +2 -0
  62. package/components/SearchInput/search-input.scss +2 -0
  63. package/components/Slider/slider.css +0 -7
  64. package/components/Slider/slider.scss +0 -9
  65. package/components/Table/table-grid.css +28 -28
  66. package/components/Table/table-tree-view.css +4 -4
  67. package/components/Tabs/tabs.css +0 -4
  68. package/components/Tabs/tabs.scss +0 -7
  69. package/components/TextInputGroup/text-input-group.css +4 -2
  70. package/components/TextInputGroup/text-input-group.scss +4 -3
  71. package/components/Toolbar/toolbar.css +65 -37
  72. package/components/Toolbar/toolbar.scss +37 -3
  73. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  74. package/components/Tooltip/tooltip.css +7 -12
  75. package/components/Tooltip/tooltip.scss +6 -3
  76. package/components/TreeView/tree-view.css +7 -15
  77. package/components/TreeView/tree-view.scss +7 -18
  78. package/components/Wizard/wizard.css +2 -0
  79. package/components/Wizard/wizard.scss +2 -0
  80. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -13
  81. package/docs/components/Accordion/examples/Accordion.md +12 -12
  82. package/docs/components/ActionList/examples/ActionList.md +6 -6
  83. package/docs/components/Alert/examples/Alert.md +19 -19
  84. package/docs/components/AlertGroup/examples/AlertGroup.md +12 -12
  85. package/docs/components/AppLauncher/examples/application-launcher.md +51 -46
  86. package/docs/components/Avatar/examples/Avatar.md +11 -11
  87. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  88. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  89. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  90. package/docs/components/Badge/examples/Badge.md +5 -5
  91. package/docs/components/Banner/examples/Banner.md +8 -8
  92. package/docs/components/Brand/examples/Brand.md +9 -9
  93. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  94. package/docs/components/Button/examples/Button.md +35 -35
  95. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -32
  96. package/docs/components/Card/examples/Card.md +61 -44
  97. package/docs/components/Check/examples/Check.md +15 -19
  98. package/docs/components/Chip/examples/Chip.md +13 -13
  99. package/docs/components/ChipGroup/examples/ChipGroup.md +15 -344
  100. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  101. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  102. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  103. package/docs/components/Content/examples/Content.md +37 -9
  104. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  105. package/docs/components/ContextSelector/examples/context-selector.md +86 -80
  106. package/docs/components/DataList/examples/DataList.md +187 -148
  107. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  109. package/docs/components/Divider/examples/Divider.md +10 -10
  110. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  111. package/docs/components/Drawer/examples/Drawer.md +43 -43
  112. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  113. package/docs/components/Dropdown/examples/Dropdown.md +311 -71
  114. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  115. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  116. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  117. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  118. package/docs/components/Form/examples/Form.md +64 -64
  119. package/docs/components/FormControl/examples/FormControl.md +20 -20
  120. package/docs/components/HelperText/examples/HelperText.md +12 -12
  121. package/docs/components/Hint/examples/Hint.md +7 -7
  122. package/docs/components/Icon/examples/Icon.md +10 -10
  123. package/docs/components/InlineEdit/examples/InlineEdit.md +24 -24
  124. package/docs/components/InputGroup/examples/InputGroup.md +10 -9
  125. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  126. package/docs/components/Label/examples/Label.md +31 -31
  127. package/docs/components/LabelGroup/examples/LabelGroup.md +24 -36
  128. package/docs/components/List/examples/List.md +18 -18
  129. package/docs/components/LogViewer/examples/LogViewer.md +69 -69
  130. package/docs/components/Login/examples/Login.md +32 -32
  131. package/docs/components/Masthead/examples/masthead.md +9 -9
  132. package/docs/components/Menu/examples/Menu.md +82 -80
  133. package/docs/components/MenuToggle/examples/MenuToggle.md +28 -28
  134. package/docs/components/ModalBox/examples/ModalBox.md +106 -85
  135. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +25 -25
  136. package/docs/components/Nav/examples/Navigation.md +69 -69
  137. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  138. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +44 -44
  139. package/docs/components/NumberInput/examples/NumberInput.md +12 -12
  140. package/docs/components/OptionsMenu/examples/options-menu.md +27 -28
  141. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  142. package/docs/components/Page/examples/Page.md +54 -54
  143. package/docs/components/Pagination/examples/Pagination.md +129 -30
  144. package/docs/components/Panel/examples/Panel.md +10 -10
  145. package/docs/components/Popover/examples/Popover.md +34 -34
  146. package/docs/components/Progress/examples/Progress.md +31 -60
  147. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -38
  148. package/docs/components/Radio/examples/Radio.md +11 -11
  149. package/docs/components/SearchInput/examples/SearchInput.md +34 -34
  150. package/docs/components/Select/examples/Select.md +143 -143
  151. package/docs/components/Sidebar/examples/Sidebar.md +14 -14
  152. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  153. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  154. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  155. package/docs/components/Slider/examples/Slider.md +30 -30
  156. package/docs/components/Spinner/examples/Spinner.md +24 -24
  157. package/docs/components/Switch/examples/Switch.md +19 -19
  158. package/docs/components/TabContent/examples/TabContent.md +13 -13
  159. package/docs/components/Table/examples/Table.md +1272 -855
  160. package/docs/components/Tabs/examples/Tabs.md +149 -149
  161. package/docs/components/TextInputGroup/examples/TextInputGroup.md +19 -19
  162. package/docs/components/Tile/examples/Tile.md +15 -15
  163. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  164. package/docs/components/Title/examples/Title.md +17 -17
  165. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  166. package/docs/components/Toolbar/examples/Toolbar.md +165 -144
  167. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  168. package/docs/components/TreeView/examples/TreeView.md +34 -34
  169. package/docs/components/Truncate/examples/Truncate.md +4 -4
  170. package/docs/components/Wizard/examples/Wizard.md +63 -70
  171. package/docs/demos/AboutModal/examples/AboutModal.md +4 -4
  172. package/docs/demos/Alert/examples/Alert.md +13 -13
  173. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  174. package/docs/demos/Banner/examples/Banner.md +10 -11
  175. package/docs/demos/Card/examples/Card.md +151 -116
  176. package/docs/demos/CardView/examples/CardView.md +16 -15
  177. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  178. package/docs/demos/Dashboard/examples/Dashboard.md +10 -9
  179. package/docs/demos/DataList/examples/DataList.md +160 -111
  180. package/docs/demos/DescriptionList/examples/DescriptionList.md +12 -13
  181. package/docs/demos/Drawer/examples/Drawer.md +20 -20
  182. package/docs/demos/HelperText/examples/HelperText.md +8 -9
  183. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  184. package/docs/demos/Masthead/examples/Masthead.md +32 -35
  185. package/docs/demos/Modal/examples/Modal.md +54 -66
  186. package/docs/demos/Nav/examples/Nav.md +720 -767
  187. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -28
  188. package/docs/demos/Page/examples/Page.md +37 -37
  189. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +32 -33
  190. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +53 -49
  191. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  192. package/docs/demos/Table/examples/Table.md +522 -378
  193. package/docs/demos/Tabs/examples/Tabs.md +120 -601
  194. package/docs/demos/Toolbar/examples/Toolbar.md +1781 -171
  195. package/docs/demos/Wizard/examples/Wizard.md +229 -225
  196. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  197. package/docs/layouts/Flex/examples/Flex.md +98 -98
  198. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  199. package/docs/layouts/Grid/examples/Grid.md +9 -9
  200. package/docs/layouts/Level/examples/Level.md +5 -5
  201. package/docs/layouts/Split/examples/Split.md +7 -7
  202. package/docs/layouts/Stack/examples/Stack.md +6 -6
  203. package/docs/utilities/Accessibility/examples/Accessibility.md +4 -4
  204. package/docs/utilities/Alignment/examples/Alignment.md +6 -6
  205. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +12 -12
  206. package/docs/utilities/BoxShadow/examples/box-shadow.md +22 -22
  207. package/docs/utilities/Display/examples/Display.md +11 -11
  208. package/docs/utilities/Flex/examples/Flex.md +34 -34
  209. package/docs/utilities/Float/examples/Float.md +4 -4
  210. package/docs/utilities/Sizing/examples/Sizing.md +50 -50
  211. package/docs/utilities/Spacing/examples/Spacing.md +34 -34
  212. package/docs/utilities/Text/examples/Text.md +27 -27
  213. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  214. package/layouts/Grid/grid.css +5 -5
  215. package/package.json +59 -64
  216. package/patternfly-base-no-reset.css +5 -11
  217. package/patternfly-base.css +5 -11
  218. package/patternfly-no-reset.css +524 -336
  219. package/patternfly.css +524 -336
  220. package/patternfly.min.css +1 -1
  221. package/patternfly.min.css.map +1 -1
  222. package/sass-utilities/scss-variables.scss +0 -1
package/docs/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  id: 'Password strength'
3
- beta: true
4
3
  section: demos
5
4
  ---## Examples
6
5
 
@@ -46,32 +45,32 @@ section: demos
46
45
  </button>
47
46
  </div>
48
47
  <div class="pf-c-form__helper-text">
49
- <ul class="pf-c-helper-text">
50
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
48
+ <div class="pf-c-helper-text">
49
+ <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
51
50
  <span class="pf-c-helper-text__item-icon">
52
51
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
53
52
  </span>
54
53
  <span
55
54
  class="pf-c-helper-text__item-text"
56
55
  >Must be at least 14 characters</span>
57
- </li>
58
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
56
+ </div>
57
+ <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
59
58
  <span class="pf-c-helper-text__item-icon">
60
59
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
61
60
  </span>
62
61
  <span
63
62
  class="pf-c-helper-text__item-text"
64
63
  >Cannot contain the word "redhat"</span>
65
- </li>
66
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
64
+ </div>
65
+ <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
67
66
  <span class="pf-c-helper-text__item-icon">
68
67
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
69
68
  </span>
70
69
  <span
71
70
  class="pf-c-helper-text__item-text"
72
71
  >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
73
- </li>
74
- </ul>
72
+ </div>
73
+ </div>
75
74
  </div>
76
75
  </div>
77
76
  </div>
@@ -121,32 +120,32 @@ section: demos
121
120
  </button>
122
121
  </div>
123
122
  <div class="pf-c-form__helper-text">
124
- <ul class="pf-c-helper-text">
125
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
123
+ <div class="pf-c-helper-text">
124
+ <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
126
125
  <span class="pf-c-helper-text__item-icon">
127
126
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
128
127
  </span>
129
128
  <span
130
129
  class="pf-c-helper-text__item-text"
131
130
  >Must be at least 14 characters</span>
132
- </li>
133
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-error">
131
+ </div>
132
+ <div class="pf-c-helper-text__item pf-m-dynamic pf-m-error">
134
133
  <span class="pf-c-helper-text__item-icon">
135
134
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
136
135
  </span>
137
136
  <span
138
137
  class="pf-c-helper-text__item-text"
139
138
  >Cannot contain the word "redhat"</span>
140
- </li>
141
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
139
+ </div>
140
+ <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
142
141
  <span class="pf-c-helper-text__item-icon">
143
142
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
144
143
  </span>
145
144
  <span
146
145
  class="pf-c-helper-text__item-text"
147
146
  >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
148
- </li>
149
- </ul>
147
+ </div>
148
+ </div>
150
149
  </div>
151
150
  </div>
152
151
  </div>
@@ -205,32 +204,32 @@ section: demos
205
204
  </button>
206
205
  </div>
207
206
  <div class="pf-c-form__helper-text">
208
- <ul class="pf-c-helper-text">
209
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
207
+ <div class="pf-c-helper-text">
208
+ <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
210
209
  <span class="pf-c-helper-text__item-icon">
211
210
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
212
211
  </span>
213
212
  <span
214
213
  class="pf-c-helper-text__item-text"
215
214
  >Must be at least 14 characters</span>
216
- </li>
217
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
215
+ </div>
216
+ <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
218
217
  <span class="pf-c-helper-text__item-icon">
219
218
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
220
219
  </span>
221
220
  <span
222
221
  class="pf-c-helper-text__item-text"
223
222
  >Cannot contain the word "redhat"</span>
224
- </li>
225
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
223
+ </div>
224
+ <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
226
225
  <span class="pf-c-helper-text__item-icon">
227
226
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
228
227
  </span>
229
228
  <span
230
229
  class="pf-c-helper-text__item-text"
231
230
  >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
232
- </li>
233
- </ul>
231
+ </div>
232
+ </div>
234
233
  </div>
235
234
  </div>
236
235
  </div>
@@ -289,32 +288,32 @@ section: demos
289
288
  </button>
290
289
  </div>
291
290
  <div class="pf-c-form__helper-text">
292
- <ul class="pf-c-helper-text">
293
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
291
+ <div class="pf-c-helper-text">
292
+ <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
294
293
  <span class="pf-c-helper-text__item-icon">
295
294
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
296
295
  </span>
297
296
  <span
298
297
  class="pf-c-helper-text__item-text"
299
298
  >Must be at least 14 characters</span>
300
- </li>
301
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
299
+ </div>
300
+ <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
302
301
  <span class="pf-c-helper-text__item-icon">
303
302
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
304
303
  </span>
305
304
  <span
306
305
  class="pf-c-helper-text__item-text"
307
306
  >Cannot contain the word "redhat"</span>
308
- </li>
309
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
307
+ </div>
308
+ <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
310
309
  <span class="pf-c-helper-text__item-icon">
311
310
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
312
311
  </span>
313
312
  <span
314
313
  class="pf-c-helper-text__item-text"
315
314
  >Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
316
- </li>
317
- </ul>
315
+ </div>
316
+ </div>
318
317
  </div>
319
318
  </div>
320
319
  </div>
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -99,7 +99,7 @@ wrapperTag: div
99
99
  </div>
100
100
  <section class="pf-c-app-launcher__group">
101
101
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
102
- <ul>
102
+ <ul role="list">
103
103
  <li
104
104
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
105
105
  >
@@ -151,7 +151,7 @@ wrapperTag: div
151
151
  <hr class="pf-c-divider" />
152
152
  <section class="pf-c-app-launcher__group">
153
153
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
154
- <ul>
154
+ <ul role="list">
155
155
  <li
156
156
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
157
157
  >
@@ -806,7 +806,7 @@ wrapperTag: div
806
806
  id="primary-detail-expanded-example-primary-nav"
807
807
  aria-label="Global"
808
808
  >
809
- <ul class="pf-c-nav__list">
809
+ <ul class="pf-c-nav__list" role="list">
810
810
  <li class="pf-c-nav__item">
811
811
  <a href="#" class="pf-c-nav__link">System panel</a>
812
812
  </li>
@@ -838,7 +838,7 @@ wrapperTag: div
838
838
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
839
839
  <div class="pf-c-page__main-body">
840
840
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
841
- <ol class="pf-c-breadcrumb__list">
841
+ <ol class="pf-c-breadcrumb__list" role="list">
842
842
  <li class="pf-c-breadcrumb__item">
843
843
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
844
844
  </li>
@@ -944,7 +944,6 @@ wrapperTag: div
944
944
  role="listbox"
945
945
  aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label"
946
946
  hidden
947
- style="width: 175px"
948
947
  >
949
948
  <li role="presentation">
950
949
  <button
@@ -984,7 +983,10 @@ wrapperTag: div
984
983
  </li>
985
984
  </ul>
986
985
  </div>
987
- <div class="pf-c-text-input-group">
986
+ <div
987
+ class="pf-c-text-input-group"
988
+ style="width: auto"
989
+ >
988
990
  <div class="pf-c-text-input-group__main pf-m-icon">
989
991
  <span class="pf-c-text-input-group__text">
990
992
  <span class="pf-c-text-input-group__icon">
@@ -992,9 +994,9 @@ wrapperTag: div
992
994
  </span>
993
995
  <input
994
996
  class="pf-c-text-input-group__text-input"
995
- type="text"
996
- value
997
+ type="search"
997
998
  placeholder="Filter by name"
999
+ value
998
1000
  aria-label="Type to filter"
999
1001
  />
1000
1002
  </span>
@@ -1976,7 +1978,7 @@ wrapperTag: div
1976
1978
  </div>
1977
1979
  <section class="pf-c-app-launcher__group">
1978
1980
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1979
- <ul>
1981
+ <ul role="list">
1980
1982
  <li
1981
1983
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1982
1984
  >
@@ -2028,7 +2030,7 @@ wrapperTag: div
2028
2030
  <hr class="pf-c-divider" />
2029
2031
  <section class="pf-c-app-launcher__group">
2030
2032
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
2031
- <ul>
2033
+ <ul role="list">
2032
2034
  <li
2033
2035
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
2034
2036
  >
@@ -2683,7 +2685,7 @@ wrapperTag: div
2683
2685
  id="primary-detail-collapsed-example-primary-nav"
2684
2686
  aria-label="Global"
2685
2687
  >
2686
- <ul class="pf-c-nav__list">
2688
+ <ul class="pf-c-nav__list" role="list">
2687
2689
  <li class="pf-c-nav__item">
2688
2690
  <a href="#" class="pf-c-nav__link">System panel</a>
2689
2691
  </li>
@@ -2715,7 +2717,7 @@ wrapperTag: div
2715
2717
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2716
2718
  <div class="pf-c-page__main-body">
2717
2719
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
2718
- <ol class="pf-c-breadcrumb__list">
2720
+ <ol class="pf-c-breadcrumb__list" role="list">
2719
2721
  <li class="pf-c-breadcrumb__item">
2720
2722
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
2721
2723
  </li>
@@ -2821,7 +2823,6 @@ wrapperTag: div
2821
2823
  role="listbox"
2822
2824
  aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
2823
2825
  hidden
2824
- style="width: 175px"
2825
2826
  >
2826
2827
  <li role="presentation">
2827
2828
  <button
@@ -2861,7 +2862,10 @@ wrapperTag: div
2861
2862
  </li>
2862
2863
  </ul>
2863
2864
  </div>
2864
- <div class="pf-c-text-input-group">
2865
+ <div
2866
+ class="pf-c-text-input-group"
2867
+ style="width: auto"
2868
+ >
2865
2869
  <div class="pf-c-text-input-group__main pf-m-icon">
2866
2870
  <span class="pf-c-text-input-group__text">
2867
2871
  <span class="pf-c-text-input-group__icon">
@@ -2869,9 +2873,9 @@ wrapperTag: div
2869
2873
  </span>
2870
2874
  <input
2871
2875
  class="pf-c-text-input-group__text-input"
2872
- type="text"
2873
- value
2876
+ type="search"
2874
2877
  placeholder="Filter by name"
2878
+ value
2875
2879
  aria-label="Type to filter"
2876
2880
  />
2877
2881
  </span>
@@ -3780,7 +3784,7 @@ wrapperTag: div
3780
3784
  </div>
3781
3785
  <section class="pf-c-app-launcher__group">
3782
3786
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
3783
- <ul>
3787
+ <ul role="list">
3784
3788
  <li
3785
3789
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3786
3790
  >
@@ -3832,7 +3836,7 @@ wrapperTag: div
3832
3836
  <hr class="pf-c-divider" />
3833
3837
  <section class="pf-c-app-launcher__group">
3834
3838
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
3835
- <ul>
3839
+ <ul role="list">
3836
3840
  <li
3837
3841
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
3838
3842
  >
@@ -4487,7 +4491,7 @@ wrapperTag: div
4487
4491
  id="primary-detail-content-body-padding-example-primary-nav"
4488
4492
  aria-label="Global"
4489
4493
  >
4490
- <ul class="pf-c-nav__list">
4494
+ <ul class="pf-c-nav__list" role="list">
4491
4495
  <li class="pf-c-nav__item">
4492
4496
  <a href="#" class="pf-c-nav__link">System panel</a>
4493
4497
  </li>
@@ -4519,7 +4523,7 @@ wrapperTag: div
4519
4523
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
4520
4524
  <div class="pf-c-page__main-body">
4521
4525
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
4522
- <ol class="pf-c-breadcrumb__list">
4526
+ <ol class="pf-c-breadcrumb__list" role="list">
4523
4527
  <li class="pf-c-breadcrumb__item">
4524
4528
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
4525
4529
  </li>
@@ -5489,7 +5493,7 @@ wrapperTag: div
5489
5493
  </div>
5490
5494
  <section class="pf-c-app-launcher__group">
5491
5495
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
5492
- <ul>
5496
+ <ul role="list">
5493
5497
  <li
5494
5498
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
5495
5499
  >
@@ -5541,7 +5545,7 @@ wrapperTag: div
5541
5545
  <hr class="pf-c-divider" />
5542
5546
  <section class="pf-c-app-launcher__group">
5543
5547
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
5544
- <ul>
5548
+ <ul role="list">
5545
5549
  <li
5546
5550
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
5547
5551
  >
@@ -6196,7 +6200,7 @@ wrapperTag: div
6196
6200
  id="primary-detail-card-view-expanded-example-primary-nav"
6197
6201
  aria-label="Global"
6198
6202
  >
6199
- <ul class="pf-c-nav__list">
6203
+ <ul class="pf-c-nav__list" role="list">
6200
6204
  <li class="pf-c-nav__item">
6201
6205
  <a href="#" class="pf-c-nav__link">System panel</a>
6202
6206
  </li>
@@ -6228,7 +6232,7 @@ wrapperTag: div
6228
6232
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
6229
6233
  <div class="pf-c-page__main-body">
6230
6234
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
6231
- <ol class="pf-c-breadcrumb__list">
6235
+ <ol class="pf-c-breadcrumb__list" role="list">
6232
6236
  <li class="pf-c-breadcrumb__item">
6233
6237
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
6234
6238
  </li>
@@ -6269,7 +6273,6 @@ wrapperTag: div
6269
6273
  </div>
6270
6274
  </div>
6271
6275
  </section>
6272
- <div class="pf-c-divider" role="separator"></div>
6273
6276
  <section class="pf-c-page__main-section pf-m-no-padding">
6274
6277
  <!-- Drawer -->
6275
6278
  <div class="pf-c-drawer pf-m-expanded pf-m-inline-on-2xl">
@@ -6301,11 +6304,14 @@ wrapperTag: div
6301
6304
  class="pf-c-dropdown__toggle-check"
6302
6305
  for="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
6303
6306
  >
6304
- <input
6305
- type="checkbox"
6306
- id="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
6307
- aria-label="Select all"
6308
- />
6307
+ <div class="pf-c-check pf-m-standalone">
6308
+ <input
6309
+ class="pf-c-check__input"
6310
+ type="checkbox"
6311
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-bulk-select-toggle-check"
6312
+ aria-label="Select all"
6313
+ />
6314
+ </div>
6309
6315
  </label>
6310
6316
 
6311
6317
  <button
@@ -6377,7 +6383,6 @@ wrapperTag: div
6377
6383
  role="listbox"
6378
6384
  aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
6379
6385
  hidden
6380
- style="width: 175px"
6381
6386
  >
6382
6387
  <li role="presentation">
6383
6388
  <button
@@ -6417,7 +6422,7 @@ wrapperTag: div
6417
6422
  </li>
6418
6423
  </ul>
6419
6424
  </div>
6420
- <div class="pf-c-text-input-group">
6425
+ <div class="pf-c-text-input-group" style="width: auto">
6421
6426
  <div class="pf-c-text-input-group__main pf-m-icon">
6422
6427
  <span class="pf-c-text-input-group__text">
6423
6428
  <span class="pf-c-text-input-group__icon">
@@ -6425,9 +6430,9 @@ wrapperTag: div
6425
6430
  </span>
6426
6431
  <input
6427
6432
  class="pf-c-text-input-group__text-input"
6428
- type="text"
6429
- value
6433
+ type="search"
6430
6434
  placeholder="Filter by name"
6435
+ value
6431
6436
  aria-label="Type to filter"
6432
6437
  />
6433
6438
  </span>
@@ -7616,7 +7621,7 @@ wrapperTag: div
7616
7621
  </div>
7617
7622
  <section class="pf-c-app-launcher__group">
7618
7623
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
7619
- <ul>
7624
+ <ul role="list">
7620
7625
  <li
7621
7626
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
7622
7627
  >
@@ -7668,7 +7673,7 @@ wrapperTag: div
7668
7673
  <hr class="pf-c-divider" />
7669
7674
  <section class="pf-c-app-launcher__group">
7670
7675
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
7671
- <ul>
7676
+ <ul role="list">
7672
7677
  <li
7673
7678
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
7674
7679
  >
@@ -8323,7 +8328,7 @@ wrapperTag: div
8323
8328
  id="primary-detail-card-simple-list-on-mobile-example-primary-nav"
8324
8329
  aria-label="Global"
8325
8330
  >
8326
- <ul class="pf-c-nav__list">
8331
+ <ul class="pf-c-nav__list" role="list">
8327
8332
  <li class="pf-c-nav__item">
8328
8333
  <a href="#" class="pf-c-nav__link">System panel</a>
8329
8334
  </li>
@@ -8355,7 +8360,7 @@ wrapperTag: div
8355
8360
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
8356
8361
  <div class="pf-c-page__main-body">
8357
8362
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
8358
- <ol class="pf-c-breadcrumb__list">
8363
+ <ol class="pf-c-breadcrumb__list" role="list">
8359
8364
  <li class="pf-c-breadcrumb__item">
8360
8365
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
8361
8366
  </li>
@@ -8407,7 +8412,7 @@ wrapperTag: div
8407
8412
  <div class="pf-c-simple-list">
8408
8413
  <section class="pf-c-simple-list__section">
8409
8414
  <h2 class="pf-c-simple-list__title">Section title</h2>
8410
- <ul class="pf-c-simple-list__list">
8415
+ <ul class="pf-c-simple-list__list" role="list">
8411
8416
  <li class="pf-c-simple-list__item">
8412
8417
  <button
8413
8418
  class="pf-c-simple-list__item-link pf-m-current"
@@ -8436,7 +8441,7 @@ wrapperTag: div
8436
8441
  </section>
8437
8442
  <section class="pf-c-simple-list__section">
8438
8443
  <h2 class="pf-c-simple-list__title">Section title</h2>
8439
- <ul class="pf-c-simple-list__list">
8444
+ <ul class="pf-c-simple-list__list" role="list">
8440
8445
  <li class="pf-c-simple-list__item">
8441
8446
  <button
8442
8447
  class="pf-c-simple-list__item-link"
@@ -8677,7 +8682,7 @@ wrapperTag: div
8677
8682
  </div>
8678
8683
  <section class="pf-c-app-launcher__group">
8679
8684
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
8680
- <ul>
8685
+ <ul role="list">
8681
8686
  <li
8682
8687
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
8683
8688
  >
@@ -8729,7 +8734,7 @@ wrapperTag: div
8729
8734
  <hr class="pf-c-divider" />
8730
8735
  <section class="pf-c-app-launcher__group">
8731
8736
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
8732
- <ul>
8737
+ <ul role="list">
8733
8738
  <li
8734
8739
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
8735
8740
  >
@@ -9384,7 +9389,7 @@ wrapperTag: div
9384
9389
  id="primary-detail-card-data-list-example-primary-nav"
9385
9390
  aria-label="Global"
9386
9391
  >
9387
- <ul class="pf-c-nav__list">
9392
+ <ul class="pf-c-nav__list" role="list">
9388
9393
  <li class="pf-c-nav__item">
9389
9394
  <a href="#" class="pf-c-nav__link">System panel</a>
9390
9395
  </li>
@@ -9416,7 +9421,7 @@ wrapperTag: div
9416
9421
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
9417
9422
  <div class="pf-c-page__main-body">
9418
9423
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
9419
- <ol class="pf-c-breadcrumb__list">
9424
+ <ol class="pf-c-breadcrumb__list" role="list">
9420
9425
  <li class="pf-c-breadcrumb__item">
9421
9426
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
9422
9427
  </li>
@@ -9982,7 +9987,7 @@ wrapperTag: div
9982
9987
  </div>
9983
9988
  <section class="pf-c-app-launcher__group">
9984
9989
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
9985
- <ul>
9990
+ <ul role="list">
9986
9991
  <li
9987
9992
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
9988
9993
  >
@@ -10034,7 +10039,7 @@ wrapperTag: div
10034
10039
  <hr class="pf-c-divider" />
10035
10040
  <section class="pf-c-app-launcher__group">
10036
10041
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
10037
- <ul>
10042
+ <ul role="list">
10038
10043
  <li
10039
10044
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
10040
10045
  >
@@ -10689,7 +10694,7 @@ wrapperTag: div
10689
10694
  id="primary-detail-inline-modifier-example-primary-nav"
10690
10695
  aria-label="Global"
10691
10696
  >
10692
- <ul class="pf-c-nav__list">
10697
+ <ul class="pf-c-nav__list" role="list">
10693
10698
  <li class="pf-c-nav__item">
10694
10699
  <a href="#" class="pf-c-nav__link">System panel</a>
10695
10700
  </li>
@@ -10721,7 +10726,7 @@ wrapperTag: div
10721
10726
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
10722
10727
  <div class="pf-c-page__main-body">
10723
10728
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
10724
- <ol class="pf-c-breadcrumb__list">
10729
+ <ol class="pf-c-breadcrumb__list" role="list">
10725
10730
  <li class="pf-c-breadcrumb__item">
10726
10731
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
10727
10732
  </li>
@@ -10763,7 +10768,6 @@ wrapperTag: div
10763
10768
  </div>
10764
10769
  </section>
10765
10770
  <div class="pf-c-divider" role="separator"></div>
10766
-
10767
10771
  <div class="pf-c-drawer pf-m-expanded pf-m-inline-on-2xl">
10768
10772
  <div class="pf-c-drawer__main">
10769
10773
  <!-- Content -->
package/docs/demos/Skeleton/examples/Skeleton.md CHANGED
@@ -95,7 +95,7 @@ section: components
95
95
  </div>
96
96
  <section class="pf-c-app-launcher__group">
97
97
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
98
- <ul>
98
+ <ul role="list">
99
99
  <li
100
100
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
101
101
  >
@@ -147,7 +147,7 @@ section: components
147
147
  <hr class="pf-c-divider" />
148
148
  <section class="pf-c-app-launcher__group">
149
149
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
150
- <ul>
150
+ <ul role="list">
151
151
  <li
152
152
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
153
153
  >
@@ -802,7 +802,7 @@ section: components
802
802
  id="skeleton-basic-example-primary-nav"
803
803
  aria-label="Global"
804
804
  >
805
- <ul class="pf-c-nav__list">
805
+ <ul class="pf-c-nav__list" role="list">
806
806
  <li class="pf-c-nav__item">
807
807
  <a href="#" class="pf-c-nav__link">System panel</a>
808
808
  </li>
@@ -834,7 +834,7 @@ section: components
834
834
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
835
835
  <div class="pf-c-page__main-body">
836
836
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
837
- <ol class="pf-c-breadcrumb__list">
837
+ <ol class="pf-c-breadcrumb__list" role="list">
838
838
  <li class="pf-c-breadcrumb__item">
839
839
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
840
840
  </li>