@patternfly/patternfly 6.0.0-alpha.123 → 6.0.0-alpha.125
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.
- package/base/patternfly-variables.css +30 -4
- package/base/tokens/tokens-charts-dark.scss +1 -1
- package/base/tokens/tokens-charts.scss +1 -1
- package/base/tokens/tokens-dark.scss +16 -3
- package/base/tokens/tokens-default.scss +16 -3
- package/base/tokens/tokens-palette.scss +1 -1
- package/components/DataList/data-list.css +2 -2
- package/components/DataList/data-list.scss +2 -2
- package/components/Page/page.css +2 -230
- package/components/Page/page.scss +3 -158
- package/components/Wizard/wizard.css +5 -4
- package/components/Wizard/wizard.scss +5 -4
- package/components/_index.css +9 -236
- package/docs/components/Nav/examples/Navigation.css +0 -5
- package/docs/utilities/Alignment/examples/Alignment.css +2 -2
- package/docs/utilities/Display/examples/Display.css +2 -2
- package/docs/utilities/Flex/examples/Flex.css +2 -2
- package/docs/utilities/Float/examples/Float.css +3 -3
- package/docs/utilities/Sizing/examples/Sizing.css +2 -2
- package/docs/utilities/Spacing/examples/Spacing.css +2 -2
- package/package.json +5 -5
- package/patternfly-base-no-globals.css +30 -4
- package/patternfly-base.css +30 -4
- package/patternfly-no-globals.css +39 -240
- package/patternfly.css +39 -240
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/docs/components/Page/deprecated/PageHeader.css +0 -17
- package/docs/components/Page/deprecated/PageHeader.md +0 -275
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
.ws-html-deprecated-c-page :is(.pf-v6-c-page__sidebar, .pf-v6-c-page__main-subnav) {
|
|
2
|
-
color: var(--pf-t--global--text--color--inverse);
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.ws-html-deprecated-c-page .pf-v6-c-page__main-section.pf-m-dark-200 {
|
|
6
|
-
color: var(--pf-t--global--text--color--regular);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
#ws-html-deprecated-c-page-with-or-without-fill .ws-preview-html,
|
|
10
|
-
#ws-html-deprecated-c-page-multiple-sidebar-body-elements-padding-and-fill .ws-preview-html {
|
|
11
|
-
height: 500px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
#ws-html-deprecated-c-page-multiple-sidebar-body-elements .ws-preview-html,
|
|
15
|
-
#ws-html-deprecated-c-page-using-flex-layout .ws-preview-html {
|
|
16
|
-
height: 100%;
|
|
17
|
-
}
|
|
@@ -1,275 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
id: Page
|
|
3
|
-
section: components
|
|
4
|
-
wrapperTag: div
|
|
5
|
-
deprecated: true
|
|
6
|
-
---import './PageHeader.css'
|
|
7
|
-
|
|
8
|
-
## Page header examples
|
|
9
|
-
|
|
10
|
-
### Vertical nav
|
|
11
|
-
|
|
12
|
-
```html
|
|
13
|
-
<div class="pf-v6-c-page">
|
|
14
|
-
<header class="pf-v6-c-page__header">
|
|
15
|
-
<div class="pf-v6-c-page__header-brand">
|
|
16
|
-
<div class="pf-v6-c-page__header-brand-toggle">toggle</div>
|
|
17
|
-
<a href="#" class="pf-v6-c-page__header-brand-link">Logo</a>
|
|
18
|
-
</div>
|
|
19
|
-
<div class="pf-v6-c-page__header-tools">header-tools</div>
|
|
20
|
-
</header>
|
|
21
|
-
<div class="pf-v6-c-page__sidebar">
|
|
22
|
-
<div class="pf-v6-c-page__sidebar-body">Navigation</div>
|
|
23
|
-
</div>
|
|
24
|
-
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
25
|
-
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
26
|
-
<section class="pf-v6-c-page__main-section pf-m-dark-100">
|
|
27
|
-
This
|
|
28
|
-
<code>.pf-v6-c-page__main-section</code> uses
|
|
29
|
-
<code>.pf-m-dark-100</code>.
|
|
30
|
-
</section>
|
|
31
|
-
<section class="pf-v6-c-page__main-section pf-m-dark-200">
|
|
32
|
-
This
|
|
33
|
-
<code>.pf-v6-c-page__main-section</code> uses
|
|
34
|
-
<code>.pf-m-dark-200</code>.
|
|
35
|
-
</section>
|
|
36
|
-
<section class="pf-v6-c-page__main-section pf-m-light">
|
|
37
|
-
This
|
|
38
|
-
<code>.pf-v6-c-page__main-section</code> uses
|
|
39
|
-
<code>.pf-m-light</code>.
|
|
40
|
-
</section>
|
|
41
|
-
<section class="pf-v6-c-page__main-section">
|
|
42
|
-
This is a default
|
|
43
|
-
<code>.pf-v6-c-page__main-section</code>.
|
|
44
|
-
</section>
|
|
45
|
-
</main>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
### Horizontal nav
|
|
52
|
-
|
|
53
|
-
```html
|
|
54
|
-
<div class="pf-v6-c-page">
|
|
55
|
-
<header class="pf-v6-c-page__header">
|
|
56
|
-
<div class="pf-v6-c-page__header-brand">
|
|
57
|
-
<a href="#" class="pf-v6-c-page__header-brand-link">Logo</a>
|
|
58
|
-
</div>
|
|
59
|
-
<div class="pf-v6-c-page__header-nav">Navigation</div>
|
|
60
|
-
<div class="pf-v6-c-page__header-tools">header-tools</div>
|
|
61
|
-
</header>
|
|
62
|
-
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
63
|
-
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
64
|
-
<section class="pf-v6-c-page__main-section pf-m-dark-100"></section>
|
|
65
|
-
<section class="pf-v6-c-page__main-section pf-m-dark-200"></section>
|
|
66
|
-
<section class="pf-v6-c-page__main-section pf-m-light"></section>
|
|
67
|
-
<section class="pf-v6-c-page__main-section"></section>
|
|
68
|
-
</main>
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
### Multiple sidebar body elements, padding, and fill
|
|
75
|
-
|
|
76
|
-
```html
|
|
77
|
-
<div class="pf-v6-c-page">
|
|
78
|
-
<header class="pf-v6-c-page__header">
|
|
79
|
-
<div class="pf-v6-c-page__header-brand">
|
|
80
|
-
<div class="pf-v6-c-page__header-brand-toggle">toggle</div>
|
|
81
|
-
<a href="#" class="pf-v6-c-page__header-brand-link">Logo</a>
|
|
82
|
-
</div>
|
|
83
|
-
<div class="pf-v6-c-page__header-tools">header-tools</div>
|
|
84
|
-
</header>
|
|
85
|
-
<div class="pf-v6-c-page__sidebar">
|
|
86
|
-
<div class="pf-v6-c-page__sidebar-body">Navigation</div>
|
|
87
|
-
<div
|
|
88
|
-
class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-page-insets"
|
|
89
|
-
>inset content</div>
|
|
90
|
-
<div class="pf-v6-c-page__sidebar-body pf-m-page-insets">footer content</div>
|
|
91
|
-
</div>
|
|
92
|
-
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
93
|
-
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
94
|
-
<section class="pf-v6-c-page__main-section pf-m-light"></section>
|
|
95
|
-
</main>
|
|
96
|
-
</div>
|
|
97
|
-
</div>
|
|
98
|
-
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
### With or without fill
|
|
102
|
-
|
|
103
|
-
```html
|
|
104
|
-
<div class="pf-v6-c-page">
|
|
105
|
-
<header class="pf-v6-c-page__header">
|
|
106
|
-
<div class="pf-v6-c-page__header-brand">
|
|
107
|
-
<a href="#" class="pf-v6-c-page__header-brand-link">Logo</a>
|
|
108
|
-
</div>
|
|
109
|
-
<div class="pf-v6-c-page__header-nav">Navigation</div>
|
|
110
|
-
<div class="pf-v6-c-page__header-tools">header-tools</div>
|
|
111
|
-
</header>
|
|
112
|
-
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
113
|
-
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
114
|
-
<section
|
|
115
|
-
class="pf-v6-c-page__main-section pf-m-light"
|
|
116
|
-
>A regular page section.</section>
|
|
117
|
-
<section class="pf-v6-c-page__main-section pf-m-fill">
|
|
118
|
-
This section uses
|
|
119
|
-
<code>.pf-m-fill</code> to fill the available space.
|
|
120
|
-
</section>
|
|
121
|
-
<section class="pf-v6-c-page__main-section pf-m-light pf-m-no-fill">
|
|
122
|
-
This section uses
|
|
123
|
-
<code>.pf-m-no-fill</code> to not fill the available space.
|
|
124
|
-
</section>
|
|
125
|
-
</main>
|
|
126
|
-
</div>
|
|
127
|
-
</div>
|
|
128
|
-
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
### Main section padding
|
|
132
|
-
|
|
133
|
-
```html
|
|
134
|
-
<div class="pf-v6-c-page">
|
|
135
|
-
<header class="pf-v6-c-page__header">
|
|
136
|
-
<div class="pf-v6-c-page__header-brand">
|
|
137
|
-
<div class="pf-v6-c-page__header-brand-toggle">toggle</div>
|
|
138
|
-
<a href="#" class="pf-v6-c-page__header-brand-link">Logo</a>
|
|
139
|
-
</div>
|
|
140
|
-
<div class="pf-v6-c-page__header-tools">header-tools</div>
|
|
141
|
-
</header>
|
|
142
|
-
<div class="pf-v6-c-page__sidebar">
|
|
143
|
-
<div class="pf-v6-c-page__sidebar-body">Navigation</div>
|
|
144
|
-
</div>
|
|
145
|
-
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
146
|
-
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
147
|
-
<section class="pf-v6-c-page__main-section">
|
|
148
|
-
This
|
|
149
|
-
<code>.pf-v6-c-page__main-section</code> has default padding.
|
|
150
|
-
</section>
|
|
151
|
-
<section class="pf-v6-c-page__main-section pf-m-no-padding pf-m-light">
|
|
152
|
-
This
|
|
153
|
-
<code>.pf-v6-c-page__main-section</code> uses
|
|
154
|
-
<code>.pf-m-no-padding</code> to remove all padding.
|
|
155
|
-
</section>
|
|
156
|
-
<section
|
|
157
|
-
class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
|
|
158
|
-
>
|
|
159
|
-
This
|
|
160
|
-
<code>.pf-v6-c-page__main-section</code> uses
|
|
161
|
-
<code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
|
|
162
|
-
<code>md</code> breakpoint.
|
|
163
|
-
</section>
|
|
164
|
-
</main>
|
|
165
|
-
</div>
|
|
166
|
-
</div>
|
|
167
|
-
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
### Main section variations
|
|
171
|
-
|
|
172
|
-
```html
|
|
173
|
-
<div class="pf-v6-c-page">
|
|
174
|
-
<header class="pf-v6-c-page__header">
|
|
175
|
-
<div class="pf-v6-c-page__header-brand">
|
|
176
|
-
<div class="pf-v6-c-page__header-brand-toggle">toggle</div>
|
|
177
|
-
<a href="#" class="pf-v6-c-page__header-brand-link">Logo</a>
|
|
178
|
-
</div>
|
|
179
|
-
<div class="pf-v6-c-page__header-tools">header-tools</div>
|
|
180
|
-
</header>
|
|
181
|
-
<div class="pf-v6-c-page__sidebar">
|
|
182
|
-
<div class="pf-v6-c-page__sidebar-body">Navigation</div>
|
|
183
|
-
</div>
|
|
184
|
-
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
185
|
-
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
186
|
-
<section class="pf-v6-c-page__main-subnav">
|
|
187
|
-
<code>.pf-v6-c-page__main-subnav</code> for horizontal subnav navigation
|
|
188
|
-
</section>
|
|
189
|
-
<section class="pf-v6-c-page__main-nav">
|
|
190
|
-
<code>.pf-v6-c-page__main-nav</code> for tertiary navigation
|
|
191
|
-
</section>
|
|
192
|
-
<section class="pf-v6-c-page__main-tabs">
|
|
193
|
-
<code>.pf-v6-c-page__main-tabs</code> for tabs
|
|
194
|
-
</section>
|
|
195
|
-
<div class="pf-v6-c-page__main-group">
|
|
196
|
-
<code>.pf-v6-c-page__main-group</code> for a group of page sections
|
|
197
|
-
</div>
|
|
198
|
-
<section class="pf-v6-c-page__main-breadcrumb">
|
|
199
|
-
<code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
|
|
200
|
-
</section>
|
|
201
|
-
<section class="pf-v6-c-page__main-section">
|
|
202
|
-
<code>.pf-v6-c-page__main-section</code> for main sections
|
|
203
|
-
</section>
|
|
204
|
-
<section class="pf-v6-c-page__main-wizard">
|
|
205
|
-
<code>.pf-v6-c-page__main-wizard</code> for wizards
|
|
206
|
-
</section>
|
|
207
|
-
</main>
|
|
208
|
-
</div>
|
|
209
|
-
</div>
|
|
210
|
-
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
### Centered section
|
|
214
|
-
|
|
215
|
-
```html
|
|
216
|
-
<div class="pf-v6-c-page">
|
|
217
|
-
<header class="pf-v6-c-page__header">
|
|
218
|
-
<div class="pf-v6-c-page__header-brand">
|
|
219
|
-
<div class="pf-v6-c-page__header-brand-toggle">toggle</div>
|
|
220
|
-
<a href="#" class="pf-v6-c-page__header-brand-link">Logo</a>
|
|
221
|
-
</div>
|
|
222
|
-
<div class="pf-v6-c-page__header-tools">header-tools</div>
|
|
223
|
-
</header>
|
|
224
|
-
<div class="pf-v6-c-page__main-container" tabindex="-1">
|
|
225
|
-
<main class="pf-v6-c-page__main" tabindex="-1">
|
|
226
|
-
<section
|
|
227
|
-
class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
|
|
228
|
-
>
|
|
229
|
-
<div class="pf-v6-c-page__main-body">
|
|
230
|
-
<div class="pf-v6-c-card">
|
|
231
|
-
<div class="pf-v6-c-card__body">
|
|
232
|
-
When a width limited page section is wider than the value of
|
|
233
|
-
<code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
|
|
234
|
-
<br />
|
|
235
|
-
<br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
|
|
236
|
-
</div>
|
|
237
|
-
</div>
|
|
238
|
-
</div>
|
|
239
|
-
</section>
|
|
240
|
-
</main>
|
|
241
|
-
</div>
|
|
242
|
-
</div>
|
|
243
|
-
|
|
244
|
-
```
|
|
245
|
-
|
|
246
|
-
## Documentation
|
|
247
|
-
|
|
248
|
-
### Overview
|
|
249
|
-
|
|
250
|
-
The page header component is a deprecated approach to building a header on the page component. The recommended approach uses the masthead component instead.
|
|
251
|
-
|
|
252
|
-
### Accessibility
|
|
253
|
-
|
|
254
|
-
| Attribute | Applied to | Outcome |
|
|
255
|
-
| -- | -- | -- |
|
|
256
|
-
| `role="banner"` | `.pf-v6-c-page__header` | Identifies the element that serves as the banner region. |
|
|
257
|
-
| `aria-expanded="true/false"` | `.pf-v6-c-page__header-brand-toggle > .pf-v6-c-button` | Indicates that the expandable content is visible and the current state of the contents. **Required** |
|
|
258
|
-
| `aria-controls="[id of nav]"` | `.pf-v6-c-page__header-brand-toggle > .pf-v6-c-button` | Identifies the element controlled by the toggle. **Required**
|
|
259
|
-
|
|
260
|
-
### Usage
|
|
261
|
-
|
|
262
|
-
| Class | Applied to | Outcome |
|
|
263
|
-
| -- | -- | -- |
|
|
264
|
-
| `.pf-v6-c-page__header` | `<header>` | Declares the page header. |
|
|
265
|
-
| `.pf-v6-c-page__header-brand` | `<div>` | Creates a header container to nest the brand component. |
|
|
266
|
-
| `.pf-v6-c-page__header-brand-toggle` | `<div>` | Creates a container to nest the sidebar toggle. |
|
|
267
|
-
| `.pf-v6-c-page__header-brand-link` | `<a>`, `<span>` | Creates a link for the brand logo. Use a `<span>` if there is no link. |
|
|
268
|
-
| `.pf-v6-c-page__header-selector` | `<div>` | Creates a header container to nest the context selector component. |
|
|
269
|
-
| `.pf-v6-c-page__header-nav` | `<div>` | Creates a container to nest the navigation component in the header. |
|
|
270
|
-
| `.pf-v6-c-page__header-tools` | `<div>` | Creates a container to nest the icons and menus in header. |
|
|
271
|
-
| `.pf-v6-c-page__header-tools-group` | `<div>` | Creates a container for grouping sets of icons and menus in header. |
|
|
272
|
-
| `.pf-v6-c-page__header-tools-item` | `<div>` | Creates a container for an item in a header tools group. |
|
|
273
|
-
| `.pf-m-selected` | `.pf-v6-c-page__header-tools-item` | Modifies a header tools item to indicate that the button inside is in the selected state. |
|
|
274
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-page__header-tools-group`, `.pf-v6-c-page__header-tools-item` | Hides a header tools group or item at an optional breakpoint, or hides it at all [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) with `.pf-m-hidden`. |
|
|
275
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-page__header-tools-group`, `.pf-v6-c-page__header-tools-item` | Shows a header tools group or item at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|