@patternfly/patternfly 5.0.0-alpha.49 → 5.0.0-alpha.50

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 (72) hide show
  1. package/base/patternfly-variables.css +1 -1
  2. package/components/Breadcrumb/breadcrumb.css +1 -5
  3. package/components/Breadcrumb/breadcrumb.scss +1 -8
  4. package/components/Divider/divider.css +12 -12
  5. package/components/List/list.css +1 -1
  6. package/components/List/list.scss +1 -1
  7. package/components/LogViewer/log-viewer.css +0 -3
  8. package/components/LogViewer/log-viewer.scss +0 -4
  9. package/components/Masthead/masthead.css +12 -12
  10. package/components/MultipleFileUpload/multiple-file-upload.css +3 -3
  11. package/components/MultipleFileUpload/multiple-file-upload.scss +3 -3
  12. package/components/Pagination/pagination.css +12 -12
  13. package/components/Tabs/tabs.css +24 -24
  14. package/components/TextInputGroup/text-input-group.css +1 -5
  15. package/components/TextInputGroup/text-input-group.scss +1 -7
  16. package/components/Toolbar/toolbar.css +54 -54
  17. package/components/_all.scss +1 -2
  18. package/docs/components/AppLauncher/examples/application-launcher.md +8 -7
  19. package/docs/components/Chip/examples/Chip.md +713 -4
  20. package/docs/components/ContextSelector/examples/context-selector.md +12 -12
  21. package/docs/components/DualListSelector/examples/DualListSelector.md +32 -32
  22. package/docs/components/LogViewer/examples/LogViewer.md +40 -40
  23. package/docs/components/Menu/examples/Menu.md +20 -18
  24. package/docs/components/Select/examples/Select.md +16 -14
  25. package/docs/components/TextInputGroup/examples/TextInputGroup.css +0 -13
  26. package/docs/components/TextInputGroup/examples/TextInputGroup.md +21 -21
  27. package/docs/components/Toolbar/examples/Toolbar.md +10 -10
  28. package/docs/components/TreeView/examples/TreeView.md +8 -7
  29. package/docs/demos/AboutModal/examples/AboutModal.md +21 -21
  30. package/docs/demos/Alert/examples/Alert.md +63 -63
  31. package/docs/demos/BackToTop/examples/BackToTop.md +21 -21
  32. package/docs/demos/Banner/examples/Banner.md +42 -42
  33. package/docs/demos/CardView/examples/CardView.md +21 -21
  34. package/docs/demos/ContextSelector/examples/ContextSelector.md +95 -91
  35. package/docs/demos/Dashboard/examples/Dashboard.md +21 -21
  36. package/docs/demos/DataList/examples/DataList.md +104 -105
  37. package/docs/demos/DescriptionList/examples/DescriptionList.md +63 -63
  38. package/docs/demos/Drawer/examples/Drawer.md +105 -105
  39. package/docs/demos/JumpLinks/examples/JumpLinks.md +126 -126
  40. package/docs/demos/Masthead/examples/Masthead.md +56 -55
  41. package/docs/demos/Modal/examples/Modal.md +126 -126
  42. package/docs/demos/Nav/examples/Nav.md +168 -168
  43. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +105 -105
  44. package/docs/demos/Page/examples/Page.md +189 -189
  45. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +153 -153
  46. package/docs/demos/Skeleton/examples/Skeleton.md +21 -21
  47. package/docs/demos/Table/examples/Table.md +339 -339
  48. package/docs/demos/Tabs/examples/Tabs.md +126 -126
  49. package/docs/demos/Toolbar/examples/Toolbar.md +50 -50
  50. package/docs/demos/Wizard/examples/Wizard.md +189 -189
  51. package/docs/layouts/Flex/examples/Flex.md +319 -215
  52. package/layouts/Flex/flex.css +738 -31
  53. package/layouts/Flex/flex.scss +101 -17
  54. package/package.json +1 -1
  55. package/patternfly-base-no-globals.css +1 -1
  56. package/patternfly-base.css +1 -1
  57. package/patternfly-no-globals.css +859 -389
  58. package/patternfly.css +859 -389
  59. package/patternfly.min.css +1 -1
  60. package/patternfly.min.css.map +1 -1
  61. package/sass-utilities/component-namespaces.scss +0 -3
  62. package/sass-utilities/functions.scss +9 -5
  63. package/sass-utilities/themes/dark/scss-variables.scss +1 -4
  64. package/components/Breadcrumb/themes/dark/breadcrumb.scss +0 -7
  65. package/components/SearchInput/search-input.css +0 -199
  66. package/components/SearchInput/search-input.scss +0 -231
  67. package/components/SearchInput/themes/dark/search-input.scss +0 -16
  68. package/docs/components/ChipGroup/examples/ChipGroup.md +0 -716
  69. package/docs/components/SearchInput/examples/SearchInput.css +0 -12
  70. package/docs/components/SearchInput/examples/SearchInput.md +0 -681
  71. /package/components/{ChipGroup → Chip}/chip-group.css +0 -0
  72. /package/components/{ChipGroup → Chip}/chip-group.scss +0 -0
package/docs/demos/Drawer/examples/Drawer.md CHANGED
@@ -75,20 +75,18 @@ wrapperTag: div
75
75
  hidden
76
76
  >
77
77
  <div class="pf-v5-c-app-launcher__menu-search">
78
- <div class="pf-v5-c-search-input">
79
- <div class="pf-v5-c-search-input__bar">
80
- <span class="pf-v5-c-search-input__text">
81
- <span class="pf-v5-c-search-input__icon">
82
- <i
83
- class="fas fa-search fa-fw"
84
- aria-hidden="true"
85
- ></i>
78
+ <div class="pf-v5-c-text-input-group">
79
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
80
+ <span class="pf-v5-c-text-input-group__text">
81
+ <span class="pf-v5-c-text-input-group__icon">
82
+ <i class="fas fa-fw fa-search"></i>
86
83
  </span>
87
84
  <input
88
- class="pf-v5-c-search-input__text-input"
85
+ class="pf-v5-c-text-input-group__text-input"
89
86
  type="text"
90
- placeholder="Filter by name"
91
- aria-label="Filter by name"
87
+ placeholder="Filer by name"
88
+ value
89
+ aria-label="Search input"
92
90
  />
93
91
  </span>
94
92
  </div>
@@ -606,22 +604,24 @@ wrapperTag: div
606
604
  </div>
607
605
  <div class="pf-v5-c-menu__search">
608
606
  <div class="pf-v5-c-menu__search-input">
609
- <div class="pf-v5-c-search-input">
610
- <div class="pf-v5-c-search-input__bar">
611
- <span class="pf-v5-c-search-input__text">
607
+ <div class="pf-v5-c-text-input-group">
608
+ <div
609
+ class="pf-v5-c-text-input-group__main pf-m-icon"
610
+ >
611
+ <span
612
+ class="pf-v5-c-text-input-group__text"
613
+ >
612
614
  <span
613
- class="pf-v5-c-search-input__icon"
615
+ class="pf-v5-c-text-input-group__icon"
614
616
  >
615
- <i
616
- class="fas fa-search fa-fw"
617
- aria-hidden="true"
618
- ></i>
617
+ <i class="fas fa-fw fa-search"></i>
619
618
  </span>
620
619
  <input
621
- class="pf-v5-c-search-input__text-input"
620
+ class="pf-v5-c-text-input-group__text-input"
622
621
  type="text"
623
622
  placeholder="Search"
624
- aria-label="Search"
623
+ value
624
+ aria-label="Search input"
625
625
  />
626
626
  </span>
627
627
  </div>
@@ -1249,20 +1249,18 @@ wrapperTag: div
1249
1249
  hidden
1250
1250
  >
1251
1251
  <div class="pf-v5-c-app-launcher__menu-search">
1252
- <div class="pf-v5-c-search-input">
1253
- <div class="pf-v5-c-search-input__bar">
1254
- <span class="pf-v5-c-search-input__text">
1255
- <span class="pf-v5-c-search-input__icon">
1256
- <i
1257
- class="fas fa-search fa-fw"
1258
- aria-hidden="true"
1259
- ></i>
1252
+ <div class="pf-v5-c-text-input-group">
1253
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
1254
+ <span class="pf-v5-c-text-input-group__text">
1255
+ <span class="pf-v5-c-text-input-group__icon">
1256
+ <i class="fas fa-fw fa-search"></i>
1260
1257
  </span>
1261
1258
  <input
1262
- class="pf-v5-c-search-input__text-input"
1259
+ class="pf-v5-c-text-input-group__text-input"
1263
1260
  type="text"
1264
- placeholder="Filter by name"
1265
- aria-label="Filter by name"
1261
+ placeholder="Filer by name"
1262
+ value
1263
+ aria-label="Search input"
1266
1264
  />
1267
1265
  </span>
1268
1266
  </div>
@@ -1780,22 +1778,24 @@ wrapperTag: div
1780
1778
  </div>
1781
1779
  <div class="pf-v5-c-menu__search">
1782
1780
  <div class="pf-v5-c-menu__search-input">
1783
- <div class="pf-v5-c-search-input">
1784
- <div class="pf-v5-c-search-input__bar">
1785
- <span class="pf-v5-c-search-input__text">
1781
+ <div class="pf-v5-c-text-input-group">
1782
+ <div
1783
+ class="pf-v5-c-text-input-group__main pf-m-icon"
1784
+ >
1785
+ <span
1786
+ class="pf-v5-c-text-input-group__text"
1787
+ >
1786
1788
  <span
1787
- class="pf-v5-c-search-input__icon"
1789
+ class="pf-v5-c-text-input-group__icon"
1788
1790
  >
1789
- <i
1790
- class="fas fa-search fa-fw"
1791
- aria-hidden="true"
1792
- ></i>
1791
+ <i class="fas fa-fw fa-search"></i>
1793
1792
  </span>
1794
1793
  <input
1795
- class="pf-v5-c-search-input__text-input"
1794
+ class="pf-v5-c-text-input-group__text-input"
1796
1795
  type="text"
1797
1796
  placeholder="Search"
1798
- aria-label="Search"
1797
+ value
1798
+ aria-label="Search input"
1799
1799
  />
1800
1800
  </span>
1801
1801
  </div>
@@ -2245,20 +2245,18 @@ wrapperTag: div
2245
2245
  hidden
2246
2246
  >
2247
2247
  <div class="pf-v5-c-app-launcher__menu-search">
2248
- <div class="pf-v5-c-search-input">
2249
- <div class="pf-v5-c-search-input__bar">
2250
- <span class="pf-v5-c-search-input__text">
2251
- <span class="pf-v5-c-search-input__icon">
2252
- <i
2253
- class="fas fa-search fa-fw"
2254
- aria-hidden="true"
2255
- ></i>
2248
+ <div class="pf-v5-c-text-input-group">
2249
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
2250
+ <span class="pf-v5-c-text-input-group__text">
2251
+ <span class="pf-v5-c-text-input-group__icon">
2252
+ <i class="fas fa-fw fa-search"></i>
2256
2253
  </span>
2257
2254
  <input
2258
- class="pf-v5-c-search-input__text-input"
2255
+ class="pf-v5-c-text-input-group__text-input"
2259
2256
  type="text"
2260
- placeholder="Filter by name"
2261
- aria-label="Filter by name"
2257
+ placeholder="Filer by name"
2258
+ value
2259
+ aria-label="Search input"
2262
2260
  />
2263
2261
  </span>
2264
2262
  </div>
@@ -2776,22 +2774,24 @@ wrapperTag: div
2776
2774
  </div>
2777
2775
  <div class="pf-v5-c-menu__search">
2778
2776
  <div class="pf-v5-c-menu__search-input">
2779
- <div class="pf-v5-c-search-input">
2780
- <div class="pf-v5-c-search-input__bar">
2781
- <span class="pf-v5-c-search-input__text">
2777
+ <div class="pf-v5-c-text-input-group">
2778
+ <div
2779
+ class="pf-v5-c-text-input-group__main pf-m-icon"
2780
+ >
2781
+ <span
2782
+ class="pf-v5-c-text-input-group__text"
2783
+ >
2782
2784
  <span
2783
- class="pf-v5-c-search-input__icon"
2785
+ class="pf-v5-c-text-input-group__icon"
2784
2786
  >
2785
- <i
2786
- class="fas fa-search fa-fw"
2787
- aria-hidden="true"
2788
- ></i>
2787
+ <i class="fas fa-fw fa-search"></i>
2789
2788
  </span>
2790
2789
  <input
2791
- class="pf-v5-c-search-input__text-input"
2790
+ class="pf-v5-c-text-input-group__text-input"
2792
2791
  type="text"
2793
2792
  placeholder="Search"
2794
- aria-label="Search"
2793
+ value
2794
+ aria-label="Search input"
2795
2795
  />
2796
2796
  </span>
2797
2797
  </div>
@@ -3241,20 +3241,18 @@ wrapperTag: div
3241
3241
  hidden
3242
3242
  >
3243
3243
  <div class="pf-v5-c-app-launcher__menu-search">
3244
- <div class="pf-v5-c-search-input">
3245
- <div class="pf-v5-c-search-input__bar">
3246
- <span class="pf-v5-c-search-input__text">
3247
- <span class="pf-v5-c-search-input__icon">
3248
- <i
3249
- class="fas fa-search fa-fw"
3250
- aria-hidden="true"
3251
- ></i>
3244
+ <div class="pf-v5-c-text-input-group">
3245
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
3246
+ <span class="pf-v5-c-text-input-group__text">
3247
+ <span class="pf-v5-c-text-input-group__icon">
3248
+ <i class="fas fa-fw fa-search"></i>
3252
3249
  </span>
3253
3250
  <input
3254
- class="pf-v5-c-search-input__text-input"
3251
+ class="pf-v5-c-text-input-group__text-input"
3255
3252
  type="text"
3256
- placeholder="Filter by name"
3257
- aria-label="Filter by name"
3253
+ placeholder="Filer by name"
3254
+ value
3255
+ aria-label="Search input"
3258
3256
  />
3259
3257
  </span>
3260
3258
  </div>
@@ -3772,22 +3770,24 @@ wrapperTag: div
3772
3770
  </div>
3773
3771
  <div class="pf-v5-c-menu__search">
3774
3772
  <div class="pf-v5-c-menu__search-input">
3775
- <div class="pf-v5-c-search-input">
3776
- <div class="pf-v5-c-search-input__bar">
3777
- <span class="pf-v5-c-search-input__text">
3773
+ <div class="pf-v5-c-text-input-group">
3774
+ <div
3775
+ class="pf-v5-c-text-input-group__main pf-m-icon"
3776
+ >
3777
+ <span
3778
+ class="pf-v5-c-text-input-group__text"
3779
+ >
3778
3780
  <span
3779
- class="pf-v5-c-search-input__icon"
3781
+ class="pf-v5-c-text-input-group__icon"
3780
3782
  >
3781
- <i
3782
- class="fas fa-search fa-fw"
3783
- aria-hidden="true"
3784
- ></i>
3783
+ <i class="fas fa-fw fa-search"></i>
3785
3784
  </span>
3786
3785
  <input
3787
- class="pf-v5-c-search-input__text-input"
3786
+ class="pf-v5-c-text-input-group__text-input"
3788
3787
  type="text"
3789
3788
  placeholder="Search"
3790
- aria-label="Search"
3789
+ value
3790
+ aria-label="Search input"
3791
3791
  />
3792
3792
  </span>
3793
3793
  </div>
@@ -4255,20 +4255,18 @@ wrapperTag: div
4255
4255
  hidden
4256
4256
  >
4257
4257
  <div class="pf-v5-c-app-launcher__menu-search">
4258
- <div class="pf-v5-c-search-input">
4259
- <div class="pf-v5-c-search-input__bar">
4260
- <span class="pf-v5-c-search-input__text">
4261
- <span class="pf-v5-c-search-input__icon">
4262
- <i
4263
- class="fas fa-search fa-fw"
4264
- aria-hidden="true"
4265
- ></i>
4258
+ <div class="pf-v5-c-text-input-group">
4259
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
4260
+ <span class="pf-v5-c-text-input-group__text">
4261
+ <span class="pf-v5-c-text-input-group__icon">
4262
+ <i class="fas fa-fw fa-search"></i>
4266
4263
  </span>
4267
4264
  <input
4268
- class="pf-v5-c-search-input__text-input"
4265
+ class="pf-v5-c-text-input-group__text-input"
4269
4266
  type="text"
4270
- placeholder="Filter by name"
4271
- aria-label="Filter by name"
4267
+ placeholder="Filer by name"
4268
+ value
4269
+ aria-label="Search input"
4272
4270
  />
4273
4271
  </span>
4274
4272
  </div>
@@ -4786,22 +4784,24 @@ wrapperTag: div
4786
4784
  </div>
4787
4785
  <div class="pf-v5-c-menu__search">
4788
4786
  <div class="pf-v5-c-menu__search-input">
4789
- <div class="pf-v5-c-search-input">
4790
- <div class="pf-v5-c-search-input__bar">
4791
- <span class="pf-v5-c-search-input__text">
4787
+ <div class="pf-v5-c-text-input-group">
4788
+ <div
4789
+ class="pf-v5-c-text-input-group__main pf-m-icon"
4790
+ >
4791
+ <span
4792
+ class="pf-v5-c-text-input-group__text"
4793
+ >
4792
4794
  <span
4793
- class="pf-v5-c-search-input__icon"
4795
+ class="pf-v5-c-text-input-group__icon"
4794
4796
  >
4795
- <i
4796
- class="fas fa-search fa-fw"
4797
- aria-hidden="true"
4798
- ></i>
4797
+ <i class="fas fa-fw fa-search"></i>
4799
4798
  </span>
4800
4799
  <input
4801
- class="pf-v5-c-search-input__text-input"
4800
+ class="pf-v5-c-text-input-group__text-input"
4802
4801
  type="text"
4803
4802
  placeholder="Search"
4804
- aria-label="Search"
4803
+ value
4804
+ aria-label="Search input"
4805
4805
  />
4806
4806
  </span>
4807
4807
  </div>