@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/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -85,20 +85,18 @@ section: components
85
85
  hidden
86
86
  >
87
87
  <div class="pf-v5-c-app-launcher__menu-search">
88
- <div class="pf-v5-c-search-input">
89
- <div class="pf-v5-c-search-input__bar">
90
- <span class="pf-v5-c-search-input__text">
91
- <span class="pf-v5-c-search-input__icon">
92
- <i
93
- class="fas fa-search fa-fw"
94
- aria-hidden="true"
95
- ></i>
88
+ <div class="pf-v5-c-text-input-group">
89
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
90
+ <span class="pf-v5-c-text-input-group__text">
91
+ <span class="pf-v5-c-text-input-group__icon">
92
+ <i class="fas fa-fw fa-search"></i>
96
93
  </span>
97
94
  <input
98
- class="pf-v5-c-search-input__text-input"
95
+ class="pf-v5-c-text-input-group__text-input"
99
96
  type="text"
100
- placeholder="Filter by name"
101
- aria-label="Filter by name"
97
+ placeholder="Filer by name"
98
+ value
99
+ aria-label="Search input"
102
100
  />
103
101
  </span>
104
102
  </div>
@@ -616,22 +614,24 @@ section: components
616
614
  </div>
617
615
  <div class="pf-v5-c-menu__search">
618
616
  <div class="pf-v5-c-menu__search-input">
619
- <div class="pf-v5-c-search-input">
620
- <div class="pf-v5-c-search-input__bar">
621
- <span class="pf-v5-c-search-input__text">
617
+ <div class="pf-v5-c-text-input-group">
618
+ <div
619
+ class="pf-v5-c-text-input-group__main pf-m-icon"
620
+ >
621
+ <span
622
+ class="pf-v5-c-text-input-group__text"
623
+ >
622
624
  <span
623
- class="pf-v5-c-search-input__icon"
625
+ class="pf-v5-c-text-input-group__icon"
624
626
  >
625
- <i
626
- class="fas fa-search fa-fw"
627
- aria-hidden="true"
628
- ></i>
627
+ <i class="fas fa-fw fa-search"></i>
629
628
  </span>
630
629
  <input
631
- class="pf-v5-c-search-input__text-input"
630
+ class="pf-v5-c-text-input-group__text-input"
632
631
  type="text"
633
632
  placeholder="Search"
634
- aria-label="Search"
633
+ value
634
+ aria-label="Search input"
635
635
  />
636
636
  </span>
637
637
  </div>
@@ -1679,20 +1679,18 @@ section: components
1679
1679
  hidden
1680
1680
  >
1681
1681
  <div class="pf-v5-c-app-launcher__menu-search">
1682
- <div class="pf-v5-c-search-input">
1683
- <div class="pf-v5-c-search-input__bar">
1684
- <span class="pf-v5-c-search-input__text">
1685
- <span class="pf-v5-c-search-input__icon">
1686
- <i
1687
- class="fas fa-search fa-fw"
1688
- aria-hidden="true"
1689
- ></i>
1682
+ <div class="pf-v5-c-text-input-group">
1683
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
1684
+ <span class="pf-v5-c-text-input-group__text">
1685
+ <span class="pf-v5-c-text-input-group__icon">
1686
+ <i class="fas fa-fw fa-search"></i>
1690
1687
  </span>
1691
1688
  <input
1692
- class="pf-v5-c-search-input__text-input"
1689
+ class="pf-v5-c-text-input-group__text-input"
1693
1690
  type="text"
1694
- placeholder="Filter by name"
1695
- aria-label="Filter by name"
1691
+ placeholder="Filer by name"
1692
+ value
1693
+ aria-label="Search input"
1696
1694
  />
1697
1695
  </span>
1698
1696
  </div>
@@ -2210,22 +2208,24 @@ section: components
2210
2208
  </div>
2211
2209
  <div class="pf-v5-c-menu__search">
2212
2210
  <div class="pf-v5-c-menu__search-input">
2213
- <div class="pf-v5-c-search-input">
2214
- <div class="pf-v5-c-search-input__bar">
2215
- <span class="pf-v5-c-search-input__text">
2211
+ <div class="pf-v5-c-text-input-group">
2212
+ <div
2213
+ class="pf-v5-c-text-input-group__main pf-m-icon"
2214
+ >
2215
+ <span
2216
+ class="pf-v5-c-text-input-group__text"
2217
+ >
2216
2218
  <span
2217
- class="pf-v5-c-search-input__icon"
2219
+ class="pf-v5-c-text-input-group__icon"
2218
2220
  >
2219
- <i
2220
- class="fas fa-search fa-fw"
2221
- aria-hidden="true"
2222
- ></i>
2221
+ <i class="fas fa-fw fa-search"></i>
2223
2222
  </span>
2224
2223
  <input
2225
- class="pf-v5-c-search-input__text-input"
2224
+ class="pf-v5-c-text-input-group__text-input"
2226
2225
  type="text"
2227
2226
  placeholder="Search"
2228
- aria-label="Search"
2227
+ value
2228
+ aria-label="Search input"
2229
2229
  />
2230
2230
  </span>
2231
2231
  </div>
@@ -3273,20 +3273,18 @@ section: components
3273
3273
  hidden
3274
3274
  >
3275
3275
  <div class="pf-v5-c-app-launcher__menu-search">
3276
- <div class="pf-v5-c-search-input">
3277
- <div class="pf-v5-c-search-input__bar">
3278
- <span class="pf-v5-c-search-input__text">
3279
- <span class="pf-v5-c-search-input__icon">
3280
- <i
3281
- class="fas fa-search fa-fw"
3282
- aria-hidden="true"
3283
- ></i>
3276
+ <div class="pf-v5-c-text-input-group">
3277
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
3278
+ <span class="pf-v5-c-text-input-group__text">
3279
+ <span class="pf-v5-c-text-input-group__icon">
3280
+ <i class="fas fa-fw fa-search"></i>
3284
3281
  </span>
3285
3282
  <input
3286
- class="pf-v5-c-search-input__text-input"
3283
+ class="pf-v5-c-text-input-group__text-input"
3287
3284
  type="text"
3288
- placeholder="Filter by name"
3289
- aria-label="Filter by name"
3285
+ placeholder="Filer by name"
3286
+ value
3287
+ aria-label="Search input"
3290
3288
  />
3291
3289
  </span>
3292
3290
  </div>
@@ -3804,22 +3802,24 @@ section: components
3804
3802
  </div>
3805
3803
  <div class="pf-v5-c-menu__search">
3806
3804
  <div class="pf-v5-c-menu__search-input">
3807
- <div class="pf-v5-c-search-input">
3808
- <div class="pf-v5-c-search-input__bar">
3809
- <span class="pf-v5-c-search-input__text">
3805
+ <div class="pf-v5-c-text-input-group">
3806
+ <div
3807
+ class="pf-v5-c-text-input-group__main pf-m-icon"
3808
+ >
3809
+ <span
3810
+ class="pf-v5-c-text-input-group__text"
3811
+ >
3810
3812
  <span
3811
- class="pf-v5-c-search-input__icon"
3813
+ class="pf-v5-c-text-input-group__icon"
3812
3814
  >
3813
- <i
3814
- class="fas fa-search fa-fw"
3815
- aria-hidden="true"
3816
- ></i>
3815
+ <i class="fas fa-fw fa-search"></i>
3817
3816
  </span>
3818
3817
  <input
3819
- class="pf-v5-c-search-input__text-input"
3818
+ class="pf-v5-c-text-input-group__text-input"
3820
3819
  type="text"
3821
3820
  placeholder="Search"
3822
- aria-label="Search"
3821
+ value
3822
+ aria-label="Search input"
3823
3823
  />
3824
3824
  </span>
3825
3825
  </div>
@@ -4870,20 +4870,18 @@ section: components
4870
4870
  hidden
4871
4871
  >
4872
4872
  <div class="pf-v5-c-app-launcher__menu-search">
4873
- <div class="pf-v5-c-search-input">
4874
- <div class="pf-v5-c-search-input__bar">
4875
- <span class="pf-v5-c-search-input__text">
4876
- <span class="pf-v5-c-search-input__icon">
4877
- <i
4878
- class="fas fa-search fa-fw"
4879
- aria-hidden="true"
4880
- ></i>
4873
+ <div class="pf-v5-c-text-input-group">
4874
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
4875
+ <span class="pf-v5-c-text-input-group__text">
4876
+ <span class="pf-v5-c-text-input-group__icon">
4877
+ <i class="fas fa-fw fa-search"></i>
4881
4878
  </span>
4882
4879
  <input
4883
- class="pf-v5-c-search-input__text-input"
4880
+ class="pf-v5-c-text-input-group__text-input"
4884
4881
  type="text"
4885
- placeholder="Filter by name"
4886
- aria-label="Filter by name"
4882
+ placeholder="Filer by name"
4883
+ value
4884
+ aria-label="Search input"
4887
4885
  />
4888
4886
  </span>
4889
4887
  </div>
@@ -5401,22 +5399,24 @@ section: components
5401
5399
  </div>
5402
5400
  <div class="pf-v5-c-menu__search">
5403
5401
  <div class="pf-v5-c-menu__search-input">
5404
- <div class="pf-v5-c-search-input">
5405
- <div class="pf-v5-c-search-input__bar">
5406
- <span class="pf-v5-c-search-input__text">
5402
+ <div class="pf-v5-c-text-input-group">
5403
+ <div
5404
+ class="pf-v5-c-text-input-group__main pf-m-icon"
5405
+ >
5406
+ <span
5407
+ class="pf-v5-c-text-input-group__text"
5408
+ >
5407
5409
  <span
5408
- class="pf-v5-c-search-input__icon"
5410
+ class="pf-v5-c-text-input-group__icon"
5409
5411
  >
5410
- <i
5411
- class="fas fa-search fa-fw"
5412
- aria-hidden="true"
5413
- ></i>
5412
+ <i class="fas fa-fw fa-search"></i>
5414
5413
  </span>
5415
5414
  <input
5416
- class="pf-v5-c-search-input__text-input"
5415
+ class="pf-v5-c-text-input-group__text-input"
5417
5416
  type="text"
5418
5417
  placeholder="Search"
5419
- aria-label="Search"
5418
+ value
5419
+ aria-label="Search input"
5420
5420
  />
5421
5421
  </span>
5422
5422
  </div>
@@ -6466,20 +6466,18 @@ section: components
6466
6466
  hidden
6467
6467
  >
6468
6468
  <div class="pf-v5-c-app-launcher__menu-search">
6469
- <div class="pf-v5-c-search-input">
6470
- <div class="pf-v5-c-search-input__bar">
6471
- <span class="pf-v5-c-search-input__text">
6472
- <span class="pf-v5-c-search-input__icon">
6473
- <i
6474
- class="fas fa-search fa-fw"
6475
- aria-hidden="true"
6476
- ></i>
6469
+ <div class="pf-v5-c-text-input-group">
6470
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
6471
+ <span class="pf-v5-c-text-input-group__text">
6472
+ <span class="pf-v5-c-text-input-group__icon">
6473
+ <i class="fas fa-fw fa-search"></i>
6477
6474
  </span>
6478
6475
  <input
6479
- class="pf-v5-c-search-input__text-input"
6476
+ class="pf-v5-c-text-input-group__text-input"
6480
6477
  type="text"
6481
- placeholder="Filter by name"
6482
- aria-label="Filter by name"
6478
+ placeholder="Filer by name"
6479
+ value
6480
+ aria-label="Search input"
6483
6481
  />
6484
6482
  </span>
6485
6483
  </div>
@@ -6997,22 +6995,24 @@ section: components
6997
6995
  </div>
6998
6996
  <div class="pf-v5-c-menu__search">
6999
6997
  <div class="pf-v5-c-menu__search-input">
7000
- <div class="pf-v5-c-search-input">
7001
- <div class="pf-v5-c-search-input__bar">
7002
- <span class="pf-v5-c-search-input__text">
6998
+ <div class="pf-v5-c-text-input-group">
6999
+ <div
7000
+ class="pf-v5-c-text-input-group__main pf-m-icon"
7001
+ >
7002
+ <span
7003
+ class="pf-v5-c-text-input-group__text"
7004
+ >
7003
7005
  <span
7004
- class="pf-v5-c-search-input__icon"
7006
+ class="pf-v5-c-text-input-group__icon"
7005
7007
  >
7006
- <i
7007
- class="fas fa-search fa-fw"
7008
- aria-hidden="true"
7009
- ></i>
7008
+ <i class="fas fa-fw fa-search"></i>
7010
7009
  </span>
7011
7010
  <input
7012
- class="pf-v5-c-search-input__text-input"
7011
+ class="pf-v5-c-text-input-group__text-input"
7013
7012
  type="text"
7014
7013
  placeholder="Search"
7015
- aria-label="Search"
7014
+ value
7015
+ aria-label="Search input"
7016
7016
  />
7017
7017
  </span>
7018
7018
  </div>