@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/Banner/examples/Banner.md CHANGED
@@ -1,7 +1,6 @@
1
1
  ---
2
2
  id: 'Banner'
3
3
  section: components
4
- beta: true
5
4
  cssPrefix: pf-c-banner
6
5
  wrapperTag: div
7
6
  ---## Examples
@@ -98,7 +97,7 @@ wrapperTag: div
98
97
  </div>
99
98
  <section class="pf-c-app-launcher__group">
100
99
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
101
- <ul>
100
+ <ul role="list">
102
101
  <li
103
102
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
104
103
  >
@@ -150,7 +149,7 @@ wrapperTag: div
150
149
  <hr class="pf-c-divider" />
151
150
  <section class="pf-c-app-launcher__group">
152
151
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
153
- <ul>
152
+ <ul role="list">
154
153
  <li
155
154
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
156
155
  >
@@ -805,7 +804,7 @@ wrapperTag: div
805
804
  id="banner-basic-example-primary-nav"
806
805
  aria-label="Global"
807
806
  >
808
- <ul class="pf-c-nav__list">
807
+ <ul class="pf-c-nav__list" role="list">
809
808
  <li class="pf-c-nav__item">
810
809
  <a href="#" class="pf-c-nav__link">System panel</a>
811
810
  </li>
@@ -851,7 +850,7 @@ wrapperTag: div
851
850
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
852
851
  <div class="pf-c-page__main-body">
853
852
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
854
- <ol class="pf-c-breadcrumb__list">
853
+ <ol class="pf-c-breadcrumb__list" role="list">
855
854
  <li class="pf-c-breadcrumb__item">
856
855
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
857
856
  </li>
@@ -892,7 +891,7 @@ wrapperTag: div
892
891
  </div>
893
892
  </div>
894
893
  </section>
895
- <section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
894
+ <section class="pf-c-page__main-section pf-m-limit-width">
896
895
  <div class="pf-c-page__main-body">
897
896
  <div class="pf-l-gallery pf-m-gutter">
898
897
  <div class="pf-c-card">
@@ -1165,7 +1164,7 @@ wrapperTag: div
1165
1164
  </div>
1166
1165
  <section class="pf-c-app-launcher__group">
1167
1166
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1168
- <ul>
1167
+ <ul role="list">
1169
1168
  <li
1170
1169
  class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1171
1170
  >
@@ -1221,7 +1220,7 @@ wrapperTag: div
1221
1220
  <hr class="pf-c-divider" />
1222
1221
  <section class="pf-c-app-launcher__group">
1223
1222
  <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1224
- <ul>
1223
+ <ul role="list">
1225
1224
  <li
1226
1225
  class="pf-c-app-launcher__menu-wrapper pf-m-external"
1227
1226
  >
@@ -1936,7 +1935,7 @@ wrapperTag: div
1936
1935
  id="banner-top-bottom-example-primary-nav"
1937
1936
  aria-label="Global"
1938
1937
  >
1939
- <ul class="pf-c-nav__list">
1938
+ <ul class="pf-c-nav__list" role="list">
1940
1939
  <li class="pf-c-nav__item">
1941
1940
  <a href="#" class="pf-c-nav__link">System panel</a>
1942
1941
  </li>
@@ -1968,7 +1967,7 @@ wrapperTag: div
1968
1967
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1969
1968
  <div class="pf-c-page__main-body">
1970
1969
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1971
- <ol class="pf-c-breadcrumb__list">
1970
+ <ol class="pf-c-breadcrumb__list" role="list">
1972
1971
  <li class="pf-c-breadcrumb__item">
1973
1972
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1974
1973
  </li>
@@ -2009,7 +2008,7 @@ wrapperTag: div
2009
2008
  </div>
2010
2009
  </div>
2011
2010
  </section>
2012
- <section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
2011
+ <section class="pf-c-page__main-section pf-m-limit-width">
2013
2012
  <div class="pf-c-page__main-body">
2014
2013
  <div class="pf-l-gallery pf-m-gutter">
2015
2014
  <div class="pf-c-card">
package/docs/demos/Card/examples/Card.md CHANGED
@@ -68,57 +68,59 @@ wrapperTag: div
68
68
  </ul>
69
69
  </div>
70
70
  </div>
71
- <div class="pf-l-level pf-m-gutter">
72
- <div
73
- class="pf-c-card__title"
74
- id="card-demo-horizontal-grid-collapsed-example-title"
75
- >Getting started</div>
76
- <div class="pf-c-label-group">
77
- <div class="pf-c-label-group__main">
78
- <ul
79
- class="pf-c-label-group__list"
80
- role="list"
81
- aria-label="Group of labels"
82
- >
83
- <li class="pf-c-label-group__list-item">
84
- <span class="pf-c-label pf-m-blue pf-m-compact">
85
- <span class="pf-c-label__content">
86
- <span class="pf-c-label__icon">
87
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
71
+ <div class="pf-c-card__header-main">
72
+ <div class="pf-l-split pf-m-gutter pf-m-wrap">
73
+ <div
74
+ class="pf-c-card__title"
75
+ id="card-demo-horizontal-grid-collapsed-example-title"
76
+ >Getting started</div>
77
+ <div class="pf-c-label-group">
78
+ <div class="pf-c-label-group__main">
79
+ <ul
80
+ class="pf-c-label-group__list"
81
+ role="list"
82
+ aria-label="Group of labels"
83
+ >
84
+ <li class="pf-c-label-group__list-item">
85
+ <span class="pf-c-label pf-m-blue pf-m-compact">
86
+ <span class="pf-c-label__content">
87
+ <span class="pf-c-label__icon">
88
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
89
+ </span>
90
+ Set up your cluster
88
91
  </span>
89
- Set up your cluster
90
92
  </span>
91
- </span>
92
- </li>
93
- <li class="pf-c-label-group__list-item">
94
- <span class="pf-c-label pf-m-purple pf-m-compact">
95
- <span class="pf-c-label__content">
96
- <span class="pf-c-label__icon">
97
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
93
+ </li>
94
+ <li class="pf-c-label-group__list-item">
95
+ <span class="pf-c-label pf-m-purple pf-m-compact">
96
+ <span class="pf-c-label__content">
97
+ <span class="pf-c-label__icon">
98
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
99
+ </span>
100
+ Guided tours
98
101
  </span>
99
- Guided tours
100
102
  </span>
101
- </span>
102
- </li>
103
- <li class="pf-c-label-group__list-item">
104
- <span class="pf-c-label pf-m-green pf-m-compact">
105
- <span class="pf-c-label__content">
106
- <span class="pf-c-label__icon">
107
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
103
+ </li>
104
+ <li class="pf-c-label-group__list-item">
105
+ <span class="pf-c-label pf-m-green pf-m-compact">
106
+ <span class="pf-c-label__content">
107
+ <span class="pf-c-label__icon">
108
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
109
+ </span>
110
+ Quick starts
108
111
  </span>
109
- Quick starts
110
112
  </span>
111
- </span>
112
- </li>
113
- <li class="pf-c-label-group__list-item">
114
- <button
115
- class="pf-c-label pf-m-overflow pf-m-compact"
116
- type="button"
117
- >
118
- <span class="pf-c-label__content">1 more</span>
119
- </button>
120
- </li>
121
- </ul>
113
+ </li>
114
+ <li class="pf-c-label-group__list-item">
115
+ <button
116
+ class="pf-c-label pf-m-overflow pf-m-compact"
117
+ type="button"
118
+ >
119
+ <span class="pf-c-label__content">1 more</span>
120
+ </button>
121
+ </li>
122
+ </ul>
123
+ </div>
122
124
  </div>
123
125
  </div>
124
126
  </div>
@@ -192,10 +194,12 @@ wrapperTag: div
192
194
  </ul>
193
195
  </div>
194
196
  </div>
195
- <div
196
- class="pf-c-card__title"
197
- id="card-demo-horizontal-grid-expanded-example-title"
198
- >Getting started</div>
197
+ <div class="pf-c-card__header-main">
198
+ <div
199
+ class="pf-c-card__title"
200
+ id="card-demo-horizontal-grid-expanded-example-title"
201
+ >Getting started</div>
202
+ </div>
199
203
  </div>
200
204
  <div class="pf-c-card__expandable-content">
201
205
  <div class="pf-c-card__body">
@@ -217,7 +221,7 @@ wrapperTag: div
217
221
  </span>
218
222
  </span>
219
223
  <p>Continue setting up your cluster to access all you cain in the Console</p>
220
- <ul class="pf-c-list pf-m-plain">
224
+ <ul class="pf-c-list pf-m-plain" role="list">
221
225
  <li>
222
226
  <a href="#">Add identity provider</a>
223
227
  </li>
@@ -253,7 +257,7 @@ wrapperTag: div
253
257
  </span>
254
258
  </span>
255
259
  <p>Tour some of the key features around the console</p>
256
- <ul class="pf-c-list pf-m-plain">
260
+ <ul class="pf-c-list pf-m-plain" role="list">
257
261
  <li>
258
262
  <a href="#">Tour the console</a>
259
263
  </li>
@@ -284,7 +288,7 @@ wrapperTag: div
284
288
  </span>
285
289
  </span>
286
290
  <p>Get started with features using our step-by-step documentation</p>
287
- <ul class="pf-c-list pf-m-plain">
291
+ <ul class="pf-c-list pf-m-plain" role="list">
288
292
  <li>
289
293
  <a href="#">Getting started with Serverless</a>
290
294
  </li>
@@ -318,7 +322,7 @@ wrapperTag: div
318
322
  </span>
319
323
  </span>
320
324
  <p>Learn about new features within the Console and get started with demo apps</p>
321
- <ul class="pf-c-list pf-m-plain">
325
+ <ul class="pf-c-list pf-m-plain" role="list">
322
326
  <li>
323
327
  <a href="#">See what's possible with the Explore page</a>
324
328
  </li>
@@ -713,7 +717,9 @@ wrapperTag: div
713
717
  ```html
714
718
  <div class="pf-c-card">
715
719
  <div class="pf-c-card__header">
716
- <h2 class="pf-c-title pf-m-lg">Status</h2>
720
+ <div class="pf-c-card__header-main">
721
+ <h2 class="pf-c-title pf-m-lg">Status</h2>
722
+ </div>
717
723
  </div>
718
724
  <div class="pf-c-card__body">
719
725
  <div class="pf-c-tabs pf-m-fill" id="status-tabs">
@@ -990,7 +996,7 @@ wrapperTag: div
990
996
  1
991
997
  </span>
992
998
  </span>
993
- <span class="pf-c-label pf-m-orange pf-m-default">
999
+ <span class="pf-c-label pf-m-orange">
994
1000
  <span class="pf-c-label__content">
995
1001
  <span class="pf-c-label__icon">
996
1002
  <i
@@ -1033,7 +1039,7 @@ wrapperTag: div
1033
1039
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1034
1040
  </span>
1035
1041
  </button>
1036
- <ul class="pf-c-notification-drawer__list" hidden>
1042
+ <ul class="pf-c-notification-drawer__list" role="list" hidden>
1037
1043
  <li
1038
1044
  class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
1039
1045
  tabindex="0"
@@ -1183,7 +1189,7 @@ wrapperTag: div
1183
1189
  1
1184
1190
  </span>
1185
1191
  </span>
1186
- <span class="pf-c-label pf-m-orange pf-m-default">
1192
+ <span class="pf-c-label pf-m-orange">
1187
1193
  <span class="pf-c-label__content">
1188
1194
  <span class="pf-c-label__icon">
1189
1195
  <i
@@ -1226,7 +1232,7 @@ wrapperTag: div
1226
1232
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1227
1233
  </span>
1228
1234
  </button>
1229
- <ul class="pf-c-notification-drawer__list">
1235
+ <ul class="pf-c-notification-drawer__list" role="list">
1230
1236
  <li
1231
1237
  class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
1232
1238
  tabindex="0"
@@ -1630,7 +1636,7 @@ wrapperTag: div
1630
1636
  1
1631
1637
  </span>
1632
1638
  </span>
1633
- <span class="pf-c-label pf-m-orange pf-m-default">
1639
+ <span class="pf-c-label pf-m-orange">
1634
1640
  <span class="pf-c-label__content">
1635
1641
  <span class="pf-c-label__icon">
1636
1642
  <i
@@ -1673,7 +1679,7 @@ wrapperTag: div
1673
1679
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1674
1680
  </span>
1675
1681
  </button>
1676
- <ul class="pf-c-notification-drawer__list">
1682
+ <ul class="pf-c-notification-drawer__list" role="list">
1677
1683
  <li
1678
1684
  class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
1679
1685
  tabindex="0"
@@ -1819,12 +1825,14 @@ wrapperTag: div
1819
1825
  >
1820
1826
  <div class="pf-c-card" id="utilization-card-3-example">
1821
1827
  <div class="pf-c-card__header pf-u-align-items-flex-start">
1822
- <div
1823
- class="pf-c-card__title"
1824
- id="utilization-card-3-example-title1"
1825
- style="padding-top: 3px;"
1826
- >
1827
- <h2 class="pf-c-title pf-m-lg">Recommendations</h2>
1828
+ <div class="pf-c-card__header-main">
1829
+ <div
1830
+ class="pf-c-card__title"
1831
+ id="utilization-card-3-example-title1"
1832
+ style="padding-top: 3px;"
1833
+ >
1834
+ <h2 class="pf-c-title pf-m-lg">Recommendations</h2>
1835
+ </div>
1828
1836
  </div>
1829
1837
  <div class="pf-c-card__actions pf-m-no-offset">
1830
1838
  <div class="pf-c-select">
@@ -1938,8 +1946,13 @@ wrapperTag: div
1938
1946
  ```html
1939
1947
  <div class="pf-c-card" id="nested-cards-toggle-right-example">
1940
1948
  <div class="pf-c-card__header">
1941
- <div class="pf-c-card__title" id="nested-cards-toggle-right-example-title">
1942
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
1949
+ <div class="pf-c-card__header-main">
1950
+ <div
1951
+ class="pf-c-card__title"
1952
+ id="nested-cards-toggle-right-example-title"
1953
+ >
1954
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
1955
+ </div>
1943
1956
  </div>
1944
1957
  </div>
1945
1958
  <div
@@ -1960,11 +1973,13 @@ wrapperTag: div
1960
1973
  </span>
1961
1974
  </button>
1962
1975
  </div>
1963
- <div
1964
- class="pf-c-card__title"
1965
- id="nested-cards-toggle-right-example-group-1-title"
1966
- >
1967
- <span class="pf-u-font-weight-light">CPU 1</span>
1976
+ <div class="pf-c-card__header-main">
1977
+ <div
1978
+ class="pf-c-card__title"
1979
+ id="nested-cards-toggle-right-example-group-1-title"
1980
+ >
1981
+ <span class="pf-u-font-weight-light">CPU 1</span>
1982
+ </div>
1968
1983
  </div>
1969
1984
  </div>
1970
1985
  <div class="pf-c-card__expandable-content">
@@ -2069,11 +2084,13 @@ wrapperTag: div
2069
2084
  </span>
2070
2085
  </button>
2071
2086
  </div>
2072
- <div
2073
- class="pf-c-card__title"
2074
- id="nested-cards-toggle-right-example-group-2-title"
2075
- >
2076
- <span class="pf-u-font-weight-light">CPU 2</span>
2087
+ <div class="pf-c-card__header-main">
2088
+ <div
2089
+ class="pf-c-card__title"
2090
+ id="nested-cards-toggle-right-example-group-2-title"
2091
+ >
2092
+ <span class="pf-u-font-weight-light">CPU 2</span>
2093
+ </div>
2077
2094
  </div>
2078
2095
  </div>
2079
2096
  </div>
@@ -2095,11 +2112,13 @@ wrapperTag: div
2095
2112
  </span>
2096
2113
  </button>
2097
2114
  </div>
2098
- <div
2099
- class="pf-c-card__title"
2100
- id="nested-cards-toggle-right-example-group-3-title"
2101
- >
2102
- <span class="pf-u-font-weight-light">CPU 3</span>
2115
+ <div class="pf-c-card__header-main">
2116
+ <div
2117
+ class="pf-c-card__title"
2118
+ id="nested-cards-toggle-right-example-group-3-title"
2119
+ >
2120
+ <span class="pf-u-font-weight-light">CPU 3</span>
2121
+ </div>
2103
2122
  </div>
2104
2123
  </div>
2105
2124
  </div>
@@ -2112,8 +2131,10 @@ wrapperTag: div
2112
2131
  ```html
2113
2132
  <div class="pf-c-card" id="nested-cards-example">
2114
2133
  <div class="pf-c-card__header">
2115
- <div class="pf-c-card__title" id="nested-cards-example-title">
2116
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2134
+ <div class="pf-c-card__header-main">
2135
+ <div class="pf-c-card__title" id="nested-cards-example-title">
2136
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2137
+ </div>
2117
2138
  </div>
2118
2139
  </div>
2119
2140
  <div
@@ -2134,8 +2155,10 @@ wrapperTag: div
2134
2155
  </span>
2135
2156
  </button>
2136
2157
  </div>
2137
- <div class="pf-c-card__title" id="nested-cards-example-group-1-title">
2138
- <span class="pf-u-font-weight-light">CPU 1</span>
2158
+ <div class="pf-c-card__header-main">
2159
+ <div class="pf-c-card__title" id="nested-cards-example-group-1-title">
2160
+ <span class="pf-u-font-weight-light">CPU 1</span>
2161
+ </div>
2139
2162
  </div>
2140
2163
  </div>
2141
2164
  <div class="pf-c-card__expandable-content">
@@ -2237,8 +2260,10 @@ wrapperTag: div
2237
2260
  </span>
2238
2261
  </button>
2239
2262
  </div>
2240
- <div class="pf-c-card__title" id="nested-cards-example-group-2-title">
2241
- <span class="pf-u-font-weight-light">CPU 2</span>
2263
+ <div class="pf-c-card__header-main">
2264
+ <div class="pf-c-card__title" id="nested-cards-example-group-2-title">
2265
+ <span class="pf-u-font-weight-light">CPU 2</span>
2266
+ </div>
2242
2267
  </div>
2243
2268
  </div>
2244
2269
  </div>
@@ -2257,8 +2282,10 @@ wrapperTag: div
2257
2282
  </span>
2258
2283
  </button>
2259
2284
  </div>
2260
- <div class="pf-c-card__title" id="nested-cards-example-group-3-title">
2261
- <span class="pf-u-font-weight-light">CPU 3</span>
2285
+ <div class="pf-c-card__header-main">
2286
+ <div class="pf-c-card__title" id="nested-cards-example-group-3-title">
2287
+ <span class="pf-u-font-weight-light">CPU 3</span>
2288
+ </div>
2262
2289
  </div>
2263
2290
  </div>
2264
2291
  </div>
@@ -2271,8 +2298,10 @@ wrapperTag: div
2271
2298
  ```html
2272
2299
  <div class="pf-c-card" id="with-accordion-example">
2273
2300
  <div class="pf-c-card__header">
2274
- <div class="pf-c-card__title" id="with-accordion-example-title">
2275
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2301
+ <div class="pf-c-card__header-main">
2302
+ <div class="pf-c-card__title" id="with-accordion-example-title">
2303
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2304
+ </div>
2276
2305
  </div>
2277
2306
  </div>
2278
2307
  <div class="pf-c-card__body">
@@ -2585,7 +2614,7 @@ wrapperTag: div
2585
2614
  >
2586
2615
  <div class="pf-c-card" id="trend-card-1-example">
2587
2616
  <div class="pf-c-card__header">
2588
- <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2617
+ <div class="pf-c-card__header-main">
2589
2618
  <div class="pf-c-card__title" id="trend-card-1-example-title">
2590
2619
  <h1 class="pf-c-title pf-m-2xl">1,050,765 IOPS</h1>
2591
2620
  </div>
@@ -2670,18 +2699,20 @@ wrapperTag: div
2670
2699
  >
2671
2700
  <div class="pf-c-card" id="trend-card-2-example">
2672
2701
  <div class="pf-c-card__header">
2673
- <div class="pf-l-flex pf-m-align-items-center">
2674
- <div class="pf-l-flex__item pf-m-flex-none">
2675
- <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2676
- <div class="pf-c-card__title" id="trend-card-2-example-title">
2677
- <h1 class="pf-c-title pf-m-2xl">842 TB</h1>
2702
+ <div class="pf-c-card__header-main">
2703
+ <div class="pf-l-flex pf-m-align-items-center">
2704
+ <div class="pf-l-flex__item pf-m-flex-none">
2705
+ <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2706
+ <div class="pf-c-card__title" id="trend-card-2-example-title">
2707
+ <h1 class="pf-c-title pf-m-2xl">842 TB</h1>
2708
+ </div>
2709
+ <span class="pf-u-color-200">Storage capacity</span>
2678
2710
  </div>
2679
- <span class="pf-u-color-200">Storage capacity</span>
2680
2711
  </div>
2681
- </div>
2682
- <div class="pf-l-flex__item pf-m-flex-1">
2683
- <div class="ws-chart">
2684
- <img src="/assets/images/img_line-chart-1.png" alt="Line Chart" />
2712
+ <div class="pf-l-flex__item pf-m-flex-1">
2713
+ <div class="ws-chart">
2714
+ <img src="/assets/images/img_line-chart-1.png" alt="Line Chart" />
2715
+ </div>
2685
2716
  </div>
2686
2717
  </div>
2687
2718
  </div>
@@ -2769,12 +2800,14 @@ wrapperTag: div
2769
2800
  </ul>
2770
2801
  </div>
2771
2802
  </div>
2772
- <div
2773
- class="pf-c-card__title"
2774
- id="card-log-view-example-title1"
2775
- style="padding-top: 3px;"
2776
- >
2777
- <h2 class="pf-c-title pf-m-lg">Activity</h2>
2803
+ <div class="pf-c-card__header-main">
2804
+ <div
2805
+ class="pf-c-card__title"
2806
+ id="card-log-view-example-title1"
2807
+ style="padding-top: 3px;"
2808
+ >
2809
+ <h2 class="pf-c-title pf-m-lg">Activity</h2>
2810
+ </div>
2778
2811
  </div>
2779
2812
  </div>
2780
2813
  <div class="pf-c-card__body">
@@ -2914,12 +2947,14 @@ wrapperTag: div
2914
2947
  </ul>
2915
2948
  </div>
2916
2949
  </div>
2917
- <div
2918
- class="pf-c-card__title"
2919
- id="card-events-view-example-title1"
2920
- style="padding-top: 3px;"
2921
- >
2922
- <h2 class="pf-c-title pf-m-lg">Events</h2>
2950
+ <div class="pf-c-card__header-main">
2951
+ <div
2952
+ class="pf-c-card__title"
2953
+ id="card-events-view-example-title1"
2954
+ style="padding-top: 3px;"
2955
+ >
2956
+ <h2 class="pf-c-title pf-m-lg">Events</h2>
2957
+ </div>
2923
2958
  </div>
2924
2959
  </div>
2925
2960
  <div class="pf-c-card__body">
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -95,7 +95,7 @@ section: demos
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: demos
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: demos
802
802
  id="card-view-basic-example-expandable-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 pf-m-expandable pf-m-expanded pf-m-current">
807
807
  <button
808
808
  class="pf-c-nav__link"
@@ -820,7 +820,7 @@ section: demos
820
820
  class="pf-c-nav__subnav"
821
821
  aria-labelledby="card-view-basic-example-expandable-nav-link1"
822
822
  >
823
- <ul class="pf-c-nav__list">
823
+ <ul class="pf-c-nav__list" role="list">
824
824
  <li class="pf-c-nav__item">
825
825
  <a href="#" class="pf-c-nav__link">Overview</a>
826
826
  </li>
@@ -866,7 +866,7 @@ section: demos
866
866
  aria-labelledby="card-view-basic-example-expandable-nav-link2"
867
867
  hidden
868
868
  >
869
- <ul class="pf-c-nav__list">
869
+ <ul class="pf-c-nav__list" role="list">
870
870
  <li class="pf-c-nav__item">
871
871
  <a href="#" class="pf-c-nav__link">Subnav link 1</a>
872
872
  </li>
@@ -894,7 +894,7 @@ section: demos
894
894
  aria-labelledby="card-view-basic-example-expandable-nav-link3"
895
895
  hidden
896
896
  >
897
- <ul class="pf-c-nav__list">
897
+ <ul class="pf-c-nav__list" role="list">
898
898
  <li class="pf-c-nav__item">
899
899
  <a href="#" class="pf-c-nav__link">Subnav link 1</a>
900
900
  </li>
@@ -916,7 +916,7 @@ section: demos
916
916
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
917
917
  <div class="pf-c-page__main-body">
918
918
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
919
- <ol class="pf-c-breadcrumb__list">
919
+ <ol class="pf-c-breadcrumb__list" role="list">
920
920
  <li class="pf-c-breadcrumb__item">
921
921
  <a href="#" class="pf-c-breadcrumb__link">Section home</a>
922
922
  </li>
@@ -983,11 +983,14 @@ section: demos
983
983
  class="pf-c-dropdown__toggle-check"
984
984
  for="card-view-basic-example-toolbar-bulk-select-toggle-check"
985
985
  >
986
- <input
987
- type="checkbox"
988
- id="card-view-basic-example-toolbar-bulk-select-toggle-check"
989
- aria-label="Select all"
990
- />
986
+ <div class="pf-c-check pf-m-standalone">
987
+ <input
988
+ class="pf-c-check__input"
989
+ type="checkbox"
990
+ id="card-view-basic-example-toolbar-bulk-select-toggle-check"
991
+ aria-label="Select all"
992
+ />
993
+ </div>
991
994
  </label>
992
995
 
993
996
  <button
@@ -1263,9 +1266,7 @@ section: demos
1263
1266
  <div class="pf-c-empty-state__content">
1264
1267
  <i class="fas fa-plus-circle pf-c-empty-state__icon"></i>
1265
1268
  <h2 class="pf-c-title pf-m-md">Add a new card to your page</h2>
1266
- <div class="pf-c-empty-state__secondary">
1267
- <button class="pf-c-button pf-m-link" type="button">Add card</button>
1268
- </div>
1269
+ <button class="pf-c-button pf-m-link" type="button">Add card</button>
1269
1270
  </div>
1270
1271
  </div>
1271
1272
  </div>