@patternfly/patternfly 6.0.0 → 6.1.0-prerelease.10

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 (86) hide show
  1. package/README.md +5 -5
  2. package/components/Button/button.css +18 -2
  3. package/components/Button/button.scss +19 -3
  4. package/components/CodeEditor/code-editor.css +15 -0
  5. package/components/CodeEditor/code-editor.scss +16 -1
  6. package/components/Content/content.css +9 -0
  7. package/components/Content/content.scss +7 -0
  8. package/components/DataList/data-list.css +6 -0
  9. package/components/DataList/data-list.scss +7 -0
  10. package/components/Label/label-group.css +12 -0
  11. package/components/Label/label-group.scss +14 -0
  12. package/components/Label/label.css +5 -0
  13. package/components/Label/label.scss +5 -0
  14. package/components/Menu/menu.css +7 -3
  15. package/components/Menu/menu.scss +5 -3
  16. package/components/MenuToggle/menu-toggle.css +27 -11
  17. package/components/MenuToggle/menu-toggle.scss +24 -17
  18. package/components/Page/page.css +9 -1
  19. package/components/Page/page.scss +9 -2
  20. package/components/Table/table-grid.css +12 -12
  21. package/components/Table/table-grid.scss +4 -4
  22. package/components/Table/table-tree-view.css +4 -4
  23. package/components/Table/table-tree-view.scss +4 -4
  24. package/components/Table/table.css +7 -4
  25. package/components/Table/table.scss +9 -5
  26. package/components/Title/title.css +4 -0
  27. package/components/Title/title.scss +7 -0
  28. package/components/Wizard/wizard.css +1 -1
  29. package/components/Wizard/wizard.scss +1 -1
  30. package/components/_index.css +136 -38
  31. package/docs/components/Button/examples/Button.md +1 -1
  32. package/docs/components/CodeEditor/examples/CodeEditor.css +3 -0
  33. package/docs/components/CodeEditor/examples/CodeEditor.md +158 -7
  34. package/docs/components/Content/examples/Content.md +8 -7
  35. package/docs/components/DataList/examples/DataList.md +15 -13
  36. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -18
  37. package/docs/components/Label/examples/Label.css +12 -0
  38. package/docs/components/Label/examples/Label.md +162 -0
  39. package/docs/components/Menu/examples/Menu.md +24 -32
  40. package/docs/components/MenuToggle/examples/MenuToggle.md +1309 -533
  41. package/docs/components/Page/examples/Page.css +1 -1
  42. package/docs/components/Page/examples/Page.md +10 -7
  43. package/docs/components/Table/examples/Table.md +469 -2769
  44. package/docs/components/Tile/{examples → deprecated}/Tile.md +1 -0
  45. package/docs/components/Title/examples/Title.md +10 -0
  46. package/docs/demos/AboutModal/examples/AboutModal.md +2 -4
  47. package/docs/demos/Alert/examples/Alert.md +6 -12
  48. package/docs/demos/BackToTop/examples/BackToTop.md +2 -4
  49. package/docs/demos/Banner/examples/Banner.md +4 -8
  50. package/docs/demos/Card/examples/Card.css +4 -0
  51. package/docs/demos/Card/examples/Card.md +13 -21
  52. package/docs/demos/CardView/examples/CardView.md +2 -4
  53. package/docs/demos/Dashboard/examples/Dashboard.md +2 -4
  54. package/docs/demos/DataList/examples/DataList.md +13 -46
  55. package/docs/demos/DescriptionList/examples/DescriptionList.md +11 -42
  56. package/docs/demos/Drawer/examples/Drawer.md +6 -12
  57. package/docs/demos/JumpLinks/examples/JumpLinks.md +8 -16
  58. package/docs/demos/Masthead/examples/Masthead.md +18 -36
  59. package/docs/demos/Modal/examples/Modal.md +12 -24
  60. package/docs/demos/Nav/examples/Nav.md +12 -24
  61. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +10 -20
  62. package/docs/demos/Page/examples/Page.md +24 -48
  63. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +14 -28
  64. package/docs/demos/Skeleton/examples/Skeleton.md +2 -4
  65. package/docs/demos/Table/examples/Table.md +191 -984
  66. package/docs/demos/Tabs/examples/Tabs.md +18 -60
  67. package/docs/demos/Toolbar/examples/Toolbar.md +16 -80
  68. package/docs/demos/Wizard/examples/Wizard.md +18 -36
  69. package/docs/layouts/Level/examples/Level.css +1 -2
  70. package/docs/layouts/Level/examples/Level.md +15 -3
  71. package/docs/layouts/Split/examples/Split.css +1 -2
  72. package/docs/layouts/Split/examples/Split.md +4 -4
  73. package/docs/layouts/Stack/examples/Stack.css +1 -2
  74. package/docs/layouts/Stack/examples/Stack.md +4 -4
  75. package/layouts/Split/split.css +1 -2
  76. package/layouts/Split/split.scss +4 -3
  77. package/layouts/Stack/stack.css +1 -2
  78. package/layouts/Stack/stack.scss +4 -3
  79. package/layouts/_index.css +2 -4
  80. package/package.json +6 -6
  81. package/patternfly-no-globals.css +138 -42
  82. package/patternfly.css +138 -42
  83. package/patternfly.min.css +1 -1
  84. package/patternfly.min.css.map +1 -1
  85. package/sass-utilities/functions.scss +6 -0
  86. /package/docs/components/Tile/{examples → deprecated}/Tile.css +0 -0
package/components/Table/table.scss CHANGED
@@ -48,7 +48,7 @@
48
48
  --#{$table}__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--#{$table}--cell--Padding--base);
49
49
 
50
50
  // * Table cell - default variables
51
- --#{$table}--cell--MinWidth: 0;
51
+ --#{$table}--cell--MinWidth: calc(var(--#{$table}--cell--PaddingInlineEnd) + var(--#{$table}--cell--PaddingInlineEnd));
52
52
  --#{$table}--cell--MaxWidth: none;
53
53
  --#{$table}--cell--Width: auto;
54
54
  --#{$table}--cell--Overflow: visible;
@@ -70,6 +70,8 @@
70
70
  --#{$table}--m-truncate--cell--MinWidth: calc(5ch + var(--#{$table}--cell--PaddingInlineEnd) + var(--#{$table}--cell--PaddingInlineStart));
71
71
 
72
72
  // * Table truncate
73
+ --#{$table}__text--MinWidth: 100%;
74
+ --#{$table}__text--m-truncate--MinWidth: 5ch;
73
75
  --#{$table}--m-truncate__text--MinWidth: 5ch;
74
76
 
75
77
  // * Table cell hidden visible
@@ -602,12 +604,10 @@
602
604
 
603
605
  // - Table text
604
606
  .#{$table}__text {
605
- --#{$table}--cell--MaxWidth: 100%;
606
-
607
607
  position: relative;
608
608
  display: block;
609
609
  width: var(--#{$table}--cell--Width);
610
- min-width: var(--#{$table}--text--MinWidth);
610
+ min-width: var(--#{$table}__text--MinWidth);
611
611
  max-width: var(--#{$table}--cell--MaxWidth);
612
612
  overflow: var(--#{$table}--cell--Overflow);
613
613
  line-height: var(--#{$table}--cell--LineHeight);
@@ -618,7 +618,8 @@
618
618
  // Only apply these settings if specifically modified
619
619
  &.pf-m-truncate {
620
620
  --#{$table}--cell--MinWidth: 100%;
621
- --#{$table}--text--MinWidth: var(--#{$table}--m-truncate__text--MinWidth);
621
+
622
+ min-width: max(var(--#{$table}__text--m-truncate--MinWidth), var(--#{$table}__text--MinWidth));
622
623
 
623
624
  > :where(th, td) {
624
625
  overflow: var(--#{$table}--cell--Overflow);
@@ -682,6 +683,7 @@
682
683
 
683
684
  .#{$table}__text {
684
685
  min-width: auto;
686
+ max-width: 100%;
685
687
  }
686
688
 
687
689
  .#{$table} thead:where(.#{$table}__thead).pf-m-nowrap &,
@@ -715,6 +717,8 @@
715
717
  .#{$table} .#{$table}__draggable {
716
718
  --#{$table}--cell--MinWidth: 0;
717
719
  --#{$table}--cell--Width: 1%;
720
+
721
+ max-width: none;
718
722
  }
719
723
  // stylelint-enable
720
724
 
package/components/Title/title.css CHANGED
@@ -36,6 +36,7 @@
36
36
  --pf-v6-c-title--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
37
37
  --pf-v6-c-title--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
38
38
  --pf-v6-c-title--m-h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
39
+ --pf-v6-c-title--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
39
40
  }
40
41
 
41
42
  .pf-v6-c-title {
@@ -101,4 +102,7 @@
101
102
  font-size: var(--pf-v6-c-title--m-h6--FontSize);
102
103
  font-weight: var(--pf-v6-c-title--m-h6--FontWeight);
103
104
  line-height: var(--pf-v6-c-title--m-h6--LineHeight);
105
+ }
106
+ .pf-v6-c-title.pf-m-page-title {
107
+ font-weight: var(--pf-v6-c-title--m-page-title--FontWeight);
104
108
  }
package/components/Title/title.scss CHANGED
@@ -64,6 +64,9 @@
64
64
  --#{$title}--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
65
65
  --#{$title}--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
66
66
  --#{$title}--m-h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
67
+
68
+ // Page title
69
+ --#{$title}--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
67
70
  }
68
71
 
69
72
  .#{$title} {
@@ -141,4 +144,8 @@
141
144
  font-weight: var(--#{$title}--m-h6--FontWeight);
142
145
  line-height: var(--#{$title}--m-h6--LineHeight);
143
146
  }
147
+
148
+ &.pf-m-page-title {
149
+ font-weight: var(--#{$title}--m-page-title--FontWeight);
150
+ }
144
151
  }
package/components/Wizard/wizard.css CHANGED
@@ -82,7 +82,7 @@
82
82
  --pf-v6-c-wizard__toggle-separator--Color: var(--pf-t--global--border--color--default);
83
83
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
84
84
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
85
- --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--xs);
85
+ --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
86
86
  --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
87
87
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
88
88
  --pf-v6-c-wizard__nav--Width: 100%;
package/components/Wizard/wizard.scss CHANGED
@@ -126,7 +126,7 @@
126
126
  --#{$wizard}__toggle--m-expanded__toggle-icon--Rotate: 180deg;
127
127
 
128
128
  // Nav
129
- --#{$wizard}__nav--ZIndex: var(--pf-t--global--z-index--xs);
129
+ --#{$wizard}__nav--ZIndex: var(--pf-t--global--z-index--sm);
130
130
  --#{$wizard}__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
131
131
  --#{$wizard}__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
132
132
  --#{$wizard}__nav--Width: 100%;