@patternfly/documentation-framework 6.0.0-alpha.3 → 6.0.0-alpha.31

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 (35) hide show
  1. package/CHANGELOG.md +721 -0
  2. package/app.js +1 -4
  3. package/components/autoLinkHeader/autoLinkHeader.css +2 -2
  4. package/components/autoLinkHeader/autoLinkHeader.js +2 -2
  5. package/components/cssVariables/cssVariables.css +4 -4
  6. package/components/cssVariables/cssVariables.js +6 -6
  7. package/components/example/example.css +29 -29
  8. package/components/example/example.js +122 -56
  9. package/components/example/exampleToolbar.js +3 -2
  10. package/components/footer/footer.css +16 -16
  11. package/components/footer/footer.js +13 -13
  12. package/components/gdprBanner/gdprBanner.css +2 -2
  13. package/components/gdprBanner/gdprBanner.js +4 -4
  14. package/components/inlineAlert/inlineAlert.js +1 -1
  15. package/components/propsTable/propsTable.js +3 -3
  16. package/components/sectionGallery/sectionDataListLayout.js +3 -3
  17. package/components/sectionGallery/sectionGallery.css +12 -12
  18. package/components/sectionGallery/sectionGalleryToolbar.js +1 -1
  19. package/components/sideNav/sideNav.js +3 -4
  20. package/components/tableOfContents/tableOfContents.css +23 -24
  21. package/layouts/sideNavLayout/sideNavLayout.css +14 -14
  22. package/layouts/sideNavLayout/sideNavLayout.js +79 -26
  23. package/package.json +13 -20
  24. package/pages/404/404.css +2 -2
  25. package/pages/404/index.js +3 -1
  26. package/routes.js +3 -1
  27. package/scripts/md/parseMD.js +20 -18
  28. package/scripts/webpack/webpack.base.config.js +7 -18
  29. package/scripts/writeScreenshots.js +2 -2
  30. package/templates/mdx.css +169 -157
  31. package/templates/mdx.js +16 -10
  32. package/versions.json +85 -9
  33. package/components/sideNav/sideNav.css +0 -21
  34. package/pages/global-css-variables.md +0 -109
  35. package/pages/img/component-variable-mapping.png +0 -0
package/templates/mdx.css CHANGED
@@ -1,53 +1,59 @@
1
1
  #ws-page-content-router {
2
2
  display: flex;
3
3
  flex-direction: column;
4
- height: 100%;
4
+ flex-grow: 1;
5
+ flex-shrink: 0;
5
6
  }
6
7
 
7
8
  .ws-release-notes-toc {
8
- margin-bottom: var(--pf-v5-global--spacer--lg);
9
+ margin-bottom: var(--pf-t--global--spacer--lg);
9
10
  }
10
11
 
11
- .ws-release-notes-toc .pf-v5-c-card {
12
+ .ws-release-notes-toc .pf-v6-c-card {
12
13
  height: 100%;
13
14
  }
14
15
 
15
- .ws-release-notes-toc .pf-v5-c-card__title {
16
- padding-bottom: var(--pf-v5-global--spacer--xs);
16
+ .ws-release-notes-toc .pf-v6-c-card__title {
17
+ padding-bottom: var(--pf-t--global--spacer--xs);
17
18
  }
18
19
 
19
- .ws-release-notes-toc .pf-v5-c-card__title .pf-v5-c-title {
20
+ .ws-release-notes-toc .pf-v6-c-card__title .pf-v6-c-title {
20
21
  display: inline;
21
22
  }
22
23
 
23
- .ws-release-notes-toc .pf-v5-c-card__title a {
24
- margin-right: var(--pf-v5-global--spacer--sm);
24
+ .ws-release-notes-toc .pf-v6-c-card__title a {
25
+ margin-right: var(--pf-t--global--spacer--sm);
25
26
  }
26
27
 
27
- .ws-release-notes-toc .pf-v5-c-card__title .pf-v5-c-badge {
28
+ .ws-release-notes-toc .pf-v6-c-card__title .pf-v6-c-badge {
28
29
  vertical-align: text-top;
29
30
  }
30
31
 
31
- .ws-release-notes-toc .pf-v5-c-card__body {
32
+ .ws-release-notes-toc .pf-v6-c-card__body {
32
33
  color: #72767B;
33
- font-family: var(--pf-v5-global--FontFamily--text);
34
- font-size: var(--pf-v5-global--FontSize--md);
34
+ /* font-family: var(--pf-v6-global--FontFamily--text); */
35
+ /* font-size: var(--pf-v6-global--FontSize--md); */
35
36
  font-weight: 400;
36
37
  line-height: 1.5;
37
38
  }
38
39
 
39
40
  .ws-code {
40
41
  display: inline-block;
41
- background-color: var(--pf-v5-global--BackgroundColor--100);
42
- padding: 1px var(--pf-v5-global--spacer--sm);
43
- border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--300);
42
+ background-color: var(--pf-t--global--background--color--secondary--default);
43
+ padding: 1px var(--pf-t--global--spacer--sm);
44
+ /* border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--300); */
44
45
  white-space: pre-wrap;
45
- font-size: var(--pf-v5-global--FontSize--sm);
46
- font-family: var(--pf-v5-global--FontFamily--monospace);
46
+ /* font-size: var(--pf-v6-global--FontSize--sm); */
47
+ /* font-family: var(--pf-v6-global--FontFamily--monospace); */
47
48
  }
48
49
 
49
50
  .ws-p + .ws-code {
50
- margin-bottom: var(--pf-v5-c-content--MarginBottom);
51
+ margin-bottom: var(--pf-v6-c-content--MarginBottom);
52
+ }
53
+
54
+ .ws-image {
55
+ text-align: center;
56
+ width: "600px";
51
57
  }
52
58
 
53
59
  /* Table styles */
@@ -68,6 +74,12 @@
68
74
  table-layout: fixed;
69
75
  width: 100%;
70
76
  }
77
+
78
+ .ws-image {
79
+ text-align: center;
80
+ width: "600px";
81
+ }
82
+
71
83
  .ws-table td > code,
72
84
  .ws-table th > code,
73
85
  .ws-table tr > code {
@@ -78,86 +90,86 @@
78
90
  }
79
91
 
80
92
  /*
81
- * Copied from pf-v5-c-content.
93
+ * Copied from pf-v6-c-content.
82
94
  */
83
95
  :root {
84
- --pf-v5-c-content--MarginBottom: var(--pf-v5-global--spacer--md);
85
- --pf-v5-c-content--LineHeight: var(--pf-v5-global--LineHeight--md);
86
- --pf-v5-c-content--FontSize: var(--pf-v5-global--FontSize--md);
87
- --pf-v5-c-content--FontWeight: var(--pf-v5-global--FontWeight--normal);
88
- --pf-v5-c-content--Color: var(--pf-v5-global--Color--100);
89
- --pf-v5-c-content--heading--FontFamily: var(--pf-v5-global--FontFamily--heading);
90
- --pf-v5-c-content--h1--MarginTop: var(--pf-v5-global--spacer--lg);
91
- --pf-v5-c-content--h1--MarginBottom: var(--pf-v5-global--spacer--sm);
92
- --pf-v5-c-content--h1--LineHeight: var(--pf-v5-global--LineHeight--sm);
93
- --pf-v5-c-content--h1--FontSize: var(--pf-v5-global--FontSize--2xl);
94
- --pf-v5-c-content--h1--FontWeight: var(--pf-v5-global--FontWeight--normal);
95
- --pf-v5-c-content--h2--MarginTop: var(--pf-v5-global--spacer--lg);
96
- --pf-v5-c-content--h2--MarginBottom: var(--pf-v5-global--spacer--sm);
97
- --pf-v5-c-content--h2--LineHeight: var(--pf-v5-global--LineHeight--sm);
98
- --pf-v5-c-content--h2--FontSize: var(--pf-v5-global--FontSize--xl);
99
- --pf-v5-c-content--h2--FontWeight: var(--pf-v5-global--FontWeight--normal);
100
- --pf-v5-c-content--h3--MarginTop: var(--pf-v5-global--spacer--lg);
101
- --pf-v5-c-content--h3--MarginBottom: var(--pf-v5-global--spacer--sm);
102
- --pf-v5-c-content--h3--LineHeight: var(--pf-v5-global--LineHeight--md);
103
- --pf-v5-c-content--h3--FontSize: var(--pf-v5-global--FontSize--lg);
104
- --pf-v5-c-content--h3--FontWeight: var(--pf-v5-global--FontWeight--normal);
105
- --pf-v5-c-content--h4--MarginTop: var(--pf-v5-global--spacer--lg);
106
- --pf-v5-c-content--h4--MarginBottom: var(--pf-v5-global--spacer--sm);
107
- --pf-v5-c-content--h4--LineHeight: var(--pf-v5-global--LineHeight--md);
108
- --pf-v5-c-content--h4--FontSize: var(--pf-v5-global--FontSize--md);
109
- --pf-v5-c-content--h4--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
110
- --pf-v5-c-content--h5--MarginTop: var(--pf-v5-global--spacer--lg);
111
- --pf-v5-c-content--h5--MarginBottom: var(--pf-v5-global--spacer--sm);
112
- --pf-v5-c-content--h5--LineHeight: var(--pf-v5-global--LineHeight--md);
113
- --pf-v5-c-content--h5--FontSize: var(--pf-v5-global--FontSize--md);
114
- --pf-v5-c-content--h5--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
115
- --pf-v5-c-content--h6--MarginTop: var(--pf-v5-global--spacer--lg);
116
- --pf-v5-c-content--h6--MarginBottom: var(--pf-v5-global--spacer--sm);
117
- --pf-v5-c-content--h6--LineHeight: var(--pf-v5-global--LineHeight--md);
118
- --pf-v5-c-content--h6--FontSize: var(--pf-v5-global--FontSize--md);
119
- --pf-v5-c-content--h6--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
120
- --pf-v5-c-content--small--MarginBottom: var(--pf-v5-global--spacer--md);
121
- --pf-v5-c-content--small--LineHeight: var(--pf-v5-global--LineHeight--md);
122
- --pf-v5-c-content--small--FontSize: var(--pf-v5-global--FontSize--sm);
123
- --pf-v5-c-content--small--Color: var(--pf-v5-global--Color--200);
124
- --pf-v5-c-content--small--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
125
- --pf-v5-c-content--a--Color: var(--pf-v5-global--link--Color);
126
- --pf-v5-c-content--a--TextDecoration: var(--pf-v5-global--link--TextDecoration);
127
- --pf-v5-c-content--a--hover--Color: var(--pf-v5-global--link--Color--hover);
128
- --pf-v5-c-content--a--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
129
- --pf-v5-c-content--blockquote--PaddingTop: var(--pf-v5-global--spacer--md);
130
- --pf-v5-c-content--blockquote--PaddingRight: var(--pf-v5-global--spacer--md);
131
- --pf-v5-c-content--blockquote--PaddingBottom: var(--pf-v5-global--spacer--md);
132
- --pf-v5-c-content--blockquote--PaddingLeft: var(--pf-v5-global--spacer--md);
133
- --pf-v5-c-content--blockquote--FontWeight: var(--pf-v5-global--FontWeight--light);
134
- --pf-v5-c-content--blockquote--Color: var(--pf-v5-global--Color--200);
135
- --pf-v5-c-content--blockquote--BorderLeftColor: var(--pf-v5-global--BorderColor--100);
136
- --pf-v5-c-content--blockquote--BorderLeftWidth: var(--pf-v5-global--BorderWidth--lg);
137
- --pf-v5-c-content--ol--PaddingLeft: var(--pf-v5-global--spacer--lg);
138
- --pf-v5-c-content--ol--MarginTop: var(--pf-v5-global--spacer--md);
139
- --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-global--spacer--lg);
140
- --pf-v5-c-content--ol--nested--MarginTop: var(--pf-v5-global--spacer--sm);
141
- --pf-v5-c-content--ol--nested--MarginLeft: var(--pf-v5-global--spacer--sm);
142
- --pf-v5-c-content--ul--PaddingLeft: var(--pf-v5-global--spacer--lg);
143
- --pf-v5-c-content--ul--MarginTop: var(--pf-v5-global--spacer--md);
144
- --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-global--spacer--lg);
145
- --pf-v5-c-content--ul--nested--MarginTop: var(--pf-v5-global--spacer--sm);
146
- --pf-v5-c-content--ul--nested--MarginLeft: var(--pf-v5-global--spacer--sm);
147
- --pf-v5-c-content--ul--ListStyle: var(--pf-v5-global--ListStyle);
148
- --pf-v5-c-content--li--MarginTop: var(--pf-v5-global--spacer--sm);
149
- --pf-v5-c-content--dl--ColumnGap: var(--pf-v5-global--spacer--2xl);
150
- --pf-v5-c-content--dl--RowGap: var(--pf-v5-global--spacer--md);
151
- --pf-v5-c-content--dt--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
152
- --pf-v5-c-content--dt--MarginTop: var(--pf-v5-global--spacer--md);
153
- --pf-v5-c-content--dt--sm--MarginTop: 0;
154
- --pf-v5-c-content--hr--Height: var(--pf-v5-global--BorderWidth--sm);
155
- --pf-v5-c-content--hr--BackgroundColor: var(--pf-v5-global--BorderColor--100);
156
- font-size: var(--pf-v5-c-content--FontSize);
157
- line-height: var(--pf-v5-c-content--LineHeight);
158
- color: var(--pf-v5-c-content--Color); }
96
+ --pf-v6-c-content--MarginBottom: var(--pf-t--global--spacer--md);
97
+ /* --pf-v6-c-content--LineHeight: var(--pf-v6-global--LineHeight--md); */
98
+ /* --pf-v6-c-content--FontSize: var(--pf-v6-global--FontSize--md); */
99
+ /* --pf-v6-c-content--FontWeight: var(--pf-v6-global--FontWeight--normal); */
100
+ /* --pf-v6-c-content--Color: var(--pf-v6-global--Color--100); */
101
+ /* --pf-v6-c-content--heading--FontFamily: var(--pf-v6-global--FontFamily--heading); */
102
+ --pf-v6-c-content--h1--MarginTop: var(--pf-t--global--spacer--lg);
103
+ --pf-v6-c-content--h1--MarginBottom: var(--pf-t--global--spacer--sm);
104
+ /* --pf-v6-c-content--h1--LineHeight: var(--pf-v6-global--LineHeight--sm); */
105
+ /* --pf-v6-c-content--h1--FontSize: var(--pf-v6-global--FontSize--2xl); */
106
+ /* --pf-v6-c-content--h1--FontWeight: var(--pf-v6-global--FontWeight--normal); */
107
+ --pf-v6-c-content--h2--MarginTop: var(--pf-t--global--spacer--lg);
108
+ --pf-v6-c-content--h2--MarginBottom: var(--pf-t--global--spacer--sm);
109
+ /* --pf-v6-c-content--h2--LineHeight: var(--pf-v6-global--LineHeight--sm); */
110
+ /* --pf-v6-c-content--h2--FontSize: var(--pf-v6-global--FontSize--xl); */
111
+ /* --pf-v6-c-content--h2--FontWeight: var(--pf-v6-global--FontWeight--normal); */
112
+ --pf-v6-c-content--h3--MarginTop: var(--pf-t--global--spacer--lg);
113
+ --pf-v6-c-content--h3--MarginBottom: var(--pf-t--global--spacer--sm);
114
+ /* --pf-v6-c-content--h3--LineHeight: var(--pf-v6-global--LineHeight--md); */
115
+ /* --pf-v6-c-content--h3--FontSize: var(--pf-v6-global--FontSize--lg); */
116
+ /* --pf-v6-c-content--h3--FontWeight: var(--pf-v6-global--FontWeight--normal); */
117
+ --pf-v6-c-content--h4--MarginTop: var(--pf-t--global--spacer--lg);
118
+ --pf-v6-c-content--h4--MarginBottom: var(--pf-t--global--spacer--sm);
119
+ /* --pf-v6-c-content--h4--LineHeight: var(--pf-v6-global--LineHeight--md); */
120
+ /* --pf-v6-c-content--h4--FontSize: var(--pf-v6-global--FontSize--md); */
121
+ /* --pf-v6-c-content--h4--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
122
+ --pf-v6-c-content--h5--MarginTop: var(--pf-t--global--spacer--lg);
123
+ --pf-v6-c-content--h5--MarginBottom: var(--pf-t--global--spacer--sm);
124
+ /* --pf-v6-c-content--h5--LineHeight: var(--pf-v6-global--LineHeight--md); */
125
+ /* --pf-v6-c-content--h5--FontSize: var(--pf-v6-global--FontSize--md); */
126
+ /* --pf-v6-c-content--h5--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
127
+ --pf-v6-c-content--h6--MarginTop: var(--pf-t--global--spacer--lg);
128
+ --pf-v6-c-content--h6--MarginBottom: var(--pf-t--global--spacer--sm);
129
+ /* --pf-v6-c-content--h6--LineHeight: var(--pf-v6-global--LineHeight--md); */
130
+ /* --pf-v6-c-content--h6--FontSize: var(--pf-v6-global--FontSize--md); */
131
+ /* --pf-v6-c-content--h6--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
132
+ --pf-v6-c-content--small--MarginBottom: var(--pf-t--global--spacer--md);
133
+ /* --pf-v6-c-content--small--LineHeight: var(--pf-v6-global--LineHeight--md); */
134
+ /* --pf-v6-c-content--small--FontSize: var(--pf-v6-global--FontSize--sm); */
135
+ /* --pf-v6-c-content--small--Color: var(--pf-v6-global--Color--200); */
136
+ /* --pf-v6-c-content--small--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
137
+ /* --pf-v6-c-content--a--Color: var(--pf-v6-global--link--Color); */
138
+ /* --pf-v6-c-content--a--TextDecoration: var(--pf-v6-global--link--TextDecoration); */
139
+ /* --pf-v6-c-content--a--hover--Color: var(--pf-v6-global--link--Color--hover); */
140
+ /* --pf-v6-c-content--a--hover--TextDecoration: var(--pf-v6-global--link--TextDecoration--hover); */
141
+ --pf-v6-c-content--blockquote--PaddingTop: var(--pf-t--global--spacer--md);
142
+ --pf-v6-c-content--blockquote--PaddingRight: var(--pf-t--global--spacer--md);
143
+ --pf-v6-c-content--blockquote--PaddingBottom: var(--pf-t--global--spacer--md);
144
+ --pf-v6-c-content--blockquote--PaddingLeft: var(--pf-t--global--spacer--md);
145
+ /* --pf-v6-c-content--blockquote--FontWeight: var(--pf-v6-global--FontWeight--light); */
146
+ /* --pf-v6-c-content--blockquote--Color: var(--pf-v6-global--Color--200); */
147
+ /* --pf-v6-c-content--blockquote--BorderLeftColor: var(--pf-v6-global--BorderColor--100); */
148
+ /* --pf-v6-c-content--blockquote--BorderLeftWidth: var(--pf-v6-global--BorderWidth--lg); */
149
+ --pf-v6-c-content--ol--PaddingLeft: var(--pf-t--global--spacer--lg);
150
+ --pf-v6-c-content--ol--MarginTop: var(--pf-t--global--spacer--md);
151
+ --pf-v6-c-content--ol--MarginLeft: var(--pf-t--global--spacer--lg);
152
+ --pf-v6-c-content--ol--nested--MarginTop: var(--pf-t--global--spacer--sm);
153
+ --pf-v6-c-content--ol--nested--MarginLeft: var(--pf-t--global--spacer--sm);
154
+ --pf-v6-c-content--ul--PaddingLeft: var(--pf-t--global--spacer--lg);
155
+ --pf-v6-c-content--ul--MarginTop: var(--pf-t--global--spacer--md);
156
+ --pf-v6-c-content--ul--MarginLeft: var(--pf-t--global--spacer--lg);
157
+ --pf-v6-c-content--ul--nested--MarginTop: var(--pf-t--global--spacer--sm);
158
+ --pf-v6-c-content--ul--nested--MarginLeft: var(--pf-t--global--spacer--sm);
159
+ /* --pf-v6-c-content--ul--ListStyle: var(--pf-v6-global--ListStyle); */
160
+ --pf-v6-c-content--li--MarginTop: var(--pf-t--global--spacer--sm);
161
+ --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
162
+ --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
163
+ /* --pf-v6-c-content--dt--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
164
+ --pf-v6-c-content--dt--MarginTop: var(--pf-t--global--spacer--md);
165
+ --pf-v6-c-content--dt--sm--MarginTop: 0;
166
+ /* --pf-v6-c-content--hr--Height: var(--pf-v6-global--BorderWidth--sm); */
167
+ /* --pf-v6-c-content--hr--BackgroundColor: var(--pf-v6-global--BorderColor--100); */
168
+ font-size: var(--pf-v6-c-content--FontSize);
169
+ line-height: var(--pf-v6-c-content--LineHeight);
170
+ color: var(--pf-v6-c-content--Color); }
159
171
  .ws-li + li {
160
- margin-top: var(--pf-v5-c-content--li--MarginTop); }
172
+ margin-top: var(--pf-v6-c-content--li--MarginTop); }
161
173
  .ws-p:not(:last-child),
162
174
  .ws-dl:not(:last-child),
163
175
  .ws-ol:not(:last-child),
@@ -168,7 +180,7 @@
168
180
  .ws-hr:not(:last-child),
169
181
  .ws-table:not(:last-child),
170
182
  .ws-content-table:not(:last-child) {
171
- margin-bottom: var(--pf-v5-c-content--MarginBottom); }
183
+ margin-bottom: var(--pf-v6-c-content--MarginBottom); }
172
184
  .ws-h1,
173
185
  .ws-h2,
174
186
  .ws-h3,
@@ -176,103 +188,103 @@
176
188
  .ws-h5,
177
189
  .ws-h6 {
178
190
  margin: 0;
179
- font-family: var(--pf-v5-c-content--heading--FontFamily); }
191
+ font-family: var(--pf-v6-c-content--heading--FontFamily); }
180
192
  .ws-ol,
181
193
  .ws-ul {
182
194
  margin: 0; }
183
195
  .ws-h1 {
184
- margin-bottom: var(--pf-v5-c-content--h1--MarginBottom);
185
- font-size: var(--pf-v5-c-content--h1--FontSize);
186
- font-weight: var(--pf-v5-c-content--h1--FontWeight);
187
- line-height: var(--pf-v5-c-content--h1--LineHeight); }
196
+ margin-bottom: var(--pf-v6-c-content--h1--MarginBottom);
197
+ font-size: var(--pf-v6-c-content--h1--FontSize);
198
+ font-weight: var(--pf-v6-c-content--h1--FontWeight);
199
+ line-height: var(--pf-v6-c-content--h1--LineHeight); }
188
200
  .ws-h1:not(:first-child) {
189
- margin-top: var(--pf-v5-c-content--h1--MarginTop); }
201
+ margin-top: var(--pf-v6-c-content--h1--MarginTop); }
190
202
  .ws-h2 {
191
- margin-bottom: var(--pf-v5-c-content--h2--MarginBottom);
192
- font-size: var(--pf-v5-c-content--h2--FontSize);
193
- font-weight: var(--pf-v5-c-content--h2--FontWeight);
194
- line-height: var(--pf-v5-c-content--h2--LineHeight);
195
- margin-top: var(--pf-v5-c-content--h2--MarginTop); }
203
+ margin-bottom: var(--pf-v6-c-content--h2--MarginBottom);
204
+ font-size: var(--pf-v6-c-content--h2--FontSize);
205
+ font-weight: var(--pf-v6-c-content--h2--FontWeight);
206
+ line-height: var(--pf-v6-c-content--h2--LineHeight);
207
+ margin-top: var(--pf-v6-c-content--h2--MarginTop); }
196
208
  .ws-h3 {
197
- margin-bottom: var(--pf-v5-c-content--h3--MarginBottom);
198
- font-size: var(--pf-v5-c-content--h3--FontSize);
199
- font-weight: var(--pf-v5-c-content--h3--FontWeight);
200
- line-height: var(--pf-v5-c-content--h3--LineHeight); }
209
+ margin-bottom: var(--pf-v6-c-content--h3--MarginBottom);
210
+ font-size: var(--pf-v6-c-content--h3--FontSize);
211
+ font-weight: var(--pf-v6-c-content--h3--FontWeight);
212
+ line-height: var(--pf-v6-c-content--h3--LineHeight); }
201
213
  .ws-h3:not(:first-child) {
202
- margin-top: var(--pf-v5-c-content--h3--MarginTop); }
214
+ margin-top: var(--pf-v6-c-content--h3--MarginTop); }
203
215
  .ws-h4 {
204
- margin-bottom: var(--pf-v5-c-content--h4--MarginBottom);
205
- font-size: var(--pf-v5-c-content--h4--FontSize);
206
- font-weight: var(--pf-v5-c-content--h4--FontWeight);
207
- line-height: var(--pf-v5-c-content--h4--LineHeight); }
216
+ margin-bottom: var(--pf-v6-c-content--h4--MarginBottom);
217
+ font-size: var(--pf-v6-c-content--h4--FontSize);
218
+ font-weight: var(--pf-v6-c-content--h4--FontWeight);
219
+ line-height: var(--pf-v6-c-content--h4--LineHeight); }
208
220
  .ws-h4:not(:first-child) {
209
- margin-top: var(--pf-v5-c-content--h4--MarginTop); }
221
+ margin-top: var(--pf-v6-c-content--h4--MarginTop); }
210
222
  .ws-h5 {
211
- margin-bottom: var(--pf-v5-c-content--h5--MarginBottom);
212
- font-size: var(--pf-v5-c-content--h5--FontSize);
213
- font-weight: var(--pf-v5-c-content--h5--FontWeight);
214
- line-height: var(--pf-v5-c-content--h5--LineHeight); }
223
+ margin-bottom: var(--pf-v6-c-content--h5--MarginBottom);
224
+ font-size: var(--pf-v6-c-content--h5--FontSize);
225
+ font-weight: var(--pf-v6-c-content--h5--FontWeight);
226
+ line-height: var(--pf-v6-c-content--h5--LineHeight); }
215
227
  .ws-h5:not(:first-child) {
216
- margin-top: var(--pf-v5-c-content--h5--MarginTop); }
228
+ margin-top: var(--pf-v6-c-content--h5--MarginTop); }
217
229
  .ws-h6 {
218
- margin-bottom: var(--pf-v5-c-content--h6--MarginBottom);
219
- font-size: var(--pf-v5-c-content--h6--FontSize);
220
- font-weight: var(--pf-v5-c-content--h6--FontWeight);
221
- line-height: var(--pf-v5-c-content--h6--LineHeight); }
230
+ margin-bottom: var(--pf-v6-c-content--h6--MarginBottom);
231
+ font-size: var(--pf-v6-c-content--h6--FontSize);
232
+ font-weight: var(--pf-v6-c-content--h6--FontWeight);
233
+ line-height: var(--pf-v6-c-content--h6--LineHeight); }
222
234
  .ws-h6:not(:first-child) {
223
- margin-top: var(--pf-v5-c-content--h6--MarginTop); }
235
+ margin-top: var(--pf-v6-c-content--h6--MarginTop); }
224
236
  .ws-small {
225
237
  display: block;
226
- font-size: var(--pf-v5-c-content--small--FontSize);
227
- line-height: var(--pf-v5-c-content--small--LineHeight);
228
- color: var(--pf-v5-c-content--small--Color); }
238
+ font-size: var(--pf-v6-c-content--small--FontSize);
239
+ line-height: var(--pf-v6-c-content--small--LineHeight);
240
+ color: var(--pf-v6-c-content--small--Color); }
229
241
  .ws-small:not(:last-child) {
230
- margin-bottom: var(--pf-v5-c-content--small--MarginBottom); }
242
+ margin-bottom: var(--pf-v6-c-content--small--MarginBottom); }
231
243
  .ws-blockquote {
232
- padding: var(--pf-v5-c-content--blockquote--PaddingTop) var(--pf-v5-c-content--blockquote--PaddingRight) var(--pf-v5-c-content--blockquote--PaddingBottom) var(--pf-v5-c-content--blockquote--PaddingLeft);
233
- font-weight: var(--pf-v5-c-content--blockquote--FontWeight);
234
- color: var(--pf-v5-c-content--blockquote--Color);
235
- border-left: var(--pf-v5-c-content--blockquote--BorderLeftWidth) solid var(--pf-v5-c-content--blockquote--BorderLeftColor); }
244
+ padding: var(--pf-v6-c-content--blockquote--PaddingTop) var(--pf-v6-c-content--blockquote--PaddingRight) var(--pf-v6-c-content--blockquote--PaddingBottom) var(--pf-v6-c-content--blockquote--PaddingLeft);
245
+ font-weight: var(--pf-v6-c-content--blockquote--FontWeight);
246
+ color: var(--pf-v6-c-content--blockquote--Color);
247
+ border-left: var(--pf-v6-c-content--blockquote--BorderLeftWidth) solid var(--pf-v6-c-content--blockquote--BorderLeftColor); }
236
248
  .ws-hr {
237
- height: var(--pf-v5-c-content--hr--Height);
238
- background-color: var(--pf-v5-c-content--hr--BackgroundColor);
249
+ height: var(--pf-v6-c-content--hr--Height);
250
+ background-color: var(--pf-v6-c-content--hr--BackgroundColor);
239
251
  border: none; }
240
252
  .ws-ol {
241
- padding-left: var(--pf-v5-c-content--ol--PaddingLeft);
242
- margin-top: var(--pf-v5-c-content--ol--MarginTop);
243
- margin-left: var(--pf-v5-c-content--ol--MarginLeft); }
253
+ padding-left: var(--pf-v6-c-content--ol--PaddingLeft);
254
+ margin-top: var(--pf-v6-c-content--ol--MarginTop);
255
+ margin-left: var(--pf-v6-c-content--ol--MarginLeft); }
244
256
  .ws-ol ul {
245
- --pf-v5-c-content--ul--MarginTop: var(--pf-v5-c-content--ul--nested--MarginTop);
246
- --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-c-content--ul--nested--MarginLeft); }
257
+ --pf-v6-c-content--ul--MarginTop: var(--pf-v6-c-content--ul--nested--MarginTop);
258
+ --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft); }
247
259
  .ws-ol ol {
248
- --pf-v5-c-content--ol--MarginTop: var(--pf-v5-c-content--ol--nested--MarginTop);
249
- --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-c-content--ol--nested--MarginLeft); }
260
+ --pf-v6-c-content--ol--MarginTop: var(--pf-v6-c-content--ol--nested--MarginTop);
261
+ --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft); }
250
262
  .ws-ul {
251
- padding-left: var(--pf-v5-c-content--ul--PaddingLeft);
252
- margin-top: var(--pf-v5-c-content--ul--MarginTop);
253
- margin-left: var(--pf-v5-c-content--ul--MarginLeft);
254
- list-style: var(--pf-v5-c-content--ul--ListStyle); }
263
+ padding-left: var(--pf-v6-c-content--ul--PaddingLeft);
264
+ margin-top: var(--pf-v6-c-content--ul--MarginTop);
265
+ margin-left: var(--pf-v6-c-content--ul--MarginLeft);
266
+ list-style: var(--pf-v6-c-content--ul--ListStyle); }
255
267
  .ws-ul ul {
256
- --pf-v5-c-content--ul--MarginTop: var(--pf-v5-c-content--ul--nested--MarginTop);
257
- --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-c-content--ul--nested--MarginLeft); }
268
+ --pf-v6-c-content--ul--MarginTop: var(--pf-v6-c-content--ul--nested--MarginTop);
269
+ --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft); }
258
270
  .ws-ul ol {
259
- --pf-v5-c-content--ol--MarginTop: var(--pf-v5-c-content--ol--nested--MarginTop);
260
- --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-c-content--ol--nested--MarginLeft); }
271
+ --pf-v6-c-content--ol--MarginTop: var(--pf-v6-c-content--ol--nested--MarginTop);
272
+ --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft); }
261
273
  .ws-dl {
262
274
  display: grid;
263
275
  grid-template-columns: 1fr; }
264
276
  @media screen and (min-width: 576px) {
265
277
  .ws-dl {
266
278
  grid-template: auto / auto 1fr;
267
- grid-column-gap: var(--pf-v5-c-content--dl--ColumnGap);
268
- grid-row-gap: var(--pf-v5-c-content--dl--RowGap); } }
279
+ grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
280
+ grid-row-gap: var(--pf-v6-c-content--dl--RowGap); } }
269
281
  .ws-dt {
270
- font-weight: var(--pf-v5-c-content--dt--FontWeight); }
282
+ font-weight: var(--pf-v6-c-content--dt--FontWeight); }
271
283
  .ws-dt:not(:first-child) {
272
- margin-top: var(--pf-v5-c-content--dt--MarginTop); }
284
+ margin-top: var(--pf-v6-c-content--dt--MarginTop); }
273
285
  @media screen and (min-width: 576px) {
274
286
  .ws-dt:not(:first-child) {
275
- --pf-v5-c-content--dt--MarginTop: var(--pf-v5-c-content--dt--sm--MarginTop); } }
287
+ --pf-v6-c-content--dt--MarginTop: var(--pf-v6-c-content--dt--sm--MarginTop); } }
276
288
  @media screen and (min-width: 576px) {
277
289
  .ws-dt {
278
290
  grid-column: 1; } }
package/templates/mdx.js CHANGED
@@ -23,6 +23,7 @@ const MDXChildTemplate = ({
23
23
  optIn,
24
24
  beta,
25
25
  deprecated,
26
+ template,
26
27
  newImplementationLink,
27
28
  functionDocumentation = []
28
29
  } = Component.getPageData();
@@ -84,11 +85,16 @@ const MDXChildTemplate = ({
84
85
  {' '}To learn more about the process, visit our <Link to="/get-started/about#major-release-cadence">about page</Link>.
85
86
  </InlineAlert>
86
87
  )}
88
+ {(template || source === 'react-template') && (
89
+ <InlineAlert title="Templates" variant="info">
90
+ {`This page showcases templates for the ${id.toLowerCase()} component. A template combines a component with logic that supports a specific use case, with a streamlined API that offers additional, limited customization.`}
91
+ </InlineAlert>
92
+ )}
87
93
  </React.Fragment>
88
94
  );
89
95
  // Create dynamic component for @reach/router
90
96
  const ChildComponent = () => (
91
- <div className="pf-v5-u-display-flex ws-mdx-child-template">
97
+ <div className="pf-v6-u-display-flex ws-mdx-child-template">
92
98
  {toc.length > 1 && (
93
99
  <TableOfContents items={toc} />
94
100
  )}
@@ -152,7 +158,7 @@ export const MDXTemplate = ({
152
158
  componentsData
153
159
  }) => {
154
160
  const isDeprecated = sources.some(source => source.source === "react-deprecated" || source.source === "html-deprecated") && !sources.some(source => source.source === "react" || source.source === "html");
155
- const isBeta = sources.some(source => source.beta)
161
+ const isBeta = sources.some(source => source.beta && source.source !== 'react-next' && source.source !== 'react-templates');
156
162
  const isDemo = sources.some(source => source.source === "react-demos" || source.source === "html-demos") && !sources.some(source => source.source === "react" || source.source === "html");
157
163
  // Build obj mapping source names to text displayed on tabs
158
164
  const tabNames = sources.reduce((acc, curSrc) => {
@@ -264,7 +270,7 @@ export const MDXTemplate = ({
264
270
  {isDeprecated && (
265
271
  <FlexItem spacer={{ default: 'spacerSm' }}>
266
272
  <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
267
- <Button isInline component="span" variant="link">
273
+ <Button variant="plain" hasNoPadding>
268
274
  <Label color="grey">Deprecated</Label>
269
275
  </Button>
270
276
  </Tooltip>
@@ -273,7 +279,7 @@ export const MDXTemplate = ({
273
279
  {isDemo && (
274
280
  <FlexItem spacer={{ default: 'spacerSm' }}>
275
281
  <Tooltip content="Demos show how multiple components can be used in a single design.">
276
- <Button isInline component="span" variant="link">
282
+ <Button variant="plain" hasNoPadding>
277
283
  <Label color="purple">Demo</Label>
278
284
  </Button>
279
285
  </Tooltip>
@@ -282,7 +288,7 @@ export const MDXTemplate = ({
282
288
  {isBeta && (
283
289
  <FlexItem spacer={{ default: 'spacerSm' }}>
284
290
  <Tooltip content="This beta component is currently under review and is still open for further evolution.">
285
- <Button isInline component="span" variant="link">
291
+ <Button variant="plain" hasNoPadding>
286
292
  <Label color="blue">Beta</Label>
287
293
  </Button>
288
294
  </Tooltip>
@@ -296,19 +302,19 @@ export const MDXTemplate = ({
296
302
  </PageSection>
297
303
  { showTabs && (
298
304
  <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{'default':'top'}} type="tabs">
299
- <div className="pf-v5-c-tabs pf-m-page-insets pf-m-no-border-bottom">
300
- <ul className="pf-v5-c-tabs__list">
305
+ <div className="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom">
306
+ <ul className="pf-v6-c-tabs__list">
301
307
  {sourceKeys.map((source, index) => (
302
308
  <li
303
309
  key={source}
304
310
  className={css(
305
- 'pf-v5-c-tabs__item',
311
+ 'pf-v6-c-tabs__item',
306
312
  activeSource === source && 'pf-m-current'
307
313
  )}
308
314
  // Send clicked tab name for analytics
309
315
  onClick={() => trackEvent('tab_click', 'click_event', source.toUpperCase())}
310
316
  >
311
- <Link className="pf-v5-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
317
+ <Link className="pf-v6-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
312
318
  {tabNames[source]}
313
319
  </Link>
314
320
  </li>
@@ -320,7 +326,7 @@ export const MDXTemplate = ({
320
326
  <PageSection id="main-content" isFilled className="pf-m-light-100">
321
327
  {isSinglePage && <MDXChildTemplate {...sources[0]} id={id}/>}
322
328
  {!isSinglePage && (
323
- <Router className="pf-v5-u-h-100" primary={false}>
329
+ <Router className="pf-v6-u-h-100" primary={false}>
324
330
  {sources
325
331
  .map((source, index) => {
326
332
  source.index = index;
package/versions.json CHANGED
@@ -5,24 +5,100 @@
5
5
  "date": "2023-12-03",
6
6
  "latest": true,
7
7
  "versions": {
8
- "@patternfly/patternfly": "6.0.0-alpha.38",
8
+ "@patternfly/patternfly": "6.0.0-alpha.117",
9
9
  "@patternfly/react-catalog-view-extension": "5.0.0",
10
- "@patternfly/react-charts": "8.0.0-alpha.4",
11
- "@patternfly/react-code-editor": "6.0.0-alpha.5",
12
- "@patternfly/react-core": "6.0.0-alpha.5",
13
- "@patternfly/react-icons": "6.0.0-alpha.4",
10
+ "@patternfly/react-charts": "8.0.0-alpha.19",
11
+ "@patternfly/react-code-editor": "6.0.0-alpha.50",
12
+ "@patternfly/react-core": "6.0.0-alpha.50",
13
+ "@patternfly/react-drag-drop": "6.0.0-alpha.31",
14
+ "@patternfly/react-icons": "6.0.0-alpha.19",
14
15
  "@patternfly/react-log-viewer": "5.0.0",
15
- "@patternfly/react-styles": "6.0.0-alpha.4",
16
- "@patternfly/react-table": "6.0.0-alpha.5",
17
- "@patternfly/react-tokens": "5.1.0",
16
+ "@patternfly/react-styles": "6.0.0-alpha.19",
17
+ "@patternfly/react-table": "6.0.0-alpha.50",
18
+ "@patternfly/react-tokens": "6.0.0-alpha.19",
18
19
  "@patternfly/react-topology": "5.1.0",
19
20
  "@patternfly/quickstarts": "5.1.0",
20
- "@patternfly/react-virtualized-extension": "5.1.0"
21
+ "@patternfly/react-virtualized-extension": "5.1.0",
22
+ "@patternfly/react-templates": "^1.0.0-alpha.0"
23
+ }
24
+ },{
25
+ "name": "5.2.2",
26
+ "date": "2024-03-12",
27
+ "hidden": true,
28
+ "versions": {
29
+ "@patternfly/patternfly": "5.2.1",
30
+ "@patternfly/react-charts": "7.2.2",
31
+ "@patternfly/react-code-editor": "5.2.2",
32
+ "@patternfly/react-core": "5.2.2",
33
+ "@patternfly/react-icons": "5.2.1",
34
+ "@patternfly/react-styles": "5.2.1",
35
+ "@patternfly/react-table": "5.2.2",
36
+ "@patternfly/react-drag-drop": "5.2.2",
37
+ "@patternfly/react-tokens": "5.2.1",
38
+ "@patternfly/react-catalog-view-extension": "5.0.0",
39
+ "@patternfly/react-component-groups": "5.1.0",
40
+ "@patternfly/react-console": "5.0.0",
41
+ "@patternfly/react-log-viewer": "5.2.0",
42
+ "@patternfly/react-topology": "5.2.1",
43
+ "@patternfly/react-user-feedback": "5.0.0",
44
+ "@patternfly/react-virtualized-extension": "5.0.0",
45
+ "@patternfly/quickstarts": "5.0.0",
46
+ "@patternfly/react-templates": "^1.0.0-alpha.0"
47
+ }
48
+ },
49
+ {
50
+ "name": "5.2.1",
51
+ "date": "2024-03-01",
52
+ "hidden": true,
53
+ "versions": {
54
+ "@patternfly/patternfly": "5.2.1",
55
+ "@patternfly/react-charts": "7.2.2",
56
+ "@patternfly/react-code-editor": "5.2.1",
57
+ "@patternfly/react-core": "5.2.1",
58
+ "@patternfly/react-icons": "5.2.1",
59
+ "@patternfly/react-styles": "5.2.1",
60
+ "@patternfly/react-table": "5.2.1",
61
+ "@patternfly/react-drag-drop": "5.2.1",
62
+ "@patternfly/react-tokens": "5.2.1",
63
+ "@patternfly/react-catalog-view-extension": "5.0.0",
64
+ "@patternfly/react-component-groups": "5.1.0",
65
+ "@patternfly/react-console": "5.0.0",
66
+ "@patternfly/react-log-viewer": "5.2.0",
67
+ "@patternfly/react-topology": "5.2.1",
68
+ "@patternfly/react-user-feedback": "5.0.0",
69
+ "@patternfly/react-virtualized-extension": "5.0.0",
70
+ "@patternfly/quickstarts": "5.0.0",
71
+ "@patternfly/react-templates": "^1.0.0-alpha.0"
21
72
  }
22
73
  },
23
74
  {
75
+ "name": "5.2.0",
76
+ "date": "2024-01-17",
77
+ "hidden": true,
78
+ "versions": {
79
+ "@patternfly/patternfly": "5.2.0",
80
+ "@patternfly/react-charts": "7.2.0",
81
+ "@patternfly/react-code-editor": "5.2.0",
82
+ "@patternfly/react-core": "5.2.0",
83
+ "@patternfly/react-icons": "5.2.0",
84
+ "@patternfly/react-styles": "5.2.0",
85
+ "@patternfly/react-table": "5.2.0",
86
+ "@patternfly/react-drag-drop": "5.2.0",
87
+ "@patternfly/react-tokens": "5.2.0",
88
+ "@patternfly/react-catalog-view-extension": "5.0.0",
89
+ "@patternfly/react-component-groups": "5.1.0",
90
+ "@patternfly/react-console": "5.0.0",
91
+ "@patternfly/react-log-viewer": "5.2.0",
92
+ "@patternfly/react-topology": "5.2.1",
93
+ "@patternfly/react-user-feedback": "5.0.0",
94
+ "@patternfly/react-virtualized-extension": "5.0.0",
95
+ "@patternfly/quickstarts": "5.0.0",
96
+ "@patternfly/react-templates": "^1.0.0-alpha.0"
97
+ }
98
+ },{
24
99
  "name": "5.1.0",
25
100
  "date": "2023-10-06",
101
+ "hidden": true,
26
102
  "versions": {
27
103
  "@patternfly/patternfly": "5.1.0",
28
104
  "@patternfly/react-charts": "7.1.1",