@patternfly/patternfly 6.0.0-alpha.56 → 6.0.0-alpha.58

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 (35) hide show
  1. package/components/Button/button.css +26 -11
  2. package/components/Button/button.scss +27 -12
  3. package/components/CodeBlock/code-block.css +18 -9
  4. package/components/CodeBlock/code-block.scss +18 -10
  5. package/components/DescriptionList/description-list.css +39 -34
  6. package/components/DescriptionList/description-list.scss +25 -25
  7. package/components/FileUpload/file-upload.css +28 -34
  8. package/components/FileUpload/file-upload.scss +30 -42
  9. package/components/Icon/icon.css +154 -18
  10. package/components/Icon/icon.scss +187 -20
  11. package/components/Label/label-group.css +39 -44
  12. package/components/Label/label-group.scss +39 -45
  13. package/components/Label/label.css +258 -355
  14. package/components/Label/label.scss +297 -347
  15. package/components/Sidebar/sidebar.css +20 -9
  16. package/components/Sidebar/sidebar.scss +23 -11
  17. package/components/SimpleList/simple-list.css +1 -1
  18. package/components/SimpleList/simple-list.scss +1 -1
  19. package/components/ToggleGroup/toggle-group.css +34 -47
  20. package/components/ToggleGroup/toggle-group.scss +34 -45
  21. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  22. package/docs/components/Icon/examples/Icon.md +82 -11
  23. package/docs/components/Label/examples/Label.css +4 -0
  24. package/docs/components/Label/examples/Label.md +999 -223
  25. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  26. package/docs/demos/Form/examples/BasicForms.md +2 -2
  27. package/package.json +1 -1
  28. package/patternfly-no-globals.css +701 -570
  29. package/patternfly-theme-dark-unversioned.css +701 -570
  30. package/patternfly.css +701 -570
  31. package/patternfly.min.css +1 -1
  32. package/patternfly.min.css.map +1 -1
  33. package/sass-utilities/mixins.scss +18 -0
  34. package/components/Label/themes/dark/label.scss +0 -53
  35. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
package/components/Sidebar/sidebar.css CHANGED
@@ -1,9 +1,9 @@
1
- .pf-v5-c-sidebar {
2
- --pf-v5-c-sidebar--inset: var(--pf-v5-global--spacer--md);
3
- --pf-v5-c-sidebar--xl--inset: var(--pf-v5-global--spacer--lg);
4
- --pf-v5-c-sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
5
- --pf-v5-c-sidebar--BorderWidth--base: var(--pf-v5-global--BorderWidth--sm);
6
- --pf-v5-c-sidebar--BorderColor--base: var(--pf-v5-global--BorderColor--100);
1
+ :root,
2
+ :where(.pf-v5-c-sidebar) {
3
+ --pf-v5-c-sidebar--inset: var(--pf-t--global--spacer--md);
4
+ --pf-v5-c-sidebar--xl--inset: var(--pf-t--global--spacer--lg);
5
+ --pf-v5-c-sidebar--BorderWidth--base: var(--pf-t--global--border--width--regular);
6
+ --pf-v5-c-sidebar--BorderColor--base: var(--pf-t--global--border--color--default);
7
7
  --pf-v5-c-sidebar__panel--PaddingTop: 0;
8
8
  --pf-v5-c-sidebar__panel--PaddingRight: 0;
9
9
  --pf-v5-c-sidebar__panel--PaddingBottom: 0;
@@ -59,11 +59,16 @@
59
59
  --pf-v5-c-sidebar__panel--md--FlexBasis: 15.625rem;
60
60
  --pf-v5-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
61
61
  --pf-v5-c-sidebar__panel--m-stack--FlexBasis: auto;
62
- --pf-v5-c-sidebar__panel--ZIndex: var(--pf-v5-global--ZIndex--xs);
63
- --pf-v5-c-sidebar__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
64
- --pf-v5-c-sidebar__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
62
+ --pf-v5-c-sidebar__panel--ZIndex: var(--pf-t--global--Zindex--xs);
63
+ --pf-v5-c-sidebar__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
64
+ --pf-v5-c-sidebar__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
65
+ --pf-v5-c-sidebar__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
66
+ --pf-v5-c-sidebar__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
65
67
  --pf-v5-c-sidebar__panel--m-sticky--Top: 0;
66
68
  --pf-v5-c-sidebar__panel--m-sticky--Position: sticky;
69
+ }
70
+
71
+ .pf-v5-c-sidebar {
67
72
  height: 100%;
68
73
  }
69
74
  @media (min-width: 768px) {
@@ -157,6 +162,9 @@
157
162
  --pf-v5-c-sidebar__panel--Position: static;
158
163
  --pf-v5-c-sidebar__panel--Top: auto;
159
164
  }
165
+ .pf-v5-c-sidebar__panel.pf-m-secondary {
166
+ --pf-v5-c-sidebar__panel--BackgroundColor: var(--pf-v5-c-sidebar__panel--m-secondary--BackgroundColor);
167
+ }
160
168
 
161
169
  .pf-v5-c-sidebar__content {
162
170
  flex-grow: 1;
@@ -176,6 +184,9 @@
176
184
  .pf-v5-c-sidebar__content.pf-m-no-background {
177
185
  --pf-v5-c-sidebar__content--BackgroundColor: transparent;
178
186
  }
187
+ .pf-v5-c-sidebar__content.pf-m-secondary {
188
+ --pf-v5-c-sidebar__content--BackgroundColor: var(--pf-v5-c-sidebar__content--m-secondary--BackgroundColor);
189
+ }
179
190
  .pf-v5-c-sidebar__content + .pf-v5-c-sidebar__panel {
180
191
  --pf-v5-c-sidebar__panel--Order: 1;
181
192
  }
package/components/Sidebar/sidebar.scss CHANGED
@@ -2,12 +2,12 @@
2
2
  $pf-v5-c-sidebar--breakpoint-map--width: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
3
3
  $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
4
4
 
5
- .#{$sidebar} {
6
- --#{$sidebar}--inset: var(--#{$pf-global}--spacer--md);
7
- --#{$sidebar}--xl--inset: var(--#{$pf-global}--spacer--lg);
8
- --#{$sidebar}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
9
- --#{$sidebar}--BorderWidth--base: var(--#{$pf-global}--BorderWidth--sm);
10
- --#{$sidebar}--BorderColor--base: var(--#{$pf-global}--BorderColor--100);
5
+ :root,
6
+ :where(.#{$sidebar}) {
7
+ --#{$sidebar}--inset: var(--pf-t--global--spacer--md);
8
+ --#{$sidebar}--xl--inset: var(--pf-t--global--spacer--lg);
9
+ --#{$sidebar}--BorderWidth--base: var(--pf-t--global--border--width--regular);
10
+ --#{$sidebar}--BorderColor--base: var(--pf-t--global--border--color--default);
11
11
 
12
12
  // Panel
13
13
  --#{$sidebar}__panel--PaddingTop: 0;
@@ -85,15 +85,21 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
85
85
  --#{$sidebar}__panel--md--FlexBasis: #{pf-size-prem(250px)};
86
86
  --#{$sidebar}__panel--m-split--FlexBasis: #{pf-size-prem(250px)};
87
87
  --#{$sidebar}__panel--m-stack--FlexBasis: auto;
88
- --#{$sidebar}__panel--ZIndex: var(--#{$pf-global}--ZIndex--xs);
89
- --#{$sidebar}__panel--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
88
+ --#{$sidebar}__panel--ZIndex: var(--pf-t--global--Zindex--xs);
89
+ --#{$sidebar}__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
90
+ --#{$sidebar}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
90
91
 
91
92
  // Content
92
- --#{$sidebar}__content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
93
+ --#{$sidebar}__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
94
+ --#{$sidebar}__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
93
95
 
94
96
  // Sticky
95
97
  --#{$sidebar}__panel--m-sticky--Top: 0;
96
98
  --#{$sidebar}__panel--m-sticky--Position: sticky;
99
+ }
100
+
101
+ .#{$sidebar} {
102
+ height: 100%;
97
103
 
98
104
  @media (min-width: $pf-v5-global--breakpoint--md) {
99
105
  --#{$sidebar}__main--FlexDirection: var(--#{$sidebar}__main--md--FlexDirection);
@@ -144,8 +150,6 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
144
150
  --#{$sidebar}__main--m-border--before--Display: var(--#{$sidebar}--m-split__main--m-border--before--Display);
145
151
  --#{$sidebar}--m-panel-right__panel--Order: var(--#{$sidebar}--m-split--m-panel-right__panel--Order);
146
152
  }
147
-
148
- height: 100%;
149
153
  }
150
154
 
151
155
  .#{$sidebar}__main {
@@ -192,6 +196,10 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
192
196
  --#{$sidebar}__panel--Position: static;
193
197
  --#{$sidebar}__panel--Top: auto;
194
198
  }
199
+
200
+ &.pf-m-secondary {
201
+ --#{$sidebar}__panel--BackgroundColor: var(--#{$sidebar}__panel--m-secondary--BackgroundColor);
202
+ }
195
203
  }
196
204
 
197
205
  .#{$sidebar}__content {
@@ -214,6 +222,10 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
214
222
  --#{$sidebar}__content--BackgroundColor: transparent;
215
223
  }
216
224
 
225
+ &.pf-m-secondary {
226
+ --#{$sidebar}__content--BackgroundColor: var(--#{$sidebar}__content--m-secondary--BackgroundColor);
227
+ }
228
+
217
229
  & + .#{$sidebar}__panel {
218
230
  --#{$sidebar}__panel--Order: 1;
219
231
  }
package/components/SimpleList/simple-list.css CHANGED
@@ -7,7 +7,7 @@
7
7
  --pf-v5-c-simple-list__item-link--Color: var(--pf-t--global--text--color--subtle);
8
8
  --pf-v5-c-simple-list__item-link--FontSize: var(--pf-t--global--font--size--body--default);
9
9
  --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
10
- --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
10
+ --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
11
11
  --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
12
12
  --pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
13
13
  --pf-v5-c-simple-list__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
package/components/SimpleList/simple-list.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  --#{$simple-list}__item-link--Color: var(--pf-t--global--text--color--subtle);
11
11
  --#{$simple-list}__item-link--FontSize: var(--pf-t--global--font--size--body--default);
12
12
  --#{$simple-list}__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
13
- --#{$simple-list}__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
13
+ --#{$simple-list}__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
14
14
  --#{$simple-list}__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
15
15
  --#{$simple-list}__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
16
16
  --#{$simple-list}__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
package/components/ToggleGroup/toggle-group.css CHANGED
@@ -1,38 +1,39 @@
1
- .pf-v5-c-toggle-group {
2
- --pf-v5-c-toggle-group__button--PaddingTop: var(--pf-v5-global--spacer--form-element);
3
- --pf-v5-c-toggle-group__button--PaddingRight: var(--pf-v5-global--spacer--md);
4
- --pf-v5-c-toggle-group__button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
5
- --pf-v5-c-toggle-group__button--PaddingLeft: var(--pf-v5-global--spacer--md);
6
- --pf-v5-c-toggle-group__button--FontSize: var(--pf-v5-global--FontSize--sm);
7
- --pf-v5-c-toggle-group__button--LineHeight: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
8
- --pf-v5-c-toggle-group__button--Color: var(--pf-v5-global--Color--100);
9
- --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
1
+ :where(:root),
2
+ :where(.pf-v5-c-toggle-group) {
3
+ --pf-v5-c-toggle-group__button--PaddingTop: var(--pf-t--global--spacer--sm);
4
+ --pf-v5-c-toggle-group__button--PaddingRight: var(--pf-t--global--spacer--md);
5
+ --pf-v5-c-toggle-group__button--PaddingBottom: var(--pf-t--global--spacer--sm);
6
+ --pf-v5-c-toggle-group__button--PaddingLeft: var(--pf-t--global--spacer--md);
7
+ --pf-v5-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
8
+ --pf-v5-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
9
+ --pf-v5-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
10
+ --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
10
11
  --pf-v5-c-toggle-group__button--ZIndex: auto;
11
- --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
12
- --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-v5-global--ZIndex--xs);
13
- --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-v5-global--BorderColor--200);
14
- --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
15
- --pf-v5-c-toggle-group__button--focus--ZIndex: var(--pf-v5-global--ZIndex--xs);
16
- --pf-v5-c-toggle-group__button--focus--before--BorderColor: var(--pf-v5-global--BorderColor--200);
17
- --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
18
- --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--disabled-color--100);
19
- --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
20
- --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-global--BorderColor--100);
21
- --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
22
- --pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-v5-global--BorderRadius--sm);
23
- --pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-v5-global--BorderRadius--sm);
24
- --pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-v5-global--BorderRadius--sm);
25
- --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-v5-global--BorderRadius--sm);
26
- --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
27
- --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-50);
28
- --pf-v5-c-toggle-group__button--m-selected--Color: initial;
29
- --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-v5-global--primary-color--100);
30
- --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-v5-global--ZIndex--xs);
12
+ --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
13
+ --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
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
+ --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
18
+ --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
19
+ --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
20
+ --pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-t--global--border--radius--tiny);
21
+ --pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-t--global--border--radius--tiny);
22
+ --pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-t--global--border--radius--tiny);
23
+ --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-t--global--border--radius--tiny);
24
+ --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
25
+ --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
26
+ --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
27
+ --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
28
+ --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
31
29
  --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
32
- --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-v5-global--spacer--sm);
30
+ --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
33
31
  --pf-v5-c-toggle-group--m-compact__button--PaddingBottom: 0;
34
- --pf-v5-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
35
- --pf-v5-c-toggle-group--m-compact__button--FontSize: var(--pf-v5-global--FontSize--xs);
32
+ --pf-v5-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-t--global--spacer--sm);
33
+ --pf-v5-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
34
+ }
35
+
36
+ .pf-v5-c-toggle-group {
36
37
  display: flex;
37
38
  }
38
39
  .pf-v5-c-toggle-group.pf-m-compact {
@@ -79,17 +80,12 @@
79
80
  content: "";
80
81
  border: var(--pf-v5-c-toggle-group__button--before--BorderWidth) solid var(--pf-v5-c-toggle-group__button--before--BorderColor);
81
82
  }
82
- .pf-v5-c-toggle-group__button:hover {
83
+ .pf-v5-c-toggle-group__button:hover, .pf-v5-c-toggle-group__button:focus {
83
84
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--hover--BackgroundColor);
84
85
  --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--hover--ZIndex);
85
86
  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--hover--before--BorderColor);
86
87
  text-decoration: none;
87
88
  }
88
- .pf-v5-c-toggle-group__button:focus {
89
- --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--focus--BackgroundColor);
90
- --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--focus--ZIndex);
91
- --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--focus--before--BorderColor);
92
- }
93
89
  .pf-v5-c-toggle-group__button.pf-m-selected {
94
90
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--m-selected--BackgroundColor);
95
91
  --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--m-selected--Color, inherit);
@@ -105,13 +101,4 @@
105
101
  .pf-v5-c-toggle-group__icon + .pf-v5-c-toggle-group__text,
106
102
  .pf-v5-c-toggle-group__text + .pf-v5-c-toggle-group__icon {
107
103
  margin-inline-start: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
108
- }
109
-
110
- :where(.pf-v5-theme-dark) .pf-v5-c-toggle-group {
111
- --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--palette--black-700);
112
- --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--palette--black-700);
113
- --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--palette--black-600);
114
- --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--palette--black-100);
115
- --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--primary-color--300);
116
- --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-v5-global--primary-color--400);
117
104
  }
package/components/ToggleGroup/toggle-group.scss CHANGED
@@ -1,50 +1,50 @@
1
1
  // @debug $toggle-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$toggle-group} {
3
+ :where(:root),
4
+ :where(.#{$toggle-group}) {
4
5
  // button
5
- --#{$toggle-group}__button--PaddingTop: var(--#{$pf-global}--spacer--form-element);
6
- --#{$toggle-group}__button--PaddingRight: var(--#{$pf-global}--spacer--md);
7
- --#{$toggle-group}__button--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
8
- --#{$toggle-group}__button--PaddingLeft: var(--#{$pf-global}--spacer--md);
9
- --#{$toggle-group}__button--FontSize: var(--#{$pf-global}--FontSize--sm);
10
- --#{$toggle-group}__button--LineHeight: calc(var(--#{$pf-global}--FontSize--md) * var(--#{$pf-global}--LineHeight--md));
11
- --#{$toggle-group}__button--Color: var(--#{$pf-global}--Color--100);
12
- --#{$toggle-group}__button--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
6
+ --#{$toggle-group}__button--PaddingTop: var(--pf-t--global--spacer--sm);
7
+ --#{$toggle-group}__button--PaddingRight: var(--pf-t--global--spacer--md);
8
+ --#{$toggle-group}__button--PaddingBottom: var(--pf-t--global--spacer--sm);
9
+ --#{$toggle-group}__button--PaddingLeft: var(--pf-t--global--spacer--md);
10
+ --#{$toggle-group}__button--FontSize: var(--pf-t--global--font--size--body--default);
11
+ --#{$toggle-group}__button--LineHeight: var(--pf-t--global--font--line-height--body);
12
+ --#{$toggle-group}__button--Color: var(--pf-t--global--text--color--regular);
13
+ --#{$toggle-group}__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
13
14
  --#{$toggle-group}__button--ZIndex: auto;
14
- --#{$toggle-group}__button--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
15
- --#{$toggle-group}__button--hover--ZIndex: var(--#{$pf-global}--ZIndex--xs);
16
- --#{$toggle-group}__button--hover--before--BorderColor: var(--#{$pf-global}--BorderColor--200);
17
- --#{$toggle-group}__button--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
18
- --#{$toggle-group}__button--focus--ZIndex: var(--#{$pf-global}--ZIndex--xs);
19
- --#{$toggle-group}__button--focus--before--BorderColor: var(--#{$pf-global}--BorderColor--200);
20
- --#{$toggle-group}__button--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
21
- --#{$toggle-group}__button--disabled--Color: var(--#{$pf-global}--disabled-color--100);
22
- --#{$toggle-group}__button--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
23
- --#{$toggle-group}__button--before--BorderColor: var(--#{$pf-global}--BorderColor--100);
15
+ --#{$toggle-group}__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
16
+ --#{$toggle-group}__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
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
+ --#{$toggle-group}__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
21
+ --#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--default);
24
22
 
25
23
  // item
26
- --#{$toggle-group}__item--item--MarginLeft: calc(-1 * var(--#{$pf-global}--BorderWidth--sm));
27
- --#{$toggle-group}__item--first-child__button--BorderTopLeftRadius: var(--#{$pf-global}--BorderRadius--sm);
28
- --#{$toggle-group}__item--first-child__button--BorderBottomLeftRadius: var(--#{$pf-global}--BorderRadius--sm);
29
- --#{$toggle-group}__item--last-child__button--BorderTopRightRadius: var(--#{$pf-global}--BorderRadius--sm);
30
- --#{$toggle-group}__item--last-child__button--BorderBottomRightRadius: var(--#{$pf-global}--BorderRadius--sm);
24
+ --#{$toggle-group}__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
25
+ --#{$toggle-group}__item--first-child__button--BorderTopLeftRadius: var(--pf-t--global--border--radius--tiny);
26
+ --#{$toggle-group}__item--first-child__button--BorderBottomLeftRadius: var(--pf-t--global--border--radius--tiny);
27
+ --#{$toggle-group}__item--last-child__button--BorderTopRightRadius: var(--pf-t--global--border--radius--tiny);
28
+ --#{$toggle-group}__item--last-child__button--BorderBottomRightRadius: var(--pf-t--global--border--radius--tiny);
31
29
 
32
30
  // icon
33
- --#{$toggle-group}__icon--text--MarginLeft: var(--#{$pf-global}--spacer--sm);
31
+ --#{$toggle-group}__icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
34
32
 
35
33
  // Selected
36
- --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
37
- --#{$toggle-group}__button--m-selected--Color: initial;
38
- --#{$toggle-group}__button--m-selected--before--BorderColor: var(--#{$pf-global}--primary-color--100);
39
- --#{$toggle-group}__button--m-selected--ZIndex: var(--#{$pf-global}--ZIndex--xs);
34
+ --#{$toggle-group}__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
35
+ --#{$toggle-group}__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
36
+ --#{$toggle-group}__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
37
+ --#{$toggle-group}__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
40
38
 
41
39
  // Compact
42
40
  --#{$toggle-group}--m-compact__button--PaddingTop: 0;
43
- --#{$toggle-group}--m-compact__button--PaddingRight: var(--#{$pf-global}--spacer--sm);
41
+ --#{$toggle-group}--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
44
42
  --#{$toggle-group}--m-compact__button--PaddingBottom: 0;
45
- --#{$toggle-group}--m-compact__button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
46
- --#{$toggle-group}--m-compact__button--FontSize: var(--#{$pf-global}--FontSize--xs);
43
+ --#{$toggle-group}--m-compact__button--PaddingLeft: var(--pf-t--global--spacer--sm);
44
+ --#{$toggle-group}--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
45
+ }
47
46
 
47
+ .#{$toggle-group} {
48
48
  display: flex;
49
49
 
50
50
  &.pf-m-compact {
@@ -107,7 +107,8 @@
107
107
  border: var(--#{$toggle-group}__button--before--BorderWidth) solid var(--#{$toggle-group}__button--before--BorderColor);
108
108
  }
109
109
 
110
- &:hover {
110
+ &:hover,
111
+ &:focus {
111
112
  --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--hover--BackgroundColor);
112
113
  --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--hover--ZIndex);
113
114
  --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--hover--before--BorderColor);
@@ -115,12 +116,6 @@
115
116
  text-decoration: none;
116
117
  }
117
118
 
118
- &:focus {
119
- --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--focus--BackgroundColor);
120
- --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--focus--ZIndex);
121
- --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--focus--before--BorderColor);
122
- }
123
-
124
119
  &.pf-m-selected {
125
120
  --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--m-selected--BackgroundColor);
126
121
  --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--m-selected--Color, inherit);
@@ -142,9 +137,3 @@
142
137
  margin-inline-start: var(--#{$toggle-group}__icon--text--MarginLeft);
143
138
  }
144
139
 
145
- // stylelint-disable no-invalid-position-at-import-rule
146
- @import "themes/dark/toggle-group";
147
-
148
- @include pf-v5-theme-dark {
149
- @include pf-v5-theme-dark-toggle-group;
150
- }
package/docs/components/FileUpload/examples/FileUpload.md CHANGED
@@ -48,6 +48,57 @@ cssPrefix: pf-v5-c-file-upload
48
48
 
49
49
  ```
50
50
 
51
+ ### With helper text
52
+
53
+ ```html
54
+ <div class="pf-v5-c-file-upload">
55
+ <div class="pf-v5-c-file-upload__file-select">
56
+ <div class="pf-v5-c-input-group">
57
+ <div class="pf-v5-c-input-group__item pf-m-fill">
58
+ <span class="pf-v5-c-form-control pf-m-readonly">
59
+ <input
60
+ readonly
61
+ id="file-upload-helper-text-text-input"
62
+ name="file-upload-helper-text-text-input"
63
+ aria-label="Drag and drop a file or upload one"
64
+ placeholder="Drag and drop a file or upload one"
65
+ aria-describedby="file-upload-helper-text-browse"
66
+ />
67
+ </span>
68
+ </div>
69
+ <div class="pf-v5-c-input-group__item">
70
+ <button
71
+ class="pf-v5-c-button pf-m-control"
72
+ type="button"
73
+ id="file-upload-helper-text-browse"
74
+ aria-describedby="helper-text-example"
75
+ >Upload</button>
76
+ </div>
77
+ <div class="pf-v5-c-input-group__item">
78
+ <button class="pf-v5-c-button pf-m-control" type="button" disabled>Clear</button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ <div class="pf-v5-c-file-upload__file-details">
83
+ <span class="pf-v5-c-form-control pf-m-resize-vertical">
84
+ <textarea
85
+ id="file-upload-helper-text-file-details"
86
+ name="file-upload-helper-text-file-details"
87
+ aria-label="Uploaded file content"
88
+ ></textarea>
89
+ </span>
90
+ </div>
91
+ <div class="pf-v5-c-file-upload__helper-text">
92
+ <div class="pf-v5-c-helper-text">
93
+ <div class="pf-v5-c-helper-text__item" id="helper-text-example">
94
+ <span class="pf-v5-c-helper-text__item-text">Upload a CSV file</span>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ ```
101
+
51
102
  ### Upload complete non editable
52
103
 
53
104
  ```html
@@ -187,63 +238,70 @@ cssPrefix: pf-v5-c-file-upload
187
238
  ```html
188
239
  <form class="pf-v5-c-form" novalidate>
189
240
  <div class="pf-v5-c-form__group">
190
- <div class="pf-v5-c-file-upload">
191
- <div class="pf-v5-c-file-upload__file-select">
192
- <div class="pf-v5-c-input-group">
193
- <div class="pf-v5-c-input-group__item pf-m-fill">
194
- <span class="pf-v5-c-form-control pf-m-required">
195
- <input
196
- required
197
- id="file-upload-error-text-input"
198
- name="file-upload-error-text-input"
199
- aria-label="File upload error"
200
- value="Sample.png"
201
- aria-describedby="file-upload-error-browse"
202
- />
203
- </span>
204
- </div>
205
- <div class="pf-v5-c-input-group__item">
206
- <button
207
- class="pf-v5-c-button pf-m-control"
208
- type="button"
209
- id="file-upload-error-browse"
210
- >Upload</button>
211
- </div>
212
- <div class="pf-v5-c-input-group__item">
213
- <button class="pf-v5-c-button pf-m-control" type="button">Clear</button>
241
+ <div class="pf-v5-c-form__group-control">
242
+ <div class="pf-v5-c-file-upload">
243
+ <div class="pf-v5-c-file-upload__file-select">
244
+ <div class="pf-v5-c-input-group">
245
+ <div class="pf-v5-c-input-group__item pf-m-fill">
246
+ <span class="pf-v5-c-form-control pf-m-readonly">
247
+ <input
248
+ readonly
249
+ id="file-upload-error-text-input"
250
+ name="file-upload-error-text-input"
251
+ aria-label="File upload error"
252
+ value="Sample.png"
253
+ aria-describedby="file-upload-error-browse"
254
+ />
255
+ </span>
256
+ </div>
257
+ <div class="pf-v5-c-input-group__item">
258
+ <button
259
+ class="pf-v5-c-button pf-m-control"
260
+ type="button"
261
+ id="file-upload-error-browse"
262
+ aria-describedby="with-error-example-helper-text"
263
+ >Upload</button>
264
+ </div>
265
+ <div class="pf-v5-c-input-group__item">
266
+ <button class="pf-v5-c-button pf-m-control" type="button">Clear</button>
267
+ </div>
214
268
  </div>
215
269
  </div>
216
- </div>
217
- <div
218
- class="pf-v5-c-file-upload__file-details"
219
- aria-describedby="textAreaHelperText1"
220
- aria-invalid="true"
221
- >
222
- <span class="pf-v5-c-form-control pf-m-error pf-m-resize-vertical">
223
- <textarea
224
- id="file-upload-error-file-details"
225
- name="file-upload-error-file-details"
226
- aria-label="Empty text area"
227
- aria-describedby="textAreaHelperText1"
228
- aria-invalid="true"
229
- ></textarea>
230
- <span class="pf-v5-c-form-control__utilities">
231
- <span class="pf-v5-c-form-control__icon pf-m-status">
232
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
233
- </span>
234
- </span>
235
- </span>
236
- </div>
237
- </div>
238
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
239
- <div class="pf-v5-c-helper-text">
240
270
  <div
241
- class="pf-v5-c-helper-text__item pf-m-error"
242
- id="textAreaHelperText1"
271
+ class="pf-v5-c-file-upload__file-details"
272
+ aria-describedby="with-error-example-helper-text"
273
+ aria-invalid="true"
243
274
  >
244
- <span
245
- class="pf-v5-c-helper-text__item-text"
246
- >We don't support this file type. Try again with a different file type.</span>
275
+ <span class="pf-v5-c-form-control pf-m-error pf-m-resize-vertical">
276
+ <textarea
277
+ id="file-upload-error-file-details"
278
+ name="file-upload-error-file-details"
279
+ aria-label="Empty text area"
280
+ aria-describedby="with-error-example-helper-text"
281
+ aria-invalid="true"
282
+ ></textarea>
283
+ <span class="pf-v5-c-form-control__utilities">
284
+ <span class="pf-v5-c-form-control__icon pf-m-status">
285
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
286
+ </span>
287
+ </span>
288
+ </span>
289
+ </div>
290
+
291
+ <div class="pf-v5-c-file-upload__helper-text">
292
+ <div class="pf-v5-c-helper-text">
293
+ <div
294
+ class="pf-v5-c-helper-text__item pf-m-error"
295
+ id="with-error-example-helper-text"
296
+ >
297
+ <span class="pf-v5-c-helper-text__item-icon">
298
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
299
+ </span>
300
+ <span
301
+ class="pf-v5-c-helper-text__item-text"
302
+ >Must be a CSV file no larger than 1 KB</span>
303
+ </div>
304
+ </div>
247
305
  </div>
248
306
  </div>
249
307
  </div>
@@ -327,5 +385,6 @@ cssPrefix: pf-v5-c-file-upload
327
385
  | `.pf-v5-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** |
328
386
  | `.pf-v5-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** |
329
387
  | `.pf-v5-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** |
388
+ | `.pf-v5-c-file-upload__helper-text` | `<div>` | Initiates a container for [helper text](/components/helper-text) |
330
389
  | `.pf-m-drag-hover` | `.pf-v5-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
331
390
  | `.pf-m-loading` | `.pf-v5-c-file-upload` | Modifies file upload for the loading state. |