@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (340) hide show
  1. package/RELEASE-NOTES.md +18 -1
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/pfbg-icon.svg +1 -0
  4. package/assets/pficon/pficon.scss +7 -2
  5. package/assets/pficon/pficon.woff2 +0 -0
  6. package/base/_base.scss +0 -18
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/_fa-icons.scss +1 -2
  10. package/base/_fonts.scss +22 -27
  11. package/base/_globals.scss +92 -86
  12. package/base/_icons.scss +1 -28
  13. package/base/_svg-icons.scss +6 -0
  14. package/base/_variables.scss +4 -4
  15. package/base/patternfly-common.css +0 -10
  16. package/base/patternfly-fa-icons.css +1 -1
  17. package/base/patternfly-fonts.css +17 -17
  18. package/base/patternfly-globals.css +35 -41
  19. package/base/patternfly-icons.css +8 -22
  20. package/base/patternfly-pf-icons.css +6 -2
  21. package/base/patternfly-themes.css +0 -42
  22. package/base/patternfly-variables.css +3 -3
  23. package/base/themes/dark/_globals.scss +1 -1
  24. package/base/themes/dark/_variables.scss +1 -1
  25. package/components/AboutModalBox/about-modal-box.css +20 -50
  26. package/components/AboutModalBox/about-modal-box.scss +22 -14
  27. package/components/Accordion/accordion.css +2 -0
  28. package/components/Accordion/accordion.scss +2 -0
  29. package/components/Alert/alert.css +17 -8
  30. package/components/Alert/alert.scss +21 -7
  31. package/components/Alert/themes/dark/alert.scss +1 -1
  32. package/components/AppLauncher/app-launcher.css +2 -0
  33. package/components/AppLauncher/app-launcher.scss +2 -0
  34. package/components/Avatar/avatar.scss +2 -2
  35. package/components/BackgroundImage/background-image.css +8 -35
  36. package/components/BackgroundImage/background-image.scss +17 -43
  37. package/components/Banner/banner.css +14 -52
  38. package/components/Banner/banner.scss +9 -13
  39. package/components/Breadcrumb/breadcrumb.css +2 -0
  40. package/components/Breadcrumb/breadcrumb.scss +2 -0
  41. package/components/CalendarMonth/calendar-month.css +2 -2
  42. package/components/CalendarMonth/calendar-month.scss +3 -3
  43. package/components/Card/card.css +115 -50
  44. package/components/Card/card.scss +164 -63
  45. package/components/Chip/chip.css +33 -24
  46. package/components/Chip/chip.scss +40 -31
  47. package/components/ChipGroup/chip-group.css +27 -17
  48. package/components/ChipGroup/chip-group.scss +36 -22
  49. package/components/Content/content.css +11 -5
  50. package/components/Content/content.scss +17 -9
  51. package/components/ContextSelector/context-selector.css +13 -6
  52. package/components/ContextSelector/context-selector.scss +14 -7
  53. package/components/DataList/data-list-grid.css +7 -7
  54. package/components/DataList/data-list-grid.scss +1 -1
  55. package/components/DataList/data-list.css +46 -40
  56. package/components/DataList/data-list.scss +37 -28
  57. package/components/DatePicker/date-picker.css +0 -8
  58. package/components/DatePicker/date-picker.scss +0 -9
  59. package/components/DescriptionList/description-list.css +7 -7
  60. package/components/DescriptionList/description-list.scss +7 -7
  61. package/components/Divider/divider.css +2 -2
  62. package/components/Divider/divider.scss +3 -3
  63. package/components/Drawer/drawer.css +15 -16
  64. package/components/Drawer/drawer.scss +2 -3
  65. package/components/Dropdown/dropdown.css +26 -25
  66. package/components/Dropdown/dropdown.scss +17 -18
  67. package/components/DualListSelector/dual-list-selector.css +1 -1
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/EmptyState/empty-state.css +46 -52
  70. package/components/EmptyState/empty-state.scss +58 -57
  71. package/components/ExpandableSection/expandable-section.css +2 -0
  72. package/components/ExpandableSection/expandable-section.scss +2 -0
  73. package/components/Form/form.css +14 -12
  74. package/components/Form/form.scss +9 -7
  75. package/components/FormControl/form-control.css +2 -5
  76. package/components/FormControl/themes/dark/form-control.scss +2 -6
  77. package/components/HelperText/helper-text.css +4 -0
  78. package/components/HelperText/helper-text.scss +5 -0
  79. package/components/Hint/hint.css +2 -2
  80. package/components/Hint/hint.scss +2 -2
  81. package/components/Icon/icon.css +3 -3
  82. package/components/Icon/icon.scss +3 -3
  83. package/components/InputGroup/input-group.css +61 -85
  84. package/components/InputGroup/input-group.scss +55 -61
  85. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  86. package/components/Label/label.css +49 -36
  87. package/components/Label/label.scss +53 -38
  88. package/components/Label/themes/dark/label.scss +2 -2
  89. package/components/LabelGroup/label-group.css +26 -22
  90. package/components/LabelGroup/label-group.scss +31 -26
  91. package/components/LogViewer/log-viewer.css +0 -38
  92. package/components/Login/login.css +20 -60
  93. package/components/Login/login.scss +16 -18
  94. package/components/Login/themes/dark/login.scss +4 -0
  95. package/components/Masthead/masthead.css +4 -42
  96. package/components/Masthead/masthead.scss +4 -4
  97. package/components/Menu/menu.css +9 -6
  98. package/components/Menu/menu.scss +34 -31
  99. package/components/MenuToggle/menu-toggle.css +3 -1
  100. package/components/MenuToggle/menu-toggle.scss +3 -1
  101. package/components/ModalBox/modal-box.css +12 -11
  102. package/components/ModalBox/modal-box.scss +14 -14
  103. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  104. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  105. package/components/Nav/nav.css +1 -1
  106. package/components/Nav/nav.scss +2 -2
  107. package/components/NotificationDrawer/notification-drawer.css +8 -8
  108. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  109. package/components/OptionsMenu/options-menu.css +8 -10
  110. package/components/OptionsMenu/options-menu.scss +9 -11
  111. package/components/Page/page.css +101 -122
  112. package/components/Page/page.scss +49 -21
  113. package/components/Pagination/pagination.css +2 -110
  114. package/components/Pagination/pagination.scss +0 -6
  115. package/components/Popover/popover.css +31 -37
  116. package/components/Popover/popover.scss +32 -37
  117. package/components/Popover/themes/dark/popover.scss +3 -9
  118. package/components/Progress/progress.css +13 -10
  119. package/components/Progress/progress.scss +13 -10
  120. package/components/ProgressStepper/progress-stepper.css +5 -5
  121. package/components/ProgressStepper/progress-stepper.scss +5 -5
  122. package/components/SearchInput/search-input.css +4 -2
  123. package/components/SearchInput/search-input.scss +4 -2
  124. package/components/Select/select.css +1 -1
  125. package/components/Select/select.scss +1 -1
  126. package/components/Sidebar/sidebar.css +69 -26
  127. package/components/Sidebar/sidebar.scss +84 -27
  128. package/components/SimpleList/simple-list.css +1 -1
  129. package/components/SimpleList/simple-list.scss +2 -2
  130. package/components/Spinner/spinner.css +4 -4
  131. package/components/Spinner/spinner.scss +4 -4
  132. package/components/Table/table-grid.css +28 -28
  133. package/components/Table/table-scrollable.css +31 -26
  134. package/components/Table/table-scrollable.scss +33 -28
  135. package/components/Table/table-tree-view.css +14 -4
  136. package/components/Table/table-tree-view.scss +15 -0
  137. package/components/Table/table.css +67 -65
  138. package/components/Table/table.scss +65 -62
  139. package/components/Tabs/tabs.css +0 -4
  140. package/components/Tabs/tabs.scss +0 -7
  141. package/components/TextInputGroup/text-input-group.css +6 -4
  142. package/components/TextInputGroup/text-input-group.scss +6 -5
  143. package/components/Tile/tile.css +1 -1
  144. package/components/Tile/tile.scss +1 -1
  145. package/components/Timestamp/timestamp.css +3 -3
  146. package/components/Timestamp/timestamp.scss +3 -3
  147. package/components/Toolbar/toolbar.css +78 -43
  148. package/components/Toolbar/toolbar.scss +50 -10
  149. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  150. package/components/Tooltip/tooltip.css +7 -12
  151. package/components/Tooltip/tooltip.scss +6 -3
  152. package/components/TreeView/tree-view.css +7 -15
  153. package/components/TreeView/tree-view.scss +7 -18
  154. package/components/Wizard/wizard.css +16 -39
  155. package/components/Wizard/wizard.scss +20 -2
  156. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  157. package/docs/components/Accordion/examples/Accordion.md +12 -12
  158. package/docs/components/ActionList/examples/ActionList.md +6 -6
  159. package/docs/components/Alert/examples/Alert.md +29 -29
  160. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  161. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  162. package/docs/components/Avatar/examples/Avatar.md +11 -11
  163. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  164. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  165. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  166. package/docs/components/Badge/examples/Badge.md +5 -5
  167. package/docs/components/Banner/examples/Banner.md +8 -8
  168. package/docs/components/Brand/examples/Brand.md +9 -9
  169. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  170. package/docs/components/Button/examples/Button.md +35 -35
  171. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  172. package/docs/components/Card/examples/Card.md +676 -116
  173. package/docs/components/Check/examples/Check.md +16 -19
  174. package/docs/components/Chip/examples/Chip.md +70 -52
  175. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  176. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  177. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  178. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  179. package/docs/components/Content/examples/Content.md +37 -9
  180. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  181. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  182. package/docs/components/DataList/examples/DataList.md +239 -202
  183. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  184. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  185. package/docs/components/Divider/examples/Divider.md +10 -10
  186. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  187. package/docs/components/Drawer/examples/Drawer.md +43 -43
  188. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  189. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  190. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  191. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  192. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  193. package/docs/components/FileUpload/examples/FileUpload.md +146 -105
  194. package/docs/components/Form/examples/Form.md +152 -130
  195. package/docs/components/FormControl/examples/FormControl.md +21 -20
  196. package/docs/components/HelperText/examples/HelperText.md +24 -35
  197. package/docs/components/Hint/examples/Hint.md +7 -7
  198. package/docs/components/Icon/examples/Icon.md +11 -12
  199. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  200. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  201. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  202. package/docs/components/Label/examples/Label.md +1427 -746
  203. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  204. package/docs/components/List/examples/List.md +18 -18
  205. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  206. package/docs/components/Login/examples/Login.md +103 -181
  207. package/docs/components/Masthead/examples/masthead.md +9 -9
  208. package/docs/components/Menu/examples/Menu.md +83 -80
  209. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  210. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  211. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  212. package/docs/components/Nav/examples/Navigation.md +69 -69
  213. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  214. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  215. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  216. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  217. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  218. package/docs/components/Page/examples/Page.css +7 -1
  219. package/docs/components/Page/examples/Page.md +81 -54
  220. package/docs/components/Pagination/examples/Pagination.md +27 -27
  221. package/docs/components/Panel/examples/Panel.md +10 -10
  222. package/docs/components/Popover/examples/Popover.md +206 -149
  223. package/docs/components/Progress/examples/Progress.md +32 -61
  224. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  225. package/docs/components/Radio/examples/Radio.md +12 -11
  226. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  227. package/docs/components/Select/examples/Select.md +368 -313
  228. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  229. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  230. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  231. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  232. package/docs/components/Slider/examples/Slider.md +84 -62
  233. package/docs/components/Spinner/examples/Spinner.md +24 -24
  234. package/docs/components/Switch/examples/Switch.md +19 -19
  235. package/docs/components/TabContent/examples/TabContent.md +13 -13
  236. package/docs/components/Table/examples/Table.css +4 -0
  237. package/docs/components/Table/examples/Table.md +5212 -5750
  238. package/docs/components/Tabs/examples/Tabs.md +155 -155
  239. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  240. package/docs/components/Tile/examples/Tile.md +16 -17
  241. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  242. package/docs/components/Title/examples/Title.md +17 -17
  243. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  244. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  245. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  246. package/docs/components/TreeView/examples/TreeView.md +34 -34
  247. package/docs/components/Truncate/examples/Truncate.md +4 -5
  248. package/docs/components/Wizard/examples/Wizard.md +119 -127
  249. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  250. package/docs/demos/Alert/examples/Alert.md +118 -71
  251. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  252. package/docs/demos/Banner/examples/Banner.md +8 -9
  253. package/docs/demos/Card/examples/Card.md +216 -153
  254. package/docs/demos/CardView/examples/CardView.md +57 -30
  255. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  256. package/docs/demos/Dashboard/examples/Dashboard.md +51 -33
  257. package/docs/demos/DataList/examples/DataList.md +312 -255
  258. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  259. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  260. package/docs/demos/Form/examples/BasicForms.md +220 -213
  261. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  262. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  263. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  264. package/docs/demos/Modal/examples/Modal.md +54 -66
  265. package/docs/demos/Nav/examples/Nav.md +47 -47
  266. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  267. package/docs/demos/Page/examples/Page.md +982 -51
  268. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  269. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  270. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  271. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  272. package/docs/demos/Table/examples/Table.md +3323 -1288
  273. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  274. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  275. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  276. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  277. package/docs/layouts/Flex/examples/Flex.md +98 -98
  278. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  279. package/docs/layouts/Grid/examples/Grid.md +9 -9
  280. package/docs/layouts/Level/examples/Level.md +5 -5
  281. package/docs/layouts/Split/examples/Split.md +7 -7
  282. package/docs/layouts/Stack/examples/Stack.md +6 -6
  283. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  284. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  285. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  286. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  287. package/docs/utilities/Display/examples/Display.md +12 -12
  288. package/docs/utilities/Flex/examples/Flex.md +35 -35
  289. package/docs/utilities/Float/examples/Float.md +5 -5
  290. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  291. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  292. package/docs/utilities/Text/examples/Text.md +31 -31
  293. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  294. package/layouts/Gallery/gallery.css +1 -1
  295. package/layouts/Gallery/gallery.scss +1 -1
  296. package/layouts/Grid/grid.css +7 -7
  297. package/layouts/Grid/grid.scss +2 -2
  298. package/package.json +59 -65
  299. package/patternfly-addons.css +48 -48
  300. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  301. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  302. package/patternfly-base.css +63 -114
  303. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1179 -2293
  304. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  305. package/patternfly.css +1207 -2327
  306. package/patternfly.min.css +1 -1
  307. package/patternfly.min.css.map +1 -1
  308. package/sass-utilities/functions.scss +8 -24
  309. package/sass-utilities/mixins.scss +15 -39
  310. package/sass-utilities/placeholders.scss +0 -23
  311. package/sass-utilities/scss-variables.scss +5 -6
  312. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  313. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  314. package/utilities/Spacing/spacing.scss +2 -2
  315. package/utilities/Text/text.css +48 -48
  316. package/utilities/Text/text.scss +6 -6
  317. package/utilities/Text/themes/dark/text.scss +2 -2
  318. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  319. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  326. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  327. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  332. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  333. package/assets/pficon/pficon.woff +0 -0
  334. package/base/_shield-inheritable.scss +0 -69
  335. package/base/_shield-noninheritable.scss +0 -13
  336. package/base/patternfly-shield-inheritable.css +0 -66
  337. package/base/patternfly-shield-inheritable.scss +0 -4
  338. package/base/patternfly-shield-noninheritable.css +0 -9
  339. package/base/patternfly-shield-noninheritable.scss +0 -4
  340. package/sass-utilities/bs-variables.scss +0 -709
package/docs/components/DualListSelector/examples/DualListSelector.md CHANGED
@@ -16,17 +16,17 @@ cssPrefix: pf-c-dual-list-selector
16
16
  </div>
17
17
  <div class="pf-c-dual-list-selector__tools">
18
18
  <div class="pf-c-dual-list-selector__tools-filter">
19
- <div class="pf-c-search-input">
20
- <div class="pf-c-search-input__bar">
21
- <span class="pf-c-search-input__text">
22
- <span class="pf-c-search-input__icon">
23
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
19
+ <div class="pf-c-text-input-group">
20
+ <div class="pf-c-text-input-group__main pf-m-icon">
21
+ <span class="pf-c-text-input-group__text">
22
+ <span class="pf-c-text-input-group__icon">
23
+ <i class="fas fa-fw fa-search"></i>
24
24
  </span>
25
25
  <input
26
- class="pf-c-search-input__text-input"
27
- type="text"
28
- placeholder="Filter options"
29
- aria-label="Filter options"
26
+ class="pf-c-text-input-group__text-input"
27
+ type="search"
28
+ value
29
+ aria-label="Available search input"
30
30
  />
31
31
  </span>
32
32
  </div>
@@ -207,17 +207,17 @@ cssPrefix: pf-c-dual-list-selector
207
207
  </div>
208
208
  <div class="pf-c-dual-list-selector__tools">
209
209
  <div class="pf-c-dual-list-selector__tools-filter">
210
- <div class="pf-c-search-input">
211
- <div class="pf-c-search-input__bar">
212
- <span class="pf-c-search-input__text">
213
- <span class="pf-c-search-input__icon">
214
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
210
+ <div class="pf-c-text-input-group">
211
+ <div class="pf-c-text-input-group__main pf-m-icon">
212
+ <span class="pf-c-text-input-group__text">
213
+ <span class="pf-c-text-input-group__icon">
214
+ <i class="fas fa-fw fa-search"></i>
215
215
  </span>
216
216
  <input
217
- class="pf-c-search-input__text-input"
218
- type="text"
219
- placeholder="Filter options"
220
- aria-label="Filter options"
217
+ class="pf-c-text-input-group__text-input"
218
+ type="search"
219
+ value
220
+ aria-label="Chosen search input"
221
221
  />
222
222
  </span>
223
223
  </div>
@@ -303,17 +303,17 @@ cssPrefix: pf-c-dual-list-selector
303
303
  </div>
304
304
  <div class="pf-c-dual-list-selector__tools">
305
305
  <div class="pf-c-dual-list-selector__tools-filter">
306
- <div class="pf-c-search-input">
307
- <div class="pf-c-search-input__bar">
308
- <span class="pf-c-search-input__text">
309
- <span class="pf-c-search-input__icon">
310
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
306
+ <div class="pf-c-text-input-group">
307
+ <div class="pf-c-text-input-group__main pf-m-icon">
308
+ <span class="pf-c-text-input-group__text">
309
+ <span class="pf-c-text-input-group__icon">
310
+ <i class="fas fa-fw fa-search"></i>
311
311
  </span>
312
312
  <input
313
- class="pf-c-search-input__text-input"
314
- type="text"
315
- placeholder="Filter options"
316
- aria-label="Filter options"
313
+ class="pf-c-text-input-group__text-input"
314
+ type="search"
315
+ value
316
+ aria-label="Available search input"
317
317
  />
318
318
  </span>
319
319
  </div>
@@ -488,17 +488,17 @@ cssPrefix: pf-c-dual-list-selector
488
488
  </div>
489
489
  <div class="pf-c-dual-list-selector__tools">
490
490
  <div class="pf-c-dual-list-selector__tools-filter">
491
- <div class="pf-c-search-input">
492
- <div class="pf-c-search-input__bar">
493
- <span class="pf-c-search-input__text">
494
- <span class="pf-c-search-input__icon">
495
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
491
+ <div class="pf-c-text-input-group">
492
+ <div class="pf-c-text-input-group__main pf-m-icon">
493
+ <span class="pf-c-text-input-group__text">
494
+ <span class="pf-c-text-input-group__icon">
495
+ <i class="fas fa-fw fa-search"></i>
496
496
  </span>
497
497
  <input
498
- class="pf-c-search-input__text-input"
499
- type="text"
500
- placeholder="Filter options"
501
- aria-label="Filter options"
498
+ class="pf-c-text-input-group__text-input"
499
+ type="search"
500
+ value
501
+ aria-label="Chosen search input"
502
502
  />
503
503
  </span>
504
504
  </div>
@@ -584,17 +584,17 @@ cssPrefix: pf-c-dual-list-selector
584
584
  </div>
585
585
  <div class="pf-c-dual-list-selector__tools">
586
586
  <div class="pf-c-dual-list-selector__tools-filter">
587
- <div class="pf-c-search-input">
588
- <div class="pf-c-search-input__bar">
589
- <span class="pf-c-search-input__text">
590
- <span class="pf-c-search-input__icon">
591
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
587
+ <div class="pf-c-text-input-group">
588
+ <div class="pf-c-text-input-group__main pf-m-icon">
589
+ <span class="pf-c-text-input-group__text">
590
+ <span class="pf-c-text-input-group__icon">
591
+ <i class="fas fa-fw fa-search"></i>
592
592
  </span>
593
593
  <input
594
- class="pf-c-search-input__text-input"
595
- type="text"
596
- placeholder="Filter options"
597
- aria-label="Filter options"
594
+ class="pf-c-text-input-group__text-input"
595
+ type="search"
596
+ value
597
+ aria-label="Available search input"
598
598
  />
599
599
  </span>
600
600
  </div>
@@ -769,17 +769,17 @@ cssPrefix: pf-c-dual-list-selector
769
769
  </div>
770
770
  <div class="pf-c-dual-list-selector__tools">
771
771
  <div class="pf-c-dual-list-selector__tools-filter">
772
- <div class="pf-c-search-input">
773
- <div class="pf-c-search-input__bar">
774
- <span class="pf-c-search-input__text">
775
- <span class="pf-c-search-input__icon">
776
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
772
+ <div class="pf-c-text-input-group">
773
+ <div class="pf-c-text-input-group__main pf-m-icon">
774
+ <span class="pf-c-text-input-group__text">
775
+ <span class="pf-c-text-input-group__icon">
776
+ <i class="fas fa-fw fa-search"></i>
777
777
  </span>
778
778
  <input
779
- class="pf-c-search-input__text-input"
780
- type="text"
781
- placeholder="Filter options"
782
- aria-label="Filter options"
779
+ class="pf-c-text-input-group__text-input"
780
+ type="search"
781
+ value
782
+ aria-label="Chosen search input"
783
783
  />
784
784
  </span>
785
785
  </div>
@@ -865,17 +865,17 @@ cssPrefix: pf-c-dual-list-selector
865
865
  </div>
866
866
  <div class="pf-c-dual-list-selector__tools">
867
867
  <div class="pf-c-dual-list-selector__tools-filter">
868
- <div class="pf-c-search-input">
869
- <div class="pf-c-search-input__bar">
870
- <span class="pf-c-search-input__text">
871
- <span class="pf-c-search-input__icon">
872
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
868
+ <div class="pf-c-text-input-group">
869
+ <div class="pf-c-text-input-group__main pf-m-icon">
870
+ <span class="pf-c-text-input-group__text">
871
+ <span class="pf-c-text-input-group__icon">
872
+ <i class="fas fa-fw fa-search"></i>
873
873
  </span>
874
874
  <input
875
- class="pf-c-search-input__text-input"
876
- type="text"
877
- placeholder="Filter options"
878
- aria-label="Filter options"
875
+ class="pf-c-text-input-group__text-input"
876
+ type="search"
877
+ value
878
+ aria-label="Available search input"
879
879
  />
880
880
  </span>
881
881
  </div>
@@ -1050,17 +1050,17 @@ cssPrefix: pf-c-dual-list-selector
1050
1050
  </div>
1051
1051
  <div class="pf-c-dual-list-selector__tools">
1052
1052
  <div class="pf-c-dual-list-selector__tools-filter">
1053
- <div class="pf-c-search-input">
1054
- <div class="pf-c-search-input__bar">
1055
- <span class="pf-c-search-input__text">
1056
- <span class="pf-c-search-input__icon">
1057
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1053
+ <div class="pf-c-text-input-group">
1054
+ <div class="pf-c-text-input-group__main pf-m-icon">
1055
+ <span class="pf-c-text-input-group__text">
1056
+ <span class="pf-c-text-input-group__icon">
1057
+ <i class="fas fa-fw fa-search"></i>
1058
1058
  </span>
1059
1059
  <input
1060
- class="pf-c-search-input__text-input"
1061
- type="text"
1062
- placeholder="Filter options"
1063
- aria-label="Filter options"
1060
+ class="pf-c-text-input-group__text-input"
1061
+ type="search"
1062
+ value
1063
+ aria-label="Chosen search input"
1064
1064
  />
1065
1065
  </span>
1066
1066
  </div>
@@ -1159,17 +1159,17 @@ cssPrefix: pf-c-dual-list-selector
1159
1159
  </div>
1160
1160
  <div class="pf-c-dual-list-selector__tools">
1161
1161
  <div class="pf-c-dual-list-selector__tools-filter">
1162
- <div class="pf-c-search-input">
1163
- <div class="pf-c-search-input__bar">
1164
- <span class="pf-c-search-input__text">
1165
- <span class="pf-c-search-input__icon">
1166
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1162
+ <div class="pf-c-text-input-group">
1163
+ <div class="pf-c-text-input-group__main pf-m-icon">
1164
+ <span class="pf-c-text-input-group__text">
1165
+ <span class="pf-c-text-input-group__icon">
1166
+ <i class="fas fa-fw fa-search"></i>
1167
1167
  </span>
1168
1168
  <input
1169
- class="pf-c-search-input__text-input"
1170
- type="text"
1171
- placeholder="Filter options"
1172
- aria-label="Filter options"
1169
+ class="pf-c-text-input-group__text-input"
1170
+ type="search"
1171
+ value
1172
+ aria-label="Available search input"
1173
1173
  />
1174
1174
  </span>
1175
1175
  </div>
@@ -1343,17 +1343,17 @@ cssPrefix: pf-c-dual-list-selector
1343
1343
  </div>
1344
1344
  <div class="pf-c-dual-list-selector__tools">
1345
1345
  <div class="pf-c-dual-list-selector__tools-filter">
1346
- <div class="pf-c-search-input">
1347
- <div class="pf-c-search-input__bar">
1348
- <span class="pf-c-search-input__text">
1349
- <span class="pf-c-search-input__icon">
1350
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1346
+ <div class="pf-c-text-input-group">
1347
+ <div class="pf-c-text-input-group__main pf-m-icon">
1348
+ <span class="pf-c-text-input-group__text">
1349
+ <span class="pf-c-text-input-group__icon">
1350
+ <i class="fas fa-fw fa-search"></i>
1351
1351
  </span>
1352
1352
  <input
1353
- class="pf-c-search-input__text-input"
1354
- type="text"
1355
- placeholder="Filter options"
1356
- aria-label="Filter options"
1353
+ class="pf-c-text-input-group__text-input"
1354
+ type="search"
1355
+ value
1356
+ aria-label="Chosen search input"
1357
1357
  />
1358
1358
  </span>
1359
1359
  </div>
@@ -1452,17 +1452,17 @@ cssPrefix: pf-c-dual-list-selector
1452
1452
  </div>
1453
1453
  <div class="pf-c-dual-list-selector__tools">
1454
1454
  <div class="pf-c-dual-list-selector__tools-filter">
1455
- <div class="pf-c-search-input">
1456
- <div class="pf-c-search-input__bar">
1457
- <span class="pf-c-search-input__text">
1458
- <span class="pf-c-search-input__icon">
1459
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1455
+ <div class="pf-c-text-input-group">
1456
+ <div class="pf-c-text-input-group__main pf-m-icon">
1457
+ <span class="pf-c-text-input-group__text">
1458
+ <span class="pf-c-text-input-group__icon">
1459
+ <i class="fas fa-fw fa-search"></i>
1460
1460
  </span>
1461
1461
  <input
1462
- class="pf-c-search-input__text-input"
1463
- type="text"
1464
- placeholder="Filter options"
1465
- aria-label="Filter options"
1462
+ class="pf-c-text-input-group__text-input"
1463
+ type="search"
1464
+ value
1465
+ aria-label="Available search input"
1466
1466
  />
1467
1467
  </span>
1468
1468
  </div>
@@ -1888,17 +1888,17 @@ cssPrefix: pf-c-dual-list-selector
1888
1888
  </div>
1889
1889
  <div class="pf-c-dual-list-selector__tools">
1890
1890
  <div class="pf-c-dual-list-selector__tools-filter">
1891
- <div class="pf-c-search-input">
1892
- <div class="pf-c-search-input__bar">
1893
- <span class="pf-c-search-input__text">
1894
- <span class="pf-c-search-input__icon">
1895
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1891
+ <div class="pf-c-text-input-group">
1892
+ <div class="pf-c-text-input-group__main pf-m-icon">
1893
+ <span class="pf-c-text-input-group__text">
1894
+ <span class="pf-c-text-input-group__icon">
1895
+ <i class="fas fa-fw fa-search"></i>
1896
1896
  </span>
1897
1897
  <input
1898
- class="pf-c-search-input__text-input"
1899
- type="text"
1900
- placeholder="Filter options"
1901
- aria-label="Filter options"
1898
+ class="pf-c-text-input-group__text-input"
1899
+ type="search"
1900
+ value
1901
+ aria-label="Chosen search input"
1902
1902
  />
1903
1903
  </span>
1904
1904
  </div>
@@ -1984,17 +1984,17 @@ cssPrefix: pf-c-dual-list-selector
1984
1984
  </div>
1985
1985
  <div class="pf-c-dual-list-selector__tools">
1986
1986
  <div class="pf-c-dual-list-selector__tools-filter">
1987
- <div class="pf-c-search-input">
1988
- <div class="pf-c-search-input__bar">
1989
- <span class="pf-c-search-input__text">
1990
- <span class="pf-c-search-input__icon">
1991
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1987
+ <div class="pf-c-text-input-group">
1988
+ <div class="pf-c-text-input-group__main pf-m-icon">
1989
+ <span class="pf-c-text-input-group__text">
1990
+ <span class="pf-c-text-input-group__icon">
1991
+ <i class="fas fa-fw fa-search"></i>
1992
1992
  </span>
1993
1993
  <input
1994
- class="pf-c-search-input__text-input"
1995
- type="text"
1996
- placeholder="Filter options"
1997
- aria-label="Filter options"
1994
+ class="pf-c-text-input-group__text-input"
1995
+ type="search"
1996
+ value
1997
+ aria-label="Available search input"
1998
1998
  />
1999
1999
  </span>
2000
2000
  </div>
@@ -2401,17 +2401,17 @@ cssPrefix: pf-c-dual-list-selector
2401
2401
  </div>
2402
2402
  <div class="pf-c-dual-list-selector__tools">
2403
2403
  <div class="pf-c-dual-list-selector__tools-filter">
2404
- <div class="pf-c-search-input">
2405
- <div class="pf-c-search-input__bar">
2406
- <span class="pf-c-search-input__text">
2407
- <span class="pf-c-search-input__icon">
2408
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2404
+ <div class="pf-c-text-input-group">
2405
+ <div class="pf-c-text-input-group__main pf-m-icon">
2406
+ <span class="pf-c-text-input-group__text">
2407
+ <span class="pf-c-text-input-group__icon">
2408
+ <i class="fas fa-fw fa-search"></i>
2409
2409
  </span>
2410
2410
  <input
2411
- class="pf-c-search-input__text-input"
2412
- type="text"
2413
- placeholder="Filter options"
2414
- aria-label="Filter options"
2411
+ class="pf-c-text-input-group__text-input"
2412
+ type="search"
2413
+ value
2414
+ aria-label="Chosen search input"
2415
2415
  />
2416
2416
  </span>
2417
2417
  </div>
@@ -2564,17 +2564,17 @@ cssPrefix: pf-c-dual-list-selector
2564
2564
  </div>
2565
2565
  <div class="pf-c-dual-list-selector__tools">
2566
2566
  <div class="pf-c-dual-list-selector__tools-filter">
2567
- <div class="pf-c-search-input">
2568
- <div class="pf-c-search-input__bar">
2569
- <span class="pf-c-search-input__text">
2570
- <span class="pf-c-search-input__icon">
2571
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2567
+ <div class="pf-c-text-input-group">
2568
+ <div class="pf-c-text-input-group__main pf-m-icon">
2569
+ <span class="pf-c-text-input-group__text">
2570
+ <span class="pf-c-text-input-group__icon">
2571
+ <i class="fas fa-fw fa-search"></i>
2572
2572
  </span>
2573
2573
  <input
2574
- class="pf-c-search-input__text-input"
2575
- type="text"
2576
- placeholder="Filter options"
2577
- aria-label="Filter options"
2574
+ class="pf-c-text-input-group__text-input"
2575
+ type="search"
2576
+ value
2577
+ aria-label="Available search input"
2578
2578
  />
2579
2579
  </span>
2580
2580
  </div>
@@ -2726,17 +2726,17 @@ cssPrefix: pf-c-dual-list-selector
2726
2726
  </div>
2727
2727
  <div class="pf-c-dual-list-selector__tools">
2728
2728
  <div class="pf-c-dual-list-selector__tools-filter">
2729
- <div class="pf-c-search-input">
2730
- <div class="pf-c-search-input__bar">
2731
- <span class="pf-c-search-input__text">
2732
- <span class="pf-c-search-input__icon">
2733
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2729
+ <div class="pf-c-text-input-group">
2730
+ <div class="pf-c-text-input-group__main pf-m-icon">
2731
+ <span class="pf-c-text-input-group__text">
2732
+ <span class="pf-c-text-input-group__icon">
2733
+ <i class="fas fa-fw fa-search"></i>
2734
2734
  </span>
2735
2735
  <input
2736
- class="pf-c-search-input__text-input"
2737
- type="text"
2738
- placeholder="Filter options"
2739
- aria-label="Filter options"
2736
+ class="pf-c-text-input-group__text-input"
2737
+ type="search"
2738
+ value
2739
+ aria-label="Chosen search input"
2740
2740
  />
2741
2741
  </span>
2742
2742
  </div>
@@ -2807,7 +2807,9 @@ cssPrefix: pf-c-dual-list-selector
2807
2807
  <li class="pf-c-dual-list-selector__list-item" role="option">
2808
2808
  <div class="pf-c-dual-list-selector__list-item-row">
2809
2809
  <div class="pf-c-dual-list-selector__draggable">
2810
- <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2810
+ <span class="pf-c-button pf-m-disabled pf-m-plain">
2811
+ <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2812
+ </span>
2811
2813
  </div>
2812
2814
  <span class="pf-c-dual-list-selector__item">
2813
2815
  <span class="pf-c-dual-list-selector__item-main">
@@ -2825,7 +2827,9 @@ cssPrefix: pf-c-dual-list-selector
2825
2827
  <li class="pf-c-dual-list-selector__list-item" role="option">
2826
2828
  <div class="pf-c-dual-list-selector__list-item-row">
2827
2829
  <div class="pf-c-dual-list-selector__draggable">
2828
- <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2830
+ <span class="pf-c-button pf-m-plain">
2831
+ <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2832
+ </span>
2829
2833
  </div>
2830
2834
  <span class="pf-c-dual-list-selector__item">
2831
2835
  <span class="pf-c-dual-list-selector__item-main">
@@ -2843,7 +2847,9 @@ cssPrefix: pf-c-dual-list-selector
2843
2847
  <li class="pf-c-dual-list-selector__list-item" role="option">
2844
2848
  <div class="pf-c-dual-list-selector__list-item-row pf-m-ghost-row">
2845
2849
  <div class="pf-c-dual-list-selector__draggable">
2846
- <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2850
+ <span class="pf-c-button pf-m-disabled pf-m-plain">
2851
+ <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2852
+ </span>
2847
2853
  </div>
2848
2854
  <span class="pf-c-dual-list-selector__item">
2849
2855
  <span class="pf-c-dual-list-selector__item-main">
@@ -2861,7 +2867,9 @@ cssPrefix: pf-c-dual-list-selector
2861
2867
  <li class="pf-c-dual-list-selector__list-item" role="option">
2862
2868
  <div class="pf-c-dual-list-selector__list-item-row pf-m-selected">
2863
2869
  <div class="pf-c-dual-list-selector__draggable">
2864
- <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2870
+ <span class="pf-c-button pf-m-plain">
2871
+ <i class="fas fa-grip-vertical" aria-hidden="true"></i>
2872
+ </span>
2865
2873
  </div>
2866
2874
  <span class="pf-c-dual-list-selector__item">
2867
2875
  <span class="pf-c-dual-list-selector__item-main">
@@ -2891,55 +2899,51 @@ cssPrefix: pf-c-dual-list-selector
2891
2899
 
2892
2900
  ### Accessibility
2893
2901
 
2894
- | Attribute | Applied to | Outcome |
2895
- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
2896
- | `aria-pressed="true or false"` | `.pf-c-dual-list-selector__draggable .pf-c-button` | Indicates whether the button is currently pressed or not. |
2897
- | `aria-live` | `[element with live text]` | To give screen reader users live feedback about what's happening during interaction with the dual list selector, both during drag and drop interactions and keyboard interactions. **Highly Recommended** |
2898
- | `aria-describedby="[id value of applicable content]"` | `.pf-c-dual-list-selector__draggable .pf-c-button` | Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. **Highly recommended** |
2899
- | `aria-labelledby="[id of .pf-c-dual-list-selector__draggable .pf-c-button] [id of item text]"` | `.pf-c-table__dual-list-selector .pf-c-button` | Provides an accessible name for the draggable button. |
2900
- | `id="[]"` | `.pf-c-dual-list-selector__draggable .pf-c-button`, `[item text]`, `.pf-c-dual-list-selector__status-text` | Gives the button and the text element accessible IDs. |
2901
- | `aria-labelledby="[id of .pf-c-dual-list-selector__status-text]` | `.pf-c-dual-list-selector__list [ul]` | Gives the list an accessible name. |
2902
- | `role="listbox or tree or group"` | `.pf-c-dual-list-selector__list [ul]` | Indicates the list is single, a tree, or a subgroup within the tree. |
2903
- | `aria-multiselectable="true"` | `.pf-c-dual-list-selector__list [ul]` | Indicates the list is multiselectable. |
2904
- | `aria-activedescendant=""` | `.pf-c-dual-list-selector__list [ul]` | Indicates the list has clickable children. |
2905
- | `role="option or treeitem"` | `.pf-c-dual-list-selector__list-item [li]` | Indicates whether the item is part of a tree. |
2906
- | `aria-expanded="true"` | `.pf-c-dual-list-selector__list-item [li]` | Indicates a treeitem is expanded. |
2902
+ | Attribute | Applied to | Outcome |
2903
+ | -- | -- | -- |
2904
+ | `aria-live` | `[element with live text]` | To give screen reader users live feedback about what's happening during interaction with the dual list selector, both during drag and drop interactions and keyboard interactions. **Highly Recommended** |
2905
+ | `aria-labelledby="[id of .pf-c-dual-list-selector__status-text]` | `.pf-c-dual-list-selector__list [ul]` | Gives the list an accessible name. |
2906
+ | `role="listbox or tree or group"` | `.pf-c-dual-list-selector__list [ul]` | Indicates the list is single, a tree, or a subgroup within the tree. |
2907
+ | `aria-multiselectable="true"` | `.pf-c-dual-list-selector__list [ul]` | Indicates the list is multiselectable. |
2908
+ | `aria-activedescendant=""` | `.pf-c-dual-list-selector__list [ul]` | Indicates the list has clickable children. |
2909
+ | `role="option or treeitem"` | `.pf-c-dual-list-selector__list-item [li]` | Indicates whether the item is part of a tree. |
2910
+ | `aria-expanded="true"` | `.pf-c-dual-list-selector__list-item [li]` | Indicates a treeitem is expanded. |
2907
2911
 
2908
2912
  ### Usage
2909
2913
 
2910
- | Class | Applied | Outcome |
2911
- | -------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
2912
- | `.pf-c-dual-list-selector` | `<div>` | Initiates the dual list selector component. **Required** |
2913
- | `.pf-c-dual-list-selector__pane` | `<div>` | Initiates a dual list selector pane. **Required** |
2914
- | `.pf-c-dual-list-selector__header` | `<div>` | Initiates a dual list selector pane header. **Required** |
2915
- | `.pf-c-dual-list-selector__title` | `<div>` | Initiates a dual list selector pane title. **Required** |
2916
- | `.pf-c-dual-list-selector__title-text` | `<div>` | Initiates a dual list selector pane title text. **Required** |
2917
- | `.pf-c-dual-list-selector__tools` | `<div>` | Initiates a dual list selector tools. **Required** |
2918
- | `.pf-c-dual-list-selector__filter` | `<div>` | Initiates a dual list selector pane filter. **Required** |
2919
- | `.pf-c-dual-list-selector__actions` | `<div>` | Initiates a dual list selector pane actions. |
2920
- | `.pf-c-dual-list-selector__actions-item` | `<div>` | Initiates a dual list selector pane actions item. |
2921
- | `.pf-c-dual-list-selector__status` | `<div>` | Initiates a dual list selector pane selected status. **Required** |
2922
- | `.pf-c-dual-list-selector__status-text` | `<span>` | Initiates a dual list selector pane selected status text. **Required** |
2923
- | `.pf-c-dual-list-selector__menu` | `<div>` | Initiates a dual list selector pane menu container. **Required** |
2924
- | `.pf-c-dual-list-selector__list` | `<ul>` | Initiates a dual list selector pane menu list. **Required** |
2925
- | `.pf-c-dual-list-selector__list-item` | `<li>` | Initiates a dual list selector pane menu list item. **Required** |
2926
- | `.pf-c-dual-list-selector__list-item-row` | `<div>` | Initiates a dual list selector pane menu list item row. **Required** |
2927
- | `.pf-c-dual-list-selector__draggable` | `<div>` | Initiates a dual list selector pane draggable element. |
2928
- | `.pf-c-dual-list-selector__item` | `<span>`, `<div>` | Initiates a dual list selector pane menu item. **Required** |
2929
- | `.pf-c-dual-list-selector__item-main` | `<span>` | Initiates a dual list selector pane menu item main container. **Required** |
2930
- | `.pf-c-dual-list-selector__item-check` | `<span>` | Initiates the dual list selector item check. |
2931
- | `.pf-c-dual-list-selector__item-count` | `<span>` | Initiates the dual list selector item count. |
2932
- | `.pf-c-dual-list-selector__item-toggle-icon` | `<span>` | Initiates the dual list selector item toggle icon. |
2933
- | `.pf-c-dual-list-selector__item-toggle` | `<button>` | Initiates the dual list selector item toggle. |
2934
- | `.pf-c-dual-list-selector__item-text` | `<span>` | Initiates a dual list selector pane menu item text. **Required** |
2935
- | `.pf-c-dual-list-selector__controls` | `<div>` | Initiates the dual list selector controls. **Required** |
2936
- | `.pf-c-dual-list-selector__controls-item` | `<div>` | Initiates the dual list selector controls item. **Required** |
2937
- | `.pf-m-available` | `.pf-c-dual-list-selector__pane` | Defines a pane as the available list. |
2938
- | `.pf-m-chosen` | `.pf-c-dual-list-selector__pane` | Defines a pane as the chosen list. |
2939
- | `.pf-m-drag-over` | `.pf-c-dual-list-selector__list` | Modifies the dual list selector list to indicate that a draggable item is being dragged over the list. |
2940
- | `.pf-m-ghost-row` | `.pf-c-dual-list-selector__list-item-row` | Modifies the list item main to be a ghost row. |
2941
- | `.pf-m-selected` | `.pf-c-dual-list-selector__list-item-row` | Modifies the menu item for the selected state. |
2942
- | `.pf-m-check` | `.pf-c-dual-list-selector__list-item-row` | Indicates that an item is selectable with a checkbox. |
2943
- | `.pf-m-expandable` | `.pf-c-dual-list-selector__list-item` | Indicates that an item is expandable. |
2944
- | `.pf-m-expanded` | `.pf-c-dual-list-selector__list-item` | Indicates that an item is expanded. |
2945
- | `.pf-m-disabled` | `.pf-c-dual-list-selector__list-item` | Indicates that an item is disabled. **Note:** If an item is expandable, only the top level item needs the disabled class. |
2914
+ | Class | Applied | Outcome |
2915
+ | -- | -- | -- |
2916
+ | `.pf-c-dual-list-selector` | `<div>` | Initiates the dual list selector component. **Required** |
2917
+ | `.pf-c-dual-list-selector__pane` | `<div>` | Initiates a dual list selector pane. **Required** |
2918
+ | `.pf-c-dual-list-selector__header` | `<div>` | Initiates a dual list selector pane header. **Required** |
2919
+ | `.pf-c-dual-list-selector__title` | `<div>` | Initiates a dual list selector pane title. **Required** |
2920
+ | `.pf-c-dual-list-selector__title-text` | `<div>` | Initiates a dual list selector pane title text. **Required** |
2921
+ | `.pf-c-dual-list-selector__tools` | `<div>` | Initiates a dual list selector tools. **Required** |
2922
+ | `.pf-c-dual-list-selector__filter` | `<div>` | Initiates a dual list selector pane filter. **Required** |
2923
+ | `.pf-c-dual-list-selector__actions` | `<div>` | Initiates a dual list selector pane actions. |
2924
+ | `.pf-c-dual-list-selector__actions-item` | `<div>` | Initiates a dual list selector pane actions item. |
2925
+ | `.pf-c-dual-list-selector__status` | `<div>` | Initiates a dual list selector pane selected status. **Required** |
2926
+ | `.pf-c-dual-list-selector__status-text` | `<span>` | Initiates a dual list selector pane selected status text. **Required** |
2927
+ | `.pf-c-dual-list-selector__menu` | `<div>` | Initiates a dual list selector pane menu container. **Required** |
2928
+ | `.pf-c-dual-list-selector__list` | `<ul>` | Initiates a dual list selector pane menu list. **Required** |
2929
+ | `.pf-c-dual-list-selector__list-item` | `<li>` | Initiates a dual list selector pane menu list item. **Required** |
2930
+ | `.pf-c-dual-list-selector__list-item-row` | `<div>` | Initiates a dual list selector pane menu list item row. **Required** |
2931
+ | `.pf-c-dual-list-selector__draggable` | `<div>` | Initiates a dual list selector pane draggable element. |
2932
+ | `.pf-c-dual-list-selector__item` | `<span>`, `<div>` | Initiates a dual list selector pane menu item. **Required** |
2933
+ | `.pf-c-dual-list-selector__item-main` | `<span>` | Initiates a dual list selector pane menu item main container. **Required** |
2934
+ | `.pf-c-dual-list-selector__item-check` | `<span>` | Initiates the dual list selector item check. |
2935
+ | `.pf-c-dual-list-selector__item-count` | `<span>` | Initiates the dual list selector item count. |
2936
+ | `.pf-c-dual-list-selector__item-toggle-icon` | `<span>` | Initiates the dual list selector item toggle icon. |
2937
+ | `.pf-c-dual-list-selector__item-toggle` | `<button>` | Initiates the dual list selector item toggle. |
2938
+ | `.pf-c-dual-list-selector__item-text` | `<span>` | Initiates a dual list selector pane menu item text. **Required** |
2939
+ | `.pf-c-dual-list-selector__controls` | `<div>` | Initiates the dual list selector controls. **Required** |
2940
+ | `.pf-c-dual-list-selector__controls-item` | `<div>` | Initiates the dual list selector controls item. **Required** |
2941
+ | `.pf-m-available` | `.pf-c-dual-list-selector__pane` | Defines a pane as the available list. |
2942
+ | `.pf-m-chosen` | `.pf-c-dual-list-selector__pane` | Defines a pane as the chosen list. |
2943
+ | `.pf-m-drag-over` | `.pf-c-dual-list-selector__list` | Modifies the dual list selector list to indicate that a draggable item is being dragged over the list. |
2944
+ | `.pf-m-ghost-row` | `.pf-c-dual-list-selector__list-item-row` | Modifies the list item main to be a ghost row. |
2945
+ | `.pf-m-selected` | `.pf-c-dual-list-selector__list-item-row` | Modifies the menu item for the selected state. |
2946
+ | `.pf-m-check` | `.pf-c-dual-list-selector__list-item-row` | Indicates that an item is selectable with a checkbox. |
2947
+ | `.pf-m-expandable` | `.pf-c-dual-list-selector__list-item` | Indicates that an item is expandable. |
2948
+ | `.pf-m-expanded` | `.pf-c-dual-list-selector__list-item` | Indicates that an item is expanded. |
2949
+ | `.pf-m-disabled` | `.pf-c-dual-list-selector__list-item` | Indicates that an item is disabled. **Note:** If an item is expandable, only the top level item needs the disabled class. |