@patternfly/patternfly 4.179.3 → 4.180.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 (29) 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 +4 -1
  5. package/components/MenuToggle/menu-toggle.scss +4 -3
  6. package/components/SearchInput/search-input.css +1 -0
  7. package/components/SearchInput/search-input.scss +1 -0
  8. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  9. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  10. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  11. package/docs/components/FormControl/examples/FormControl.md +0 -11
  12. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  13. package/docs/components/Menu/examples/Menu.md +60 -28
  14. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  15. package/docs/components/Select/examples/Select.md +30 -14
  16. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  17. package/docs/components/TreeView/examples/TreeView.md +15 -7
  18. package/docs/demos/ContextSelector/examples/ContextSelector.md +164 -113
  19. package/docs/demos/DataList/examples/DataList.md +159 -114
  20. package/docs/demos/Masthead/examples/Masthead.md +284 -167
  21. package/docs/demos/Page/examples/Page.md +252 -105
  22. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  23. package/docs/demos/Table/examples/Table.md +1176 -639
  24. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  25. package/package.json +1 -1
  26. package/patternfly-no-reset.css +9 -3
  27. package/patternfly.css +9 -3
  28. package/patternfly.min.css +1 -1
  29. package/patternfly.min.css.map +1 -1
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -316,23 +316,20 @@ wrapperTag: div
316
316
  </button>
317
317
  <div class="pf-c-context-selector__menu" hidden>
318
318
  <div class="pf-c-context-selector__menu-search">
319
- <div class="pf-c-input-group">
320
- <input
321
- class="pf-c-form-control"
322
- type="search"
323
- placeholder="Search"
324
- id="masthead-context-selecton-drilldown-example-masthead-context-selectortextInput1"
325
- name="masthead-context-selecton-drilldown-example-masthead-context-selectortextInput1"
326
- aria-labelledby="masthead-context-selecton-drilldown-example-masthead-context-selector-search-button"
327
- />
328
- <button
329
- class="pf-c-button pf-m-control"
330
- type="button"
331
- id="masthead-context-selecton-drilldown-example-masthead-context-selector-search-button"
332
- aria-label="Search menu items"
333
- >
334
- <i class="fas fa-search" aria-hidden="true"></i>
335
- </button>
319
+ <div class="pf-c-search-input">
320
+ <div class="pf-c-search-input__bar">
321
+ <span class="pf-c-search-input__text">
322
+ <span class="pf-c-search-input__icon">
323
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
324
+ </span>
325
+ <input
326
+ class="pf-c-search-input__text-input"
327
+ type="text"
328
+ placeholder="Search"
329
+ aria-label="Search"
330
+ />
331
+ </span>
332
+ </div>
336
333
  </div>
337
334
  </div>
338
335
  <ul class="pf-c-context-selector__menu-list">
@@ -737,64 +734,91 @@ wrapperTag: div
737
734
  aria-label="search filter"
738
735
  role="group"
739
736
  >
740
- <div class="pf-c-dropdown">
737
+ <div class="pf-c-select" style="width: 175px">
738
+ <span
739
+ id="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
740
+ hidden
741
+ >Choose one</span>
742
+
741
743
  <button
742
- class="pf-c-dropdown__toggle"
743
- id="masthead-toolbar-filters-example-masthead-toolbar-masthead-toolbar-filters-example-masthead-content-button"
744
- aria-expanded="false"
744
+ class="pf-c-select__toggle"
745
745
  type="button"
746
+ id="masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
747
+ aria-haspopup="true"
748
+ aria-expanded="false"
749
+ aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label masthead-toolbar-filters-example-masthead-toolbar-select-name-toggle"
746
750
  >
747
- <span class="pf-c-dropdown__toggle-text">Name</span>
748
- <span class="pf-c-dropdown__toggle-icon">
751
+ <div class="pf-c-select__toggle-wrapper">
752
+ <span class="pf-c-select__toggle-icon">
753
+ <i class="fas fa-filter" aria-hidden="true"></i>
754
+ </span>
755
+ <span class="pf-c-select__toggle-text">Name</span>
756
+ </div>
757
+ <span class="pf-c-select__toggle-arrow">
749
758
  <i class="fas fa-caret-down" aria-hidden="true"></i>
750
759
  </span>
751
760
  </button>
761
+
752
762
  <ul
753
- class="pf-c-dropdown__menu"
754
- aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-masthead-toolbar-filters-example-masthead-content-button"
763
+ class="pf-c-select__menu"
764
+ role="listbox"
765
+ aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
755
766
  hidden
767
+ style="width: 175px"
756
768
  >
757
- <li>
758
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
769
+ <li role="presentation">
770
+ <button
771
+ class="pf-c-select__menu-item"
772
+ role="option"
773
+ >Running</button>
759
774
  </li>
760
- <li>
775
+ <li role="presentation">
761
776
  <button
762
- class="pf-c-dropdown__menu-item"
763
- type="button"
764
- >Action</button>
777
+ class="pf-c-select__menu-item pf-m-selected"
778
+ role="option"
779
+ aria-selected="true"
780
+ >
781
+ Stopped
782
+ <span class="pf-c-select__menu-item-icon">
783
+ <i class="fas fa-check" aria-hidden="true"></i>
784
+ </span>
785
+ </button>
765
786
  </li>
766
- <li>
767
- <a
768
- class="pf-c-dropdown__menu-item pf-m-disabled"
769
- href="#"
770
- aria-disabled="true"
771
- tabindex="-1"
772
- >Disabled link</a>
787
+ <li role="presentation">
788
+ <button
789
+ class="pf-c-select__menu-item"
790
+ role="option"
791
+ >Down</button>
773
792
  </li>
774
- <li>
793
+ <li role="presentation">
775
794
  <button
776
- class="pf-c-dropdown__menu-item"
777
- type="button"
778
- disabled
779
- >Disabled action</button>
795
+ class="pf-c-select__menu-item"
796
+ role="option"
797
+ >Degraded</button>
780
798
  </li>
781
- <li class="pf-c-divider" role="separator"></li>
782
- <li>
783
- <a
784
- class="pf-c-dropdown__menu-item"
785
- href="#"
786
- >Separated link</a>
799
+ <li role="presentation">
800
+ <button
801
+ class="pf-c-select__menu-item"
802
+ role="option"
803
+ >Needs maintenance</button>
787
804
  </li>
788
805
  </ul>
789
806
  </div>
790
- <input
791
- class="pf-c-form-control"
792
- type="search"
793
- id="masthead-toolbar-filters-example-masthead-toolbar-masthead-toolbar-filters-example-masthead-content-search-filter-input"
794
- name="masthead-toolbar-filters-example-masthead-toolbar-search-filter-input"
795
- aria-label="input with dropdown and button"
796
- aria-describedby="masthead-toolbar-filters-example-masthead-toolbar-masthead-toolbar-filters-example-masthead-content-button"
797
- />
807
+ <div class="pf-c-search-input">
808
+ <div class="pf-c-search-input__bar">
809
+ <span class="pf-c-search-input__text">
810
+ <span class="pf-c-search-input__icon">
811
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
812
+ </span>
813
+ <input
814
+ class="pf-c-search-input__text-input"
815
+ type="text"
816
+ placeholder="Filter by name"
817
+ aria-label="Filter by name"
818
+ />
819
+ </span>
820
+ </div>
821
+ </div>
798
822
  </div>
799
823
  </div>
800
824
  </div>
@@ -1063,64 +1087,91 @@ wrapperTag: div
1063
1087
  aria-label="search filter"
1064
1088
  role="group"
1065
1089
  >
1066
- <div class="pf-c-dropdown">
1090
+ <div class="pf-c-select" style="width: 175px">
1091
+ <span
1092
+ id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1093
+ hidden
1094
+ >Choose one</span>
1095
+
1067
1096
  <button
1068
- class="pf-c-dropdown__toggle"
1069
- id="masthead-toggle-group-filters-example-masthead-toolbar-masthead-toggle-group-filters-example-masthead-content-button"
1070
- aria-expanded="false"
1097
+ class="pf-c-select__toggle"
1071
1098
  type="button"
1099
+ id="masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1100
+ aria-haspopup="true"
1101
+ aria-expanded="false"
1102
+ aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-example-masthead-toolbar-select-name-toggle"
1072
1103
  >
1073
- <span class="pf-c-dropdown__toggle-text">Name</span>
1074
- <span class="pf-c-dropdown__toggle-icon">
1104
+ <div class="pf-c-select__toggle-wrapper">
1105
+ <span class="pf-c-select__toggle-icon">
1106
+ <i class="fas fa-filter" aria-hidden="true"></i>
1107
+ </span>
1108
+ <span class="pf-c-select__toggle-text">Name</span>
1109
+ </div>
1110
+ <span class="pf-c-select__toggle-arrow">
1075
1111
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1076
1112
  </span>
1077
1113
  </button>
1114
+
1078
1115
  <ul
1079
- class="pf-c-dropdown__menu"
1080
- aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-masthead-toggle-group-filters-example-masthead-content-button"
1116
+ class="pf-c-select__menu"
1117
+ role="listbox"
1118
+ aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
1081
1119
  hidden
1120
+ style="width: 175px"
1082
1121
  >
1083
- <li>
1084
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1122
+ <li role="presentation">
1123
+ <button
1124
+ class="pf-c-select__menu-item"
1125
+ role="option"
1126
+ >Running</button>
1085
1127
  </li>
1086
- <li>
1128
+ <li role="presentation">
1087
1129
  <button
1088
- class="pf-c-dropdown__menu-item"
1089
- type="button"
1090
- >Action</button>
1130
+ class="pf-c-select__menu-item pf-m-selected"
1131
+ role="option"
1132
+ aria-selected="true"
1133
+ >
1134
+ Stopped
1135
+ <span class="pf-c-select__menu-item-icon">
1136
+ <i class="fas fa-check" aria-hidden="true"></i>
1137
+ </span>
1138
+ </button>
1091
1139
  </li>
1092
- <li>
1093
- <a
1094
- class="pf-c-dropdown__menu-item pf-m-disabled"
1095
- href="#"
1096
- aria-disabled="true"
1097
- tabindex="-1"
1098
- >Disabled link</a>
1140
+ <li role="presentation">
1141
+ <button
1142
+ class="pf-c-select__menu-item"
1143
+ role="option"
1144
+ >Down</button>
1099
1145
  </li>
1100
- <li>
1146
+ <li role="presentation">
1101
1147
  <button
1102
- class="pf-c-dropdown__menu-item"
1103
- type="button"
1104
- disabled
1105
- >Disabled action</button>
1148
+ class="pf-c-select__menu-item"
1149
+ role="option"
1150
+ >Degraded</button>
1106
1151
  </li>
1107
- <li class="pf-c-divider" role="separator"></li>
1108
- <li>
1109
- <a
1110
- class="pf-c-dropdown__menu-item"
1111
- href="#"
1112
- >Separated link</a>
1152
+ <li role="presentation">
1153
+ <button
1154
+ class="pf-c-select__menu-item"
1155
+ role="option"
1156
+ >Needs maintenance</button>
1113
1157
  </li>
1114
1158
  </ul>
1115
1159
  </div>
1116
- <input
1117
- class="pf-c-form-control"
1118
- type="search"
1119
- id="masthead-toggle-group-filters-example-masthead-toolbar-masthead-toggle-group-filters-example-masthead-content-search-filter-input"
1120
- name="masthead-toggle-group-filters-example-masthead-toolbar-search-filter-input"
1121
- aria-label="input with dropdown and button"
1122
- aria-describedby="masthead-toggle-group-filters-example-masthead-toolbar-masthead-toggle-group-filters-example-masthead-content-button"
1123
- />
1160
+ <div class="pf-c-search-input">
1161
+ <div class="pf-c-search-input__bar">
1162
+ <span class="pf-c-search-input__text">
1163
+ <span class="pf-c-search-input__icon">
1164
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1165
+ </span>
1166
+ <input
1167
+ class="pf-c-search-input__text-input"
1168
+ type="text"
1169
+ placeholder="Filter by name"
1170
+ aria-label="Filter by name"
1171
+ />
1172
+ </span>
1173
+ </div>
1174
+ </div>
1124
1175
  </div>
1125
1176
  </div>
1126
1177
  </div>
@@ -1406,14 +1457,24 @@ wrapperTag: div
1406
1457
  hidden
1407
1458
  >
1408
1459
  <div class="pf-c-app-launcher__menu-search">
1409
- <input
1410
- class="pf-c-form-control"
1411
- type="search"
1412
- aria-label="Type to filter"
1413
- placeholder="Filter by name..."
1414
- id="masthead-advanced-with-menu-example-masthead-application-launcher-text-input"
1415
- name="textInput1"
1416
- />
1460
+ <div class="pf-c-search-input">
1461
+ <div class="pf-c-search-input__bar">
1462
+ <span class="pf-c-search-input__text">
1463
+ <span class="pf-c-search-input__icon">
1464
+ <i
1465
+ class="fas fa-search fa-fw"
1466
+ aria-hidden="true"
1467
+ ></i>
1468
+ </span>
1469
+ <input
1470
+ class="pf-c-search-input__text-input"
1471
+ type="text"
1472
+ placeholder="Filter by name"
1473
+ aria-label="Filter by name"
1474
+ />
1475
+ </span>
1476
+ </div>
1477
+ </div>
1417
1478
  </div>
1418
1479
  <section class="pf-c-app-launcher__group">
1419
1480
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -1895,13 +1956,24 @@ wrapperTag: div
1895
1956
  </div>
1896
1957
  <div class="pf-c-menu__search">
1897
1958
  <div class="pf-c-menu__search-input">
1898
- <input
1899
- class="pf-c-form-control pf-m-search"
1900
- type="search"
1901
- id="masthead-advanced-with-menu-example-masthead-drilldown-menu-list-3-search-input"
1902
- name="masthead-advanced-with-menu-example-masthead-drilldown-menu-list-3-search-input"
1903
- aria-label="Search"
1904
- />
1959
+ <div class="pf-c-search-input">
1960
+ <div class="pf-c-search-input__bar">
1961
+ <span class="pf-c-search-input__text">
1962
+ <span class="pf-c-search-input__icon">
1963
+ <i
1964
+ class="fas fa-search fa-fw"
1965
+ aria-hidden="true"
1966
+ ></i>
1967
+ </span>
1968
+ <input
1969
+ class="pf-c-search-input__text-input"
1970
+ type="text"
1971
+ placeholder="Search"
1972
+ aria-label="Search"
1973
+ />
1974
+ </span>
1975
+ </div>
1976
+ </div>
1905
1977
  </div>
1906
1978
  </div>
1907
1979
  <hr class="pf-c-divider" />
@@ -2366,14 +2438,24 @@ wrapperTag: div
2366
2438
  hidden
2367
2439
  >
2368
2440
  <div class="pf-c-app-launcher__menu-search">
2369
- <input
2370
- class="pf-c-form-control"
2371
- type="search"
2372
- aria-label="Type to filter"
2373
- placeholder="Filter by name..."
2374
- id="masthead-horizontal-nav-masthead-application-launcher-text-input"
2375
- name="textInput1"
2376
- />
2441
+ <div class="pf-c-search-input">
2442
+ <div class="pf-c-search-input__bar">
2443
+ <span class="pf-c-search-input__text">
2444
+ <span class="pf-c-search-input__icon">
2445
+ <i
2446
+ class="fas fa-search fa-fw"
2447
+ aria-hidden="true"
2448
+ ></i>
2449
+ </span>
2450
+ <input
2451
+ class="pf-c-search-input__text-input"
2452
+ type="text"
2453
+ placeholder="Filter by name"
2454
+ aria-label="Filter by name"
2455
+ />
2456
+ </span>
2457
+ </div>
2458
+ </div>
2377
2459
  </div>
2378
2460
  <section class="pf-c-app-launcher__group">
2379
2461
  <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
@@ -2855,13 +2937,24 @@ wrapperTag: div
2855
2937
  </div>
2856
2938
  <div class="pf-c-menu__search">
2857
2939
  <div class="pf-c-menu__search-input">
2858
- <input
2859
- class="pf-c-form-control pf-m-search"
2860
- type="search"
2861
- id="masthead-horizontal-nav-masthead-drilldown-menu-list-3-search-input"
2862
- name="masthead-horizontal-nav-masthead-drilldown-menu-list-3-search-input"
2863
- aria-label="Search"
2864
- />
2940
+ <div class="pf-c-search-input">
2941
+ <div class="pf-c-search-input__bar">
2942
+ <span class="pf-c-search-input__text">
2943
+ <span class="pf-c-search-input__icon">
2944
+ <i
2945
+ class="fas fa-search fa-fw"
2946
+ aria-hidden="true"
2947
+ ></i>
2948
+ </span>
2949
+ <input
2950
+ class="pf-c-search-input__text-input"
2951
+ type="text"
2952
+ placeholder="Search"
2953
+ aria-label="Search"
2954
+ />
2955
+ </span>
2956
+ </div>
2957
+ </div>
2865
2958
  </div>
2866
2959
  </div>
2867
2960
  <hr class="pf-c-divider" />
@@ -3303,64 +3396,88 @@ wrapperTag: div
3303
3396
  aria-label="search filter"
3304
3397
  role="group"
3305
3398
  >
3306
- <div class="pf-c-dropdown">
3399
+ <div class="pf-c-select" style="width: 175px">
3400
+ <span
3401
+ id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3402
+ hidden
3403
+ >Choose one</span>
3404
+
3307
3405
  <button
3308
- class="pf-c-dropdown__toggle"
3309
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-button"
3310
- aria-expanded="false"
3406
+ class="pf-c-select__toggle"
3311
3407
  type="button"
3408
+ id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
3409
+ aria-haspopup="true"
3410
+ aria-expanded="false"
3411
+ aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-toggle"
3312
3412
  >
3313
- <span class="pf-c-dropdown__toggle-text">Name</span>
3314
- <span class="pf-c-dropdown__toggle-icon">
3413
+ <div class="pf-c-select__toggle-wrapper">
3414
+ <span class="pf-c-select__toggle-icon">
3415
+ <i class="fas fa-filter" aria-hidden="true"></i>
3416
+ </span>
3417
+ <span class="pf-c-select__toggle-text">Name</span>
3418
+ </div>
3419
+ <span class="pf-c-select__toggle-arrow">
3315
3420
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3316
3421
  </span>
3317
3422
  </button>
3423
+
3318
3424
  <ul
3319
- class="pf-c-dropdown__menu"
3320
- aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-button"
3425
+ class="pf-c-select__menu"
3426
+ role="listbox"
3427
+ aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
3321
3428
  hidden
3429
+ style="width: 175px"
3322
3430
  >
3323
- <li>
3324
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
3431
+ <li role="presentation">
3432
+ <button
3433
+ class="pf-c-select__menu-item"
3434
+ role="option"
3435
+ >Running</button>
3325
3436
  </li>
3326
- <li>
3437
+ <li role="presentation">
3327
3438
  <button
3328
- class="pf-c-dropdown__menu-item"
3329
- type="button"
3330
- >Action</button>
3439
+ class="pf-c-select__menu-item pf-m-selected"
3440
+ role="option"
3441
+ aria-selected="true"
3442
+ >
3443
+ Stopped
3444
+ <span class="pf-c-select__menu-item-icon">
3445
+ <i class="fas fa-check" aria-hidden="true"></i>
3446
+ </span>
3447
+ </button>
3331
3448
  </li>
3332
- <li>
3333
- <a
3334
- class="pf-c-dropdown__menu-item pf-m-disabled"
3335
- href="#"
3336
- aria-disabled="true"
3337
- tabindex="-1"
3338
- >Disabled link</a>
3449
+ <li role="presentation">
3450
+ <button class="pf-c-select__menu-item" role="option">Down</button>
3339
3451
  </li>
3340
- <li>
3452
+ <li role="presentation">
3341
3453
  <button
3342
- class="pf-c-dropdown__menu-item"
3343
- type="button"
3344
- disabled
3345
- >Disabled action</button>
3454
+ class="pf-c-select__menu-item"
3455
+ role="option"
3456
+ >Degraded</button>
3346
3457
  </li>
3347
- <li class="pf-c-divider" role="separator"></li>
3348
- <li>
3349
- <a
3350
- class="pf-c-dropdown__menu-item"
3351
- href="#"
3352
- >Separated link</a>
3458
+ <li role="presentation">
3459
+ <button
3460
+ class="pf-c-select__menu-item"
3461
+ role="option"
3462
+ >Needs maintenance</button>
3353
3463
  </li>
3354
3464
  </ul>
3355
3465
  </div>
3356
- <input
3357
- class="pf-c-form-control"
3358
- type="search"
3359
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-search-filter-input"
3360
- name="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-search-filter-input"
3361
- aria-label="input with dropdown and button"
3362
- aria-describedby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-button"
3363
- />
3466
+ <div class="pf-c-search-input">
3467
+ <div class="pf-c-search-input__bar">
3468
+ <span class="pf-c-search-input__text">
3469
+ <span class="pf-c-search-input__icon">
3470
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3471
+ </span>
3472
+ <input
3473
+ class="pf-c-search-input__text-input"
3474
+ type="text"
3475
+ placeholder="Filter by name"
3476
+ aria-label="Filter by name"
3477
+ />
3478
+ </span>
3479
+ </div>
3480
+ </div>
3364
3481
  </div>
3365
3482
  </div>
3366
3483
  </div>