@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/Label/label-group.scss CHANGED
@@ -1,54 +1,54 @@
1
1
  // @debug $label-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$label-group} {
3
+ :where(:root),
4
+ :where(.#{$label-group}) {
4
5
  // Label group - spaces main with the close button
5
- --#{$label-group}--RowGap: var(--#{$pf-global}--spacer--sm);
6
- --#{$label-group}--ColumnGap: 0;
7
- --#{$label-group}--m-vertical--RowGap: var(--#{$pf-global}--spacer--sm);
8
- --#{$label-group}--m-vertical--ColumnGap: var(--#{$pf-global}--spacer--sm);
6
+ --#{$label-group}--RowGap: var(--pf-t--global--spacer--sm);
7
+ --#{$label-group}--ColumnGap: var(--pf-t--global--spacer--xs);
8
+ --#{$label-group}--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
9
+ --#{$label-group}--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
9
10
 
10
11
  // Main - spaces the category label with the list
11
- --#{$label-group}__main--RowGap: var(--#{$pf-global}--spacer--xs);
12
- --#{$label-group}__main--ColumnGap: var(--#{$pf-global}--spacer--sm);
13
- --#{$label-group}--m-vertical__main--RowGap: var(--#{$pf-global}--spacer--sm);
14
- --#{$label-group}--m-vertical__main--ColumnGap: var(--#{$pf-global}--spacer--xs);
12
+ --#{$label-group}__main--RowGap: var(--pf-t--global--spacer--xs);
13
+ --#{$label-group}__main--ColumnGap: var(--pf-t--global--spacer--sm);
14
+ --#{$label-group}--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
15
+ --#{$label-group}--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
15
16
 
16
17
  // List - spaces the items
17
- --#{$label-group}__list--RowGap: var(--#{$pf-global}--spacer--xs);
18
- --#{$label-group}__list--ColumnGap: var(--#{$pf-global}--spacer--xs);
19
- --#{$label-group}--m-vertical__list--RowGap: var(--#{$pf-global}--spacer--xs);
20
- --#{$label-group}--m-vertical__list--ColumnGap: var(--#{$pf-global}--spacer--xs);
18
+ --#{$label-group}__list--RowGap: var(--pf-t--global--spacer--xs);
19
+ --#{$label-group}__list--ColumnGap: var(--pf-t--global--spacer--xs);
20
+ --#{$label-group}--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
21
+ --#{$label-group}--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
21
22
 
22
23
  // Category
23
- --#{$label-group}--m-category--PaddingTop: var(--#{$pf-global}--spacer--xs);
24
- --#{$label-group}--m-category--PaddingRight: var(--#{$pf-global}--spacer--xs);
25
- --#{$label-group}--m-category--PaddingBottom: var(--#{$pf-global}--spacer--xs);
26
- --#{$label-group}--m-category--PaddingLeft: var(--#{$pf-global}--spacer--sm);
27
- --#{$label-group}--m-vertical--m-category--PaddingRight: var(--#{$pf-global}--spacer--sm);
28
- --#{$label-group}--m-category--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
29
- --#{$label-group}--m-category--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
30
- --#{$label-group}--m-category--BorderColor: var(--#{$pf-global}--BorderColor--300);
31
- --#{$label-group}--m-category--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
24
+ --#{$label-group}--m-category--PaddingTop: var(--pf-t--global--spacer--xs);
25
+ --#{$label-group}--m-category--PaddingRight: var(--pf-t--global--spacer--sm);
26
+ --#{$label-group}--m-category--PaddingBottom: var(--pf-t--global--spacer--xs);
27
+ --#{$label-group}--m-category--PaddingLeft: var(--pf-t--global--spacer--sm);
28
+ --#{$label-group}--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
29
+ --#{$label-group}--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
30
+ --#{$label-group}--m-category--BorderColor: var(--pf-t--global--border--color--default);
31
+ --#{$label-group}--m-vertical--m-category--PaddingRight: var(--pf-t--global--spacer--sm);
32
32
 
33
33
  // Label
34
- --#{$label-group}__label--FontSize: var(--#{$pf-global}--FontSize--sm);
35
34
  --#{$label-group}__label--MaxWidth: 18ch;
36
35
 
37
36
  // Close
38
- --#{$label-group}__close--MarginTop: calc(var(--#{$pf-global}--spacer--xs) * -1);
39
- --#{$label-group}__close--MarginBottom: calc(var(--#{$pf-global}--spacer--xs) * -1);
40
- --#{$label-group}--m-vertical__close--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
41
- --#{$label-group}--m-vertical__close--MarginRight: calc(var(--#{$pf-global}--spacer--form-element) * -1);
42
- --#{$label-group}--m-vertical__close--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
43
- --#{$label-group}--m-vertical__close--c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
37
+ --#{$label-group}__close--c-button--FontSize: var(--pf-t--global--icon--size--body--sm);
38
+ --#{$label-group}__close--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
39
+ --#{$label-group}__close--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
40
+ --#{$label-group}__close--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
41
+ --#{$label-group}__close--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
44
42
 
45
43
  // Textarea
46
44
  --#{$label-group}__textarea--MinWidth: #{pf-size-prem(200px)};
47
45
  --#{$label-group}__textarea--PaddingTop: #{pf-size-prem(2px)};
48
- --#{$label-group}__textarea--PaddingRight: var(--#{$pf-global}--spacer--xs);
46
+ --#{$label-group}__textarea--PaddingRight: var(--pf-t--global--spacer--xs);
49
47
  --#{$label-group}__textarea--PaddingBottom: 0;
50
- --#{$label-group}__textarea--PaddingLeft: var(--#{$pf-global}--spacer--xs);
48
+ --#{$label-group}__textarea--PaddingLeft: var(--pf-t--global--spacer--xs);
49
+ }
51
50
 
51
+ .#{$label-group} {
52
52
  display: inline-flex;
53
53
  row-gap: var(--#{$label-group}--RowGap);
54
54
  column-gap: var(--#{$label-group}--ColumnGap);
@@ -71,10 +71,6 @@
71
71
  --#{$label-group}__main--ColumnGap: var(--#{$label-group}--m-vertical__main--ColumnGap);
72
72
  --#{$label-group}__list--RowGap: var(--#{$label-group}--m-vertical__list--RowGap);
73
73
  --#{$label-group}__list--ColumnGap: var(--#{$label-group}--m-vertical__list--ColumnGap);
74
- --#{$label-group}__close--MarginTop: var(--#{$label-group}--m-vertical__close--MarginTop);
75
- --#{$label-group}__close--MarginLeft: var(--#{$label-group}--m-vertical__close--MarginLeft);
76
- --#{$label-group}__close--MarginBottom: 0;
77
- --#{$label-group}__close--MarginRight: var(--#{$label-group}--m-vertical__close--MarginRight);
78
74
  --#{$label-group}--m-category--PaddingRight: var(--#{$label-group}--m-vertical--m-category--PaddingRight);
79
75
 
80
76
  &.#{$label-group} {
@@ -89,11 +85,6 @@
89
85
  .#{$label-group}__main {
90
86
  flex-direction: column;
91
87
  }
92
-
93
- .#{$label-group}__close .#{$button} {
94
- --#{$button}--PaddingLeft: var(--#{$label-group}--m-vertical__close--c-button--PaddingLeft);
95
- --#{$button}--PaddingRight: var(--#{$label-group}--m-vertical__close--c-button--PaddingRight);
96
- }
97
88
  }
98
89
 
99
90
  &.pf-m-editable {
@@ -136,16 +127,19 @@
136
127
  @include pf-v5-text-overflow;
137
128
 
138
129
  max-width: var(--#{$label-group}__label--MaxWidth);
139
- font-size: var(--#{$label-group}__label--FontSize);
140
130
  }
141
131
 
142
132
  .#{$label-group}__close {
143
133
  display: flex;
144
134
  align-self: flex-start;
145
- margin-block-start: var(--#{$label-group}__close--MarginTop);
146
- margin-block-end: var(--#{$label-group}__close--MarginBottom);
147
- margin-inline-start: var(--#{$label-group}__close--MarginLeft);
148
- margin-inline-end: var(--#{$label-group}__close--MarginRight);
135
+
136
+ .#{$button} {
137
+ --#{$button}--FontSize: var(--#{$label-group}__close--c-button--FontSize);
138
+ --#{$button}--m-plain--m-no-padding--PaddingTop: var(--#{$label-group}__close--c-button--PaddingTop);
139
+ --#{$button}--m-plain--m-no-padding--PaddingRight: var(--#{$label-group}__close--c-button--PaddingRight);
140
+ --#{$button}--m-plain--m-no-padding--PaddingBottom: var(--#{$label-group}__close--c-button--PaddingBottom);
141
+ --#{$button}--m-plain--m-no-padding--PaddingLeft: var(--#{$label-group}__close--c-button--PaddingLeft);
142
+ }
149
143
  }
150
144
 
151
145
  .#{$label-group}__textarea {