@patternfly/patternfly 4.219.2 → 4.221.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 (17) hide show
  1. package/assets/icons/iconUnicodes.json +2 -0
  2. package/assets/pficon/pficon.scss +12 -0
  3. package/assets/pficon/pficon.woff +0 -0
  4. package/assets/pficon/pficon.woff2 +0 -0
  5. package/base/patternfly-icons.css +9 -1
  6. package/base/patternfly-pf-icons.css +9 -1
  7. package/components/Tabs/tabs.css +31 -21
  8. package/components/Tabs/tabs.scss +35 -21
  9. package/docs/components/Tabs/examples/Tabs.md +4620 -1443
  10. package/icons/pf-icons.json +2 -0
  11. package/package.json +4 -4
  12. package/patternfly-base-no-reset.css +9 -1
  13. package/patternfly-base.css +9 -1
  14. package/patternfly-no-reset.css +40 -22
  15. package/patternfly.css +40 -22
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/assets/icons/iconUnicodes.json CHANGED
@@ -21,6 +21,8 @@
21
21
  "pf-icon-container-node": "E621",
22
22
  "pf-icon-cpu": "E927",
23
23
  "pf-icon-critical-risk": "E976",
24
+ "pf-icon-data-sink": "E978",
25
+ "pf-icon-data-source": "E979",
24
26
  "pf-icon-degraded": "E91B",
25
27
  "pf-icon-disconnected": "E955",
26
28
  "pf-icon-domain": "E919",
package/assets/pficon/pficon.scss CHANGED
@@ -89,6 +89,12 @@
89
89
  @if $filename == critical-risk {
90
90
  $char: '\E976';
91
91
  }
92
+ @if $filename == data-sink {
93
+ $char: '\E978';
94
+ }
95
+ @if $filename == data-source {
96
+ $char: '\E979';
97
+ }
92
98
  @if $filename == degraded {
93
99
  $char: '\E91B';
94
100
  }
@@ -479,6 +485,12 @@
479
485
  .pf-icon-critical-risk {
480
486
  @include pf-icon(critical-risk);
481
487
  }
488
+ .pf-icon-data-sink {
489
+ @include pf-icon(data-sink);
490
+ }
491
+ .pf-icon-data-source {
492
+ @include pf-icon(data-source);
493
+ }
482
494
  .pf-icon-degraded {
483
495
  @include pf-icon(degraded);
484
496
  }
package/assets/pficon/pficon.woff CHANGED
Binary file
package/assets/pficon/pficon.woff2 CHANGED
Binary file
package/base/patternfly-icons.css CHANGED
@@ -4190,7 +4190,7 @@
4190
4190
  font-family: "pficon";
4191
4191
  src: url("./assets/pficon/pficon.woff2") format("woff2"), url("./assets/pficon/pficon.woff") format("woff");
4192
4192
  }
4193
- .pf-icon-zone:before, .pf-icon-warning-triangle:before, .pf-icon-volume:before, .pf-icon-virtual-machine:before, .pf-icon-users:before, .pf-icon-user:before, .pf-icon-unplugged:before, .pf-icon-unlocked:before, .pf-icon-unknown:before, .pf-icon-trend-up:before, .pf-icon-trend-down:before, .pf-icon-topology:before, .pf-icon-thumb-tack:before, .pf-icon-tenant:before, .pf-icon-task:before, .pf-icon-storage-domain:before, .pf-icon-spinner2:before, .pf-icon-spinner:before, .pf-icon-services:before, .pf-icon-service:before, .pf-icon-service-catalog:before, .pf-icon-server:before, .pf-icon-server-group:before, .pf-icon-security:before, .pf-icon-screen:before, .pf-icon-save:before, .pf-icon-running:before, .pf-icon-resources-full:before, .pf-icon-resources-empty:before, .pf-icon-resources-almost-full:before, .pf-icon-resources-almost-empty:before, .pf-icon-resource-pool:before, .pf-icon-repository:before, .pf-icon-replicator:before, .pf-icon-remove2:before, .pf-icon-registry:before, .pf-icon-regions:before, .pf-icon-rebooting:before, .pf-icon-rebalance:before, .pf-icon-project:before, .pf-icon-process-automation:before, .pf-icon-private:before, .pf-icon-print:before, .pf-icon-port:before, .pf-icon-plugged:before, .pf-icon-pficon-vcenter:before, .pf-icon-pficon-template:before, .pf-icon-pficon-sort-common-desc:before, .pf-icon-pficon-sort-common-asc:before, .pf-icon-pficon-satellite:before, .pf-icon-pficon-network-range:before, .pf-icon-pficon-history:before, .pf-icon-pficon-dragdrop:before, .pf-icon-pending:before, .pf-icon-paused:before, .pf-icon-panel-open:before, .pf-icon-panel-close:before, .pf-icon-package:before, .pf-icon-os-image:before, .pf-icon-orders:before, .pf-icon-optimize:before, .pf-icon-openstack:before, .pf-icon-openshift:before, .pf-icon-open-drawer-right:before, .pf-icon-on:before, .pf-icon-on-running:before, .pf-icon-ok:before, .pf-icon-off:before, .pf-icon-not-started:before, .pf-icon-new-process:before, .pf-icon-network:before, .pf-icon-namespaces:before, .pf-icon-monitoring:before, .pf-icon-module:before, .pf-icon-migration:before, .pf-icon-middleware:before, .pf-icon-messages:before, .pf-icon-memory:before, .pf-icon-maintenance:before, .pf-icon-locked:before, .pf-icon-key:before, .pf-icon-integration:before, .pf-icon-infrastructure:before, .pf-icon-info:before, .pf-icon-in-progress:before, .pf-icon-import:before, .pf-icon-home:before, .pf-icon-history:before, .pf-icon-help:before, .pf-icon-globe-route:before, .pf-icon-folder-open:before, .pf-icon-folder-close:before, .pf-icon-flavor:before, .pf-icon-filter:before, .pf-icon-export:before, .pf-icon-error-circle-o:before, .pf-icon-equalizer:before, .pf-icon-enterprise:before, .pf-icon-enhancement:before, .pf-icon-edit:before, .pf-icon-domain:before, .pf-icon-disconnected:before, .pf-icon-degraded:before, .pf-icon-critical-risk:before, .pf-icon-cpu:before, .pf-icon-container-node:before, .pf-icon-connected:before, .pf-icon-cluster:before, .pf-icon-cloud-tenant:before, .pf-icon-cloud-security:before, .pf-icon-close:before, .pf-icon-chat:before, .pf-icon-catalog:before, .pf-icon-bundle:before, .pf-icon-builder-image:before, .pf-icon-build:before, .pf-icon-blueprint:before, .pf-icon-bell:before, .pf-icon-automation:before, .pf-icon-attention-bell:before, .pf-icon-asleep:before, .pf-icon-arrow:before, .pf-icon-applications:before, .pf-icon-ansible-tower:before, .pf-icon-add-circle-o:before {
4193
+ .pf-icon-zone:before, .pf-icon-warning-triangle:before, .pf-icon-volume:before, .pf-icon-virtual-machine:before, .pf-icon-users:before, .pf-icon-user:before, .pf-icon-unplugged:before, .pf-icon-unlocked:before, .pf-icon-unknown:before, .pf-icon-trend-up:before, .pf-icon-trend-down:before, .pf-icon-topology:before, .pf-icon-thumb-tack:before, .pf-icon-tenant:before, .pf-icon-task:before, .pf-icon-storage-domain:before, .pf-icon-spinner2:before, .pf-icon-spinner:before, .pf-icon-services:before, .pf-icon-service:before, .pf-icon-service-catalog:before, .pf-icon-server:before, .pf-icon-server-group:before, .pf-icon-security:before, .pf-icon-screen:before, .pf-icon-save:before, .pf-icon-running:before, .pf-icon-resources-full:before, .pf-icon-resources-empty:before, .pf-icon-resources-almost-full:before, .pf-icon-resources-almost-empty:before, .pf-icon-resource-pool:before, .pf-icon-repository:before, .pf-icon-replicator:before, .pf-icon-remove2:before, .pf-icon-registry:before, .pf-icon-regions:before, .pf-icon-rebooting:before, .pf-icon-rebalance:before, .pf-icon-project:before, .pf-icon-process-automation:before, .pf-icon-private:before, .pf-icon-print:before, .pf-icon-port:before, .pf-icon-plugged:before, .pf-icon-pficon-vcenter:before, .pf-icon-pficon-template:before, .pf-icon-pficon-sort-common-desc:before, .pf-icon-pficon-sort-common-asc:before, .pf-icon-pficon-satellite:before, .pf-icon-pficon-network-range:before, .pf-icon-pficon-history:before, .pf-icon-pficon-dragdrop:before, .pf-icon-pending:before, .pf-icon-paused:before, .pf-icon-panel-open:before, .pf-icon-panel-close:before, .pf-icon-package:before, .pf-icon-os-image:before, .pf-icon-orders:before, .pf-icon-optimize:before, .pf-icon-openstack:before, .pf-icon-openshift:before, .pf-icon-open-drawer-right:before, .pf-icon-on:before, .pf-icon-on-running:before, .pf-icon-ok:before, .pf-icon-off:before, .pf-icon-not-started:before, .pf-icon-new-process:before, .pf-icon-network:before, .pf-icon-namespaces:before, .pf-icon-monitoring:before, .pf-icon-module:before, .pf-icon-migration:before, .pf-icon-middleware:before, .pf-icon-messages:before, .pf-icon-memory:before, .pf-icon-maintenance:before, .pf-icon-locked:before, .pf-icon-key:before, .pf-icon-integration:before, .pf-icon-infrastructure:before, .pf-icon-info:before, .pf-icon-in-progress:before, .pf-icon-import:before, .pf-icon-home:before, .pf-icon-history:before, .pf-icon-help:before, .pf-icon-globe-route:before, .pf-icon-folder-open:before, .pf-icon-folder-close:before, .pf-icon-flavor:before, .pf-icon-filter:before, .pf-icon-export:before, .pf-icon-error-circle-o:before, .pf-icon-equalizer:before, .pf-icon-enterprise:before, .pf-icon-enhancement:before, .pf-icon-edit:before, .pf-icon-domain:before, .pf-icon-disconnected:before, .pf-icon-degraded:before, .pf-icon-data-source:before, .pf-icon-data-sink:before, .pf-icon-critical-risk:before, .pf-icon-cpu:before, .pf-icon-container-node:before, .pf-icon-connected:before, .pf-icon-cluster:before, .pf-icon-cloud-tenant:before, .pf-icon-cloud-security:before, .pf-icon-close:before, .pf-icon-chat:before, .pf-icon-catalog:before, .pf-icon-bundle:before, .pf-icon-builder-image:before, .pf-icon-build:before, .pf-icon-blueprint:before, .pf-icon-bell:before, .pf-icon-automation:before, .pf-icon-attention-bell:before, .pf-icon-asleep:before, .pf-icon-arrow:before, .pf-icon-applications:before, .pf-icon-ansible-tower:before, .pf-icon-add-circle-o:before {
4194
4194
  font-family: "pficon";
4195
4195
  -webkit-font-smoothing: antialiased;
4196
4196
  -moz-osx-font-smoothing: grayscale;
@@ -4289,6 +4289,14 @@
4289
4289
  content: "\e976";
4290
4290
  }
4291
4291
 
4292
+ .pf-icon-data-sink:before {
4293
+ content: "\e978";
4294
+ }
4295
+
4296
+ .pf-icon-data-source:before {
4297
+ content: "\e979";
4298
+ }
4299
+
4292
4300
  .pf-icon-degraded:before {
4293
4301
  content: "\e91b";
4294
4302
  }
package/base/patternfly-pf-icons.css CHANGED
@@ -2,7 +2,7 @@
2
2
  font-family: "pficon";
3
3
  src: url("./assets/pficon/pficon.woff2") format("woff2"), url("./assets/pficon/pficon.woff") format("woff");
4
4
  }
5
- .pf-icon-zone:before, .pf-icon-warning-triangle:before, .pf-icon-volume:before, .pf-icon-virtual-machine:before, .pf-icon-users:before, .pf-icon-user:before, .pf-icon-unplugged:before, .pf-icon-unlocked:before, .pf-icon-unknown:before, .pf-icon-trend-up:before, .pf-icon-trend-down:before, .pf-icon-topology:before, .pf-icon-thumb-tack:before, .pf-icon-tenant:before, .pf-icon-task:before, .pf-icon-storage-domain:before, .pf-icon-spinner2:before, .pf-icon-spinner:before, .pf-icon-services:before, .pf-icon-service:before, .pf-icon-service-catalog:before, .pf-icon-server:before, .pf-icon-server-group:before, .pf-icon-security:before, .pf-icon-screen:before, .pf-icon-save:before, .pf-icon-running:before, .pf-icon-resources-full:before, .pf-icon-resources-empty:before, .pf-icon-resources-almost-full:before, .pf-icon-resources-almost-empty:before, .pf-icon-resource-pool:before, .pf-icon-repository:before, .pf-icon-replicator:before, .pf-icon-remove2:before, .pf-icon-registry:before, .pf-icon-regions:before, .pf-icon-rebooting:before, .pf-icon-rebalance:before, .pf-icon-project:before, .pf-icon-process-automation:before, .pf-icon-private:before, .pf-icon-print:before, .pf-icon-port:before, .pf-icon-plugged:before, .pf-icon-pficon-vcenter:before, .pf-icon-pficon-template:before, .pf-icon-pficon-sort-common-desc:before, .pf-icon-pficon-sort-common-asc:before, .pf-icon-pficon-satellite:before, .pf-icon-pficon-network-range:before, .pf-icon-pficon-history:before, .pf-icon-pficon-dragdrop:before, .pf-icon-pending:before, .pf-icon-paused:before, .pf-icon-panel-open:before, .pf-icon-panel-close:before, .pf-icon-package:before, .pf-icon-os-image:before, .pf-icon-orders:before, .pf-icon-optimize:before, .pf-icon-openstack:before, .pf-icon-openshift:before, .pf-icon-open-drawer-right:before, .pf-icon-on:before, .pf-icon-on-running:before, .pf-icon-ok:before, .pf-icon-off:before, .pf-icon-not-started:before, .pf-icon-new-process:before, .pf-icon-network:before, .pf-icon-namespaces:before, .pf-icon-monitoring:before, .pf-icon-module:before, .pf-icon-migration:before, .pf-icon-middleware:before, .pf-icon-messages:before, .pf-icon-memory:before, .pf-icon-maintenance:before, .pf-icon-locked:before, .pf-icon-key:before, .pf-icon-integration:before, .pf-icon-infrastructure:before, .pf-icon-info:before, .pf-icon-in-progress:before, .pf-icon-import:before, .pf-icon-home:before, .pf-icon-history:before, .pf-icon-help:before, .pf-icon-globe-route:before, .pf-icon-folder-open:before, .pf-icon-folder-close:before, .pf-icon-flavor:before, .pf-icon-filter:before, .pf-icon-export:before, .pf-icon-error-circle-o:before, .pf-icon-equalizer:before, .pf-icon-enterprise:before, .pf-icon-enhancement:before, .pf-icon-edit:before, .pf-icon-domain:before, .pf-icon-disconnected:before, .pf-icon-degraded:before, .pf-icon-critical-risk:before, .pf-icon-cpu:before, .pf-icon-container-node:before, .pf-icon-connected:before, .pf-icon-cluster:before, .pf-icon-cloud-tenant:before, .pf-icon-cloud-security:before, .pf-icon-close:before, .pf-icon-chat:before, .pf-icon-catalog:before, .pf-icon-bundle:before, .pf-icon-builder-image:before, .pf-icon-build:before, .pf-icon-blueprint:before, .pf-icon-bell:before, .pf-icon-automation:before, .pf-icon-attention-bell:before, .pf-icon-asleep:before, .pf-icon-arrow:before, .pf-icon-applications:before, .pf-icon-ansible-tower:before, .pf-icon-add-circle-o:before {
5
+ .pf-icon-zone:before, .pf-icon-warning-triangle:before, .pf-icon-volume:before, .pf-icon-virtual-machine:before, .pf-icon-users:before, .pf-icon-user:before, .pf-icon-unplugged:before, .pf-icon-unlocked:before, .pf-icon-unknown:before, .pf-icon-trend-up:before, .pf-icon-trend-down:before, .pf-icon-topology:before, .pf-icon-thumb-tack:before, .pf-icon-tenant:before, .pf-icon-task:before, .pf-icon-storage-domain:before, .pf-icon-spinner2:before, .pf-icon-spinner:before, .pf-icon-services:before, .pf-icon-service:before, .pf-icon-service-catalog:before, .pf-icon-server:before, .pf-icon-server-group:before, .pf-icon-security:before, .pf-icon-screen:before, .pf-icon-save:before, .pf-icon-running:before, .pf-icon-resources-full:before, .pf-icon-resources-empty:before, .pf-icon-resources-almost-full:before, .pf-icon-resources-almost-empty:before, .pf-icon-resource-pool:before, .pf-icon-repository:before, .pf-icon-replicator:before, .pf-icon-remove2:before, .pf-icon-registry:before, .pf-icon-regions:before, .pf-icon-rebooting:before, .pf-icon-rebalance:before, .pf-icon-project:before, .pf-icon-process-automation:before, .pf-icon-private:before, .pf-icon-print:before, .pf-icon-port:before, .pf-icon-plugged:before, .pf-icon-pficon-vcenter:before, .pf-icon-pficon-template:before, .pf-icon-pficon-sort-common-desc:before, .pf-icon-pficon-sort-common-asc:before, .pf-icon-pficon-satellite:before, .pf-icon-pficon-network-range:before, .pf-icon-pficon-history:before, .pf-icon-pficon-dragdrop:before, .pf-icon-pending:before, .pf-icon-paused:before, .pf-icon-panel-open:before, .pf-icon-panel-close:before, .pf-icon-package:before, .pf-icon-os-image:before, .pf-icon-orders:before, .pf-icon-optimize:before, .pf-icon-openstack:before, .pf-icon-openshift:before, .pf-icon-open-drawer-right:before, .pf-icon-on:before, .pf-icon-on-running:before, .pf-icon-ok:before, .pf-icon-off:before, .pf-icon-not-started:before, .pf-icon-new-process:before, .pf-icon-network:before, .pf-icon-namespaces:before, .pf-icon-monitoring:before, .pf-icon-module:before, .pf-icon-migration:before, .pf-icon-middleware:before, .pf-icon-messages:before, .pf-icon-memory:before, .pf-icon-maintenance:before, .pf-icon-locked:before, .pf-icon-key:before, .pf-icon-integration:before, .pf-icon-infrastructure:before, .pf-icon-info:before, .pf-icon-in-progress:before, .pf-icon-import:before, .pf-icon-home:before, .pf-icon-history:before, .pf-icon-help:before, .pf-icon-globe-route:before, .pf-icon-folder-open:before, .pf-icon-folder-close:before, .pf-icon-flavor:before, .pf-icon-filter:before, .pf-icon-export:before, .pf-icon-error-circle-o:before, .pf-icon-equalizer:before, .pf-icon-enterprise:before, .pf-icon-enhancement:before, .pf-icon-edit:before, .pf-icon-domain:before, .pf-icon-disconnected:before, .pf-icon-degraded:before, .pf-icon-data-source:before, .pf-icon-data-sink:before, .pf-icon-critical-risk:before, .pf-icon-cpu:before, .pf-icon-container-node:before, .pf-icon-connected:before, .pf-icon-cluster:before, .pf-icon-cloud-tenant:before, .pf-icon-cloud-security:before, .pf-icon-close:before, .pf-icon-chat:before, .pf-icon-catalog:before, .pf-icon-bundle:before, .pf-icon-builder-image:before, .pf-icon-build:before, .pf-icon-blueprint:before, .pf-icon-bell:before, .pf-icon-automation:before, .pf-icon-attention-bell:before, .pf-icon-asleep:before, .pf-icon-arrow:before, .pf-icon-applications:before, .pf-icon-ansible-tower:before, .pf-icon-add-circle-o:before {
6
6
  font-family: "pficon";
7
7
  -webkit-font-smoothing: antialiased;
8
8
  -moz-osx-font-smoothing: grayscale;
@@ -101,6 +101,14 @@
101
101
  content: "\e976";
102
102
  }
103
103
 
104
+ .pf-icon-data-sink:before {
105
+ content: "\e978";
106
+ }
107
+
108
+ .pf-icon-data-source:before {
109
+ content: "\e979";
110
+ }
111
+
104
112
  .pf-icon-degraded:before {
105
113
  content: "\e91b";
106
114
  }
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