@patternfly/patternfly 4.218.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/Progress/progress.css +7 -0
- package/components/Progress/progress.scss +7 -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/Progress/examples/Progress.md +33 -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 +58 -0
- package/patternfly.css +58 -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 {
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
--pf-c-progress__bar--before--Opacity: .2;
|
|
10
10
|
--pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
|
|
11
11
|
--pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
|
|
12
|
+
--pf-c-progress__helper-text--MarginTop: calc(var(--pf-global--spacer--xs) - var(--pf-c-progress--GridGap));
|
|
12
13
|
--pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100);
|
|
13
14
|
--pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100);
|
|
14
15
|
--pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100);
|
|
@@ -156,6 +157,12 @@
|
|
|
156
157
|
background-color: var(--pf-c-progress__indicator--BackgroundColor);
|
|
157
158
|
}
|
|
158
159
|
|
|
160
|
+
.pf-c-progress__helper-text {
|
|
161
|
+
grid-column: 1/3;
|
|
162
|
+
grid-row: 3/4;
|
|
163
|
+
margin-top: var(--pf-c-progress__helper-text--MarginTop);
|
|
164
|
+
}
|
|
165
|
+
|
|
159
166
|
:where(.pf-theme-dark) .pf-c-progress {
|
|
160
167
|
--pf-c-progress--m-inside__measure--Color: var(--pf-global--palette--black-900);
|
|
161
168
|
--pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--palette--black-900);
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
--pf-c-progress__bar--before--Opacity: .2; // one-off change in opacity to allow progress bar to automatically coordinate with the indicator color
|
|
13
13
|
--pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
|
|
14
14
|
--pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
|
|
15
|
+
--pf-c-progress__helper-text--MarginTop: calc(var(--pf-global--spacer--xs) - var(--pf-c-progress--GridGap));
|
|
15
16
|
|
|
16
17
|
// Modifier variables
|
|
17
18
|
--pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100);
|
|
@@ -201,6 +202,12 @@
|
|
|
201
202
|
background-color: var(--pf-c-progress__indicator--BackgroundColor);
|
|
202
203
|
}
|
|
203
204
|
|
|
205
|
+
.pf-c-progress__helper-text {
|
|
206
|
+
grid-column: 1 / 3;
|
|
207
|
+
grid-row: 3 / 4;
|
|
208
|
+
margin-top: var(--pf-c-progress__helper-text--MarginTop);
|
|
209
|
+
}
|
|
210
|
+
|
|
204
211
|
// stylelint-disable no-invalid-position-at-import-rule
|
|
205
212
|
@import "themes/dark/progress";
|
|
206
213
|
|
|
@@ -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. |
|
|
@@ -586,6 +586,38 @@ cssPrefix: pf-c-progress
|
|
|
586
586
|
|
|
587
587
|
```
|
|
588
588
|
|
|
589
|
+
### Helper text
|
|
590
|
+
|
|
591
|
+
```html
|
|
592
|
+
<div class="pf-c-progress" id="progress-helper-text-example">
|
|
593
|
+
<div
|
|
594
|
+
class="pf-c-progress__description"
|
|
595
|
+
id="progress-helper-text-example-description"
|
|
596
|
+
>Title</div>
|
|
597
|
+
<div class="pf-c-progress__status" aria-hidden="true">
|
|
598
|
+
<span class="pf-c-progress__measure">33%</span>
|
|
599
|
+
</div>
|
|
600
|
+
<div
|
|
601
|
+
class="pf-c-progress__bar"
|
|
602
|
+
role="progressbar"
|
|
603
|
+
aria-valuemin="0"
|
|
604
|
+
aria-valuemax="100"
|
|
605
|
+
aria-valuenow="33"
|
|
606
|
+
aria-labelledby="progress-helper-text-example-description"
|
|
607
|
+
>
|
|
608
|
+
<div class="pf-c-progress__indicator" style="width:33%;"></div>
|
|
609
|
+
</div>
|
|
610
|
+
<div class="pf-c-progress__helper-text">
|
|
611
|
+
<div class="pf-c-helper-text">
|
|
612
|
+
<div class="pf-c-helper-text__item">
|
|
613
|
+
<span class="pf-c-helper-text__item-text">Progress helper text</span>
|
|
614
|
+
</div>
|
|
615
|
+
</div>
|
|
616
|
+
</div>
|
|
617
|
+
</div>
|
|
618
|
+
|
|
619
|
+
```
|
|
620
|
+
|
|
589
621
|
### Non-percantage progress
|
|
590
622
|
|
|
591
623
|
If the status that displays with the bar is not a percentage, then the ARIA tag `aria-valuetext` should be used to provide this status to screen reader users. This is the only case when setting the `aria-valuemax` to a value other than "100" is recommended, given how different screen readers handle these attributes.
|
|
@@ -647,6 +679,7 @@ If this component is describing the loading progress of a particular region of a
|
|
|
647
679
|
| `.pf-c-progress__status-icon` | `<span>` | Displays the status icon. (optional) |
|
|
648
680
|
| `.pf-c-progress__bar` | `<div>` | Displays across the entire width and represents the completed state. |
|
|
649
681
|
| `.pf-c-progress__indicator` | `<div>` | Displays with the `.pf-c-progress__bar` to indicate the progress so far. |
|
|
682
|
+
| `.pf-c-progress__helper-text` | `<div>` | Displays additional text below the progress bar. (optional) |
|
|
650
683
|
| `.pf-m-lg` | `.pf-c-progress` | Modifies the progress bar to be larger. |
|
|
651
684
|
| `.pf-m-sm` | `.pf-c-progress` | Modifies the progress bar to be smaller. |
|
|
652
685
|
| `.pf-m-inside` | `.pf-c-progress` | Shows the measure within the progress indicator. NOTE: This option requires `.pf-m-lg`. |
|
|
@@ -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.
|
|
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
|
},
|