@patternfly/patternfly 4.219.0 → 4.219.2
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/RELEASE-NOTES.md +18 -0
- package/components/AppLauncher/app-launcher.css +10 -0
- package/components/AppLauncher/app-launcher.scss +12 -0
- package/components/ContextSelector/context-selector.css +3 -0
- package/components/ContextSelector/context-selector.scss +3 -0
- package/components/DatePicker/date-picker.css +10 -0
- package/components/DatePicker/date-picker.scss +12 -0
- package/components/Dropdown/dropdown.css +4 -0
- package/components/Dropdown/dropdown.scss +5 -0
- package/components/OptionsMenu/options-menu.css +10 -0
- package/components/OptionsMenu/options-menu.scss +12 -0
- package/components/SearchInput/search-input.css +10 -0
- package/components/SearchInput/search-input.scss +12 -0
- package/components/Select/select.css +4 -0
- package/components/Select/select.scss +5 -0
- package/docs/components/Accordion/examples/Accordion.md +0 -9
- package/docs/components/Alert/examples/Alert.md +0 -18
- package/docs/components/AppLauncher/examples/application-launcher.md +1 -0
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +0 -1
- package/docs/components/Card/examples/Card.md +0 -6
- package/docs/components/CodeEditor/examples/CodeEditor.md +0 -1
- package/docs/components/DatePicker/examples/DatePicker.md +1 -0
- package/docs/components/Dropdown/examples/Dropdown.md +1 -1
- package/docs/components/DualListSelector/examples/DualListSelector.md +0 -1
- package/docs/components/FormControl/examples/FormControl.md +1 -1
- package/docs/components/LabelGroup/examples/LabelGroup.md +3 -4
- package/docs/components/Masthead/examples/masthead.md +0 -1
- package/docs/components/MenuToggle/examples/MenuToggle.md +0 -1
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +0 -1
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +0 -1
- package/docs/components/OptionsMenu/examples/options-menu.md +1 -0
- package/docs/components/Page/examples/Page.css +11 -0
- package/docs/components/Page/examples/Page.md +72 -39
- package/docs/components/Panel/examples/Panel.md +0 -1
- package/docs/components/SearchInput/examples/SearchInput.md +2 -0
- package/docs/components/Select/examples/Select.md +15 -14
- package/docs/components/Slider/examples/Slider.md +0 -1
- package/docs/components/Tabs/examples/Tabs.md +0 -25
- package/docs/components/Tooltip/examples/Tooltip.md +0 -7
- package/docs/components/TreeView/examples/TreeView.md +0 -1
- package/docs/demos/Masthead/examples/Masthead.md +0 -1
- package/package.json +5 -5
- package/patternfly-no-reset.css +51 -0
- package/patternfly.css +51 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/RELEASE-NOTES.md
CHANGED
|
@@ -3,6 +3,24 @@ id: Release notes
|
|
|
3
3
|
section: developer-resources
|
|
4
4
|
releaseNoteTOC: true
|
|
5
5
|
---
|
|
6
|
+
## 2022.14 release notes (2022-10-28)
|
|
7
|
+
Packages released:
|
|
8
|
+
- [@patternfly/patternfly@v4.219.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.219.2)
|
|
9
|
+
|
|
10
|
+
### Components
|
|
11
|
+
- **Context selector:** Updated static props ([#5191](https://github.com/patternfly/patternfly/pull/5191))
|
|
12
|
+
- **Dropdown:** Disabled top positioning when using static variation ([#5189](https://github.com/patternfly/patternfly/pull/5189))
|
|
13
|
+
- **Progress:** Added helper text ([#5161](https://github.com/patternfly/patternfly/pull/5161))
|
|
14
|
+
|
|
15
|
+
### Other
|
|
16
|
+
- **Docs:**
|
|
17
|
+
- Removed a11y section from example pages ([#5167](https://github.com/patternfly/patternfly/pull/5167))
|
|
18
|
+
- Promoted 2022.14 beta candidates ([#5179](https://github.com/patternfly/patternfly/pull/5179))
|
|
19
|
+
- Updated page component example content, made text readable ([#5187](https://github.com/patternfly/patternfly/pull/5187))
|
|
20
|
+
- **Icons:** Added open-drawer-right pficon ([#5160](https://github.com/patternfly/patternfly/pull/5160))
|
|
21
|
+
- **Build:** Created new extensions github workflow ([#5186](https://github.com/patternfly/patternfly/pull/5186))
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## 2022.13 release notes (2022-10-06)
|
|
7
25
|
Packages released:
|
|
8
26
|
- [@patternfly/patternfly@v4.217.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.217.1)
|
|
@@ -113,6 +113,16 @@
|
|
|
113
113
|
--pf-c-app-launcher__menu--Top: var(--pf-c-app-launcher--m-top__menu--Top);
|
|
114
114
|
transform: translateY(var(--pf-c-app-launcher--m-top__menu--TranslateY));
|
|
115
115
|
}
|
|
116
|
+
.pf-c-app-launcher__menu.pf-m-static {
|
|
117
|
+
--pf-c-app-launcher--m-top__menu--TranslateY: 0;
|
|
118
|
+
position: static;
|
|
119
|
+
top: auto;
|
|
120
|
+
right: auto;
|
|
121
|
+
bottom: auto;
|
|
122
|
+
left: auto;
|
|
123
|
+
z-index: auto;
|
|
124
|
+
min-width: min-content;
|
|
125
|
+
}
|
|
116
126
|
|
|
117
127
|
.pf-c-app-launcher__menu-search {
|
|
118
128
|
padding: var(--pf-c-app-launcher__menu-search--PaddingTop) var(--pf-c-app-launcher__menu-search--PaddingRight) var(--pf-c-app-launcher__menu-search--PaddingBottom) var(--pf-c-app-launcher__menu-search--PaddingLeft);
|
|
@@ -146,6 +146,18 @@
|
|
|
146
146
|
|
|
147
147
|
transform: translateY(var(--pf-c-app-launcher--m-top__menu--TranslateY));
|
|
148
148
|
}
|
|
149
|
+
|
|
150
|
+
&.pf-m-static {
|
|
151
|
+
--pf-c-app-launcher--m-top__menu--TranslateY: 0;
|
|
152
|
+
|
|
153
|
+
position: static;
|
|
154
|
+
top: auto;
|
|
155
|
+
right: auto;
|
|
156
|
+
bottom: auto;
|
|
157
|
+
left: auto;
|
|
158
|
+
z-index: auto;
|
|
159
|
+
min-width: min-content;
|
|
160
|
+
}
|
|
149
161
|
}
|
|
150
162
|
|
|
151
163
|
.pf-c-app-launcher__menu-search {
|
|
@@ -50,6 +50,16 @@
|
|
|
50
50
|
--pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
|
|
51
51
|
transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
|
|
52
52
|
}
|
|
53
|
+
.pf-c-date-picker__calendar.pf-m-static {
|
|
54
|
+
--pf-c-date-picker--m-top__calendar--TranslateY: 0;
|
|
55
|
+
position: static;
|
|
56
|
+
top: auto;
|
|
57
|
+
right: auto;
|
|
58
|
+
bottom: auto;
|
|
59
|
+
left: auto;
|
|
60
|
+
z-index: auto;
|
|
61
|
+
min-width: min-content;
|
|
62
|
+
}
|
|
53
63
|
|
|
54
64
|
:where(.pf-theme-dark) .pf-c-date-picker {
|
|
55
65
|
--pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
|
@@ -56,6 +56,18 @@
|
|
|
56
56
|
|
|
57
57
|
transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
|
|
58
58
|
}
|
|
59
|
+
|
|
60
|
+
&.pf-m-static {
|
|
61
|
+
--pf-c-date-picker--m-top__calendar--TranslateY: 0;
|
|
62
|
+
|
|
63
|
+
position: static;
|
|
64
|
+
top: auto;
|
|
65
|
+
right: auto;
|
|
66
|
+
bottom: auto;
|
|
67
|
+
left: auto;
|
|
68
|
+
z-index: auto;
|
|
69
|
+
min-width: min-content;
|
|
70
|
+
}
|
|
59
71
|
}
|
|
60
72
|
|
|
61
73
|
// stylelint-disable no-invalid-position-at-import-rule
|
|
@@ -470,8 +470,12 @@
|
|
|
470
470
|
box-shadow: var(--pf-c-dropdown__menu--BoxShadow);
|
|
471
471
|
}
|
|
472
472
|
.pf-c-dropdown__menu.pf-m-static {
|
|
473
|
+
--pf-c-dropdown--m-top__menu--TranslateY: 0;
|
|
473
474
|
position: static;
|
|
474
475
|
top: auto;
|
|
476
|
+
right: auto;
|
|
477
|
+
bottom: auto;
|
|
478
|
+
left: auto;
|
|
475
479
|
z-index: auto;
|
|
476
480
|
min-width: min-content;
|
|
477
481
|
}
|
|
@@ -635,8 +635,13 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
|
|
|
635
635
|
box-shadow: var(--pf-c-dropdown__menu--BoxShadow);
|
|
636
636
|
|
|
637
637
|
&.pf-m-static {
|
|
638
|
+
--pf-c-dropdown--m-top__menu--TranslateY: 0;
|
|
639
|
+
|
|
638
640
|
position: static;
|
|
639
641
|
top: auto;
|
|
642
|
+
right: auto;
|
|
643
|
+
bottom: auto;
|
|
644
|
+
left: auto;
|
|
640
645
|
z-index: auto;
|
|
641
646
|
min-width: min-content;
|
|
642
647
|
}
|
|
@@ -198,6 +198,16 @@
|
|
|
198
198
|
--pf-c-options-menu__menu--Top: var(--pf-c-options-menu--m-top__menu--Top);
|
|
199
199
|
transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY));
|
|
200
200
|
}
|
|
201
|
+
.pf-c-options-menu__menu.pf-m-static {
|
|
202
|
+
--pf-c-options-menu--m-top__menu--TranslateY: 0;
|
|
203
|
+
position: static;
|
|
204
|
+
top: auto;
|
|
205
|
+
right: auto;
|
|
206
|
+
bottom: auto;
|
|
207
|
+
left: auto;
|
|
208
|
+
z-index: auto;
|
|
209
|
+
min-width: min-content;
|
|
210
|
+
}
|
|
201
211
|
|
|
202
212
|
.pf-c-options-menu__menu-item {
|
|
203
213
|
display: flex;
|
|
@@ -248,6 +248,18 @@
|
|
|
248
248
|
|
|
249
249
|
transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY));
|
|
250
250
|
}
|
|
251
|
+
|
|
252
|
+
&.pf-m-static {
|
|
253
|
+
--pf-c-options-menu--m-top__menu--TranslateY: 0;
|
|
254
|
+
|
|
255
|
+
position: static;
|
|
256
|
+
top: auto;
|
|
257
|
+
right: auto;
|
|
258
|
+
bottom: auto;
|
|
259
|
+
left: auto;
|
|
260
|
+
z-index: auto;
|
|
261
|
+
min-width: min-content;
|
|
262
|
+
}
|
|
251
263
|
}
|
|
252
264
|
|
|
253
265
|
.pf-c-options-menu__menu-item {
|
|
@@ -143,6 +143,16 @@
|
|
|
143
143
|
--pf-c-search-input__menu--Top: var(--pf-c-search-input--m-top__menu--Top);
|
|
144
144
|
transform: translateY(var(--pf-c-search-input--m-top__menu--TranslateY));
|
|
145
145
|
}
|
|
146
|
+
.pf-c-search-input__menu.pf-m-static {
|
|
147
|
+
--pf-c-search-input--m-top__menu--TranslateY: 0;
|
|
148
|
+
position: static;
|
|
149
|
+
top: auto;
|
|
150
|
+
right: auto;
|
|
151
|
+
bottom: auto;
|
|
152
|
+
left: auto;
|
|
153
|
+
z-index: auto;
|
|
154
|
+
min-width: min-content;
|
|
155
|
+
}
|
|
146
156
|
|
|
147
157
|
.pf-c-search-input__menu-body {
|
|
148
158
|
padding: var(--pf-c-search-input__menu-body--PaddingTop) var(--pf-c-search-input__menu-body--PaddingRight) var(--pf-c-search-input__menu-body--PaddingBottom) var(--pf-c-search-input__menu-body--PaddingLeft);
|
|
@@ -170,6 +170,18 @@
|
|
|
170
170
|
|
|
171
171
|
transform: translateY(var(--pf-c-search-input--m-top__menu--TranslateY));
|
|
172
172
|
}
|
|
173
|
+
|
|
174
|
+
&.pf-m-static {
|
|
175
|
+
--pf-c-search-input--m-top__menu--TranslateY: 0;
|
|
176
|
+
|
|
177
|
+
position: static;
|
|
178
|
+
top: auto;
|
|
179
|
+
right: auto;
|
|
180
|
+
bottom: auto;
|
|
181
|
+
left: auto;
|
|
182
|
+
z-index: auto;
|
|
183
|
+
min-width: min-content;
|
|
184
|
+
}
|
|
173
185
|
}
|
|
174
186
|
|
|
175
187
|
.pf-c-search-input__menu-body {
|
|
@@ -390,8 +390,12 @@
|
|
|
390
390
|
transform: translateY(var(--pf-c-select__menu--m-top--TranslateY));
|
|
391
391
|
}
|
|
392
392
|
.pf-c-select__menu.pf-m-static {
|
|
393
|
+
--pf-c-select__menu--m-top--TranslateY: 0;
|
|
393
394
|
position: static;
|
|
394
395
|
top: auto;
|
|
396
|
+
right: auto;
|
|
397
|
+
bottom: auto;
|
|
398
|
+
left: auto;
|
|
395
399
|
z-index: auto;
|
|
396
400
|
min-width: min-content;
|
|
397
401
|
}
|
|
@@ -434,15 +434,6 @@ In these examples `.pf-c-accordion` uses `<div>`, `.pf-c-accordion__toggle` uses
|
|
|
434
434
|
Another variation is using the definition list:
|
|
435
435
|
In these examples `.pf-c-accordion` uses `<dl>`, `.pf-c-accordion__toggle` uses `<dt><button>`, and `.pf-c-accordion__expanded-content` uses `<dd>`.
|
|
436
436
|
|
|
437
|
-
### Accessibility
|
|
438
|
-
|
|
439
|
-
| Attribute | Applied to | Outcome |
|
|
440
|
-
| ----------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
|
441
|
-
| `aria-expanded="false"` | `.pf-c-accordion__toggle` | Indicates that the expanded content element is hidden. **Required** |
|
|
442
|
-
| `aria-expanded="true"` | `.pf-c-accordion__toggle` | Indicates that the expanded content element is visible. **Required** |
|
|
443
|
-
| `hidden` | `.pf-c-accordion__expanded-content` | Indicates that the expanded content element is hidden. Use with `aria-expanded="false"` **Required** |
|
|
444
|
-
| `aria-hidden="true"` | `.pf-c-accordion__toggle-icon` | Hides the icon from assistive technologies.**Required** |
|
|
445
|
-
|
|
446
437
|
### Usage
|
|
447
438
|
|
|
448
439
|
| Class | Applied to | Outcome |
|
|
@@ -581,24 +581,6 @@ cssPrefix: pf-c-alert
|
|
|
581
581
|
|
|
582
582
|
Add a modifier class to the default alert to change the color: `.pf-m-success`, `.pf-m-danger`, `.pf-m-warning`, or `.pf-m-info`.
|
|
583
583
|
|
|
584
|
-
### Accessibility
|
|
585
|
-
|
|
586
|
-
| Attribute | Applied to | Outcome |
|
|
587
|
-
| ------------------------------------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
|
588
|
-
| `aria-label="Default alert"` | `.pf-c-alert` | Indicates the default alert. |
|
|
589
|
-
| `aria-label="Success alert"` | `.pf-c-alert` | Indicates the success alert. |
|
|
590
|
-
| `aria-label="Danger alert"` | `.pf-c-alert` | Indicates the danger alert. |
|
|
591
|
-
| `aria-label="Warning alert"` | `.pf-c-alert` | Indicates the warning alert. |
|
|
592
|
-
| `aria-label="Information alert"` | `.pf-c-alert` | Indicates the information alert. |
|
|
593
|
-
| `aria-label="Close success alert: Success alert title"` | `.pf-c-button.pf-m-plain` | Indicates the close button. Please provide descriptive text to ensure assistive technologies clearly state which alert is being closed. |
|
|
594
|
-
| `aria-hidden="true"` | `.pf-c-alert__icon <i>` | Hides icon for assistive technologies. **Required** |
|
|
595
|
-
| `aria-expanded="true"` | `.pf-c-alert__toggle` | Indicates that the expandable alert description is visible. **Required for expandable alerts** |
|
|
596
|
-
| `aria-expanded="false"` | `.pf-c-alert__toggle` | Indicates that the expandable alert description is hidden. **Required for expandable alerts** |
|
|
597
|
-
|
|
598
|
-
| Class | Applied to | Outcome |
|
|
599
|
-
| ------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
|
|
600
|
-
| `.pf-screen-reader` | `.pf-c-alert__title <span>` | Content that is visually hidden but accessible to assistive technologies. This should state the type of alert. **Required** |
|
|
601
|
-
|
|
602
584
|
### Usage
|
|
603
585
|
|
|
604
586
|
| Class | Applied to | Outcome |
|
|
@@ -682,6 +682,7 @@ cssPrefix: pf-c-app-launcher
|
|
|
682
682
|
| `.pf-m-expanded` | `.pf-c-app-launcher` | Modifies for the expanded state. |
|
|
683
683
|
| `.pf-m-top` | `.pf-c-app-launcher` | Modifies to display the menu above the toggle. |
|
|
684
684
|
| `.pf-m-align-right` | `.pf-c-app-launcher__menu` | Modifies to display the menu aligned to the right edge of the toggle. |
|
|
685
|
+
| `.pf-m-static` | `.pf-c-app-launcher__menu` | Modifies to position the menu statically to support custom positioning. |
|
|
685
686
|
| `.pf-m-disabled` | `a.pf-c-app-launcher__menu-item` | Modifies to display the menu item as disabled. |
|
|
686
687
|
| `.pf-m-external` | `.pf-c-app-launcher__menu-item` | Modifies to display the menu item as having an external link icon on hover/focus. |
|
|
687
688
|
| `.pf-m-favorite` | `.pf-c-app-launcher__menu-wrapper` | Modifies wrapper to indicate that the item row has been favorited. |
|
|
@@ -887,12 +887,6 @@ cssPrefix: pf-c-card
|
|
|
887
887
|
|
|
888
888
|
A card is a generic rectangular container that can be used to build other components. Use a default card for regular page content and the compact variation for dashboard or small cards.
|
|
889
889
|
|
|
890
|
-
### Accessibility
|
|
891
|
-
|
|
892
|
-
| Attribute | Applied to | Outcome |
|
|
893
|
-
| -------------- | ---------------------------- | ------------------------------------------------------------------------------------------------ |
|
|
894
|
-
| `tabindex="0"` | `.pf-c-card.pf-m-selectable` | Inserts the selectable card into the tab order of the page so that it is focusable. **Required** |
|
|
895
|
-
|
|
896
890
|
### Usage
|
|
897
891
|
|
|
898
892
|
| Class | Applied | Outcome |
|
|
@@ -192,3 +192,4 @@ cssPrefix: pf-c-date-picker
|
|
|
192
192
|
| `.pf-m-top` | `.pf-c-date-picker` | Modifies to display the calendar above the date picker. |
|
|
193
193
|
| `.pf-m-error` | `.pf-c-date-picker__helper-text` | Modifies the helper text for the invalid/error state. |
|
|
194
194
|
| `.pf-m-align-right` | `.pf-c-date-picker__calendar` | Modifies the calendar to align the calendar to the right edge of the date picker. |
|
|
195
|
+
| `.pf-m-static` | `.pf-c-date-picker__calendar` | Modifies the calendar to be statically positioned to support custom positioning. |
|
|
@@ -2093,6 +2093,7 @@ The dropdown menu can contain either links or buttons, depending on the expected
|
|
|
2093
2093
|
| `.pf-m-top` | `.pf-c-dropdown` | Modifies to display the menu above the toggle. |
|
|
2094
2094
|
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-dropdown__menu` | Modifies to display the menu aligned to the left edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
2095
2095
|
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-dropdown__menu` | Modifies to display the menu aligned to the right edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
2096
|
+
| `.pf-m-static` | `.pf-c-dropdown__menu` | Modifies a dropdown menu to be statically positioned to support custom positioning. |
|
|
2096
2097
|
| `.pf-m-split-button` | `.pf-c-dropdown__toggle` | Modifies the dropdown toggle area to allow for interactive elements. |
|
|
2097
2098
|
| `.pf-m-action` | `.pf-c-dropdown__toggle.pf-m-split-button` | Modifies the dropdown toggle for when an action is placed beside a toggle button in a split button dropdown. |
|
|
2098
2099
|
| `.pf-m-text` | `.pf-c-dropdown__menu-item` | Modifies a menu item to be non-interactive text. |
|
|
@@ -2106,4 +2107,3 @@ The dropdown menu can contain either links or buttons, depending on the expected
|
|
|
2106
2107
|
| `.pf-m-icon` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding an icon. |
|
|
2107
2108
|
| `.pf-m-active` | `.pf-c-dropdown__toggle` | Modifies the dropdown menu toggle for the active state. |
|
|
2108
2109
|
| `.pf-m-description` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding a description. |
|
|
2109
|
-
| `.pf-m-static` | `.pf-c-dropdown__menu` | Modifies a dropdown menu for popper placement support. |
|
|
@@ -348,7 +348,7 @@ cssPrefix: pf-c-form-control
|
|
|
348
348
|
|
|
349
349
|
**Note:** The icons for the success, invalid, calendar, etc varations in form control elemements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `.pf-m-icon-sprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
|
|
350
350
|
|
|
351
|
-
```html
|
|
351
|
+
```html
|
|
352
352
|
<input
|
|
353
353
|
class="pf-c-form-control pf-m-success pf-m-icon-sprite"
|
|
354
354
|
type="text"
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: 'Label group'
|
|
3
|
-
beta: true
|
|
4
3
|
section: components
|
|
5
4
|
cssPrefix: pf-c-label-group
|
|
6
5
|
---## Examples
|
|
@@ -611,7 +610,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
611
610
|
|
|
612
611
|
### Editable labels, dynamic label group
|
|
613
612
|
|
|
614
|
-
```html
|
|
613
|
+
```html isBeta
|
|
615
614
|
<div class="pf-c-label-group pf-m-editable">
|
|
616
615
|
<div class="pf-c-label-group__main">
|
|
617
616
|
<ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
|
|
@@ -694,7 +693,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
694
693
|
|
|
695
694
|
### Editable labels, label active, dynamic label group
|
|
696
695
|
|
|
697
|
-
```html
|
|
696
|
+
```html isBeta
|
|
698
697
|
<div class="pf-c-label-group pf-m-editable">
|
|
699
698
|
<div class="pf-c-label-group__main">
|
|
700
699
|
<ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
|
|
@@ -842,7 +841,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
|
|
|
842
841
|
|
|
843
842
|
### Mixed labels (static / editable), dynamic label group
|
|
844
843
|
|
|
845
|
-
```html
|
|
844
|
+
```html isBeta
|
|
846
845
|
<div class="pf-c-label-group pf-m-editable">
|
|
847
846
|
<div class="pf-c-label-group__main">
|
|
848
847
|
<ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
|
|
@@ -747,6 +747,7 @@ _Note:_ The attribute `aria-selected="true"` should be set programmatically to t
|
|
|
747
747
|
| `.pf-m-top` | `.pf-c-options-menu` | Modifies to display the menu above the toggle. |
|
|
748
748
|
| `.pf-m-align-right` | `.pf-c-options-menu__menu` | Modifies to display the menu aligned to the right edge of the toggle |
|
|
749
749
|
| `.pf-m-expanded` | `.pf-c-options-menu` | Modifies for the expanded state. |
|
|
750
|
+
| `.pf-m-static` | `.pf-c-options-menu__menu` | Modifies the menu to be statically positioned to support custom positioning. |
|
|
750
751
|
| `.pf-m-plain` | `.pf-c-options-menu__toggle` | Modifies to display the toggle with no border. **Note:** Can be combined with `.pf-m-text` to create a normal text toggle with no border. |
|
|
751
752
|
| `.pf-m-disabled` | `.pf-c-options-menu__toggle` | Modifies to display the options menu toggle as disabled. This applies to `pf-c-options-menu__toggle` and should not be used in lieu of the `disabled` attribute on `pf-c-options-menu__toggle`. When this is used, `disabled` should also be added to any form elements in `.pf-c-options-menu__toggle` |
|
|
752
753
|
| `.pf-m-text` | `.pf-c-options-menu__toggle` | For use when the `.pf-c-options-menu__toggle` is a `<div>` or some non-interactive elment, and you're using a custom `.pf-c-options-menu__toggle-button` to toggle the options menu. |
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
.ws-core-c-page :is(.pf-c-page__sidebar, .pf-c-page__main-subnav) {
|
|
2
|
+
color: var(--pf-global--Color--light-100);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.ws-core-c-page .pf-c-page__main-section.pf-m-dark-200 {
|
|
6
|
+
color: var(--pf-global--Color--dark-100);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
#ws-core-c-page-with-or-without-fill .ws-preview-html {
|
|
10
|
+
height: 500px;
|
|
11
|
+
}
|
|
@@ -3,7 +3,9 @@ id: Page
|
|
|
3
3
|
section: components
|
|
4
4
|
cssPrefix: pf-c-page
|
|
5
5
|
wrapperTag: div
|
|
6
|
-
|
|
6
|
+
---import './Page.css'
|
|
7
|
+
|
|
8
|
+
## Examples
|
|
7
9
|
|
|
8
10
|
### Vertical nav
|
|
9
11
|
|
|
@@ -17,13 +19,28 @@ wrapperTag: div
|
|
|
17
19
|
<div class="pf-c-page__header-tools">header-tools</div>
|
|
18
20
|
</header>
|
|
19
21
|
<div class="pf-c-page__sidebar">
|
|
20
|
-
<div class="pf-c-page__sidebar-body">
|
|
22
|
+
<div class="pf-c-page__sidebar-body">Navigation</div>
|
|
21
23
|
</div>
|
|
22
24
|
<main class="pf-c-page__main" tabindex="-1">
|
|
23
|
-
<section class="pf-c-page__main-section pf-m-dark-100"
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
<section class="pf-c-page__main-section pf-m-dark-100">
|
|
26
|
+
This
|
|
27
|
+
<code>.pf-c-page__main-section</code> uses
|
|
28
|
+
<code>.pf-m-dark-100</code>.
|
|
29
|
+
</section>
|
|
30
|
+
<section class="pf-c-page__main-section pf-m-dark-200">
|
|
31
|
+
This
|
|
32
|
+
<code>.pf-c-page__main-section</code> uses
|
|
33
|
+
<code>.pf-m-dark-200</code>.
|
|
34
|
+
</section>
|
|
35
|
+
<section class="pf-c-page__main-section pf-m-light">
|
|
36
|
+
This
|
|
37
|
+
<code>.pf-c-page__main-section</code> uses
|
|
38
|
+
<code>.pf-m-light</code>.
|
|
39
|
+
</section>
|
|
40
|
+
<section class="pf-c-page__main-section">
|
|
41
|
+
This is a default
|
|
42
|
+
<code>.pf-c-page__main-section</code>.
|
|
43
|
+
</section>
|
|
27
44
|
</main>
|
|
28
45
|
</div>
|
|
29
46
|
|
|
@@ -37,7 +54,7 @@ wrapperTag: div
|
|
|
37
54
|
<div class="pf-c-page__header-brand">
|
|
38
55
|
<a href="#" class="pf-c-page__header-brand-link">Logo</a>
|
|
39
56
|
</div>
|
|
40
|
-
<div class="pf-c-page__header-nav">
|
|
57
|
+
<div class="pf-c-page__header-nav">Navigation</div>
|
|
41
58
|
<div class="pf-c-page__header-tools">header-tools</div>
|
|
42
59
|
</header>
|
|
43
60
|
<main class="pf-c-page__main" tabindex="-1">
|
|
@@ -58,17 +75,19 @@ wrapperTag: div
|
|
|
58
75
|
<div class="pf-c-page__header-brand">
|
|
59
76
|
<a href="#" class="pf-c-page__header-brand-link">Logo</a>
|
|
60
77
|
</div>
|
|
61
|
-
<div class="pf-c-page__header-nav">
|
|
78
|
+
<div class="pf-c-page__header-nav">Navigation</div>
|
|
62
79
|
<div class="pf-c-page__header-tools">header-tools</div>
|
|
63
80
|
</header>
|
|
64
81
|
<main class="pf-c-page__main" tabindex="-1">
|
|
65
|
-
<section class="pf-c-page__main-section pf-m-light"
|
|
66
|
-
<section
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
82
|
+
<section class="pf-c-page__main-section pf-m-light">A regular page section.</section>
|
|
83
|
+
<section class="pf-c-page__main-section pf-m-fill">
|
|
84
|
+
This section uses
|
|
85
|
+
<code>.pf-m-fill</code> to fill the available space.
|
|
86
|
+
</section>
|
|
87
|
+
<section class="pf-c-page__main-section pf-m-light pf-m-no-fill">
|
|
88
|
+
This section uses
|
|
89
|
+
<code>.pf-m-no-fill</code> to not fill the available space.
|
|
90
|
+
</section>
|
|
72
91
|
</main>
|
|
73
92
|
</div>
|
|
74
93
|
|
|
@@ -86,18 +105,24 @@ wrapperTag: div
|
|
|
86
105
|
<div class="pf-c-page__header-tools">header-tools</div>
|
|
87
106
|
</header>
|
|
88
107
|
<div class="pf-c-page__sidebar">
|
|
89
|
-
<div class="pf-c-page__sidebar-body">
|
|
108
|
+
<div class="pf-c-page__sidebar-body">Navigation</div>
|
|
90
109
|
</div>
|
|
91
110
|
<main class="pf-c-page__main" tabindex="-1">
|
|
92
|
-
<section
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
111
|
+
<section class="pf-c-page__main-section">
|
|
112
|
+
This
|
|
113
|
+
<code>.pf-c-page__main-section</code> has default padding.
|
|
114
|
+
</section>
|
|
115
|
+
<section class="pf-c-page__main-section pf-m-no-padding pf-m-light">
|
|
116
|
+
This
|
|
117
|
+
<code>.pf-c-page__main-section</code> uses
|
|
118
|
+
<code>.pf-m-no-padding</code> to remove all padding.
|
|
119
|
+
</section>
|
|
120
|
+
<section class="pf-c-page__main-section pf-m-no-padding pf-m-padding-on-md">
|
|
121
|
+
This
|
|
122
|
+
<code>.pf-c-page__main-section</code> uses
|
|
123
|
+
<code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
|
|
124
|
+
<code>md</code> breakpoint.
|
|
125
|
+
</section>
|
|
101
126
|
</main>
|
|
102
127
|
</div>
|
|
103
128
|
|
|
@@ -115,22 +140,30 @@ wrapperTag: div
|
|
|
115
140
|
<div class="pf-c-page__header-tools">header-tools</div>
|
|
116
141
|
</header>
|
|
117
142
|
<div class="pf-c-page__sidebar">
|
|
118
|
-
<div class="pf-c-page__sidebar-body">
|
|
143
|
+
<div class="pf-c-page__sidebar-body">Navigation</div>
|
|
119
144
|
</div>
|
|
120
145
|
<main class="pf-c-page__main" tabindex="-1">
|
|
121
|
-
<section
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
<section
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
<section
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
<
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
146
|
+
<section class="pf-c-page__main-subnav">
|
|
147
|
+
<code>.pf-c-page__main-subnav</code> for horizontal subnav navigation
|
|
148
|
+
</section>
|
|
149
|
+
<section class="pf-c-page__main-nav">
|
|
150
|
+
<code>.pf-c-page__main-nav</code> for tertiary navigation
|
|
151
|
+
</section>
|
|
152
|
+
<section class="pf-c-page__main-tabs">
|
|
153
|
+
<code>.pf-c-page__main-tabs</code> for tabs
|
|
154
|
+
</section>
|
|
155
|
+
<div class="pf-c-page__main-group">
|
|
156
|
+
<code>.pf-c-page__main-group</code> for a group of page sections
|
|
157
|
+
</div>
|
|
158
|
+
<section class="pf-c-page__main-breadcrumb">
|
|
159
|
+
<code>.pf-c-page__main-breadcrumb</code> for breadcrumbs
|
|
160
|
+
</section>
|
|
161
|
+
<section class="pf-c-page__main-section">
|
|
162
|
+
<code>.pf-c-page__main-section</code> for main sections
|
|
163
|
+
</section>
|
|
164
|
+
<section class="pf-c-page__main-wizard">
|
|
165
|
+
<code>.pf-c-page__main-wizard</code> for wizards
|
|
166
|
+
</section>
|
|
134
167
|
</main>
|
|
135
168
|
</div>
|
|
136
169
|
|