@patternfly/patternfly 5.0.0-alpha.75 → 5.0.0-alpha.77
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/components/Masthead/masthead.css +15 -3
- package/components/Masthead/masthead.scss +16 -4
- package/components/Toolbar/toolbar.css +2 -1
- package/components/Toolbar/toolbar.scss +2 -1
- package/docs/components/Alert/examples/Alert.md +1 -1
- package/docs/components/AppLauncher/deprecated/application-launcher.css +25 -0
- package/docs/components/AppLauncher/{examples → deprecated}/application-launcher.md +1 -0
- package/docs/components/Card/examples/Card.md +10 -10
- package/docs/components/Chip/examples/Chip.md +1 -1
- package/docs/components/ContextSelector/deprecated/context-selector.css +7 -0
- package/docs/components/ContextSelector/{examples → deprecated}/context-selector.md +1 -0
- package/docs/components/Label/examples/Label.md +1 -1
- package/docs/components/Nav/examples/Navigation.md +4 -4
- package/docs/components/OptionsMenu/deprecated/options-menu.css +25 -0
- package/docs/components/OptionsMenu/{examples → deprecated}/options-menu.md +1 -0
- package/docs/components/Page/deprecated/PageHeader.css +17 -0
- package/docs/components/Page/deprecated/PageHeader.md +261 -0
- package/docs/components/Page/examples/Page.md +106 -51
- package/docs/components/Tabs/examples/Tabs.md +6 -6
- package/docs/components/Toolbar/examples/Toolbar.md +15 -15
- package/docs/demos/ContextSelector/examples/ContextSelector.md +1 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +0 -1
- package/docs/demos/DataList/examples/DataList.md +6 -6
- package/docs/demos/Masthead/examples/Masthead.md +9 -9
- package/docs/demos/Nav/examples/Nav.md +2 -2
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +9 -18
- package/docs/demos/Table/examples/Table.md +36 -42
- package/docs/demos/Toolbar/examples/Toolbar.md +12 -12
- package/package.json +5 -5
- package/patternfly-no-globals.css +17 -4
- package/patternfly-theme-dark-unversioned.css +17 -4
- package/patternfly.css +17 -4
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/docs/components/AppLauncher/examples/application-launcher.css +0 -25
- package/docs/components/ContextSelector/examples/context-selector.css +0 -7
- package/docs/components/OptionsMenu/examples/options-menu.css +0 -25
|
@@ -11,12 +11,22 @@ wrapperTag: div
|
|
|
11
11
|
|
|
12
12
|
```html
|
|
13
13
|
<div class="pf-v5-c-page">
|
|
14
|
-
<header class="pf-v5-c-
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
|
|
14
|
+
<header class="pf-v5-c-masthead">
|
|
15
|
+
<span class="pf-v5-c-masthead__toggle">
|
|
16
|
+
<button
|
|
17
|
+
class="pf-v5-c-button pf-m-plain"
|
|
18
|
+
type="button"
|
|
19
|
+
aria-label="Global navigation"
|
|
20
|
+
>
|
|
21
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
22
|
+
</button>
|
|
23
|
+
</span>
|
|
24
|
+
<div class="pf-v5-c-masthead__main">
|
|
25
|
+
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="pf-v5-c-masthead__content">
|
|
28
|
+
<span>Content</span>
|
|
18
29
|
</div>
|
|
19
|
-
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
20
30
|
</header>
|
|
21
31
|
<div class="pf-v5-c-page__sidebar">
|
|
22
32
|
<div class="pf-v5-c-page__sidebar-body">Navigation</div>
|
|
@@ -50,12 +60,22 @@ wrapperTag: div
|
|
|
50
60
|
|
|
51
61
|
```html
|
|
52
62
|
<div class="pf-v5-c-page">
|
|
53
|
-
<header class="pf-v5-c-
|
|
54
|
-
<
|
|
55
|
-
<
|
|
63
|
+
<header class="pf-v5-c-masthead">
|
|
64
|
+
<span class="pf-v5-c-masthead__toggle">
|
|
65
|
+
<button
|
|
66
|
+
class="pf-v5-c-button pf-m-plain"
|
|
67
|
+
type="button"
|
|
68
|
+
aria-label="Global navigation"
|
|
69
|
+
>
|
|
70
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
71
|
+
</button>
|
|
72
|
+
</span>
|
|
73
|
+
<div class="pf-v5-c-masthead__main">
|
|
74
|
+
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="pf-v5-c-masthead__content">
|
|
77
|
+
<span>Content</span>
|
|
56
78
|
</div>
|
|
57
|
-
<div class="pf-v5-c-page__header-nav">Navigation</div>
|
|
58
|
-
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
59
79
|
</header>
|
|
60
80
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
61
81
|
<section class="pf-v5-c-page__main-section pf-m-dark-100"></section>
|
|
@@ -71,12 +91,22 @@ wrapperTag: div
|
|
|
71
91
|
|
|
72
92
|
```html
|
|
73
93
|
<div class="pf-v5-c-page">
|
|
74
|
-
<header class="pf-v5-c-
|
|
75
|
-
<
|
|
76
|
-
<
|
|
77
|
-
|
|
94
|
+
<header class="pf-v5-c-masthead">
|
|
95
|
+
<span class="pf-v5-c-masthead__toggle">
|
|
96
|
+
<button
|
|
97
|
+
class="pf-v5-c-button pf-m-plain"
|
|
98
|
+
type="button"
|
|
99
|
+
aria-label="Global navigation"
|
|
100
|
+
>
|
|
101
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
102
|
+
</button>
|
|
103
|
+
</span>
|
|
104
|
+
<div class="pf-v5-c-masthead__main">
|
|
105
|
+
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="pf-v5-c-masthead__content">
|
|
108
|
+
<span>Content</span>
|
|
78
109
|
</div>
|
|
79
|
-
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
80
110
|
</header>
|
|
81
111
|
<div class="pf-v5-c-page__sidebar">
|
|
82
112
|
<div class="pf-v5-c-page__sidebar-body">Navigation</div>
|
|
@@ -96,12 +126,22 @@ wrapperTag: div
|
|
|
96
126
|
|
|
97
127
|
```html
|
|
98
128
|
<div class="pf-v5-c-page">
|
|
99
|
-
<header class="pf-v5-c-
|
|
100
|
-
<
|
|
101
|
-
<
|
|
129
|
+
<header class="pf-v5-c-masthead">
|
|
130
|
+
<span class="pf-v5-c-masthead__toggle">
|
|
131
|
+
<button
|
|
132
|
+
class="pf-v5-c-button pf-m-plain"
|
|
133
|
+
type="button"
|
|
134
|
+
aria-label="Global navigation"
|
|
135
|
+
>
|
|
136
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
137
|
+
</button>
|
|
138
|
+
</span>
|
|
139
|
+
<div class="pf-v5-c-masthead__main">
|
|
140
|
+
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="pf-v5-c-masthead__content">
|
|
143
|
+
<span>Content</span>
|
|
102
144
|
</div>
|
|
103
|
-
<div class="pf-v5-c-page__header-nav">Navigation</div>
|
|
104
|
-
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
105
145
|
</header>
|
|
106
146
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
107
147
|
<section
|
|
@@ -124,12 +164,22 @@ wrapperTag: div
|
|
|
124
164
|
|
|
125
165
|
```html
|
|
126
166
|
<div class="pf-v5-c-page">
|
|
127
|
-
<header class="pf-v5-c-
|
|
128
|
-
<
|
|
129
|
-
<
|
|
130
|
-
|
|
167
|
+
<header class="pf-v5-c-masthead">
|
|
168
|
+
<span class="pf-v5-c-masthead__toggle">
|
|
169
|
+
<button
|
|
170
|
+
class="pf-v5-c-button pf-m-plain"
|
|
171
|
+
type="button"
|
|
172
|
+
aria-label="Global navigation"
|
|
173
|
+
>
|
|
174
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
175
|
+
</button>
|
|
176
|
+
</span>
|
|
177
|
+
<div class="pf-v5-c-masthead__main">
|
|
178
|
+
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
179
|
+
</div>
|
|
180
|
+
<div class="pf-v5-c-masthead__content">
|
|
181
|
+
<span>Content</span>
|
|
131
182
|
</div>
|
|
132
|
-
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
133
183
|
</header>
|
|
134
184
|
<div class="pf-v5-c-page__sidebar">
|
|
135
185
|
<div class="pf-v5-c-page__sidebar-body">Navigation</div>
|
|
@@ -161,12 +211,22 @@ wrapperTag: div
|
|
|
161
211
|
|
|
162
212
|
```html
|
|
163
213
|
<div class="pf-v5-c-page">
|
|
164
|
-
<header class="pf-v5-c-
|
|
165
|
-
<
|
|
166
|
-
<
|
|
167
|
-
|
|
214
|
+
<header class="pf-v5-c-masthead">
|
|
215
|
+
<span class="pf-v5-c-masthead__toggle">
|
|
216
|
+
<button
|
|
217
|
+
class="pf-v5-c-button pf-m-plain"
|
|
218
|
+
type="button"
|
|
219
|
+
aria-label="Global navigation"
|
|
220
|
+
>
|
|
221
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
222
|
+
</button>
|
|
223
|
+
</span>
|
|
224
|
+
<div class="pf-v5-c-masthead__main">
|
|
225
|
+
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
226
|
+
</div>
|
|
227
|
+
<div class="pf-v5-c-masthead__content">
|
|
228
|
+
<span>Content</span>
|
|
168
229
|
</div>
|
|
169
|
-
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
170
230
|
</header>
|
|
171
231
|
<div class="pf-v5-c-page__sidebar">
|
|
172
232
|
<div class="pf-v5-c-page__sidebar-body">Navigation</div>
|
|
@@ -202,12 +262,22 @@ wrapperTag: div
|
|
|
202
262
|
|
|
203
263
|
```html
|
|
204
264
|
<div class="pf-v5-c-page">
|
|
205
|
-
<header class="pf-v5-c-
|
|
206
|
-
<
|
|
207
|
-
<
|
|
208
|
-
|
|
265
|
+
<header class="pf-v5-c-masthead">
|
|
266
|
+
<span class="pf-v5-c-masthead__toggle">
|
|
267
|
+
<button
|
|
268
|
+
class="pf-v5-c-button pf-m-plain"
|
|
269
|
+
type="button"
|
|
270
|
+
aria-label="Global navigation"
|
|
271
|
+
>
|
|
272
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
273
|
+
</button>
|
|
274
|
+
</span>
|
|
275
|
+
<div class="pf-v5-c-masthead__main">
|
|
276
|
+
<a class="pf-v5-c-masthead__brand" href="#">Logo</a>
|
|
277
|
+
</div>
|
|
278
|
+
<div class="pf-v5-c-masthead__content">
|
|
279
|
+
<span>Content</span>
|
|
209
280
|
</div>
|
|
210
|
-
<div class="pf-v5-c-page__header-tools">header-tools</div>
|
|
211
281
|
</header>
|
|
212
282
|
<main class="pf-v5-c-page__main" tabindex="-1">
|
|
213
283
|
<section
|
|
@@ -233,18 +303,15 @@ wrapperTag: div
|
|
|
233
303
|
|
|
234
304
|
### Overview
|
|
235
305
|
|
|
236
|
-
This component provides the basic chrome for a page, including sidebar
|
|
306
|
+
This component provides the basic chrome for a page, including sidebar and main areas.
|
|
237
307
|
|
|
238
308
|
### Accessibility
|
|
239
309
|
|
|
240
310
|
| Attribute | Applied to | Outcome |
|
|
241
311
|
| -- | -- | -- |
|
|
242
|
-
| `role="banner"` | `.pf-v5-c-page__header` | Identifies the element that serves as the banner region. |
|
|
243
312
|
| `role="main"` | `.pf-v5-c-page__main` | Identifies the element that serves as the main region. |
|
|
244
313
|
| `tabindex="-1"` | `.pf-v5-c-page__main` | Allows the main region to receive programmatic focus. **Required** |
|
|
245
314
|
| `id="[id]"` | `.pf-v5-c-page__main` | Provides a hook for sending focus to new content. **Required** |
|
|
246
|
-
| `aria-expanded="true/false"` | `.pf-v5-c-page__header-brand-toggle > .pf-v5-c-button` | Indicates that the expandable content is visible and the current state of the contents. **Required** |
|
|
247
|
-
| `aria-controls="[id of nav]"` | `.pf-v5-c-page__header-brand-toggle > .pf-v5-c-button` | Identifies the element controlled by the toggle. **Required**
|
|
248
315
|
| `tabindex="0"` | `.pf-v5-c-page__main-section.pf-m-overflow-scroll` | If a page section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the page section must include either a focusable element within the scrollable region or the page section itself must be focusable by adding `tabindex="0"`. |
|
|
249
316
|
|
|
250
317
|
### Usage
|
|
@@ -252,15 +319,6 @@ This component provides the basic chrome for a page, including sidebar, header,
|
|
|
252
319
|
| Class | Applied to | Outcome |
|
|
253
320
|
| -- | -- | -- |
|
|
254
321
|
| `.pf-v5-c-page` | `<div>` | Declares the page component. |
|
|
255
|
-
| `.pf-v5-c-page__header` | `<header>` | Declares the page header. |
|
|
256
|
-
| `.pf-v5-c-page__header-brand` | `<div>` | Creates a header container to nest the brand component. |
|
|
257
|
-
| `.pf-v5-c-page__header-brand-toggle` | `<div>` | Creates a container to nest the sidebar toggle. |
|
|
258
|
-
| `.pf-v5-c-page__header-brand-link` | `<a>`, `<span>` | Creates a link for the brand logo. Use a `<span>` if there is no link. |
|
|
259
|
-
| `.pf-v5-c-page__header-selector` | `<div>` | Creates a header container to nest the context selector component. |
|
|
260
|
-
| `.pf-v5-c-page__header-nav` | `<div>` | Creates a container to nest the navigation component in the header. |
|
|
261
|
-
| `.pf-v5-c-page__header-tools` | `<div>` | Creates a container to nest the icons and menus in header. |
|
|
262
|
-
| `.pf-v5-c-page__header-tools-group` | `<div>` | Creates a container for grouping sets of icons and menus in header. |
|
|
263
|
-
| `.pf-v5-c-page__header-tools-item` | `<div>` | Creates a container for an item in a header tools group. |
|
|
264
322
|
| `.pf-v5-c-page__sidebar` | `<aside>` | Declares the page sidebar. |
|
|
265
323
|
| `.pf-v5-c-page__sidebar-body` | `<div>` | Creates a wrapper within the sidebar to hold content. **Note: The last/only `.pf-v5-c-page__sidebar-body` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
|
|
266
324
|
| `.pf-v5-c-page__main` | `<main>` | Declares the main page area. |
|
|
@@ -272,7 +330,6 @@ This component provides the basic chrome for a page, including sidebar, header,
|
|
|
272
330
|
| `.pf-v5-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required when using `.pf-m-limit-width` on `.pf-v5-c-page__main-section`** |
|
|
273
331
|
| `.pf-v5-c-page__main-group` | `<div>` | Creates the group of `.pf-v5-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
|
|
274
332
|
| `.pf-v5-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
|
|
275
|
-
| `.pf-m-selected` | `.pf-v5-c-page__header-tools-item` | Modifies a header tools item to indicate that the button inside is in the selected state. |
|
|
276
333
|
| `.pf-m-expanded` | `.pf-v5-c-page__sidebar` | Modifies the sidebar for the expanded state. |
|
|
277
334
|
| `.pf-m-collapsed` | `.pf-v5-c-page__sidebar` | Modifies the sidebar for the collapsed state. |
|
|
278
335
|
| `.pf-m-page-insets` | `.pf-v5-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |
|
|
@@ -286,8 +343,6 @@ This component provides the basic chrome for a page, including sidebar, header,
|
|
|
286
343
|
| `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-v5-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
287
344
|
| `.pf-m-fill` | `.pf-v5-c-page__main-section`, `.pf-v5-c-page__sidebar-body` | Modifies the element to grow to fill the available space. |
|
|
288
345
|
| `.pf-m-no-fill` | `.pf-v5-c-page__main-section`, `.pf-v5-c-page__sidebar-body` | Modifies the element to not grow to fill the available vertical space. |
|
|
289
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-page__header-tools-group`, `.pf-v5-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`. |
|
|
290
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-page__header-tools-group`, `.pf-v5-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). |
|
|
291
346
|
| `.pf-m-limit-width` | `.pf-v5-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
|
|
292
347
|
| `.pf-m-align-center` | `.pf-v5-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
|
|
293
348
|
| `.pf-m-sticky-top{-on-[breakpoint]-height}` | `.pf-v5-c-page__main-*` | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint. |
|
|
@@ -786,9 +786,9 @@ cssPrefix: pf-v5-c-tabs
|
|
|
786
786
|
|
|
787
787
|
```
|
|
788
788
|
|
|
789
|
-
### Vertical expandable example (
|
|
789
|
+
### Vertical expandable example (deprecated)
|
|
790
790
|
|
|
791
|
-
```html
|
|
791
|
+
```html isDeprecated
|
|
792
792
|
<div
|
|
793
793
|
class="pf-v5-c-tabs pf-m-expandable pf-m-vertical"
|
|
794
794
|
id="vertical-expandable-legacy"
|
|
@@ -875,9 +875,9 @@ cssPrefix: pf-v5-c-tabs
|
|
|
875
875
|
|
|
876
876
|
```
|
|
877
877
|
|
|
878
|
-
### Vertical expanded example (
|
|
878
|
+
### Vertical expanded example (deprecated)
|
|
879
879
|
|
|
880
|
-
```html
|
|
880
|
+
```html isDeprecated
|
|
881
881
|
<div
|
|
882
882
|
class="pf-v5-c-tabs pf-m-expandable pf-m-expanded pf-m-vertical"
|
|
883
883
|
id="vertical-expanded-legacy"
|
|
@@ -964,9 +964,9 @@ cssPrefix: pf-v5-c-tabs
|
|
|
964
964
|
|
|
965
965
|
```
|
|
966
966
|
|
|
967
|
-
### Vertical expandable responsive example (
|
|
967
|
+
### Vertical expandable responsive example (deprecated)
|
|
968
968
|
|
|
969
|
-
```html
|
|
969
|
+
```html isDeprecated
|
|
970
970
|
<div
|
|
971
971
|
class="pf-v5-c-tabs pf-m-expandable pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl"
|
|
972
972
|
id="vertical-expandable-responsive-legacy"
|
|
@@ -469,7 +469,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
469
469
|
aria-label="search filter"
|
|
470
470
|
role="group"
|
|
471
471
|
>
|
|
472
|
-
<div class="pf-v5-c-input-group__item
|
|
472
|
+
<div class="pf-v5-c-input-group__item">
|
|
473
473
|
<div class="pf-v5-c-select" style="width: 124px">
|
|
474
474
|
<span
|
|
475
475
|
id="toolbar-toggle-group-example-select-name-label"
|
|
@@ -537,8 +537,8 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
537
537
|
</ul>
|
|
538
538
|
</div>
|
|
539
539
|
</div>
|
|
540
|
-
<div class="pf-v5-c-input-group__item">
|
|
541
|
-
<div class="pf-v5-c-text-input-group"
|
|
540
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
541
|
+
<div class="pf-v5-c-text-input-group">
|
|
542
542
|
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
543
543
|
<span class="pf-v5-c-text-input-group__text">
|
|
544
544
|
<span class="pf-v5-c-text-input-group__icon">
|
|
@@ -807,7 +807,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
807
807
|
aria-label="search filter"
|
|
808
808
|
role="group"
|
|
809
809
|
>
|
|
810
|
-
<div class="pf-v5-c-input-group__item
|
|
810
|
+
<div class="pf-v5-c-input-group__item">
|
|
811
811
|
<div class="pf-v5-c-select" style="width: 124px">
|
|
812
812
|
<span
|
|
813
813
|
id="toolbar-toggle-group-collapsed-example-select-name-label"
|
|
@@ -875,8 +875,8 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
875
875
|
</ul>
|
|
876
876
|
</div>
|
|
877
877
|
</div>
|
|
878
|
-
<div class="pf-v5-c-input-group__item">
|
|
879
|
-
<div class="pf-v5-c-text-input-group"
|
|
878
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
879
|
+
<div class="pf-v5-c-text-input-group">
|
|
880
880
|
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
881
881
|
<span class="pf-v5-c-text-input-group__text">
|
|
882
882
|
<span class="pf-v5-c-text-input-group__icon">
|
|
@@ -1211,7 +1211,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1211
1211
|
aria-label="search filter"
|
|
1212
1212
|
role="group"
|
|
1213
1213
|
>
|
|
1214
|
-
<div class="pf-v5-c-input-group__item
|
|
1214
|
+
<div class="pf-v5-c-input-group__item">
|
|
1215
1215
|
<div class="pf-v5-c-select" style="width: 124px">
|
|
1216
1216
|
<span
|
|
1217
1217
|
id="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
|
|
@@ -1279,8 +1279,8 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1279
1279
|
</ul>
|
|
1280
1280
|
</div>
|
|
1281
1281
|
</div>
|
|
1282
|
-
<div class="pf-v5-c-input-group__item">
|
|
1283
|
-
<div class="pf-v5-c-text-input-group"
|
|
1282
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
1283
|
+
<div class="pf-v5-c-text-input-group">
|
|
1284
1284
|
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
1285
1285
|
<span class="pf-v5-c-text-input-group__text">
|
|
1286
1286
|
<span class="pf-v5-c-text-input-group__icon">
|
|
@@ -1843,7 +1843,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1843
1843
|
aria-label="search filter"
|
|
1844
1844
|
role="group"
|
|
1845
1845
|
>
|
|
1846
|
-
<div class="pf-v5-c-input-group__item
|
|
1846
|
+
<div class="pf-v5-c-input-group__item">
|
|
1847
1847
|
<div class="pf-v5-c-select" style="width: 124px">
|
|
1848
1848
|
<span
|
|
1849
1849
|
id="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
|
|
@@ -1911,8 +1911,8 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1911
1911
|
</ul>
|
|
1912
1912
|
</div>
|
|
1913
1913
|
</div>
|
|
1914
|
-
<div class="pf-v5-c-input-group__item">
|
|
1915
|
-
<div class="pf-v5-c-text-input-group"
|
|
1914
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
1915
|
+
<div class="pf-v5-c-text-input-group">
|
|
1916
1916
|
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
1917
1917
|
<span class="pf-v5-c-text-input-group__text">
|
|
1918
1918
|
<span class="pf-v5-c-text-input-group__icon">
|
|
@@ -4026,7 +4026,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
4026
4026
|
aria-label="search filter"
|
|
4027
4027
|
role="group"
|
|
4028
4028
|
>
|
|
4029
|
-
<div class="pf-v5-c-input-group__item
|
|
4029
|
+
<div class="pf-v5-c-input-group__item">
|
|
4030
4030
|
<div class="pf-v5-c-select" style="width: 124px">
|
|
4031
4031
|
<span
|
|
4032
4032
|
id="toolbar-expanded-elements-example-select-name-label"
|
|
@@ -4094,8 +4094,8 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
4094
4094
|
</ul>
|
|
4095
4095
|
</div>
|
|
4096
4096
|
</div>
|
|
4097
|
-
<div class="pf-v5-c-input-group__item">
|
|
4098
|
-
<div class="pf-v5-c-text-input-group"
|
|
4097
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
4098
|
+
<div class="pf-v5-c-text-input-group">
|
|
4099
4099
|
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
4100
4100
|
<span class="pf-v5-c-text-input-group__text">
|
|
4101
4101
|
<span class="pf-v5-c-text-input-group__icon">
|
|
@@ -4200,7 +4200,7 @@ wrapperTag: div
|
|
|
4200
4200
|
aria-label="search filter"
|
|
4201
4201
|
role="group"
|
|
4202
4202
|
>
|
|
4203
|
-
<div class="pf-v5-c-input-group__item
|
|
4203
|
+
<div class="pf-v5-c-input-group__item">
|
|
4204
4204
|
<div class="pf-v5-c-select" style="width: 124px">
|
|
4205
4205
|
<span id="-select-name-label" hidden>Choose one</span>
|
|
4206
4206
|
|
|
@@ -4268,8 +4268,8 @@ wrapperTag: div
|
|
|
4268
4268
|
</ul>
|
|
4269
4269
|
</div>
|
|
4270
4270
|
</div>
|
|
4271
|
-
<div class="pf-v5-c-input-group__item">
|
|
4272
|
-
<div class="pf-v5-c-text-input-group"
|
|
4271
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
4272
|
+
<div class="pf-v5-c-text-input-group">
|
|
4273
4273
|
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
4274
4274
|
<span class="pf-v5-c-text-input-group__text">
|
|
4275
4275
|
<span class="pf-v5-c-text-input-group__icon">
|
|
@@ -6497,7 +6497,7 @@ wrapperTag: div
|
|
|
6497
6497
|
aria-label="search filter"
|
|
6498
6498
|
role="group"
|
|
6499
6499
|
>
|
|
6500
|
-
<div class="pf-v5-c-input-group__item
|
|
6500
|
+
<div class="pf-v5-c-input-group__item">
|
|
6501
6501
|
<div class="pf-v5-c-select" style="width: 124px">
|
|
6502
6502
|
<span id="-select-name-label" hidden>Choose one</span>
|
|
6503
6503
|
|
|
@@ -6565,8 +6565,8 @@ wrapperTag: div
|
|
|
6565
6565
|
</ul>
|
|
6566
6566
|
</div>
|
|
6567
6567
|
</div>
|
|
6568
|
-
<div class="pf-v5-c-input-group__item">
|
|
6569
|
-
<div class="pf-v5-c-text-input-group"
|
|
6568
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
6569
|
+
<div class="pf-v5-c-text-input-group">
|
|
6570
6570
|
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
6571
6571
|
<span class="pf-v5-c-text-input-group__text">
|
|
6572
6572
|
<span class="pf-v5-c-text-input-group__icon">
|
|
@@ -703,7 +703,7 @@ wrapperTag: div
|
|
|
703
703
|
aria-label="search filter"
|
|
704
704
|
role="group"
|
|
705
705
|
>
|
|
706
|
-
<div class="pf-v5-c-input-group__item
|
|
706
|
+
<div class="pf-v5-c-input-group__item">
|
|
707
707
|
<div class="pf-v5-c-select" style="width: 124px">
|
|
708
708
|
<span
|
|
709
709
|
id="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
|
|
@@ -774,8 +774,8 @@ wrapperTag: div
|
|
|
774
774
|
</ul>
|
|
775
775
|
</div>
|
|
776
776
|
</div>
|
|
777
|
-
<div class="pf-v5-c-input-group__item">
|
|
778
|
-
<div class="pf-v5-c-text-input-group"
|
|
777
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
778
|
+
<div class="pf-v5-c-text-input-group">
|
|
779
779
|
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
780
780
|
<span class="pf-v5-c-text-input-group__text">
|
|
781
781
|
<span class="pf-v5-c-text-input-group__icon">
|
|
@@ -1044,7 +1044,7 @@ wrapperTag: div
|
|
|
1044
1044
|
aria-label="search filter"
|
|
1045
1045
|
role="group"
|
|
1046
1046
|
>
|
|
1047
|
-
<div class="pf-v5-c-input-group__item
|
|
1047
|
+
<div class="pf-v5-c-input-group__item">
|
|
1048
1048
|
<div class="pf-v5-c-select" style="width: 124px">
|
|
1049
1049
|
<span
|
|
1050
1050
|
id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
|
|
@@ -1115,8 +1115,8 @@ wrapperTag: div
|
|
|
1115
1115
|
</ul>
|
|
1116
1116
|
</div>
|
|
1117
1117
|
</div>
|
|
1118
|
-
<div class="pf-v5-c-input-group__item">
|
|
1119
|
-
<div class="pf-v5-c-text-input-group"
|
|
1118
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
1119
|
+
<div class="pf-v5-c-text-input-group">
|
|
1120
1120
|
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
1121
1121
|
<span class="pf-v5-c-text-input-group__text">
|
|
1122
1122
|
<span class="pf-v5-c-text-input-group__icon">
|
|
@@ -3794,7 +3794,7 @@ wrapperTag: div
|
|
|
3794
3794
|
aria-label="search filter"
|
|
3795
3795
|
role="group"
|
|
3796
3796
|
>
|
|
3797
|
-
<div class="pf-v5-c-input-group__item
|
|
3797
|
+
<div class="pf-v5-c-input-group__item">
|
|
3798
3798
|
<div class="pf-v5-c-select" style="width: 124px">
|
|
3799
3799
|
<span
|
|
3800
3800
|
id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
|
|
@@ -3865,8 +3865,8 @@ wrapperTag: div
|
|
|
3865
3865
|
</ul>
|
|
3866
3866
|
</div>
|
|
3867
3867
|
</div>
|
|
3868
|
-
<div class="pf-v5-c-input-group__item">
|
|
3869
|
-
<div class="pf-v5-c-text-input-group"
|
|
3868
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
3869
|
+
<div class="pf-v5-c-text-input-group">
|
|
3870
3870
|
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
3871
3871
|
<span class="pf-v5-c-text-input-group__text">
|
|
3872
3872
|
<span class="pf-v5-c-text-input-group__icon">
|
|
@@ -6088,9 +6088,9 @@ section: components
|
|
|
6088
6088
|
|
|
6089
6089
|
```
|
|
6090
6090
|
|
|
6091
|
-
###
|
|
6091
|
+
### Tertiary nav
|
|
6092
6092
|
|
|
6093
|
-
```html isFullscreen
|
|
6093
|
+
```html isFullscreen isDeprecated
|
|
6094
6094
|
<div class="pf-v5-c-page" id="nav-legacy-teriary-example">
|
|
6095
6095
|
<div class="pf-v5-c-skip-to-content">
|
|
6096
6096
|
<a
|
|
@@ -973,7 +973,7 @@ wrapperTag: div
|
|
|
973
973
|
aria-label="search filter"
|
|
974
974
|
role="group"
|
|
975
975
|
>
|
|
976
|
-
<div class="pf-v5-c-input-group__item
|
|
976
|
+
<div class="pf-v5-c-input-group__item">
|
|
977
977
|
<div class="pf-v5-c-select" style="width: 124px">
|
|
978
978
|
<span
|
|
979
979
|
id="primary-detail-expanded-example-drawer-toolbar-select-name-label"
|
|
@@ -1052,11 +1052,8 @@ wrapperTag: div
|
|
|
1052
1052
|
</ul>
|
|
1053
1053
|
</div>
|
|
1054
1054
|
</div>
|
|
1055
|
-
<div class="pf-v5-c-input-group__item">
|
|
1056
|
-
<div
|
|
1057
|
-
class="pf-v5-c-text-input-group"
|
|
1058
|
-
style="width: auto"
|
|
1059
|
-
>
|
|
1055
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
1056
|
+
<div class="pf-v5-c-text-input-group">
|
|
1060
1057
|
<div
|
|
1061
1058
|
class="pf-v5-c-text-input-group__main pf-m-icon"
|
|
1062
1059
|
>
|
|
@@ -2962,7 +2959,7 @@ wrapperTag: div
|
|
|
2962
2959
|
aria-label="search filter"
|
|
2963
2960
|
role="group"
|
|
2964
2961
|
>
|
|
2965
|
-
<div class="pf-v5-c-input-group__item
|
|
2962
|
+
<div class="pf-v5-c-input-group__item">
|
|
2966
2963
|
<div class="pf-v5-c-select" style="width: 124px">
|
|
2967
2964
|
<span
|
|
2968
2965
|
id="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
|
|
@@ -3041,11 +3038,8 @@ wrapperTag: div
|
|
|
3041
3038
|
</ul>
|
|
3042
3039
|
</div>
|
|
3043
3040
|
</div>
|
|
3044
|
-
<div class="pf-v5-c-input-group__item">
|
|
3045
|
-
<div
|
|
3046
|
-
class="pf-v5-c-text-input-group"
|
|
3047
|
-
style="width: auto"
|
|
3048
|
-
>
|
|
3041
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
3042
|
+
<div class="pf-v5-c-text-input-group">
|
|
3049
3043
|
<div
|
|
3050
3044
|
class="pf-v5-c-text-input-group__main pf-m-icon"
|
|
3051
3045
|
>
|
|
@@ -6728,7 +6722,7 @@ wrapperTag: div
|
|
|
6728
6722
|
aria-label="search filter"
|
|
6729
6723
|
role="group"
|
|
6730
6724
|
>
|
|
6731
|
-
<div class="pf-v5-c-input-group__item
|
|
6725
|
+
<div class="pf-v5-c-input-group__item">
|
|
6732
6726
|
<div class="pf-v5-c-select" style="width: 124px">
|
|
6733
6727
|
<span
|
|
6734
6728
|
id="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
|
|
@@ -6799,11 +6793,8 @@ wrapperTag: div
|
|
|
6799
6793
|
</ul>
|
|
6800
6794
|
</div>
|
|
6801
6795
|
</div>
|
|
6802
|
-
<div class="pf-v5-c-input-group__item">
|
|
6803
|
-
<div
|
|
6804
|
-
class="pf-v5-c-text-input-group"
|
|
6805
|
-
style="width: auto"
|
|
6806
|
-
>
|
|
6796
|
+
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
6797
|
+
<div class="pf-v5-c-text-input-group">
|
|
6807
6798
|
<div class="pf-v5-c-text-input-group__main pf-m-icon">
|
|
6808
6799
|
<span class="pf-v5-c-text-input-group__text">
|
|
6809
6800
|
<span class="pf-v5-c-text-input-group__icon">
|