@patternfly/patternfly 4.224.2 → 5.0.0-alpha.10

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 (187) hide show
  1. package/README.md +2 -2
  2. package/RELEASE-NOTES.md +0 -17
  3. package/assets/icons/iconUnicodes.json +0 -1
  4. package/assets/pficon/pficon.scss +0 -6
  5. package/assets/pficon/pficon.woff +0 -0
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_chart-globals.scss +4 -0
  8. package/base/_common.scss +0 -22
  9. package/base/_fonts.scss +0 -188
  10. package/base/_globals.scss +0 -6
  11. package/base/_icons.scss +28 -0
  12. package/base/_variables.scss +0 -14
  13. package/base/patternfly-common.css +0 -10
  14. package/base/patternfly-fonts.css +0 -120
  15. package/base/patternfly-globals.css +0 -4
  16. package/base/patternfly-icons.css +1 -5
  17. package/base/patternfly-icons.scss +0 -28
  18. package/base/patternfly-pf-icons.css +1 -5
  19. package/base/patternfly-variables.css +6 -19
  20. package/components/AboutModalBox/about-modal-box.css +1 -28
  21. package/components/AboutModalBox/about-modal-box.scss +1 -27
  22. package/components/Accordion/accordion.css +64 -62
  23. package/components/Accordion/accordion.scss +62 -64
  24. package/components/Alert/alert.css +0 -4
  25. package/components/Alert/alert.scss +0 -7
  26. package/components/Banner/banner.css +1 -1
  27. package/components/Banner/banner.scss +1 -1
  28. package/components/Breadcrumb/breadcrumb.css +0 -6
  29. package/components/Breadcrumb/breadcrumb.scss +0 -9
  30. package/components/Button/button.css +0 -4
  31. package/components/Button/button.scss +0 -7
  32. package/components/CalendarMonth/calendar-month.css +1 -1
  33. package/components/CalendarMonth/calendar-month.scss +1 -1
  34. package/components/Card/card.css +9 -16
  35. package/components/Card/card.scss +11 -24
  36. package/components/Check/check.css +4 -2
  37. package/components/Check/check.scss +2 -2
  38. package/components/ChipGroup/chip-group.css +29 -17
  39. package/components/ChipGroup/chip-group.scss +39 -22
  40. package/components/Content/content.css +1 -17
  41. package/components/Content/content.scss +1 -23
  42. package/components/DataList/data-list.css +0 -15
  43. package/components/Divider/divider.css +0 -16
  44. package/components/Divider/divider.scss +0 -1
  45. package/components/Drawer/drawer.css +0 -15
  46. package/components/Drawer/drawer.scss +0 -6
  47. package/components/EmptyState/empty-state.css +46 -56
  48. package/components/EmptyState/empty-state.scss +58 -66
  49. package/components/ExpandableSection/expandable-section.css +0 -4
  50. package/components/ExpandableSection/expandable-section.scss +0 -7
  51. package/components/Form/form.css +0 -1
  52. package/components/Form/form.scss +0 -1
  53. package/components/InlineEdit/inline-edit.css +1 -12
  54. package/components/InlineEdit/inline-edit.scss +1 -10
  55. package/components/JumpLinks/jump-links.css +0 -43
  56. package/components/JumpLinks/jump-links.scss +0 -13
  57. package/components/Label/label.css +0 -3
  58. package/components/Label/label.scss +0 -4
  59. package/components/LabelGroup/label-group.css +26 -22
  60. package/components/LabelGroup/label-group.scss +31 -26
  61. package/components/Menu/menu.css +0 -16
  62. package/components/Menu/menu.scss +0 -1
  63. package/components/NotificationDrawer/notification-drawer.css +1 -0
  64. package/components/NotificationDrawer/notification-drawer.scss +1 -0
  65. package/components/Page/page.css +0 -15
  66. package/components/Pagination/pagination.css +108 -55
  67. package/components/Pagination/pagination.scss +6 -25
  68. package/components/Popover/popover.css +1 -6
  69. package/components/Popover/themes/dark/popover.scss +1 -7
  70. package/components/Progress/progress.css +0 -1
  71. package/components/Progress/progress.scss +0 -1
  72. package/components/Radio/radio.css +4 -2
  73. package/components/Radio/radio.scss +2 -2
  74. package/components/SimpleList/simple-list.css +1 -1
  75. package/components/SimpleList/simple-list.scss +1 -1
  76. package/components/SkipToContent/skip-to-content.css +1 -1
  77. package/components/SkipToContent/skip-to-content.scss +1 -1
  78. package/components/Switch/switch.css +0 -1
  79. package/components/Switch/switch.scss +0 -1
  80. package/components/Table/table-grid.css +0 -10
  81. package/components/Table/table-grid.scss +0 -2
  82. package/components/Table/table-tree-view.css +0 -16
  83. package/components/Table/table-tree-view.scss +0 -4
  84. package/components/Table/table.css +0 -16
  85. package/components/Table/table.scss +0 -1
  86. package/components/Tabs/tabs.css +5 -34
  87. package/components/Tabs/tabs.scss +7 -15
  88. package/components/Title/title.css +0 -5
  89. package/components/Title/title.scss +0 -8
  90. package/components/Toolbar/toolbar.css +30 -33
  91. package/components/Toolbar/toolbar.scss +37 -9
  92. package/components/Tooltip/themes/dark/tooltip.scss +3 -6
  93. package/components/Tooltip/tooltip.css +2 -5
  94. package/components/Wizard/wizard.css +0 -9
  95. package/components/Wizard/wizard.scss +0 -9
  96. package/docs/components/AboutModalBox/examples/AboutModalBox.md +4 -15
  97. package/docs/components/Accordion/examples/Accordion.md +67 -67
  98. package/docs/components/Card/examples/Card.md +61 -44
  99. package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
  100. package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
  101. package/docs/components/Content/examples/Content.md +0 -28
  102. package/docs/components/EmptyState/examples/EmptyState.md +127 -79
  103. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -5
  104. package/docs/components/Tabs/examples/Tabs.md +102 -103
  105. package/docs/components/Toolbar/examples/Toolbar.md +19 -16
  106. package/docs/components/Wizard/examples/Wizard.md +10 -13
  107. package/docs/demos/AboutModal/examples/AboutModal.md +53 -49
  108. package/docs/demos/Alert/examples/Alert.md +18 -12
  109. package/docs/demos/BackToTop/examples/BackToTop.md +6 -4
  110. package/docs/demos/Banner/examples/Banner.md +13 -8
  111. package/docs/demos/Card/examples/Card.md +145 -110
  112. package/docs/demos/CardView/examples/CardView.md +7 -7
  113. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -16
  114. package/docs/demos/Dashboard/examples/Dashboard.md +6 -4
  115. package/docs/demos/DataList/examples/DataList.md +26 -20
  116. package/docs/demos/DescriptionList/examples/DescriptionList.md +19 -12
  117. package/docs/demos/Drawer/examples/Drawer.md +30 -20
  118. package/docs/demos/HelperText/examples/HelperText.md +1 -0
  119. package/docs/demos/JumpLinks/examples/JumpLinks.md +36 -24
  120. package/docs/demos/Masthead/examples/Masthead.md +57 -42
  121. package/docs/demos/Modal/examples/Modal.md +36 -24
  122. package/docs/demos/Nav/examples/Nav.md +48 -32
  123. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -20
  124. package/docs/demos/Page/examples/Page.md +55 -37
  125. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +1 -0
  126. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +51 -34
  127. package/docs/demos/Skeleton/examples/Skeleton.md +6 -4
  128. package/docs/demos/Table/examples/Table.md +102 -88
  129. package/docs/demos/Tabs/examples/Tabs.md +40 -28
  130. package/docs/demos/Toolbar/examples/Toolbar.md +1648 -66
  131. package/docs/demos/Wizard/examples/Wizard.md +232 -222
  132. package/icons/pf-icons.json +0 -1
  133. package/package.json +4 -3
  134. package/patternfly-base-no-reset.css +31 -154
  135. package/patternfly-base.css +31 -158
  136. package/patternfly-charts.css +1 -1
  137. package/patternfly-no-reset.css +367 -650
  138. package/patternfly.css +367 -654
  139. package/patternfly.min.css +1 -1
  140. package/patternfly.min.css.map +1 -1
  141. package/sass-utilities/mixins.scss +0 -6
  142. package/sass-utilities/placeholders.scss +0 -7
  143. package/sass-utilities/scss-variables.scss +6 -13
  144. package/assets/fonts/overpass-mono-webfont/example.html +0 -15
  145. package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff +0 -0
  146. package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff2 +0 -0
  147. package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff +0 -0
  148. package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff2 +0 -0
  149. package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff +0 -0
  150. package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff2 +0 -0
  151. package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff +0 -0
  152. package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2 +0 -0
  153. package/assets/fonts/overpass-mono-webfont/overpass-mono.css +0 -39
  154. package/assets/fonts/overpass-webfont/example.html +0 -18
  155. package/assets/fonts/overpass-webfont/overpass-bold-italic.woff +0 -0
  156. package/assets/fonts/overpass-webfont/overpass-bold-italic.woff2 +0 -0
  157. package/assets/fonts/overpass-webfont/overpass-bold.woff +0 -0
  158. package/assets/fonts/overpass-webfont/overpass-bold.woff2 +0 -0
  159. package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff +0 -0
  160. package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff2 +0 -0
  161. package/assets/fonts/overpass-webfont/overpass-extrabold.woff +0 -0
  162. package/assets/fonts/overpass-webfont/overpass-extrabold.woff2 +0 -0
  163. package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff +0 -0
  164. package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff2 +0 -0
  165. package/assets/fonts/overpass-webfont/overpass-extralight.woff +0 -0
  166. package/assets/fonts/overpass-webfont/overpass-extralight.woff2 +0 -0
  167. package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff +0 -0
  168. package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff2 +0 -0
  169. package/assets/fonts/overpass-webfont/overpass-heavy.woff +0 -0
  170. package/assets/fonts/overpass-webfont/overpass-heavy.woff2 +0 -0
  171. package/assets/fonts/overpass-webfont/overpass-italic.woff +0 -0
  172. package/assets/fonts/overpass-webfont/overpass-italic.woff2 +0 -0
  173. package/assets/fonts/overpass-webfont/overpass-light-italic.woff +0 -0
  174. package/assets/fonts/overpass-webfont/overpass-light-italic.woff2 +0 -0
  175. package/assets/fonts/overpass-webfont/overpass-light.woff +0 -0
  176. package/assets/fonts/overpass-webfont/overpass-light.woff2 +0 -0
  177. package/assets/fonts/overpass-webfont/overpass-regular.woff +0 -0
  178. package/assets/fonts/overpass-webfont/overpass-regular.woff2 +0 -0
  179. package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff +0 -0
  180. package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff2 +0 -0
  181. package/assets/fonts/overpass-webfont/overpass-semibold.woff +0 -0
  182. package/assets/fonts/overpass-webfont/overpass-semibold.woff2 +0 -0
  183. package/assets/fonts/overpass-webfont/overpass-thin-italic.woff +0 -0
  184. package/assets/fonts/overpass-webfont/overpass-thin-italic.woff2 +0 -0
  185. package/assets/fonts/overpass-webfont/overpass-thin.woff +0 -0
  186. package/assets/fonts/overpass-webfont/overpass-thin.woff2 +0 -0
  187. package/assets/fonts/overpass-webfont/overpass.css +0 -141
package/docs/components/EmptyState/examples/EmptyState.md CHANGED
@@ -9,20 +9,31 @@ cssPrefix: pf-c-empty-state
9
9
  ```html
10
10
  <div class="pf-c-empty-state">
11
11
  <div class="pf-c-empty-state__content">
12
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
12
+ <div class="pf-c-empty-state__header">
13
+ <div class="pf-c-empty-state__icon">
14
+ <i class="fas fa-cubes" aria-hidden="true"></i>
15
+ </div>
16
+ <div class="pf-c-empty-state__title">
17
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
18
+ </div>
19
+ </div>
13
20
 
14
- <h1 class="pf-c-title pf-m-lg">Empty state</h1>
15
21
  <div
16
22
  class="pf-c-empty-state__body"
17
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
18
- <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
19
- <div class="pf-c-empty-state__secondary">
20
- <button class="pf-c-button pf-m-link" type="button">Multiple</button>
21
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
22
- <button class="pf-c-button pf-m-link" type="button">Can</button>
23
- <button class="pf-c-button pf-m-link" type="button">Go here</button>
24
- <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
25
- <button class="pf-c-button pf-m-link" type="button">Action area</button>
23
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
24
+
25
+ <div class="pf-c-empty-state__footer">
26
+ <div class="pf-c-empty-state__actions">
27
+ <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
28
+ </div>
29
+ <div class="pf-c-empty-state__actions">
30
+ <button class="pf-c-button pf-m-link" type="button">Multiple</button>
31
+ <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
32
+ <button class="pf-c-button pf-m-link" type="button">Can</button>
33
+ <button class="pf-c-button pf-m-link" type="button">Go here</button>
34
+ <button class="pf-c-button pf-m-link" type="button">In the second</button>
35
+ <button class="pf-c-button pf-m-link" type="button">Action area</button>
36
+ </div>
26
37
  </div>
27
38
  </div>
28
39
  </div>
@@ -34,17 +45,31 @@ cssPrefix: pf-c-empty-state
34
45
  ```html
35
46
  <div class="pf-c-empty-state pf-m-xs">
36
47
  <div class="pf-c-empty-state__content">
37
- <h1 class="pf-c-title pf-m-md">Empty state</h1>
48
+ <div class="pf-c-empty-state__header">
49
+ <div class="pf-c-empty-state__title">
50
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
51
+ </div>
52
+ </div>
53
+
38
54
  <div
39
55
  class="pf-c-empty-state__body"
40
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
41
- <div class="pf-c-empty-state__secondary">
42
- <button class="pf-c-button pf-m-link" type="button">Multiple</button>
43
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
44
- <button class="pf-c-button pf-m-link" type="button">Can</button>
45
- <button class="pf-c-button pf-m-link" type="button">Go here</button>
46
- <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
47
- <button class="pf-c-button pf-m-link" type="button">Action area</button>
56
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
57
+
58
+ <div class="pf-c-empty-state__footer">
59
+ <div class="pf-c-empty-state__actions">
60
+ <button class="pf-c-button pf-m-link pf-m-small" type="button">Multiple</button>
61
+ <button
62
+ class="pf-c-button pf-m-link pf-m-small"
63
+ type="button"
64
+ >Action buttons</button>
65
+ <button class="pf-c-button pf-m-link pf-m-small" type="button">Can</button>
66
+ <button class="pf-c-button pf-m-link pf-m-small" type="button">Go here</button>
67
+ <button class="pf-c-button pf-m-link pf-m-small" type="button">In the</button>
68
+ <button
69
+ class="pf-c-button pf-m-link pf-m-small"
70
+ type="button"
71
+ >Action area</button>
72
+ </div>
48
73
  </div>
49
74
  </div>
50
75
  </div>
@@ -56,20 +81,32 @@ cssPrefix: pf-c-empty-state
56
81
  ```html
57
82
  <div class="pf-c-empty-state pf-m-sm">
58
83
  <div class="pf-c-empty-state__content">
59
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
84
+ <div class="pf-c-empty-state__header">
85
+ <div class="pf-c-empty-state__icon">
86
+ <i class="fas fa-cubes" aria-hidden="true"></i>
87
+ </div>
88
+ <div class="pf-c-empty-state__title">
89
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
90
+ </div>
91
+ </div>
60
92
 
61
- <h1 class="pf-c-title pf-m-lg">Empty state</h1>
62
93
  <div
63
94
  class="pf-c-empty-state__body"
64
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
65
- <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
66
- <div class="pf-c-empty-state__secondary">
67
- <button class="pf-c-button pf-m-link" type="button">Multiple</button>
68
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
69
- <button class="pf-c-button pf-m-link" type="button">Can</button>
70
- <button class="pf-c-button pf-m-link" type="button">Go here</button>
71
- <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
72
- <button class="pf-c-button pf-m-link" type="button">Action area</button>
95
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
96
+
97
+ <div class="pf-c-empty-state__footer">
98
+ <div class="pf-c-empty-state__actions">
99
+ <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
100
+ </div>
101
+
102
+ <div class="pf-c-empty-state__actions">
103
+ <button class="pf-c-button pf-m-link" type="button">Multiple</button>
104
+ <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
105
+ <button class="pf-c-button pf-m-link" type="button">Can</button>
106
+ <button class="pf-c-button pf-m-link" type="button">Go here</button>
107
+ <button class="pf-c-button pf-m-link" type="button">In the second</button>
108
+ <button class="pf-c-button pf-m-link" type="button">Action area</button>
109
+ </div>
73
110
  </div>
74
111
  </div>
75
112
  </div>
@@ -81,20 +118,31 @@ cssPrefix: pf-c-empty-state
81
118
  ```html
82
119
  <div class="pf-c-empty-state pf-m-lg">
83
120
  <div class="pf-c-empty-state__content">
84
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
121
+ <div class="pf-c-empty-state__header">
122
+ <div class="pf-c-empty-state__icon">
123
+ <i class="fas fa-cubes" aria-hidden="true"></i>
124
+ </div>
125
+ <div class="pf-c-empty-state__title">
126
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
127
+ </div>
128
+ </div>
85
129
 
86
- <h1 class="pf-c-title pf-m-lg">Empty state</h1>
87
130
  <div
88
131
  class="pf-c-empty-state__body"
89
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
90
- <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
91
- <div class="pf-c-empty-state__secondary">
92
- <button class="pf-c-button pf-m-link" type="button">Multiple</button>
93
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
94
- <button class="pf-c-button pf-m-link" type="button">Can</button>
95
- <button class="pf-c-button pf-m-link" type="button">Go here</button>
96
- <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
97
- <button class="pf-c-button pf-m-link" type="button">Action area</button>
132
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
133
+
134
+ <div class="pf-c-empty-state__footer">
135
+ <div class="pf-c-empty-state__actions">
136
+ <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
137
+ </div>
138
+ <div class="pf-c-empty-state__actions">
139
+ <button class="pf-c-button pf-m-link" type="button">Multiple</button>
140
+ <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
141
+ <button class="pf-c-button pf-m-link" type="button">Can</button>
142
+ <button class="pf-c-button pf-m-link" type="button">Go here</button>
143
+ <button class="pf-c-button pf-m-link" type="button">In the second</button>
144
+ <button class="pf-c-button pf-m-link" type="button">Action area</button>
145
+ </div>
98
146
  </div>
99
147
  </div>
100
148
  </div>
@@ -106,31 +154,30 @@ cssPrefix: pf-c-empty-state
106
154
  ```html
107
155
  <div class="pf-c-empty-state pf-m-xl">
108
156
  <div class="pf-c-empty-state__content">
109
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
110
-
111
- <h1 class="pf-c-title pf-m-4xl">Empty state</h1>
112
- <div
113
- class="pf-c-empty-state__body"
114
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
115
- <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
116
- </div>
117
- </div>
118
-
119
- ```
120
-
121
- ### With primary element
122
-
123
- ```html
124
- <div class="pf-c-empty-state">
125
- <div class="pf-c-empty-state__content">
126
- <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
157
+ <div class="pf-c-empty-state__header">
158
+ <div class="pf-c-empty-state__icon">
159
+ <i class="fas fa-cubes" aria-hidden="true"></i>
160
+ </div>
161
+ <div class="pf-c-empty-state__title">
162
+ <h1 class="pf-c-empty-state__title-text">Empty state</h1>
163
+ </div>
164
+ </div>
127
165
 
128
- <h1 class="pf-c-title pf-m-lg">Empty State</h1>
129
166
  <div
130
167
  class="pf-c-empty-state__body"
131
- >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
132
- <div class="pf-c-empty-state__primary">
133
- <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
168
+ >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
169
+ <div class="pf-c-empty-state__footer">
170
+ <div class="pf-c-empty-state__actions">
171
+ <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
172
+ </div>
173
+ <div class="pf-c-empty-state__actions">
174
+ <button class="pf-c-button pf-m-link" type="button">Multiple</button>
175
+ <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
176
+ <button class="pf-c-button pf-m-link" type="button">Can</button>
177
+ <button class="pf-c-button pf-m-link" type="button">Go here</button>
178
+ <button class="pf-c-button pf-m-link" type="button">In the second</button>
179
+ <button class="pf-c-button pf-m-link" type="button">Action area</button>
180
+ </div>
134
181
  </div>
135
182
  </div>
136
183
  </div>
@@ -147,18 +194,19 @@ cssPrefix: pf-c-empty-state
147
194
 
148
195
  ### Usage
149
196
 
150
- | Class | Applied to | Outcome |
151
- | ------------------------------ | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
152
- | `.pf-c-empty-state` | `<div>` | Initiates an empty state component. The empty state centers its content (`.pf-c-empty-state__content`) vertically and horizontally. **Required** |
153
- | `.pf-c-empty-state__content` | `<div>` | Creates the content container. **Required** |
154
- | `.pf-c-empty-state__icon` | `<i>`, `<div>` | Creates the empty state icon or icon container when used as a `<div>`. |
155
- | `.pf-c-title` | `<h1>, <h2>, <h3>, <h4>, <h5>, <h6>` | Creates the empty state title. **Required** |
156
- | `.pf-c-empty-state__body` | `<div>` | Creates the empty state body content. You can have more than one `.pf-c-empty-state__body` elements. |
157
- | `.pf-c-button.pf-m-primary` | `<button>` | Creates the primary action button. |
158
- | `.pf-c-empty-state__primary` | `<div>` | Container for primary actions. Can be used in lieu of using `.pf-c-button.pf-m-primary`. |
159
- | `.pf-c-empty-state__secondary` | `<div>` | Container secondary actions. |
160
- | `.pf-m-xs` | `.pf-c-empty-state` | Modifies the empty state for a extra small variation and max-width. |
161
- | `.pf-m-sm` | `.pf-c-empty-state` | Modifies the empty state for a small max-width. |
162
- | `.pf-m-lg` | `.pf-c-empty-state` | Modifies the empty state for a large max-width. |
163
- | `.pf-m-xl` | `.pf-c-empty-state` | Modifies the empty state for an x-large variation and max-width. |
164
- | `.pf-m-full-height` | `.pf-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-c-empty-state` have an implicit or explicit `height` defined. |
197
+ | Class | Applied to | Outcome |
198
+ | ------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
199
+ | `.pf-c-empty-state` | `<div>` | Initiates an empty state component. The empty state centers its content (`.pf-c-empty-state__content`) vertically and horizontally. **Required** |
200
+ | `.pf-c-empty-state__content` | `<div>` | Creates the content container. **Required** |
201
+ | `.pf-c-empty-state__header` | `<div>` | Creates the header container. **Required** |
202
+ | `.pf-c-empty-state__title` | `<div>` | Creates the empty state title container. **Required** |
203
+ | `.pf-c-empty-state__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates the empty state title text container. |
204
+ | `.pf-c-empty-state__icon` | `<div>` | Creates the empty state icon container. |
205
+ | `.pf-c-empty-state__body` | `<div>` | Creates the empty state body content. There can be more than one `.pf-c-empty-state__body` elements. |
206
+ | `.pf-c-empty-state__footer` | `<div>` | Creates the footer container. **Required** |
207
+ | `.pf-c-empty-state__actions` | `<div>` | Container for actions. **Required** |
208
+ | `.pf-m-xs` | `.pf-c-empty-state` | Modifies the empty state for an extra small variation and max-width. |
209
+ | `.pf-m-sm` | `.pf-c-empty-state` | Modifies the empty state for a small max-width. |
210
+ | `.pf-m-lg` | `.pf-c-empty-state` | Modifies the empty state for a large max-width. |
211
+ | `.pf-m-xl` | `.pf-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
212
+ | `.pf-m-full-height` | `.pf-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-c-empty-state` have an implicit or explicit `height` defined. |
package/docs/components/SkipToContent/examples/SkipToContent.md CHANGED
@@ -7,11 +7,9 @@ cssPrefix: pf-c-skip-to-content
7
7
  ### Basic
8
8
 
9
9
  ```html isFullscreen
10
- <a
11
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
12
- href="#main-content"
13
- >Skip to content</a>
14
- Press tab to skip to content at the bottom of the page.
10
+ <div class="pf-c-skip-to-content">
11
+ <a class="pf-c-button pf-m-primary" href="#main-content">Skip to content</a>
12
+ </div>Press tab to skip to content at the bottom of the page.
15
13
  <div style="height:2000px"></div>
16
14
  <div class="pf-c-content">
17
15
  <h1 id="main-content">Main content</h1>