@patternfly/patternfly 6.5.0-prerelease.32 → 6.5.0-prerelease.34

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 (77) hide show
  1. package/assets/fontawesome/_variables.scss +2 -1
  2. package/base/tokens/tokens-local.scss +1 -1
  3. package/components/AboutModalBox/about-modal-box.css +36 -26
  4. package/components/Accordion/accordion.css +16 -13
  5. package/components/Alert/alert.css +5 -4
  6. package/components/Avatar/avatar.css +12 -4
  7. package/components/BackgroundImage/background-image.css +6 -3
  8. package/components/Banner/banner.css +8 -6
  9. package/components/Brand/brand.css +3 -1
  10. package/components/Breadcrumb/breadcrumb.css +4 -3
  11. package/components/Button/button.css +6 -6
  12. package/components/CalendarMonth/calendar-month.css +4 -3
  13. package/components/Card/card.css +7 -6
  14. package/components/ClipboardCopy/clipboard-copy.css +4 -3
  15. package/components/CodeEditor/code-editor.css +1 -1
  16. package/components/CodeEditor/code-editor.scss +1 -1
  17. package/components/Compass/compass.css +6 -2
  18. package/components/DataList/data-list.css +28 -21
  19. package/components/DescriptionList/description-list-order.scss +5 -1
  20. package/components/DescriptionList/description-list.css +7 -5
  21. package/components/DescriptionList/description-list.scss +5 -1
  22. package/components/Divider/divider.css +7 -5
  23. package/components/Drawer/drawer.css +38 -28
  24. package/components/Drawer/drawer.scss +12 -4
  25. package/components/DualListSelector/dual-list-selector.css +17 -11
  26. package/components/ExpandableSection/expandable-section.css +16 -14
  27. package/components/ExpandableSection/expandable-section.scss +1 -1
  28. package/components/Form/form.css +1 -1
  29. package/components/Form/form.scss +1 -1
  30. package/components/FormControl/form-control.css +1 -1
  31. package/components/FormControl/form-control.scss +1 -1
  32. package/components/JumpLinks/jump-links.css +4 -3
  33. package/components/JumpLinks/jump-links.scss +5 -1
  34. package/components/Label/label-group.css +2 -2
  35. package/components/Label/label-group.scss +2 -2
  36. package/components/Label/label.css +4 -3
  37. package/components/Login/login.css +51 -37
  38. package/components/Masthead/masthead.css +32 -18
  39. package/components/Masthead/masthead.scss +8 -2
  40. package/components/Menu/menu.css +23 -14
  41. package/components/ModalBox/modal-box.css +9 -7
  42. package/components/ModalBox/modal-box.scss +2 -2
  43. package/components/Nav/nav.css +17 -9
  44. package/components/Nav/nav.scss +5 -0
  45. package/components/NotificationDrawer/notification-drawer.css +6 -6
  46. package/components/Page/page.css +35 -29
  47. package/components/Page/page.scss +17 -5
  48. package/components/Pagination/pagination.scss +5 -1
  49. package/components/ProgressStepper/progress-stepper.scss +5 -1
  50. package/components/Sidebar/sidebar.css +1 -1
  51. package/components/Sidebar/sidebar.scss +7 -3
  52. package/components/Skeleton/skeleton.css +16 -15
  53. package/components/Slider/slider.css +32 -18
  54. package/components/Switch/switch.css +3 -1
  55. package/components/Table/table-tree-view.css +4 -2
  56. package/components/Table/table.css +31 -27
  57. package/components/Tabs/tabs.css +17 -15
  58. package/components/Tabs/tabs.scss +12 -4
  59. package/components/Toolbar/toolbar.css +14 -8
  60. package/components/Toolbar/toolbar.scss +5 -1
  61. package/components/TreeView/tree-view.css +44 -13
  62. package/components/TreeView/tree-view.scss +31 -0
  63. package/components/Wizard/wizard.css +20 -16
  64. package/components/Wizard/wizard.scss +3 -3
  65. package/components/_index.css +613 -426
  66. package/docs/components/TreeView/examples/TreeView.md +38 -26
  67. package/layouts/Flex/flex.scss +83 -19
  68. package/layouts/Gallery/gallery.css +6 -2
  69. package/layouts/_index.css +6 -2
  70. package/package.json +4 -2
  71. package/patternfly-charts.css +3 -3
  72. package/patternfly-no-globals.css +604 -413
  73. package/patternfly.css +604 -413
  74. package/patternfly.min.css +1 -1
  75. package/patternfly.min.css.map +1 -1
  76. package/sass-utilities/functions.scss +32 -25
  77. package/sass-utilities/mixins.scss +36 -20
package/components/TreeView/tree-view.scss CHANGED
@@ -94,6 +94,11 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
94
94
  --#{$tree-view}__node-toggle-icon--Rotate: var(--#{$tree-view}__node-toggle-icon--base--Rotate);
95
95
  --#{$tree-view}__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
96
96
 
97
+ // Disabled
98
+ --#{$tree-view}__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
99
+ --#{$tree-view}__node-icon--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
100
+ --#{$tree-view}__node-toggle--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
101
+
97
102
  // Text
98
103
  --#{$tree-view}__node-text--max-lines: 1;
99
104
 
@@ -179,6 +184,12 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
179
184
  --#{$tree-view}--m-compact__node-container--nested--PaddingInlineStart: var(--pf-t--global--spacer--lg);
180
185
  --#{$tree-view}--m-compact__node-container--nested--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
181
186
  --#{$tree-view}--m-compact__list-item--m-expanded__node-container--PaddingBlockEnd: 0;
187
+ --#{$tree-view}--m-compact__node-container--nested--Color: initial;
188
+ --#{$tree-view}--m-compact__node-container--m-disabled--nested--Color: var(--pf-t--global--text--color--on-disabled);
189
+ --#{$tree-view}--m-compact__node-icon--nested--Color: initial;
190
+ --#{$tree-view}--m-compact__node-icon--m-disabled--nested--Color: var(--pf-t--global--icon--color--on-disabled);
191
+ --#{$tree-view}--m-compact__node-toggle--nested--Color: initial;
192
+ --#{$tree-view}--m-compact__node-toggle--m-disabled--nested--Color: var(--pf-t--global--icon--color--on-disabled);
182
193
 
183
194
  // Background transparent
184
195
  --#{$tree-view}--m-no-background__node-container--BackgroundColor: transparent;
@@ -299,6 +310,7 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
299
310
  padding-block-end: var(--#{$tree-view}--m-compact__node-container--nested--PaddingBlockEnd);
300
311
  padding-inline-start: var(--#{$tree-view}--m-compact__node-container--nested--PaddingInlineStart);
301
312
  padding-inline-end: var(--#{$tree-view}--m-compact__node-container--nested--PaddingInlineEnd);
313
+ color: var(--#{$tree-view}--m-compact__node-container--nested--Color, inherit);
302
314
  background-color: var(--#{$tree-view}--m-compact__node-container--nested--BackgroundColor);
303
315
  }
304
316
 
@@ -306,6 +318,11 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
306
318
  .#{$tree-view}__node-toggle {
307
319
  margin-inline-start: var(--#{$tree-view}--m-compact__node-toggle--nested--MarginInlineStart);
308
320
  margin-inline-end: var(--#{$tree-view}--m-compact__node-toggle--nested--MarginInlineEnd);
321
+ color: var(--#{$tree-view}--m-compact__node-toggle--nested--Color, inherit);
322
+ }
323
+
324
+ .#{$tree-view}__node-icon {
325
+ color: var(--#{$tree-view}--m-compact__node-icon--nested--Color, inherit);
309
326
  }
310
327
  // stylelint-enable
311
328
  }
@@ -347,6 +364,9 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
347
364
 
348
365
  &.pf-m-no-background {
349
366
  --#{$tree-view}--m-compact__node-container--nested--BackgroundColor: var(--#{$tree-view}--m-no-background__node-container--BackgroundColor);
367
+ --#{$tree-view}--m-compact__node-container--m-disabled--nested--Color: initial;
368
+ --#{$tree-view}--m-compact__node-icon--m-disabled--nested--Color: initial;
369
+ --#{$tree-view}--m-compact__node-toggle--m-disabled--nested--Color: initial;
350
370
  }
351
371
  }
352
372
 
@@ -429,6 +449,13 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
429
449
  .#{$tree-view}__node-count {
430
450
  margin-inline-start: var(--#{$tree-view}__node-count--MarginInlineStart);
431
451
  }
452
+
453
+ &.pf-m-disabled {
454
+ --#{$tree-view}__node--Color: var(--#{$tree-view}__node--m-disabled--Color);
455
+ --#{$tree-view}__node-icon--Color: var(--#{$tree-view}__node-icon--m-disabled--Color);
456
+ --#{$tree-view}--m-compact__node-container--nested--Color: var(--#{$tree-view}--m-compact__node-container--m-disabled--nested--Color);
457
+ --#{$tree-view}--m-compact__node-icon--nested--Color: var(--#{$tree-view}--m-compact__node-icon--m-disabled--nested--Color);
458
+ }
432
459
  }
433
460
 
434
461
  .#{$tree-view}__node-container {
@@ -475,6 +502,10 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
475
502
  $ltr-val: translateX(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX)),
476
503
  $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX))})
477
504
  );
505
+
506
+ &.pf-m-disabled {
507
+ --#{$tree-view}__node-toggle--Color: var(--#{$tree-view}__node-toggle--m-disabled--Color);
508
+ }
478
509
  }
479
510
 
480
511
  .#{$tree-view}__node-title,
package/components/Wizard/wizard.css CHANGED
@@ -101,6 +101,15 @@
101
101
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
102
102
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
103
103
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
104
+ }
105
+ @media screen and (min-width: 62rem) {
106
+ .pf-v6-c-wizard {
107
+ --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
108
+ --pf-v6-c-wizard__nav--BoxShadow: none;
109
+ --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
110
+ }
111
+ }
112
+ .pf-v6-c-wizard {
104
113
  --pf-v6-c-wizard__nav-list--PaddingBlockStart: var(--pf-t--global--spacer--lg);
105
114
  --pf-v6-c-wizard__nav-list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
106
115
  --pf-v6-c-wizard__nav-list--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -125,13 +134,6 @@
125
134
  --pf-v6-c-wizard__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
126
135
  --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
127
136
  }
128
- @media screen and (min-width: 62rem) {
129
- .pf-v6-c-wizard {
130
- --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
131
- --pf-v6-c-wizard__nav--BoxShadow: none;
132
- --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
133
- }
134
- }
135
137
 
136
138
  .pf-v6-c-wizard {
137
139
  position: relative;
@@ -267,13 +269,14 @@
267
269
  color: var(--pf-v6-c-wizard__toggle-status-icon--Color);
268
270
  }
269
271
 
270
- .pf-v6-c-wizard__toggle-separator {
271
- color: var(--pf-v6-c-wizard__toggle-separator--Color);
272
- }
273
272
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__toggle-separator {
274
273
  scale: -1 1;
275
274
  }
276
275
 
276
+ .pf-v6-c-wizard__toggle-separator {
277
+ color: var(--pf-v6-c-wizard__toggle-separator--Color);
278
+ }
279
+
277
280
  .pf-v6-c-wizard__toggle-icon {
278
281
  line-height: var(--pf-v6-c-wizard__toggle-icon--LineHeight);
279
282
  }
@@ -281,8 +284,8 @@
281
284
  .pf-v6-c-wizard__outer-wrap {
282
285
  position: relative;
283
286
  display: flex;
284
- flex-direction: column;
285
287
  flex-grow: 1;
288
+ flex-direction: column;
286
289
  min-height: var(--pf-v6-c-wizard__outer-wrap--MinHeight);
287
290
  background-color: var(--pf-v6-c-wizard__outer-wrap--BackgroundColor);
288
291
  }
@@ -295,8 +298,8 @@
295
298
  .pf-v6-c-wizard__inner-wrap {
296
299
  position: relative;
297
300
  display: flex;
298
- flex-direction: column;
299
301
  flex-grow: 1;
302
+ flex-direction: column;
300
303
  min-height: 0;
301
304
  }
302
305
  @media screen and (min-width: 62rem) {
@@ -474,6 +477,10 @@
474
477
  color: var(--pf-v6-c-wizard__nav-link-toggle--Color);
475
478
  }
476
479
 
480
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {
481
+ scale: -1 1;
482
+ }
483
+
477
484
  .pf-v6-c-wizard__nav-link-toggle-icon {
478
485
  display: inline-block;
479
486
  transition-timing-function: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
@@ -481,15 +488,12 @@
481
488
  transition-property: transform;
482
489
  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
483
490
  }
484
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {
485
- scale: -1 1;
486
- }
487
491
 
488
492
  .pf-v6-c-wizard__main {
489
493
  z-index: var(--pf-v6-c-wizard__main--ZIndex);
490
494
  display: flex;
491
- flex-direction: column;
492
495
  flex-grow: 1;
496
+ flex-direction: column;
493
497
  overflow-x: hidden;
494
498
  overflow-y: auto;
495
499
  word-break: break-word;
package/components/Wizard/wizard.scss CHANGED
@@ -350,8 +350,8 @@
350
350
  .#{$wizard}__outer-wrap {
351
351
  position: relative;
352
352
  display: flex;
353
- flex-direction: column;
354
353
  flex-grow: 1;
354
+ flex-direction: column;
355
355
  min-height: var(--#{$wizard}__outer-wrap--MinHeight);
356
356
  background-color: var(--#{$wizard}__outer-wrap--BackgroundColor);
357
357
 
@@ -363,8 +363,8 @@
363
363
  .#{$wizard}__inner-wrap {
364
364
  position: relative;
365
365
  display: flex;
366
- flex-direction: column;
367
366
  flex-grow: 1;
367
+ flex-direction: column;
368
368
  min-height: 0;
369
369
 
370
370
  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
@@ -590,8 +590,8 @@
590
590
  .#{$wizard}__main {
591
591
  z-index: var(--#{$wizard}__main--ZIndex);
592
592
  display: flex;
593
- flex-direction: column;
594
593
  flex-grow: 1;
594
+ flex-direction: column;
595
595
  overflow-x: hidden;
596
596
  overflow-y: auto;
597
597
  word-break: break-word;