@patternfly/patternfly 6.0.0-alpha.202 → 6.0.0-alpha.204

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 (31) hide show
  1. package/components/Alert/alert.css +3 -3
  2. package/components/Alert/alert.scss +3 -3
  3. package/components/Button/button.css +34 -42
  4. package/components/Button/button.scss +34 -42
  5. package/components/Card/card.css +3 -3
  6. package/components/Card/card.scss +3 -3
  7. package/components/DataList/data-list.css +1 -1
  8. package/components/DataList/data-list.scss +1 -1
  9. package/components/Form/form.css +2 -2
  10. package/components/Form/form.scss +2 -2
  11. package/components/FormControl/form-control.css +14 -15
  12. package/components/FormControl/form-control.scss +14 -15
  13. package/components/Masthead/masthead.css +22 -1
  14. package/components/Masthead/masthead.scss +9 -1
  15. package/components/MenuToggle/menu-toggle.css +16 -26
  16. package/components/MenuToggle/menu-toggle.scss +16 -32
  17. package/components/Page/page.css +19 -11
  18. package/components/Page/page.scss +19 -12
  19. package/components/Table/table.css +2 -2
  20. package/components/Table/table.scss +2 -2
  21. package/components/TextInputGroup/text-input-group.css +11 -13
  22. package/components/TextInputGroup/text-input-group.scss +12 -14
  23. package/components/Wizard/wizard.css +1 -1
  24. package/components/Wizard/wizard.scss +1 -1
  25. package/components/_index.css +128 -120
  26. package/docs/demos/Page/examples/Page.md +608 -0
  27. package/package.json +1 -1
  28. package/patternfly-no-globals.css +128 -120
  29. package/patternfly.css +128 -120
  30. package/patternfly.min.css +1 -1
  31. package/patternfly.min.css.map +1 -1
package/components/Table/table.scss CHANGED
@@ -214,8 +214,8 @@
214
214
  --#{$table}__subhead--Color: var(--pf-t--global--text--color--subtle);
215
215
 
216
216
  // * Table subhead button
217
- --#{$table}__nested-column-header__button--PaddingInlineStart: calc(var(--#{$table}__button--PaddingInlineStart) - var(--pf-t--global--spacer--sm));
218
- --#{$table}__nested-column-header__button--PaddingInlineEnd: calc(var(--#{$table}__button--PaddingInlineEnd) - var(--pf-t--global--spacer--xs));
217
+ --#{$table}__nested-column-header__button--PaddingInlineStart: calc(var(--#{$table}__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
218
+ --#{$table}__nested-column-header__button--PaddingInlineEnd: calc(var(--#{$table}__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
219
219
 
220
220
  // * Table striped
221
221
  --#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -11,8 +11,8 @@
11
11
  --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
12
12
  --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
13
13
  --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
14
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
15
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
14
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
15
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
16
16
  --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
17
17
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
18
18
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
@@ -21,18 +21,19 @@
21
21
  --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
22
22
  --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
23
23
  --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
24
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
26
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
27
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
28
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
29
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
30
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--sm);
24
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
25
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
26
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
27
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
28
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
29
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
30
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
31
31
  --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
32
32
  --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
33
33
  --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
34
34
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
35
35
  --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
36
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
36
37
  --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
37
38
  --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
38
39
  --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -44,8 +45,6 @@
44
45
  --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
45
46
  --pf-v6-c-text-input-group__icon--TranslateY: -50%;
46
47
  --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
47
- --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
48
- --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
49
48
  --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
50
49
  --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
51
50
  }
@@ -125,8 +124,6 @@
125
124
  min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
126
125
  }
127
126
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
128
- padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
129
- padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
130
127
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
131
128
  }
132
129
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
@@ -147,6 +144,7 @@
147
144
  position: absolute;
148
145
  inset-block-start: 50%;
149
146
  inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
147
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
150
148
  color: var(--pf-v6-c-text-input-group__icon--Color);
151
149
  transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
152
150
  }
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -18,8 +18,8 @@
18
18
 
19
19
 
20
20
  // Main
21
- --#{$text-input-group}__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
22
- --#{$text-input-group}__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
21
+ --#{$text-input-group}__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
22
+ --#{$text-input-group}__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
23
23
  --#{$text-input-group}--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
24
24
  --#{$text-input-group}__main--RowGap: var(--pf-t--global--spacer--xs);
25
25
  --#{$text-input-group}__main--ColumnGap: var(--pf-t--global--spacer--xs);
@@ -32,15 +32,15 @@
32
32
  --#{$text-input-group}__text--BorderEndStartRadius: var(--#{$text-input-group}__text--BorderRadius--base);
33
33
 
34
34
  // Label group
35
- --#{$text-input-group}--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
36
- --#{$text-input-group}--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
37
- --#{$text-input-group}--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
35
+ --#{$text-input-group}--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
36
+ --#{$text-input-group}--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
37
+ --#{$text-input-group}--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
38
38
 
39
39
  // Text input
40
- --#{$text-input-group}__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
41
- --#{$text-input-group}__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
42
- --#{$text-input-group}__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
43
- --#{$text-input-group}__text-input--PaddingInlineStart: var(--pf-t--global--spacer--sm);
40
+ --#{$text-input-group}__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
41
+ --#{$text-input-group}__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
42
+ --#{$text-input-group}__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
43
+ --#{$text-input-group}__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
44
44
  --#{$text-input-group}__text-input--MinWidth: 12ch;
45
45
  --#{$text-input-group}__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
46
46
  --#{$text-input-group}__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
@@ -48,6 +48,7 @@
48
48
  --#{$text-input-group}__text-input--OutlineOffset: -6px;
49
49
 
50
50
  // Icon
51
+ --#{$text-input-group}__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
51
52
  --#{$text-input-group}__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
52
53
  --#{$text-input-group}__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
53
54
  --#{$text-input-group}__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -61,9 +62,7 @@
61
62
 
62
63
  // Utilities
63
64
  --#{$text-input-group}__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
64
- --#{$text-input-group}__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
65
- --#{$text-input-group}__utilities--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
66
-
65
+
67
66
  // input disabled style
68
67
  --#{$text-input-group}--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
69
68
  --#{$text-input-group}--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
@@ -156,8 +155,6 @@
156
155
  }
157
156
 
158
157
  > :first-child:not(.#{$text-input-group}__text) {
159
- padding-block-start: var(--#{$text-input-group}__main--first-child--not--text-input--PaddingBlockStart);
160
- padding-block-end: var(--#{$text-input-group}__main--first-child--not--text-input--PaddingBlockEnd);
161
158
  margin-inline-start: var(--#{$text-input-group}__main--first-child--not--text-input--MarginInlineStart);
162
159
  }
163
160
 
@@ -180,6 +177,7 @@
180
177
  position: absolute;
181
178
  inset-block-start: 50%;
182
179
  inset-inline-start: var(--#{$text-input-group}__icon--InsetInlineStart);
180
+ font-size: var(--#{$text-input-group}__icon--FontSize);
183
181
  color: var(--#{$text-input-group}__icon--Color);
184
182
  transform: translateY(var(--#{$text-input-group}__icon--TranslateY));
185
183
 
package/components/Wizard/wizard.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --pf-v6-c-wizard__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11
11
  --pf-v6-c-wizard__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
12
12
  --pf-v6-c-wizard__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
13
- --pf-v6-c-wizard__close--InsetBlockStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-button--m-plain--PaddingBlockStart));
13
+ --pf-v6-c-wizard__close--InsetBlockStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-t--global--spacer--control--vertical--plain));
14
14
  --pf-v6-c-wizard__close--InsetInlineEnd: var(--pf-t--global--spacer--sm);
15
15
  --pf-v6-c-wizard__close--FontSize: var(--pf-t--global--font--size--xl);
16
16
  --pf-v6-c-wizard__title--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
package/components/Wizard/wizard.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  --#{$wizard}__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
17
17
 
18
18
  // Close
19
- --#{$wizard}__close--InsetBlockStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$button}--m-plain--PaddingBlockStart));
19
+ --#{$wizard}__close--InsetBlockStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-t--global--spacer--control--vertical--plain));
20
20
  --#{$wizard}__close--InsetInlineEnd: var(--pf-t--global--spacer--sm);
21
21
  --#{$wizard}__close--FontSize: var(--pf-t--global--font--size--xl);
22
22