@patternfly/patternfly 6.0.0-alpha.66 → 6.0.0-alpha.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/base/patternfly-variables.css +1 -4
  2. package/base/tokens/_tokens-default.scss +4 -4
  3. package/components/Tabs/tabs.css +143 -175
  4. package/components/Tabs/tabs.scss +159 -217
  5. package/components/ToggleGroup/toggle-group.css +22 -3
  6. package/components/ToggleGroup/toggle-group.scss +30 -7
  7. package/docs/components/Tabs/examples/Tabs.css +1 -1
  8. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  9. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +36 -28
  10. package/docs/demos/Tabs/examples/Tabs.md +21 -17
  11. package/package.json +1 -1
  12. package/patternfly-base-no-globals-theme-dark-unversioned.css +1 -4
  13. package/patternfly-base-no-globals.css +1 -4
  14. package/patternfly-base-theme-dark-unversioned.css +1 -4
  15. package/patternfly-base.css +1 -4
  16. package/patternfly-no-globals.css +166 -186
  17. package/patternfly-theme-dark-unversioned.css +166 -186
  18. package/patternfly.css +166 -186
  19. package/patternfly.min.css +1 -1
  20. package/patternfly.min.css.map +1 -1
  21. package/components/Tabs/themes/dark/tabs.scss +0 -10
package/components/ToggleGroup/toggle-group.css CHANGED
@@ -12,8 +12,6 @@
12
12
  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
13
13
  --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
14
14
  --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
15
- --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
16
- --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
17
15
  --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
18
16
  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
19
17
  --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
@@ -25,7 +23,13 @@
25
23
  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
26
24
  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
27
25
  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
26
+ --pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
28
27
  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
28
+ --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
29
+ --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
30
+ --pf-v5-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
31
+ --pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
32
+ --pf-v5-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
29
33
  --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
30
34
  --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
31
35
  --pf-v5-c-toggle-group--m-compact__button--PaddingBottom: 0;
@@ -78,7 +82,12 @@
78
82
  inset-inline-end: 0;
79
83
  pointer-events: none;
80
84
  content: "";
81
- border: var(--pf-v5-c-toggle-group__button--before--BorderWidth) solid var(--pf-v5-c-toggle-group__button--before--BorderColor);
85
+ border-style: solid;
86
+ border-width: var(--pf-v5-c-toggle-group__button--before--BorderWidth);
87
+ border-block-start-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
88
+ border-block-end-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
89
+ border-inline-start-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
90
+ border-inline-end-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
82
91
  }
83
92
  .pf-v5-c-toggle-group__button:hover, .pf-v5-c-toggle-group__button:focus {
84
93
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--hover--BackgroundColor);
@@ -95,9 +104,19 @@
95
104
  .pf-v5-c-toggle-group__button:disabled, .pf-v5-c-toggle-group__button.pf-m-disabled {
96
105
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--disabled--BackgroundColor);
97
106
  --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--disabled--Color);
107
+ --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--disabled--ZIndex);
108
+ --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--disabled--before--BorderColor);
98
109
  pointer-events: none;
99
110
  }
100
111
 
112
+ .pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
113
+ --pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
114
+ }
115
+
116
+ .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
117
+ --pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
118
+ }
119
+
101
120
  .pf-v5-c-toggle-group__icon + .pf-v5-c-toggle-group__text,
102
121
  .pf-v5-c-toggle-group__text + .pf-v5-c-toggle-group__icon {
103
122
  margin-inline-start: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
package/components/ToggleGroup/toggle-group.scss CHANGED
@@ -15,8 +15,6 @@
15
15
  --#{$toggle-group}__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
16
16
  --#{$toggle-group}__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
17
17
  --#{$toggle-group}__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
18
- --#{$toggle-group}__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
19
- --#{$toggle-group}__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
20
18
  --#{$toggle-group}__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
21
19
  --#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--default);
22
20
 
@@ -34,8 +32,16 @@
34
32
  --#{$toggle-group}__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
35
33
  --#{$toggle-group}__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
36
34
  --#{$toggle-group}__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
35
+ --#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
37
36
  --#{$toggle-group}__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
38
37
 
38
+ // disabled
39
+ --#{$toggle-group}__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
40
+ --#{$toggle-group}__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
41
+ --#{$toggle-group}__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
42
+ --#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
43
+ --#{$toggle-group}__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
44
+
39
45
  // Compact
40
46
  --#{$toggle-group}--m-compact__button--PaddingTop: 0;
41
47
  --#{$toggle-group}--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
@@ -98,13 +104,18 @@
98
104
 
99
105
  &::before {
100
106
  position: absolute;
101
- inset-block-start: 0;
102
- inset-block-end: 0;
103
- inset-inline-start: 0;
104
- inset-inline-end: 0;
107
+ inset-block-start: 0;
108
+ inset-block-end: 0;
109
+ inset-inline-start: 0;
110
+ inset-inline-end: 0;
105
111
  pointer-events: none;
106
112
  content: "";
107
- border: var(--#{$toggle-group}__button--before--BorderWidth) solid var(--#{$toggle-group}__button--before--BorderColor);
113
+ border-style: solid;
114
+ border-width: var(--#{$toggle-group}__button--before--BorderWidth);
115
+ border-block-start-color: var(--#{$toggle-group}__button--before--BorderBlockStartColor, var(--#{$toggle-group}__button--before--BorderColor));
116
+ border-block-end-color: var(--#{$toggle-group}__button--before--BorderBlockEndColor, var(--#{$toggle-group}__button--before--BorderColor));
117
+ border-inline-start-color: var(--#{$toggle-group}__button--before--BorderInlineStartColor, var(--#{$toggle-group}__button--before--BorderColor));
118
+ border-inline-end-color: var(--#{$toggle-group}__button--before--BorderInlineEndColor, var(--#{$toggle-group}__button--before--BorderColor));
108
119
  }
109
120
 
110
121
  &:hover,
@@ -127,11 +138,23 @@
127
138
  &.pf-m-disabled {
128
139
  --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--disabled--BackgroundColor);
129
140
  --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--disabled--Color);
141
+ --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--disabled--ZIndex);
142
+ --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--disabled--before--BorderColor);
130
143
 
131
144
  pointer-events: none;
132
145
  }
133
146
  }
134
147
 
148
+ // For consecutive selected items, turn the left border back to what it was
149
+ .pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
150
+ --#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor);
151
+ }
152
+
153
+ // For consecutive disabled items, turn the left border back to what it was
154
+ .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
155
+ --#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor);
156
+ }
157
+
135
158
  .#{$toggle-group}__icon + .#{$toggle-group}__text,
136
159
  .#{$toggle-group}__text + .#{$toggle-group}__icon {
137
160
  margin-inline-start: var(--#{$toggle-group}__icon--text--MarginLeft);
package/docs/components/Tabs/examples/Tabs.css CHANGED
@@ -5,6 +5,6 @@
5
5
  background-color: var(--tabs-example-block--BackgroundColor);
6
6
  }
7
7
 
8
- .tabs-example-block--m-color-scheme--light-300 {
8
+ .tabs-example-block--m-secondary {
9
9
  --tabs-example-block--BackgroundColor: var(--pf-v5-c--BackgroundColor--light-300);
10
10
  }