@patternfly/patternfly 6.0.0-alpha.169 → 6.0.0-alpha.170

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 (27) hide show
  1. package/components/Card/card.css +3 -3
  2. package/components/Card/card.scss +3 -3
  3. package/components/_index.css +3 -3
  4. package/docs/components/InputGroup/examples/InputGroup.md +11 -53
  5. package/docs/components/Login/examples/Login.md +11 -42
  6. package/docs/demos/Card/examples/Card.md +64 -324
  7. package/docs/demos/CardView/examples/CardView.md +11 -103
  8. package/docs/demos/Dashboard/examples/Dashboard.md +22 -128
  9. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +105 -794
  10. package/docs/demos/Table/examples/Table.md +141 -1320
  11. package/docs/demos/Tabs/examples/Tabs.md +11 -103
  12. package/package.json +1 -1
  13. package/patternfly-no-globals.css +3 -3
  14. package/patternfly.css +3 -3
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
  17. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  18. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  19. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  20. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -907
  21. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  22. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  23. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  24. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  25. package/docs/components/Select/deprecated/Select.css +0 -56
  26. package/docs/components/Select/deprecated/Select.md +0 -3609
  27. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1781
@@ -23,10 +23,10 @@
23
23
  --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--sm);
24
24
  --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
25
25
  --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
26
- --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
26
+ --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
27
27
  --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
28
- --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
29
- --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--md) * -1);
28
+ --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
29
+ --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain) * -1);
30
30
  --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
31
31
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
32
32
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
@@ -27,10 +27,10 @@
27
27
  --#{$card}__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
28
28
 
29
29
  // Expandable
30
- --#{$card}__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
30
+ --#{$card}__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
31
31
  --#{$card}__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
32
- --#{$card}__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
33
- --#{$card}__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--md) * -1);
32
+ --#{$card}__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
33
+ --#{$card}__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain) * -1);
34
34
  --#{$card}__header-toggle-icon--Transition: var(--pf-t--global--transition);
35
35
  --#{$card}--m-expanded__header-toggle-icon--Rotate: 90deg;
36
36
 
@@ -2222,10 +2222,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2222
2222
  --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--sm);
2223
2223
  --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2224
2224
  --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2225
- --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
2225
+ --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2226
2226
  --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2227
- --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
2228
- --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--md) * -1);
2227
+ --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2228
+ --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain) * -1);
2229
2229
  --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
2230
2230
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
2231
2231
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
@@ -94,61 +94,19 @@ Use the input group to extend form controls by adding text, buttons, selects, et
94
94
  <br />
95
95
  <div class="pf-v6-c-input-group">
96
96
  <div class="pf-v6-c-input-group__item">
97
- <div class="pf-v6-c-select" style="width: 100px;">
98
- <span id="select-example-collapsed1-label" hidden>Choose one</span>
99
-
100
- <button
101
- class="pf-v6-c-select__toggle"
102
- type="button"
103
- id="select-example-collapsed1-toggle"
104
- aria-haspopup="true"
105
- aria-expanded="false"
106
- aria-labelledby="select-example-collapsed1-label select-example-collapsed1-toggle"
107
- >
108
- <div class="pf-v6-c-select__toggle-wrapper">
109
- <span class="pf-v6-c-select__toggle-text">Select</span>
110
- </div>
111
- <span class="pf-v6-c-select__toggle-arrow">
97
+ <button
98
+ class="pf-v6-c-menu-toggle"
99
+ type="button"
100
+ aria-expanded="false"
101
+ id="select-example-collapsed1"
102
+ >
103
+ <span class="pf-v6-c-menu-toggle__text">Select</span>
104
+ <span class="pf-v6-c-menu-toggle__controls">
105
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
112
106
  <i class="fas fa-caret-down" aria-hidden="true"></i>
113
107
  </span>
114
- </button>
115
-
116
- <ul
117
- class="pf-v6-c-select__menu"
118
- role="listbox"
119
- aria-labelledby="select-example-collapsed1-label"
120
- hidden
121
- style="width: 100px;"
122
- >
123
- <li role="presentation">
124
- <button class="pf-v6-c-select__menu-item" role="option">Running</button>
125
- </li>
126
- <li role="presentation">
127
- <button
128
- class="pf-v6-c-select__menu-item pf-m-selected"
129
- role="option"
130
- aria-selected="true"
131
- >
132
- Stopped
133
- <span class="pf-v6-c-select__menu-item-icon">
134
- <i class="fas fa-check" aria-hidden="true"></i>
135
- </span>
136
- </button>
137
- </li>
138
- <li role="presentation">
139
- <button class="pf-v6-c-select__menu-item" role="option">Down</button>
140
- </li>
141
- <li role="presentation">
142
- <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
143
- </li>
144
- <li role="presentation">
145
- <button
146
- class="pf-v6-c-select__menu-item"
147
- role="option"
148
- >Needs maintenance</button>
149
- </li>
150
- </ul>
151
- </div>
108
+ </span>
109
+ </button>
152
110
  </div>
153
111
  <div class="pf-v6-c-input-group__item pf-m-fill">
154
112
  <span class="pf-v6-c-form-control">
@@ -1005,50 +1005,19 @@ wrapperTag: div
1005
1005
  class="pf-v6-c-login__main-header-desc"
1006
1006
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
1007
1007
  <div class="pf-v6-c-login__main-header-utilities">
1008
- <div class="pf-v6-c-select">
1009
- <span id="login-select-label" hidden>Choose one</span>
1010
-
1011
- <button
1012
- class="pf-v6-c-select__toggle"
1013
- type="button"
1014
- id="login-select-toggle"
1015
- aria-haspopup="true"
1016
- aria-expanded="false"
1017
- aria-labelledby="login-select-label login-select-toggle"
1018
- >
1019
- <div class="pf-v6-c-select__toggle-wrapper">
1020
- <span class="pf-v6-c-select__toggle-text">English</span>
1021
- </div>
1022
- <span class="pf-v6-c-select__toggle-arrow">
1008
+ <button
1009
+ class="pf-v6-c-menu-toggle"
1010
+ type="button"
1011
+ aria-expanded="false"
1012
+ id="login-select"
1013
+ >
1014
+ <span class="pf-v6-c-menu-toggle__text">English</span>
1015
+ <span class="pf-v6-c-menu-toggle__controls">
1016
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1023
1017
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1024
1018
  </span>
1025
- </button>
1026
- <ul
1027
- class="pf-v6-c-select__menu"
1028
- role="listbox"
1029
- aria-labelledby="login-select-label"
1030
- hidden
1031
- >
1032
- <li role="presentation">
1033
- <button
1034
- class="pf-v6-c-select__menu-item pf-m-selected"
1035
- role="option"
1036
- aria-selected="true"
1037
- >
1038
- English
1039
- <span class="pf-v6-c-select__menu-item-icon">
1040
- <i class="fas fa-check" aria-hidden="true"></i>
1041
- </span>
1042
- </button>
1043
- </li>
1044
- <li role="presentation">
1045
- <button class="pf-v6-c-select__menu-item" role="option">Español</button>
1046
- </li>
1047
- <li role="presentation">
1048
- <button class="pf-v6-c-select__menu-item" role="option">Français</button>
1049
- </li>
1050
- </ul>
1051
- </div>
1019
+ </span>
1020
+ </button>
1052
1021
  </div>
1053
1022
  </header>
1054
1023
  <div class="pf-v6-c-login__main-body">
@@ -27,59 +27,17 @@ wrapperTag: div
27
27
  </button>
28
28
  </div>
29
29
  <div class="pf-v6-c-card__actions">
30
- <div class="pf-v6-c-dropdown">
31
- <button
32
- class="pf-v6-c-dropdown__toggle pf-m-plain"
33
- id="card-demo-horizontal-grid-collapsed-example-dropdown-kebab-right-aligned-button"
34
- aria-expanded="false"
35
- type="button"
36
- aria-label="Actions"
37
- >
30
+ <button
31
+ class="pf-v6-c-menu-toggle pf-m-plain"
32
+ type="button"
33
+ aria-expanded="false"
34
+ aria-label="Menu toggle"
35
+ id="card-demo-horizontal-grid-collapsed-example-dropdown-kebab-right-aligned"
36
+ >
37
+ <span class="pf-v6-c-menu-toggle__icon">
38
38
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
39
- </button>
40
- <ul
41
- class="pf-v6-c-dropdown__menu"
42
- aria-labelledby="card-demo-horizontal-grid-collapsed-example-dropdown-kebab-right-aligned-button"
43
- hidden
44
- role="menu"
45
- >
46
- <li role="none">
47
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
48
- </li>
49
- <li role="none">
50
- <button
51
- class="pf-v6-c-dropdown__menu-item"
52
- role="menuitem"
53
- type="button"
54
- >Action</button>
55
- </li>
56
- <li role="none">
57
- <a
58
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
59
- role="menuitem"
60
- href="#"
61
- aria-disabled="true"
62
- tabindex="-1"
63
- >Disabled link</a>
64
- </li>
65
- <li role="none">
66
- <button
67
- class="pf-v6-c-dropdown__menu-item"
68
- role="menuitem"
69
- type="button"
70
- disabled
71
- >Disabled action</button>
72
- </li>
73
- <li class="pf-v6-c-divider" role="separator"></li>
74
- <li role="none">
75
- <a
76
- class="pf-v6-c-dropdown__menu-item"
77
- role="menuitem"
78
- href="#"
79
- >Separated link</a>
80
- </li>
81
- </ul>
82
- </div>
39
+ </span>
40
+ </button>
83
41
  </div>
84
42
  <div class="pf-v6-c-card__header-main">
85
43
  <div class="pf-v6-l-split pf-m-gutter pf-m-wrap">
@@ -170,59 +128,17 @@ wrapperTag: div
170
128
  </button>
171
129
  </div>
172
130
  <div class="pf-v6-c-card__actions">
173
- <div class="pf-v6-c-dropdown">
174
- <button
175
- class="pf-v6-c-dropdown__toggle pf-m-plain"
176
- id="card-demo-horizontal-grid-expanded-example-dropdown-kebab-right-aligned-button"
177
- aria-expanded="false"
178
- type="button"
179
- aria-label="Actions"
180
- >
131
+ <button
132
+ class="pf-v6-c-menu-toggle pf-m-plain"
133
+ type="button"
134
+ aria-expanded="false"
135
+ aria-label="Menu toggle"
136
+ id="card-demo-horizontal-grid-expanded-example-dropdown-kebab-right-aligned"
137
+ >
138
+ <span class="pf-v6-c-menu-toggle__icon">
181
139
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
182
- </button>
183
- <ul
184
- class="pf-v6-c-dropdown__menu"
185
- aria-labelledby="card-demo-horizontal-grid-expanded-example-dropdown-kebab-right-aligned-button"
186
- hidden
187
- role="menu"
188
- >
189
- <li role="none">
190
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
191
- </li>
192
- <li role="none">
193
- <button
194
- class="pf-v6-c-dropdown__menu-item"
195
- role="menuitem"
196
- type="button"
197
- >Action</button>
198
- </li>
199
- <li role="none">
200
- <a
201
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
202
- role="menuitem"
203
- href="#"
204
- aria-disabled="true"
205
- tabindex="-1"
206
- >Disabled link</a>
207
- </li>
208
- <li role="none">
209
- <button
210
- class="pf-v6-c-dropdown__menu-item"
211
- role="menuitem"
212
- type="button"
213
- disabled
214
- >Disabled action</button>
215
- </li>
216
- <li class="pf-v6-c-divider" role="separator"></li>
217
- <li role="none">
218
- <a
219
- class="pf-v6-c-dropdown__menu-item"
220
- role="menuitem"
221
- href="#"
222
- >Separated link</a>
223
- </li>
224
- </ul>
225
- </div>
140
+ </span>
141
+ </button>
226
142
  </div>
227
143
  <div class="pf-v6-c-card__header-main">
228
144
  <div class="pf-v6-c-card__title">
@@ -2009,63 +1925,19 @@ wrapperTag: div
2009
1925
  </div>
2010
1926
  </div>
2011
1927
  <div class="pf-v6-c-card__actions pf-m-no-offset">
2012
- <div class="pf-v6-c-select">
2013
- <span
2014
- id="utilization-card-3-example-select-dropdown-label"
2015
- hidden
2016
- >Choose one</span>
2017
-
2018
- <button
2019
- class="pf-v6-c-select__toggle pf-m-plain"
2020
- type="button"
2021
- id="utilization-card-3-example-select-dropdown-toggle"
2022
- aria-haspopup="true"
2023
- aria-expanded="false"
2024
- aria-labelledby="utilization-card-3-example-select-dropdown-label utilization-card-3-example-select-dropdown-toggle"
2025
- >
2026
- <div class="pf-v6-c-select__toggle-wrapper">
2027
- <span class="pf-v6-c-select__toggle-text">Filter</span>
2028
- </div>
2029
- <span class="pf-v6-c-select__toggle-arrow">
1928
+ <button
1929
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1930
+ type="button"
1931
+ aria-expanded="false"
1932
+ id="utilization-card-3-example-select-dropdown"
1933
+ >
1934
+ <span class="pf-v6-c-menu-toggle__text">Filter</span>
1935
+ <span class="pf-v6-c-menu-toggle__controls">
1936
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2030
1937
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2031
1938
  </span>
2032
- </button>
2033
-
2034
- <ul
2035
- class="pf-v6-c-select__menu pf-m-align-right"
2036
- role="listbox"
2037
- aria-labelledby="utilization-card-3-example-select-dropdown-label"
2038
- hidden
2039
- >
2040
- <li role="presentation">
2041
- <button class="pf-v6-c-select__menu-item" role="option">Running</button>
2042
- </li>
2043
- <li role="presentation">
2044
- <button
2045
- class="pf-v6-c-select__menu-item pf-m-selected"
2046
- role="option"
2047
- aria-selected="true"
2048
- >
2049
- Stopped
2050
- <span class="pf-v6-c-select__menu-item-icon">
2051
- <i class="fas fa-check" aria-hidden="true"></i>
2052
- </span>
2053
- </button>
2054
- </li>
2055
- <li role="presentation">
2056
- <button class="pf-v6-c-select__menu-item" role="option">Down</button>
2057
- </li>
2058
- <li role="presentation">
2059
- <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
2060
- </li>
2061
- <li role="presentation">
2062
- <button
2063
- class="pf-v6-c-select__menu-item"
2064
- role="option"
2065
- >Needs maintenance</button>
2066
- </li>
2067
- </ul>
2068
- </div>
1939
+ </span>
1940
+ </button>
2069
1941
  </div>
2070
1942
  </div>
2071
1943
  <div class="pf-v6-c-card__body">
@@ -2814,63 +2686,19 @@ wrapperTag: div
2814
2686
  class="pf-v6-c-card__actions pf-m-no-offset"
2815
2687
  style="padding-block-start: 1px;"
2816
2688
  >
2817
- <div class="pf-v6-c-select">
2818
- <span
2819
- id="trend-card-1-example-select-dropdown-label"
2820
- hidden
2821
- >Choose one</span>
2822
-
2823
- <button
2824
- class="pf-v6-c-select__toggle pf-m-plain"
2825
- type="button"
2826
- id="trend-card-1-example-select-dropdown-toggle"
2827
- aria-haspopup="true"
2828
- aria-expanded="false"
2829
- aria-labelledby="trend-card-1-example-select-dropdown-label trend-card-1-example-select-dropdown-toggle"
2830
- >
2831
- <div class="pf-v6-c-select__toggle-wrapper">
2832
- <span class="pf-v6-c-select__toggle-text">Filter</span>
2833
- </div>
2834
- <span class="pf-v6-c-select__toggle-arrow">
2689
+ <button
2690
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2691
+ type="button"
2692
+ aria-expanded="false"
2693
+ id="trend-card-1-example-select-dropdown"
2694
+ >
2695
+ <span class="pf-v6-c-menu-toggle__text">Filter</span>
2696
+ <span class="pf-v6-c-menu-toggle__controls">
2697
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2835
2698
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2836
2699
  </span>
2837
- </button>
2838
-
2839
- <ul
2840
- class="pf-v6-c-select__menu pf-m-align-right"
2841
- role="listbox"
2842
- aria-labelledby="trend-card-1-example-select-dropdown-label"
2843
- hidden
2844
- >
2845
- <li role="presentation">
2846
- <button class="pf-v6-c-select__menu-item" role="option">Running</button>
2847
- </li>
2848
- <li role="presentation">
2849
- <button
2850
- class="pf-v6-c-select__menu-item pf-m-selected"
2851
- role="option"
2852
- aria-selected="true"
2853
- >
2854
- Stopped
2855
- <span class="pf-v6-c-select__menu-item-icon">
2856
- <i class="fas fa-check" aria-hidden="true"></i>
2857
- </span>
2858
- </button>
2859
- </li>
2860
- <li role="presentation">
2861
- <button class="pf-v6-c-select__menu-item" role="option">Down</button>
2862
- </li>
2863
- <li role="presentation">
2864
- <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
2865
- </li>
2866
- <li role="presentation">
2867
- <button
2868
- class="pf-v6-c-select__menu-item"
2869
- role="option"
2870
- >Needs maintenance</button>
2871
- </li>
2872
- </ul>
2873
- </div>
2700
+ </span>
2701
+ </button>
2874
2702
  </div>
2875
2703
  </div>
2876
2704
  <div class="pf-v6-c-card__body">
@@ -2935,63 +2763,19 @@ wrapperTag: div
2935
2763
  <div class="pf-v6-c-card" id="card-log-view-example">
2936
2764
  <div class="pf-v6-c-card__header pf-v6-u-align-items-flex-start">
2937
2765
  <div class="pf-v6-c-card__actions pf-m-no-offset">
2938
- <div class="pf-v6-c-select">
2939
- <span
2940
- id="card-log-view-example-select-dropdown-label"
2941
- hidden
2942
- >Choose one</span>
2943
-
2944
- <button
2945
- class="pf-v6-c-select__toggle pf-m-plain"
2946
- type="button"
2947
- id="card-log-view-example-select-dropdown-toggle"
2948
- aria-haspopup="true"
2949
- aria-expanded="false"
2950
- aria-labelledby="card-log-view-example-select-dropdown-label card-log-view-example-select-dropdown-toggle"
2951
- >
2952
- <div class="pf-v6-c-select__toggle-wrapper">
2953
- <span class="pf-v6-c-select__toggle-text">Most recent</span>
2954
- </div>
2955
- <span class="pf-v6-c-select__toggle-arrow">
2766
+ <button
2767
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2768
+ type="button"
2769
+ aria-expanded="false"
2770
+ id="card-log-view-example-select-dropdown"
2771
+ >
2772
+ <span class="pf-v6-c-menu-toggle__text">Most recent</span>
2773
+ <span class="pf-v6-c-menu-toggle__controls">
2774
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2956
2775
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2957
2776
  </span>
2958
- </button>
2959
-
2960
- <ul
2961
- class="pf-v6-c-select__menu pf-m-align-right"
2962
- role="listbox"
2963
- aria-labelledby="card-log-view-example-select-dropdown-label"
2964
- hidden
2965
- >
2966
- <li role="presentation">
2967
- <button class="pf-v6-c-select__menu-item" role="option">Running</button>
2968
- </li>
2969
- <li role="presentation">
2970
- <button
2971
- class="pf-v6-c-select__menu-item pf-m-selected"
2972
- role="option"
2973
- aria-selected="true"
2974
- >
2975
- Stopped
2976
- <span class="pf-v6-c-select__menu-item-icon">
2977
- <i class="fas fa-check" aria-hidden="true"></i>
2978
- </span>
2979
- </button>
2980
- </li>
2981
- <li role="presentation">
2982
- <button class="pf-v6-c-select__menu-item" role="option">Down</button>
2983
- </li>
2984
- <li role="presentation">
2985
- <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
2986
- </li>
2987
- <li role="presentation">
2988
- <button
2989
- class="pf-v6-c-select__menu-item"
2990
- role="option"
2991
- >Needs maintenance</button>
2992
- </li>
2993
- </ul>
2994
- </div>
2777
+ </span>
2778
+ </button>
2995
2779
  </div>
2996
2780
  <div class="pf-v6-c-card__header-main">
2997
2781
  <div
@@ -3102,63 +2886,19 @@ wrapperTag: div
3102
2886
  <div class="pf-v6-c-card" id="card-events-view-example">
3103
2887
  <div class="pf-v6-c-card__header pf-v6-u-align-items-flex-start">
3104
2888
  <div class="pf-v6-c-card__actions pf-m-no-offset">
3105
- <div class="pf-v6-c-select">
3106
- <span
3107
- id="card-events-view-example-select-dropdown-label"
3108
- hidden
3109
- >Choose one</span>
3110
-
3111
- <button
3112
- class="pf-v6-c-select__toggle pf-m-plain"
3113
- type="button"
3114
- id="card-events-view-example-select-dropdown-toggle"
3115
- aria-haspopup="true"
3116
- aria-expanded="false"
3117
- aria-labelledby="card-events-view-example-select-dropdown-label card-events-view-example-select-dropdown-toggle"
3118
- >
3119
- <div class="pf-v6-c-select__toggle-wrapper">
3120
- <span class="pf-v6-c-select__toggle-text">Status</span>
3121
- </div>
3122
- <span class="pf-v6-c-select__toggle-arrow">
2889
+ <button
2890
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2891
+ type="button"
2892
+ aria-expanded="false"
2893
+ id="card-events-view-example-select-dropdown"
2894
+ >
2895
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
2896
+ <span class="pf-v6-c-menu-toggle__controls">
2897
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3123
2898
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3124
2899
  </span>
3125
- </button>
3126
-
3127
- <ul
3128
- class="pf-v6-c-select__menu pf-m-align-right"
3129
- role="listbox"
3130
- aria-labelledby="card-events-view-example-select-dropdown-label"
3131
- hidden
3132
- >
3133
- <li role="presentation">
3134
- <button class="pf-v6-c-select__menu-item" role="option">Running</button>
3135
- </li>
3136
- <li role="presentation">
3137
- <button
3138
- class="pf-v6-c-select__menu-item pf-m-selected"
3139
- role="option"
3140
- aria-selected="true"
3141
- >
3142
- Stopped
3143
- <span class="pf-v6-c-select__menu-item-icon">
3144
- <i class="fas fa-check" aria-hidden="true"></i>
3145
- </span>
3146
- </button>
3147
- </li>
3148
- <li role="presentation">
3149
- <button class="pf-v6-c-select__menu-item" role="option">Down</button>
3150
- </li>
3151
- <li role="presentation">
3152
- <button class="pf-v6-c-select__menu-item" role="option">Degraded</button>
3153
- </li>
3154
- <li role="presentation">
3155
- <button
3156
- class="pf-v6-c-select__menu-item"
3157
- role="option"
3158
- >Needs maintenance</button>
3159
- </li>
3160
- </ul>
3161
- </div>
2900
+ </span>
2901
+ </button>
3162
2902
  </div>
3163
2903
  <div class="pf-v6-c-card__header-main">
3164
2904
  <div