@patternfly/patternfly 5.0.0-alpha.50 → 5.0.0-alpha.52
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/UPGRADE-GUIDE.md +1 -1
- package/assets/icons/iconUnicodes.json +129 -128
- package/assets/pficon/pf-v5-pficon.woff2 +0 -0
- package/assets/pficon/pficon.scss +402 -267
- package/base/_icons.scss +1 -1
- package/base/patternfly-icons.css +136 -132
- package/base/patternfly-pf-icons.css +136 -132
- package/base/patternfly-pf-icons.scss +1 -1
- package/base/patternfly-variables.css +2 -2
- package/components/AboutModalBox/about-modal-box.css +1 -20
- package/components/AboutModalBox/about-modal-box.scss +3 -24
- package/components/BackgroundImage/background-image.css +1 -2
- package/components/BackgroundImage/background-image.scss +1 -2
- package/components/FormControl/form-control.css +0 -7
- package/components/FormControl/form-control.scss +7 -7
- package/components/Icon/icon.css +25 -24
- package/components/Icon/icon.scss +30 -31
- package/components/NotificationBadge/notification-badge.css +2 -2
- package/components/NotificationBadge/notification-badge.scss +2 -2
- package/components/ProgressStepper/progress-stepper.css +1 -1
- package/components/ProgressStepper/progress-stepper.scss +1 -1
- package/components/_all.scss +1 -1
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +7 -9
- package/docs/components/Avatar/examples/Avatar.css +1 -1
- package/docs/components/BackgroundImage/examples/BackgroundImage.md +7 -11
- package/docs/components/CodeEditor/examples/CodeEditor.md +1 -1
- package/docs/components/Form/examples/Form.md +11 -11
- package/docs/components/Label/examples/Label.md +1220 -1
- package/docs/components/Login/examples/Login.md +20 -5
- package/docs/components/ModalBox/examples/ModalBox.md +1 -1
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +3 -3
- package/docs/components/NotificationBadge/examples/NotificationBadge.css +1 -1
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +18 -18
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
- package/docs/components/Table/examples/Table.md +2 -2
- package/docs/components/Tabs/examples/Tabs.md +102 -102
- package/docs/demos/AboutModal/examples/AboutModal.md +6 -3
- package/docs/demos/Alert/examples/Alert.md +6 -6
- package/docs/demos/BackToTop/examples/BackToTop.md +2 -2
- package/docs/demos/Banner/examples/Banner.md +4 -4
- package/docs/demos/CardView/examples/CardView.md +2 -2
- package/docs/demos/ContextSelector/examples/ContextSelector.md +6 -6
- package/docs/demos/Dashboard/examples/Dashboard.md +7 -7
- package/docs/demos/DataList/examples/DataList.md +8 -8
- package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -6
- package/docs/demos/Drawer/examples/Drawer.md +10 -10
- package/docs/demos/Form/examples/BasicForms.md +10 -10
- package/docs/demos/JumpLinks/examples/JumpLinks.md +12 -12
- package/docs/demos/Masthead/examples/Masthead.md +4 -4
- package/docs/demos/Modal/examples/Modal.md +15 -15
- package/docs/demos/Nav/examples/Nav.md +16 -16
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +15 -15
- package/docs/demos/Page/examples/Page.md +18 -18
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +14 -14
- package/docs/demos/Skeleton/examples/Skeleton.md +2 -2
- package/docs/demos/Table/examples/Table.md +32 -32
- package/docs/demos/Tabs/examples/Tabs.md +12 -12
- package/docs/demos/Toolbar/examples/Toolbar.md +4 -4
- package/docs/demos/Wizard/examples/Wizard.md +18 -18
- package/icons/{pf-icons.mjs → pficons.mjs} +1 -0
- package/package.json +1 -1
- package/patternfly-base-no-globals.css +138 -134
- package/patternfly-base.css +138 -134
- package/patternfly-no-globals.css +168 -190
- package/patternfly.css +168 -190
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/scss-variables.scss +2 -5
- package/assets/pficon/pficon.woff2 +0 -0
- package/docs/components/LabelGroup/examples/LabelGroup.md +0 -1222
- /package/base/{_pf-icons.scss → _pficons.scss} +0 -0
- /package/components/{LabelGroup → Label}/label-group.css +0 -0
- /package/components/{LabelGroup → Label}/label-group.scss +0 -0
|
@@ -2042,9 +2042,1201 @@ This style of label is used to add new labels to a label group.
|
|
|
2042
2042
|
|
|
2043
2043
|
```
|
|
2044
2044
|
|
|
2045
|
+
### Basic label group
|
|
2046
|
+
|
|
2047
|
+
Use a label group to display multiple labels at once.
|
|
2048
|
+
|
|
2049
|
+
```html
|
|
2050
|
+
<div class="pf-v5-c-label-group">
|
|
2051
|
+
<div class="pf-v5-c-label-group__main">
|
|
2052
|
+
<ul
|
|
2053
|
+
class="pf-v5-c-label-group__list"
|
|
2054
|
+
role="list"
|
|
2055
|
+
aria-label="Group of labels"
|
|
2056
|
+
>
|
|
2057
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2058
|
+
<span class="pf-v5-c-label">
|
|
2059
|
+
<span class="pf-v5-c-label__content">
|
|
2060
|
+
<span class="pf-v5-c-label__icon">
|
|
2061
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2062
|
+
</span>
|
|
2063
|
+
<span class="pf-v5-c-label__text">Label 1</span>
|
|
2064
|
+
</span>
|
|
2065
|
+
</span>
|
|
2066
|
+
</li>
|
|
2067
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2068
|
+
<span class="pf-v5-c-label pf-m-blue">
|
|
2069
|
+
<span class="pf-v5-c-label__content">
|
|
2070
|
+
<span class="pf-v5-c-label__icon">
|
|
2071
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2072
|
+
</span>
|
|
2073
|
+
<span class="pf-v5-c-label__text">Label 2</span>
|
|
2074
|
+
</span>
|
|
2075
|
+
</span>
|
|
2076
|
+
</li>
|
|
2077
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2078
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2079
|
+
<span class="pf-v5-c-label__content">
|
|
2080
|
+
<span class="pf-v5-c-label__icon">
|
|
2081
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2082
|
+
</span>
|
|
2083
|
+
<span class="pf-v5-c-label__text">Label 3</span>
|
|
2084
|
+
</span>
|
|
2085
|
+
</span>
|
|
2086
|
+
</li>
|
|
2087
|
+
</ul>
|
|
2088
|
+
</div>
|
|
2089
|
+
</div>
|
|
2090
|
+
|
|
2091
|
+
```
|
|
2092
|
+
|
|
2093
|
+
### Label group with overflow
|
|
2094
|
+
|
|
2095
|
+
```html
|
|
2096
|
+
<div class="pf-v5-c-label-group">
|
|
2097
|
+
<div class="pf-v5-c-label-group__main">
|
|
2098
|
+
<ul
|
|
2099
|
+
class="pf-v5-c-label-group__list"
|
|
2100
|
+
role="list"
|
|
2101
|
+
aria-label="Group of labels"
|
|
2102
|
+
>
|
|
2103
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2104
|
+
<span class="pf-v5-c-label">
|
|
2105
|
+
<span class="pf-v5-c-label__content">
|
|
2106
|
+
<span class="pf-v5-c-label__icon">
|
|
2107
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2108
|
+
</span>
|
|
2109
|
+
<span class="pf-v5-c-label__text">Label 1</span>
|
|
2110
|
+
</span>
|
|
2111
|
+
</span>
|
|
2112
|
+
</li>
|
|
2113
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2114
|
+
<span class="pf-v5-c-label pf-m-blue">
|
|
2115
|
+
<span class="pf-v5-c-label__content">
|
|
2116
|
+
<span class="pf-v5-c-label__icon">
|
|
2117
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2118
|
+
</span>
|
|
2119
|
+
<span class="pf-v5-c-label__text">Label 2</span>
|
|
2120
|
+
</span>
|
|
2121
|
+
</span>
|
|
2122
|
+
</li>
|
|
2123
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2124
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2125
|
+
<span class="pf-v5-c-label__content">
|
|
2126
|
+
<span class="pf-v5-c-label__icon">
|
|
2127
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2128
|
+
</span>
|
|
2129
|
+
<span class="pf-v5-c-label__text">Label 3</span>
|
|
2130
|
+
</span>
|
|
2131
|
+
</span>
|
|
2132
|
+
</li>
|
|
2133
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2134
|
+
<button class="pf-v5-c-label pf-m-overflow pf-m-blue" type="button">
|
|
2135
|
+
<span class="pf-v5-c-label__content">
|
|
2136
|
+
<span class="pf-v5-c-label__text">3 more</span>
|
|
2137
|
+
</span>
|
|
2138
|
+
</button>
|
|
2139
|
+
</li>
|
|
2140
|
+
</ul>
|
|
2141
|
+
</div>
|
|
2142
|
+
</div>
|
|
2143
|
+
|
|
2144
|
+
```
|
|
2145
|
+
|
|
2146
|
+
### Label group with overflow expanded
|
|
2147
|
+
|
|
2148
|
+
```html
|
|
2149
|
+
<div class="pf-v5-c-label-group">
|
|
2150
|
+
<div class="pf-v5-c-label-group__main">
|
|
2151
|
+
<ul
|
|
2152
|
+
class="pf-v5-c-label-group__list"
|
|
2153
|
+
role="list"
|
|
2154
|
+
aria-label="Group of labels"
|
|
2155
|
+
>
|
|
2156
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2157
|
+
<span class="pf-v5-c-label">
|
|
2158
|
+
<span class="pf-v5-c-label__content">
|
|
2159
|
+
<span class="pf-v5-c-label__icon">
|
|
2160
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2161
|
+
</span>
|
|
2162
|
+
<span class="pf-v5-c-label__text">Label 1</span>
|
|
2163
|
+
</span>
|
|
2164
|
+
</span>
|
|
2165
|
+
</li>
|
|
2166
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2167
|
+
<span class="pf-v5-c-label pf-m-blue">
|
|
2168
|
+
<span class="pf-v5-c-label__content">
|
|
2169
|
+
<span class="pf-v5-c-label__icon">
|
|
2170
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2171
|
+
</span>
|
|
2172
|
+
<span class="pf-v5-c-label__text">Label 2</span>
|
|
2173
|
+
</span>
|
|
2174
|
+
</span>
|
|
2175
|
+
</li>
|
|
2176
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2177
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2178
|
+
<span class="pf-v5-c-label__content">
|
|
2179
|
+
<span class="pf-v5-c-label__icon">
|
|
2180
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2181
|
+
</span>
|
|
2182
|
+
<span class="pf-v5-c-label__text">Label 3</span>
|
|
2183
|
+
</span>
|
|
2184
|
+
</span>
|
|
2185
|
+
</li>
|
|
2186
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2187
|
+
<span class="pf-v5-c-label pf-m-cyan">
|
|
2188
|
+
<span class="pf-v5-c-label__content">
|
|
2189
|
+
<span class="pf-v5-c-label__icon">
|
|
2190
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2191
|
+
</span>
|
|
2192
|
+
<span class="pf-v5-c-label__text">Label 4</span>
|
|
2193
|
+
</span>
|
|
2194
|
+
</span>
|
|
2195
|
+
</li>
|
|
2196
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2197
|
+
<span class="pf-v5-c-label pf-m-purple">
|
|
2198
|
+
<span class="pf-v5-c-label__content">
|
|
2199
|
+
<span class="pf-v5-c-label__icon">
|
|
2200
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2201
|
+
</span>
|
|
2202
|
+
<span class="pf-v5-c-label__text">Label 5</span>
|
|
2203
|
+
</span>
|
|
2204
|
+
</span>
|
|
2205
|
+
</li>
|
|
2206
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2207
|
+
<button class="pf-v5-c-label pf-m-overflow" type="button">
|
|
2208
|
+
<span class="pf-v5-c-label__content">
|
|
2209
|
+
<span class="pf-v5-c-label__text">3 less</span>
|
|
2210
|
+
</span>
|
|
2211
|
+
</button>
|
|
2212
|
+
</li>
|
|
2213
|
+
</ul>
|
|
2214
|
+
</div>
|
|
2215
|
+
</div>
|
|
2216
|
+
|
|
2217
|
+
```
|
|
2218
|
+
|
|
2219
|
+
### Editable label group with add button
|
|
2220
|
+
|
|
2221
|
+
The contents of a label group can be modified by removing labels or adding new ones using the Add button.
|
|
2222
|
+
|
|
2223
|
+
```html
|
|
2224
|
+
<div class="pf-v5-c-label-group">
|
|
2225
|
+
<div class="pf-v5-c-label-group__main">
|
|
2226
|
+
<ul
|
|
2227
|
+
class="pf-v5-c-label-group__list"
|
|
2228
|
+
role="list"
|
|
2229
|
+
aria-label="Group of labels"
|
|
2230
|
+
>
|
|
2231
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2232
|
+
<span class="pf-v5-c-label">
|
|
2233
|
+
<span class="pf-v5-c-label__content">
|
|
2234
|
+
<span class="pf-v5-c-label__icon">
|
|
2235
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2236
|
+
</span>
|
|
2237
|
+
<span class="pf-v5-c-label__text">Label 1</span>
|
|
2238
|
+
</span>
|
|
2239
|
+
</span>
|
|
2240
|
+
</li>
|
|
2241
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2242
|
+
<span class="pf-v5-c-label pf-m-blue">
|
|
2243
|
+
<span class="pf-v5-c-label__content">
|
|
2244
|
+
<span class="pf-v5-c-label__icon">
|
|
2245
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2246
|
+
</span>
|
|
2247
|
+
<span class="pf-v5-c-label__text">Label 2</span>
|
|
2248
|
+
</span>
|
|
2249
|
+
</span>
|
|
2250
|
+
</li>
|
|
2251
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2252
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2253
|
+
<span class="pf-v5-c-label__content">
|
|
2254
|
+
<span class="pf-v5-c-label__icon">
|
|
2255
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2256
|
+
</span>
|
|
2257
|
+
<span class="pf-v5-c-label__text">Label 3</span>
|
|
2258
|
+
</span>
|
|
2259
|
+
</span>
|
|
2260
|
+
</li>
|
|
2261
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2262
|
+
<button class="pf-v5-c-label pf-m-add" type="button">
|
|
2263
|
+
<span class="pf-v5-c-label__content">
|
|
2264
|
+
<span class="pf-v5-c-label__text">Add label</span>
|
|
2265
|
+
</span>
|
|
2266
|
+
</button>
|
|
2267
|
+
</li>
|
|
2268
|
+
</ul>
|
|
2269
|
+
</div>
|
|
2270
|
+
</div>
|
|
2271
|
+
|
|
2272
|
+
```
|
|
2273
|
+
|
|
2274
|
+
### Label group with category label
|
|
2275
|
+
|
|
2276
|
+
```html
|
|
2277
|
+
<div class="pf-v5-c-label-group pf-m-category">
|
|
2278
|
+
<div class="pf-v5-c-label-group__main">
|
|
2279
|
+
<span
|
|
2280
|
+
class="pf-v5-c-label-group__label"
|
|
2281
|
+
aria-hidden="true"
|
|
2282
|
+
id="label-group-category-label"
|
|
2283
|
+
>Group label</span>
|
|
2284
|
+
<ul
|
|
2285
|
+
class="pf-v5-c-label-group__list"
|
|
2286
|
+
role="list"
|
|
2287
|
+
aria-labelledby="label-group-category-label"
|
|
2288
|
+
>
|
|
2289
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2290
|
+
<span class="pf-v5-c-label">
|
|
2291
|
+
<span class="pf-v5-c-label__content">
|
|
2292
|
+
<span class="pf-v5-c-label__icon">
|
|
2293
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2294
|
+
</span>
|
|
2295
|
+
<span class="pf-v5-c-label__text">Label 1</span>
|
|
2296
|
+
</span>
|
|
2297
|
+
</span>
|
|
2298
|
+
</li>
|
|
2299
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2300
|
+
<span class="pf-v5-c-label pf-m-blue">
|
|
2301
|
+
<span class="pf-v5-c-label__content">
|
|
2302
|
+
<span class="pf-v5-c-label__icon">
|
|
2303
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2304
|
+
</span>
|
|
2305
|
+
<span class="pf-v5-c-label__text">Label 2</span>
|
|
2306
|
+
</span>
|
|
2307
|
+
</span>
|
|
2308
|
+
</li>
|
|
2309
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2310
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2311
|
+
<span class="pf-v5-c-label__content">
|
|
2312
|
+
<span class="pf-v5-c-label__icon">
|
|
2313
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2314
|
+
</span>
|
|
2315
|
+
<span class="pf-v5-c-label__text">Label 3</span>
|
|
2316
|
+
</span>
|
|
2317
|
+
</span>
|
|
2318
|
+
</li>
|
|
2319
|
+
</ul>
|
|
2320
|
+
</div>
|
|
2321
|
+
</div>
|
|
2322
|
+
|
|
2323
|
+
```
|
|
2324
|
+
|
|
2325
|
+
### Label group with removable categories
|
|
2326
|
+
|
|
2327
|
+
```html
|
|
2328
|
+
<div class="pf-v5-c-label-group pf-m-category">
|
|
2329
|
+
<div class="pf-v5-c-label-group__main">
|
|
2330
|
+
<span
|
|
2331
|
+
class="pf-v5-c-label-group__label"
|
|
2332
|
+
aria-hidden="true"
|
|
2333
|
+
id="label-group-category-removable-label"
|
|
2334
|
+
>Group label</span>
|
|
2335
|
+
<ul
|
|
2336
|
+
class="pf-v5-c-label-group__list"
|
|
2337
|
+
role="list"
|
|
2338
|
+
aria-labelledby="label-group-category-removable-label"
|
|
2339
|
+
>
|
|
2340
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2341
|
+
<span class="pf-v5-c-label">
|
|
2342
|
+
<span class="pf-v5-c-label__content">
|
|
2343
|
+
<span class="pf-v5-c-label__icon">
|
|
2344
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2345
|
+
</span>
|
|
2346
|
+
<span class="pf-v5-c-label__text">Label 1</span>
|
|
2347
|
+
</span>
|
|
2348
|
+
</span>
|
|
2349
|
+
</li>
|
|
2350
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2351
|
+
<span class="pf-v5-c-label pf-m-blue">
|
|
2352
|
+
<span class="pf-v5-c-label__content">
|
|
2353
|
+
<span class="pf-v5-c-label__icon">
|
|
2354
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2355
|
+
</span>
|
|
2356
|
+
<span class="pf-v5-c-label__text">Label 2</span>
|
|
2357
|
+
</span>
|
|
2358
|
+
</span>
|
|
2359
|
+
</li>
|
|
2360
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2361
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2362
|
+
<span class="pf-v5-c-label__content">
|
|
2363
|
+
<span class="pf-v5-c-label__icon">
|
|
2364
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2365
|
+
</span>
|
|
2366
|
+
<span class="pf-v5-c-label__text">Label 3</span>
|
|
2367
|
+
</span>
|
|
2368
|
+
</span>
|
|
2369
|
+
</li>
|
|
2370
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2371
|
+
<span class="pf-v5-c-label pf-m-cyan">
|
|
2372
|
+
<span class="pf-v5-c-label__content">
|
|
2373
|
+
<span class="pf-v5-c-label__icon">
|
|
2374
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2375
|
+
</span>
|
|
2376
|
+
<span class="pf-v5-c-label__text">Label 4</span>
|
|
2377
|
+
</span>
|
|
2378
|
+
</span>
|
|
2379
|
+
</li>
|
|
2380
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2381
|
+
<span class="pf-v5-c-label pf-m-orange">
|
|
2382
|
+
<span class="pf-v5-c-label__content">
|
|
2383
|
+
<span class="pf-v5-c-label__icon">
|
|
2384
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2385
|
+
</span>
|
|
2386
|
+
<span class="pf-v5-c-label__text">Label 5</span>
|
|
2387
|
+
</span>
|
|
2388
|
+
</span>
|
|
2389
|
+
</li>
|
|
2390
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2391
|
+
<span class="pf-v5-c-label pf-m-red">
|
|
2392
|
+
<span class="pf-v5-c-label__content">
|
|
2393
|
+
<span class="pf-v5-c-label__icon">
|
|
2394
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2395
|
+
</span>
|
|
2396
|
+
<span class="pf-v5-c-label__text">Label 6</span>
|
|
2397
|
+
</span>
|
|
2398
|
+
</span>
|
|
2399
|
+
</li>
|
|
2400
|
+
</ul>
|
|
2401
|
+
</div>
|
|
2402
|
+
<div class="pf-v5-c-label-group__close">
|
|
2403
|
+
<button
|
|
2404
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2405
|
+
type="button"
|
|
2406
|
+
aria-labelledby="label-group-category-removable-button label-group-category-removable-label"
|
|
2407
|
+
aria-label="Close label group"
|
|
2408
|
+
id="label-group-category-removable-button"
|
|
2409
|
+
>
|
|
2410
|
+
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
2411
|
+
</button>
|
|
2412
|
+
</div>
|
|
2413
|
+
</div>
|
|
2414
|
+
|
|
2415
|
+
```
|
|
2416
|
+
|
|
2417
|
+
### Vertical label group
|
|
2418
|
+
|
|
2419
|
+
```html
|
|
2420
|
+
<div class="pf-v5-c-label-group pf-m-vertical">
|
|
2421
|
+
<div class="pf-v5-c-label-group__main">
|
|
2422
|
+
<ul
|
|
2423
|
+
class="pf-v5-c-label-group__list"
|
|
2424
|
+
role="list"
|
|
2425
|
+
aria-label="Group of labels"
|
|
2426
|
+
>
|
|
2427
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2428
|
+
<span class="pf-v5-c-label">
|
|
2429
|
+
<span class="pf-v5-c-label__content">
|
|
2430
|
+
<span class="pf-v5-c-label__icon">
|
|
2431
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2432
|
+
</span>
|
|
2433
|
+
<span class="pf-v5-c-label__text">Label 1</span>
|
|
2434
|
+
</span>
|
|
2435
|
+
</span>
|
|
2436
|
+
</li>
|
|
2437
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2438
|
+
<span class="pf-v5-c-label pf-m-blue">
|
|
2439
|
+
<span class="pf-v5-c-label__content">
|
|
2440
|
+
<span class="pf-v5-c-label__icon">
|
|
2441
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2442
|
+
</span>
|
|
2443
|
+
<span class="pf-v5-c-label__text">Label 2</span>
|
|
2444
|
+
</span>
|
|
2445
|
+
</span>
|
|
2446
|
+
</li>
|
|
2447
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2448
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2449
|
+
<span class="pf-v5-c-label__content">
|
|
2450
|
+
<span class="pf-v5-c-label__icon">
|
|
2451
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2452
|
+
</span>
|
|
2453
|
+
<span class="pf-v5-c-label__text">Label 3</span>
|
|
2454
|
+
</span>
|
|
2455
|
+
</span>
|
|
2456
|
+
</li>
|
|
2457
|
+
</ul>
|
|
2458
|
+
</div>
|
|
2459
|
+
</div>
|
|
2460
|
+
|
|
2461
|
+
```
|
|
2462
|
+
|
|
2463
|
+
### Vertical label group with overflow
|
|
2464
|
+
|
|
2465
|
+
```html
|
|
2466
|
+
<div class="pf-v5-c-label-group pf-m-vertical">
|
|
2467
|
+
<div class="pf-v5-c-label-group__main">
|
|
2468
|
+
<ul
|
|
2469
|
+
class="pf-v5-c-label-group__list"
|
|
2470
|
+
role="list"
|
|
2471
|
+
aria-label="Group of labels"
|
|
2472
|
+
>
|
|
2473
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2474
|
+
<span class="pf-v5-c-label">
|
|
2475
|
+
<span class="pf-v5-c-label__content">
|
|
2476
|
+
<span class="pf-v5-c-label__icon">
|
|
2477
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2478
|
+
</span>
|
|
2479
|
+
<span class="pf-v5-c-label__text">Label 1</span>
|
|
2480
|
+
</span>
|
|
2481
|
+
</span>
|
|
2482
|
+
</li>
|
|
2483
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2484
|
+
<span class="pf-v5-c-label pf-m-blue">
|
|
2485
|
+
<span class="pf-v5-c-label__content">
|
|
2486
|
+
<span class="pf-v5-c-label__icon">
|
|
2487
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2488
|
+
</span>
|
|
2489
|
+
<span class="pf-v5-c-label__text">Label 2</span>
|
|
2490
|
+
</span>
|
|
2491
|
+
</span>
|
|
2492
|
+
</li>
|
|
2493
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2494
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2495
|
+
<span class="pf-v5-c-label__content">
|
|
2496
|
+
<span class="pf-v5-c-label__icon">
|
|
2497
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2498
|
+
</span>
|
|
2499
|
+
<span class="pf-v5-c-label__text">Label 3</span>
|
|
2500
|
+
</span>
|
|
2501
|
+
</span>
|
|
2502
|
+
</li>
|
|
2503
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2504
|
+
<button class="pf-v5-c-label pf-m-overflow" type="button">
|
|
2505
|
+
<span class="pf-v5-c-label__content">
|
|
2506
|
+
<span class="pf-v5-c-label__text">3 more</span>
|
|
2507
|
+
</span>
|
|
2508
|
+
</button>
|
|
2509
|
+
</li>
|
|
2510
|
+
</ul>
|
|
2511
|
+
</div>
|
|
2512
|
+
</div>
|
|
2513
|
+
|
|
2514
|
+
```
|
|
2515
|
+
|
|
2516
|
+
### Vertical label group with overflow expanded
|
|
2517
|
+
|
|
2518
|
+
```html
|
|
2519
|
+
<div class="pf-v5-c-label-group pf-m-vertical">
|
|
2520
|
+
<div class="pf-v5-c-label-group__main">
|
|
2521
|
+
<ul
|
|
2522
|
+
class="pf-v5-c-label-group__list"
|
|
2523
|
+
role="list"
|
|
2524
|
+
aria-label="Group of labels"
|
|
2525
|
+
>
|
|
2526
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2527
|
+
<span class="pf-v5-c-label">
|
|
2528
|
+
<span class="pf-v5-c-label__content">
|
|
2529
|
+
<span class="pf-v5-c-label__icon">
|
|
2530
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2531
|
+
</span>
|
|
2532
|
+
<span class="pf-v5-c-label__text">Label 1</span>
|
|
2533
|
+
</span>
|
|
2534
|
+
</span>
|
|
2535
|
+
</li>
|
|
2536
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2537
|
+
<span class="pf-v5-c-label pf-m-blue">
|
|
2538
|
+
<span class="pf-v5-c-label__content">
|
|
2539
|
+
<span class="pf-v5-c-label__icon">
|
|
2540
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2541
|
+
</span>
|
|
2542
|
+
<span class="pf-v5-c-label__text">Label 2</span>
|
|
2543
|
+
</span>
|
|
2544
|
+
</span>
|
|
2545
|
+
</li>
|
|
2546
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2547
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2548
|
+
<span class="pf-v5-c-label__content">
|
|
2549
|
+
<span class="pf-v5-c-label__icon">
|
|
2550
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2551
|
+
</span>
|
|
2552
|
+
<span class="pf-v5-c-label__text">Label 3</span>
|
|
2553
|
+
</span>
|
|
2554
|
+
</span>
|
|
2555
|
+
</li>
|
|
2556
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2557
|
+
<span class="pf-v5-c-label pf-m-cyan">
|
|
2558
|
+
<span class="pf-v5-c-label__content">
|
|
2559
|
+
<span class="pf-v5-c-label__icon">
|
|
2560
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2561
|
+
</span>
|
|
2562
|
+
<span class="pf-v5-c-label__text">Label 4</span>
|
|
2563
|
+
</span>
|
|
2564
|
+
</span>
|
|
2565
|
+
</li>
|
|
2566
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2567
|
+
<span class="pf-v5-c-label pf-m-purple">
|
|
2568
|
+
<span class="pf-v5-c-label__content">
|
|
2569
|
+
<span class="pf-v5-c-label__icon">
|
|
2570
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2571
|
+
</span>
|
|
2572
|
+
<span class="pf-v5-c-label__text">Label 5</span>
|
|
2573
|
+
</span>
|
|
2574
|
+
</span>
|
|
2575
|
+
</li>
|
|
2576
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2577
|
+
<button class="pf-v5-c-label pf-m-overflow" type="button">
|
|
2578
|
+
<span class="pf-v5-c-label__content">
|
|
2579
|
+
<span class="pf-v5-c-label__text">3 less</span>
|
|
2580
|
+
</span>
|
|
2581
|
+
</button>
|
|
2582
|
+
</li>
|
|
2583
|
+
</ul>
|
|
2584
|
+
</div>
|
|
2585
|
+
</div>
|
|
2586
|
+
|
|
2587
|
+
```
|
|
2588
|
+
|
|
2589
|
+
### Vertical label group with category
|
|
2590
|
+
|
|
2591
|
+
```html
|
|
2592
|
+
<div class="pf-v5-c-label-group pf-m-vertical pf-m-category">
|
|
2593
|
+
<div class="pf-v5-c-label-group__main">
|
|
2594
|
+
<span
|
|
2595
|
+
class="pf-v5-c-label-group__label"
|
|
2596
|
+
aria-hidden="true"
|
|
2597
|
+
id="label-group-vertical-category-label"
|
|
2598
|
+
>Group label</span>
|
|
2599
|
+
<ul
|
|
2600
|
+
class="pf-v5-c-label-group__list"
|
|
2601
|
+
role="list"
|
|
2602
|
+
aria-labelledby="label-group-vertical-category-label"
|
|
2603
|
+
>
|
|
2604
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2605
|
+
<span class="pf-v5-c-label">
|
|
2606
|
+
<span class="pf-v5-c-label__content">
|
|
2607
|
+
<span class="pf-v5-c-label__icon">
|
|
2608
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2609
|
+
</span>
|
|
2610
|
+
<span class="pf-v5-c-label__text">Label 1</span>
|
|
2611
|
+
</span>
|
|
2612
|
+
</span>
|
|
2613
|
+
</li>
|
|
2614
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2615
|
+
<span class="pf-v5-c-label pf-m-blue">
|
|
2616
|
+
<span class="pf-v5-c-label__content">
|
|
2617
|
+
<span class="pf-v5-c-label__icon">
|
|
2618
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2619
|
+
</span>
|
|
2620
|
+
<span class="pf-v5-c-label__text">Label 2</span>
|
|
2621
|
+
</span>
|
|
2622
|
+
</span>
|
|
2623
|
+
</li>
|
|
2624
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2625
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2626
|
+
<span class="pf-v5-c-label__content">
|
|
2627
|
+
<span class="pf-v5-c-label__icon">
|
|
2628
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
2629
|
+
</span>
|
|
2630
|
+
<span class="pf-v5-c-label__text">Label 3</span>
|
|
2631
|
+
</span>
|
|
2632
|
+
</span>
|
|
2633
|
+
</li>
|
|
2634
|
+
</ul>
|
|
2635
|
+
</div>
|
|
2636
|
+
</div>
|
|
2637
|
+
|
|
2638
|
+
```
|
|
2639
|
+
|
|
2640
|
+
### Vertical label group with removable category
|
|
2641
|
+
|
|
2642
|
+
```html
|
|
2643
|
+
<div class="pf-v5-c-label-group pf-m-vertical pf-m-category">
|
|
2644
|
+
<div class="pf-v5-c-label-group__main">
|
|
2645
|
+
<span
|
|
2646
|
+
class="pf-v5-c-label-group__label"
|
|
2647
|
+
aria-hidden="true"
|
|
2648
|
+
id="label-group-vertical-category-removable-label"
|
|
2649
|
+
>Group label</span>
|
|
2650
|
+
<ul
|
|
2651
|
+
class="pf-v5-c-label-group__list"
|
|
2652
|
+
role="list"
|
|
2653
|
+
aria-labelledby="label-group-vertical-category-removable-label"
|
|
2654
|
+
>
|
|
2655
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2656
|
+
<span class="pf-v5-c-label">
|
|
2657
|
+
<span class="pf-v5-c-label__content">
|
|
2658
|
+
<span class="pf-v5-c-label__text">Label 1</span>
|
|
2659
|
+
</span>
|
|
2660
|
+
</span>
|
|
2661
|
+
</li>
|
|
2662
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2663
|
+
<span class="pf-v5-c-label pf-m-blue">
|
|
2664
|
+
<span class="pf-v5-c-label__content">
|
|
2665
|
+
<span class="pf-v5-c-label__text">Label 2</span>
|
|
2666
|
+
</span>
|
|
2667
|
+
</span>
|
|
2668
|
+
</li>
|
|
2669
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2670
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2671
|
+
<span class="pf-v5-c-label__content">
|
|
2672
|
+
<span class="pf-v5-c-label__text">Label 3</span>
|
|
2673
|
+
</span>
|
|
2674
|
+
</span>
|
|
2675
|
+
</li>
|
|
2676
|
+
</ul>
|
|
2677
|
+
</div>
|
|
2678
|
+
<div class="pf-v5-c-label-group__close">
|
|
2679
|
+
<button
|
|
2680
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2681
|
+
type="button"
|
|
2682
|
+
aria-labelledby="label-group-vertical-category-removable-button label-group-vertical-category-removable-label"
|
|
2683
|
+
aria-label="Close label group"
|
|
2684
|
+
id="label-group-vertical-category-removable-button"
|
|
2685
|
+
>
|
|
2686
|
+
<i class="fas fa-times-circle" aria-hidden="true"></i>
|
|
2687
|
+
</button>
|
|
2688
|
+
</div>
|
|
2689
|
+
</div>
|
|
2690
|
+
|
|
2691
|
+
```
|
|
2692
|
+
|
|
2693
|
+
In addition to the JavaScript management of [editable labels](/components/label#editable), dynamic label groups also need:
|
|
2694
|
+
|
|
2695
|
+
* `.pf-v5-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v5-c-label-group__textarea`
|
|
2696
|
+
|
|
2697
|
+
### Editable labels, dynamic label group
|
|
2698
|
+
|
|
2699
|
+
```html isBeta
|
|
2700
|
+
<div class="pf-v5-c-label-group pf-m-editable">
|
|
2701
|
+
<div class="pf-v5-c-label-group__main">
|
|
2702
|
+
<ul
|
|
2703
|
+
class="pf-v5-c-label-group__list"
|
|
2704
|
+
role="list"
|
|
2705
|
+
aria-label="Group of labels"
|
|
2706
|
+
>
|
|
2707
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2708
|
+
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
2709
|
+
<button
|
|
2710
|
+
class="pf-v5-c-label__content"
|
|
2711
|
+
id="editable-labels-editable-group-example-editable-label-editable-1-editable-content"
|
|
2712
|
+
aria-label="Editable text"
|
|
2713
|
+
>
|
|
2714
|
+
<span class="pf-v5-c-label__text">Editable label 1</span>
|
|
2715
|
+
</button>
|
|
2716
|
+
|
|
2717
|
+
<span class="pf-v5-c-label__actions">
|
|
2718
|
+
<button
|
|
2719
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2720
|
+
type="button"
|
|
2721
|
+
id="editable-labels-editable-group-example-editable-label-editable-1-button"
|
|
2722
|
+
aria-label="Remove"
|
|
2723
|
+
aria-labelledby="editable-labels-editable-group-example-editable-label-editable-1-button editable-labels-editable-group-example-editable-label-editable-1-text"
|
|
2724
|
+
>
|
|
2725
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2726
|
+
</button>
|
|
2727
|
+
</span>
|
|
2728
|
+
</span>
|
|
2729
|
+
</li>
|
|
2730
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2731
|
+
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
2732
|
+
<button
|
|
2733
|
+
class="pf-v5-c-label__content"
|
|
2734
|
+
id="editable-labels-editable-group-example-editable-label-editable-2-editable-content"
|
|
2735
|
+
aria-label="Editable text"
|
|
2736
|
+
>
|
|
2737
|
+
<span class="pf-v5-c-label__text">Editable label 2</span>
|
|
2738
|
+
</button>
|
|
2739
|
+
|
|
2740
|
+
<span class="pf-v5-c-label__actions">
|
|
2741
|
+
<button
|
|
2742
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2743
|
+
type="button"
|
|
2744
|
+
id="editable-labels-editable-group-example-editable-label-editable-2-button"
|
|
2745
|
+
aria-label="Remove"
|
|
2746
|
+
aria-labelledby="editable-labels-editable-group-example-editable-label-editable-2-button editable-labels-editable-group-example-editable-label-editable-2-text"
|
|
2747
|
+
>
|
|
2748
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2749
|
+
</button>
|
|
2750
|
+
</span>
|
|
2751
|
+
</span>
|
|
2752
|
+
</li>
|
|
2753
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2754
|
+
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
2755
|
+
<button
|
|
2756
|
+
class="pf-v5-c-label__content"
|
|
2757
|
+
id="editable-labels-editable-group-example-editable-label-editable-3-editable-content"
|
|
2758
|
+
aria-label="Editable text"
|
|
2759
|
+
>
|
|
2760
|
+
<span class="pf-v5-c-label__text">Editable label 3</span>
|
|
2761
|
+
</button>
|
|
2762
|
+
|
|
2763
|
+
<span class="pf-v5-c-label__actions">
|
|
2764
|
+
<button
|
|
2765
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2766
|
+
type="button"
|
|
2767
|
+
id="editable-labels-editable-group-example-editable-label-editable-3-button"
|
|
2768
|
+
aria-label="Remove"
|
|
2769
|
+
aria-labelledby="editable-labels-editable-group-example-editable-label-editable-3-button editable-labels-editable-group-example-editable-label-editable-3-text"
|
|
2770
|
+
>
|
|
2771
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2772
|
+
</button>
|
|
2773
|
+
</span>
|
|
2774
|
+
</span>
|
|
2775
|
+
</li>
|
|
2776
|
+
<li class="pf-v5-c-label-group__list-item pf-m-textarea">
|
|
2777
|
+
<textarea
|
|
2778
|
+
class="pf-v5-c-label-group__textarea"
|
|
2779
|
+
rows="1"
|
|
2780
|
+
tabindex="0"
|
|
2781
|
+
aria-label="New label"
|
|
2782
|
+
></textarea>
|
|
2783
|
+
</li>
|
|
2784
|
+
</ul>
|
|
2785
|
+
</div>
|
|
2786
|
+
</div>
|
|
2787
|
+
|
|
2788
|
+
```
|
|
2789
|
+
|
|
2790
|
+
### Editable labels, label active, dynamic label group
|
|
2791
|
+
|
|
2792
|
+
```html isBeta
|
|
2793
|
+
<div class="pf-v5-c-label-group pf-m-editable">
|
|
2794
|
+
<div class="pf-v5-c-label-group__main">
|
|
2795
|
+
<ul
|
|
2796
|
+
class="pf-v5-c-label-group__list"
|
|
2797
|
+
role="list"
|
|
2798
|
+
aria-label="Group of labels"
|
|
2799
|
+
>
|
|
2800
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2801
|
+
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
2802
|
+
<button
|
|
2803
|
+
class="pf-v5-c-label__content"
|
|
2804
|
+
id="editable-labels-label-active-editable-group-example-editable-label-editable-1-editable-content"
|
|
2805
|
+
aria-label="Editable text"
|
|
2806
|
+
>
|
|
2807
|
+
<span class="pf-v5-c-label__text">Editable label 1</span>
|
|
2808
|
+
</button>
|
|
2809
|
+
|
|
2810
|
+
<span class="pf-v5-c-label__actions">
|
|
2811
|
+
<button
|
|
2812
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2813
|
+
type="button"
|
|
2814
|
+
id="editable-labels-label-active-editable-group-example-editable-label-editable-1-button"
|
|
2815
|
+
aria-label="Remove"
|
|
2816
|
+
aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-editable-1-button editable-labels-label-active-editable-group-example-editable-label-editable-1-text"
|
|
2817
|
+
>
|
|
2818
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2819
|
+
</button>
|
|
2820
|
+
</span>
|
|
2821
|
+
</span>
|
|
2822
|
+
</li>
|
|
2823
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2824
|
+
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
2825
|
+
<button
|
|
2826
|
+
class="pf-v5-c-label__content"
|
|
2827
|
+
id="editable-labels-label-active-editable-group-example-editable-label-editable-2-editable-content"
|
|
2828
|
+
aria-label="Editable text"
|
|
2829
|
+
>
|
|
2830
|
+
<span class="pf-v5-c-label__text">Editable label 2</span>
|
|
2831
|
+
</button>
|
|
2832
|
+
|
|
2833
|
+
<span class="pf-v5-c-label__actions">
|
|
2834
|
+
<button
|
|
2835
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2836
|
+
type="button"
|
|
2837
|
+
id="editable-labels-label-active-editable-group-example-editable-label-editable-2-button"
|
|
2838
|
+
aria-label="Remove"
|
|
2839
|
+
aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-editable-2-button editable-labels-label-active-editable-group-example-editable-label-editable-2-text"
|
|
2840
|
+
>
|
|
2841
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2842
|
+
</button>
|
|
2843
|
+
</span>
|
|
2844
|
+
</span>
|
|
2845
|
+
</li>
|
|
2846
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2847
|
+
<span
|
|
2848
|
+
class="pf-v5-c-label pf-m-editable pf-m-editable-active pf-m-blue"
|
|
2849
|
+
>
|
|
2850
|
+
<input
|
|
2851
|
+
class="pf-v5-c-label__content"
|
|
2852
|
+
id="editable-labels-label-active-editable-group-example-editable-label-editable-3-editable-content"
|
|
2853
|
+
type="text"
|
|
2854
|
+
value="Editable label 3, active"
|
|
2855
|
+
aria-label="Editable text"
|
|
2856
|
+
/>
|
|
2857
|
+
|
|
2858
|
+
<span class="pf-v5-c-label__actions">
|
|
2859
|
+
<button
|
|
2860
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2861
|
+
type="button"
|
|
2862
|
+
id="editable-labels-label-active-editable-group-example-editable-label-editable-3-button"
|
|
2863
|
+
aria-label="Remove"
|
|
2864
|
+
aria-labelledby="editable-labels-label-active-editable-group-example-editable-label-editable-3-button editable-labels-label-active-editable-group-example-editable-label-editable-3-text"
|
|
2865
|
+
>
|
|
2866
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2867
|
+
</button>
|
|
2868
|
+
</span>
|
|
2869
|
+
</span>
|
|
2870
|
+
</li>
|
|
2871
|
+
<li class="pf-v5-c-label-group__list-item pf-m-textarea">
|
|
2872
|
+
<textarea
|
|
2873
|
+
class="pf-v5-c-label-group__textarea"
|
|
2874
|
+
rows="1"
|
|
2875
|
+
tabindex="0"
|
|
2876
|
+
aria-label="New label"
|
|
2877
|
+
></textarea>
|
|
2878
|
+
</li>
|
|
2879
|
+
</ul>
|
|
2880
|
+
</div>
|
|
2881
|
+
</div>
|
|
2882
|
+
|
|
2883
|
+
```
|
|
2884
|
+
|
|
2885
|
+
### Static labels, dynamic label group
|
|
2886
|
+
|
|
2887
|
+
```html
|
|
2888
|
+
<div class="pf-v5-c-label-group pf-m-editable">
|
|
2889
|
+
<div class="pf-v5-c-label-group__main">
|
|
2890
|
+
<ul
|
|
2891
|
+
class="pf-v5-c-label-group__list"
|
|
2892
|
+
role="list"
|
|
2893
|
+
aria-label="Group of labels"
|
|
2894
|
+
>
|
|
2895
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2896
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2897
|
+
<span class="pf-v5-c-label__content">
|
|
2898
|
+
<span class="pf-v5-c-label__text">Static label 1</span>
|
|
2899
|
+
</span>
|
|
2900
|
+
<span class="pf-v5-c-label__actions">
|
|
2901
|
+
<button
|
|
2902
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2903
|
+
type="button"
|
|
2904
|
+
id="static-labels-dynamic-label-group-example-editable-label-static-1-button"
|
|
2905
|
+
aria-label="Remove"
|
|
2906
|
+
aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-1-button static-labels-dynamic-label-group-example-editable-label-static-1-text"
|
|
2907
|
+
>
|
|
2908
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2909
|
+
</button>
|
|
2910
|
+
</span>
|
|
2911
|
+
</span>
|
|
2912
|
+
</li>
|
|
2913
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2914
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2915
|
+
<span class="pf-v5-c-label__content">
|
|
2916
|
+
<span class="pf-v5-c-label__text">Static label 2</span>
|
|
2917
|
+
</span>
|
|
2918
|
+
<span class="pf-v5-c-label__actions">
|
|
2919
|
+
<button
|
|
2920
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2921
|
+
type="button"
|
|
2922
|
+
id="static-labels-dynamic-label-group-example-editable-label-static-2-button"
|
|
2923
|
+
aria-label="Remove"
|
|
2924
|
+
aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-2-button static-labels-dynamic-label-group-example-editable-label-static-2-text"
|
|
2925
|
+
>
|
|
2926
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2927
|
+
</button>
|
|
2928
|
+
</span>
|
|
2929
|
+
</span>
|
|
2930
|
+
</li>
|
|
2931
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2932
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2933
|
+
<span class="pf-v5-c-label__content">
|
|
2934
|
+
<span class="pf-v5-c-label__text">Static label 3</span>
|
|
2935
|
+
</span>
|
|
2936
|
+
<span class="pf-v5-c-label__actions">
|
|
2937
|
+
<button
|
|
2938
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2939
|
+
type="button"
|
|
2940
|
+
id="static-labels-dynamic-label-group-example-editable-label-static-3-button"
|
|
2941
|
+
aria-label="Remove"
|
|
2942
|
+
aria-labelledby="static-labels-dynamic-label-group-example-editable-label-static-3-button static-labels-dynamic-label-group-example-editable-label-static-3-text"
|
|
2943
|
+
>
|
|
2944
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2945
|
+
</button>
|
|
2946
|
+
</span>
|
|
2947
|
+
</span>
|
|
2948
|
+
</li>
|
|
2949
|
+
<li class="pf-v5-c-label-group__list-item pf-m-textarea">
|
|
2950
|
+
<textarea
|
|
2951
|
+
class="pf-v5-c-label-group__textarea"
|
|
2952
|
+
rows="1"
|
|
2953
|
+
tabindex="0"
|
|
2954
|
+
aria-label="New label"
|
|
2955
|
+
></textarea>
|
|
2956
|
+
</li>
|
|
2957
|
+
</ul>
|
|
2958
|
+
</div>
|
|
2959
|
+
</div>
|
|
2960
|
+
|
|
2961
|
+
```
|
|
2962
|
+
|
|
2963
|
+
### Mixed labels (static / editable), dynamic label group
|
|
2964
|
+
|
|
2965
|
+
```html isBeta
|
|
2966
|
+
<div class="pf-v5-c-label-group pf-m-editable">
|
|
2967
|
+
<div class="pf-v5-c-label-group__main">
|
|
2968
|
+
<ul
|
|
2969
|
+
class="pf-v5-c-label-group__list"
|
|
2970
|
+
role="list"
|
|
2971
|
+
aria-label="Group of labels"
|
|
2972
|
+
>
|
|
2973
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2974
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2975
|
+
<span class="pf-v5-c-label__content">
|
|
2976
|
+
<span class="pf-v5-c-label__text">Static label 1</span>
|
|
2977
|
+
</span>
|
|
2978
|
+
<span class="pf-v5-c-label__actions">
|
|
2979
|
+
<button
|
|
2980
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2981
|
+
type="button"
|
|
2982
|
+
id="mixed-labels-dynamic-label-group-example-editable-label-static-1-button"
|
|
2983
|
+
aria-label="Remove"
|
|
2984
|
+
aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-static-1-button mixed-labels-dynamic-label-group-example-editable-label-static-1-text"
|
|
2985
|
+
>
|
|
2986
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
2987
|
+
</button>
|
|
2988
|
+
</span>
|
|
2989
|
+
</span>
|
|
2990
|
+
</li>
|
|
2991
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
2992
|
+
<span class="pf-v5-c-label pf-m-green">
|
|
2993
|
+
<span class="pf-v5-c-label__content">
|
|
2994
|
+
<span class="pf-v5-c-label__text">Static label 2</span>
|
|
2995
|
+
</span>
|
|
2996
|
+
<span class="pf-v5-c-label__actions">
|
|
2997
|
+
<button
|
|
2998
|
+
class="pf-v5-c-button pf-m-plain"
|
|
2999
|
+
type="button"
|
|
3000
|
+
id="mixed-labels-dynamic-label-group-example-editable-label-static-2-button"
|
|
3001
|
+
aria-label="Remove"
|
|
3002
|
+
aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-static-2-button mixed-labels-dynamic-label-group-example-editable-label-static-2-text"
|
|
3003
|
+
>
|
|
3004
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
3005
|
+
</button>
|
|
3006
|
+
</span>
|
|
3007
|
+
</span>
|
|
3008
|
+
</li>
|
|
3009
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
3010
|
+
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
3011
|
+
<button
|
|
3012
|
+
class="pf-v5-c-label__content"
|
|
3013
|
+
id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-editable-content"
|
|
3014
|
+
aria-label="Editable text"
|
|
3015
|
+
>
|
|
3016
|
+
<span class="pf-v5-c-label__text">Dynamic, editable label 1</span>
|
|
3017
|
+
</button>
|
|
3018
|
+
|
|
3019
|
+
<span class="pf-v5-c-label__actions">
|
|
3020
|
+
<button
|
|
3021
|
+
class="pf-v5-c-button pf-m-plain"
|
|
3022
|
+
type="button"
|
|
3023
|
+
id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button"
|
|
3024
|
+
aria-label="Remove"
|
|
3025
|
+
aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-text"
|
|
3026
|
+
>
|
|
3027
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
3028
|
+
</button>
|
|
3029
|
+
</span>
|
|
3030
|
+
</span>
|
|
3031
|
+
</li>
|
|
3032
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
3033
|
+
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
3034
|
+
<button
|
|
3035
|
+
class="pf-v5-c-label__content"
|
|
3036
|
+
id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-editable-content"
|
|
3037
|
+
aria-label="Editable text"
|
|
3038
|
+
>
|
|
3039
|
+
<span class="pf-v5-c-label__text">Dynamic, editable label 2</span>
|
|
3040
|
+
</button>
|
|
3041
|
+
|
|
3042
|
+
<span class="pf-v5-c-label__actions">
|
|
3043
|
+
<button
|
|
3044
|
+
class="pf-v5-c-button pf-m-plain"
|
|
3045
|
+
type="button"
|
|
3046
|
+
id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button"
|
|
3047
|
+
aria-label="Remove"
|
|
3048
|
+
aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-text"
|
|
3049
|
+
>
|
|
3050
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
3051
|
+
</button>
|
|
3052
|
+
</span>
|
|
3053
|
+
</span>
|
|
3054
|
+
</li>
|
|
3055
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
3056
|
+
<span class="pf-v5-c-label pf-m-editable pf-m-blue">
|
|
3057
|
+
<button
|
|
3058
|
+
class="pf-v5-c-label__content"
|
|
3059
|
+
id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-editable-content"
|
|
3060
|
+
aria-label="Editable text"
|
|
3061
|
+
>
|
|
3062
|
+
<span class="pf-v5-c-label__text">Dynamic, editable label 3</span>
|
|
3063
|
+
</button>
|
|
3064
|
+
|
|
3065
|
+
<span class="pf-v5-c-label__actions">
|
|
3066
|
+
<button
|
|
3067
|
+
class="pf-v5-c-button pf-m-plain"
|
|
3068
|
+
type="button"
|
|
3069
|
+
id="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button"
|
|
3070
|
+
aria-label="Remove"
|
|
3071
|
+
aria-labelledby="mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-text"
|
|
3072
|
+
>
|
|
3073
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
3074
|
+
</button>
|
|
3075
|
+
</span>
|
|
3076
|
+
</span>
|
|
3077
|
+
</li>
|
|
3078
|
+
<li class="pf-v5-c-label-group__list-item pf-m-textarea">
|
|
3079
|
+
<textarea
|
|
3080
|
+
class="pf-v5-c-label-group__textarea"
|
|
3081
|
+
rows="1"
|
|
3082
|
+
tabindex="0"
|
|
3083
|
+
aria-label="New label"
|
|
3084
|
+
></textarea>
|
|
3085
|
+
</li>
|
|
3086
|
+
</ul>
|
|
3087
|
+
</div>
|
|
3088
|
+
</div>
|
|
3089
|
+
|
|
3090
|
+
```
|
|
3091
|
+
|
|
3092
|
+
### Label group with compact labels
|
|
3093
|
+
|
|
3094
|
+
```html
|
|
3095
|
+
<div class="pf-v5-c-label-group">
|
|
3096
|
+
<div class="pf-v5-c-label-group__main">
|
|
3097
|
+
<ul
|
|
3098
|
+
class="pf-v5-c-label-group__list"
|
|
3099
|
+
role="list"
|
|
3100
|
+
aria-label="Group of labels"
|
|
3101
|
+
>
|
|
3102
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
3103
|
+
<span class="pf-v5-c-label pf-m-compact">
|
|
3104
|
+
<span class="pf-v5-c-label__content">
|
|
3105
|
+
<span class="pf-v5-c-label__icon">
|
|
3106
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
3107
|
+
</span>
|
|
3108
|
+
<span class="pf-v5-c-label__text">Label 1</span>
|
|
3109
|
+
</span>
|
|
3110
|
+
</span>
|
|
3111
|
+
</li>
|
|
3112
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
3113
|
+
<span class="pf-v5-c-label pf-m-compact pf-m-blue">
|
|
3114
|
+
<span class="pf-v5-c-label__content">
|
|
3115
|
+
<span class="pf-v5-c-label__icon">
|
|
3116
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
3117
|
+
</span>
|
|
3118
|
+
<span class="pf-v5-c-label__text">Label 2</span>
|
|
3119
|
+
</span>
|
|
3120
|
+
</span>
|
|
3121
|
+
</li>
|
|
3122
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
3123
|
+
<span class="pf-v5-c-label pf-m-compact pf-m-green">
|
|
3124
|
+
<span class="pf-v5-c-label__content">
|
|
3125
|
+
<span class="pf-v5-c-label__icon">
|
|
3126
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
3127
|
+
</span>
|
|
3128
|
+
<span class="pf-v5-c-label__text">Label 3</span>
|
|
3129
|
+
</span>
|
|
3130
|
+
</span>
|
|
3131
|
+
</li>
|
|
3132
|
+
</ul>
|
|
3133
|
+
</div>
|
|
3134
|
+
</div>
|
|
3135
|
+
|
|
3136
|
+
```
|
|
3137
|
+
|
|
3138
|
+
### Label group with compact labels and overflow
|
|
3139
|
+
|
|
3140
|
+
```html
|
|
3141
|
+
<div class="pf-v5-c-label-group">
|
|
3142
|
+
<div class="pf-v5-c-label-group__main">
|
|
3143
|
+
<ul
|
|
3144
|
+
class="pf-v5-c-label-group__list"
|
|
3145
|
+
role="list"
|
|
3146
|
+
aria-label="Group of labels"
|
|
3147
|
+
>
|
|
3148
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
3149
|
+
<span class="pf-v5-c-label pf-m-compact">
|
|
3150
|
+
<span class="pf-v5-c-label__content">
|
|
3151
|
+
<span class="pf-v5-c-label__icon">
|
|
3152
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
3153
|
+
</span>
|
|
3154
|
+
<span class="pf-v5-c-label__text">Label 1</span>
|
|
3155
|
+
</span>
|
|
3156
|
+
</span>
|
|
3157
|
+
</li>
|
|
3158
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
3159
|
+
<span class="pf-v5-c-label pf-m-compact pf-m-blue">
|
|
3160
|
+
<span class="pf-v5-c-label__content">
|
|
3161
|
+
<span class="pf-v5-c-label__icon">
|
|
3162
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
3163
|
+
</span>
|
|
3164
|
+
<span class="pf-v5-c-label__text">Label 2</span>
|
|
3165
|
+
</span>
|
|
3166
|
+
</span>
|
|
3167
|
+
</li>
|
|
3168
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
3169
|
+
<span class="pf-v5-c-label pf-m-compact pf-m-green">
|
|
3170
|
+
<span class="pf-v5-c-label__content">
|
|
3171
|
+
<span class="pf-v5-c-label__icon">
|
|
3172
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
3173
|
+
</span>
|
|
3174
|
+
<span class="pf-v5-c-label__text">Label 3</span>
|
|
3175
|
+
</span>
|
|
3176
|
+
</span>
|
|
3177
|
+
</li>
|
|
3178
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
3179
|
+
<button class="pf-v5-c-label pf-m-compact pf-m-overflow" type="button">
|
|
3180
|
+
<span class="pf-v5-c-label__content">
|
|
3181
|
+
<span class="pf-v5-c-label__text">3 more</span>
|
|
3182
|
+
</span>
|
|
3183
|
+
</button>
|
|
3184
|
+
</li>
|
|
3185
|
+
</ul>
|
|
3186
|
+
</div>
|
|
3187
|
+
</div>
|
|
3188
|
+
|
|
3189
|
+
```
|
|
3190
|
+
|
|
3191
|
+
### Vertical label group with compact labels
|
|
3192
|
+
|
|
3193
|
+
```html
|
|
3194
|
+
<div class="pf-v5-c-label-group pf-m-vertical">
|
|
3195
|
+
<div class="pf-v5-c-label-group__main">
|
|
3196
|
+
<ul
|
|
3197
|
+
class="pf-v5-c-label-group__list"
|
|
3198
|
+
role="list"
|
|
3199
|
+
aria-label="Group of labels"
|
|
3200
|
+
>
|
|
3201
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
3202
|
+
<span class="pf-v5-c-label pf-m-compact">
|
|
3203
|
+
<span class="pf-v5-c-label__content">
|
|
3204
|
+
<span class="pf-v5-c-label__icon">
|
|
3205
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
3206
|
+
</span>
|
|
3207
|
+
<span class="pf-v5-c-label__text">Label 1</span>
|
|
3208
|
+
</span>
|
|
3209
|
+
</span>
|
|
3210
|
+
</li>
|
|
3211
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
3212
|
+
<span class="pf-v5-c-label pf-m-compact pf-m-blue">
|
|
3213
|
+
<span class="pf-v5-c-label__content">
|
|
3214
|
+
<span class="pf-v5-c-label__icon">
|
|
3215
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
3216
|
+
</span>
|
|
3217
|
+
<span class="pf-v5-c-label__text">Label 2</span>
|
|
3218
|
+
</span>
|
|
3219
|
+
</span>
|
|
3220
|
+
</li>
|
|
3221
|
+
<li class="pf-v5-c-label-group__list-item">
|
|
3222
|
+
<span class="pf-v5-c-label pf-m-compact pf-m-green">
|
|
3223
|
+
<span class="pf-v5-c-label__content">
|
|
3224
|
+
<span class="pf-v5-c-label__icon">
|
|
3225
|
+
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
3226
|
+
</span>
|
|
3227
|
+
<span class="pf-v5-c-label__text">Label 3</span>
|
|
3228
|
+
</span>
|
|
3229
|
+
</span>
|
|
3230
|
+
</li>
|
|
3231
|
+
</ul>
|
|
3232
|
+
</div>
|
|
3233
|
+
</div>
|
|
3234
|
+
|
|
3235
|
+
```
|
|
3236
|
+
|
|
2045
3237
|
## Documentation
|
|
2046
3238
|
|
|
2047
|
-
###
|
|
3239
|
+
### Label usage
|
|
2048
3240
|
|
|
2049
3241
|
| Class | Applied to | Outcome |
|
|
2050
3242
|
| -- | -- | -- |
|
|
@@ -2068,3 +3260,30 @@ This style of label is used to add new labels to a label group.
|
|
|
2068
3260
|
| `.pf-m-editable` | `.pf-v5-c-label` | Modifies label for editable styles. |
|
|
2069
3261
|
| `.pf-m-editable-active` | `.pf-v5-c-label.pf-m-editable` | Modifies editable label for active styles. |
|
|
2070
3262
|
| `--pf-v5-c-label__text--MaxWidth` | `.pf-v5-c-label` | Modifiex the max width of the text before text will truncate. |
|
|
3263
|
+
|
|
3264
|
+
### Label group accessibility
|
|
3265
|
+
|
|
3266
|
+
| Attribute | Applied to | Outcome |
|
|
3267
|
+
| -- | -- | -- |
|
|
3268
|
+
| `role="list"` | `.pf-v5-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v5-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
|
|
3269
|
+
| `aria-label="[button label text]"` | `.pf-v5-c-label-group__close > button` | Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
|
|
3270
|
+
| `aria-labelledby="[id value of .pf-v5-c-label-group__close > button] [id value of .pf-v5-c-label-group__label]"` | `.pf-v5-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
|
|
3271
|
+
| `aria-label="[label text]"` | `.pf-v5-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |
|
|
3272
|
+
| `row="1"` | `.pf-v5-c-label-group__textarea` | Indicates that the label group textarea is one row. **Required** |
|
|
3273
|
+
| `tabindex="0"` | `.pf-v5-c-label-group__textarea` | Inserts the label group textarea into the tab order of the page so that it is focusable. **Required** |
|
|
3274
|
+
|
|
3275
|
+
### Label group usage
|
|
3276
|
+
|
|
3277
|
+
| Class | Applied to | Outcome |
|
|
3278
|
+
| -- | -- | -- |
|
|
3279
|
+
| `.pf-v5-c-label-group` | `<div>` | Initiates the label group component. **Required.** |
|
|
3280
|
+
| `.pf-v5-c-label-group__list` | `<ul>` | Initiates the container for a list of labels. **Required.** |
|
|
3281
|
+
| `.pf-v5-c-label-group__list-item` | `<li>` | Initiates the list item inside of the label group. **Required.** |
|
|
3282
|
+
| `.pf-v5-c-label-group__main` | `<div>` | Initiates the main element in the label group. **Required when label and list are present** |
|
|
3283
|
+
| `.pf-v5-c-label-group__textarea` | `<textarea>` | Initiates the textarea element in the label group. **Required when label group is editable** |
|
|
3284
|
+
| `.pf-v5-c-label-group__label` | `<span>` | Initiates the label to be used in the label group. |
|
|
3285
|
+
| `.pf-v5-c-label-group__close` | `<div>` | Initiates the container used for the button to remove the label group. |
|
|
3286
|
+
| `.pf-v5-c-button` | `.pf-v5-c-label-group__close <button>` | Initiates the button used to remove the label group. |
|
|
3287
|
+
| `.pf-m-editable` | `.pf-v5-c-label-group` | Modifies the label group to support editable styling. |
|
|
3288
|
+
| `.pf-m-category` | `.pf-v5-c-label-group` | Modifies the label group to support category styling. |
|
|
3289
|
+
| `.pf-m-textarea` | `.pf-v5-c-label-group__list-item` | Modifies the label group list item to support textarea. |
|