@patternfly/patternfly 4.180.0 → 4.180.1

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 (21) hide show
  1. package/components/MenuToggle/menu-toggle.css +6 -6
  2. package/components/MenuToggle/menu-toggle.scss +7 -6
  3. package/docs/components/Page/examples/Page.md +11 -2
  4. package/docs/components/Table/examples/Table.md +8 -0
  5. package/docs/components/Wizard/examples/Wizard.md +6 -6
  6. package/docs/demos/Alert/examples/Alert.md +20 -40
  7. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  8. package/docs/demos/ContextSelector/examples/ContextSelector.md +80 -160
  9. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  10. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  11. package/docs/demos/Masthead/examples/Masthead.md +140 -280
  12. package/docs/demos/Nav/examples/Nav.md +203 -343
  13. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  14. package/docs/demos/Page/examples/Page.md +575 -1123
  15. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  16. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  17. package/package.json +1 -1
  18. package/patternfly-no-reset.css +6 -6
  19. package/patternfly.css +6 -6
  20. package/patternfly.min.css +1 -1
  21. package/patternfly.min.css.map +1 -1
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -155,34 +155,32 @@
155
155
  --pf-c-menu-toggle__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain__toggle-icon--Color);
156
156
  }
157
157
  .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
158
- --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
159
- --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
160
- --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
161
- --pf-c-menu-toggle--active--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
162
- --pf-c-menu-toggle--disabled--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
163
158
  --pf-c-menu-toggle--PaddingRight: var(--pf-c-menu-toggle--m-plain--PaddingRight);
164
159
  --pf-c-menu-toggle--PaddingLeft: var(--pf-c-menu-toggle--m-plain--PaddingLeft);
165
160
  --pf-c-menu-toggle--disabled--BackgroundColor: transparent;
166
- --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
167
161
  display: inline-block;
162
+ color: var(--pf-c-menu-toggle--m-plain--Color);
168
163
  }
169
164
  .pf-c-menu-toggle:hover {
170
165
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--hover--BackgroundColor);
171
166
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--hover--after--BorderBottomWidth);
172
167
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--hover--after--BorderBottomColor);
173
168
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
169
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
174
170
  }
175
171
  .pf-c-menu-toggle:focus {
176
172
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
177
173
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
178
174
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
179
175
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color);
176
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--focus--Color);
180
177
  }
181
178
  .pf-c-menu-toggle:active {
182
179
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--active--BackgroundColor);
183
180
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--active--after--BorderBottomWidth);
184
181
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--active--after--BorderBottomColor);
185
182
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--active__toggle-icon--Color);
183
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--active--Color);
186
184
  }
187
185
  .pf-c-menu-toggle.pf-m-expanded {
188
186
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-expanded--Color);
@@ -190,10 +188,12 @@
190
188
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth);
191
189
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomColor);
192
190
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color);
191
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
193
192
  }
194
193
  .pf-c-menu-toggle:disabled {
195
194
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--disabled--Color);
196
195
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--disabled--BackgroundColor);
196
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
197
197
  pointer-events: none;
198
198
  }
199
199
  .pf-c-menu-toggle.pf-m-primary::before, .pf-c-menu-toggle.pf-m-primary::after, .pf-c-menu-toggle.pf-m-plain::before, .pf-c-menu-toggle.pf-m-plain::after, .pf-c-menu-toggle:disabled::before, .pf-c-menu-toggle:disabled::after {
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -84,6 +84,7 @@
84
84
  --pf-c-menu-toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
85
85
  --pf-c-menu-toggle--m-plain--m-expanded--Color: var(--pf-global--Color--100);
86
86
 
87
+
87
88
  // Icon
88
89
  --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
89
90
 
@@ -203,17 +204,12 @@
203
204
  --pf-c-menu-toggle__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain__toggle-icon--Color);
204
205
 
205
206
  &:not(.pf-m-text) {
206
- --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
207
- --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
208
- --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
209
- --pf-c-menu-toggle--active--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
210
- --pf-c-menu-toggle--disabled--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
211
207
  --pf-c-menu-toggle--PaddingRight: var(--pf-c-menu-toggle--m-plain--PaddingRight);
212
208
  --pf-c-menu-toggle--PaddingLeft: var(--pf-c-menu-toggle--m-plain--PaddingLeft);
213
209
  --pf-c-menu-toggle--disabled--BackgroundColor: transparent;
214
- --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
215
210
 
216
211
  display: inline-block;
212
+ color: var(--pf-c-menu-toggle--m-plain--Color);
217
213
  }
218
214
  }
219
215
 
@@ -222,6 +218,7 @@
222
218
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--hover--after--BorderBottomWidth);
223
219
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--hover--after--BorderBottomColor);
224
220
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
221
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
225
222
  }
226
223
 
227
224
  &:focus {
@@ -229,6 +226,7 @@
229
226
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
230
227
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
231
228
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color);
229
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--focus--Color);
232
230
  }
233
231
 
234
232
  &:active {
@@ -236,6 +234,7 @@
236
234
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--active--after--BorderBottomWidth);
237
235
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--active--after--BorderBottomColor);
238
236
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--active__toggle-icon--Color);
237
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--active--Color);
239
238
  }
240
239
 
241
240
  &.pf-m-expanded {
@@ -244,11 +243,13 @@
244
243
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth);
245
244
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomColor);
246
245
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color);
246
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
247
247
  }
248
248
 
249
249
  &:disabled {
250
250
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--disabled--Color);
251
251
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--disabled--BackgroundColor);
252
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
252
253
 
253
254
  pointer-events: none;
254
255
  }
package/docs/components/Page/examples/Page.md CHANGED
@@ -136,7 +136,7 @@ wrapperTag: div
136
136
 
137
137
  ```
138
138
 
139
- ### Centered content
139
+ ### Centered section
140
140
 
141
141
  ```html
142
142
  <div class="pf-c-page">
@@ -149,7 +149,16 @@ wrapperTag: div
149
149
  </header>
150
150
  <main class="pf-c-page__main" tabindex="-1">
151
151
  <section class="pf-c-page__main-section pf-m-limit-width pf-m-align-center">
152
- <div class="pf-c-page__main-body">Page section width limited, centered.</div>
152
+ <div class="pf-c-page__main-body">
153
+ <div class="pf-c-card">
154
+ <div class="pf-c-card__body">
155
+ When a width limited page section is wider than the value of
156
+ <code>--pf-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
157
+ <br />
158
+ <br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
159
+ </div>
160
+ </div>
161
+ </div>
153
162
  </section>
154
163
  </main>
155
164
  </div>
package/docs/components/Table/examples/Table.md CHANGED
@@ -19965,6 +19965,14 @@ Add a [width modifier](#width-modifiers) to `thead th` to limit string length or
19965
19965
 
19966
19966
  ## Sticky table modifiers
19967
19967
 
19968
+ **Note:** Sticky table headers and columns have a higher `z-index` than the `z-index` used for menus (dropdown, select, etc). The intent is that the contents of a scrollable table will scroll under the sticky header/column, including any expanded menus. However, there may be use cases where a menu needs to appear on top of a sticky header/column, such as an expanded menu in a toolbar above a table with a sticky header.
19969
+
19970
+ There are a few ways this can be handled:
19971
+
19972
+ - Manipulate the `z-index` of the menu and/or table headers/columns manually.
19973
+ - Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the `<body>` element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
19974
+ - In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index` than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
19975
+
19968
19976
  ### Sticky header
19969
19977
 
19970
19978
  ```html
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -21,7 +21,7 @@ wrapperTag: div
21
21
  </button>
22
22
  <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
23
23
 
24
- <p class="pf-c-wizard__description">Here is where the description goes</p>
24
+ <div class="pf-c-wizard__description">Here is where the description goes</div>
25
25
  </div>
26
26
  <button
27
27
  aria-label="Wizard Header Toggle"
@@ -248,7 +248,7 @@ wrapperTag: div
248
248
  </button>
249
249
  <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
250
250
 
251
- <p class="pf-c-wizard__description">Here is where the description goes</p>
251
+ <div class="pf-c-wizard__description">Here is where the description goes</div>
252
252
  </div>
253
253
  <button
254
254
  aria-label="Wizard Header Toggle"
@@ -475,7 +475,7 @@ wrapperTag: div
475
475
  </button>
476
476
  <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
477
477
 
478
- <p class="pf-c-wizard__description">Here is where the description goes</p>
478
+ <div class="pf-c-wizard__description">Here is where the description goes</div>
479
479
  </div>
480
480
  <button
481
481
  aria-label="Wizard Header Toggle"
@@ -730,7 +730,7 @@ wrapperTag: div
730
730
  </button>
731
731
  <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
732
732
 
733
- <p class="pf-c-wizard__description">Here is where the description goes</p>
733
+ <div class="pf-c-wizard__description">Here is where the description goes</div>
734
734
  </div>
735
735
  <button
736
736
  aria-label="Wizard Header Toggle"
@@ -988,7 +988,7 @@ wrapperTag: div
988
988
  </button>
989
989
  <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
990
990
 
991
- <p class="pf-c-wizard__description">Here is where the description goes</p>
991
+ <div class="pf-c-wizard__description">Here is where the description goes</div>
992
992
  </div>
993
993
  <button
994
994
  aria-label="Wizard Header Toggle"
@@ -1128,7 +1128,7 @@ wrapperTag: div
1128
1128
  | `.pf-c-wizard__header` | `<header>` | Initiates the header. **Required** when the wizard is in a modal. Not recommended to use when the wizard is placed on a page. |
1129
1129
  | `.pf-c-wizard__close` | `.pf-c-button.pf-m-plain` | Initiates the close button. **Required** |
1130
1130
  | `.pf-c-wizard__title` | `.pf-c-title.pf-m-3xl` | Initiates the title. **Required** |
1131
- | `.pf-c-wizard__description` | `<p>` | Initiates the description. |
1131
+ | `.pf-c-wizard__description` | `<div>`, `<p>` | Initiates the description. |
1132
1132
  | `.pf-c-wizard__toggle` | `<button>` | Initiates the mobile steps menu toggle button. **Required** |
1133
1133
  | `.pf-c-wizard__toggle-list` | `<span>` | Initiates the toggle list. **Required** |
1134
1134
  | `.pf-c-wizard__toggle-list-item` | `<span>` | Initiates a toggle list item. **Required** |
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -242,55 +242,35 @@ section: components
242
242
  <section class="pf-c-page__main-section pf-m-limit-width">
243
243
  <div class="pf-c-page__main-body">
244
244
  <div class="pf-l-gallery pf-m-gutter">
245
- <div class="pf-l-gallery__item">
246
- <div class="pf-c-card">
247
- <div class="pf-c-card__body">This is a card</div>
248
- </div>
245
+ <div class="pf-c-card">
246
+ <div class="pf-c-card__body">This is a card</div>
249
247
  </div>
250
- <div class="pf-l-gallery__item">
251
- <div class="pf-c-card">
252
- <div class="pf-c-card__body">This is a card</div>
253
- </div>
248
+ <div class="pf-c-card">
249
+ <div class="pf-c-card__body">This is a card</div>
254
250
  </div>
255
- <div class="pf-l-gallery__item">
256
- <div class="pf-c-card">
257
- <div class="pf-c-card__body">This is a card</div>
258
- </div>
251
+ <div class="pf-c-card">
252
+ <div class="pf-c-card__body">This is a card</div>
259
253
  </div>
260
- <div class="pf-l-gallery__item">
261
- <div class="pf-c-card">
262
- <div class="pf-c-card__body">This is a card</div>
263
- </div>
254
+ <div class="pf-c-card">
255
+ <div class="pf-c-card__body">This is a card</div>
264
256
  </div>
265
- <div class="pf-l-gallery__item">
266
- <div class="pf-c-card">
267
- <div class="pf-c-card__body">This is a card</div>
268
- </div>
257
+ <div class="pf-c-card">
258
+ <div class="pf-c-card__body">This is a card</div>
269
259
  </div>
270
- <div class="pf-l-gallery__item">
271
- <div class="pf-c-card">
272
- <div class="pf-c-card__body">This is a card</div>
273
- </div>
260
+ <div class="pf-c-card">
261
+ <div class="pf-c-card__body">This is a card</div>
274
262
  </div>
275
- <div class="pf-l-gallery__item">
276
- <div class="pf-c-card">
277
- <div class="pf-c-card__body">This is a card</div>
278
- </div>
263
+ <div class="pf-c-card">
264
+ <div class="pf-c-card__body">This is a card</div>
279
265
  </div>
280
- <div class="pf-l-gallery__item">
281
- <div class="pf-c-card">
282
- <div class="pf-c-card__body">This is a card</div>
283
- </div>
266
+ <div class="pf-c-card">
267
+ <div class="pf-c-card__body">This is a card</div>
284
268
  </div>
285
- <div class="pf-l-gallery__item">
286
- <div class="pf-c-card">
287
- <div class="pf-c-card__body">This is a card</div>
288
- </div>
269
+ <div class="pf-c-card">
270
+ <div class="pf-c-card__body">This is a card</div>
289
271
  </div>
290
- <div class="pf-l-gallery__item">
291
- <div class="pf-c-card">
292
- <div class="pf-c-card__body">This is a card</div>
293
- </div>
272
+ <div class="pf-c-card">
273
+ <div class="pf-c-card__body">This is a card</div>
294
274
  </div>
295
275
  </div>
296
276
  </div>