@patternfly/patternfly 6.0.0-alpha.55 → 6.0.0-alpha.57

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 (26) hide show
  1. package/components/Button/button.css +26 -11
  2. package/components/Button/button.scss +27 -12
  3. package/components/DescriptionList/description-list.css +39 -34
  4. package/components/DescriptionList/description-list.scss +25 -25
  5. package/components/JumpLinks/jump-links.css +34 -34
  6. package/components/JumpLinks/jump-links.scss +35 -36
  7. package/components/Label/label-group.css +39 -44
  8. package/components/Label/label-group.scss +39 -45
  9. package/components/Label/label.css +258 -355
  10. package/components/Label/label.scss +297 -347
  11. package/components/SimpleList/simple-list.css +1 -1
  12. package/components/SimpleList/simple-list.scss +1 -1
  13. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  14. package/docs/components/Label/examples/Label.css +4 -0
  15. package/docs/components/Label/examples/Label.md +999 -223
  16. package/docs/demos/Drawer/examples/Drawer.md +100 -80
  17. package/docs/demos/Form/examples/BasicForms.md +2 -2
  18. package/docs/demos/JumpLinks/examples/JumpLinks.md +275 -185
  19. package/package.json +1 -1
  20. package/patternfly-no-globals.css +481 -483
  21. package/patternfly-theme-dark-unversioned.css +481 -483
  22. package/patternfly.css +481 -483
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
  25. package/sass-utilities/mixins.scss +18 -0
  26. package/components/Label/themes/dark/label.scss +0 -53
package/components/Label/label-group.css CHANGED
@@ -1,38 +1,39 @@
1
- .pf-v5-c-label-group {
2
- --pf-v5-c-label-group--RowGap: var(--pf-v5-global--spacer--sm);
3
- --pf-v5-c-label-group--ColumnGap: 0;
4
- --pf-v5-c-label-group--m-vertical--RowGap: var(--pf-v5-global--spacer--sm);
5
- --pf-v5-c-label-group--m-vertical--ColumnGap: var(--pf-v5-global--spacer--sm);
6
- --pf-v5-c-label-group__main--RowGap: var(--pf-v5-global--spacer--xs);
7
- --pf-v5-c-label-group__main--ColumnGap: var(--pf-v5-global--spacer--sm);
8
- --pf-v5-c-label-group--m-vertical__main--RowGap: var(--pf-v5-global--spacer--sm);
9
- --pf-v5-c-label-group--m-vertical__main--ColumnGap: var(--pf-v5-global--spacer--xs);
10
- --pf-v5-c-label-group__list--RowGap: var(--pf-v5-global--spacer--xs);
11
- --pf-v5-c-label-group__list--ColumnGap: var(--pf-v5-global--spacer--xs);
12
- --pf-v5-c-label-group--m-vertical__list--RowGap: var(--pf-v5-global--spacer--xs);
13
- --pf-v5-c-label-group--m-vertical__list--ColumnGap: var(--pf-v5-global--spacer--xs);
14
- --pf-v5-c-label-group--m-category--PaddingTop: var(--pf-v5-global--spacer--xs);
15
- --pf-v5-c-label-group--m-category--PaddingRight: var(--pf-v5-global--spacer--xs);
16
- --pf-v5-c-label-group--m-category--PaddingBottom: var(--pf-v5-global--spacer--xs);
17
- --pf-v5-c-label-group--m-category--PaddingLeft: var(--pf-v5-global--spacer--sm);
18
- --pf-v5-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-v5-global--spacer--sm);
19
- --pf-v5-c-label-group--m-category--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
20
- --pf-v5-c-label-group--m-category--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
21
- --pf-v5-c-label-group--m-category--BorderColor: var(--pf-v5-global--BorderColor--300);
22
- --pf-v5-c-label-group--m-category--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
23
- --pf-v5-c-label-group__label--FontSize: var(--pf-v5-global--FontSize--sm);
1
+ :where(:root),
2
+ :where(.pf-v5-c-label-group) {
3
+ --pf-v5-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
4
+ --pf-v5-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
5
+ --pf-v5-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
6
+ --pf-v5-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
7
+ --pf-v5-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
8
+ --pf-v5-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
9
+ --pf-v5-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
10
+ --pf-v5-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
11
+ --pf-v5-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
12
+ --pf-v5-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
13
+ --pf-v5-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
14
+ --pf-v5-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
15
+ --pf-v5-c-label-group--m-category--PaddingTop: var(--pf-t--global--spacer--xs);
16
+ --pf-v5-c-label-group--m-category--PaddingRight: var(--pf-t--global--spacer--sm);
17
+ --pf-v5-c-label-group--m-category--PaddingBottom: var(--pf-t--global--spacer--xs);
18
+ --pf-v5-c-label-group--m-category--PaddingLeft: var(--pf-t--global--spacer--sm);
19
+ --pf-v5-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
20
+ --pf-v5-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
21
+ --pf-v5-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
22
+ --pf-v5-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-t--global--spacer--sm);
24
23
  --pf-v5-c-label-group__label--MaxWidth: 18ch;
25
- --pf-v5-c-label-group__close--MarginTop: calc(var(--pf-v5-global--spacer--xs) * -1);
26
- --pf-v5-c-label-group__close--MarginBottom: calc(var(--pf-v5-global--spacer--xs) * -1);
27
- --pf-v5-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
28
- --pf-v5-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
29
- --pf-v5-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
30
- --pf-v5-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
24
+ --pf-v5-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--body--sm);
25
+ --pf-v5-c-label-group__close--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
26
+ --pf-v5-c-label-group__close--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
27
+ --pf-v5-c-label-group__close--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
28
+ --pf-v5-c-label-group__close--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
31
29
  --pf-v5-c-label-group__textarea--MinWidth: 12.5rem;
32
30
  --pf-v5-c-label-group__textarea--PaddingTop: 0.125rem;
33
- --pf-v5-c-label-group__textarea--PaddingRight: var(--pf-v5-global--spacer--xs);
31
+ --pf-v5-c-label-group__textarea--PaddingRight: var(--pf-t--global--spacer--xs);
34
32
  --pf-v5-c-label-group__textarea--PaddingBottom: 0;
35
- --pf-v5-c-label-group__textarea--PaddingLeft: var(--pf-v5-global--spacer--xs);
33
+ --pf-v5-c-label-group__textarea--PaddingLeft: var(--pf-t--global--spacer--xs);
34
+ }
35
+
36
+ .pf-v5-c-label-group {
36
37
  display: inline-flex;
37
38
  row-gap: var(--pf-v5-c-label-group--RowGap);
38
39
  column-gap: var(--pf-v5-c-label-group--ColumnGap);
@@ -54,10 +55,6 @@
54
55
  --pf-v5-c-label-group__main--ColumnGap: var(--pf-v5-c-label-group--m-vertical__main--ColumnGap);
55
56
  --pf-v5-c-label-group__list--RowGap: var(--pf-v5-c-label-group--m-vertical__list--RowGap);
56
57
  --pf-v5-c-label-group__list--ColumnGap: var(--pf-v5-c-label-group--m-vertical__list--ColumnGap);
57
- --pf-v5-c-label-group__close--MarginTop: var(--pf-v5-c-label-group--m-vertical__close--MarginTop);
58
- --pf-v5-c-label-group__close--MarginLeft: var(--pf-v5-c-label-group--m-vertical__close--MarginLeft);
59
- --pf-v5-c-label-group__close--MarginBottom: 0;
60
- --pf-v5-c-label-group__close--MarginRight: var(--pf-v5-c-label-group--m-vertical__close--MarginRight);
61
58
  --pf-v5-c-label-group--m-category--PaddingRight: var(--pf-v5-c-label-group--m-vertical--m-category--PaddingRight);
62
59
  }
63
60
  .pf-v5-c-label-group.pf-m-vertical.pf-v5-c-label-group {
@@ -70,10 +67,6 @@
70
67
  .pf-v5-c-label-group.pf-m-vertical .pf-v5-c-label-group__main {
71
68
  flex-direction: column;
72
69
  }
73
- .pf-v5-c-label-group.pf-m-vertical .pf-v5-c-label-group__close .pf-v5-c-button {
74
- --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-label-group--m-vertical__close--c-button--PaddingLeft);
75
- --pf-v5-c-button--PaddingRight: var(--pf-v5-c-label-group--m-vertical__close--c-button--PaddingRight);
76
- }
77
70
  .pf-v5-c-label-group.pf-m-editable,
78
71
  .pf-v5-c-label-group.pf-m-editable .pf-v5-c-label-group__main,
79
72
  .pf-v5-c-label-group.pf-m-editable .pf-v5-c-label-group__list {
@@ -111,16 +104,18 @@
111
104
  text-overflow: ellipsis;
112
105
  white-space: nowrap;
113
106
  max-width: var(--pf-v5-c-label-group__label--MaxWidth);
114
- font-size: var(--pf-v5-c-label-group__label--FontSize);
115
107
  }
116
108
 
117
109
  .pf-v5-c-label-group__close {
118
110
  display: flex;
119
111
  align-self: flex-start;
120
- margin-block-start: var(--pf-v5-c-label-group__close--MarginTop);
121
- margin-block-end: var(--pf-v5-c-label-group__close--MarginBottom);
122
- margin-inline-start: var(--pf-v5-c-label-group__close--MarginLeft);
123
- margin-inline-end: var(--pf-v5-c-label-group__close--MarginRight);
112
+ }
113
+ .pf-v5-c-label-group__close .pf-v5-c-button {
114
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-label-group__close--c-button--FontSize);
115
+ --pf-v5-c-button--m-plain--m-no-padding--PaddingTop: var(--pf-v5-c-label-group__close--c-button--PaddingTop);
116
+ --pf-v5-c-button--m-plain--m-no-padding--PaddingRight: var(--pf-v5-c-label-group__close--c-button--PaddingRight);
117
+ --pf-v5-c-button--m-plain--m-no-padding--PaddingBottom: var(--pf-v5-c-label-group__close--c-button--PaddingBottom);
118
+ --pf-v5-c-button--m-plain--m-no-padding--PaddingLeft: var(--pf-v5-c-label-group__close--c-button--PaddingLeft);
124
119
  }
125
120
 
126
121
  .pf-v5-c-label-group__textarea {
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 {