@patternfly/patternfly 4.179.3 → 4.181.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.
- package/assets/images/status-icon-sprite.svg +38 -0
- package/components/Dropdown/dropdown.css +4 -2
- package/components/Dropdown/dropdown.scss +4 -2
- package/components/FormControl/form-control.css +26 -0
- package/components/FormControl/form-control.scss +33 -1
- package/components/Menu/menu.css +10 -0
- package/components/Menu/menu.scss +14 -0
- package/components/MenuToggle/menu-toggle.css +10 -7
- package/components/MenuToggle/menu-toggle.scss +11 -9
- package/components/SearchInput/search-input.css +1 -0
- package/components/SearchInput/search-input.scss +1 -0
- package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
- package/docs/components/ContextSelector/examples/context-selector.md +84 -102
- package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
- package/docs/components/FormControl/examples/FormControl.md +151 -11
- package/docs/components/InputGroup/examples/InputGroup.md +6 -22
- package/docs/components/Menu/examples/Menu.md +127 -30
- package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
- package/docs/components/Page/examples/Page.md +11 -2
- package/docs/components/Select/examples/Select.md +30 -14
- package/docs/components/Table/examples/Table.md +8 -0
- package/docs/components/Toolbar/examples/Toolbar.md +300 -180
- package/docs/components/TreeView/examples/TreeView.md +15 -7
- package/docs/components/Wizard/examples/Wizard.md +6 -6
- package/docs/demos/Alert/examples/Alert.md +20 -40
- package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
- package/docs/demos/ContextSelector/examples/ContextSelector.md +247 -276
- package/docs/demos/DataList/examples/DataList.md +159 -114
- package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
- package/docs/demos/Drawer/examples/Drawer.md +60 -120
- package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
- package/docs/demos/Masthead/examples/Masthead.md +426 -449
- package/docs/demos/Nav/examples/Nav.md +203 -343
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
- package/docs/demos/Page/examples/Page.md +834 -1235
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
- package/docs/demos/Table/examples/Table.md +1189 -652
- package/docs/demos/Tabs/examples/Tabs.md +11 -19
- package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
- package/docs/demos/Wizard/examples/Wizard.md +6 -2
- package/package.json +1 -1
- package/patternfly-no-reset.css +51 -9
- package/patternfly.css +51 -9
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -164,23 +164,6 @@ cssPrefix: pf-c-input-group
|
|
|
164
164
|
/>
|
|
165
165
|
</div>
|
|
166
166
|
<br />
|
|
167
|
-
<div class="pf-c-input-group">
|
|
168
|
-
<input
|
|
169
|
-
class="pf-c-form-control"
|
|
170
|
-
type="search"
|
|
171
|
-
id="textInput11"
|
|
172
|
-
name="textInput11"
|
|
173
|
-
aria-label="Search input example"
|
|
174
|
-
/>
|
|
175
|
-
<button
|
|
176
|
-
class="pf-c-button pf-m-control"
|
|
177
|
-
type="button"
|
|
178
|
-
aria-label="Search button for search input"
|
|
179
|
-
>
|
|
180
|
-
<i class="fas fa-search" aria-hidden="true"></i>
|
|
181
|
-
</button>
|
|
182
|
-
</div>
|
|
183
|
-
<br />
|
|
184
167
|
<div class="pf-c-input-group">
|
|
185
168
|
<input
|
|
186
169
|
class="pf-c-form-control"
|
|
@@ -201,7 +184,7 @@ cssPrefix: pf-c-input-group
|
|
|
201
184
|
<div class="pf-c-input-group">
|
|
202
185
|
<input
|
|
203
186
|
class="pf-c-form-control"
|
|
204
|
-
type="
|
|
187
|
+
type="text"
|
|
205
188
|
id="textInput12"
|
|
206
189
|
name="textInput12"
|
|
207
190
|
aria-label="Input example with popover"
|
|
@@ -218,7 +201,7 @@ cssPrefix: pf-c-input-group
|
|
|
218
201
|
<div class="pf-c-input-group">
|
|
219
202
|
<input
|
|
220
203
|
class="pf-c-form-control"
|
|
221
|
-
type="
|
|
204
|
+
type="number"
|
|
222
205
|
id="textInput14"
|
|
223
206
|
name="textInput14"
|
|
224
207
|
aria-label="Input example with plain unit"
|
|
@@ -237,9 +220,10 @@ Use the input group to extend form controls by adding text, buttons, selects, et
|
|
|
237
220
|
### Accessibility
|
|
238
221
|
|
|
239
222
|
When using the `.pf-c-input-group` always ensure labels are used outside the input group with the `.pf-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
223
|
+
|
|
224
|
+
| Attribute | Applied to | Outcome |
|
|
225
|
+
| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
226
|
+
| `aria-describedby` | `.pf-c-form-control` | When using `.pf-c-input-group__text` or `.pf-c-input-group__action` make use of this on the input field. |
|
|
243
227
|
|
|
244
228
|
### Usage
|
|
245
229
|
|
|
@@ -94,6 +94,70 @@ cssPrefix: pf-c-menu
|
|
|
94
94
|
|
|
95
95
|
```
|
|
96
96
|
|
|
97
|
+
### With checkbox
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<div class="pf-c-menu">
|
|
101
|
+
<div class="pf-c-menu__content">
|
|
102
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
103
|
+
<li class="pf-c-menu__list-item" role="menuitem">
|
|
104
|
+
<label class="pf-c-menu__item" for="with-checkbox-example-check-1">
|
|
105
|
+
<span class="pf-c-menu__item-main">
|
|
106
|
+
<span class="pf-c-menu__item-check">
|
|
107
|
+
<span class="pf-c-check pf-m-standalone">
|
|
108
|
+
<input
|
|
109
|
+
class="pf-c-check__input"
|
|
110
|
+
type="checkbox"
|
|
111
|
+
id="with-checkbox-example-check-1"
|
|
112
|
+
name="with-checkbox-example-check-1"
|
|
113
|
+
/>
|
|
114
|
+
</span>
|
|
115
|
+
</span>
|
|
116
|
+
<span class="pf-c-menu__item-text">Checkbox 1</span>
|
|
117
|
+
</span>
|
|
118
|
+
</label>
|
|
119
|
+
</li>
|
|
120
|
+
<li class="pf-c-menu__list-item" role="menuitem">
|
|
121
|
+
<label class="pf-c-menu__item" for="with-checkbox-example-check-2">
|
|
122
|
+
<span class="pf-c-menu__item-main">
|
|
123
|
+
<span class="pf-c-menu__item-check">
|
|
124
|
+
<span class="pf-c-check pf-m-standalone">
|
|
125
|
+
<input
|
|
126
|
+
class="pf-c-check__input"
|
|
127
|
+
type="checkbox"
|
|
128
|
+
id="with-checkbox-example-check-2"
|
|
129
|
+
name="with-checkbox-example-check-2"
|
|
130
|
+
/>
|
|
131
|
+
</span>
|
|
132
|
+
</span>
|
|
133
|
+
<span class="pf-c-menu__item-text">Checkbox 2</span>
|
|
134
|
+
</span>
|
|
135
|
+
</label>
|
|
136
|
+
</li>
|
|
137
|
+
<li class="pf-c-menu__list-item pf-m-disabled" role="menuitem">
|
|
138
|
+
<label class="pf-c-menu__item" for="with-checkbox-example-check-3">
|
|
139
|
+
<span class="pf-c-menu__item-main">
|
|
140
|
+
<span class="pf-c-menu__item-check">
|
|
141
|
+
<span class="pf-c-check pf-m-standalone">
|
|
142
|
+
<input
|
|
143
|
+
class="pf-c-check__input"
|
|
144
|
+
type="checkbox"
|
|
145
|
+
id="with-checkbox-example-check-3"
|
|
146
|
+
name="with-checkbox-example-check-3"
|
|
147
|
+
disabled
|
|
148
|
+
/>
|
|
149
|
+
</span>
|
|
150
|
+
</span>
|
|
151
|
+
<span class="pf-c-menu__item-text">Checkbox 3</span>
|
|
152
|
+
</span>
|
|
153
|
+
</label>
|
|
154
|
+
</li>
|
|
155
|
+
</ul>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
```
|
|
160
|
+
|
|
97
161
|
### Scrollable
|
|
98
162
|
|
|
99
163
|
```html
|
|
@@ -4832,13 +4896,21 @@ cssPrefix: pf-c-menu
|
|
|
4832
4896
|
<div class="pf-c-menu pf-m-scrollable">
|
|
4833
4897
|
<div class="pf-c-menu__search">
|
|
4834
4898
|
<div class="pf-c-menu__search-input">
|
|
4835
|
-
<input
|
|
4836
|
-
class="pf-c-
|
|
4837
|
-
|
|
4838
|
-
|
|
4839
|
-
|
|
4840
|
-
|
|
4841
|
-
|
|
4899
|
+
<div class="pf-c-search-input">
|
|
4900
|
+
<div class="pf-c-search-input__bar">
|
|
4901
|
+
<span class="pf-c-search-input__text">
|
|
4902
|
+
<span class="pf-c-search-input__icon">
|
|
4903
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
4904
|
+
</span>
|
|
4905
|
+
<input
|
|
4906
|
+
class="pf-c-search-input__text-input"
|
|
4907
|
+
type="text"
|
|
4908
|
+
placeholder="Search"
|
|
4909
|
+
aria-label="Search"
|
|
4910
|
+
/>
|
|
4911
|
+
</span>
|
|
4912
|
+
</div>
|
|
4913
|
+
</div>
|
|
4842
4914
|
</div>
|
|
4843
4915
|
</div>
|
|
4844
4916
|
<hr class="pf-c-divider" />
|
|
@@ -4943,13 +5015,21 @@ cssPrefix: pf-c-menu
|
|
|
4943
5015
|
<div class="pf-c-menu">
|
|
4944
5016
|
<div class="pf-c-menu__search">
|
|
4945
5017
|
<div class="pf-c-menu__search-input">
|
|
4946
|
-
<input
|
|
4947
|
-
class="pf-c-
|
|
4948
|
-
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
|
|
4952
|
-
|
|
5018
|
+
<div class="pf-c-search-input">
|
|
5019
|
+
<div class="pf-c-search-input__bar">
|
|
5020
|
+
<span class="pf-c-search-input__text">
|
|
5021
|
+
<span class="pf-c-search-input__icon">
|
|
5022
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
5023
|
+
</span>
|
|
5024
|
+
<input
|
|
5025
|
+
class="pf-c-search-input__text-input"
|
|
5026
|
+
type="text"
|
|
5027
|
+
placeholder="Search"
|
|
5028
|
+
aria-label="Search"
|
|
5029
|
+
/>
|
|
5030
|
+
</span>
|
|
5031
|
+
</div>
|
|
5032
|
+
</div>
|
|
4953
5033
|
</div>
|
|
4954
5034
|
</div>
|
|
4955
5035
|
<hr class="pf-c-divider" />
|
|
@@ -5711,13 +5791,21 @@ cssPrefix: pf-c-menu
|
|
|
5711
5791
|
<div class="pf-c-menu pf-m-plain">
|
|
5712
5792
|
<div class="pf-c-menu__search">
|
|
5713
5793
|
<div class="pf-c-menu__search-input">
|
|
5714
|
-
<input
|
|
5715
|
-
class="pf-c-
|
|
5716
|
-
|
|
5717
|
-
|
|
5718
|
-
|
|
5719
|
-
|
|
5720
|
-
|
|
5794
|
+
<div class="pf-c-search-input">
|
|
5795
|
+
<div class="pf-c-search-input__bar">
|
|
5796
|
+
<span class="pf-c-search-input__text">
|
|
5797
|
+
<span class="pf-c-search-input__icon">
|
|
5798
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
5799
|
+
</span>
|
|
5800
|
+
<input
|
|
5801
|
+
class="pf-c-search-input__text-input"
|
|
5802
|
+
type="text"
|
|
5803
|
+
placeholder="Search"
|
|
5804
|
+
aria-label="Search"
|
|
5805
|
+
/>
|
|
5806
|
+
</span>
|
|
5807
|
+
</div>
|
|
5808
|
+
</div>
|
|
5721
5809
|
</div>
|
|
5722
5810
|
</div>
|
|
5723
5811
|
<hr class="pf-c-divider" />
|
|
@@ -5822,13 +5910,21 @@ cssPrefix: pf-c-menu
|
|
|
5822
5910
|
<div class="pf-c-menu pf-m-plain pf-m-scrollable">
|
|
5823
5911
|
<div class="pf-c-menu__search">
|
|
5824
5912
|
<div class="pf-c-menu__search-input">
|
|
5825
|
-
<input
|
|
5826
|
-
class="pf-c-
|
|
5827
|
-
|
|
5828
|
-
|
|
5829
|
-
|
|
5830
|
-
|
|
5831
|
-
|
|
5913
|
+
<div class="pf-c-search-input">
|
|
5914
|
+
<div class="pf-c-search-input__bar">
|
|
5915
|
+
<span class="pf-c-search-input__text">
|
|
5916
|
+
<span class="pf-c-search-input__icon">
|
|
5917
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
5918
|
+
</span>
|
|
5919
|
+
<input
|
|
5920
|
+
class="pf-c-search-input__text-input"
|
|
5921
|
+
type="text"
|
|
5922
|
+
placeholder="Search"
|
|
5923
|
+
aria-label="Search"
|
|
5924
|
+
/>
|
|
5925
|
+
</span>
|
|
5926
|
+
</div>
|
|
5927
|
+
</div>
|
|
5832
5928
|
</div>
|
|
5833
5929
|
</div>
|
|
5834
5930
|
<hr class="pf-c-divider" />
|
|
@@ -5935,7 +6031,7 @@ cssPrefix: pf-c-menu
|
|
|
5935
6031
|
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
|
|
5936
6032
|
| `role="menu"` | `.pf-c-menu__list` | Declares `.pf-c-menu__list` as a menu. |
|
|
5937
6033
|
| `disabled` | `button.pf-c-menu__item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
|
|
5938
|
-
| `role="menuitem"` | `.pf-c-menu__item`
|
|
6034
|
+
| `role="menuitem"` | `.pf-c-menu__item`, `.pf-c-menu__list-item` (checkbox) | Assigns `.pf-c-menu__item` as an option in a set of choices contained by a menu. |
|
|
5939
6035
|
| `role="none"` | `.pf-c-menu__list-item` | Removes semantic meaning from `.pf-c-menu__list-item`. |
|
|
5940
6036
|
| `aria-disabled="true"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
|
|
5941
6037
|
| `tabindex="-1"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
|
|
@@ -5954,9 +6050,10 @@ cssPrefix: pf-c-menu
|
|
|
5954
6050
|
| `.pf-c-menu__content` | `<div>` | Initiates the menu content. Use for lists. **Required** |
|
|
5955
6051
|
| `.pf-c-menu__list` | `<ul>` | Initiates the menu list. **Required** |
|
|
5956
6052
|
| `.pf-c-menu__list-item` | `<li>` | Initiates the menu list item. **Required** |
|
|
5957
|
-
| `.pf-c-menu__item` | `<button>`, `<a>`, `<div>`
|
|
6053
|
+
| `.pf-c-menu__item` | `<button>`, `<a>`, `<div>`, `<label>` | Initiates the menu item. **Required** |
|
|
5958
6054
|
| `.pf-c-menu__item-main` | `<span>` | Initiates the menu item main container. **Required** |
|
|
5959
6055
|
| `.pf-c-menu__item-text` | `<span>` | Initiates the menu item text. **Required** |
|
|
6056
|
+
| `.pf-c-menu__item-check` | `<span>` | Initiates a menu label. |
|
|
5960
6057
|
| `.pf-c-menu__item-description` | `<span>` | Initiates the menu item description. |
|
|
5961
6058
|
| `.pf-c-menu__item-group` | `<section>` | Initiates the menu item group. |
|
|
5962
6059
|
| `.pf-c-menu__item-group-title` | `<h1>` | Initiates the menu item group title. |
|
|
@@ -53,23 +53,6 @@ cssPrefix: pf-c-menu-toggle
|
|
|
53
53
|
|
|
54
54
|
```
|
|
55
55
|
|
|
56
|
-
### Icon
|
|
57
|
-
|
|
58
|
-
```html
|
|
59
|
-
<button class="pf-c-menu-toggle" type="button" aria-expanded="false">
|
|
60
|
-
<span class="pf-c-menu-toggle__icon">
|
|
61
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
62
|
-
</span>
|
|
63
|
-
<span class="pf-c-menu-toggle__text">Icon</span>
|
|
64
|
-
<span class="pf-c-menu-toggle__controls">
|
|
65
|
-
<span class="pf-c-menu-toggle__toggle-icon">
|
|
66
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
67
|
-
</span>
|
|
68
|
-
</span>
|
|
69
|
-
</button>
|
|
70
|
-
|
|
71
|
-
```
|
|
72
|
-
|
|
73
56
|
### Count
|
|
74
57
|
|
|
75
58
|
```html
|
|
@@ -167,23 +150,6 @@ cssPrefix: pf-c-menu-toggle
|
|
|
167
150
|
</span>
|
|
168
151
|
</button>
|
|
169
152
|
|
|
170
|
-
|
|
171
|
-
<button
|
|
172
|
-
class="pf-c-menu-toggle pf-m-secondary"
|
|
173
|
-
type="button"
|
|
174
|
-
aria-expanded="false"
|
|
175
|
-
>
|
|
176
|
-
<span class="pf-c-menu-toggle__icon">
|
|
177
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
178
|
-
</span>
|
|
179
|
-
<span class="pf-c-menu-toggle__text">Icon</span>
|
|
180
|
-
<span class="pf-c-menu-toggle__controls">
|
|
181
|
-
<span class="pf-c-menu-toggle__toggle-icon">
|
|
182
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
183
|
-
</span>
|
|
184
|
-
</span>
|
|
185
|
-
</button>
|
|
186
|
-
|
|
187
153
|
|
|
188
154
|
<button
|
|
189
155
|
class="pf-c-menu-toggle pf-m-secondary pf-m-expanded"
|
|
@@ -281,13 +247,38 @@ cssPrefix: pf-c-menu-toggle
|
|
|
281
247
|
</span>
|
|
282
248
|
</button>
|
|
283
249
|
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
### With icon/image and text
|
|
253
|
+
|
|
254
|
+
```html
|
|
255
|
+
<button
|
|
256
|
+
class="pf-c-menu-toggle pf-m-secondary"
|
|
257
|
+
type="button"
|
|
258
|
+
aria-expanded="false"
|
|
259
|
+
>
|
|
260
|
+
<span class="pf-c-menu-toggle__icon">
|
|
261
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
262
|
+
</span>
|
|
263
|
+
<span class="pf-c-menu-toggle__text">Icon</span>
|
|
264
|
+
<span class="pf-c-menu-toggle__controls">
|
|
265
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
266
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
267
|
+
</span>
|
|
268
|
+
</span>
|
|
269
|
+
</button>
|
|
270
|
+
|
|
284
271
|
|
|
285
272
|
<button
|
|
286
|
-
class="pf-c-menu-toggle pf-m-
|
|
273
|
+
class="pf-c-menu-toggle pf-m-secondary"
|
|
287
274
|
type="button"
|
|
288
|
-
aria-expanded="
|
|
275
|
+
aria-expanded="false"
|
|
276
|
+
disabled
|
|
289
277
|
>
|
|
290
|
-
<span class="pf-c-menu-
|
|
278
|
+
<span class="pf-c-menu-toggle__icon">
|
|
279
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
280
|
+
</span>
|
|
281
|
+
<span class="pf-c-menu-toggle__text">Icon</span>
|
|
291
282
|
<span class="pf-c-menu-toggle__controls">
|
|
292
283
|
<span class="pf-c-menu-toggle__toggle-icon">
|
|
293
284
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
@@ -297,15 +288,58 @@ cssPrefix: pf-c-menu-toggle
|
|
|
297
288
|
|
|
298
289
|
```
|
|
299
290
|
|
|
300
|
-
### With
|
|
291
|
+
### With avatar and text
|
|
301
292
|
|
|
302
293
|
```html
|
|
303
294
|
<button class="pf-c-menu-toggle" type="button" aria-expanded="false">
|
|
304
|
-
<span class="pf-c-menu-
|
|
295
|
+
<span class="pf-c-menu-toggle__icon">
|
|
296
|
+
<img
|
|
297
|
+
class="pf-c-avatar pf-m-light"
|
|
298
|
+
src="/assets/images/img_avatar-light.svg"
|
|
299
|
+
alt="Avatar image light"
|
|
300
|
+
/>
|
|
301
|
+
</span>
|
|
302
|
+
<span class="pf-c-menu-toggle__text">Ned Username</span>
|
|
303
|
+
<span class="pf-c-menu-toggle__controls">
|
|
304
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
305
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
306
|
+
</span>
|
|
307
|
+
</span>
|
|
308
|
+
</button>
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
<button
|
|
312
|
+
class="pf-c-menu-toggle pf-m-expanded"
|
|
313
|
+
type="button"
|
|
314
|
+
aria-expanded="true"
|
|
315
|
+
>
|
|
316
|
+
<span class="pf-c-menu-toggle__icon">
|
|
317
|
+
<img
|
|
318
|
+
class="pf-c-avatar pf-m-light"
|
|
319
|
+
src="/assets/images/img_avatar-light.svg"
|
|
320
|
+
alt="Avatar image light"
|
|
321
|
+
/>
|
|
322
|
+
</span>
|
|
323
|
+
<span class="pf-c-menu-toggle__text">Ned Username</span>
|
|
324
|
+
<span class="pf-c-menu-toggle__controls">
|
|
325
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
326
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
327
|
+
</span>
|
|
328
|
+
</span>
|
|
329
|
+
</button>
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
<button
|
|
333
|
+
class="pf-c-menu-toggle"
|
|
334
|
+
type="button"
|
|
335
|
+
aria-expanded="false"
|
|
336
|
+
disabled
|
|
337
|
+
>
|
|
338
|
+
<span class="pf-c-menu-toggle__icon">
|
|
305
339
|
<img
|
|
306
|
-
class="pf-c-avatar"
|
|
307
|
-
src="/assets/images/img_avatar.svg"
|
|
308
|
-
alt="Avatar image"
|
|
340
|
+
class="pf-c-avatar pf-m-light"
|
|
341
|
+
src="/assets/images/img_avatar-light.svg"
|
|
342
|
+
alt="Avatar image light"
|
|
309
343
|
/>
|
|
310
344
|
</span>
|
|
311
345
|
<span class="pf-c-menu-toggle__text">Ned Username</span>
|
|
@@ -350,8 +384,7 @@ cssPrefix: pf-c-menu-toggle
|
|
|
350
384
|
| Class | Applied | Outcome |
|
|
351
385
|
| -------------------------------- | ------------------- | --------------------------------------------------------------- |
|
|
352
386
|
| `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
|
|
353
|
-
| `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon.
|
|
354
|
-
| `.pf-c-menu-toggle__image` | `<span>` | Defines the menu toggle component image. |
|
|
387
|
+
| `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon/image. |
|
|
355
388
|
| `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
|
|
356
389
|
| `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
|
|
357
390
|
| `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
|
|
@@ -136,7 +136,7 @@ wrapperTag: div
|
|
|
136
136
|
|
|
137
137
|
```
|
|
138
138
|
|
|
139
|
-
### Centered
|
|
139
|
+
### Centered section
|
|
140
140
|
|
|
141
141
|
```html
|
|
142
142
|
<div class="pf-c-page">
|
|
@@ -149,7 +149,16 @@ wrapperTag: div
|
|
|
149
149
|
</header>
|
|
150
150
|
<main class="pf-c-page__main" tabindex="-1">
|
|
151
151
|
<section class="pf-c-page__main-section pf-m-limit-width pf-m-align-center">
|
|
152
|
-
<div class="pf-c-page__main-body">
|
|
152
|
+
<div class="pf-c-page__main-body">
|
|
153
|
+
<div class="pf-c-card">
|
|
154
|
+
<div class="pf-c-card__body">
|
|
155
|
+
When a width limited page section is wider than the value of
|
|
156
|
+
<code>--pf-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
|
|
157
|
+
<br />
|
|
158
|
+
<br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
153
162
|
</section>
|
|
154
163
|
</main>
|
|
155
164
|
</div>
|
|
@@ -1849,13 +1849,21 @@ The multiselect should be used when the user is selecting multiple items from a
|
|
|
1849
1849
|
|
|
1850
1850
|
<div class="pf-c-select__menu">
|
|
1851
1851
|
<div class="pf-c-select__menu-search">
|
|
1852
|
-
<input
|
|
1853
|
-
class="pf-c-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1852
|
+
<div class="pf-c-search-input">
|
|
1853
|
+
<div class="pf-c-search-input__bar">
|
|
1854
|
+
<span class="pf-c-search-input__text">
|
|
1855
|
+
<span class="pf-c-search-input__icon">
|
|
1856
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
1857
|
+
</span>
|
|
1858
|
+
<input
|
|
1859
|
+
class="pf-c-search-input__text-input"
|
|
1860
|
+
type="text"
|
|
1861
|
+
placeholder="Search"
|
|
1862
|
+
aria-label="Search"
|
|
1863
|
+
/>
|
|
1864
|
+
</span>
|
|
1865
|
+
</div>
|
|
1866
|
+
</div>
|
|
1859
1867
|
</div>
|
|
1860
1868
|
<hr class="pf-c-divider" />
|
|
1861
1869
|
<div class="pf-c-select__menu-group">
|
|
@@ -2730,13 +2738,21 @@ The plain select variation should be used when you do not want a border applied
|
|
|
2730
2738
|
|
|
2731
2739
|
<div class="pf-c-select__menu" aria-labelledby="select-favorites-label">
|
|
2732
2740
|
<div class="pf-c-select__menu-search">
|
|
2733
|
-
<input
|
|
2734
|
-
class="pf-c-
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
|
|
2741
|
+
<div class="pf-c-search-input">
|
|
2742
|
+
<div class="pf-c-search-input__bar">
|
|
2743
|
+
<span class="pf-c-search-input__text">
|
|
2744
|
+
<span class="pf-c-search-input__icon">
|
|
2745
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
2746
|
+
</span>
|
|
2747
|
+
<input
|
|
2748
|
+
class="pf-c-search-input__text-input"
|
|
2749
|
+
type="text"
|
|
2750
|
+
placeholder="Search"
|
|
2751
|
+
aria-label="Search"
|
|
2752
|
+
/>
|
|
2753
|
+
</span>
|
|
2754
|
+
</div>
|
|
2755
|
+
</div>
|
|
2740
2756
|
</div>
|
|
2741
2757
|
<hr class="pf-c-divider" />
|
|
2742
2758
|
<div class="pf-c-select__menu-group">
|
|
@@ -19965,6 +19965,14 @@ Add a [width modifier](#width-modifiers) to `thead th` to limit string length or
|
|
|
19965
19965
|
|
|
19966
19966
|
## Sticky table modifiers
|
|
19967
19967
|
|
|
19968
|
+
**Note:** Sticky table headers and columns have a higher `z-index` than the `z-index` used for menus (dropdown, select, etc). The intent is that the contents of a scrollable table will scroll under the sticky header/column, including any expanded menus. However, there may be use cases where a menu needs to appear on top of a sticky header/column, such as an expanded menu in a toolbar above a table with a sticky header.
|
|
19969
|
+
|
|
19970
|
+
There are a few ways this can be handled:
|
|
19971
|
+
|
|
19972
|
+
- Manipulate the `z-index` of the menu and/or table headers/columns manually.
|
|
19973
|
+
- Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the `<body>` element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
|
|
19974
|
+
- In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index` than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
|
|
19975
|
+
|
|
19968
19976
|
### Sticky header
|
|
19969
19977
|
|
|
19970
19978
|
```html
|