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

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 (342) hide show
  1. package/README.md +4 -4
  2. package/RELEASE-NOTES.md +18 -1
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/pfbg-icon.svg +1 -0
  5. package/assets/pficon/pficon.scss +7 -2
  6. package/assets/pficon/pficon.woff2 +0 -0
  7. package/base/_base.scss +0 -18
  8. package/base/_chart-globals.scss +0 -4
  9. package/base/_common.scss +0 -22
  10. package/base/_fa-icons.scss +1 -2
  11. package/base/_fonts.scss +22 -27
  12. package/base/_globals.scss +92 -86
  13. package/base/_icons.scss +1 -28
  14. package/base/_svg-icons.scss +6 -0
  15. package/base/_variables.scss +4 -4
  16. package/base/patternfly-common.css +0 -10
  17. package/base/patternfly-fa-icons.css +1 -1
  18. package/base/patternfly-fonts.css +17 -17
  19. package/base/patternfly-globals.css +35 -41
  20. package/base/patternfly-icons.css +8 -22
  21. package/base/patternfly-pf-icons.css +6 -2
  22. package/base/patternfly-themes.css +0 -42
  23. package/base/patternfly-variables.css +3 -3
  24. package/base/themes/dark/_globals.scss +1 -1
  25. package/base/themes/dark/_variables.scss +1 -1
  26. package/components/AboutModalBox/about-modal-box.css +20 -50
  27. package/components/AboutModalBox/about-modal-box.scss +22 -14
  28. package/components/Accordion/accordion.css +2 -0
  29. package/components/Accordion/accordion.scss +2 -0
  30. package/components/Alert/alert.css +17 -8
  31. package/components/Alert/alert.scss +21 -7
  32. package/components/Alert/themes/dark/alert.scss +1 -1
  33. package/components/AppLauncher/app-launcher.css +2 -0
  34. package/components/AppLauncher/app-launcher.scss +2 -0
  35. package/components/Avatar/avatar.scss +2 -2
  36. package/components/BackgroundImage/background-image.css +8 -35
  37. package/components/BackgroundImage/background-image.scss +17 -43
  38. package/components/Banner/banner.css +14 -52
  39. package/components/Banner/banner.scss +9 -13
  40. package/components/Breadcrumb/breadcrumb.css +2 -0
  41. package/components/Breadcrumb/breadcrumb.scss +2 -0
  42. package/components/CalendarMonth/calendar-month.css +2 -2
  43. package/components/CalendarMonth/calendar-month.scss +3 -3
  44. package/components/Card/card.css +115 -50
  45. package/components/Card/card.scss +164 -63
  46. package/components/Chip/chip.css +33 -24
  47. package/components/Chip/chip.scss +40 -31
  48. package/components/ChipGroup/chip-group.css +27 -17
  49. package/components/ChipGroup/chip-group.scss +36 -22
  50. package/components/Content/content.css +11 -5
  51. package/components/Content/content.scss +17 -9
  52. package/components/ContextSelector/context-selector.css +13 -6
  53. package/components/ContextSelector/context-selector.scss +14 -7
  54. package/components/DataList/data-list-grid.css +7 -7
  55. package/components/DataList/data-list-grid.scss +1 -1
  56. package/components/DataList/data-list.css +46 -40
  57. package/components/DataList/data-list.scss +37 -28
  58. package/components/DatePicker/date-picker.css +0 -8
  59. package/components/DatePicker/date-picker.scss +0 -9
  60. package/components/DescriptionList/description-list.css +7 -7
  61. package/components/DescriptionList/description-list.scss +7 -7
  62. package/components/Divider/divider.css +2 -2
  63. package/components/Divider/divider.scss +3 -3
  64. package/components/Drawer/drawer.css +15 -16
  65. package/components/Drawer/drawer.scss +2 -3
  66. package/components/Dropdown/dropdown.css +26 -25
  67. package/components/Dropdown/dropdown.scss +17 -18
  68. package/components/DualListSelector/dual-list-selector.css +1 -1
  69. package/components/DualListSelector/dual-list-selector.scss +1 -1
  70. package/components/EmptyState/empty-state.css +46 -52
  71. package/components/EmptyState/empty-state.scss +58 -57
  72. package/components/ExpandableSection/expandable-section.css +2 -0
  73. package/components/ExpandableSection/expandable-section.scss +2 -0
  74. package/components/Form/form.css +14 -12
  75. package/components/Form/form.scss +9 -7
  76. package/components/FormControl/form-control.css +2 -5
  77. package/components/FormControl/themes/dark/form-control.scss +2 -6
  78. package/components/HelperText/helper-text.css +4 -0
  79. package/components/HelperText/helper-text.scss +5 -0
  80. package/components/Hint/hint.css +2 -2
  81. package/components/Hint/hint.scss +2 -2
  82. package/components/Icon/icon.css +3 -3
  83. package/components/Icon/icon.scss +3 -3
  84. package/components/InputGroup/input-group.css +61 -85
  85. package/components/InputGroup/input-group.scss +55 -61
  86. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  87. package/components/Label/label.css +49 -36
  88. package/components/Label/label.scss +53 -38
  89. package/components/Label/themes/dark/label.scss +2 -2
  90. package/components/LabelGroup/label-group.css +26 -22
  91. package/components/LabelGroup/label-group.scss +31 -26
  92. package/components/LogViewer/log-viewer.css +0 -38
  93. package/components/Login/login.css +20 -60
  94. package/components/Login/login.scss +16 -18
  95. package/components/Login/themes/dark/login.scss +4 -0
  96. package/components/Masthead/masthead.css +4 -42
  97. package/components/Masthead/masthead.scss +4 -4
  98. package/components/Menu/menu.css +9 -6
  99. package/components/Menu/menu.scss +34 -31
  100. package/components/MenuToggle/menu-toggle.css +3 -1
  101. package/components/MenuToggle/menu-toggle.scss +3 -1
  102. package/components/ModalBox/modal-box.css +12 -11
  103. package/components/ModalBox/modal-box.scss +14 -14
  104. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  105. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  106. package/components/Nav/nav.css +1 -1
  107. package/components/Nav/nav.scss +2 -2
  108. package/components/NotificationDrawer/notification-drawer.css +8 -8
  109. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  110. package/components/OptionsMenu/options-menu.css +8 -10
  111. package/components/OptionsMenu/options-menu.scss +9 -11
  112. package/components/Page/page.css +101 -122
  113. package/components/Page/page.scss +49 -21
  114. package/components/Pagination/pagination.css +2 -110
  115. package/components/Pagination/pagination.scss +0 -6
  116. package/components/Popover/popover.css +31 -37
  117. package/components/Popover/popover.scss +32 -37
  118. package/components/Popover/themes/dark/popover.scss +3 -9
  119. package/components/Progress/progress.css +13 -10
  120. package/components/Progress/progress.scss +13 -10
  121. package/components/ProgressStepper/progress-stepper.css +5 -5
  122. package/components/ProgressStepper/progress-stepper.scss +5 -5
  123. package/components/SearchInput/search-input.css +4 -2
  124. package/components/SearchInput/search-input.scss +4 -2
  125. package/components/Select/select.css +1 -1
  126. package/components/Select/select.scss +1 -1
  127. package/components/Sidebar/sidebar.css +69 -26
  128. package/components/Sidebar/sidebar.scss +84 -27
  129. package/components/SimpleList/simple-list.css +1 -1
  130. package/components/SimpleList/simple-list.scss +2 -2
  131. package/components/Spinner/spinner.css +4 -133
  132. package/components/Spinner/spinner.scss +4 -173
  133. package/components/Table/table-grid.css +28 -28
  134. package/components/Table/table-scrollable.css +31 -26
  135. package/components/Table/table-scrollable.scss +33 -28
  136. package/components/Table/table-tree-view.css +14 -4
  137. package/components/Table/table-tree-view.scss +15 -0
  138. package/components/Table/table.css +67 -65
  139. package/components/Table/table.scss +65 -62
  140. package/components/Tabs/tabs.css +0 -4
  141. package/components/Tabs/tabs.scss +0 -7
  142. package/components/TextInputGroup/text-input-group.css +6 -4
  143. package/components/TextInputGroup/text-input-group.scss +6 -5
  144. package/components/Tile/tile.css +1 -1
  145. package/components/Tile/tile.scss +1 -1
  146. package/components/Timestamp/timestamp.css +3 -3
  147. package/components/Timestamp/timestamp.scss +3 -3
  148. package/components/Toolbar/toolbar.css +78 -43
  149. package/components/Toolbar/toolbar.scss +50 -10
  150. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  151. package/components/Tooltip/tooltip.css +7 -12
  152. package/components/Tooltip/tooltip.scss +6 -3
  153. package/components/TreeView/tree-view.css +7 -15
  154. package/components/TreeView/tree-view.scss +7 -18
  155. package/components/Wizard/wizard.css +16 -39
  156. package/components/Wizard/wizard.scss +20 -2
  157. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  158. package/docs/components/Accordion/examples/Accordion.md +12 -12
  159. package/docs/components/ActionList/examples/ActionList.md +6 -6
  160. package/docs/components/Alert/examples/Alert.md +29 -29
  161. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  162. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  163. package/docs/components/Avatar/examples/Avatar.md +11 -11
  164. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  165. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  166. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  167. package/docs/components/Badge/examples/Badge.md +5 -5
  168. package/docs/components/Banner/examples/Banner.md +8 -8
  169. package/docs/components/Brand/examples/Brand.md +9 -9
  170. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  171. package/docs/components/Button/examples/Button.md +51 -55
  172. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  173. package/docs/components/Card/examples/Card.md +676 -116
  174. package/docs/components/Check/examples/Check.md +16 -19
  175. package/docs/components/Chip/examples/Chip.md +70 -52
  176. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  177. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  178. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  179. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  180. package/docs/components/Content/examples/Content.md +37 -9
  181. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  182. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  183. package/docs/components/DataList/examples/DataList.md +239 -202
  184. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  185. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  186. package/docs/components/Divider/examples/Divider.md +10 -10
  187. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  188. package/docs/components/Drawer/examples/Drawer.md +43 -43
  189. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  190. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  191. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  192. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  193. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  194. package/docs/components/FileUpload/examples/FileUpload.md +150 -110
  195. package/docs/components/Form/examples/Form.md +152 -130
  196. package/docs/components/FormControl/examples/FormControl.md +21 -20
  197. package/docs/components/HelperText/examples/HelperText.md +24 -35
  198. package/docs/components/Hint/examples/Hint.md +7 -7
  199. package/docs/components/Icon/examples/Icon.md +11 -12
  200. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  201. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  202. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  203. package/docs/components/Label/examples/Label.md +1427 -746
  204. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  205. package/docs/components/List/examples/List.md +18 -18
  206. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  207. package/docs/components/Login/examples/Login.md +103 -181
  208. package/docs/components/Masthead/examples/masthead.md +9 -9
  209. package/docs/components/Menu/examples/Menu.md +93 -85
  210. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  211. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  212. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  213. package/docs/components/Nav/examples/Navigation.md +69 -69
  214. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  215. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  216. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  217. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  218. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  219. package/docs/components/Page/examples/Page.css +7 -1
  220. package/docs/components/Page/examples/Page.md +81 -54
  221. package/docs/components/Pagination/examples/Pagination.md +27 -27
  222. package/docs/components/Panel/examples/Panel.md +10 -10
  223. package/docs/components/Popover/examples/Popover.md +206 -149
  224. package/docs/components/Progress/examples/Progress.md +32 -61
  225. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  226. package/docs/components/Radio/examples/Radio.md +12 -11
  227. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  228. package/docs/components/Select/examples/Select.md +372 -318
  229. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  230. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  231. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  232. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  233. package/docs/components/Slider/examples/Slider.md +84 -62
  234. package/docs/components/Spinner/examples/Spinner.md +18 -67
  235. package/docs/components/Switch/examples/Switch.md +19 -19
  236. package/docs/components/TabContent/examples/TabContent.md +13 -13
  237. package/docs/components/Table/examples/Table.css +4 -0
  238. package/docs/components/Table/examples/Table.md +5212 -5750
  239. package/docs/components/Tabs/examples/Tabs.md +155 -155
  240. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  241. package/docs/components/Tile/examples/Tile.md +16 -17
  242. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  243. package/docs/components/Title/examples/Title.md +17 -17
  244. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  245. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  246. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  247. package/docs/components/TreeView/examples/TreeView.md +34 -34
  248. package/docs/components/Truncate/examples/Truncate.md +4 -5
  249. package/docs/components/Wizard/examples/Wizard.md +119 -127
  250. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  251. package/docs/demos/Alert/examples/Alert.md +118 -71
  252. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  253. package/docs/demos/Banner/examples/Banner.md +8 -9
  254. package/docs/demos/Button/examples/Button.md +10 -5
  255. package/docs/demos/Card/examples/Card.md +246 -168
  256. package/docs/demos/CardView/examples/CardView.md +57 -30
  257. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  258. package/docs/demos/Dashboard/examples/Dashboard.md +61 -38
  259. package/docs/demos/DataList/examples/DataList.md +312 -255
  260. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  261. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  262. package/docs/demos/Form/examples/BasicForms.md +220 -213
  263. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  264. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  265. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  266. package/docs/demos/Modal/examples/Modal.md +54 -66
  267. package/docs/demos/Nav/examples/Nav.md +47 -47
  268. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  269. package/docs/demos/Page/examples/Page.md +982 -51
  270. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  271. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  272. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  273. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  274. package/docs/demos/Table/examples/Table.md +3373 -1333
  275. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  276. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  277. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  278. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  279. package/docs/layouts/Flex/examples/Flex.md +98 -98
  280. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  281. package/docs/layouts/Grid/examples/Grid.md +9 -9
  282. package/docs/layouts/Level/examples/Level.md +5 -5
  283. package/docs/layouts/Split/examples/Split.md +7 -7
  284. package/docs/layouts/Stack/examples/Stack.md +6 -6
  285. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  286. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  287. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  288. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  289. package/docs/utilities/Display/examples/Display.md +12 -12
  290. package/docs/utilities/Flex/examples/Flex.md +35 -35
  291. package/docs/utilities/Float/examples/Float.md +5 -5
  292. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  293. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  294. package/docs/utilities/Text/examples/Text.md +31 -31
  295. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  296. package/layouts/Gallery/gallery.css +1 -1
  297. package/layouts/Gallery/gallery.scss +1 -1
  298. package/layouts/Grid/grid.css +7 -7
  299. package/layouts/Grid/grid.scss +2 -2
  300. package/package.json +60 -66
  301. package/patternfly-addons.css +48 -48
  302. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  303. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  304. package/patternfly-base.css +63 -114
  305. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1206 -2449
  306. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  307. package/patternfly.css +1234 -2483
  308. package/patternfly.min.css +1 -1
  309. package/patternfly.min.css.map +1 -1
  310. package/sass-utilities/functions.scss +8 -24
  311. package/sass-utilities/mixins.scss +15 -39
  312. package/sass-utilities/placeholders.scss +0 -23
  313. package/sass-utilities/scss-variables.scss +5 -6
  314. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  315. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  316. package/utilities/Spacing/spacing.scss +2 -2
  317. package/utilities/Text/text.css +48 -48
  318. package/utilities/Text/text.scss +6 -6
  319. package/utilities/Text/themes/dark/text.scss +2 -2
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  326. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  327. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  332. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  333. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  334. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  335. package/assets/pficon/pficon.woff +0 -0
  336. package/base/_shield-inheritable.scss +0 -69
  337. package/base/_shield-noninheritable.scss +0 -13
  338. package/base/patternfly-shield-inheritable.css +0 -66
  339. package/base/patternfly-shield-inheritable.scss +0 -4
  340. package/base/patternfly-shield-noninheritable.css +0 -9
  341. package/base/patternfly-shield-noninheritable.scss +0 -4
  342. package/sass-utilities/bs-variables.scss +0 -709
package/docs/components/CalendarMonth/examples/CalendarMonth.md CHANGED
@@ -1,6 +1,7 @@
1
1
  ---
2
2
  id: 'Calendar month'
3
3
  section: components
4
+ subsection: date-and-time
4
5
  cssPrefix: pf-c-calendar-month
5
6
  ---## Examples
6
7
 
@@ -19,73 +20,77 @@ cssPrefix: pf-c-calendar-month
19
20
  </button>
20
21
  </div>
21
22
  <div class="pf-c-input-group">
22
- <div class="pf-c-calendar-month__header-month">
23
- <div class="pf-c-select">
24
- <span
25
- id="calendar-month-date-selected-month-select-label"
26
- hidden
27
- >Month</span>
23
+ <div class="pf-c-input-group__item pf-m-fill">
24
+ <div class="pf-c-calendar-month__header-month">
25
+ <div class="pf-c-select">
26
+ <span
27
+ id="calendar-month-date-selected-month-select-label"
28
+ hidden
29
+ >Month</span>
28
30
 
29
- <button
30
- class="pf-c-select__toggle"
31
- type="button"
32
- id="calendar-month-date-selected-month-select-toggle"
33
- aria-haspopup="true"
34
- aria-expanded="false"
35
- aria-labelledby="calendar-month-date-selected-month-select-label calendar-month-date-selected-month-select-toggle"
36
- >
37
- <div class="pf-c-select__toggle-wrapper">
38
- <span class="pf-c-select__toggle-text">October</span>
39
- </div>
40
- <span class="pf-c-select__toggle-arrow">
41
- <i class="fas fa-caret-down" aria-hidden="true"></i>
42
- </span>
43
- </button>
31
+ <button
32
+ class="pf-c-select__toggle"
33
+ type="button"
34
+ id="calendar-month-date-selected-month-select-toggle"
35
+ aria-haspopup="true"
36
+ aria-expanded="false"
37
+ aria-labelledby="calendar-month-date-selected-month-select-label calendar-month-date-selected-month-select-toggle"
38
+ >
39
+ <div class="pf-c-select__toggle-wrapper">
40
+ <span class="pf-c-select__toggle-text">October</span>
41
+ </div>
42
+ <span class="pf-c-select__toggle-arrow">
43
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
44
+ </span>
45
+ </button>
44
46
 
45
- <ul
46
- class="pf-c-select__menu"
47
- role="listbox"
48
- aria-labelledby="calendar-month-date-selected-month-select-label"
49
- hidden
50
- >
51
- <li role="presentation">
52
- <button class="pf-c-select__menu-item" role="option">Running</button>
53
- </li>
54
- <li role="presentation">
55
- <button
56
- class="pf-c-select__menu-item pf-m-selected"
57
- role="option"
58
- aria-selected="true"
59
- >
60
- Stopped
61
- <span class="pf-c-select__menu-item-icon">
62
- <i class="fas fa-check" aria-hidden="true"></i>
63
- </span>
64
- </button>
65
- </li>
66
- <li role="presentation">
67
- <button class="pf-c-select__menu-item" role="option">Down</button>
68
- </li>
69
- <li role="presentation">
70
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
71
- </li>
72
- <li role="presentation">
73
- <button
74
- class="pf-c-select__menu-item"
75
- role="option"
76
- >Needs maintenance</button>
77
- </li>
78
- </ul>
47
+ <ul
48
+ class="pf-c-select__menu"
49
+ role="listbox"
50
+ aria-labelledby="calendar-month-date-selected-month-select-label"
51
+ hidden
52
+ >
53
+ <li role="presentation">
54
+ <button class="pf-c-select__menu-item" role="option">Running</button>
55
+ </li>
56
+ <li role="presentation">
57
+ <button
58
+ class="pf-c-select__menu-item pf-m-selected"
59
+ role="option"
60
+ aria-selected="true"
61
+ >
62
+ Stopped
63
+ <span class="pf-c-select__menu-item-icon">
64
+ <i class="fas fa-check" aria-hidden="true"></i>
65
+ </span>
66
+ </button>
67
+ </li>
68
+ <li role="presentation">
69
+ <button class="pf-c-select__menu-item" role="option">Down</button>
70
+ </li>
71
+ <li role="presentation">
72
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
73
+ </li>
74
+ <li role="presentation">
75
+ <button
76
+ class="pf-c-select__menu-item"
77
+ role="option"
78
+ >Needs maintenance</button>
79
+ </li>
80
+ </ul>
81
+ </div>
79
82
  </div>
80
83
  </div>
81
- <div class="pf-c-calendar-month__header-year">
82
- <input
83
- class="pf-c-form-control"
84
- type="number"
85
- value="2020"
86
- id="calendar-month-date-selected-year"
87
- aria-label="Select year"
88
- />
84
+ <div class="pf-c-input-group__item">
85
+ <div class="pf-c-calendar-month__header-year">
86
+ <input
87
+ class="pf-c-form-control"
88
+ type="number"
89
+ value="2020"
90
+ id="calendar-month-date-selected-year"
91
+ aria-label="Select year"
92
+ />
93
+ </div>
89
94
  </div>
90
95
  </div>
91
96
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
@@ -408,73 +413,77 @@ cssPrefix: pf-c-calendar-month
408
413
  </button>
409
414
  </div>
410
415
  <div class="pf-c-input-group">
411
- <div class="pf-c-calendar-month__header-month">
412
- <div class="pf-c-select">
413
- <span
414
- id="calendar-month-range-start-date-selected-month-select-label"
415
- hidden
416
- >Month</span>
416
+ <div class="pf-c-input-group__item pf-m-fill">
417
+ <div class="pf-c-calendar-month__header-month">
418
+ <div class="pf-c-select">
419
+ <span
420
+ id="calendar-month-range-start-date-selected-month-select-label"
421
+ hidden
422
+ >Month</span>
417
423
 
418
- <button
419
- class="pf-c-select__toggle"
420
- type="button"
421
- id="calendar-month-range-start-date-selected-month-select-toggle"
422
- aria-haspopup="true"
423
- aria-expanded="false"
424
- aria-labelledby="calendar-month-range-start-date-selected-month-select-label calendar-month-range-start-date-selected-month-select-toggle"
425
- >
426
- <div class="pf-c-select__toggle-wrapper">
427
- <span class="pf-c-select__toggle-text">October</span>
428
- </div>
429
- <span class="pf-c-select__toggle-arrow">
430
- <i class="fas fa-caret-down" aria-hidden="true"></i>
431
- </span>
432
- </button>
424
+ <button
425
+ class="pf-c-select__toggle"
426
+ type="button"
427
+ id="calendar-month-range-start-date-selected-month-select-toggle"
428
+ aria-haspopup="true"
429
+ aria-expanded="false"
430
+ aria-labelledby="calendar-month-range-start-date-selected-month-select-label calendar-month-range-start-date-selected-month-select-toggle"
431
+ >
432
+ <div class="pf-c-select__toggle-wrapper">
433
+ <span class="pf-c-select__toggle-text">October</span>
434
+ </div>
435
+ <span class="pf-c-select__toggle-arrow">
436
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
437
+ </span>
438
+ </button>
433
439
 
434
- <ul
435
- class="pf-c-select__menu"
436
- role="listbox"
437
- aria-labelledby="calendar-month-range-start-date-selected-month-select-label"
438
- hidden
439
- >
440
- <li role="presentation">
441
- <button class="pf-c-select__menu-item" role="option">Running</button>
442
- </li>
443
- <li role="presentation">
444
- <button
445
- class="pf-c-select__menu-item pf-m-selected"
446
- role="option"
447
- aria-selected="true"
448
- >
449
- Stopped
450
- <span class="pf-c-select__menu-item-icon">
451
- <i class="fas fa-check" aria-hidden="true"></i>
452
- </span>
453
- </button>
454
- </li>
455
- <li role="presentation">
456
- <button class="pf-c-select__menu-item" role="option">Down</button>
457
- </li>
458
- <li role="presentation">
459
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
460
- </li>
461
- <li role="presentation">
462
- <button
463
- class="pf-c-select__menu-item"
464
- role="option"
465
- >Needs maintenance</button>
466
- </li>
467
- </ul>
440
+ <ul
441
+ class="pf-c-select__menu"
442
+ role="listbox"
443
+ aria-labelledby="calendar-month-range-start-date-selected-month-select-label"
444
+ hidden
445
+ >
446
+ <li role="presentation">
447
+ <button class="pf-c-select__menu-item" role="option">Running</button>
448
+ </li>
449
+ <li role="presentation">
450
+ <button
451
+ class="pf-c-select__menu-item pf-m-selected"
452
+ role="option"
453
+ aria-selected="true"
454
+ >
455
+ Stopped
456
+ <span class="pf-c-select__menu-item-icon">
457
+ <i class="fas fa-check" aria-hidden="true"></i>
458
+ </span>
459
+ </button>
460
+ </li>
461
+ <li role="presentation">
462
+ <button class="pf-c-select__menu-item" role="option">Down</button>
463
+ </li>
464
+ <li role="presentation">
465
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
466
+ </li>
467
+ <li role="presentation">
468
+ <button
469
+ class="pf-c-select__menu-item"
470
+ role="option"
471
+ >Needs maintenance</button>
472
+ </li>
473
+ </ul>
474
+ </div>
468
475
  </div>
469
476
  </div>
470
- <div class="pf-c-calendar-month__header-year">
471
- <input
472
- class="pf-c-form-control"
473
- type="number"
474
- value="2020"
475
- id="calendar-month-range-start-date-selected-year"
476
- aria-label="Select year"
477
- />
477
+ <div class="pf-c-input-group__item">
478
+ <div class="pf-c-calendar-month__header-year">
479
+ <input
480
+ class="pf-c-form-control"
481
+ type="number"
482
+ value="2020"
483
+ id="calendar-month-range-start-date-selected-year"
484
+ aria-label="Select year"
485
+ />
486
+ </div>
478
487
  </div>
479
488
  </div>
480
489
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
@@ -808,73 +817,77 @@ cssPrefix: pf-c-calendar-month
808
817
  </button>
809
818
  </div>
810
819
  <div class="pf-c-input-group">
811
- <div class="pf-c-calendar-month__header-month">
812
- <div class="pf-c-select">
813
- <span
814
- id="calendar-month-range-end-date-selected-month-select-label"
815
- hidden
816
- >Month</span>
820
+ <div class="pf-c-input-group__item pf-m-fill">
821
+ <div class="pf-c-calendar-month__header-month">
822
+ <div class="pf-c-select">
823
+ <span
824
+ id="calendar-month-range-end-date-selected-month-select-label"
825
+ hidden
826
+ >Month</span>
817
827
 
818
- <button
819
- class="pf-c-select__toggle"
820
- type="button"
821
- id="calendar-month-range-end-date-selected-month-select-toggle"
822
- aria-haspopup="true"
823
- aria-expanded="false"
824
- aria-labelledby="calendar-month-range-end-date-selected-month-select-label calendar-month-range-end-date-selected-month-select-toggle"
825
- >
826
- <div class="pf-c-select__toggle-wrapper">
827
- <span class="pf-c-select__toggle-text">October</span>
828
- </div>
829
- <span class="pf-c-select__toggle-arrow">
830
- <i class="fas fa-caret-down" aria-hidden="true"></i>
831
- </span>
832
- </button>
828
+ <button
829
+ class="pf-c-select__toggle"
830
+ type="button"
831
+ id="calendar-month-range-end-date-selected-month-select-toggle"
832
+ aria-haspopup="true"
833
+ aria-expanded="false"
834
+ aria-labelledby="calendar-month-range-end-date-selected-month-select-label calendar-month-range-end-date-selected-month-select-toggle"
835
+ >
836
+ <div class="pf-c-select__toggle-wrapper">
837
+ <span class="pf-c-select__toggle-text">October</span>
838
+ </div>
839
+ <span class="pf-c-select__toggle-arrow">
840
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
841
+ </span>
842
+ </button>
833
843
 
834
- <ul
835
- class="pf-c-select__menu"
836
- role="listbox"
837
- aria-labelledby="calendar-month-range-end-date-selected-month-select-label"
838
- hidden
839
- >
840
- <li role="presentation">
841
- <button class="pf-c-select__menu-item" role="option">Running</button>
842
- </li>
843
- <li role="presentation">
844
- <button
845
- class="pf-c-select__menu-item pf-m-selected"
846
- role="option"
847
- aria-selected="true"
848
- >
849
- Stopped
850
- <span class="pf-c-select__menu-item-icon">
851
- <i class="fas fa-check" aria-hidden="true"></i>
852
- </span>
853
- </button>
854
- </li>
855
- <li role="presentation">
856
- <button class="pf-c-select__menu-item" role="option">Down</button>
857
- </li>
858
- <li role="presentation">
859
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
860
- </li>
861
- <li role="presentation">
862
- <button
863
- class="pf-c-select__menu-item"
864
- role="option"
865
- >Needs maintenance</button>
866
- </li>
867
- </ul>
844
+ <ul
845
+ class="pf-c-select__menu"
846
+ role="listbox"
847
+ aria-labelledby="calendar-month-range-end-date-selected-month-select-label"
848
+ hidden
849
+ >
850
+ <li role="presentation">
851
+ <button class="pf-c-select__menu-item" role="option">Running</button>
852
+ </li>
853
+ <li role="presentation">
854
+ <button
855
+ class="pf-c-select__menu-item pf-m-selected"
856
+ role="option"
857
+ aria-selected="true"
858
+ >
859
+ Stopped
860
+ <span class="pf-c-select__menu-item-icon">
861
+ <i class="fas fa-check" aria-hidden="true"></i>
862
+ </span>
863
+ </button>
864
+ </li>
865
+ <li role="presentation">
866
+ <button class="pf-c-select__menu-item" role="option">Down</button>
867
+ </li>
868
+ <li role="presentation">
869
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
870
+ </li>
871
+ <li role="presentation">
872
+ <button
873
+ class="pf-c-select__menu-item"
874
+ role="option"
875
+ >Needs maintenance</button>
876
+ </li>
877
+ </ul>
878
+ </div>
868
879
  </div>
869
880
  </div>
870
- <div class="pf-c-calendar-month__header-year">
871
- <input
872
- class="pf-c-form-control"
873
- type="number"
874
- value="2020"
875
- id="calendar-month-range-end-date-selected-year"
876
- aria-label="Select year"
877
- />
881
+ <div class="pf-c-input-group__item">
882
+ <div class="pf-c-calendar-month__header-year">
883
+ <input
884
+ class="pf-c-form-control"
885
+ type="number"
886
+ value="2020"
887
+ id="calendar-month-range-end-date-selected-year"
888
+ aria-label="Select year"
889
+ />
890
+ </div>
878
891
  </div>
879
892
  </div>
880
893
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
@@ -1208,73 +1221,77 @@ cssPrefix: pf-c-calendar-month
1208
1221
  </button>
1209
1222
  </div>
1210
1223
  <div class="pf-c-input-group">
1211
- <div class="pf-c-calendar-month__header-month">
1212
- <div class="pf-c-select">
1213
- <span
1214
- id="calendar-month-range-start-and-end-dates-selected-month-select-label"
1215
- hidden
1216
- >Month</span>
1224
+ <div class="pf-c-input-group__item pf-m-fill">
1225
+ <div class="pf-c-calendar-month__header-month">
1226
+ <div class="pf-c-select">
1227
+ <span
1228
+ id="calendar-month-range-start-and-end-dates-selected-month-select-label"
1229
+ hidden
1230
+ >Month</span>
1217
1231
 
1218
- <button
1219
- class="pf-c-select__toggle"
1220
- type="button"
1221
- id="calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1222
- aria-haspopup="true"
1223
- aria-expanded="false"
1224
- aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1225
- >
1226
- <div class="pf-c-select__toggle-wrapper">
1227
- <span class="pf-c-select__toggle-text">October</span>
1228
- </div>
1229
- <span class="pf-c-select__toggle-arrow">
1230
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1231
- </span>
1232
- </button>
1232
+ <button
1233
+ class="pf-c-select__toggle"
1234
+ type="button"
1235
+ id="calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1236
+ aria-haspopup="true"
1237
+ aria-expanded="false"
1238
+ aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1239
+ >
1240
+ <div class="pf-c-select__toggle-wrapper">
1241
+ <span class="pf-c-select__toggle-text">October</span>
1242
+ </div>
1243
+ <span class="pf-c-select__toggle-arrow">
1244
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1245
+ </span>
1246
+ </button>
1233
1247
 
1234
- <ul
1235
- class="pf-c-select__menu"
1236
- role="listbox"
1237
- aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label"
1238
- hidden
1239
- >
1240
- <li role="presentation">
1241
- <button class="pf-c-select__menu-item" role="option">Running</button>
1242
- </li>
1243
- <li role="presentation">
1244
- <button
1245
- class="pf-c-select__menu-item pf-m-selected"
1246
- role="option"
1247
- aria-selected="true"
1248
- >
1249
- Stopped
1250
- <span class="pf-c-select__menu-item-icon">
1251
- <i class="fas fa-check" aria-hidden="true"></i>
1252
- </span>
1253
- </button>
1254
- </li>
1255
- <li role="presentation">
1256
- <button class="pf-c-select__menu-item" role="option">Down</button>
1257
- </li>
1258
- <li role="presentation">
1259
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
1260
- </li>
1261
- <li role="presentation">
1262
- <button
1263
- class="pf-c-select__menu-item"
1264
- role="option"
1265
- >Needs maintenance</button>
1266
- </li>
1267
- </ul>
1248
+ <ul
1249
+ class="pf-c-select__menu"
1250
+ role="listbox"
1251
+ aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label"
1252
+ hidden
1253
+ >
1254
+ <li role="presentation">
1255
+ <button class="pf-c-select__menu-item" role="option">Running</button>
1256
+ </li>
1257
+ <li role="presentation">
1258
+ <button
1259
+ class="pf-c-select__menu-item pf-m-selected"
1260
+ role="option"
1261
+ aria-selected="true"
1262
+ >
1263
+ Stopped
1264
+ <span class="pf-c-select__menu-item-icon">
1265
+ <i class="fas fa-check" aria-hidden="true"></i>
1266
+ </span>
1267
+ </button>
1268
+ </li>
1269
+ <li role="presentation">
1270
+ <button class="pf-c-select__menu-item" role="option">Down</button>
1271
+ </li>
1272
+ <li role="presentation">
1273
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
1274
+ </li>
1275
+ <li role="presentation">
1276
+ <button
1277
+ class="pf-c-select__menu-item"
1278
+ role="option"
1279
+ >Needs maintenance</button>
1280
+ </li>
1281
+ </ul>
1282
+ </div>
1268
1283
  </div>
1269
1284
  </div>
1270
- <div class="pf-c-calendar-month__header-year">
1271
- <input
1272
- class="pf-c-form-control"
1273
- type="number"
1274
- value="2020"
1275
- id="calendar-month-range-start-and-end-dates-selected-year"
1276
- aria-label="Select year"
1277
- />
1285
+ <div class="pf-c-input-group__item">
1286
+ <div class="pf-c-calendar-month__header-year">
1287
+ <input
1288
+ class="pf-c-form-control"
1289
+ type="number"
1290
+ value="2020"
1291
+ id="calendar-month-range-start-and-end-dates-selected-year"
1292
+ aria-label="Select year"
1293
+ />
1294
+ </div>
1278
1295
  </div>
1279
1296
  </div>
1280
1297
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
@@ -1597,38 +1614,38 @@ cssPrefix: pf-c-calendar-month
1597
1614
 
1598
1615
  ### Accessibility
1599
1616
 
1600
- | Attribute | Applied to | Outcome |
1601
- | ------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
1602
- | `aria-hidden="true"` | `.pf-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required** |
1603
- | `aria-hidden="true"` | `.pf-c-calendar-month__day > span` | Hides the visual day of the month label from assistive technologies. **Required** |
1604
- | `.pf-screen-reader` | `.pf-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
1605
- | `aria-label="[Prev/Next] month"` | `.pf-c-calendar-month__header-nav-control` | Provides an accessible label for the nav controls. **Required** |
1606
- | `disabled` | `.pf-c-calendar-month__date` | Indicates that a date is selected. **Required when the parent is `.pf-c-calendar-month__dates-cell.pf-m-disabled`** |
1607
- | `aria-label="[date] [month] [year]"` | `.pf-c-calendar-month__date` | Provides an accessible label for the date button. **Required** |
1617
+ | Attribute | Applied to | Outcome |
1618
+ | -- | -- | -- |
1619
+ | `aria-hidden="true"` | `.pf-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required** |
1620
+ | `aria-hidden="true"` | `.pf-c-calendar-month__day > span` | Hides the visual day of the month label from assistive technologies. **Required** |
1621
+ | `.pf-screen-reader` | `.pf-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
1622
+ | `aria-label="[Prev/Next] month"` | `.pf-c-calendar-month__header-nav-control` | Provides an accessible label for the nav controls. **Required** |
1623
+ | `disabled` | `.pf-c-calendar-month__date` | Indicates that a date is selected. **Required when the parent is `.pf-c-calendar-month__dates-cell.pf-m-disabled`** |
1624
+ | `aria-label="[date] [month] [year]"` | `.pf-c-calendar-month__date` | Provides an accessible label for the date button. **Required** |
1608
1625
 
1609
1626
  ### Usage
1610
1627
 
1611
- | Class | Applied to | Outcome |
1612
- | ------------------------------------------ | ------------------------------------------ | ------------------------------------------------------------- |
1613
- | `.pf-c-calendar-month` | `<div>` | Initiates the calendar month component. **Required** |
1614
- | `.pf-c-calendar-month__header` | `<div>` | Initiates the calendar month header. **Required** |
1615
- | `.pf-c-calendar-month__header-nav-control` | `<div>` | Initiates a nav control for navigating by month. **Required** |
1616
- | `.pf-c-calendar-month__header-month` | `<div>` | Initiates the month select. **Required** |
1617
- | `.pf-c-calendar-month__header-year` | `<div>` | Initiates the year input. **Required** |
1618
- | `.pf-c-calendar-month__calendar` | `<table>` | Initiates the calendar. **Required** |
1619
- | `.pf-c-calendar-month__days` | `<thead>` | Initiates the calendar days section. **Required** |
1620
- | `.pf-c-calendar-month__days-row` | `<tr>` | Initiates the calendar days row. **Required** |
1621
- | `.pf-c-calendar-month__day` | `<th>` | Initiates a calendar day. **Required** |
1622
- | `.pf-c-calendar-month__dates` | `<tbody>` | Initiates the calendar dates section. **Required** |
1623
- | `.pf-c-calendar-month__dates-row` | `<tr>` | Initiates a calendar dates row. **Required** |
1624
- | `.pf-c-calendar-month__dates-cell` | `<td>` | Initiates a calendar date cell. **Required** |
1625
- | `.pf-c-calendar-month__date` | `<button>` | Initiates a calendar date. **Required** |
1626
- | `.pf-m-prev-month` | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the previous month. **Required** |
1627
- | `.pf-m-next-month` | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the next month. **Required** |
1628
- | `.pf-m-current` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the current day. **Required** |
1629
- | `.pf-m-selected` | `.pf-c-calendar-month__dates-cell` | Indicates a date is selected. |
1630
- | `.pf-m-start-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the start of a range. |
1631
- | `.pf-m-in-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is in a range. |
1632
- | `.pf-m-end-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the end of a range. |
1633
- | `.pf-m-adjacent-month` | `.pf-c-calendar-month__dates-cell` | Indicates a date is in an adjacent month. |
1634
- | `.pf-m-disabled` | `.pf-c-calendar-month__dates-cell` | Indicates a date is disabled and unavailable. |
1628
+ | Class | Applied to | Outcome |
1629
+ | -- | -- | -- |
1630
+ | `.pf-c-calendar-month` | `<div>` | Initiates the calendar month component. **Required** |
1631
+ | `.pf-c-calendar-month__header` | `<div>` | Initiates the calendar month header. **Required** |
1632
+ | `.pf-c-calendar-month__header-nav-control` | `<div>` | Initiates a nav control for navigating by month. **Required** |
1633
+ | `.pf-c-calendar-month__header-month` | `<div>` | Initiates the month select. **Required** |
1634
+ | `.pf-c-calendar-month__header-year` | `<div>` | Initiates the year input. **Required** |
1635
+ | `.pf-c-calendar-month__calendar` | `<table>` | Initiates the calendar. **Required** |
1636
+ | `.pf-c-calendar-month__days` | `<thead>` | Initiates the calendar days section. **Required** |
1637
+ | `.pf-c-calendar-month__days-row` | `<tr>` | Initiates the calendar days row. **Required** |
1638
+ | `.pf-c-calendar-month__day` | `<th>` | Initiates a calendar day. **Required** |
1639
+ | `.pf-c-calendar-month__dates` | `<tbody>` | Initiates the calendar dates section. **Required** |
1640
+ | `.pf-c-calendar-month__dates-row` | `<tr>` | Initiates a calendar dates row. **Required** |
1641
+ | `.pf-c-calendar-month__dates-cell` | `<td>` | Initiates a calendar date cell. **Required** |
1642
+ | `.pf-c-calendar-month__date` | `<button>` | Initiates a calendar date. **Required** |
1643
+ | `.pf-m-prev-month` | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the previous month. **Required** |
1644
+ | `.pf-m-next-month` | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the next month. **Required** |
1645
+ | `.pf-m-current` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the current day. **Required** |
1646
+ | `.pf-m-selected` | `.pf-c-calendar-month__dates-cell` | Indicates a date is selected. |
1647
+ | `.pf-m-start-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the start of a range. |
1648
+ | `.pf-m-in-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is in a range. |
1649
+ | `.pf-m-end-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the end of a range. |
1650
+ | `.pf-m-adjacent-month` | `.pf-c-calendar-month__dates-cell` | Indicates a date is in an adjacent month. |
1651
+ | `.pf-m-disabled` | `.pf-c-calendar-month__dates-cell` | Indicates a date is disabled and unavailable. |