@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/Modal/examples/Modal.md CHANGED
@@ -74,20 +74,18 @@ section: components
74
74
  hidden
75
75
  >
76
76
  <div class="pf-v5-c-app-launcher__menu-search">
77
- <div class="pf-v5-c-search-input">
78
- <div class="pf-v5-c-search-input__bar">
79
- <span class="pf-v5-c-search-input__text">
80
- <span class="pf-v5-c-search-input__icon">
81
- <i
82
- class="fas fa-search fa-fw"
83
- aria-hidden="true"
84
- ></i>
77
+ <div class="pf-v5-c-text-input-group">
78
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
79
+ <span class="pf-v5-c-text-input-group__text">
80
+ <span class="pf-v5-c-text-input-group__icon">
81
+ <i class="fas fa-fw fa-search"></i>
85
82
  </span>
86
83
  <input
87
- class="pf-v5-c-search-input__text-input"
84
+ class="pf-v5-c-text-input-group__text-input"
88
85
  type="text"
89
- placeholder="Filter by name"
90
- aria-label="Filter by name"
86
+ placeholder="Filer by name"
87
+ value
88
+ aria-label="Search input"
91
89
  />
92
90
  </span>
93
91
  </div>
@@ -605,22 +603,24 @@ section: components
605
603
  </div>
606
604
  <div class="pf-v5-c-menu__search">
607
605
  <div class="pf-v5-c-menu__search-input">
608
- <div class="pf-v5-c-search-input">
609
- <div class="pf-v5-c-search-input__bar">
610
- <span class="pf-v5-c-search-input__text">
606
+ <div class="pf-v5-c-text-input-group">
607
+ <div
608
+ class="pf-v5-c-text-input-group__main pf-m-icon"
609
+ >
610
+ <span
611
+ class="pf-v5-c-text-input-group__text"
612
+ >
611
613
  <span
612
- class="pf-v5-c-search-input__icon"
614
+ class="pf-v5-c-text-input-group__icon"
613
615
  >
614
- <i
615
- class="fas fa-search fa-fw"
616
- aria-hidden="true"
617
- ></i>
616
+ <i class="fas fa-fw fa-search"></i>
618
617
  </span>
619
618
  <input
620
- class="pf-v5-c-search-input__text-input"
619
+ class="pf-v5-c-text-input-group__text-input"
621
620
  type="text"
622
621
  placeholder="Search"
623
- aria-label="Search"
622
+ value
623
+ aria-label="Search input"
624
624
  />
625
625
  </span>
626
626
  </div>
@@ -1087,20 +1087,18 @@ section: components
1087
1087
  hidden
1088
1088
  >
1089
1089
  <div class="pf-v5-c-app-launcher__menu-search">
1090
- <div class="pf-v5-c-search-input">
1091
- <div class="pf-v5-c-search-input__bar">
1092
- <span class="pf-v5-c-search-input__text">
1093
- <span class="pf-v5-c-search-input__icon">
1094
- <i
1095
- class="fas fa-search fa-fw"
1096
- aria-hidden="true"
1097
- ></i>
1090
+ <div class="pf-v5-c-text-input-group">
1091
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
1092
+ <span class="pf-v5-c-text-input-group__text">
1093
+ <span class="pf-v5-c-text-input-group__icon">
1094
+ <i class="fas fa-fw fa-search"></i>
1098
1095
  </span>
1099
1096
  <input
1100
- class="pf-v5-c-search-input__text-input"
1097
+ class="pf-v5-c-text-input-group__text-input"
1101
1098
  type="text"
1102
- placeholder="Filter by name"
1103
- aria-label="Filter by name"
1099
+ placeholder="Filer by name"
1100
+ value
1101
+ aria-label="Search input"
1104
1102
  />
1105
1103
  </span>
1106
1104
  </div>
@@ -1618,22 +1616,24 @@ section: components
1618
1616
  </div>
1619
1617
  <div class="pf-v5-c-menu__search">
1620
1618
  <div class="pf-v5-c-menu__search-input">
1621
- <div class="pf-v5-c-search-input">
1622
- <div class="pf-v5-c-search-input__bar">
1623
- <span class="pf-v5-c-search-input__text">
1619
+ <div class="pf-v5-c-text-input-group">
1620
+ <div
1621
+ class="pf-v5-c-text-input-group__main pf-m-icon"
1622
+ >
1623
+ <span
1624
+ class="pf-v5-c-text-input-group__text"
1625
+ >
1624
1626
  <span
1625
- class="pf-v5-c-search-input__icon"
1627
+ class="pf-v5-c-text-input-group__icon"
1626
1628
  >
1627
- <i
1628
- class="fas fa-search fa-fw"
1629
- aria-hidden="true"
1630
- ></i>
1629
+ <i class="fas fa-fw fa-search"></i>
1631
1630
  </span>
1632
1631
  <input
1633
- class="pf-v5-c-search-input__text-input"
1632
+ class="pf-v5-c-text-input-group__text-input"
1634
1633
  type="text"
1635
1634
  placeholder="Search"
1636
- aria-label="Search"
1635
+ value
1636
+ aria-label="Search input"
1637
1637
  />
1638
1638
  </span>
1639
1639
  </div>
@@ -2106,20 +2106,18 @@ section: components
2106
2106
  hidden
2107
2107
  >
2108
2108
  <div class="pf-v5-c-app-launcher__menu-search">
2109
- <div class="pf-v5-c-search-input">
2110
- <div class="pf-v5-c-search-input__bar">
2111
- <span class="pf-v5-c-search-input__text">
2112
- <span class="pf-v5-c-search-input__icon">
2113
- <i
2114
- class="fas fa-search fa-fw"
2115
- aria-hidden="true"
2116
- ></i>
2109
+ <div class="pf-v5-c-text-input-group">
2110
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
2111
+ <span class="pf-v5-c-text-input-group__text">
2112
+ <span class="pf-v5-c-text-input-group__icon">
2113
+ <i class="fas fa-fw fa-search"></i>
2117
2114
  </span>
2118
2115
  <input
2119
- class="pf-v5-c-search-input__text-input"
2116
+ class="pf-v5-c-text-input-group__text-input"
2120
2117
  type="text"
2121
- placeholder="Filter by name"
2122
- aria-label="Filter by name"
2118
+ placeholder="Filer by name"
2119
+ value
2120
+ aria-label="Search input"
2123
2121
  />
2124
2122
  </span>
2125
2123
  </div>
@@ -2637,22 +2635,24 @@ section: components
2637
2635
  </div>
2638
2636
  <div class="pf-v5-c-menu__search">
2639
2637
  <div class="pf-v5-c-menu__search-input">
2640
- <div class="pf-v5-c-search-input">
2641
- <div class="pf-v5-c-search-input__bar">
2642
- <span class="pf-v5-c-search-input__text">
2638
+ <div class="pf-v5-c-text-input-group">
2639
+ <div
2640
+ class="pf-v5-c-text-input-group__main pf-m-icon"
2641
+ >
2642
+ <span
2643
+ class="pf-v5-c-text-input-group__text"
2644
+ >
2643
2645
  <span
2644
- class="pf-v5-c-search-input__icon"
2646
+ class="pf-v5-c-text-input-group__icon"
2645
2647
  >
2646
- <i
2647
- class="fas fa-search fa-fw"
2648
- aria-hidden="true"
2649
- ></i>
2648
+ <i class="fas fa-fw fa-search"></i>
2650
2649
  </span>
2651
2650
  <input
2652
- class="pf-v5-c-search-input__text-input"
2651
+ class="pf-v5-c-text-input-group__text-input"
2653
2652
  type="text"
2654
2653
  placeholder="Search"
2655
- aria-label="Search"
2654
+ value
2655
+ aria-label="Search input"
2656
2656
  />
2657
2657
  </span>
2658
2658
  </div>
@@ -3115,20 +3115,18 @@ section: components
3115
3115
  hidden
3116
3116
  >
3117
3117
  <div class="pf-v5-c-app-launcher__menu-search">
3118
- <div class="pf-v5-c-search-input">
3119
- <div class="pf-v5-c-search-input__bar">
3120
- <span class="pf-v5-c-search-input__text">
3121
- <span class="pf-v5-c-search-input__icon">
3122
- <i
3123
- class="fas fa-search fa-fw"
3124
- aria-hidden="true"
3125
- ></i>
3118
+ <div class="pf-v5-c-text-input-group">
3119
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
3120
+ <span class="pf-v5-c-text-input-group__text">
3121
+ <span class="pf-v5-c-text-input-group__icon">
3122
+ <i class="fas fa-fw fa-search"></i>
3126
3123
  </span>
3127
3124
  <input
3128
- class="pf-v5-c-search-input__text-input"
3125
+ class="pf-v5-c-text-input-group__text-input"
3129
3126
  type="text"
3130
- placeholder="Filter by name"
3131
- aria-label="Filter by name"
3127
+ placeholder="Filer by name"
3128
+ value
3129
+ aria-label="Search input"
3132
3130
  />
3133
3131
  </span>
3134
3132
  </div>
@@ -3646,22 +3644,24 @@ section: components
3646
3644
  </div>
3647
3645
  <div class="pf-v5-c-menu__search">
3648
3646
  <div class="pf-v5-c-menu__search-input">
3649
- <div class="pf-v5-c-search-input">
3650
- <div class="pf-v5-c-search-input__bar">
3651
- <span class="pf-v5-c-search-input__text">
3647
+ <div class="pf-v5-c-text-input-group">
3648
+ <div
3649
+ class="pf-v5-c-text-input-group__main pf-m-icon"
3650
+ >
3651
+ <span
3652
+ class="pf-v5-c-text-input-group__text"
3653
+ >
3652
3654
  <span
3653
- class="pf-v5-c-search-input__icon"
3655
+ class="pf-v5-c-text-input-group__icon"
3654
3656
  >
3655
- <i
3656
- class="fas fa-search fa-fw"
3657
- aria-hidden="true"
3658
- ></i>
3657
+ <i class="fas fa-fw fa-search"></i>
3659
3658
  </span>
3660
3659
  <input
3661
- class="pf-v5-c-search-input__text-input"
3660
+ class="pf-v5-c-text-input-group__text-input"
3662
3661
  type="text"
3663
3662
  placeholder="Search"
3664
- aria-label="Search"
3663
+ value
3664
+ aria-label="Search input"
3665
3665
  />
3666
3666
  </span>
3667
3667
  </div>
@@ -4124,20 +4124,18 @@ section: components
4124
4124
  hidden
4125
4125
  >
4126
4126
  <div class="pf-v5-c-app-launcher__menu-search">
4127
- <div class="pf-v5-c-search-input">
4128
- <div class="pf-v5-c-search-input__bar">
4129
- <span class="pf-v5-c-search-input__text">
4130
- <span class="pf-v5-c-search-input__icon">
4131
- <i
4132
- class="fas fa-search fa-fw"
4133
- aria-hidden="true"
4134
- ></i>
4127
+ <div class="pf-v5-c-text-input-group">
4128
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
4129
+ <span class="pf-v5-c-text-input-group__text">
4130
+ <span class="pf-v5-c-text-input-group__icon">
4131
+ <i class="fas fa-fw fa-search"></i>
4135
4132
  </span>
4136
4133
  <input
4137
- class="pf-v5-c-search-input__text-input"
4134
+ class="pf-v5-c-text-input-group__text-input"
4138
4135
  type="text"
4139
- placeholder="Filter by name"
4140
- aria-label="Filter by name"
4136
+ placeholder="Filer by name"
4137
+ value
4138
+ aria-label="Search input"
4141
4139
  />
4142
4140
  </span>
4143
4141
  </div>
@@ -4655,22 +4653,24 @@ section: components
4655
4653
  </div>
4656
4654
  <div class="pf-v5-c-menu__search">
4657
4655
  <div class="pf-v5-c-menu__search-input">
4658
- <div class="pf-v5-c-search-input">
4659
- <div class="pf-v5-c-search-input__bar">
4660
- <span class="pf-v5-c-search-input__text">
4656
+ <div class="pf-v5-c-text-input-group">
4657
+ <div
4658
+ class="pf-v5-c-text-input-group__main pf-m-icon"
4659
+ >
4660
+ <span
4661
+ class="pf-v5-c-text-input-group__text"
4662
+ >
4661
4663
  <span
4662
- class="pf-v5-c-search-input__icon"
4664
+ class="pf-v5-c-text-input-group__icon"
4663
4665
  >
4664
- <i
4665
- class="fas fa-search fa-fw"
4666
- aria-hidden="true"
4667
- ></i>
4666
+ <i class="fas fa-fw fa-search"></i>
4668
4667
  </span>
4669
4668
  <input
4670
- class="pf-v5-c-search-input__text-input"
4669
+ class="pf-v5-c-text-input-group__text-input"
4671
4670
  type="text"
4672
4671
  placeholder="Search"
4673
- aria-label="Search"
4672
+ value
4673
+ aria-label="Search input"
4674
4674
  />
4675
4675
  </span>
4676
4676
  </div>
@@ -5133,20 +5133,18 @@ section: components
5133
5133
  hidden
5134
5134
  >
5135
5135
  <div class="pf-v5-c-app-launcher__menu-search">
5136
- <div class="pf-v5-c-search-input">
5137
- <div class="pf-v5-c-search-input__bar">
5138
- <span class="pf-v5-c-search-input__text">
5139
- <span class="pf-v5-c-search-input__icon">
5140
- <i
5141
- class="fas fa-search fa-fw"
5142
- aria-hidden="true"
5143
- ></i>
5136
+ <div class="pf-v5-c-text-input-group">
5137
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
5138
+ <span class="pf-v5-c-text-input-group__text">
5139
+ <span class="pf-v5-c-text-input-group__icon">
5140
+ <i class="fas fa-fw fa-search"></i>
5144
5141
  </span>
5145
5142
  <input
5146
- class="pf-v5-c-search-input__text-input"
5143
+ class="pf-v5-c-text-input-group__text-input"
5147
5144
  type="text"
5148
- placeholder="Filter by name"
5149
- aria-label="Filter by name"
5145
+ placeholder="Filer by name"
5146
+ value
5147
+ aria-label="Search input"
5150
5148
  />
5151
5149
  </span>
5152
5150
  </div>
@@ -5664,22 +5662,24 @@ section: components
5664
5662
  </div>
5665
5663
  <div class="pf-v5-c-menu__search">
5666
5664
  <div class="pf-v5-c-menu__search-input">
5667
- <div class="pf-v5-c-search-input">
5668
- <div class="pf-v5-c-search-input__bar">
5669
- <span class="pf-v5-c-search-input__text">
5665
+ <div class="pf-v5-c-text-input-group">
5666
+ <div
5667
+ class="pf-v5-c-text-input-group__main pf-m-icon"
5668
+ >
5669
+ <span
5670
+ class="pf-v5-c-text-input-group__text"
5671
+ >
5670
5672
  <span
5671
- class="pf-v5-c-search-input__icon"
5673
+ class="pf-v5-c-text-input-group__icon"
5672
5674
  >
5673
- <i
5674
- class="fas fa-search fa-fw"
5675
- aria-hidden="true"
5676
- ></i>
5675
+ <i class="fas fa-fw fa-search"></i>
5677
5676
  </span>
5678
5677
  <input
5679
- class="pf-v5-c-search-input__text-input"
5678
+ class="pf-v5-c-text-input-group__text-input"
5680
5679
  type="text"
5681
5680
  placeholder="Search"
5682
- aria-label="Search"
5681
+ value
5682
+ aria-label="Search input"
5683
5683
  />
5684
5684
  </span>
5685
5685
  </div>