@patternfly/patternfly 4.219.0 → 4.219.1
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/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/Card/examples/Card.md +0 -6
- package/docs/components/DatePicker/examples/DatePicker.md +1 -0
- package/docs/components/Dropdown/examples/Dropdown.md +1 -1
- package/docs/components/OptionsMenu/examples/options-menu.md +1 -0
- package/docs/components/SearchInput/examples/SearchInput.md +2 -0
- package/docs/components/Select/examples/Select.md +13 -12
- package/docs/components/Tabs/examples/Tabs.md +0 -25
- package/docs/components/Tooltip/examples/Tooltip.md +0 -7
- 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
|
@@ -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. |
|
|
@@ -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. |
|
|
@@ -615,4 +615,6 @@ cssPrefix: pf-c-search-input
|
|
|
615
615
|
| `.pf-c-search-input__menu-list-item` | `<div>` | Initiates the search input dropdown menu list item. |
|
|
616
616
|
| `.pf-c-search-input__menu-item` | `<div>` | Initiates the search input dropdown menu item. |
|
|
617
617
|
| `.pf-c-search-input__menu-item-text` | `<span>` | Initiates the search input dropdown menu item text. |
|
|
618
|
+
| `.pf-m-top` | `.pf-c-search-input__menu` | Modifies the menu to display above the toggle. |
|
|
619
|
+
| `.pf-m-static` | `.pf-c-search-input__menu` | Modifies the menu to be statically positioned to support custom positioning. |
|
|
618
620
|
| `.pf-m-hint` | `.pf-c-search-input__text-input` | Modifies the text input for hint text styles. |
|
|
@@ -235,18 +235,19 @@ The single select should be used when the user is selecting an option from a lis
|
|
|
235
235
|
|
|
236
236
|
### Usage
|
|
237
237
|
|
|
238
|
-
| Class | Applied to | Outcome
|
|
239
|
-
| ------------------------------ | -------------------- |
|
|
240
|
-
| `.pf-c-select` | `<div>` | Initiates a custom select.
|
|
241
|
-
| `.pf-c-select__toggle` | `<button>` | Initiates a custom toggle.
|
|
242
|
-
| `.pf-c-select__toggle-wrapper` | `<div>` | Initiates a custom select toggle wrapper.
|
|
243
|
-
| `.pf-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown.
|
|
244
|
-
| `.pf-c-select__menu` | `<ul>` | Initiates the custom select dropdown menu.
|
|
245
|
-
| `.pf-c-select__menu-item` | `<li>` | Initiates the items in the custom select dropdown menu.
|
|
246
|
-
| `.pf-c-select__menu-item-icon` | `<i>` | Initiates the selected item icon.
|
|
247
|
-
| `.pf-m-top` | `.pf-c-select` | Modifies the select menu to display above the toggle.
|
|
248
|
-
| `.pf-m-align-right` | `.pf-c-select__menu` | Modifies the select menu to display right aligned to the toggle.
|
|
249
|
-
| `.pf-m-
|
|
238
|
+
| Class | Applied to | Outcome |
|
|
239
|
+
| ------------------------------ | -------------------- | ----------------------------------------------------------------------------------- |
|
|
240
|
+
| `.pf-c-select` | `<div>` | Initiates a custom select. |
|
|
241
|
+
| `.pf-c-select__toggle` | `<button>` | Initiates a custom toggle. |
|
|
242
|
+
| `.pf-c-select__toggle-wrapper` | `<div>` | Initiates a custom select toggle wrapper. |
|
|
243
|
+
| `.pf-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
|
|
244
|
+
| `.pf-c-select__menu` | `<ul>` | Initiates the custom select dropdown menu. |
|
|
245
|
+
| `.pf-c-select__menu-item` | `<li>` | Initiates the items in the custom select dropdown menu. |
|
|
246
|
+
| `.pf-c-select__menu-item-icon` | `<i>` | Initiates the selected item icon. |
|
|
247
|
+
| `.pf-m-top` | `.pf-c-select` | Modifies the select menu to display above the toggle. |
|
|
248
|
+
| `.pf-m-align-right` | `.pf-c-select__menu` | Modifies the select menu to display right aligned to the toggle. |
|
|
249
|
+
| `.pf-m-static` | `.pf-c-select__menu` | Modifies the select menu to be statically positioned to support custom positioning. |
|
|
250
|
+
| `.pf-m-active` | `.pf-c-select` | Forces display of the active state of the toggle. |
|
|
250
251
|
|
|
251
252
|
## States
|
|
252
253
|
|
|
@@ -92,13 +92,6 @@ cssPrefix: pf-c-tabs
|
|
|
92
92
|
|
|
93
93
|
```
|
|
94
94
|
|
|
95
|
-
### Accessibility
|
|
96
|
-
|
|
97
|
-
| Attribute | Applied to | Outcome |
|
|
98
|
-
| ---------------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
|
|
99
|
-
| `disabled` | `button.pf-c-tabs__link` | Indicates that a tabs link is disabled. **Required when disabled** |
|
|
100
|
-
| `aria-disabled="true"` | `a.pf-c-tabs__link.pf-m-disabled`, `.pf-c-tabs__link.pf-m-aria-disabled` | Indicates to assistive technology that a tabs link is disabled. **Required when disabled** |
|
|
101
|
-
|
|
102
95
|
### Usage
|
|
103
96
|
|
|
104
97
|
| Class | Applied to | Outcome |
|
|
@@ -217,13 +210,6 @@ cssPrefix: pf-c-tabs
|
|
|
217
210
|
|
|
218
211
|
```
|
|
219
212
|
|
|
220
|
-
### Accessibility
|
|
221
|
-
|
|
222
|
-
| Attribute | Applied to | Outcome |
|
|
223
|
-
| -------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------- |
|
|
224
|
-
| `disabled` | `.pf-c-tabs__scroll-button` | Indicates that a scroll button is disabled, when at the first or last item of a list. **Required when disabled** |
|
|
225
|
-
| `aria-hidden="true"` | `.pf-c-tabs__scroll-button` | Hides the icon from assistive technologies.**Required when not scrollable** |
|
|
226
|
-
|
|
227
213
|
### Usage
|
|
228
214
|
|
|
229
215
|
| Class | Applied to | Outcome |
|
|
@@ -4386,17 +4372,6 @@ Tabs should be used with the [tab content component](/components/tab-content).
|
|
|
4386
4372
|
|
|
4387
4373
|
Whenever a list of tabs is unique on the current page, it can be used in a `<nav>` element. Cases where the same set of tabs are duplicated in multiple regions on a page (e.g. cards on a dashboard) are less likely to benefit from using the `<nav>` element.
|
|
4388
4374
|
|
|
4389
|
-
### Accessibility
|
|
4390
|
-
|
|
4391
|
-
| Attribute | Applied to | Outcome |
|
|
4392
|
-
| ------------------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4393
|
-
| `aria-label="Descriptive text"` | `nav.pf-c-tabs`, `nav.pf-c-tabs.pf-m-secondary` | Gives the `<nav>` an accessible label. **Required when `.pf-c-tabs` is used with `<nav>`** |
|
|
4394
|
-
| `aria-label="Descriptive text"` | `.pf-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
|
|
4395
|
-
| `disabled` | `button.pf-c-tabs__link` | Indicates that a tabs link is disabled. **Required when disabled** |
|
|
4396
|
-
| `aria-disabled="true"` | `a.pf-c-tabs__link.pf-m-disabled`, `.pf-c-tabs__link.pf-m-aria-disabled` | Indicates to assistive technology that a tabs link is disabled. **Required when disabled** |
|
|
4397
|
-
| `disabled` | `.pf-c-tabs__scroll-button` | Indicates that a scroll button is disable, typically when at the first or last item of a list or scroll buttons are hidden. **Required** |
|
|
4398
|
-
| `aria-expanded="true"` | `.pf-c-tabs__item` | Indicates that the overflow menu tab is expanded. **Required when expanded** |
|
|
4399
|
-
|
|
4400
4375
|
### Usage
|
|
4401
4376
|
|
|
4402
4377
|
| Class | Applied to | Outcome |
|
|
@@ -126,13 +126,6 @@ cssPrefix: pf-c-tooltip
|
|
|
126
126
|
|
|
127
127
|
A tooltip is used to provide contextual information for another component on hover. The tooltip itself is made up of two elements: arrow and content. One of the directional modifiers (`.pf-m-left`, `.pf-m-top`, etc.) is required on the tooltip component.
|
|
128
128
|
|
|
129
|
-
### Accessibility
|
|
130
|
-
|
|
131
|
-
| Attribute | Applied to | Outcome |
|
|
132
|
-
| --------------------------------------------------------------------------------------------------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
133
|
-
| `role="tooltip"` | `.pf-c-tooltip` | Adds a tooltip role to the tooltip component. **Required** |
|
|
134
|
-
| `aria-describedby="[id of .pf-c-tooltip__content]"` or `aria-labelledby="[id of .pf-c-tooltip__content]"` | `[element that triggers the tooltip]` | Makes the contents of the tooltip accessible to assistive technologies by associating the tooltip text with the element that triggers the tooltip. Use `aria-labelledby` if the tooltip provides a label for the element. Use `aria-describedby` if the element already has an accessible label that is different from the tooltip text. **Required** |
|
|
135
|
-
|
|
136
129
|
### Usage
|
|
137
130
|
|
|
138
131
|
| Class | Applied to | Outcome |
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/patternfly",
|
|
3
3
|
"description": "Assets, source, tooling, and content for PatternFly 4",
|
|
4
|
-
"version": "4.219.
|
|
4
|
+
"version": "4.219.1",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"scripts": {
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
"@fortawesome/fontawesome": "^1.1.8",
|
|
35
35
|
"@octokit/rest": "^16.40.1",
|
|
36
36
|
"@patternfly/patternfly-a11y": "4.3.1",
|
|
37
|
-
"@patternfly/react-code-editor": "4.
|
|
38
|
-
"@patternfly/react-core": "4.
|
|
39
|
-
"@patternfly/react-table": "4.
|
|
37
|
+
"@patternfly/react-code-editor": "4.82.26",
|
|
38
|
+
"@patternfly/react-core": "4.250.1",
|
|
39
|
+
"@patternfly/react-table": "4.111.4",
|
|
40
40
|
"@starptech/prettyhtml": "^0.10.0",
|
|
41
41
|
"babel-eslint": "^8.2.3",
|
|
42
42
|
"cheerio": "^1.0.0-rc.3",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"stylelint-scss": "^4.3.0",
|
|
80
80
|
"stylelint-value-no-unknown-custom-properties": "^4.0.0",
|
|
81
81
|
"surge": "^0.21.3",
|
|
82
|
-
"@patternfly/documentation-framework": "1.2.
|
|
82
|
+
"@patternfly/documentation-framework": "1.2.48",
|
|
83
83
|
"unified": "^9.2.0",
|
|
84
84
|
"webpack": "^4.43.0"
|
|
85
85
|
},
|
package/patternfly-no-reset.css
CHANGED
|
@@ -6469,6 +6469,16 @@ html {
|
|
|
6469
6469
|
--pf-c-app-launcher__menu--Top: var(--pf-c-app-launcher--m-top__menu--Top);
|
|
6470
6470
|
transform: translateY(var(--pf-c-app-launcher--m-top__menu--TranslateY));
|
|
6471
6471
|
}
|
|
6472
|
+
.pf-c-app-launcher__menu.pf-m-static {
|
|
6473
|
+
--pf-c-app-launcher--m-top__menu--TranslateY: 0;
|
|
6474
|
+
position: static;
|
|
6475
|
+
top: auto;
|
|
6476
|
+
right: auto;
|
|
6477
|
+
bottom: auto;
|
|
6478
|
+
left: auto;
|
|
6479
|
+
z-index: auto;
|
|
6480
|
+
min-width: min-content;
|
|
6481
|
+
}
|
|
6472
6482
|
|
|
6473
6483
|
.pf-c-app-launcher__menu-search {
|
|
6474
6484
|
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);
|
|
@@ -9696,6 +9706,9 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
9696
9706
|
.pf-c-context-selector__menu.pf-m-static {
|
|
9697
9707
|
position: static;
|
|
9698
9708
|
top: auto;
|
|
9709
|
+
right: auto;
|
|
9710
|
+
bottom: auto;
|
|
9711
|
+
left: auto;
|
|
9699
9712
|
z-index: auto;
|
|
9700
9713
|
min-width: min-content;
|
|
9701
9714
|
}
|
|
@@ -12507,6 +12520,16 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
12507
12520
|
--pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
|
|
12508
12521
|
transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
|
|
12509
12522
|
}
|
|
12523
|
+
.pf-c-date-picker__calendar.pf-m-static {
|
|
12524
|
+
--pf-c-date-picker--m-top__calendar--TranslateY: 0;
|
|
12525
|
+
position: static;
|
|
12526
|
+
top: auto;
|
|
12527
|
+
right: auto;
|
|
12528
|
+
bottom: auto;
|
|
12529
|
+
left: auto;
|
|
12530
|
+
z-index: auto;
|
|
12531
|
+
min-width: min-content;
|
|
12532
|
+
}
|
|
12510
12533
|
|
|
12511
12534
|
:where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
|
|
12512
12535
|
:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
|
|
@@ -14194,8 +14217,12 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
14194
14217
|
box-shadow: var(--pf-c-dropdown__menu--BoxShadow);
|
|
14195
14218
|
}
|
|
14196
14219
|
.pf-c-dropdown__menu.pf-m-static {
|
|
14220
|
+
--pf-c-dropdown--m-top__menu--TranslateY: 0;
|
|
14197
14221
|
position: static;
|
|
14198
14222
|
top: auto;
|
|
14223
|
+
right: auto;
|
|
14224
|
+
bottom: auto;
|
|
14225
|
+
left: auto;
|
|
14199
14226
|
z-index: auto;
|
|
14200
14227
|
min-width: min-content;
|
|
14201
14228
|
}
|
|
@@ -21490,6 +21517,16 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
|
|
|
21490
21517
|
--pf-c-options-menu__menu--Top: var(--pf-c-options-menu--m-top__menu--Top);
|
|
21491
21518
|
transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY));
|
|
21492
21519
|
}
|
|
21520
|
+
.pf-c-options-menu__menu.pf-m-static {
|
|
21521
|
+
--pf-c-options-menu--m-top__menu--TranslateY: 0;
|
|
21522
|
+
position: static;
|
|
21523
|
+
top: auto;
|
|
21524
|
+
right: auto;
|
|
21525
|
+
bottom: auto;
|
|
21526
|
+
left: auto;
|
|
21527
|
+
z-index: auto;
|
|
21528
|
+
min-width: min-content;
|
|
21529
|
+
}
|
|
21493
21530
|
|
|
21494
21531
|
.pf-c-options-menu__menu-item {
|
|
21495
21532
|
display: flex;
|
|
@@ -24279,6 +24316,16 @@ label.pf-c-radio, .pf-c-radio__label,
|
|
|
24279
24316
|
--pf-c-search-input__menu--Top: var(--pf-c-search-input--m-top__menu--Top);
|
|
24280
24317
|
transform: translateY(var(--pf-c-search-input--m-top__menu--TranslateY));
|
|
24281
24318
|
}
|
|
24319
|
+
.pf-c-search-input__menu.pf-m-static {
|
|
24320
|
+
--pf-c-search-input--m-top__menu--TranslateY: 0;
|
|
24321
|
+
position: static;
|
|
24322
|
+
top: auto;
|
|
24323
|
+
right: auto;
|
|
24324
|
+
bottom: auto;
|
|
24325
|
+
left: auto;
|
|
24326
|
+
z-index: auto;
|
|
24327
|
+
min-width: min-content;
|
|
24328
|
+
}
|
|
24282
24329
|
|
|
24283
24330
|
.pf-c-search-input__menu-body {
|
|
24284
24331
|
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);
|
|
@@ -24740,8 +24787,12 @@ label.pf-c-radio, .pf-c-radio__label,
|
|
|
24740
24787
|
transform: translateY(var(--pf-c-select__menu--m-top--TranslateY));
|
|
24741
24788
|
}
|
|
24742
24789
|
.pf-c-select__menu.pf-m-static {
|
|
24790
|
+
--pf-c-select__menu--m-top--TranslateY: 0;
|
|
24743
24791
|
position: static;
|
|
24744
24792
|
top: auto;
|
|
24793
|
+
right: auto;
|
|
24794
|
+
bottom: auto;
|
|
24795
|
+
left: auto;
|
|
24745
24796
|
z-index: auto;
|
|
24746
24797
|
min-width: min-content;
|
|
24747
24798
|
}
|