@patternfly/patternfly 4.179.2 → 4.180.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.
Files changed (45) hide show
  1. package/components/Dropdown/dropdown.css +4 -2
  2. package/components/Dropdown/dropdown.scss +4 -2
  3. package/components/FormControl/form-control.scss +3 -0
  4. package/components/MenuToggle/menu-toggle.css +10 -7
  5. package/components/MenuToggle/menu-toggle.scss +11 -9
  6. package/components/SearchInput/search-input.css +1 -0
  7. package/components/SearchInput/search-input.scss +1 -0
  8. package/components/Select/select.css +3 -2
  9. package/components/Select/select.scss +4 -2
  10. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  11. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  12. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  13. package/docs/components/FormControl/examples/FormControl.md +0 -11
  14. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  15. package/docs/components/LogViewer/examples/LogViewer.md +567 -198
  16. package/docs/components/Menu/examples/Menu.md +1908 -983
  17. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  18. package/docs/components/Nav/examples/Navigation.md +563 -231
  19. package/docs/components/Page/examples/Page.md +11 -2
  20. package/docs/components/Select/examples/Select.md +30 -14
  21. package/docs/components/Table/examples/Table.md +8 -0
  22. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  23. package/docs/components/TreeView/examples/TreeView.md +15 -7
  24. package/docs/components/Wizard/examples/Wizard.md +6 -6
  25. package/docs/demos/Alert/examples/Alert.md +20 -40
  26. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  27. package/docs/demos/ContextSelector/examples/ContextSelector.md +595 -378
  28. package/docs/demos/DataList/examples/DataList.md +159 -114
  29. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  30. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  31. package/docs/demos/Masthead/examples/Masthead.md +622 -517
  32. package/docs/demos/Nav/examples/Nav.md +203 -343
  33. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  34. package/docs/demos/Page/examples/Page.md +1522 -1475
  35. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +3 -3
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  37. package/docs/demos/Table/examples/Table.md +2459 -1090
  38. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  39. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  40. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  41. package/package.json +1 -1
  42. package/patternfly-no-reset.css +18 -11
  43. package/patternfly.css +18 -11
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
package/components/Dropdown/dropdown.css CHANGED
@@ -111,8 +111,8 @@
111
111
  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
112
112
  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
113
113
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
114
- --pf-c-dropdown__toggle-image--MarginTop: var(--pf-global--spacer--xs);
115
- --pf-c-dropdown__toggle-image--MarginBottom: var(--pf-global--spacer--xs);
114
+ --pf-c-dropdown__toggle-image--MarginTop: 0;
115
+ --pf-c-dropdown__toggle-image--MarginBottom: 0;
116
116
  --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
117
117
  --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm);
118
118
  --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -394,9 +394,11 @@
394
394
  .pf-c-dropdown__toggle-image {
395
395
  display: inline-flex;
396
396
  flex-shrink: 0;
397
+ align-self: center;
397
398
  margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
398
399
  margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
399
400
  margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
401
+ line-height: 1;
400
402
  }
401
403
  .pf-c-dropdown__toggle-image:last-child {
402
404
  --pf-c-dropdown__toggle-image--MarginRight: 0;
package/components/Dropdown/dropdown.scss CHANGED
@@ -142,8 +142,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
142
142
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
143
143
 
144
144
  // Image
145
- --pf-c-dropdown__toggle-image--MarginTop: var(--pf-global--spacer--xs);
146
- --pf-c-dropdown__toggle-image--MarginBottom: var(--pf-global--spacer--xs);
145
+ --pf-c-dropdown__toggle-image--MarginTop: 0; // remove at breaking change
146
+ --pf-c-dropdown__toggle-image--MarginBottom: 0; // remove at breaking change
147
147
  --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
148
148
 
149
149
  // Divider
@@ -537,9 +537,11 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
537
537
  .pf-c-dropdown__toggle-image {
538
538
  display: inline-flex;
539
539
  flex-shrink: 0;
540
+ align-self: center;
540
541
  margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
541
542
  margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
542
543
  margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
544
+ line-height: 1;
543
545
 
544
546
  &:last-child {
545
547
  --pf-c-dropdown__toggle-image--MarginRight: 0;
package/components/FormControl/form-control.scss CHANGED
@@ -13,6 +13,7 @@ $pf-c-form-control__select--Coordinates: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1
13
13
  $pf-c-form-control__select--ViewBox: "320" !default;
14
14
 
15
15
  // Input - search
16
+ // Remove at breaking change
16
17
  $pf-c-form-control--m-search--Color: $pf-global--icon--Color--light !default;
17
18
  $pf-c-form-control--m-search--Coordinates: "M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" !default;
18
19
 
@@ -116,6 +117,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
116
117
  --pf-c-form-control--invalid--Background: var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background); // remove in breaking change
117
118
 
118
119
  // Input m-search
120
+ // Remove at breaking change
119
121
  --pf-c-form-control--m-search--PaddingLeft: var(--pf-global--spacer--xl);
120
122
  --pf-c-form-control--m-search--BackgroundPosition: var(--pf-c-form-control--PaddingRight);
121
123
  --pf-c-form-control--m-search--BackgroundSize: var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize);
@@ -308,6 +310,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
308
310
  }
309
311
  }
310
312
 
313
+ // Remove at breaking change
311
314
  &.pf-m-search {
312
315
  --pf-c-form-control--PaddingLeft: var(--pf-c-form-control--m-search--PaddingLeft);
313
316
 
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -64,7 +64,6 @@
64
64
  --pf-c-menu-toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
65
65
  --pf-c-menu-toggle--m-plain--m-expanded--Color: var(--pf-global--Color--100);
66
66
  --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
67
- --pf-c-menu-toggle__image--MarginRight: var(--pf-global--spacer--sm);
68
67
  --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
69
68
  --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
70
69
  --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -156,34 +155,32 @@
156
155
  --pf-c-menu-toggle__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain__toggle-icon--Color);
157
156
  }
158
157
  .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
159
- --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
160
- --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
161
- --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
162
- --pf-c-menu-toggle--active--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
163
- --pf-c-menu-toggle--disabled--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
164
158
  --pf-c-menu-toggle--PaddingRight: var(--pf-c-menu-toggle--m-plain--PaddingRight);
165
159
  --pf-c-menu-toggle--PaddingLeft: var(--pf-c-menu-toggle--m-plain--PaddingLeft);
166
160
  --pf-c-menu-toggle--disabled--BackgroundColor: transparent;
167
- --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
168
161
  display: inline-block;
162
+ color: var(--pf-c-menu-toggle--m-plain--Color);
169
163
  }
170
164
  .pf-c-menu-toggle:hover {
171
165
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--hover--BackgroundColor);
172
166
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--hover--after--BorderBottomWidth);
173
167
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--hover--after--BorderBottomColor);
174
168
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
169
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
175
170
  }
176
171
  .pf-c-menu-toggle:focus {
177
172
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
178
173
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
179
174
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
180
175
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color);
176
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--focus--Color);
181
177
  }
182
178
  .pf-c-menu-toggle:active {
183
179
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--active--BackgroundColor);
184
180
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--active--after--BorderBottomWidth);
185
181
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--active--after--BorderBottomColor);
186
182
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--active__toggle-icon--Color);
183
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--active--Color);
187
184
  }
188
185
  .pf-c-menu-toggle.pf-m-expanded {
189
186
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-expanded--Color);
@@ -191,10 +188,12 @@
191
188
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth);
192
189
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomColor);
193
190
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color);
191
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
194
192
  }
195
193
  .pf-c-menu-toggle:disabled {
196
194
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--disabled--Color);
197
195
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--disabled--BackgroundColor);
196
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
198
197
  pointer-events: none;
199
198
  }
200
199
  .pf-c-menu-toggle.pf-m-primary::before, .pf-c-menu-toggle.pf-m-primary::after, .pf-c-menu-toggle.pf-m-plain::before, .pf-c-menu-toggle.pf-m-plain::after, .pf-c-menu-toggle:disabled::before, .pf-c-menu-toggle:disabled::after {
@@ -212,7 +211,11 @@
212
211
  }
213
212
 
214
213
  .pf-c-menu-toggle__icon {
214
+ display: inline-flex;
215
+ align-self: center;
216
+ flex-shrink: 0;
215
217
  margin-right: var(--pf-c-menu-toggle__icon--MarginRight);
218
+ line-height: 1;
216
219
  }
217
220
 
218
221
  .pf-c-menu-toggle__text {
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -84,12 +84,10 @@
84
84
  --pf-c-menu-toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
85
85
  --pf-c-menu-toggle--m-plain--m-expanded--Color: var(--pf-global--Color--100);
86
86
 
87
+
87
88
  // Icon
88
89
  --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
89
90
 
90
- // Image
91
- --pf-c-menu-toggle__image--MarginRight: var(--pf-global--spacer--sm);
92
-
93
91
  // Count
94
92
  --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
95
93
 
@@ -206,17 +204,12 @@
206
204
  --pf-c-menu-toggle__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain__toggle-icon--Color);
207
205
 
208
206
  &:not(.pf-m-text) {
209
- --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
210
- --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
211
- --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
212
- --pf-c-menu-toggle--active--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
213
- --pf-c-menu-toggle--disabled--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
214
207
  --pf-c-menu-toggle--PaddingRight: var(--pf-c-menu-toggle--m-plain--PaddingRight);
215
208
  --pf-c-menu-toggle--PaddingLeft: var(--pf-c-menu-toggle--m-plain--PaddingLeft);
216
209
  --pf-c-menu-toggle--disabled--BackgroundColor: transparent;
217
- --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
218
210
 
219
211
  display: inline-block;
212
+ color: var(--pf-c-menu-toggle--m-plain--Color);
220
213
  }
221
214
  }
222
215
 
@@ -225,6 +218,7 @@
225
218
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--hover--after--BorderBottomWidth);
226
219
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--hover--after--BorderBottomColor);
227
220
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
221
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
228
222
  }
229
223
 
230
224
  &:focus {
@@ -232,6 +226,7 @@
232
226
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
233
227
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
234
228
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color);
229
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--focus--Color);
235
230
  }
236
231
 
237
232
  &:active {
@@ -239,6 +234,7 @@
239
234
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--active--after--BorderBottomWidth);
240
235
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--active--after--BorderBottomColor);
241
236
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--active__toggle-icon--Color);
237
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--active--Color);
242
238
  }
243
239
 
244
240
  &.pf-m-expanded {
@@ -247,11 +243,13 @@
247
243
  --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth);
248
244
  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomColor);
249
245
  --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color);
246
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
250
247
  }
251
248
 
252
249
  &:disabled {
253
250
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--disabled--Color);
254
251
  --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--disabled--BackgroundColor);
252
+ --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
255
253
 
256
254
  pointer-events: none;
257
255
  }
@@ -279,7 +277,11 @@
279
277
  }
280
278
 
281
279
  .pf-c-menu-toggle__icon {
280
+ display: inline-flex;
281
+ align-self: center;
282
+ flex-shrink: 0;
282
283
  margin-right: var(--pf-c-menu-toggle__icon--MarginRight);
284
+ line-height: 1;
283
285
  }
284
286
 
285
287
  .pf-c-menu-toggle__text {
package/components/SearchInput/search-input.css CHANGED
@@ -42,6 +42,7 @@
42
42
  --pf-c-search-input__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
43
43
  --pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
44
44
  position: relative;
45
+ width: 100%;
45
46
  }
46
47
 
47
48
  .pf-c-search-input__bar {
package/components/SearchInput/search-input.scss CHANGED
@@ -56,6 +56,7 @@
56
56
  --pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
57
57
 
58
58
  position: relative;
59
+ width: 100%;
59
60
  }
60
61
 
61
62
  .pf-c-search-input__bar {
package/components/Select/select.css CHANGED
@@ -23,7 +23,7 @@
23
23
  --pf-c-select__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
24
24
  --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
25
25
  --pf-c-select__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
26
- --pf-c-select__toggle--before--BorderWidth: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth);
26
+ --pf-c-select__toggle--before--BorderWidth: initial;
27
27
  --pf-c-select__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300);
28
28
  --pf-c-select__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300);
29
29
  --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
@@ -234,6 +234,7 @@
234
234
  border: 0;
235
235
  }
236
236
  .pf-c-select__toggle::before {
237
+ --pf-c-select__toggle--before--BorderWidth-base: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth);
237
238
  position: absolute;
238
239
  top: 0;
239
240
  right: 0;
@@ -242,7 +243,7 @@
242
243
  content: "";
243
244
  border-color: var(--pf-c-select__toggle--before--BorderTopColor) var(--pf-c-select__toggle--before--BorderRightColor) var(--pf-c-select__toggle--before--BorderBottomColor) var(--pf-c-select__toggle--before--BorderLeftColor);
244
245
  border-style: solid;
245
- border-width: var(--pf-c-select__toggle--before--BorderWidth);
246
+ border-width: var(--pf-c-select__toggle--before--BorderWidth, var(--pf-c-select__toggle--before--BorderWidth-base));
246
247
  }
247
248
  .pf-c-select__toggle:hover {
248
249
  --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--hover--before--BorderBottomColor);
package/components/Select/select.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  --pf-c-select__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
16
16
  --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
17
17
  --pf-c-select__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
18
- --pf-c-select__toggle--before--BorderWidth: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth); // remove at breaking change
18
+ --pf-c-select__toggle--before--BorderWidth: initial; // remove at breaking change
19
19
  --pf-c-select__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300);
20
20
  --pf-c-select__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300);
21
21
  --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
@@ -292,6 +292,8 @@
292
292
  }
293
293
 
294
294
  &::before {
295
+ --pf-c-select__toggle--before--BorderWidth-base: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth); // remove at breaking change
296
+
295
297
  position: absolute;
296
298
  top: 0;
297
299
  right: 0;
@@ -300,7 +302,7 @@
300
302
  content: "";
301
303
  border-color: var(--pf-c-select__toggle--before--BorderTopColor) var(--pf-c-select__toggle--before--BorderRightColor) var(--pf-c-select__toggle--before--BorderBottomColor) var(--pf-c-select__toggle--before--BorderLeftColor);
302
304
  border-style: solid;
303
- border-width: var(--pf-c-select__toggle--before--BorderWidth);
305
+ border-width: var(--pf-c-select__toggle--before--BorderWidth, var(--pf-c-select__toggle--before--BorderWidth-base));
304
306
  }
305
307
 
306
308
  &:hover {
package/docs/components/AppLauncher/examples/application-launcher.md CHANGED
@@ -413,14 +413,21 @@ cssPrefix: pf-c-app-launcher
413
413
  </button>
414
414
  <div class="pf-c-app-launcher__menu">
415
415
  <div class="pf-c-app-launcher__menu-search">
416
- <input
417
- class="pf-c-form-control"
418
- type="search"
419
- aria-label="Type to filter"
420
- placeholder="Filter by name..."
421
- id="app-launcher-favorites-text-input"
422
- name="textInput1"
423
- />
416
+ <div class="pf-c-search-input">
417
+ <div class="pf-c-search-input__bar">
418
+ <span class="pf-c-search-input__text">
419
+ <span class="pf-c-search-input__icon">
420
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
421
+ </span>
422
+ <input
423
+ class="pf-c-search-input__text-input"
424
+ type="text"
425
+ placeholder="Search"
426
+ aria-label="Search"
427
+ />
428
+ </span>
429
+ </div>
430
+ </div>
424
431
  </div>
425
432
  <section class="pf-c-app-launcher__group">
426
433
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
package/docs/components/ContextSelector/examples/context-selector.md CHANGED
@@ -24,23 +24,20 @@ cssPrefix: pf-c-context-selector
24
24
  </button>
25
25
  <div class="pf-c-context-selector__menu" hidden>
26
26
  <div class="pf-c-context-selector__menu-search">
27
- <div class="pf-c-input-group">
28
- <input
29
- class="pf-c-form-control"
30
- type="search"
31
- placeholder="Search"
32
- id="textInput1"
33
- name="textInput1"
34
- aria-labelledby="context-selector-collapsed-example-search-button"
35
- />
36
- <button
37
- class="pf-c-button pf-m-control"
38
- type="button"
39
- id="context-selector-collapsed-example-search-button"
40
- aria-label="Search menu items"
41
- >
42
- <i class="fas fa-search" aria-hidden="true"></i>
43
- </button>
27
+ <div class="pf-c-search-input">
28
+ <div class="pf-c-search-input__bar">
29
+ <span class="pf-c-search-input__text">
30
+ <span class="pf-c-search-input__icon">
31
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
32
+ </span>
33
+ <input
34
+ class="pf-c-search-input__text-input"
35
+ type="text"
36
+ placeholder="Search"
37
+ aria-label="Search"
38
+ />
39
+ </span>
40
+ </div>
44
41
  </div>
45
42
  </div>
46
43
  <ul class="pf-c-context-selector__menu-list">
@@ -141,23 +138,20 @@ cssPrefix: pf-c-context-selector
141
138
  </button>
142
139
  <div class="pf-c-context-selector__menu">
143
140
  <div class="pf-c-context-selector__menu-search">
144
- <div class="pf-c-input-group">
145
- <input
146
- class="pf-c-form-control"
147
- type="search"
148
- placeholder="Search"
149
- id="textInput2"
150
- name="textInput2"
151
- aria-labelledby="context-selector-expanded-example-search-button"
152
- />
153
- <button
154
- class="pf-c-button pf-m-control"
155
- type="button"
156
- id="context-selector-expanded-example-search-button"
157
- aria-label="Search menu items"
158
- >
159
- <i class="fas fa-search" aria-hidden="true"></i>
160
- </button>
141
+ <div class="pf-c-search-input">
142
+ <div class="pf-c-search-input__bar">
143
+ <span class="pf-c-search-input__text">
144
+ <span class="pf-c-search-input__icon">
145
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
146
+ </span>
147
+ <input
148
+ class="pf-c-search-input__text-input"
149
+ type="text"
150
+ placeholder="Search"
151
+ aria-label="Search"
152
+ />
153
+ </span>
154
+ </div>
161
155
  </div>
162
156
  </div>
163
157
  <ul class="pf-c-context-selector__menu-list">
@@ -266,23 +260,20 @@ cssPrefix: pf-c-context-selector
266
260
  </button>
267
261
  <div class="pf-c-context-selector__menu" hidden>
268
262
  <div class="pf-c-context-selector__menu-search">
269
- <div class="pf-c-input-group">
270
- <input
271
- class="pf-c-form-control"
272
- type="search"
273
- placeholder="Search"
274
- id="textInput1"
275
- name="textInput1"
276
- aria-labelledby="context-selector-plain-with-text-collapsed-example-search-button"
277
- />
278
- <button
279
- class="pf-c-button pf-m-control"
280
- type="button"
281
- id="context-selector-plain-with-text-collapsed-example-search-button"
282
- aria-label="Search menu items"
283
- >
284
- <i class="fas fa-search" aria-hidden="true"></i>
285
- </button>
263
+ <div class="pf-c-search-input">
264
+ <div class="pf-c-search-input__bar">
265
+ <span class="pf-c-search-input__text">
266
+ <span class="pf-c-search-input__icon">
267
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
268
+ </span>
269
+ <input
270
+ class="pf-c-search-input__text-input"
271
+ type="text"
272
+ placeholder="Search"
273
+ aria-label="Search"
274
+ />
275
+ </span>
276
+ </div>
286
277
  </div>
287
278
  </div>
288
279
  <ul class="pf-c-context-selector__menu-list">
@@ -386,23 +377,20 @@ cssPrefix: pf-c-context-selector
386
377
  </button>
387
378
  <div class="pf-c-context-selector__menu">
388
379
  <div class="pf-c-context-selector__menu-search">
389
- <div class="pf-c-input-group">
390
- <input
391
- class="pf-c-form-control"
392
- type="search"
393
- placeholder="Search"
394
- id="textInput2"
395
- name="textInput2"
396
- aria-labelledby="context-selector-plain-with-text-expanded-example-search-button"
397
- />
398
- <button
399
- class="pf-c-button pf-m-control"
400
- type="button"
401
- id="context-selector-plain-with-text-expanded-example-search-button"
402
- aria-label="Search menu items"
403
- >
404
- <i class="fas fa-search" aria-hidden="true"></i>
405
- </button>
380
+ <div class="pf-c-search-input">
381
+ <div class="pf-c-search-input__bar">
382
+ <span class="pf-c-search-input__text">
383
+ <span class="pf-c-search-input__icon">
384
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
385
+ </span>
386
+ <input
387
+ class="pf-c-search-input__text-input"
388
+ type="text"
389
+ placeholder="Search"
390
+ aria-label="Search"
391
+ />
392
+ </span>
393
+ </div>
406
394
  </div>
407
395
  </div>
408
396
  <ul class="pf-c-context-selector__menu-list">
@@ -508,23 +496,20 @@ cssPrefix: pf-c-context-selector
508
496
  </button>
509
497
  <div class="pf-c-context-selector__menu">
510
498
  <div class="pf-c-context-selector__menu-search">
511
- <div class="pf-c-input-group">
512
- <input
513
- class="pf-c-form-control"
514
- type="search"
515
- placeholder="Search"
516
- id="context-selector-with-footer-example-textInput3"
517
- name="textInput3"
518
- aria-labelledby="context-selector-with-footer-example-search-button"
519
- />
520
- <button
521
- class="pf-c-button pf-m-control"
522
- type="button"
523
- id="context-selector-with-footer-example-search-button"
524
- aria-label="Search menu items"
525
- >
526
- <i class="fas fa-search" aria-hidden="true"></i>
527
- </button>
499
+ <div class="pf-c-search-input">
500
+ <div class="pf-c-search-input__bar">
501
+ <span class="pf-c-search-input__text">
502
+ <span class="pf-c-search-input__icon">
503
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
504
+ </span>
505
+ <input
506
+ class="pf-c-search-input__text-input"
507
+ type="text"
508
+ placeholder="Search"
509
+ aria-label="Search"
510
+ />
511
+ </span>
512
+ </div>
528
513
  </div>
529
514
  </div>
530
515
  <ul class="pf-c-context-selector__menu-list">
@@ -632,23 +617,20 @@ cssPrefix: pf-c-context-selector
632
617
  </button>
633
618
  <div class="pf-c-context-selector__menu">
634
619
  <div class="pf-c-context-selector__menu-search">
635
- <div class="pf-c-input-group">
636
- <input
637
- class="pf-c-form-control"
638
- type="search"
639
- placeholder="Search"
640
- id="context-selector-with-footer-example-two-textInput3"
641
- name="textInput3"
642
- aria-labelledby="context-selector-with-footer-example-two-search-button"
643
- />
644
- <button
645
- class="pf-c-button pf-m-control"
646
- type="button"
647
- id="context-selector-with-footer-example-two-search-button"
648
- aria-label="Search menu items"
649
- >
650
- <i class="fas fa-search" aria-hidden="true"></i>
651
- </button>
620
+ <div class="pf-c-search-input">
621
+ <div class="pf-c-search-input__bar">
622
+ <span class="pf-c-search-input__text">
623
+ <span class="pf-c-search-input__icon">
624
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
625
+ </span>
626
+ <input
627
+ class="pf-c-search-input__text-input"
628
+ type="text"
629
+ placeholder="Search"
630
+ aria-label="Search"
631
+ />
632
+ </span>
633
+ </div>
652
634
  </div>
653
635
  </div>
654
636
  <ul class="pf-c-context-selector__menu-list">