@patternfly/patternfly 4.219.2 → 4.220.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.
Files changed (8) hide show
  1. package/components/Tabs/tabs.css +31 -21
  2. package/components/Tabs/tabs.scss +35 -21
  3. package/docs/components/Tabs/examples/Tabs.md +4620 -1443
  4. package/package.json +4 -4
  5. package/patternfly-no-reset.css +31 -21
  6. package/patternfly.css +31 -21
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Tabs/tabs.css CHANGED
@@ -26,7 +26,6 @@
26
26
  --pf-c-tabs__list--Display: flex;
27
27
  --pf-c-tabs__list--Visibility: visible;
28
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);
30
29
  --pf-c-tabs__link--Color: var(--pf-global--Color--200);
31
30
  --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
32
31
  --pf-c-tabs__link--BackgroundColor: transparent;
@@ -43,8 +42,9 @@
43
42
  --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
44
43
  --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
45
44
  --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
46
- --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
45
+ --pf-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
47
46
  --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
47
+ --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--xs);
48
48
  --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
49
49
  --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
50
50
  --pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
@@ -108,13 +108,16 @@
108
108
  --pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
109
109
  --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
110
110
  --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
111
- --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
112
- --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
113
- --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
114
- --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
115
- --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
116
- --pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
117
- --pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
111
+ --pf-c-tabs__item-action--c-button--FontSize: var(--pf-global--FontSize--xs);
112
+ --pf-c-tabs--m-secondary__item-action--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
113
+ --pf-c-tabs__item-action--c-button--PaddingTop: var(--pf-global--spacer--sm);
114
+ --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-global--spacer--sm);
115
+ --pf-c-tabs__item-action--c-button--PaddingBottom: var(--pf-global--spacer--sm);
116
+ --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-global--spacer--sm);
117
+ --pf-c-tabs__item-action--last-child--c-button--PaddingRight: var(--pf-global--spacer--md);
118
+ --pf-c-tabs__item-action--c-button--OutlineOffset: -0.1875rem;
119
+ --pf-c-tabs__item-action-icon--MarginTop: 0.125rem;
120
+ --pf-c-tabs__item-action--m-help--c-button--PaddingLeft: var(--pf-global--spacer--xs);
118
121
  --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
119
122
  --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
120
123
  --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
@@ -229,8 +232,8 @@
229
232
  --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
230
233
  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
231
234
  }
232
- .pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
233
- --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
235
+ .pf-c-tabs.pf-m-box .pf-c-tabs__item-action .pf-c-button {
236
+ --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor);
234
237
  }
235
238
  .pf-c-tabs.pf-m-vertical {
236
239
  --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
@@ -404,7 +407,7 @@
404
407
  }
405
408
  .pf-c-tabs.pf-m-secondary {
406
409
  --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
407
- --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
410
+ --pf-c-tabs__item-action--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-action--c-button--FontSize);
408
411
  --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
409
412
  }
410
413
  .pf-c-tabs.pf-m-page-insets {
@@ -608,20 +611,27 @@
608
611
  transform: rotate(var(--pf-c-tabs__link-toggle-icon--Rotate));
609
612
  }
610
613
 
611
- .pf-c-tabs__item-close {
614
+ .pf-c-tabs__item-action {
612
615
  display: flex;
613
616
  }
614
- .pf-c-tabs__item-close .pf-c-button {
615
- --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
616
- --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
617
- --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
618
- --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
619
- outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
617
+ .pf-c-tabs__item-action .pf-c-button {
618
+ --pf-c-button--FontSize: var(--pf-c-tabs__item-action--c-button--FontSize);
619
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__item-action--c-button--PaddingTop);
620
+ --pf-c-button--PaddingRight: var(--pf-c-tabs__item-action--c-button--PaddingRight);
621
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-action--c-button--PaddingBottom);
622
+ --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-action--c-button--PaddingLeft);
623
+ outline-offset: var(--pf-c-tabs__item-action--c-button--OutlineOffset);
624
+ }
625
+ .pf-c-tabs__item-action.pf-m-help {
626
+ --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-c-tabs__item-action--m-help--c-button--PaddingLeft);
627
+ }
628
+ .pf-c-tabs__item-action:last-child {
629
+ --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-c-tabs__item-action--last-child--c-button--PaddingRight);
620
630
  }
621
631
 
622
- .pf-c-tabs__item-close-icon {
632
+ .pf-c-tabs__item-action-icon {
623
633
  display: inline-block;
624
- margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
634
+ margin-top: var(--pf-c-tabs__item-action-icon--MarginTop);
625
635
  }
626
636
 
627
637
  .pf-c-tabs__scroll-button {
package/components/Tabs/tabs.scss CHANGED
@@ -41,7 +41,6 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
41
41
 
42
42
  // Item
43
43
  --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
44
- --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
45
44
 
46
45
  // Tab link
47
46
  --pf-c-tabs__link--Color: var(--pf-global--Color--200);
@@ -60,8 +59,9 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
60
59
  --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
61
60
  --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
62
61
  --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
63
- --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
62
+ --pf-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
64
63
  --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
64
+ --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--xs);
65
65
 
66
66
  // Link before
67
67
  --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
@@ -138,14 +138,19 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
138
138
  --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
139
139
  --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
140
140
 
141
- // Close button
142
- --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
143
- --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
144
- --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
145
- --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
146
- --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
147
- --pf-c-tabs__item-close--c-button--OutlineOffset: #{pf-size-prem(-3px)};
148
- --pf-c-tabs__item-close-icon--MarginTop: #{pf-size-prem(2px)};
141
+ // Item action
142
+ --pf-c-tabs__item-action--c-button--FontSize: var(--pf-global--FontSize--xs);
143
+ --pf-c-tabs--m-secondary__item-action--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
144
+ --pf-c-tabs__item-action--c-button--PaddingTop: var(--pf-global--spacer--sm);
145
+ --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-global--spacer--sm);
146
+ --pf-c-tabs__item-action--c-button--PaddingBottom: var(--pf-global--spacer--sm);
147
+ --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-global--spacer--sm);
148
+ --pf-c-tabs__item-action--last-child--c-button--PaddingRight: var(--pf-global--spacer--md);
149
+ --pf-c-tabs__item-action--c-button--OutlineOffset: #{pf-size-prem(-3px)};
150
+ --pf-c-tabs__item-action-icon--MarginTop: #{pf-size-prem(2px)};
151
+
152
+ // Item help
153
+ --pf-c-tabs__item-action--m-help--c-button--PaddingLeft: var(--pf-global--spacer--xs);
149
154
 
150
155
  // Add button
151
156
  --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
@@ -309,8 +314,8 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
309
314
  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
310
315
  }
311
316
 
312
- .pf-c-tabs__item-close .pf-c-button {
313
- --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
317
+ .pf-c-tabs__item-action .pf-c-button {
318
+ --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-action--c-button--disabled--BackgroundColor);
314
319
  }
315
320
  }
316
321
 
@@ -455,7 +460,7 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
455
460
 
456
461
  &.pf-m-secondary {
457
462
  --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
458
- --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
463
+ --pf-c-tabs__item-action--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-action--c-button--FontSize);
459
464
  --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
460
465
  }
461
466
 
@@ -704,22 +709,31 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
704
709
  transform: rotate(var(--pf-c-tabs__link-toggle-icon--Rotate));
705
710
  }
706
711
 
707
- .pf-c-tabs__item-close {
712
+ .pf-c-tabs__item-action {
708
713
  display: flex;
709
714
 
710
715
  .pf-c-button {
711
- --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
712
- --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
713
- --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
714
- --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
716
+ --pf-c-button--FontSize: var(--pf-c-tabs__item-action--c-button--FontSize);
717
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__item-action--c-button--PaddingTop);
718
+ --pf-c-button--PaddingRight: var(--pf-c-tabs__item-action--c-button--PaddingRight);
719
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-action--c-button--PaddingBottom);
720
+ --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-action--c-button--PaddingLeft);
721
+
722
+ outline-offset: var(--pf-c-tabs__item-action--c-button--OutlineOffset);
723
+ }
724
+
725
+ &.pf-m-help {
726
+ --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-c-tabs__item-action--m-help--c-button--PaddingLeft);
727
+ }
715
728
 
716
- outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
729
+ &:last-child {
730
+ --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-c-tabs__item-action--last-child--c-button--PaddingRight);
717
731
  }
718
732
  }
719
733
 
720
- .pf-c-tabs__item-close-icon {
734
+ .pf-c-tabs__item-action-icon {
721
735
  display: inline-block;
722
- margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
736
+ margin-top: var(--pf-c-tabs__item-action-icon--MarginTop);
723
737
  }
724
738
 
725
739
  // Scroll buttons