@patternfly/react-styles 6.0.0-alpha.11 → 6.0.0-alpha.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (61) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Alert/alert.css +2 -0
  3. package/css/components/Breadcrumb/breadcrumb.css +9 -1
  4. package/css/components/Button/button.css +44 -24
  5. package/css/components/CalendarMonth/calendar-month.css +61 -92
  6. package/css/components/CalendarMonth/calendar-month.d.ts +2 -4
  7. package/css/components/CalendarMonth/calendar-month.js +2 -4
  8. package/css/components/CalendarMonth/calendar-month.mjs +2 -4
  9. package/css/components/CodeBlock/code-block.css +4 -0
  10. package/css/components/CodeEditor/code-editor.css +94 -72
  11. package/css/components/CodeEditor/code-editor.d.ts +4 -4
  12. package/css/components/CodeEditor/code-editor.js +4 -4
  13. package/css/components/CodeEditor/code-editor.mjs +4 -4
  14. package/css/components/DatePicker/date-picker.css +13 -14
  15. package/css/components/DatePicker/date-picker.d.ts +1 -2
  16. package/css/components/DatePicker/date-picker.js +1 -2
  17. package/css/components/DatePicker/date-picker.mjs +1 -2
  18. package/css/components/Divider/divider.css +8 -6
  19. package/css/components/DualListSelector/dual-list-selector.css +56 -48
  20. package/css/components/DualListSelector/dual-list-selector.d.ts +1 -2
  21. package/css/components/DualListSelector/dual-list-selector.js +1 -2
  22. package/css/components/DualListSelector/dual-list-selector.mjs +1 -2
  23. package/css/components/FormControl/form-control.css +3 -3
  24. package/css/components/Icon/icon.css +27 -27
  25. package/css/components/Label/label-group.css +1 -1
  26. package/css/components/Label/label.css +13 -7
  27. package/css/components/Menu/menu.css +388 -419
  28. package/css/components/Menu/menu.d.ts +5 -8
  29. package/css/components/Menu/menu.js +5 -8
  30. package/css/components/Menu/menu.mjs +5 -8
  31. package/css/components/MenuToggle/menu-toggle.css +229 -265
  32. package/css/components/MenuToggle/menu-toggle.d.ts +7 -8
  33. package/css/components/MenuToggle/menu-toggle.js +7 -8
  34. package/css/components/MenuToggle/menu-toggle.mjs +7 -8
  35. package/css/components/Pagination/pagination.css +2 -12
  36. package/css/components/ProgressStepper/progress-stepper.css +72 -69
  37. package/css/components/ProgressStepper/progress-stepper.d.ts +1 -0
  38. package/css/components/ProgressStepper/progress-stepper.js +1 -0
  39. package/css/components/ProgressStepper/progress-stepper.mjs +1 -0
  40. package/css/components/Table/table-grid.css +29 -45
  41. package/css/components/Table/table-scrollable.css +6 -6
  42. package/css/components/Table/table-tree-view.css +76 -74
  43. package/css/components/Table/table.css +54 -74
  44. package/css/components/TextInputGroup/text-input-group.css +0 -14
  45. package/css/components/TextInputGroup/text-input-group.d.ts +1 -3
  46. package/css/components/TextInputGroup/text-input-group.js +1 -3
  47. package/css/components/TextInputGroup/text-input-group.mjs +1 -3
  48. package/css/components/Tile/tile.css +1 -1
  49. package/css/components/TreeView/tree-view.css +76 -97
  50. package/css/components/TreeView/tree-view.d.ts +0 -4
  51. package/css/components/TreeView/tree-view.js +0 -4
  52. package/css/components/TreeView/tree-view.mjs +0 -4
  53. package/css/components/Wizard/wizard.css +128 -205
  54. package/css/components/Wizard/wizard.d.ts +0 -3
  55. package/css/components/Wizard/wizard.js +0 -3
  56. package/css/components/Wizard/wizard.mjs +0 -3
  57. package/css/docs/components/Menu/examples/Menu.css +7 -11
  58. package/css/docs/components/Menu/examples/Menu.d.ts +2 -1
  59. package/css/docs/components/Menu/examples/Menu.js +2 -1
  60. package/css/docs/components/Menu/examples/Menu.mjs +2 -1
  61. package/package.json +3 -3
package/css/components/DualListSelector/dual-list-selector.js CHANGED
@@ -39,6 +39,5 @@ exports.default = {
39
39
  "check": "pf-m-check",
40
40
  "ghostRow": "pf-m-ghost-row",
41
41
  "read": "pf-m-read"
42
- },
43
- "themeDark": "pf-v5-theme-dark"
42
+ }
44
43
  };
package/css/components/DualListSelector/dual-list-selector.mjs CHANGED
@@ -37,6 +37,5 @@ export default {
37
37
  "check": "pf-m-check",
38
38
  "ghostRow": "pf-m-ghost-row",
39
39
  "read": "pf-m-read"
40
- },
41
- "themeDark": "pf-v5-theme-dark"
40
+ }
42
41
  };
package/css/components/FormControl/form-control.css CHANGED
@@ -22,9 +22,9 @@
22
22
  --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control--inset--base);
23
23
  --pf-v5-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
24
24
  --pf-v5-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
25
- --pf-v5-c-form-control--focus--after--BorderWidth: var(--pf-t--global--border--width--control--active);
25
+ --pf-v5-c-form-control--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
26
26
  --pf-v5-c-form-control--focus--after--BorderColor: var(--pf-t--global--border--color--active);
27
- --pf-v5-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--active);
27
+ --pf-v5-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
28
28
  --pf-v5-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--active);
29
29
  --pf-v5-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
30
30
  --pf-v5-c-form-control--m-placeholder--child--Color: var(--pf-t--global--text--color--regular);
@@ -34,7 +34,7 @@
34
34
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
35
35
  --pf-v5-c-form-control--m-readonly--BorderColor: transparent;
36
36
  --pf-v5-c-form-control--m-readonly--hover--after--BorderColor: revert;
37
- --pf-v5-c-form-control--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--active);
37
+ --pf-v5-c-form-control--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
38
38
  --pf-v5-c-form-control--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--active);
39
39
  --pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
40
40
  --pf-v5-c-form-control--m-readonly--m-plain--inset--base: 0;
package/css/components/Icon/icon.css CHANGED
@@ -14,24 +14,24 @@
14
14
  --pf-v5-c-icon--m-2xl--Height: var(--pf-t--global--icon--size--2xl);
15
15
  --pf-v5-c-icon--m-3xl--Width: var(--pf-t--global--icon--size--3xl);
16
16
  --pf-v5-c-icon--m-3xl--Height: var(--pf-t--global--icon--size--3xl);
17
- --pf-v5-c-icon--m-body-sm--Width: var(--pf-t--global--icon--size--body--sm);
18
- --pf-v5-c-icon--m-body-sm--Height: var(--pf-t--global--icon--size--body--sm);
19
- --pf-v5-c-icon--m-body-default--Width: var(--pf-t--global--icon--size--body--default);
20
- --pf-v5-c-icon--m-body-default--Height: var(--pf-t--global--icon--size--body--default);
21
- --pf-v5-c-icon--m-body-lg--Width: var(--pf-t--global--icon--size--body--lg);
22
- --pf-v5-c-icon--m-body-lg--Height: var(--pf-t--global--icon--size--body--lg);
23
- --pf-v5-c-icon--m-heading-sm--Width: var(--pf-t--global--icon--size--heading--h6);
24
- --pf-v5-c-icon--m-heading-sm--Height: var(--pf-t--global--icon--size--heading--h6);
25
- --pf-v5-c-icon--m-heading-md--Width: var(--pf-t--global--icon--size--heading--h5);
26
- --pf-v5-c-icon--m-heading-md--Height: var(--pf-t--global--icon--size--heading--h5);
27
- --pf-v5-c-icon--m-heading-lg--Width: var(--pf-t--global--icon--size--heading--h4);
28
- --pf-v5-c-icon--m-heading-lg--Height: var(--pf-t--global--icon--size--heading--h4);
29
- --pf-v5-c-icon--m-heading-xl--Width: var(--pf-t--global--icon--size--heading--h3);
30
- --pf-v5-c-icon--m-heading-xl--Height: var(--pf-t--global--icon--size--heading--h3);
31
- --pf-v5-c-icon--m-heading-2xl--Width: var(--pf-t--global--icon--size--heading--h2);
32
- --pf-v5-c-icon--m-heading-2xl--Height: var(--pf-t--global--icon--size--heading--h2);
33
- --pf-v5-c-icon--m-heading-3xl--Width: var(--pf-t--global--icon--size--heading--h1);
34
- --pf-v5-c-icon--m-heading-3xl--Height: var(--pf-t--global--icon--size--heading--h1);
17
+ --pf-v5-c-icon--m-body-sm--Width: var(--pf-t--global--icon--size--font--body--sm);
18
+ --pf-v5-c-icon--m-body-sm--Height: var(--pf-t--global--icon--size--font--body--sm);
19
+ --pf-v5-c-icon--m-body-default--Width: var(--pf-t--global--icon--size--font--body--default);
20
+ --pf-v5-c-icon--m-body-default--Height: var(--pf-t--global--icon--size--font--body--default);
21
+ --pf-v5-c-icon--m-body-lg--Width: var(--pf-t--global--icon--size--font--body--lg);
22
+ --pf-v5-c-icon--m-body-lg--Height: var(--pf-t--global--icon--size--font--body--lg);
23
+ --pf-v5-c-icon--m-heading-sm--Width: var(--pf-t--global--icon--size--font--heading--h6);
24
+ --pf-v5-c-icon--m-heading-sm--Height: var(--pf-t--global--icon--size--font--heading--h6);
25
+ --pf-v5-c-icon--m-heading-md--Width: var(--pf-t--global--icon--size--font--heading--h5);
26
+ --pf-v5-c-icon--m-heading-md--Height: var(--pf-t--global--icon--size--font--heading--h5);
27
+ --pf-v5-c-icon--m-heading-lg--Width: var(--pf-t--global--icon--size--font--heading--h4);
28
+ --pf-v5-c-icon--m-heading-lg--Height: var(--pf-t--global--icon--size--font--heading--h4);
29
+ --pf-v5-c-icon--m-heading-xl--Width: var(--pf-t--global--icon--size--font--heading--h3);
30
+ --pf-v5-c-icon--m-heading-xl--Height: var(--pf-t--global--icon--size--font--heading--h3);
31
+ --pf-v5-c-icon--m-heading-2xl--Width: var(--pf-t--global--icon--size--font--heading--h2);
32
+ --pf-v5-c-icon--m-heading-2xl--Height: var(--pf-t--global--icon--size--font--heading--h2);
33
+ --pf-v5-c-icon--m-heading-3xl--Width: var(--pf-t--global--icon--size--font--heading--h1);
34
+ --pf-v5-c-icon--m-heading-3xl--Height: var(--pf-t--global--icon--size--font--heading--h1);
35
35
  --pf-v5-c-icon--m-inline--Width: 1em;
36
36
  --pf-v5-c-icon--m-inline--Height: 1em;
37
37
  --pf-v5-c-icon__content--svg--VerticalAlign: -.125em;
@@ -49,15 +49,15 @@
49
49
  --pf-v5-c-icon--m-xl__content--FontSize: var(--pf-t--global--icon--size--xl);
50
50
  --pf-v5-c-icon--m-2xl__content--FontSize: var(--pf-t--global--icon--size--2xl);
51
51
  --pf-v5-c-icon--m-3xl__content--FontSize: var(--pf-t--global--icon--size--3xl);
52
- --pf-v5-c-icon--m-body-sm__content--FontSize: var(--pf-t--global--icon--size--body--sm);
53
- --pf-v5-c-icon--m-body-default__content--FontSize: var(--pf-t--global--icon--size--body--default);
54
- --pf-v5-c-icon--m-body-lg__content--FontSize: var(--pf-t--global--icon--size--body--lg);
55
- --pf-v5-c-icon--m-heading-sm__content--FontSize: var(--pf-t--global--icon--size--heading--h6);
56
- --pf-v5-c-icon--m-heading-md__content--FontSize: var(--pf-t--global--icon--size--heading--h5);
57
- --pf-v5-c-icon--m-heading-lg__content--FontSize: var(--pf-t--global--icon--size--heading--h4);
58
- --pf-v5-c-icon--m-heading-xl__content--FontSize: var(--pf-t--global--icon--size--heading--h3);
59
- --pf-v5-c-icon--m-heading-2xl__content--FontSize: var(--pf-t--global--icon--size--heading--h2);
60
- --pf-v5-c-icon--m-heading-3xl__content--FontSize: var(--pf-t--global--icon--size--heading--h1);
52
+ --pf-v5-c-icon--m-body-sm__content--FontSize: var(--pf-t--global--icon--size--font--body--sm);
53
+ --pf-v5-c-icon--m-body-default__content--FontSize: var(--pf-t--global--icon--size--font--body--default);
54
+ --pf-v5-c-icon--m-body-lg__content--FontSize: var(--pf-t--global--icon--size--font--body--lg);
55
+ --pf-v5-c-icon--m-heading-sm__content--FontSize: var(--pf-t--global--icon--size--font--heading--h6);
56
+ --pf-v5-c-icon--m-heading-md__content--FontSize: var(--pf-t--global--icon--size--font--heading--h5);
57
+ --pf-v5-c-icon--m-heading-lg__content--FontSize: var(--pf-t--global--icon--size--font--heading--h4);
58
+ --pf-v5-c-icon--m-heading-xl__content--FontSize: var(--pf-t--global--icon--size--font--heading--h3);
59
+ --pf-v5-c-icon--m-heading-2xl__content--FontSize: var(--pf-t--global--icon--size--font--heading--h2);
60
+ --pf-v5-c-icon--m-heading-3xl__content--FontSize: var(--pf-t--global--icon--size--font--heading--h1);
61
61
  --pf-v5-c-icon--m-inline__content--FontSize: 1em;
62
62
  }
63
63
 
package/css/components/Label/label-group.css CHANGED
@@ -21,7 +21,7 @@
21
21
  --pf-v5-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
22
22
  --pf-v5-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-t--global--spacer--sm);
23
23
  --pf-v5-c-label-group__label--MaxWidth: 18ch;
24
- --pf-v5-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--body--sm);
24
+ --pf-v5-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
25
25
  --pf-v5-c-label-group__close--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
26
26
  --pf-v5-c-label-group__close--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
27
27
  --pf-v5-c-label-group__close--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
package/css/components/Label/label.css CHANGED
@@ -133,6 +133,7 @@
133
133
  --pf-v5-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
134
134
  --pf-v5-c-label--m-clickable--hover--BorderWidth: 0;
135
135
  --pf-v5-c-label--m-clickable--hover--BorderColor: transparent;
136
+ --pf-v5-c-label--m-clickable__content--Cursor: pointer;
136
137
  --pf-v5-c-label--m-filled__actions--c-button--Color: var(--pf-v5-c-label__icon--Color);
137
138
  --pf-v5-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--button--default);
138
139
  --pf-v5-c-label--m-outline--BackgroundColor: transparent;
@@ -163,10 +164,11 @@
163
164
  --pf-v5-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
164
165
  --pf-v5-c-label__content--MaxWidth: 100%;
165
166
  --pf-v5-c-label__content--Gap: var(--pf-t--global--spacer--xs);
166
- --pf-v5-c-label__icon--FontSize: var(--pf-t--global--icon--size--body--sm);
167
+ --pf-v5-c-label__content--Cursor: initial;
168
+ --pf-v5-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
167
169
  --pf-v5-c-label__text--MaxWidth: 100%;
168
170
  --pf-v5-c-label__actions--MarginRight: calc(var(--pf-v5-c-label__actions--c-button--PaddingRight) * -1);
169
- --pf-v5-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--body--sm);
171
+ --pf-v5-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
170
172
  --pf-v5-c-label__actions--c-button--OutlineOffset: -0.1875rem;
171
173
  --pf-v5-c-label__actions--c-button--MarginTop: calc(var(--pf-v5-c-label__actions--c-button--PaddingTop) * -1);
172
174
  --pf-v5-c-label__actions--c-button--MarginBottom: calc(var(--pf-v5-c-label__actions--c-button--PaddingBottom) * -1);
@@ -180,9 +182,11 @@
180
182
  --pf-v5-c-label--m-editable--TextDecorationOffset: 0.25rem;
181
183
  --pf-v5-c-label--m-editable--TextDecorationColor: currentcolor;
182
184
  --pf-v5-c-label--m-editable__content--MaxWidth: 16ch;
185
+ --pf-v5-c-label--m-editable__content--Cursor: pointer;
183
186
  --pf-v5-c-label--m-editable--m-editable-active--TextDecoration: none;
184
187
  --pf-v5-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
185
188
  --pf-v5-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
189
+ --pf-v5-c-label--m-editable--m-editable-active__content--Cursor: initial;
186
190
  }
187
191
 
188
192
  .pf-v5-c-label {
@@ -364,6 +368,7 @@
364
368
  }
365
369
  .pf-v5-c-label.pf-m-editable {
366
370
  --pf-v5-c-label__content--MaxWidth: var(--pf-v5-c-label--m-editable__content--MaxWidth);
371
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-editable__content--Cursor);
367
372
  }
368
373
  .pf-v5-c-label.pf-m-editable .pf-v5-c-label__text {
369
374
  text-decoration: var(--pf-v5-c-label--m-editable--TextDecoration);
@@ -376,6 +381,7 @@
376
381
  --pf-v5-c-label--m-editable--TextDecoration: var(--pf-v5-c-label--m-editable--m-editable-active--TextDecoration);
377
382
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-editable--m-editable-active--BackgroundColor);
378
383
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-editable--m-editable-active--Color);
384
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-editable--m-editable-active__content--Cursor);
379
385
  }
380
386
  .pf-v5-c-label.pf-m-overflow {
381
387
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-overflow--Color);
@@ -398,11 +404,8 @@
398
404
  --pf-v5-c-label--m-add--BorderColor: var(--pf-v5-c-label--m-add--hover--BorderColor);
399
405
  --pf-v5-c-label--m-add--BorderWidth: var(--pf-v5-c-label--m-add--hover--BorderWidth);
400
406
  }
401
- .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content, .pf-v5-c-label.pf-m-editable .pf-v5-c-label__content {
402
- padding: 0;
403
- cursor: pointer;
404
- background-color: transparent;
405
- border: none;
407
+ .pf-v5-c-label.pf-m-clickable {
408
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-clickable__content--Cursor);
406
409
  }
407
410
  .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content, .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content:is(:hover, :focus) {
408
411
  text-decoration: none;
@@ -436,8 +439,11 @@
436
439
  .pf-v5-c-label__content {
437
440
  gap: var(--pf-v5-c-label__content--Gap);
438
441
  max-width: var(--pf-v5-c-label__content--MaxWidth);
442
+ padding: 0;
439
443
  overflow: hidden;
440
444
  color: var(--pf-v5-c-label--Color);
445
+ cursor: var(--pf-v5-c-label__content--Cursor, revert);
446
+ background: transparent;
441
447
  border-width: 0;
442
448
  }
443
449
  .pf-v5-c-label__content::before {