@patternfly/patternfly 4.221.0 → 4.221.2

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 (10) hide show
  1. package/RELEASE-NOTES.md +11 -0
  2. package/components/Pagination/pagination.css +120 -0
  3. package/components/Pagination/pagination.scss +24 -1
  4. package/docs/components/Pagination/examples/Pagination.md +129 -30
  5. package/docs/components/Tabs/examples/Tabs.md +1 -1
  6. package/package.json +1 -1
  7. package/patternfly-no-reset.css +120 -0
  8. package/patternfly.css +120 -0
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/RELEASE-NOTES.md CHANGED
@@ -3,6 +3,17 @@ id: Release notes
3
3
  section: developer-resources
4
4
  releaseNoteTOC: true
5
5
  ---
6
+ ## 2022.15 release notes (2022-11-18)
7
+ Packages released:
8
+ - [@patternfly/patternfly@v4.221.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.221.2)
9
+
10
+ ### Components
11
+ - **Pagination:** Added support for insets ([#5207](https://github.com/patternfly/patternfly/pull/5207))
12
+ - **Tabs:** Added help popover, refactored tab action ([#5213](https://github.com/patternfly/patternfly/pull/5213))
13
+
14
+ ### Other
15
+ - **Icons:** Added data-sink and data-source ([#5228](https://github.com/patternfly/patternfly/pull/5228))
16
+
6
17
  ## 2022.14 release notes (2022-10-28)
7
18
  Packages released:
8
19
  - [@patternfly/patternfly@v4.219.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.219.2)
package/components/Pagination/pagination.css CHANGED
@@ -7,6 +7,11 @@
7
7
  }
8
8
 
9
9
  .pf-c-pagination {
10
+ --pf-c-pagination--inset: 0;
11
+ --pf-c-pagination--PaddingRight: var(--pf-c-pagination--inset);
12
+ --pf-c-pagination--PaddingLeft: var(--pf-c-pagination--inset);
13
+ --pf-c-pagination--m-page-insets--inset: var(--pf-global--spacer--md);
14
+ --pf-c-pagination--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
10
15
  --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
11
16
  --pf-c-pagination--m-bottom--child--MarginRight: 0;
12
17
  --pf-c-pagination--m-bottom--child--md--MarginRight: var(--pf-global--spacer--lg);
@@ -71,6 +76,8 @@
71
76
  flex-wrap: wrap;
72
77
  align-items: center;
73
78
  justify-content: flex-end;
79
+ padding-right: var(--pf-c-pagination--PaddingRight);
80
+ padding-left: var(--pf-c-pagination--PaddingLeft);
74
81
  }
75
82
  @media screen and (min-width: 768px) {
76
83
  .pf-c-pagination {
@@ -93,6 +100,8 @@
93
100
  .pf-c-pagination {
94
101
  --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-c-pagination--m-bottom--xl--PaddingRight);
95
102
  --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft);
103
+ --pf-c-pagination__scroll-button--Width: var(--pf-c-pagination__scroll-button--xl--Width);
104
+ --pf-c-pagination--m-page-insets--inset: var(--pf-c-pagination--m-page-insets--xl--inset);
96
105
  }
97
106
  }
98
107
  .pf-c-pagination > *:not(:last-child):not(.pf-c-pagination__total-items) {
@@ -188,6 +197,9 @@
188
197
  .pf-c-pagination.pf-m-compact {
189
198
  --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight);
190
199
  }
200
+ .pf-c-pagination.pf-m-page-insets {
201
+ --pf-c-pagination--inset: var(--pf-c-pagination--m-page-insets--inset);
202
+ }
191
203
 
192
204
  .pf-c-pagination__nav {
193
205
  display: var(--pf-c-pagination__nav--Display);
@@ -242,6 +254,24 @@
242
254
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
243
255
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
244
256
  }
257
+ .pf-c-pagination.pf-m-inset-none {
258
+ --pf-c-pagination--inset: 0;
259
+ }
260
+ .pf-c-pagination.pf-m-inset-sm {
261
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
262
+ }
263
+ .pf-c-pagination.pf-m-inset-md {
264
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
265
+ }
266
+ .pf-c-pagination.pf-m-inset-lg {
267
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
268
+ }
269
+ .pf-c-pagination.pf-m-inset-xl {
270
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
271
+ }
272
+ .pf-c-pagination.pf-m-inset-2xl {
273
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
274
+ }
245
275
  @media (min-width: 576px) {
246
276
  .pf-c-pagination.pf-m-display-summary-on-sm {
247
277
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
@@ -259,6 +289,24 @@
259
289
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
260
290
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
261
291
  }
292
+ .pf-c-pagination.pf-m-inset-none-on-sm {
293
+ --pf-c-pagination--inset: 0;
294
+ }
295
+ .pf-c-pagination.pf-m-inset-sm-on-sm {
296
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
297
+ }
298
+ .pf-c-pagination.pf-m-inset-md-on-sm {
299
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
300
+ }
301
+ .pf-c-pagination.pf-m-inset-lg-on-sm {
302
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
303
+ }
304
+ .pf-c-pagination.pf-m-inset-xl-on-sm {
305
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
306
+ }
307
+ .pf-c-pagination.pf-m-inset-2xl-on-sm {
308
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
309
+ }
262
310
  }
263
311
  @media (min-width: 768px) {
264
312
  .pf-c-pagination.pf-m-display-summary-on-md {
@@ -277,6 +325,24 @@
277
325
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
278
326
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
279
327
  }
328
+ .pf-c-pagination.pf-m-inset-none-on-md {
329
+ --pf-c-pagination--inset: 0;
330
+ }
331
+ .pf-c-pagination.pf-m-inset-sm-on-md {
332
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
333
+ }
334
+ .pf-c-pagination.pf-m-inset-md-on-md {
335
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
336
+ }
337
+ .pf-c-pagination.pf-m-inset-lg-on-md {
338
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
339
+ }
340
+ .pf-c-pagination.pf-m-inset-xl-on-md {
341
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
342
+ }
343
+ .pf-c-pagination.pf-m-inset-2xl-on-md {
344
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
345
+ }
280
346
  }
281
347
  @media (min-width: 992px) {
282
348
  .pf-c-pagination.pf-m-display-summary-on-lg {
@@ -295,6 +361,24 @@
295
361
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
296
362
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
297
363
  }
364
+ .pf-c-pagination.pf-m-inset-none-on-lg {
365
+ --pf-c-pagination--inset: 0;
366
+ }
367
+ .pf-c-pagination.pf-m-inset-sm-on-lg {
368
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
369
+ }
370
+ .pf-c-pagination.pf-m-inset-md-on-lg {
371
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
372
+ }
373
+ .pf-c-pagination.pf-m-inset-lg-on-lg {
374
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
375
+ }
376
+ .pf-c-pagination.pf-m-inset-xl-on-lg {
377
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
378
+ }
379
+ .pf-c-pagination.pf-m-inset-2xl-on-lg {
380
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
381
+ }
298
382
  }
299
383
  @media (min-width: 1200px) {
300
384
  .pf-c-pagination.pf-m-display-summary-on-xl {
@@ -313,6 +397,24 @@
313
397
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
314
398
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
315
399
  }
400
+ .pf-c-pagination.pf-m-inset-none-on-xl {
401
+ --pf-c-pagination--inset: 0;
402
+ }
403
+ .pf-c-pagination.pf-m-inset-sm-on-xl {
404
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
405
+ }
406
+ .pf-c-pagination.pf-m-inset-md-on-xl {
407
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
408
+ }
409
+ .pf-c-pagination.pf-m-inset-lg-on-xl {
410
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
411
+ }
412
+ .pf-c-pagination.pf-m-inset-xl-on-xl {
413
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
414
+ }
415
+ .pf-c-pagination.pf-m-inset-2xl-on-xl {
416
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
417
+ }
316
418
  }
317
419
  @media (min-width: 1450px) {
318
420
  .pf-c-pagination.pf-m-display-summary-on-2xl {
@@ -331,6 +433,24 @@
331
433
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
332
434
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
333
435
  }
436
+ .pf-c-pagination.pf-m-inset-none-on-2xl {
437
+ --pf-c-pagination--inset: 0;
438
+ }
439
+ .pf-c-pagination.pf-m-inset-sm-on-2xl {
440
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
441
+ }
442
+ .pf-c-pagination.pf-m-inset-md-on-2xl {
443
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
444
+ }
445
+ .pf-c-pagination.pf-m-inset-lg-on-2xl {
446
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
447
+ }
448
+ .pf-c-pagination.pf-m-inset-xl-on-2xl {
449
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
450
+ }
451
+ .pf-c-pagination.pf-m-inset-2xl-on-2xl {
452
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
453
+ }
334
454
  }
335
455
 
336
456
  :where(.pf-theme-dark) .pf-c-pagination {
package/components/Pagination/pagination.scss CHANGED
@@ -1,6 +1,15 @@
1
1
  $pf-c-pagination--breakpoint-map: build-breakpoint-map();
2
+ $pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
2
3
 
3
4
  .pf-c-pagination {
5
+ --pf-c-pagination--inset: 0;
6
+ --pf-c-pagination--PaddingRight: var(--pf-c-pagination--inset);
7
+ --pf-c-pagination--PaddingLeft: var(--pf-c-pagination--inset);
8
+
9
+ // Page insets
10
+ --pf-c-pagination--m-page-insets--inset: var(--pf-global--spacer--md);
11
+ --pf-c-pagination--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
12
+
4
13
  // children
5
14
  --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
6
15
  --pf-c-pagination--m-bottom--child--MarginRight: 0;
@@ -98,12 +107,16 @@ $pf-c-pagination--breakpoint-map: build-breakpoint-map();
98
107
  @media screen and (min-width: $pf-global--breakpoint--xl) {
99
108
  --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-c-pagination--m-bottom--xl--PaddingRight);
100
109
  --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft);
110
+ --pf-c-pagination__scroll-button--Width: var(--pf-c-pagination__scroll-button--xl--Width);
111
+ --pf-c-pagination--m-page-insets--inset: var(--pf-c-pagination--m-page-insets--xl--inset);
101
112
  }
102
113
 
103
114
  display: flex;
104
115
  flex-wrap: wrap;
105
116
  align-items: center;
106
117
  justify-content: flex-end;
118
+ padding-right: var(--pf-c-pagination--PaddingRight);
119
+ padding-left: var(--pf-c-pagination--PaddingLeft);
107
120
 
108
121
  // stylelint-disable selector-not-notation
109
122
  // update to single :not() in breaking change
@@ -211,7 +224,6 @@ $pf-c-pagination--breakpoint-map: build-breakpoint-map();
211
224
  }
212
225
  }
213
226
 
214
-
215
227
  .pf-c-options-menu__toggle {
216
228
  font-size: var(--pf-c-pagination--c-options-menu__toggle--FontSize);
217
229
  }
@@ -219,8 +231,13 @@ $pf-c-pagination--breakpoint-map: build-breakpoint-map();
219
231
  &.pf-m-compact {
220
232
  --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight);
221
233
  }
234
+
235
+ &.pf-m-page-insets {
236
+ --pf-c-pagination--inset: var(--pf-c-pagination--m-page-insets--inset);
237
+ }
222
238
  }
223
239
 
240
+
224
241
  // nav
225
242
  .pf-c-pagination__nav {
226
243
  display: var(--pf-c-pagination__nav--Display);
@@ -293,6 +310,12 @@ $pf-c-pagination--breakpoint-map: build-breakpoint-map();
293
310
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
294
311
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
295
312
  }
313
+
314
+ @each $spacer, $spacer-value in $pf-c-pagination--variable-map {
315
+ &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
316
+ --pf-c-pagination--inset: #{$spacer-value};
317
+ }
318
+ }
296
319
  }
297
320
  }
298
321
  }
package/docs/components/Pagination/examples/Pagination.md CHANGED
@@ -1195,42 +1195,141 @@ cssPrefix: pf-c-pagination
1195
1195
 
1196
1196
  ```
1197
1197
 
1198
+ ### Inset
1199
+
1200
+ ```html
1201
+ <div
1202
+ class="pf-c-pagination pf-m-inset-none pf-m-inset-md-on-md pf-m-inset-2xl-on-lg"
1203
+ >
1204
+ <div class="pf-c-pagination__total-items">
1205
+ <b>1 - 10</b>&nbsp;of&nbsp;
1206
+ <b>36</b>
1207
+ </div>
1208
+ <div class="pf-c-options-menu">
1209
+ <button
1210
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
1211
+ type="button"
1212
+ id="pagination-inset-options-menu-toggle"
1213
+ aria-haspopup="listbox"
1214
+ aria-expanded="false"
1215
+ >
1216
+ <span class="pf-c-options-menu__toggle-text">
1217
+ <b>1 - 10</b>&nbsp;of&nbsp;
1218
+ <b>36</b>
1219
+ </span>
1220
+ <div class="pf-c-options-menu__toggle-icon">
1221
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1222
+ </div>
1223
+ </button>
1224
+ <ul
1225
+ class="pf-c-options-menu__menu"
1226
+ aria-labelledby="pagination-inset-options-menu-toggle"
1227
+ hidden
1228
+ >
1229
+ <li>
1230
+ <button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
1231
+ </li>
1232
+ <li>
1233
+ <button class="pf-c-options-menu__menu-item" type="button">
1234
+ 10 per page
1235
+ <div class="pf-c-options-menu__menu-item-icon">
1236
+ <i class="fas fa-check" aria-hidden="true"></i>
1237
+ </div>
1238
+ </button>
1239
+ </li>
1240
+ <li>
1241
+ <button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
1242
+ </li>
1243
+ </ul>
1244
+ </div>
1245
+ <nav class="pf-c-pagination__nav" aria-label="Pagination nav - inset example">
1246
+ <div class="pf-c-pagination__nav-control pf-m-first">
1247
+ <button
1248
+ class="pf-c-button pf-m-plain"
1249
+ type="button"
1250
+ disabled
1251
+ aria-label="Go to first page"
1252
+ >
1253
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1254
+ </button>
1255
+ </div>
1256
+ <div class="pf-c-pagination__nav-control pf-m-prev">
1257
+ <button
1258
+ class="pf-c-button pf-m-plain"
1259
+ type="button"
1260
+ disabled
1261
+ aria-label="Go to previous page"
1262
+ >
1263
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1264
+ </button>
1265
+ </div>
1266
+ <div class="pf-c-pagination__nav-page-select">
1267
+ <input
1268
+ class="pf-c-form-control"
1269
+ aria-label="Current page"
1270
+ type="number"
1271
+ min="1"
1272
+ max="4"
1273
+ value="1"
1274
+ />
1275
+ <span aria-hidden="true">of 4</span>
1276
+ </div>
1277
+ <div class="pf-c-pagination__nav-control pf-m-next">
1278
+ <button
1279
+ class="pf-c-button pf-m-plain"
1280
+ type="button"
1281
+ aria-label="Go to next page"
1282
+ >
1283
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1284
+ </button>
1285
+ </div>
1286
+ <div class="pf-c-pagination__nav-control pf-m-last">
1287
+ <button
1288
+ class="pf-c-button pf-m-plain"
1289
+ type="button"
1290
+ aria-label="Go to last page"
1291
+ >
1292
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1293
+ </button>
1294
+ </div>
1295
+ </nav>
1296
+ </div>
1297
+
1298
+ ```
1299
+
1198
1300
  ## Documentation
1199
1301
 
1200
1302
  Note: `<button>` or `<a>` elements can be used in `.pf-c-pagination__nav-page-select`.
1201
1303
 
1202
1304
  ### Accessibility
1203
1305
 
1204
- | Attribute | Applied to | Outcome |
1205
- | ------------ | ----------------------- | --------------------------------------------------------------------------- |
1206
- | `aria-label` | `.pf-c-pagination__nav` | Provides an accessible name for pagination navigation element. **Required** |
1207
-
1208
- ## Pagination nav input
1209
-
1210
- | Attribute | Applied to | Outcome |
1211
- | --------------- | ---------------------------------------------------------- | -------------------------------------------- |
1212
- | `type="number"` | `.pf-c-pagination` > `.pf-c-form-control` | Defines a field as a number. **Required** |
1213
- | `value` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides initial integer value. **Required** |
1214
- | `min` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides minimum integer value. **Required** |
1215
- | `max` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides max integer value. **Required** |
1306
+ | Attribute | Applied to | Outcome |
1307
+ | --------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------- |
1308
+ | `aria-label` | `.pf-c-pagination__nav` | Provides an accessible name for pagination navigation element. **Required** |
1309
+ | `type="number"` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Defines a field as a number. **Required** |
1310
+ | `value` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides initial integer value. **Required** |
1311
+ | `min` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides minimum integer value. **Required** |
1312
+ | `max` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides max integer value. **Required** |
1216
1313
 
1217
1314
  ### Usage
1218
1315
 
1219
- | Class | Applied to | Outcome |
1220
- | ----------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1221
- | `.pf-c-pagination` | `<div>` | Initiates pagination. |
1222
- | `.pf-c-pagination__current` | `<div>` | Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`. |
1223
- | `.pf-c-pagination__total-items` | `<div>` | Initiates element to replace the options menu on summary. |
1224
- | `.pf-c-pagination__nav` | `<nav>` | Initiates pagination nav. |
1225
- | `.pf-c-pagination__nav-control` | `<div>` | Initiates pagination nav control. |
1226
- | `.pf-c-pagination__nav-page-select` | `<div>` | Initiates pagination nav page select. |
1227
- | `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1228
- | `.pf-m-display-full{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1229
- | `.pf-m-bottom` | `.pf-c-pagination` | Modifies for bottom pagination component styles. |
1230
- | `.pf-m-compact` | `.pf-c-pagination` | Modifies for compact pagination component styles. |
1231
- | `.pf-m-static` | `.pf-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
1232
- | `.pf-m-sticky` | `.pf-c-pagination` | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-c-pagination.pf-m-bottom`. |
1233
- | `.pf-m-first` | `.pf-c-pagination__nav-control` | Indicates the control is for the first page button. |
1234
- | `.pf-m-prev` | `.pf-c-pagination__nav-control` | Indicates the control is for the previous page button. |
1235
- | `.pf-m-next` | `.pf-c-pagination__nav-control` | Indicates the control is for the next page button. |
1236
- | `.pf-m-last` | `.pf-c-pagination__nav-control` | Indicates the control is for the last page button. |
1316
+ | Class | Applied to | Outcome |
1317
+ | ----------------------------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1318
+ | `.pf-c-pagination` | `<div>` | Initiates pagination. |
1319
+ | `.pf-c-pagination__current` | `<div>` | Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`. |
1320
+ | `.pf-c-pagination__total-items` | `<div>` | Initiates element to replace the options menu on summary. |
1321
+ | `.pf-c-pagination__nav` | `<nav>` | Initiates pagination nav. |
1322
+ | `.pf-c-pagination__nav-control` | `<div>` | Initiates pagination nav control. |
1323
+ | `.pf-c-pagination__nav-page-select` | `<div>` | Initiates pagination nav page select. |
1324
+ | `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1325
+ | `.pf-m-display-full{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1326
+ | `.pf-m-bottom` | `.pf-c-pagination` | Modifies for bottom pagination component styles. |
1327
+ | `.pf-m-compact` | `.pf-c-pagination` | Modifies for compact pagination component styles. |
1328
+ | `.pf-m-static` | `.pf-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
1329
+ | `.pf-m-sticky` | `.pf-c-pagination` | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-c-pagination.pf-m-bottom`. |
1330
+ | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies pagination horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
1331
+ | `.pf-m-page-insets` | `.pf-c-pagination` | Modifies the pagination component padding/inset to visually match padding of page elements. |
1332
+ | `.pf-m-first` | `.pf-c-pagination__nav-control` | Indicates the control is for the first page button. |
1333
+ | `.pf-m-prev` | `.pf-c-pagination__nav-control` | Indicates the control is for the previous page button. |
1334
+ | `.pf-m-next` | `.pf-c-pagination__nav-control` | Indicates the control is for the next page button. |
1335
+ | `.pf-m-last` | `.pf-c-pagination__nav-control` | Indicates the control is for the last page button. |
package/docs/components/Tabs/examples/Tabs.md CHANGED
@@ -7577,7 +7577,7 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
7577
7577
  | `.pf-m-action` | `.pf-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
7578
7578
  | `.pf-m-overflow` | `.pf-c-tabs__item` | Applies overflow menu styling to a tab item. |
7579
7579
  | `.pf-m-expanded` | `.pf-c-tabs__item` | Applies expanded styling to the overflow menu tab item. |
7580
- | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
7580
+ | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
7581
7581
  | `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
7582
7582
  | `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
7583
7583
  | `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.221.0",
4
+ "version": "4.221.2",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -22635,6 +22635,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22635
22635
  }
22636
22636
 
22637
22637
  .pf-c-pagination {
22638
+ --pf-c-pagination--inset: 0;
22639
+ --pf-c-pagination--PaddingRight: var(--pf-c-pagination--inset);
22640
+ --pf-c-pagination--PaddingLeft: var(--pf-c-pagination--inset);
22641
+ --pf-c-pagination--m-page-insets--inset: var(--pf-global--spacer--md);
22642
+ --pf-c-pagination--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
22638
22643
  --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
22639
22644
  --pf-c-pagination--m-bottom--child--MarginRight: 0;
22640
22645
  --pf-c-pagination--m-bottom--child--md--MarginRight: var(--pf-global--spacer--lg);
@@ -22699,6 +22704,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22699
22704
  flex-wrap: wrap;
22700
22705
  align-items: center;
22701
22706
  justify-content: flex-end;
22707
+ padding-right: var(--pf-c-pagination--PaddingRight);
22708
+ padding-left: var(--pf-c-pagination--PaddingLeft);
22702
22709
  }
22703
22710
  @media screen and (min-width: 768px) {
22704
22711
  .pf-c-pagination {
@@ -22721,6 +22728,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22721
22728
  .pf-c-pagination {
22722
22729
  --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-c-pagination--m-bottom--xl--PaddingRight);
22723
22730
  --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft);
22731
+ --pf-c-pagination__scroll-button--Width: var(--pf-c-pagination__scroll-button--xl--Width);
22732
+ --pf-c-pagination--m-page-insets--inset: var(--pf-c-pagination--m-page-insets--xl--inset);
22724
22733
  }
22725
22734
  }
22726
22735
  .pf-c-pagination > *:not(:last-child):not(.pf-c-pagination__total-items) {
@@ -22816,6 +22825,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22816
22825
  .pf-c-pagination.pf-m-compact {
22817
22826
  --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight);
22818
22827
  }
22828
+ .pf-c-pagination.pf-m-page-insets {
22829
+ --pf-c-pagination--inset: var(--pf-c-pagination--m-page-insets--inset);
22830
+ }
22819
22831
 
22820
22832
  .pf-c-pagination__nav {
22821
22833
  display: var(--pf-c-pagination__nav--Display);
@@ -22870,6 +22882,24 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22870
22882
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
22871
22883
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
22872
22884
  }
22885
+ .pf-c-pagination.pf-m-inset-none {
22886
+ --pf-c-pagination--inset: 0;
22887
+ }
22888
+ .pf-c-pagination.pf-m-inset-sm {
22889
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
22890
+ }
22891
+ .pf-c-pagination.pf-m-inset-md {
22892
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
22893
+ }
22894
+ .pf-c-pagination.pf-m-inset-lg {
22895
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
22896
+ }
22897
+ .pf-c-pagination.pf-m-inset-xl {
22898
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
22899
+ }
22900
+ .pf-c-pagination.pf-m-inset-2xl {
22901
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
22902
+ }
22873
22903
  @media (min-width: 576px) {
22874
22904
  .pf-c-pagination.pf-m-display-summary-on-sm {
22875
22905
  --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
@@ -22887,6 +22917,24 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22887
22917
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
22888
22918
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
22889
22919
  }
22920
+ .pf-c-pagination.pf-m-inset-none-on-sm {
22921
+ --pf-c-pagination--inset: 0;
22922
+ }
22923
+ .pf-c-pagination.pf-m-inset-sm-on-sm {
22924
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
22925
+ }
22926
+ .pf-c-pagination.pf-m-inset-md-on-sm {
22927
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
22928
+ }
22929
+ .pf-c-pagination.pf-m-inset-lg-on-sm {
22930
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
22931
+ }
22932
+ .pf-c-pagination.pf-m-inset-xl-on-sm {
22933
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
22934
+ }
22935
+ .pf-c-pagination.pf-m-inset-2xl-on-sm {
22936
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
22937
+ }
22890
22938
  }
22891
22939
  @media (min-width: 768px) {
22892
22940
  .pf-c-pagination.pf-m-display-summary-on-md {
@@ -22905,6 +22953,24 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22905
22953
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
22906
22954
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
22907
22955
  }
22956
+ .pf-c-pagination.pf-m-inset-none-on-md {
22957
+ --pf-c-pagination--inset: 0;
22958
+ }
22959
+ .pf-c-pagination.pf-m-inset-sm-on-md {
22960
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
22961
+ }
22962
+ .pf-c-pagination.pf-m-inset-md-on-md {
22963
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
22964
+ }
22965
+ .pf-c-pagination.pf-m-inset-lg-on-md {
22966
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
22967
+ }
22968
+ .pf-c-pagination.pf-m-inset-xl-on-md {
22969
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
22970
+ }
22971
+ .pf-c-pagination.pf-m-inset-2xl-on-md {
22972
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
22973
+ }
22908
22974
  }
22909
22975
  @media (min-width: 992px) {
22910
22976
  .pf-c-pagination.pf-m-display-summary-on-lg {
@@ -22923,6 +22989,24 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22923
22989
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
22924
22990
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
22925
22991
  }
22992
+ .pf-c-pagination.pf-m-inset-none-on-lg {
22993
+ --pf-c-pagination--inset: 0;
22994
+ }
22995
+ .pf-c-pagination.pf-m-inset-sm-on-lg {
22996
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
22997
+ }
22998
+ .pf-c-pagination.pf-m-inset-md-on-lg {
22999
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
23000
+ }
23001
+ .pf-c-pagination.pf-m-inset-lg-on-lg {
23002
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
23003
+ }
23004
+ .pf-c-pagination.pf-m-inset-xl-on-lg {
23005
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
23006
+ }
23007
+ .pf-c-pagination.pf-m-inset-2xl-on-lg {
23008
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
23009
+ }
22926
23010
  }
22927
23011
  @media (min-width: 1200px) {
22928
23012
  .pf-c-pagination.pf-m-display-summary-on-xl {
@@ -22941,6 +23025,24 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22941
23025
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
22942
23026
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
22943
23027
  }
23028
+ .pf-c-pagination.pf-m-inset-none-on-xl {
23029
+ --pf-c-pagination--inset: 0;
23030
+ }
23031
+ .pf-c-pagination.pf-m-inset-sm-on-xl {
23032
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
23033
+ }
23034
+ .pf-c-pagination.pf-m-inset-md-on-xl {
23035
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
23036
+ }
23037
+ .pf-c-pagination.pf-m-inset-lg-on-xl {
23038
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
23039
+ }
23040
+ .pf-c-pagination.pf-m-inset-xl-on-xl {
23041
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
23042
+ }
23043
+ .pf-c-pagination.pf-m-inset-2xl-on-xl {
23044
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
23045
+ }
22944
23046
  }
22945
23047
  @media (min-width: 1450px) {
22946
23048
  .pf-c-pagination.pf-m-display-summary-on-2xl {
@@ -22959,6 +23061,24 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
22959
23061
  --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
22960
23062
  --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
22961
23063
  }
23064
+ .pf-c-pagination.pf-m-inset-none-on-2xl {
23065
+ --pf-c-pagination--inset: 0;
23066
+ }
23067
+ .pf-c-pagination.pf-m-inset-sm-on-2xl {
23068
+ --pf-c-pagination--inset: var(--pf-global--spacer--sm);
23069
+ }
23070
+ .pf-c-pagination.pf-m-inset-md-on-2xl {
23071
+ --pf-c-pagination--inset: var(--pf-global--spacer--md);
23072
+ }
23073
+ .pf-c-pagination.pf-m-inset-lg-on-2xl {
23074
+ --pf-c-pagination--inset: var(--pf-global--spacer--lg);
23075
+ }
23076
+ .pf-c-pagination.pf-m-inset-xl-on-2xl {
23077
+ --pf-c-pagination--inset: var(--pf-global--spacer--xl);
23078
+ }
23079
+ .pf-c-pagination.pf-m-inset-2xl-on-2xl {
23080
+ --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
23081
+ }
22962
23082
  }
22963
23083
 
22964
23084
  :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-about-modal-box, :where(.pf-theme-dark) .pf-c-banner, :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, :where(.pf-theme-dark) .pf-c-login__header,