@patternfly/patternfly 4.179.3 → 4.181.0

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/assets/images/status-icon-sprite.svg +38 -0
  2. package/components/Dropdown/dropdown.css +4 -2
  3. package/components/Dropdown/dropdown.scss +4 -2
  4. package/components/FormControl/form-control.css +26 -0
  5. package/components/FormControl/form-control.scss +33 -1
  6. package/components/Menu/menu.css +10 -0
  7. package/components/Menu/menu.scss +14 -0
  8. package/components/MenuToggle/menu-toggle.css +10 -7
  9. package/components/MenuToggle/menu-toggle.scss +11 -9
  10. package/components/SearchInput/search-input.css +1 -0
  11. package/components/SearchInput/search-input.scss +1 -0
  12. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  13. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  14. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  15. package/docs/components/FormControl/examples/FormControl.md +151 -11
  16. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  17. package/docs/components/Menu/examples/Menu.md +127 -30
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  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 +247 -276
  28. package/docs/demos/DataList/examples/DataList.md +159 -114
  29. package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
  30. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  31. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  32. package/docs/demos/Masthead/examples/Masthead.md +426 -449
  33. package/docs/demos/Nav/examples/Nav.md +203 -343
  34. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  35. package/docs/demos/Page/examples/Page.md +834 -1235
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  37. package/docs/demos/Table/examples/Table.md +1189 -652
  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 +51 -9
  43. package/patternfly.css +51 -9
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
package/docs/demos/ContextSelector/examples/ContextSelector.md CHANGED
@@ -68,23 +68,20 @@ section: components
68
68
  </button>
69
69
  <div class="pf-c-context-selector__menu" hidden>
70
70
  <div class="pf-c-context-selector__menu-search">
71
- <div class="pf-c-input-group">
72
- <input
73
- class="pf-c-form-control"
74
- type="search"
75
- placeholder="Search"
76
- id="context-selector-in-masthead-masthead-context-selectortextInput1"
77
- name="context-selector-in-masthead-masthead-context-selectortextInput1"
78
- aria-labelledby="context-selector-in-masthead-masthead-context-selector-search-button"
79
- />
80
- <button
81
- class="pf-c-button pf-m-control"
82
- type="button"
83
- id="context-selector-in-masthead-masthead-context-selector-search-button"
84
- aria-label="Search menu items"
85
- >
86
- <i class="fas fa-search" aria-hidden="true"></i>
87
- </button>
71
+ <div class="pf-c-search-input">
72
+ <div class="pf-c-search-input__bar">
73
+ <span class="pf-c-search-input__text">
74
+ <span class="pf-c-search-input__icon">
75
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
76
+ </span>
77
+ <input
78
+ class="pf-c-search-input__text-input"
79
+ type="text"
80
+ placeholder="Search"
81
+ aria-label="Search"
82
+ />
83
+ </span>
84
+ </div>
88
85
  </div>
89
86
  </div>
90
87
  <ul class="pf-c-context-selector__menu-list">
@@ -267,55 +264,35 @@ section: components
267
264
  <section class="pf-c-page__main-section pf-m-limit-width">
268
265
  <div class="pf-c-page__main-body">
269
266
  <div class="pf-l-gallery pf-m-gutter">
270
- <div class="pf-l-gallery__item">
271
- <div class="pf-c-card">
272
- <div class="pf-c-card__body">This is a card</div>
273
- </div>
267
+ <div class="pf-c-card">
268
+ <div class="pf-c-card__body">This is a card</div>
274
269
  </div>
275
- <div class="pf-l-gallery__item">
276
- <div class="pf-c-card">
277
- <div class="pf-c-card__body">This is a card</div>
278
- </div>
270
+ <div class="pf-c-card">
271
+ <div class="pf-c-card__body">This is a card</div>
279
272
  </div>
280
- <div class="pf-l-gallery__item">
281
- <div class="pf-c-card">
282
- <div class="pf-c-card__body">This is a card</div>
283
- </div>
273
+ <div class="pf-c-card">
274
+ <div class="pf-c-card__body">This is a card</div>
284
275
  </div>
285
- <div class="pf-l-gallery__item">
286
- <div class="pf-c-card">
287
- <div class="pf-c-card__body">This is a card</div>
288
- </div>
276
+ <div class="pf-c-card">
277
+ <div class="pf-c-card__body">This is a card</div>
289
278
  </div>
290
- <div class="pf-l-gallery__item">
291
- <div class="pf-c-card">
292
- <div class="pf-c-card__body">This is a card</div>
293
- </div>
279
+ <div class="pf-c-card">
280
+ <div class="pf-c-card__body">This is a card</div>
294
281
  </div>
295
- <div class="pf-l-gallery__item">
296
- <div class="pf-c-card">
297
- <div class="pf-c-card__body">This is a card</div>
298
- </div>
282
+ <div class="pf-c-card">
283
+ <div class="pf-c-card__body">This is a card</div>
299
284
  </div>
300
- <div class="pf-l-gallery__item">
301
- <div class="pf-c-card">
302
- <div class="pf-c-card__body">This is a card</div>
303
- </div>
285
+ <div class="pf-c-card">
286
+ <div class="pf-c-card__body">This is a card</div>
304
287
  </div>
305
- <div class="pf-l-gallery__item">
306
- <div class="pf-c-card">
307
- <div class="pf-c-card__body">This is a card</div>
308
- </div>
288
+ <div class="pf-c-card">
289
+ <div class="pf-c-card__body">This is a card</div>
309
290
  </div>
310
- <div class="pf-l-gallery__item">
311
- <div class="pf-c-card">
312
- <div class="pf-c-card__body">This is a card</div>
313
- </div>
291
+ <div class="pf-c-card">
292
+ <div class="pf-c-card__body">This is a card</div>
314
293
  </div>
315
- <div class="pf-l-gallery__item">
316
- <div class="pf-c-card">
317
- <div class="pf-c-card__body">This is a card</div>
318
- </div>
294
+ <div class="pf-c-card">
295
+ <div class="pf-c-card__body">This is a card</div>
319
296
  </div>
320
297
  </div>
321
298
  </div>
@@ -393,7 +370,7 @@ section: components
393
370
  <button
394
371
  class="pf-c-app-launcher__toggle"
395
372
  type="button"
396
- id="-button"
373
+ id="-icon-group--app-launcher-button"
397
374
  aria-expanded="false"
398
375
  aria-label="Application launcher"
399
376
  >
@@ -404,14 +381,24 @@ section: components
404
381
  hidden
405
382
  >
406
383
  <div class="pf-c-app-launcher__menu-search">
407
- <input
408
- class="pf-c-form-control"
409
- type="search"
410
- aria-label="Type to filter"
411
- placeholder="Filter by name..."
412
- id="-application-launcher-text-input"
413
- name="textInput1"
414
- />
384
+ <div class="pf-c-search-input">
385
+ <div class="pf-c-search-input__bar">
386
+ <span class="pf-c-search-input__text">
387
+ <span class="pf-c-search-input__icon">
388
+ <i
389
+ class="fas fa-search fa-fw"
390
+ aria-hidden="true"
391
+ ></i>
392
+ </span>
393
+ <input
394
+ class="pf-c-search-input__text-input"
395
+ type="text"
396
+ placeholder="Filter by name"
397
+ aria-label="Filter by name"
398
+ />
399
+ </span>
400
+ </div>
401
+ </div>
415
402
  </div>
416
403
  <section class="pf-c-app-launcher__group">
417
404
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -926,13 +913,24 @@ section: components
926
913
  </div>
927
914
  <div class="pf-c-menu__search">
928
915
  <div class="pf-c-menu__search-input">
929
- <input
930
- class="pf-c-form-control pf-m-search"
931
- type="search"
932
- id="-drilldown-menu-list-3-search-input"
933
- name="-drilldown-menu-list-3-search-input"
934
- aria-label="Search"
935
- />
916
+ <div class="pf-c-search-input">
917
+ <div class="pf-c-search-input__bar">
918
+ <span class="pf-c-search-input__text">
919
+ <span class="pf-c-search-input__icon">
920
+ <i
921
+ class="fas fa-search fa-fw"
922
+ aria-hidden="true"
923
+ ></i>
924
+ </span>
925
+ <input
926
+ class="pf-c-search-input__text-input"
927
+ type="text"
928
+ placeholder="Search"
929
+ aria-label="Search"
930
+ />
931
+ </span>
932
+ </div>
933
+ </div>
936
934
  </div>
937
935
  </div>
938
936
  <hr class="pf-c-divider" />
@@ -1183,23 +1181,20 @@ section: components
1183
1181
  </button>
1184
1182
  <div class="pf-c-context-selector__menu" hidden>
1185
1183
  <div class="pf-c-context-selector__menu-search">
1186
- <div class="pf-c-input-group">
1187
- <input
1188
- class="pf-c-form-control"
1189
- type="search"
1190
- placeholder="Search"
1191
- id="textInput1"
1192
- name="textInput1"
1193
- aria-labelledby="context-selector-collapsed-example-search-button"
1194
- />
1195
- <button
1196
- class="pf-c-button pf-m-control"
1197
- type="button"
1198
- id="context-selector-collapsed-example-search-button"
1199
- aria-label="Search menu items"
1200
- >
1201
- <i class="fas fa-search" aria-hidden="true"></i>
1202
- </button>
1184
+ <div class="pf-c-search-input">
1185
+ <div class="pf-c-search-input__bar">
1186
+ <span class="pf-c-search-input__text">
1187
+ <span class="pf-c-search-input__icon">
1188
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1189
+ </span>
1190
+ <input
1191
+ class="pf-c-search-input__text-input"
1192
+ type="text"
1193
+ placeholder="Search"
1194
+ aria-label="Search"
1195
+ />
1196
+ </span>
1197
+ </div>
1203
1198
  </div>
1204
1199
  </div>
1205
1200
  <ul class="pf-c-context-selector__menu-list">
@@ -1341,55 +1336,35 @@ section: components
1341
1336
  >
1342
1337
  <div class="pf-c-page__main-body">
1343
1338
  <div class="pf-l-gallery pf-m-gutter">
1344
- <div class="pf-l-gallery__item">
1345
- <div class="pf-c-card">
1346
- <div class="pf-c-card__body">This is a card</div>
1347
- </div>
1339
+ <div class="pf-c-card">
1340
+ <div class="pf-c-card__body">This is a card</div>
1348
1341
  </div>
1349
- <div class="pf-l-gallery__item">
1350
- <div class="pf-c-card">
1351
- <div class="pf-c-card__body">This is a card</div>
1352
- </div>
1342
+ <div class="pf-c-card">
1343
+ <div class="pf-c-card__body">This is a card</div>
1353
1344
  </div>
1354
- <div class="pf-l-gallery__item">
1355
- <div class="pf-c-card">
1356
- <div class="pf-c-card__body">This is a card</div>
1357
- </div>
1345
+ <div class="pf-c-card">
1346
+ <div class="pf-c-card__body">This is a card</div>
1358
1347
  </div>
1359
- <div class="pf-l-gallery__item">
1360
- <div class="pf-c-card">
1361
- <div class="pf-c-card__body">This is a card</div>
1362
- </div>
1348
+ <div class="pf-c-card">
1349
+ <div class="pf-c-card__body">This is a card</div>
1363
1350
  </div>
1364
- <div class="pf-l-gallery__item">
1365
- <div class="pf-c-card">
1366
- <div class="pf-c-card__body">This is a card</div>
1367
- </div>
1351
+ <div class="pf-c-card">
1352
+ <div class="pf-c-card__body">This is a card</div>
1368
1353
  </div>
1369
- <div class="pf-l-gallery__item">
1370
- <div class="pf-c-card">
1371
- <div class="pf-c-card__body">This is a card</div>
1372
- </div>
1354
+ <div class="pf-c-card">
1355
+ <div class="pf-c-card__body">This is a card</div>
1373
1356
  </div>
1374
- <div class="pf-l-gallery__item">
1375
- <div class="pf-c-card">
1376
- <div class="pf-c-card__body">This is a card</div>
1377
- </div>
1357
+ <div class="pf-c-card">
1358
+ <div class="pf-c-card__body">This is a card</div>
1378
1359
  </div>
1379
- <div class="pf-l-gallery__item">
1380
- <div class="pf-c-card">
1381
- <div class="pf-c-card__body">This is a card</div>
1382
- </div>
1360
+ <div class="pf-c-card">
1361
+ <div class="pf-c-card__body">This is a card</div>
1383
1362
  </div>
1384
- <div class="pf-l-gallery__item">
1385
- <div class="pf-c-card">
1386
- <div class="pf-c-card__body">This is a card</div>
1387
- </div>
1363
+ <div class="pf-c-card">
1364
+ <div class="pf-c-card__body">This is a card</div>
1388
1365
  </div>
1389
- <div class="pf-l-gallery__item">
1390
- <div class="pf-c-card">
1391
- <div class="pf-c-card__body">This is a card</div>
1392
- </div>
1366
+ <div class="pf-c-card">
1367
+ <div class="pf-c-card__body">This is a card</div>
1393
1368
  </div>
1394
1369
  </div>
1395
1370
  </div>
@@ -1474,7 +1449,7 @@ section: components
1474
1449
  <button
1475
1450
  class="pf-c-app-launcher__toggle"
1476
1451
  type="button"
1477
- id="-button"
1452
+ id="-icon-group--app-launcher-button"
1478
1453
  aria-expanded="false"
1479
1454
  aria-label="Application launcher"
1480
1455
  >
@@ -1485,14 +1460,24 @@ section: components
1485
1460
  hidden
1486
1461
  >
1487
1462
  <div class="pf-c-app-launcher__menu-search">
1488
- <input
1489
- class="pf-c-form-control"
1490
- type="search"
1491
- aria-label="Type to filter"
1492
- placeholder="Filter by name..."
1493
- id="-application-launcher-text-input"
1494
- name="textInput1"
1495
- />
1463
+ <div class="pf-c-search-input">
1464
+ <div class="pf-c-search-input__bar">
1465
+ <span class="pf-c-search-input__text">
1466
+ <span class="pf-c-search-input__icon">
1467
+ <i
1468
+ class="fas fa-search fa-fw"
1469
+ aria-hidden="true"
1470
+ ></i>
1471
+ </span>
1472
+ <input
1473
+ class="pf-c-search-input__text-input"
1474
+ type="text"
1475
+ placeholder="Filter by name"
1476
+ aria-label="Filter by name"
1477
+ />
1478
+ </span>
1479
+ </div>
1480
+ </div>
1496
1481
  </div>
1497
1482
  <section class="pf-c-app-launcher__group">
1498
1483
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -2007,13 +1992,24 @@ section: components
2007
1992
  </div>
2008
1993
  <div class="pf-c-menu__search">
2009
1994
  <div class="pf-c-menu__search-input">
2010
- <input
2011
- class="pf-c-form-control pf-m-search"
2012
- type="search"
2013
- id="-drilldown-menu-list-3-search-input"
2014
- name="-drilldown-menu-list-3-search-input"
2015
- aria-label="Search"
2016
- />
1995
+ <div class="pf-c-search-input">
1996
+ <div class="pf-c-search-input__bar">
1997
+ <span class="pf-c-search-input__text">
1998
+ <span class="pf-c-search-input__icon">
1999
+ <i
2000
+ class="fas fa-search fa-fw"
2001
+ aria-hidden="true"
2002
+ ></i>
2003
+ </span>
2004
+ <input
2005
+ class="pf-c-search-input__text-input"
2006
+ type="text"
2007
+ placeholder="Search"
2008
+ aria-label="Search"
2009
+ />
2010
+ </span>
2011
+ </div>
2012
+ </div>
2017
2013
  </div>
2018
2014
  </div>
2019
2015
  <hr class="pf-c-divider" />
@@ -2266,23 +2262,20 @@ section: components
2266
2262
  </button>
2267
2263
  <div class="pf-c-context-selector__menu">
2268
2264
  <div class="pf-c-context-selector__menu-search">
2269
- <div class="pf-c-input-group">
2270
- <input
2271
- class="pf-c-form-control"
2272
- type="search"
2273
- placeholder="Search"
2274
- id="textInput1"
2275
- name="textInput1"
2276
- aria-labelledby="context-selector-collapsed-example-search-button"
2277
- />
2278
- <button
2279
- class="pf-c-button pf-m-control"
2280
- type="button"
2281
- id="context-selector-collapsed-example-search-button"
2282
- aria-label="Search menu items"
2283
- >
2284
- <i class="fas fa-search" aria-hidden="true"></i>
2285
- </button>
2265
+ <div class="pf-c-search-input">
2266
+ <div class="pf-c-search-input__bar">
2267
+ <span class="pf-c-search-input__text">
2268
+ <span class="pf-c-search-input__icon">
2269
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2270
+ </span>
2271
+ <input
2272
+ class="pf-c-search-input__text-input"
2273
+ type="text"
2274
+ placeholder="Search"
2275
+ aria-label="Search"
2276
+ />
2277
+ </span>
2278
+ </div>
2286
2279
  </div>
2287
2280
  </div>
2288
2281
  <ul class="pf-c-context-selector__menu-list">
@@ -2424,55 +2417,35 @@ section: components
2424
2417
  >
2425
2418
  <div class="pf-c-page__main-body">
2426
2419
  <div class="pf-l-gallery pf-m-gutter">
2427
- <div class="pf-l-gallery__item">
2428
- <div class="pf-c-card">
2429
- <div class="pf-c-card__body">This is a card</div>
2430
- </div>
2420
+ <div class="pf-c-card">
2421
+ <div class="pf-c-card__body">This is a card</div>
2431
2422
  </div>
2432
- <div class="pf-l-gallery__item">
2433
- <div class="pf-c-card">
2434
- <div class="pf-c-card__body">This is a card</div>
2435
- </div>
2423
+ <div class="pf-c-card">
2424
+ <div class="pf-c-card__body">This is a card</div>
2436
2425
  </div>
2437
- <div class="pf-l-gallery__item">
2438
- <div class="pf-c-card">
2439
- <div class="pf-c-card__body">This is a card</div>
2440
- </div>
2426
+ <div class="pf-c-card">
2427
+ <div class="pf-c-card__body">This is a card</div>
2441
2428
  </div>
2442
- <div class="pf-l-gallery__item">
2443
- <div class="pf-c-card">
2444
- <div class="pf-c-card__body">This is a card</div>
2445
- </div>
2429
+ <div class="pf-c-card">
2430
+ <div class="pf-c-card__body">This is a card</div>
2446
2431
  </div>
2447
- <div class="pf-l-gallery__item">
2448
- <div class="pf-c-card">
2449
- <div class="pf-c-card__body">This is a card</div>
2450
- </div>
2432
+ <div class="pf-c-card">
2433
+ <div class="pf-c-card__body">This is a card</div>
2451
2434
  </div>
2452
- <div class="pf-l-gallery__item">
2453
- <div class="pf-c-card">
2454
- <div class="pf-c-card__body">This is a card</div>
2455
- </div>
2435
+ <div class="pf-c-card">
2436
+ <div class="pf-c-card__body">This is a card</div>
2456
2437
  </div>
2457
- <div class="pf-l-gallery__item">
2458
- <div class="pf-c-card">
2459
- <div class="pf-c-card__body">This is a card</div>
2460
- </div>
2438
+ <div class="pf-c-card">
2439
+ <div class="pf-c-card__body">This is a card</div>
2461
2440
  </div>
2462
- <div class="pf-l-gallery__item">
2463
- <div class="pf-c-card">
2464
- <div class="pf-c-card__body">This is a card</div>
2465
- </div>
2441
+ <div class="pf-c-card">
2442
+ <div class="pf-c-card__body">This is a card</div>
2466
2443
  </div>
2467
- <div class="pf-l-gallery__item">
2468
- <div class="pf-c-card">
2469
- <div class="pf-c-card__body">This is a card</div>
2470
- </div>
2444
+ <div class="pf-c-card">
2445
+ <div class="pf-c-card__body">This is a card</div>
2471
2446
  </div>
2472
- <div class="pf-l-gallery__item">
2473
- <div class="pf-c-card">
2474
- <div class="pf-c-card__body">This is a card</div>
2475
- </div>
2447
+ <div class="pf-c-card">
2448
+ <div class="pf-c-card__body">This is a card</div>
2476
2449
  </div>
2477
2450
  </div>
2478
2451
  </div>
@@ -2562,7 +2535,7 @@ section: components
2562
2535
  <button
2563
2536
  class="pf-c-app-launcher__toggle"
2564
2537
  type="button"
2565
- id="-button"
2538
+ id="context-selector-in-page-content-demo-masthead-icon-group--app-launcher-button"
2566
2539
  aria-expanded="false"
2567
2540
  aria-label="Application launcher"
2568
2541
  >
@@ -2573,14 +2546,24 @@ section: components
2573
2546
  hidden
2574
2547
  >
2575
2548
  <div class="pf-c-app-launcher__menu-search">
2576
- <input
2577
- class="pf-c-form-control"
2578
- type="search"
2579
- aria-label="Type to filter"
2580
- placeholder="Filter by name..."
2581
- id="context-selector-in-page-content-demo-masthead-application-launcher-text-input"
2582
- name="textInput1"
2583
- />
2549
+ <div class="pf-c-search-input">
2550
+ <div class="pf-c-search-input__bar">
2551
+ <span class="pf-c-search-input__text">
2552
+ <span class="pf-c-search-input__icon">
2553
+ <i
2554
+ class="fas fa-search fa-fw"
2555
+ aria-hidden="true"
2556
+ ></i>
2557
+ </span>
2558
+ <input
2559
+ class="pf-c-search-input__text-input"
2560
+ type="text"
2561
+ placeholder="Filter by name"
2562
+ aria-label="Filter by name"
2563
+ />
2564
+ </span>
2565
+ </div>
2566
+ </div>
2584
2567
  </div>
2585
2568
  <section class="pf-c-app-launcher__group">
2586
2569
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -3062,13 +3045,24 @@ section: components
3062
3045
  </div>
3063
3046
  <div class="pf-c-menu__search">
3064
3047
  <div class="pf-c-menu__search-input">
3065
- <input
3066
- class="pf-c-form-control pf-m-search"
3067
- type="search"
3068
- id="context-selector-in-page-content-demo-masthead-drilldown-menu-list-3-search-input"
3069
- name="context-selector-in-page-content-demo-masthead-drilldown-menu-list-3-search-input"
3070
- aria-label="Search"
3071
- />
3048
+ <div class="pf-c-search-input">
3049
+ <div class="pf-c-search-input__bar">
3050
+ <span class="pf-c-search-input__text">
3051
+ <span class="pf-c-search-input__icon">
3052
+ <i
3053
+ class="fas fa-search fa-fw"
3054
+ aria-hidden="true"
3055
+ ></i>
3056
+ </span>
3057
+ <input
3058
+ class="pf-c-search-input__text-input"
3059
+ type="text"
3060
+ placeholder="Search"
3061
+ aria-label="Search"
3062
+ />
3063
+ </span>
3064
+ </div>
3065
+ </div>
3072
3066
  </div>
3073
3067
  </div>
3074
3068
  <hr class="pf-c-divider" />
@@ -3339,23 +3333,20 @@ section: components
3339
3333
  </button>
3340
3334
  <div class="pf-c-context-selector__menu" hidden>
3341
3335
  <div class="pf-c-context-selector__menu-search">
3342
- <div class="pf-c-input-group">
3343
- <input
3344
- class="pf-c-form-control"
3345
- type="search"
3346
- placeholder="Search"
3347
- id="textInput1"
3348
- name="textInput1"
3349
- aria-labelledby="-context-selector-search-button"
3350
- />
3351
- <button
3352
- class="pf-c-button pf-m-control"
3353
- type="button"
3354
- id="-context-selector-search-button"
3355
- aria-label="Search menu items"
3356
- >
3357
- <i class="fas fa-search" aria-hidden="true"></i>
3358
- </button>
3336
+ <div class="pf-c-search-input">
3337
+ <div class="pf-c-search-input__bar">
3338
+ <span class="pf-c-search-input__text">
3339
+ <span class="pf-c-search-input__icon">
3340
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3341
+ </span>
3342
+ <input
3343
+ class="pf-c-search-input__text-input"
3344
+ type="text"
3345
+ placeholder="Search"
3346
+ aria-label="Search"
3347
+ />
3348
+ </span>
3349
+ </div>
3359
3350
  </div>
3360
3351
  </div>
3361
3352
  <ul class="pf-c-context-selector__menu-list">
@@ -3565,55 +3556,35 @@ section: components
3565
3556
  <section class="pf-c-page__main-section pf-m-limit-width">
3566
3557
  <div class="pf-c-page__main-body">
3567
3558
  <div class="pf-l-gallery pf-m-gutter">
3568
- <div class="pf-l-gallery__item">
3569
- <div class="pf-c-card">
3570
- <div class="pf-c-card__body">This is a card</div>
3571
- </div>
3559
+ <div class="pf-c-card">
3560
+ <div class="pf-c-card__body">This is a card</div>
3572
3561
  </div>
3573
- <div class="pf-l-gallery__item">
3574
- <div class="pf-c-card">
3575
- <div class="pf-c-card__body">This is a card</div>
3576
- </div>
3562
+ <div class="pf-c-card">
3563
+ <div class="pf-c-card__body">This is a card</div>
3577
3564
  </div>
3578
- <div class="pf-l-gallery__item">
3579
- <div class="pf-c-card">
3580
- <div class="pf-c-card__body">This is a card</div>
3581
- </div>
3565
+ <div class="pf-c-card">
3566
+ <div class="pf-c-card__body">This is a card</div>
3582
3567
  </div>
3583
- <div class="pf-l-gallery__item">
3584
- <div class="pf-c-card">
3585
- <div class="pf-c-card__body">This is a card</div>
3586
- </div>
3568
+ <div class="pf-c-card">
3569
+ <div class="pf-c-card__body">This is a card</div>
3587
3570
  </div>
3588
- <div class="pf-l-gallery__item">
3589
- <div class="pf-c-card">
3590
- <div class="pf-c-card__body">This is a card</div>
3591
- </div>
3571
+ <div class="pf-c-card">
3572
+ <div class="pf-c-card__body">This is a card</div>
3592
3573
  </div>
3593
- <div class="pf-l-gallery__item">
3594
- <div class="pf-c-card">
3595
- <div class="pf-c-card__body">This is a card</div>
3596
- </div>
3574
+ <div class="pf-c-card">
3575
+ <div class="pf-c-card__body">This is a card</div>
3597
3576
  </div>
3598
- <div class="pf-l-gallery__item">
3599
- <div class="pf-c-card">
3600
- <div class="pf-c-card__body">This is a card</div>
3601
- </div>
3577
+ <div class="pf-c-card">
3578
+ <div class="pf-c-card__body">This is a card</div>
3602
3579
  </div>
3603
- <div class="pf-l-gallery__item">
3604
- <div class="pf-c-card">
3605
- <div class="pf-c-card__body">This is a card</div>
3606
- </div>
3580
+ <div class="pf-c-card">
3581
+ <div class="pf-c-card__body">This is a card</div>
3607
3582
  </div>
3608
- <div class="pf-l-gallery__item">
3609
- <div class="pf-c-card">
3610
- <div class="pf-c-card__body">This is a card</div>
3611
- </div>
3583
+ <div class="pf-c-card">
3584
+ <div class="pf-c-card__body">This is a card</div>
3612
3585
  </div>
3613
- <div class="pf-l-gallery__item">
3614
- <div class="pf-c-card">
3615
- <div class="pf-c-card__body">This is a card</div>
3616
- </div>
3586
+ <div class="pf-c-card">
3587
+ <div class="pf-c-card__body">This is a card</div>
3617
3588
  </div>
3618
3589
  </div>
3619
3590
  </div>