@patternfly/react-styles 4.53.0 → 4.54.0

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,33 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # 4.54.0 (2022-04-18)
7
+
8
+
9
+ ### Features
10
+
11
+ * **Progress stepper:** Updated to use render prop for popover ([#7190](https://github.com/patternfly/patternfly-react/issues/7190)) ([5eb8243](https://github.com/patternfly/patternfly-react/commit/5eb8243d63d1168d9b425a5322c08e04659ed843))
12
+
13
+
14
+
15
+
16
+
17
+ ## 4.53.2 (2022-04-18)
18
+
19
+ **Note:** Version bump only for package @patternfly/react-styles
20
+
21
+
22
+
23
+
24
+
25
+ ## 4.53.1 (2022-04-18)
26
+
27
+ **Note:** Version bump only for package @patternfly/react-styles
28
+
29
+
30
+
31
+
32
+
6
33
  # 4.53.0 (2022-04-14)
7
34
 
8
35
 
@@ -207,17 +207,25 @@
207
207
  grid-template-columns: 1fr auto;
208
208
  }
209
209
  }
210
+
211
+ .pf-c-login__main-header-utilities,
210
212
  .pf-c-login__main-header .pf-c-dropdown {
211
213
  grid-column: auto;
212
214
  grid-row: auto;
213
215
  }
214
216
  @media (min-width: 768px) {
215
- .pf-c-login__main-header .pf-c-dropdown {
217
+ .pf-c-login__main-header-utilities,
218
+ .pf-c-login__main-header .pf-c-dropdown {
216
219
  grid-column: 2/3;
217
220
  grid-row: 1;
218
221
  }
219
222
  }
220
223
 
224
+ .pf-c-login__main-header-utilities .pf-c-dropdown {
225
+ grid-column: auto;
226
+ grid-row: auto;
227
+ }
228
+
221
229
  .pf-c-login__main-header-desc {
222
230
  margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
223
231
  font-size: var(--pf-c-login__main-header-desc--FontSize);
@@ -18,6 +18,7 @@ declare const _default: {
18
18
  "loginMainFooterLinksItemLink": "pf-c-login__main-footer-links-item-link",
19
19
  "loginMainHeader": "pf-c-login__main-header",
20
20
  "loginMainHeaderDesc": "pf-c-login__main-header-desc",
21
+ "loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
21
22
  "title": "pf-c-title"
22
23
  };
23
24
  export default _default;
@@ -20,5 +20,6 @@ exports.default = {
20
20
  "loginMainFooterLinksItemLink": "pf-c-login__main-footer-links-item-link",
21
21
  "loginMainHeader": "pf-c-login__main-header",
22
22
  "loginMainHeaderDesc": "pf-c-login__main-header-desc",
23
+ "loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
23
24
  "title": "pf-c-title"
24
25
  };
@@ -18,5 +18,6 @@ export default {
18
18
  "loginMainFooterLinksItemLink": "pf-c-login__main-footer-links-item-link",
19
19
  "loginMainHeader": "pf-c-login__main-header",
20
20
  "loginMainHeaderDesc": "pf-c-login__main-header-desc",
21
+ "loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
21
22
  "title": "pf-c-title"
22
23
  };
@@ -25,6 +25,8 @@
25
25
  --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
26
26
  --pf-c-tabs__list--Display: flex;
27
27
  --pf-c-tabs__list--Visibility: visible;
28
+ --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
29
+ --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
28
30
  --pf-c-tabs__link--Color: var(--pf-global--Color--200);
29
31
  --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
30
32
  --pf-c-tabs__link--BackgroundColor: transparent;
@@ -40,11 +42,14 @@
40
42
  --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
41
43
  --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
42
44
  --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
45
+ --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
43
46
  --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
44
47
  --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
48
+ --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
49
+ --pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
45
50
  --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__link--before--border-color--base);
46
51
  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base);
47
- --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
52
+ --pf-c-tabs__link--before--BorderLeftColor: var(--pf-c-tabs__link--before--border-color--base);
48
53
  --pf-c-tabs__link--before--BorderTopWidth: 0;
49
54
  --pf-c-tabs__link--before--BorderRightWidth: 0;
50
55
  --pf-c-tabs__link--before--BorderBottomWidth: 0;
@@ -102,6 +107,19 @@
102
107
  --pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
103
108
  --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
104
109
  --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
110
+ --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
111
+ --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
112
+ --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
113
+ --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
114
+ --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
115
+ --pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
116
+ --pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
117
+ --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
118
+ --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
119
+ --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
120
+ --pf-c-tabs--m-secondary__add--c-button--FontSize: var(--pf-global--FontSize--xs);
121
+ --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
122
+ --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
105
123
  position: relative;
106
124
  display: flex;
107
125
  width: var(--pf-c-tabs--Width);
@@ -200,6 +218,9 @@
200
218
  --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
201
219
  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
202
220
  }
221
+ .pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
222
+ --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
223
+ }
203
224
  .pf-c-tabs.pf-m-vertical {
204
225
  --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
205
226
  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset);
@@ -372,6 +393,8 @@
372
393
  }
373
394
  .pf-c-tabs.pf-m-secondary {
374
395
  --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
396
+ --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
397
+ --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
375
398
  }
376
399
  .pf-c-tabs.pf-m-page-insets {
377
400
  --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
@@ -435,12 +458,26 @@
435
458
  --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor);
436
459
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth);
437
460
  }
461
+ .pf-c-tabs__item.pf-m-action {
462
+ --pf-c-tabs__link--PaddingRight: var(--pf-c-tabs__item--m-action__link--PaddingRight);
463
+ position: relative;
464
+ }
465
+ .pf-c-tabs__item.pf-m-action::before {
466
+ z-index: var(--pf-c-tabs__item--m-action--before--ZIndex);
467
+ }
468
+ .pf-c-tabs__item.pf-m-action .pf-c-tabs__link::before,
469
+ .pf-c-tabs__item.pf-m-action .pf-c-tabs__link::after {
470
+ content: revert;
471
+ }
438
472
 
439
473
  .pf-c-tabs::before,
440
474
  .pf-c-tabs__list::before,
441
475
  .pf-c-tabs__link::before,
442
476
  .pf-c-tabs__link::after,
443
- .pf-c-tabs__scroll-button::before {
477
+ .pf-c-tabs__item.pf-m-action::before,
478
+ .pf-c-tabs__item.pf-m-action::after,
479
+ .pf-c-tabs__scroll-button::before,
480
+ .pf-c-tabs__add::before {
444
481
  position: absolute;
445
482
  right: 0;
446
483
  bottom: 0;
@@ -452,18 +489,21 @@
452
489
  .pf-c-tabs__list::before,
453
490
  .pf-c-tabs__link::before,
454
491
  .pf-c-tabs__link::after,
455
- .pf-c-tabs__scroll-button::before {
492
+ .pf-c-tabs__item.pf-m-action::before,
493
+ .pf-c-tabs__item.pf-m-action::after,
494
+ .pf-c-tabs__scroll-button::before,
495
+ .pf-c-tabs__add::before {
456
496
  top: 0;
457
497
  }
458
498
 
459
499
  .pf-c-tabs__link,
460
500
  .pf-c-tabs__scroll-button,
461
- .pf-c-tabs__list::before {
501
+ .pf-c-tabs__list::before,
502
+ .pf-c-tabs__add::before {
462
503
  border: 0;
463
504
  }
464
505
 
465
506
  .pf-c-tabs__link {
466
- --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
467
507
  position: relative;
468
508
  display: flex;
469
509
  flex: 1;
@@ -471,17 +511,23 @@
471
511
  font-size: var(--pf-c-tabs__link--FontSize);
472
512
  color: var(--pf-c-tabs__link--Color);
473
513
  text-decoration: none;
474
- background-color: var(--pf-c-tabs__link--BackgroundColor);
475
514
  outline-offset: var(--pf-c-tabs__link--OutlineOffset);
476
515
  }
477
- .pf-c-tabs__link::before {
516
+ .pf-c-tabs__item.pf-m-action, .pf-c-tabs__link {
517
+ --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
518
+ background-color: var(--pf-c-tabs__link--BackgroundColor);
519
+ }
520
+
521
+ .pf-c-tabs__item.pf-m-action::before, .pf-c-tabs__link::before {
478
522
  pointer-events: none;
479
- border-color: var(--pf-c-tabs__link--before--border-color--base);
480
523
  border-width: var(--pf-c-tabs__link--before--BorderTopWidth) var(--pf-c-tabs__link--before--BorderRightWidth) var(--pf-c-tabs__link--before--BorderBottomWidth) var(--pf-c-tabs__link--before--BorderLeftWidth);
524
+ border-top-color: var(--pf-c-tabs__link--before--BorderTopColor);
481
525
  border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
482
526
  border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
527
+ border-left-color: var(--pf-c-tabs__link--before--BorderLeftColor);
483
528
  }
484
- .pf-c-tabs__link::after {
529
+
530
+ .pf-c-tabs__item.pf-m-action::after, .pf-c-tabs__link::after {
485
531
  top: var(--pf-c-tabs__link--after--Top);
486
532
  right: var(--pf-c-tabs__link--after--Right);
487
533
  bottom: var(--pf-c-tabs__link--after--Bottom);
@@ -489,25 +535,30 @@
489
535
  border-color: var(--pf-c-tabs__link--after--BorderColor);
490
536
  border-width: var(--pf-c-tabs__link--after--BorderTopWidth) var(--pf-c-tabs__link--after--BorderRightWidth) var(--pf-c-tabs__link--after--BorderBottomWidth) var(--pf-c-tabs__link--after--BorderLeftWidth);
491
537
  }
492
- .pf-c-tabs__link:hover {
538
+
539
+ .pf-c-tabs__item.pf-m-action:hover, .pf-c-tabs__link:hover {
493
540
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
494
541
  }
495
- .pf-c-tabs__link:focus {
542
+
543
+ .pf-c-tabs__item.pf-m-action:focus-within, .pf-c-tabs__link:focus {
496
544
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth);
497
545
  }
498
- .pf-c-tabs__link:active {
546
+
547
+ .pf-c-tabs__item.pf-m-action:active, .pf-c-tabs__link:active {
499
548
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
500
549
  }
550
+
501
551
  .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
502
552
  pointer-events: none;
503
553
  }
504
- .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
554
+ .pf-c-tabs__item.pf-m-action.pf-m-disabled, .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
505
555
  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
506
556
  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
507
557
  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);
508
558
  --pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth);
509
559
  --pf-c-tabs__link--after--BorderWidth: 0;
510
560
  }
561
+
511
562
  .pf-c-tabs__link.pf-m-aria-disabled {
512
563
  cursor: default;
513
564
  }
@@ -520,6 +571,22 @@
520
571
  --pf-c-tabs__link--child--MarginRight: 0;
521
572
  }
522
573
 
574
+ .pf-c-tabs__item-close {
575
+ display: flex;
576
+ }
577
+ .pf-c-tabs__item-close .pf-c-button {
578
+ --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
579
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
580
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
581
+ --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
582
+ outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
583
+ }
584
+
585
+ .pf-c-tabs__item-close-icon {
586
+ display: inline-block;
587
+ margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
588
+ }
589
+
523
590
  .pf-c-tabs__scroll-button {
524
591
  flex: none;
525
592
  width: var(--pf-c-tabs__scroll-button--Width);
@@ -552,6 +619,19 @@
552
619
  pointer-events: none;
553
620
  }
554
621
 
622
+ .pf-c-tabs__add {
623
+ position: relative;
624
+ display: flex;
625
+ }
626
+ .pf-c-tabs__add::before {
627
+ border-left: var(--pf-c-tabs__add--before--BorderLeftWidth) solid var(--pf-c-tabs__add--before--BorderColor);
628
+ }
629
+ .pf-c-tabs__add .pf-c-button {
630
+ --pf-c-button--FontSize: var(--pf-c-tabs__add--c-button--FontSize);
631
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__add--c-button--PaddingTop);
632
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__add--c-button--PaddingBottom);
633
+ }
634
+
555
635
  .pf-c-tabs.pf-m-inset-none {
556
636
  --pf-c-tabs--inset: 0;
557
637
  --pf-c-tabs--m-vertical--inset: 0;
@@ -25,6 +25,7 @@ declare const _default: {
25
25
  "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
26
26
  "expanded": "pf-m-expanded",
27
27
  "pageInsets": "pf-m-page-insets",
28
+ "action": "pf-m-action",
28
29
  "disabled": "pf-m-disabled",
29
30
  "ariaDisabled": "pf-m-aria-disabled",
30
31
  "insetNone": "pf-m-inset-none",
@@ -65,7 +66,10 @@ declare const _default: {
65
66
  "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
66
67
  },
67
68
  "tabs": "pf-c-tabs",
69
+ "tabsAdd": "pf-c-tabs__add",
68
70
  "tabsItem": "pf-c-tabs__item",
71
+ "tabsItemClose": "pf-c-tabs__item-close",
72
+ "tabsItemCloseIcon": "pf-c-tabs__item-close-icon",
69
73
  "tabsItemIcon": "pf-c-tabs__item-icon",
70
74
  "tabsItemText": "pf-c-tabs__item-text",
71
75
  "tabsLink": "pf-c-tabs__link",
@@ -27,6 +27,7 @@ exports.default = {
27
27
  "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
28
28
  "expanded": "pf-m-expanded",
29
29
  "pageInsets": "pf-m-page-insets",
30
+ "action": "pf-m-action",
30
31
  "disabled": "pf-m-disabled",
31
32
  "ariaDisabled": "pf-m-aria-disabled",
32
33
  "insetNone": "pf-m-inset-none",
@@ -67,7 +68,10 @@ exports.default = {
67
68
  "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
68
69
  },
69
70
  "tabs": "pf-c-tabs",
71
+ "tabsAdd": "pf-c-tabs__add",
70
72
  "tabsItem": "pf-c-tabs__item",
73
+ "tabsItemClose": "pf-c-tabs__item-close",
74
+ "tabsItemCloseIcon": "pf-c-tabs__item-close-icon",
71
75
  "tabsItemIcon": "pf-c-tabs__item-icon",
72
76
  "tabsItemText": "pf-c-tabs__item-text",
73
77
  "tabsLink": "pf-c-tabs__link",
@@ -25,6 +25,7 @@ export default {
25
25
  "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
26
26
  "expanded": "pf-m-expanded",
27
27
  "pageInsets": "pf-m-page-insets",
28
+ "action": "pf-m-action",
28
29
  "disabled": "pf-m-disabled",
29
30
  "ariaDisabled": "pf-m-aria-disabled",
30
31
  "insetNone": "pf-m-inset-none",
@@ -65,7 +66,10 @@ export default {
65
66
  "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
66
67
  },
67
68
  "tabs": "pf-c-tabs",
69
+ "tabsAdd": "pf-c-tabs__add",
68
70
  "tabsItem": "pf-c-tabs__item",
71
+ "tabsItemClose": "pf-c-tabs__item-close",
72
+ "tabsItemCloseIcon": "pf-c-tabs__item-close-icon",
69
73
  "tabsItemIcon": "pf-c-tabs__item-icon",
70
74
  "tabsItemText": "pf-c-tabs__item-text",
71
75
  "tabsLink": "pf-c-tabs__link",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "4.53.0",
3
+ "version": "4.54.0",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "4.187.0",
22
+ "@patternfly/patternfly": "4.190.0",
23
23
  "camel-case": "^3.0.0",
24
24
  "css": "^2.2.3",
25
25
  "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
29
29
  "typescript": "^4.0.0"
30
30
  },
31
31
  "license": "MIT",
32
- "gitHead": "3a30fbb3c5935b2e9a0fbb6336b1b45cfca46a7a"
32
+ "gitHead": "9116e7cc699cff22722794c15cda402c1cabf67b"
33
33
  }