@patternfly/patternfly 6.3.0-prerelease.24 → 6.3.0-prerelease.26
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/components/Button/button.css +115 -5
- package/components/Button/button.scss +118 -6
- package/components/Menu/menu.css +24 -4
- package/components/Menu/menu.scss +20 -5
- package/components/MenuToggle/menu-toggle.css +30 -0
- package/components/MenuToggle/menu-toggle.scss +33 -0
- package/components/Page/page.css +45 -0
- package/components/Page/page.scss +29 -0
- package/components/_index.css +214 -9
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
- package/docs/components/Button/examples/Button.md +85 -3
- package/docs/components/Card/examples/Card.md +8 -8
- package/docs/components/DataList/examples/DataList.md +23 -23
- package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
- package/docs/components/Hint/examples/Hint.md +3 -3
- package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
- package/docs/components/Masthead/examples/masthead.md +90 -12
- package/docs/components/Menu/examples/Menu.md +2 -2
- package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
- package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
- package/docs/components/Page/examples/Page.md +147 -14
- package/docs/components/Pagination/examples/Pagination.md +12 -12
- package/docs/components/Table/examples/Table.md +240 -240
- package/docs/components/Toolbar/examples/Toolbar.md +7 -7
- package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
- package/docs/demos/Alert/examples/Alert.md +66 -9
- package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
- package/docs/demos/Banner/examples/Banner.md +47 -6
- package/docs/demos/Card/examples/Card.md +4 -4
- package/docs/demos/CardView/examples/CardView.md +24 -5
- package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
- package/docs/demos/DataList/examples/DataList.md +100 -24
- package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -9
- package/docs/demos/Drawer/examples/Drawer.md +110 -15
- package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
- package/docs/demos/Masthead/examples/Masthead.md +170 -18
- package/docs/demos/Modal/examples/Modal.md +132 -18
- package/docs/demos/Nav/examples/Nav.md +111 -16
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
- package/docs/demos/Page/examples/Page.md +309 -43
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -27
- package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
- package/docs/demos/Table/examples/Table.md +435 -150
- package/docs/demos/Tabs/examples/Tabs.md +137 -23
- package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
- package/docs/demos/Wizard/examples/Wizard.md +198 -27
- package/package.json +2 -2
- package/patternfly-no-globals.css +214 -9
- package/patternfly.css +214 -9
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +35 -0
|
@@ -2095,6 +2095,84 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
|
|
|
2095
2095
|
|
|
2096
2096
|
```
|
|
2097
2097
|
|
|
2098
|
+
### Settings
|
|
2099
|
+
|
|
2100
|
+
```html
|
|
2101
|
+
<button
|
|
2102
|
+
class="pf-v6-c-button pf-m-settings pf-m-plain"
|
|
2103
|
+
type="button"
|
|
2104
|
+
aria-label="Settings"
|
|
2105
|
+
>
|
|
2106
|
+
<span class="pf-v6-c-button__icon">
|
|
2107
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2108
|
+
</span>
|
|
2109
|
+
</button>
|
|
2110
|
+
|
|
2111
|
+
```
|
|
2112
|
+
|
|
2113
|
+
### Hamburger
|
|
2114
|
+
|
|
2115
|
+
```html
|
|
2116
|
+
<button
|
|
2117
|
+
class="pf-v6-c-button pf-m-hamburger pf-m-plain"
|
|
2118
|
+
type="button"
|
|
2119
|
+
aria-label="Hamburger"
|
|
2120
|
+
>
|
|
2121
|
+
<span class="pf-v6-c-button__icon">
|
|
2122
|
+
<svg
|
|
2123
|
+
viewBox="0 0 10 10"
|
|
2124
|
+
class="pf-v6-c-button--hamburger-icon pf-v6-svg"
|
|
2125
|
+
width="1em"
|
|
2126
|
+
height="1em"
|
|
2127
|
+
>
|
|
2128
|
+
<path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
|
|
2129
|
+
<path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
|
|
2130
|
+
<path class="pf-v6-c-button--hamburger-icon--arrow" d="M1,5 L1,5 L1,5" />
|
|
2131
|
+
<path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
|
|
2132
|
+
</svg>
|
|
2133
|
+
</span>
|
|
2134
|
+
</button>
|
|
2135
|
+
<button
|
|
2136
|
+
class="pf-v6-c-button pf-m-expand pf-m-hamburger pf-m-plain"
|
|
2137
|
+
type="button"
|
|
2138
|
+
aria-label="Hamburger"
|
|
2139
|
+
>
|
|
2140
|
+
<span class="pf-v6-c-button__icon">
|
|
2141
|
+
<svg
|
|
2142
|
+
viewBox="0 0 10 10"
|
|
2143
|
+
class="pf-v6-c-button--hamburger-icon pf-v6-svg"
|
|
2144
|
+
width="1em"
|
|
2145
|
+
height="1em"
|
|
2146
|
+
>
|
|
2147
|
+
<path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
|
|
2148
|
+
<path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
|
|
2149
|
+
<path class="pf-v6-c-button--hamburger-icon--arrow" d="M1,5 L1,5 L1,5" />
|
|
2150
|
+
<path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
|
|
2151
|
+
</svg>
|
|
2152
|
+
</span>
|
|
2153
|
+
</button>
|
|
2154
|
+
<button
|
|
2155
|
+
class="pf-v6-c-button pf-m-collapse pf-m-hamburger pf-m-plain"
|
|
2156
|
+
type="button"
|
|
2157
|
+
aria-label="Hamburger"
|
|
2158
|
+
>
|
|
2159
|
+
<span class="pf-v6-c-button__icon">
|
|
2160
|
+
<svg
|
|
2161
|
+
viewBox="0 0 10 10"
|
|
2162
|
+
class="pf-v6-c-button--hamburger-icon pf-v6-svg"
|
|
2163
|
+
width="1em"
|
|
2164
|
+
height="1em"
|
|
2165
|
+
>
|
|
2166
|
+
<path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
|
|
2167
|
+
<path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
|
|
2168
|
+
<path class="pf-v6-c-button--hamburger-icon--arrow" d="M1,5 L1,5 L1,5" />
|
|
2169
|
+
<path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
|
|
2170
|
+
</svg>
|
|
2171
|
+
</span>
|
|
2172
|
+
</button>
|
|
2173
|
+
|
|
2174
|
+
```
|
|
2175
|
+
|
|
2098
2176
|
## Documentation
|
|
2099
2177
|
|
|
2100
2178
|
### Overview
|
|
@@ -2126,7 +2204,7 @@ Semantic buttons and links are important for usability as well as accessibility.
|
|
|
2126
2204
|
| `.pf-v6-c-button` | `<button>, <span>` | Initiates a button. Always use it with a modifier class. **Required** |
|
|
2127
2205
|
| `.pf-v6-c-button__icon` | `<span>` | Initiates a button icon. |
|
|
2128
2206
|
| `.pf-v6-c-button__progress` | `<span>` | Initiates a button progress container. |
|
|
2129
|
-
| `.pf-v6-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons
|
|
2207
|
+
| `.pf-v6-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons. |
|
|
2130
2208
|
| `.pf-m-primary` | `.pf-v6-c-button` | Modifies for primary styles. |
|
|
2131
2209
|
| `.pf-m-secondary` | `.pf-v6-c-button` | Modifies for secondary styles. |
|
|
2132
2210
|
| `.pf-m-tertiary` | `.pf-v6-c-button` | Modifies for tertiary styles. |
|
|
@@ -2149,5 +2227,9 @@ Semantic buttons and links are important for usability as well as accessibility.
|
|
|
2149
2227
|
| `.pf-m-in-progress` | `.pf-v6-c-button` | Indicates that the button is in the in progress state. |
|
|
2150
2228
|
| `.pf-m-stateful` | `.pf-v6-c-button` | Indicates that the button is used for one of read, unread, and attention states. **Note:** Always use with a modifier of `.pf-m-read`, `.pf-m-unread`, or `.pf-m-attention`. |
|
|
2151
2229
|
| `.pf-m-notify` | `.pf-v6-c-button` | Indicates that the button should show the user notification of an event. **Note:** This is intended for use with a bell icon in the notification badge. |
|
|
2152
|
-
| `.pf-m-favorite` | `.pf-v6-c-button
|
|
2153
|
-
| `.pf-m-favorited` | `.pf-v6-c-button
|
|
2230
|
+
| `.pf-m-favorite` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a favorite button. **Note:** This is intended for use with a star icon. |
|
|
2231
|
+
| `.pf-m-favorited` | `.pf-v6-c-button.pf-m-plain.pf-m-favorite` | Modifies a favorite button to indicate that item is favorited. |
|
|
2232
|
+
| `.pf-m-settings` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a settings button. |
|
|
2233
|
+
| `.pf-m-hamburger` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a hamburger button. |
|
|
2234
|
+
| `.pf-m-expand` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will expand a menu. |
|
|
2235
|
+
| `.pf-m-collapse` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will collapse a menu. |
|
|
@@ -101,7 +101,7 @@ cssPrefix: pf-v6-c-card
|
|
|
101
101
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
102
102
|
type="button"
|
|
103
103
|
aria-expanded="false"
|
|
104
|
-
aria-label="
|
|
104
|
+
aria-label="Card menu toggle"
|
|
105
105
|
id="card-action-example-1-menu-toggle-kebab"
|
|
106
106
|
>
|
|
107
107
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -142,7 +142,7 @@ cssPrefix: pf-v6-c-card
|
|
|
142
142
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
143
143
|
type="button"
|
|
144
144
|
aria-expanded="false"
|
|
145
|
-
aria-label="
|
|
145
|
+
aria-label="Card menu toggle"
|
|
146
146
|
id="card-action-example-2-menu-toggle-kebab"
|
|
147
147
|
>
|
|
148
148
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -185,7 +185,7 @@ cssPrefix: pf-v6-c-card
|
|
|
185
185
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
186
186
|
type="button"
|
|
187
187
|
aria-expanded="false"
|
|
188
|
-
aria-label="
|
|
188
|
+
aria-label="Card menu toggle"
|
|
189
189
|
id="card-action-example-3-menu-toggle-kebab"
|
|
190
190
|
>
|
|
191
191
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1434,7 +1434,7 @@ cssPrefix: pf-v6-c-card
|
|
|
1434
1434
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1435
1435
|
type="button"
|
|
1436
1436
|
aria-expanded="false"
|
|
1437
|
-
aria-label="
|
|
1437
|
+
aria-label="Card menu toggle"
|
|
1438
1438
|
id="card-expandable-example-menu-toggle-kebab"
|
|
1439
1439
|
>
|
|
1440
1440
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1497,7 +1497,7 @@ cssPrefix: pf-v6-c-card
|
|
|
1497
1497
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1498
1498
|
type="button"
|
|
1499
1499
|
aria-expanded="false"
|
|
1500
|
-
aria-label="
|
|
1500
|
+
aria-label="Card menu toggle"
|
|
1501
1501
|
id="card-expandable-image-example-menu-toggle-kebab"
|
|
1502
1502
|
>
|
|
1503
1503
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1545,7 +1545,7 @@ cssPrefix: pf-v6-c-card
|
|
|
1545
1545
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1546
1546
|
type="button"
|
|
1547
1547
|
aria-expanded="false"
|
|
1548
|
-
aria-label="
|
|
1548
|
+
aria-label="Card menu toggle"
|
|
1549
1549
|
id="card-expanded-example-menu-toggle-kebab"
|
|
1550
1550
|
>
|
|
1551
1551
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1588,7 +1588,7 @@ cssPrefix: pf-v6-c-card
|
|
|
1588
1588
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1589
1589
|
type="button"
|
|
1590
1590
|
aria-expanded="false"
|
|
1591
|
-
aria-label="
|
|
1591
|
+
aria-label="Card menu toggle"
|
|
1592
1592
|
id="card-full-height-example-menu-toggle-kebab"
|
|
1593
1593
|
>
|
|
1594
1594
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1631,7 +1631,7 @@ cssPrefix: pf-v6-c-card
|
|
|
1631
1631
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1632
1632
|
type="button"
|
|
1633
1633
|
aria-expanded="false"
|
|
1634
|
-
aria-label="
|
|
1634
|
+
aria-label="Card menu toggle"
|
|
1635
1635
|
id="card-toggle-on-right-example-menu-toggle-kebab"
|
|
1636
1636
|
>
|
|
1637
1637
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -165,7 +165,7 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
165
165
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
166
166
|
type="button"
|
|
167
167
|
aria-expanded="false"
|
|
168
|
-
aria-label="
|
|
168
|
+
aria-label="Data list item menu toggle"
|
|
169
169
|
id="data-list-checkboxes-actions-addl-cells-item-1-menu-toggle"
|
|
170
170
|
>
|
|
171
171
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -212,7 +212,7 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
212
212
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
213
213
|
type="button"
|
|
214
214
|
aria-expanded="false"
|
|
215
|
-
aria-label="
|
|
215
|
+
aria-label="Data list item menu toggle"
|
|
216
216
|
id="data-list-checkboxes-actions-addl-cells-item-2-menu-toggle"
|
|
217
217
|
>
|
|
218
218
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -269,7 +269,7 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
269
269
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
270
270
|
type="button"
|
|
271
271
|
aria-expanded="false"
|
|
272
|
-
aria-label="
|
|
272
|
+
aria-label="Data list item menu toggle"
|
|
273
273
|
id="data-list-checkboxes-actions-addl-cells-item-3-menu-toggle"
|
|
274
274
|
>
|
|
275
275
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -373,7 +373,7 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
373
373
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
374
374
|
type="button"
|
|
375
375
|
aria-expanded="false"
|
|
376
|
-
aria-label="
|
|
376
|
+
aria-label="Data list item menu toggle"
|
|
377
377
|
id="data-list-expandable-item-1-menu-toggle"
|
|
378
378
|
>
|
|
379
379
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -434,7 +434,7 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
434
434
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
435
435
|
type="button"
|
|
436
436
|
aria-expanded="false"
|
|
437
|
-
aria-label="
|
|
437
|
+
aria-label="Data list item menu toggle"
|
|
438
438
|
id="data-list-expandable-item-2-menu-toggle"
|
|
439
439
|
>
|
|
440
440
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -499,7 +499,7 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
499
499
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
500
500
|
type="button"
|
|
501
501
|
aria-expanded="false"
|
|
502
|
-
aria-label="
|
|
502
|
+
aria-label="Data list item menu toggle"
|
|
503
503
|
id="data-list-expandable-item-3-menu-toggle"
|
|
504
504
|
>
|
|
505
505
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -573,10 +573,10 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
573
573
|
</div>
|
|
574
574
|
<div class="pf-v6-c-data-list__item-action">
|
|
575
575
|
<button
|
|
576
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
576
|
+
class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
|
|
577
577
|
type="button"
|
|
578
578
|
aria-expanded="false"
|
|
579
|
-
aria-label="
|
|
579
|
+
aria-label="Data list item menu toggle"
|
|
580
580
|
id="data-list-expandable-compact-item-1-menu-toggle"
|
|
581
581
|
>
|
|
582
582
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -637,10 +637,10 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
637
637
|
</div>
|
|
638
638
|
<div class="pf-v6-c-data-list__item-action">
|
|
639
639
|
<button
|
|
640
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
640
|
+
class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
|
|
641
641
|
type="button"
|
|
642
642
|
aria-expanded="false"
|
|
643
|
-
aria-label="
|
|
643
|
+
aria-label="Data list item menu toggle"
|
|
644
644
|
id="data-list-expandable-compact-item-2-menu-toggle"
|
|
645
645
|
>
|
|
646
646
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -702,10 +702,10 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
702
702
|
</div>
|
|
703
703
|
<div class="pf-v6-c-data-list__item-action">
|
|
704
704
|
<button
|
|
705
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
705
|
+
class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
|
|
706
706
|
type="button"
|
|
707
707
|
aria-expanded="false"
|
|
708
|
-
aria-label="
|
|
708
|
+
aria-label="Data list item menu toggle"
|
|
709
709
|
id="data-list-expandable-compact-item-3-menu-toggle"
|
|
710
710
|
>
|
|
711
711
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -782,7 +782,7 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
782
782
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
783
783
|
type="button"
|
|
784
784
|
aria-expanded="false"
|
|
785
|
-
aria-label="
|
|
785
|
+
aria-label="Data list item menu toggle"
|
|
786
786
|
id="data-list-expandable-nested-item-1-menu-toggle"
|
|
787
787
|
>
|
|
788
788
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -978,7 +978,7 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
978
978
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
979
979
|
type="button"
|
|
980
980
|
aria-expanded="false"
|
|
981
|
-
aria-label="
|
|
981
|
+
aria-label="Data list item menu toggle"
|
|
982
982
|
id="data-list-expandable-nested-item-2-menu-toggle"
|
|
983
983
|
>
|
|
984
984
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1043,7 +1043,7 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1043
1043
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1044
1044
|
type="button"
|
|
1045
1045
|
aria-expanded="false"
|
|
1046
|
-
aria-label="
|
|
1046
|
+
aria-label="Data list item menu toggle"
|
|
1047
1047
|
id="data-list-expandable-nested-item-3-menu-toggle"
|
|
1048
1048
|
>
|
|
1049
1049
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1115,10 +1115,10 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1115
1115
|
</div>
|
|
1116
1116
|
<div class="pf-v6-c-data-list__item-action">
|
|
1117
1117
|
<button
|
|
1118
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1118
|
+
class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
|
|
1119
1119
|
type="button"
|
|
1120
1120
|
aria-expanded="false"
|
|
1121
|
-
aria-label="
|
|
1121
|
+
aria-label="Data list item menu toggle"
|
|
1122
1122
|
id="data-list-compact-item-1-menu-toggle"
|
|
1123
1123
|
>
|
|
1124
1124
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1160,10 +1160,10 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1160
1160
|
</div>
|
|
1161
1161
|
<div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
|
|
1162
1162
|
<button
|
|
1163
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1163
|
+
class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
|
|
1164
1164
|
type="button"
|
|
1165
1165
|
aria-expanded="false"
|
|
1166
|
-
aria-label="
|
|
1166
|
+
aria-label="Data list item menu toggle"
|
|
1167
1167
|
id="data-list-compact-item-2-menu-toggle"
|
|
1168
1168
|
>
|
|
1169
1169
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1215,10 +1215,10 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1215
1215
|
</div>
|
|
1216
1216
|
<div class="pf-v6-c-data-list__item-action pf-m-hidden-on-xl">
|
|
1217
1217
|
<button
|
|
1218
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1218
|
+
class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
|
|
1219
1219
|
type="button"
|
|
1220
1220
|
aria-expanded="false"
|
|
1221
|
-
aria-label="
|
|
1221
|
+
aria-label="Data list item menu toggle"
|
|
1222
1222
|
id="data-list-compact-item-3-menu-toggle"
|
|
1223
1223
|
>
|
|
1224
1224
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1369,7 +1369,7 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1369
1369
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1370
1370
|
type="button"
|
|
1371
1371
|
aria-expanded="false"
|
|
1372
|
-
aria-label="
|
|
1372
|
+
aria-label="Data list item menu toggle"
|
|
1373
1373
|
id="data-list-flex-modifiers-item-1-menu-toggle"
|
|
1374
1374
|
>
|
|
1375
1375
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1458,7 +1458,7 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
1458
1458
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1459
1459
|
type="button"
|
|
1460
1460
|
aria-expanded="false"
|
|
1461
|
-
aria-label="
|
|
1461
|
+
aria-label="Data list item menu toggle"
|
|
1462
1462
|
id="data-list-flex-modifiers-2-item-1-menu-toggle"
|
|
1463
1463
|
>
|
|
1464
1464
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -49,7 +49,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
49
49
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
50
50
|
type="button"
|
|
51
51
|
aria-expanded="false"
|
|
52
|
-
aria-label="
|
|
52
|
+
aria-label="Dual list item menu toggle"
|
|
53
53
|
id="basic-available-menu-toggle"
|
|
54
54
|
>
|
|
55
55
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -230,7 +230,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
230
230
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
231
231
|
type="button"
|
|
232
232
|
aria-expanded="false"
|
|
233
|
-
aria-label="
|
|
233
|
+
aria-label="Dual list item menu toggle"
|
|
234
234
|
id="basic-chosen-menu-toggle"
|
|
235
235
|
>
|
|
236
236
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -304,7 +304,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
304
304
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
305
305
|
type="button"
|
|
306
306
|
aria-expanded="false"
|
|
307
|
-
aria-label="
|
|
307
|
+
aria-label="Dual list item menu toggle"
|
|
308
308
|
id="available-item-selected-available-menu-toggle"
|
|
309
309
|
>
|
|
310
310
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -479,7 +479,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
479
479
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
480
480
|
type="button"
|
|
481
481
|
aria-expanded="false"
|
|
482
|
-
aria-label="
|
|
482
|
+
aria-label="Dual list item menu toggle"
|
|
483
483
|
id="available-item-selected-chosen-menu-toggle"
|
|
484
484
|
>
|
|
485
485
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -553,7 +553,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
553
553
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
554
554
|
type="button"
|
|
555
555
|
aria-expanded="false"
|
|
556
|
-
aria-label="
|
|
556
|
+
aria-label="Dual list item menu toggle"
|
|
557
557
|
id="multiple-available-items-selected-available-menu-toggle"
|
|
558
558
|
>
|
|
559
559
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -728,7 +728,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
728
728
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
729
729
|
type="button"
|
|
730
730
|
aria-expanded="false"
|
|
731
|
-
aria-label="
|
|
731
|
+
aria-label="Dual list item menu toggle"
|
|
732
732
|
id="multiple-available-items-selected-chosen-menu-toggle"
|
|
733
733
|
>
|
|
734
734
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -802,7 +802,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
802
802
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
803
803
|
type="button"
|
|
804
804
|
aria-expanded="false"
|
|
805
|
-
aria-label="
|
|
805
|
+
aria-label="Dual list item menu toggle"
|
|
806
806
|
id="chosen-item-available-menu-toggle"
|
|
807
807
|
>
|
|
808
808
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -977,7 +977,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
977
977
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
978
978
|
type="button"
|
|
979
979
|
aria-expanded="false"
|
|
980
|
-
aria-label="
|
|
980
|
+
aria-label="Dual list item menu toggle"
|
|
981
981
|
id="chosen-item-chosen-menu-toggle"
|
|
982
982
|
>
|
|
983
983
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1064,7 +1064,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1064
1064
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1065
1065
|
type="button"
|
|
1066
1066
|
aria-expanded="false"
|
|
1067
|
-
aria-label="
|
|
1067
|
+
aria-label="Dual list item menu toggle"
|
|
1068
1068
|
id="chosen-item-selected-available-menu-toggle"
|
|
1069
1069
|
>
|
|
1070
1070
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1238,7 +1238,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1238
1238
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1239
1239
|
type="button"
|
|
1240
1240
|
aria-expanded="false"
|
|
1241
|
-
aria-label="
|
|
1241
|
+
aria-label="Dual list item menu toggle"
|
|
1242
1242
|
id="chosen-item-selected-chosen-menu-toggle"
|
|
1243
1243
|
>
|
|
1244
1244
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1325,7 +1325,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1325
1325
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1326
1326
|
type="button"
|
|
1327
1327
|
aria-expanded="false"
|
|
1328
|
-
aria-label="
|
|
1328
|
+
aria-label="Dual list item menu toggle"
|
|
1329
1329
|
id="tree-available-menu-toggle"
|
|
1330
1330
|
>
|
|
1331
1331
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1768,7 +1768,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1768
1768
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1769
1769
|
type="button"
|
|
1770
1770
|
aria-expanded="false"
|
|
1771
|
-
aria-label="
|
|
1771
|
+
aria-label="Dual list item menu toggle"
|
|
1772
1772
|
id="tree-chosen-menu-toggle"
|
|
1773
1773
|
>
|
|
1774
1774
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -1842,7 +1842,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
1842
1842
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
1843
1843
|
type="button"
|
|
1844
1844
|
aria-expanded="false"
|
|
1845
|
-
aria-label="
|
|
1845
|
+
aria-label="Dual list item menu toggle"
|
|
1846
1846
|
id="tree-options-available-menu-toggle"
|
|
1847
1847
|
>
|
|
1848
1848
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -2266,7 +2266,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2266
2266
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2267
2267
|
type="button"
|
|
2268
2268
|
aria-expanded="false"
|
|
2269
|
-
aria-label="
|
|
2269
|
+
aria-label="Dual list item menu toggle"
|
|
2270
2270
|
id="tree-options-chosen-menu-toggle"
|
|
2271
2271
|
>
|
|
2272
2272
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -2404,7 +2404,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2404
2404
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2405
2405
|
type="button"
|
|
2406
2406
|
aria-expanded="false"
|
|
2407
|
-
aria-label="
|
|
2407
|
+
aria-label="Dual list item menu toggle"
|
|
2408
2408
|
id="tree-available-menu-toggle"
|
|
2409
2409
|
>
|
|
2410
2410
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -2847,7 +2847,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2847
2847
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2848
2848
|
type="button"
|
|
2849
2849
|
aria-expanded="false"
|
|
2850
|
-
aria-label="
|
|
2850
|
+
aria-label="Dual list item menu toggle"
|
|
2851
2851
|
id="tree-chosen-menu-toggle"
|
|
2852
2852
|
>
|
|
2853
2853
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -2924,7 +2924,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
2924
2924
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
2925
2925
|
type="button"
|
|
2926
2926
|
aria-expanded="false"
|
|
2927
|
-
aria-label="
|
|
2927
|
+
aria-label="Dual list item menu toggle"
|
|
2928
2928
|
id="draggable-available-menu-toggle"
|
|
2929
2929
|
>
|
|
2930
2930
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -3076,7 +3076,7 @@ cssPrefix: pf-v6-c-dual-list-selector
|
|
|
3076
3076
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
3077
3077
|
type="button"
|
|
3078
3078
|
aria-expanded="false"
|
|
3079
|
-
aria-label="
|
|
3079
|
+
aria-label="Dual list item menu toggle"
|
|
3080
3080
|
id="draggable-chosen-menu-toggle"
|
|
3081
3081
|
>
|
|
3082
3082
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -13,7 +13,7 @@ cssPrefix: pf-v6-c-hint
|
|
|
13
13
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
14
14
|
type="button"
|
|
15
15
|
aria-expanded="false"
|
|
16
|
-
aria-label="
|
|
16
|
+
aria-label="Hint menu toggle"
|
|
17
17
|
id="hint-with-title-example-hint"
|
|
18
18
|
>
|
|
19
19
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -35,7 +35,7 @@ cssPrefix: pf-v6-c-hint
|
|
|
35
35
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
36
36
|
type="button"
|
|
37
37
|
aria-expanded="false"
|
|
38
|
-
aria-label="
|
|
38
|
+
aria-label="Hint menu toggle"
|
|
39
39
|
id="hint-with-title-and-actions-example-hint"
|
|
40
40
|
>
|
|
41
41
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -74,7 +74,7 @@ cssPrefix: pf-v6-c-hint
|
|
|
74
74
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
75
75
|
type="button"
|
|
76
76
|
aria-expanded="false"
|
|
77
|
-
aria-label="
|
|
77
|
+
aria-label="Hint menu toggle"
|
|
78
78
|
id="hint-with-no-title-example-hint"
|
|
79
79
|
>
|
|
80
80
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
@@ -680,7 +680,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
680
680
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
681
681
|
type="button"
|
|
682
682
|
aria-expanded="false"
|
|
683
|
-
aria-label="
|
|
683
|
+
aria-label="Table actions"
|
|
684
684
|
>
|
|
685
685
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
686
686
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
@@ -869,7 +869,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
869
869
|
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
870
870
|
type="button"
|
|
871
871
|
aria-expanded="false"
|
|
872
|
-
aria-label="
|
|
872
|
+
aria-label="Table actions"
|
|
873
873
|
>
|
|
874
874
|
<span class="pf-v6-c-menu-toggle__icon">
|
|
875
875
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|