@patternfly/documentation-framework 6.0.0-alpha.2 → 6.0.0-alpha.20

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 (33) hide show
  1. package/CHANGELOG.md +366 -0
  2. package/components/autoLinkHeader/autoLinkHeader.css +2 -2
  3. package/components/cssVariables/cssVariables.css +4 -4
  4. package/components/cssVariables/cssVariables.js +5 -5
  5. package/components/example/example.css +29 -29
  6. package/components/example/example.js +5 -5
  7. package/components/example/exampleToolbar.js +3 -2
  8. package/components/footer/footer.css +16 -16
  9. package/components/footer/footer.js +13 -13
  10. package/components/gdprBanner/gdprBanner.css +2 -2
  11. package/components/gdprBanner/gdprBanner.js +4 -4
  12. package/components/inlineAlert/inlineAlert.js +1 -1
  13. package/components/propsTable/propsTable.js +3 -3
  14. package/components/sectionGallery/sectionDataListLayout.js +3 -3
  15. package/components/sectionGallery/sectionGallery.css +12 -12
  16. package/components/sectionGallery/sectionGalleryToolbar.js +1 -1
  17. package/components/sideNav/sideNav.css +11 -15
  18. package/components/sideNav/sideNav.js +3 -4
  19. package/components/tableOfContents/tableOfContents.css +23 -24
  20. package/layouts/sideNavLayout/sideNavLayout.css +14 -14
  21. package/layouts/sideNavLayout/sideNavLayout.js +62 -26
  22. package/package.json +8 -11
  23. package/pages/404/404.css +2 -2
  24. package/pages/404/index.js +1 -1
  25. package/routes.js +3 -1
  26. package/scripts/md/parseMD.js +2 -0
  27. package/scripts/webpack/webpack.base.config.js +1 -4
  28. package/scripts/writeScreenshots.js +2 -2
  29. package/templates/mdx.css +168 -157
  30. package/templates/mdx.js +13 -7
  31. package/versions.json +85 -9
  32. package/pages/global-css-variables.md +0 -109
  33. package/pages/img/component-variable-mapping.png +0 -0
package/templates/mdx.css CHANGED
@@ -1,53 +1,58 @@
1
1
  #ws-page-content-router {
2
2
  display: flex;
3
3
  flex-direction: column;
4
- height: 100%;
4
+ flex-shrink: 0;
5
5
  }
6
6
 
7
7
  .ws-release-notes-toc {
8
- margin-bottom: var(--pf-v5-global--spacer--lg);
8
+ margin-bottom: var(--pf-v6-global--spacer--lg);
9
9
  }
10
10
 
11
- .ws-release-notes-toc .pf-v5-c-card {
11
+ .ws-release-notes-toc .pf-v6-c-card {
12
12
  height: 100%;
13
13
  }
14
14
 
15
- .ws-release-notes-toc .pf-v5-c-card__title {
16
- padding-bottom: var(--pf-v5-global--spacer--xs);
15
+ .ws-release-notes-toc .pf-v6-c-card__title {
16
+ padding-bottom: var(--pf-v6-global--spacer--xs);
17
17
  }
18
18
 
19
- .ws-release-notes-toc .pf-v5-c-card__title .pf-v5-c-title {
19
+ .ws-release-notes-toc .pf-v6-c-card__title .pf-v6-c-title {
20
20
  display: inline;
21
21
  }
22
22
 
23
- .ws-release-notes-toc .pf-v5-c-card__title a {
24
- margin-right: var(--pf-v5-global--spacer--sm);
23
+ .ws-release-notes-toc .pf-v6-c-card__title a {
24
+ margin-right: var(--pf-v6-global--spacer--sm);
25
25
  }
26
26
 
27
- .ws-release-notes-toc .pf-v5-c-card__title .pf-v5-c-badge {
27
+ .ws-release-notes-toc .pf-v6-c-card__title .pf-v6-c-badge {
28
28
  vertical-align: text-top;
29
29
  }
30
30
 
31
- .ws-release-notes-toc .pf-v5-c-card__body {
31
+ .ws-release-notes-toc .pf-v6-c-card__body {
32
32
  color: #72767B;
33
- font-family: var(--pf-v5-global--FontFamily--text);
34
- font-size: var(--pf-v5-global--FontSize--md);
33
+ font-family: var(--pf-v6-global--FontFamily--text);
34
+ font-size: var(--pf-v6-global--FontSize--md);
35
35
  font-weight: 400;
36
36
  line-height: 1.5;
37
37
  }
38
38
 
39
39
  .ws-code {
40
40
  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);
41
+ background-color: var(--pf-t--global--background--color--secondary--default);
42
+ padding: 1px var(--pf-v6-global--spacer--sm);
43
+ border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--300);
44
44
  white-space: pre-wrap;
45
- font-size: var(--pf-v5-global--FontSize--sm);
46
- font-family: var(--pf-v5-global--FontFamily--monospace);
45
+ font-size: var(--pf-v6-global--FontSize--sm);
46
+ font-family: var(--pf-v6-global--FontFamily--monospace);
47
47
  }
48
48
 
49
49
  .ws-p + .ws-code {
50
- margin-bottom: var(--pf-v5-c-content--MarginBottom);
50
+ margin-bottom: var(--pf-v6-c-content--MarginBottom);
51
+ }
52
+
53
+ .ws-image {
54
+ text-align: center;
55
+ width: "600px";
51
56
  }
52
57
 
53
58
  /* Table styles */
@@ -68,6 +73,12 @@
68
73
  table-layout: fixed;
69
74
  width: 100%;
70
75
  }
76
+
77
+ .ws-image {
78
+ text-align: center;
79
+ width: "600px";
80
+ }
81
+
71
82
  .ws-table td > code,
72
83
  .ws-table th > code,
73
84
  .ws-table tr > code {
@@ -78,86 +89,86 @@
78
89
  }
79
90
 
80
91
  /*
81
- * Copied from pf-v5-c-content.
92
+ * Copied from pf-v6-c-content.
82
93
  */
83
94
  :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); }
95
+ --pf-v6-c-content--MarginBottom: var(--pf-v6-global--spacer--md);
96
+ --pf-v6-c-content--LineHeight: var(--pf-v6-global--LineHeight--md);
97
+ --pf-v6-c-content--FontSize: var(--pf-v6-global--FontSize--md);
98
+ --pf-v6-c-content--FontWeight: var(--pf-v6-global--FontWeight--normal);
99
+ --pf-v6-c-content--Color: var(--pf-v6-global--Color--100);
100
+ --pf-v6-c-content--heading--FontFamily: var(--pf-v6-global--FontFamily--heading);
101
+ --pf-v6-c-content--h1--MarginTop: var(--pf-v6-global--spacer--lg);
102
+ --pf-v6-c-content--h1--MarginBottom: var(--pf-v6-global--spacer--sm);
103
+ --pf-v6-c-content--h1--LineHeight: var(--pf-v6-global--LineHeight--sm);
104
+ --pf-v6-c-content--h1--FontSize: var(--pf-v6-global--FontSize--2xl);
105
+ --pf-v6-c-content--h1--FontWeight: var(--pf-v6-global--FontWeight--normal);
106
+ --pf-v6-c-content--h2--MarginTop: var(--pf-v6-global--spacer--lg);
107
+ --pf-v6-c-content--h2--MarginBottom: var(--pf-v6-global--spacer--sm);
108
+ --pf-v6-c-content--h2--LineHeight: var(--pf-v6-global--LineHeight--sm);
109
+ --pf-v6-c-content--h2--FontSize: var(--pf-v6-global--FontSize--xl);
110
+ --pf-v6-c-content--h2--FontWeight: var(--pf-v6-global--FontWeight--normal);
111
+ --pf-v6-c-content--h3--MarginTop: var(--pf-v6-global--spacer--lg);
112
+ --pf-v6-c-content--h3--MarginBottom: var(--pf-v6-global--spacer--sm);
113
+ --pf-v6-c-content--h3--LineHeight: var(--pf-v6-global--LineHeight--md);
114
+ --pf-v6-c-content--h3--FontSize: var(--pf-v6-global--FontSize--lg);
115
+ --pf-v6-c-content--h3--FontWeight: var(--pf-v6-global--FontWeight--normal);
116
+ --pf-v6-c-content--h4--MarginTop: var(--pf-v6-global--spacer--lg);
117
+ --pf-v6-c-content--h4--MarginBottom: var(--pf-v6-global--spacer--sm);
118
+ --pf-v6-c-content--h4--LineHeight: var(--pf-v6-global--LineHeight--md);
119
+ --pf-v6-c-content--h4--FontSize: var(--pf-v6-global--FontSize--md);
120
+ --pf-v6-c-content--h4--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
121
+ --pf-v6-c-content--h5--MarginTop: var(--pf-v6-global--spacer--lg);
122
+ --pf-v6-c-content--h5--MarginBottom: var(--pf-v6-global--spacer--sm);
123
+ --pf-v6-c-content--h5--LineHeight: var(--pf-v6-global--LineHeight--md);
124
+ --pf-v6-c-content--h5--FontSize: var(--pf-v6-global--FontSize--md);
125
+ --pf-v6-c-content--h5--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
126
+ --pf-v6-c-content--h6--MarginTop: var(--pf-v6-global--spacer--lg);
127
+ --pf-v6-c-content--h6--MarginBottom: var(--pf-v6-global--spacer--sm);
128
+ --pf-v6-c-content--h6--LineHeight: var(--pf-v6-global--LineHeight--md);
129
+ --pf-v6-c-content--h6--FontSize: var(--pf-v6-global--FontSize--md);
130
+ --pf-v6-c-content--h6--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
131
+ --pf-v6-c-content--small--MarginBottom: var(--pf-v6-global--spacer--md);
132
+ --pf-v6-c-content--small--LineHeight: var(--pf-v6-global--LineHeight--md);
133
+ --pf-v6-c-content--small--FontSize: var(--pf-v6-global--FontSize--sm);
134
+ --pf-v6-c-content--small--Color: var(--pf-v6-global--Color--200);
135
+ --pf-v6-c-content--small--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
136
+ --pf-v6-c-content--a--Color: var(--pf-v6-global--link--Color);
137
+ --pf-v6-c-content--a--TextDecoration: var(--pf-v6-global--link--TextDecoration);
138
+ --pf-v6-c-content--a--hover--Color: var(--pf-v6-global--link--Color--hover);
139
+ --pf-v6-c-content--a--hover--TextDecoration: var(--pf-v6-global--link--TextDecoration--hover);
140
+ --pf-v6-c-content--blockquote--PaddingTop: var(--pf-v6-global--spacer--md);
141
+ --pf-v6-c-content--blockquote--PaddingRight: var(--pf-v6-global--spacer--md);
142
+ --pf-v6-c-content--blockquote--PaddingBottom: var(--pf-v6-global--spacer--md);
143
+ --pf-v6-c-content--blockquote--PaddingLeft: var(--pf-v6-global--spacer--md);
144
+ --pf-v6-c-content--blockquote--FontWeight: var(--pf-v6-global--FontWeight--light);
145
+ --pf-v6-c-content--blockquote--Color: var(--pf-v6-global--Color--200);
146
+ --pf-v6-c-content--blockquote--BorderLeftColor: var(--pf-v6-global--BorderColor--100);
147
+ --pf-v6-c-content--blockquote--BorderLeftWidth: var(--pf-v6-global--BorderWidth--lg);
148
+ --pf-v6-c-content--ol--PaddingLeft: var(--pf-v6-global--spacer--lg);
149
+ --pf-v6-c-content--ol--MarginTop: var(--pf-v6-global--spacer--md);
150
+ --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-global--spacer--lg);
151
+ --pf-v6-c-content--ol--nested--MarginTop: var(--pf-v6-global--spacer--sm);
152
+ --pf-v6-c-content--ol--nested--MarginLeft: var(--pf-v6-global--spacer--sm);
153
+ --pf-v6-c-content--ul--PaddingLeft: var(--pf-v6-global--spacer--lg);
154
+ --pf-v6-c-content--ul--MarginTop: var(--pf-v6-global--spacer--md);
155
+ --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-global--spacer--lg);
156
+ --pf-v6-c-content--ul--nested--MarginTop: var(--pf-v6-global--spacer--sm);
157
+ --pf-v6-c-content--ul--nested--MarginLeft: var(--pf-v6-global--spacer--sm);
158
+ --pf-v6-c-content--ul--ListStyle: var(--pf-v6-global--ListStyle);
159
+ --pf-v6-c-content--li--MarginTop: var(--pf-v6-global--spacer--sm);
160
+ --pf-v6-c-content--dl--ColumnGap: var(--pf-v6-global--spacer--2xl);
161
+ --pf-v6-c-content--dl--RowGap: var(--pf-v6-global--spacer--md);
162
+ --pf-v6-c-content--dt--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
163
+ --pf-v6-c-content--dt--MarginTop: var(--pf-v6-global--spacer--md);
164
+ --pf-v6-c-content--dt--sm--MarginTop: 0;
165
+ --pf-v6-c-content--hr--Height: var(--pf-v6-global--BorderWidth--sm);
166
+ --pf-v6-c-content--hr--BackgroundColor: var(--pf-v6-global--BorderColor--100);
167
+ font-size: var(--pf-v6-c-content--FontSize);
168
+ line-height: var(--pf-v6-c-content--LineHeight);
169
+ color: var(--pf-v6-c-content--Color); }
159
170
  .ws-li + li {
160
- margin-top: var(--pf-v5-c-content--li--MarginTop); }
171
+ margin-top: var(--pf-v6-c-content--li--MarginTop); }
161
172
  .ws-p:not(:last-child),
162
173
  .ws-dl:not(:last-child),
163
174
  .ws-ol:not(:last-child),
@@ -168,7 +179,7 @@
168
179
  .ws-hr:not(:last-child),
169
180
  .ws-table:not(:last-child),
170
181
  .ws-content-table:not(:last-child) {
171
- margin-bottom: var(--pf-v5-c-content--MarginBottom); }
182
+ margin-bottom: var(--pf-v6-c-content--MarginBottom); }
172
183
  .ws-h1,
173
184
  .ws-h2,
174
185
  .ws-h3,
@@ -176,103 +187,103 @@
176
187
  .ws-h5,
177
188
  .ws-h6 {
178
189
  margin: 0;
179
- font-family: var(--pf-v5-c-content--heading--FontFamily); }
190
+ font-family: var(--pf-v6-c-content--heading--FontFamily); }
180
191
  .ws-ol,
181
192
  .ws-ul {
182
193
  margin: 0; }
183
194
  .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); }
195
+ margin-bottom: var(--pf-v6-c-content--h1--MarginBottom);
196
+ font-size: var(--pf-v6-c-content--h1--FontSize);
197
+ font-weight: var(--pf-v6-c-content--h1--FontWeight);
198
+ line-height: var(--pf-v6-c-content--h1--LineHeight); }
188
199
  .ws-h1:not(:first-child) {
189
- margin-top: var(--pf-v5-c-content--h1--MarginTop); }
200
+ margin-top: var(--pf-v6-c-content--h1--MarginTop); }
190
201
  .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); }
202
+ margin-bottom: var(--pf-v6-c-content--h2--MarginBottom);
203
+ font-size: var(--pf-v6-c-content--h2--FontSize);
204
+ font-weight: var(--pf-v6-c-content--h2--FontWeight);
205
+ line-height: var(--pf-v6-c-content--h2--LineHeight);
206
+ margin-top: var(--pf-v6-c-content--h2--MarginTop); }
196
207
  .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); }
208
+ margin-bottom: var(--pf-v6-c-content--h3--MarginBottom);
209
+ font-size: var(--pf-v6-c-content--h3--FontSize);
210
+ font-weight: var(--pf-v6-c-content--h3--FontWeight);
211
+ line-height: var(--pf-v6-c-content--h3--LineHeight); }
201
212
  .ws-h3:not(:first-child) {
202
- margin-top: var(--pf-v5-c-content--h3--MarginTop); }
213
+ margin-top: var(--pf-v6-c-content--h3--MarginTop); }
203
214
  .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); }
215
+ margin-bottom: var(--pf-v6-c-content--h4--MarginBottom);
216
+ font-size: var(--pf-v6-c-content--h4--FontSize);
217
+ font-weight: var(--pf-v6-c-content--h4--FontWeight);
218
+ line-height: var(--pf-v6-c-content--h4--LineHeight); }
208
219
  .ws-h4:not(:first-child) {
209
- margin-top: var(--pf-v5-c-content--h4--MarginTop); }
220
+ margin-top: var(--pf-v6-c-content--h4--MarginTop); }
210
221
  .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); }
222
+ margin-bottom: var(--pf-v6-c-content--h5--MarginBottom);
223
+ font-size: var(--pf-v6-c-content--h5--FontSize);
224
+ font-weight: var(--pf-v6-c-content--h5--FontWeight);
225
+ line-height: var(--pf-v6-c-content--h5--LineHeight); }
215
226
  .ws-h5:not(:first-child) {
216
- margin-top: var(--pf-v5-c-content--h5--MarginTop); }
227
+ margin-top: var(--pf-v6-c-content--h5--MarginTop); }
217
228
  .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); }
229
+ margin-bottom: var(--pf-v6-c-content--h6--MarginBottom);
230
+ font-size: var(--pf-v6-c-content--h6--FontSize);
231
+ font-weight: var(--pf-v6-c-content--h6--FontWeight);
232
+ line-height: var(--pf-v6-c-content--h6--LineHeight); }
222
233
  .ws-h6:not(:first-child) {
223
- margin-top: var(--pf-v5-c-content--h6--MarginTop); }
234
+ margin-top: var(--pf-v6-c-content--h6--MarginTop); }
224
235
  .ws-small {
225
236
  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); }
237
+ font-size: var(--pf-v6-c-content--small--FontSize);
238
+ line-height: var(--pf-v6-c-content--small--LineHeight);
239
+ color: var(--pf-v6-c-content--small--Color); }
229
240
  .ws-small:not(:last-child) {
230
- margin-bottom: var(--pf-v5-c-content--small--MarginBottom); }
241
+ margin-bottom: var(--pf-v6-c-content--small--MarginBottom); }
231
242
  .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); }
243
+ 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);
244
+ font-weight: var(--pf-v6-c-content--blockquote--FontWeight);
245
+ color: var(--pf-v6-c-content--blockquote--Color);
246
+ border-left: var(--pf-v6-c-content--blockquote--BorderLeftWidth) solid var(--pf-v6-c-content--blockquote--BorderLeftColor); }
236
247
  .ws-hr {
237
- height: var(--pf-v5-c-content--hr--Height);
238
- background-color: var(--pf-v5-c-content--hr--BackgroundColor);
248
+ height: var(--pf-v6-c-content--hr--Height);
249
+ background-color: var(--pf-v6-c-content--hr--BackgroundColor);
239
250
  border: none; }
240
251
  .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); }
252
+ padding-left: var(--pf-v6-c-content--ol--PaddingLeft);
253
+ margin-top: var(--pf-v6-c-content--ol--MarginTop);
254
+ margin-left: var(--pf-v6-c-content--ol--MarginLeft); }
244
255
  .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); }
256
+ --pf-v6-c-content--ul--MarginTop: var(--pf-v6-c-content--ul--nested--MarginTop);
257
+ --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft); }
247
258
  .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); }
259
+ --pf-v6-c-content--ol--MarginTop: var(--pf-v6-c-content--ol--nested--MarginTop);
260
+ --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft); }
250
261
  .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); }
262
+ padding-left: var(--pf-v6-c-content--ul--PaddingLeft);
263
+ margin-top: var(--pf-v6-c-content--ul--MarginTop);
264
+ margin-left: var(--pf-v6-c-content--ul--MarginLeft);
265
+ list-style: var(--pf-v6-c-content--ul--ListStyle); }
255
266
  .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); }
267
+ --pf-v6-c-content--ul--MarginTop: var(--pf-v6-c-content--ul--nested--MarginTop);
268
+ --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft); }
258
269
  .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); }
270
+ --pf-v6-c-content--ol--MarginTop: var(--pf-v6-c-content--ol--nested--MarginTop);
271
+ --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft); }
261
272
  .ws-dl {
262
273
  display: grid;
263
274
  grid-template-columns: 1fr; }
264
275
  @media screen and (min-width: 576px) {
265
276
  .ws-dl {
266
277
  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); } }
278
+ grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
279
+ grid-row-gap: var(--pf-v6-c-content--dl--RowGap); } }
269
280
  .ws-dt {
270
- font-weight: var(--pf-v5-c-content--dt--FontWeight); }
281
+ font-weight: var(--pf-v6-c-content--dt--FontWeight); }
271
282
  .ws-dt:not(:first-child) {
272
- margin-top: var(--pf-v5-c-content--dt--MarginTop); }
283
+ margin-top: var(--pf-v6-c-content--dt--MarginTop); }
273
284
  @media screen and (min-width: 576px) {
274
285
  .ws-dt:not(:first-child) {
275
- --pf-v5-c-content--dt--MarginTop: var(--pf-v5-c-content--dt--sm--MarginTop); } }
286
+ --pf-v6-c-content--dt--MarginTop: var(--pf-v6-c-content--dt--sm--MarginTop); } }
276
287
  @media screen and (min-width: 576px) {
277
288
  .ws-dt {
278
289
  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')
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) => {
@@ -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",