superdesk-ui-framework 4.0.46 → 4.0.48

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 (563) hide show
  1. package/.eslintrc.js +0 -1
  2. package/.eslintrc.json +2 -5
  3. package/.github/workflows/test.yml +22 -26
  4. package/.prettierignore +3 -0
  5. package/.prettierrc.js +9 -0
  6. package/.travis.yml +4 -4
  7. package/README.md +14 -1
  8. package/app/styles/form-elements/_forms-general.scss +0 -4
  9. package/app-typescript/components/Alert.tsx +12 -16
  10. package/app-typescript/components/Autocomplete.tsx +53 -42
  11. package/app-typescript/components/Badge.tsx +1 -1
  12. package/app-typescript/components/Button.tsx +5 -11
  13. package/app-typescript/components/ButtonGroup.tsx +15 -10
  14. package/app-typescript/components/Carousel.tsx +25 -26
  15. package/app-typescript/components/CheckButtonGroup.tsx +6 -10
  16. package/app-typescript/components/Checkbox.tsx +16 -10
  17. package/app-typescript/components/CheckboxButton.tsx +22 -13
  18. package/app-typescript/components/ContentDivider.tsx +6 -7
  19. package/app-typescript/components/CreateButton.tsx +8 -6
  20. package/app-typescript/components/DatePicker.tsx +59 -55
  21. package/app-typescript/components/DateTimePicker.tsx +175 -117
  22. package/app-typescript/components/Divider.tsx +2 -4
  23. package/app-typescript/components/DonutChart.tsx +11 -6
  24. package/app-typescript/components/DragHandle.tsx +10 -6
  25. package/app-typescript/components/DragHandleDots.tsx +1 -3
  26. package/app-typescript/components/DropZone.tsx +27 -25
  27. package/app-typescript/components/Dropdown.tsx +61 -102
  28. package/app-typescript/components/DropdownFirst.tsx +57 -69
  29. package/app-typescript/components/DurationInput.tsx +64 -54
  30. package/app-typescript/components/Editor/EditorButton.tsx +4 -3
  31. package/app-typescript/components/EmptyState.tsx +10 -14
  32. package/app-typescript/components/Form/FormGroup.tsx +9 -16
  33. package/app-typescript/components/Form/FormItem.tsx +1 -5
  34. package/app-typescript/components/Form/FormLabel.tsx +0 -1
  35. package/app-typescript/components/Form/FormRow.tsx +12 -19
  36. package/app-typescript/components/Form/FormRowNew.tsx +9 -16
  37. package/app-typescript/components/Form/FormText.tsx +1 -5
  38. package/app-typescript/components/Form/InputBase.tsx +12 -11
  39. package/app-typescript/components/Form/InputNew.tsx +11 -12
  40. package/app-typescript/components/Form/InputWrapper.tsx +9 -18
  41. package/app-typescript/components/Form/index.tsx +9 -9
  42. package/app-typescript/components/FormLabel.tsx +1 -5
  43. package/app-typescript/components/GridItem.tsx +38 -69
  44. package/app-typescript/components/GridList.tsx +2 -6
  45. package/app-typescript/components/HeadingText.tsx +4 -5
  46. package/app-typescript/components/IconButton.tsx +4 -10
  47. package/app-typescript/components/IconLabel.tsx +5 -5
  48. package/app-typescript/components/IconPicker.tsx +128 -126
  49. package/app-typescript/components/IllustrationButton.tsx +2 -8
  50. package/app-typescript/components/Input.tsx +2 -2
  51. package/app-typescript/components/Label.tsx +11 -7
  52. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
  53. package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
  54. package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
  55. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
  56. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
  57. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
  58. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
  59. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
  60. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
  61. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
  62. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
  63. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
  64. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
  65. package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
  66. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
  67. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
  68. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
  69. package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
  70. package/app-typescript/components/Layouts/Container.tsx +13 -8
  71. package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
  72. package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
  73. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
  74. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
  75. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
  76. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
  77. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
  78. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
  79. package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
  80. package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
  81. package/app-typescript/components/Layouts/Layout.tsx +10 -16
  82. package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
  83. package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
  84. package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
  85. package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
  86. package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
  87. package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
  88. package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
  89. package/app-typescript/components/Layouts/Panel.tsx +45 -81
  90. package/app-typescript/components/Layouts/index.tsx +39 -39
  91. package/app-typescript/components/LeftMenu.tsx +51 -53
  92. package/app-typescript/components/ListItemLoader.tsx +1 -1
  93. package/app-typescript/components/Lists/BoxedList.tsx +16 -41
  94. package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
  95. package/app-typescript/components/Lists/ContentList.tsx +68 -62
  96. package/app-typescript/components/Lists/SimpleList.tsx +13 -12
  97. package/app-typescript/components/Lists/TableList.tsx +169 -217
  98. package/app-typescript/components/Lists/index.tsx +2 -2
  99. package/app-typescript/components/Loader.tsx +1 -3
  100. package/app-typescript/components/Menu.tsx +2 -4
  101. package/app-typescript/components/Modal.tsx +21 -21
  102. package/app-typescript/components/MultiSelect.tsx +6 -6
  103. package/app-typescript/components/NavButton.tsx +10 -8
  104. package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
  105. package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
  106. package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
  107. package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
  108. package/app-typescript/components/Navigation/index.tsx +3 -3
  109. package/app-typescript/components/Popover.tsx +19 -21
  110. package/app-typescript/components/PropsList.tsx +2 -4
  111. package/app-typescript/components/RadioButtonGroup.tsx +48 -45
  112. package/app-typescript/components/RadioGroup.tsx +9 -8
  113. package/app-typescript/components/ResizablePanels.tsx +2 -3
  114. package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
  115. package/app-typescript/components/SearchBar.tsx +53 -45
  116. package/app-typescript/components/Select.tsx +6 -8
  117. package/app-typescript/components/SelectGrid.tsx +32 -40
  118. package/app-typescript/components/SelectPreview.tsx +31 -25
  119. package/app-typescript/components/SelectWithTemplate.tsx +10 -11
  120. package/app-typescript/components/ShowPopup.tsx +30 -46
  121. package/app-typescript/components/SidebarMenu.tsx +19 -18
  122. package/app-typescript/components/Skeleton.tsx +12 -11
  123. package/app-typescript/components/SlidingToolbar.tsx +1 -6
  124. package/app-typescript/components/Spinner.tsx +2 -6
  125. package/app-typescript/components/StrechBar.tsx +1 -5
  126. package/app-typescript/components/SubNav.tsx +10 -8
  127. package/app-typescript/components/SvgIconIllustration.tsx +477 -105
  128. package/app-typescript/components/Switch.tsx +14 -12
  129. package/app-typescript/components/SwitchGroup.tsx +10 -10
  130. package/app-typescript/components/TabCustom.tsx +28 -35
  131. package/app-typescript/components/TabList.tsx +13 -10
  132. package/app-typescript/components/Tag.tsx +21 -24
  133. package/app-typescript/components/TagInput.tsx +4 -11
  134. package/app-typescript/components/Text/Heading.tsx +21 -41
  135. package/app-typescript/components/Text/Text.tsx +16 -12
  136. package/app-typescript/components/Text/Time.tsx +14 -10
  137. package/app-typescript/components/ThemeSelector.tsx +15 -14
  138. package/app-typescript/components/TimePicker.tsx +2 -2
  139. package/app-typescript/components/TimePickerV2.tsx +20 -20
  140. package/app-typescript/components/Toast.tsx +11 -7
  141. package/app-typescript/components/ToastMessage.tsx +3 -14
  142. package/app-typescript/components/ToastText.tsx +30 -32
  143. package/app-typescript/components/ToastWrapper.tsx +76 -74
  144. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
  145. package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
  146. package/app-typescript/components/ToggleBox/index.tsx +3 -7
  147. package/app-typescript/components/Tooltip.tsx +1 -1
  148. package/app-typescript/components/TreeMenu.tsx +72 -81
  149. package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
  150. package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
  151. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
  152. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
  153. package/app-typescript/components/WithPagination.tsx +34 -39
  154. package/app-typescript/components/WithPopover.tsx +0 -1
  155. package/app-typescript/components/WithPortal.tsx +4 -7
  156. package/app-typescript/components/WithSizeObserver.tsx +2 -6
  157. package/app-typescript/components/_Positioner.tsx +26 -26
  158. package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
  159. package/app-typescript/components/avatar/avatar-group.tsx +49 -68
  160. package/app-typescript/components/avatar/avatar-image.tsx +18 -12
  161. package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
  162. package/app-typescript/components/avatar/avatar-text.tsx +1 -4
  163. package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
  164. package/app-typescript/components/avatar/avatar.tsx +5 -8
  165. package/app-typescript/components/with-pagination.spec.tsx +8 -27
  166. package/app-typescript/helpers.tsx +2 -2
  167. package/app-typescript/index.ts +111 -100
  168. package/declarations.d.ts +1 -1
  169. package/dist/components/Alerts.tsx +171 -78
  170. package/dist/components/Autocomplete.tsx +187 -78
  171. package/dist/components/Avatar.tsx +52 -112
  172. package/dist/components/Badges.tsx +111 -67
  173. package/dist/components/BigIconFont.tsx +29 -17
  174. package/dist/components/BoxedList.tsx +244 -114
  175. package/dist/components/ButtonGroups.tsx +213 -147
  176. package/dist/components/Buttons.tsx +409 -137
  177. package/dist/components/Card.tsx +6 -7
  178. package/dist/components/Carousel.tsx +126 -39
  179. package/dist/components/Checkboxs.tsx +446 -105
  180. package/dist/components/Container.tsx +95 -48
  181. package/dist/components/ContentDivider.tsx +110 -63
  182. package/dist/components/ContentList.tsx +577 -253
  183. package/dist/components/CreateButton.tsx +71 -21
  184. package/dist/components/DatePicker.tsx +102 -26
  185. package/dist/components/DateTimePicker.tsx +46 -10
  186. package/dist/components/DragHandleDocs.tsx +56 -26
  187. package/dist/components/DropZone.tsx +67 -29
  188. package/dist/components/Dropdowns.tsx +220 -131
  189. package/dist/components/DurationInput.tsx +92 -32
  190. package/dist/components/EmptyStates.tsx +61 -26
  191. package/dist/components/GridItem.tsx +190 -91
  192. package/dist/components/GridList.tsx +37 -17
  193. package/dist/components/Heading.tsx +81 -35
  194. package/dist/components/IconButtons.tsx +125 -32
  195. package/dist/components/IconFont.tsx +24 -12
  196. package/dist/components/IconLabels.tsx +146 -39
  197. package/dist/components/IconPicker.tsx +30 -13
  198. package/dist/components/IllustrationButton.tsx +40 -20
  199. package/dist/components/Index.tsx +128 -114
  200. package/dist/components/Inputs.tsx +153 -51
  201. package/dist/components/Labels.tsx +191 -117
  202. package/dist/components/LeftNavigations.tsx +327 -100
  203. package/dist/components/ListItems.tsx +8 -9
  204. package/dist/components/Loader.tsx +5 -4
  205. package/dist/components/Menu.tsx +48 -26
  206. package/dist/components/Modal.tsx +298 -104
  207. package/dist/components/MultiSelect.tsx +189 -53
  208. package/dist/components/NavButtons.tsx +86 -30
  209. package/dist/components/Panel.tsx +367 -120
  210. package/dist/components/Popover.tsx +37 -17
  211. package/dist/components/QuickNavigationBar.tsx +222 -86
  212. package/dist/components/RadioGroup.tsx +375 -137
  213. package/dist/components/ResizablePanels.tsx +8 -14
  214. package/dist/components/SelectGrid.tsx +79 -38
  215. package/dist/components/SelectWithTemplate.tsx +23 -14
  216. package/dist/components/Selects.tsx +94 -29
  217. package/dist/components/SimpleList.tsx +91 -41
  218. package/dist/components/SubNav.tsx +57 -37
  219. package/dist/components/Switch.tsx +168 -42
  220. package/dist/components/TableList.tsx +220 -66
  221. package/dist/components/Tabs.tsx +149 -64
  222. package/dist/components/TagInputDocs.tsx +73 -17
  223. package/dist/components/Tags.tsx +104 -73
  224. package/dist/components/Text.tsx +108 -58
  225. package/dist/components/TimePicker.tsx +74 -20
  226. package/dist/components/Toasts.tsx +162 -80
  227. package/dist/components/Togglebox.tsx +164 -62
  228. package/dist/components/Tooltips.tsx +27 -15
  229. package/dist/components/TreeMenu.tsx +95 -59
  230. package/dist/components/TreeSelect.tsx +297 -162
  231. package/dist/components/WithPaginationDocs.tsx +15 -16
  232. package/dist/components/WithSizeObserver.tsx +9 -9
  233. package/dist/components/tree-select/TreeSelect.tsx +126 -77
  234. package/dist/components/tree-select/example-1.tsx +8 -12
  235. package/dist/components/tree-select/example-2.tsx +2 -5
  236. package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
  237. package/dist/components/utilities/BorderUtilities.tsx +31 -32
  238. package/dist/components/utilities/DisplayUtilities.tsx +4 -5
  239. package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
  240. package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
  241. package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
  242. package/dist/components/utilities/OpacityUtilities.tsx +4 -7
  243. package/dist/components/utilities/OverflowUtilities.tsx +4 -5
  244. package/dist/components/utilities/PositionUtilities.tsx +4 -5
  245. package/dist/components/utilities/ShadowUtilities.tsx +15 -16
  246. package/dist/components/utilities/SpacingUtilities.tsx +483 -178
  247. package/dist/components/utilities/TextUtilities.tsx +109 -60
  248. package/dist/design-patterns/Index.tsx +8 -11
  249. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  250. package/dist/examples.bundle.css +1257 -1155
  251. package/dist/examples.bundle.js +6246 -5620
  252. package/dist/playgrounds/dummy-data/items.ts +9 -8
  253. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  254. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  255. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  256. package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
  257. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  258. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  259. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  260. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  261. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  262. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  263. package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  264. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  265. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  266. package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  267. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  268. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  269. package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  270. package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  271. package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  272. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  273. package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  274. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  275. package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  276. package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  277. package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  278. package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  279. package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  280. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  281. package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  282. package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  283. package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  284. package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
  285. package/dist/superdesk-ui.bundle.css +0 -3
  286. package/dist/superdesk-ui.bundle.js +1791 -1865
  287. package/dist/vendor.bundle.js +2 -2
  288. package/examples/css/docs-page.css +1135 -1116
  289. package/examples/css/reset.css +124 -43
  290. package/examples/css/vendor.css +125 -125
  291. package/examples/index.js +138 -139
  292. package/examples/js/doc.js +41 -40
  293. package/examples/js/react.js +82 -48
  294. package/examples/pages/components/Alerts.tsx +171 -78
  295. package/examples/pages/components/Autocomplete.tsx +187 -78
  296. package/examples/pages/components/Avatar.tsx +52 -112
  297. package/examples/pages/components/Badges.tsx +111 -67
  298. package/examples/pages/components/BigIconFont.tsx +29 -17
  299. package/examples/pages/components/BoxedList.tsx +244 -114
  300. package/examples/pages/components/ButtonGroups.tsx +213 -147
  301. package/examples/pages/components/Buttons.tsx +409 -137
  302. package/examples/pages/components/Card.tsx +6 -7
  303. package/examples/pages/components/Carousel.tsx +126 -39
  304. package/examples/pages/components/Checkboxs.tsx +446 -105
  305. package/examples/pages/components/Container.tsx +95 -48
  306. package/examples/pages/components/ContentDivider.tsx +110 -63
  307. package/examples/pages/components/ContentList.tsx +577 -253
  308. package/examples/pages/components/CreateButton.tsx +71 -21
  309. package/examples/pages/components/DatePicker.tsx +102 -26
  310. package/examples/pages/components/DateTimePicker.tsx +46 -10
  311. package/examples/pages/components/DragHandleDocs.tsx +56 -26
  312. package/examples/pages/components/DropZone.tsx +67 -29
  313. package/examples/pages/components/Dropdowns.tsx +220 -131
  314. package/examples/pages/components/DurationInput.tsx +92 -32
  315. package/examples/pages/components/EmptyStates.tsx +61 -26
  316. package/examples/pages/components/GridItem.tsx +190 -91
  317. package/examples/pages/components/GridList.tsx +37 -17
  318. package/examples/pages/components/Heading.tsx +81 -35
  319. package/examples/pages/components/IconButtons.tsx +125 -32
  320. package/examples/pages/components/IconFont.tsx +24 -12
  321. package/examples/pages/components/IconLabels.tsx +146 -39
  322. package/examples/pages/components/IconPicker.tsx +30 -13
  323. package/examples/pages/components/IllustrationButton.tsx +40 -20
  324. package/examples/pages/components/Index.tsx +128 -114
  325. package/examples/pages/components/Inputs.tsx +153 -51
  326. package/examples/pages/components/Labels.tsx +191 -117
  327. package/examples/pages/components/LeftNavigations.tsx +327 -100
  328. package/examples/pages/components/ListItems.tsx +8 -9
  329. package/examples/pages/components/Loader.tsx +5 -4
  330. package/examples/pages/components/Menu.tsx +48 -26
  331. package/examples/pages/components/Modal.tsx +298 -104
  332. package/examples/pages/components/MultiSelect.tsx +189 -53
  333. package/examples/pages/components/NavButtons.tsx +86 -30
  334. package/examples/pages/components/Panel.tsx +367 -120
  335. package/examples/pages/components/Popover.tsx +37 -17
  336. package/examples/pages/components/QuickNavigationBar.tsx +222 -86
  337. package/examples/pages/components/RadioGroup.tsx +375 -137
  338. package/examples/pages/components/ResizablePanels.tsx +8 -14
  339. package/examples/pages/components/SelectGrid.tsx +79 -38
  340. package/examples/pages/components/SelectWithTemplate.tsx +23 -14
  341. package/examples/pages/components/Selects.tsx +94 -29
  342. package/examples/pages/components/SimpleList.tsx +91 -41
  343. package/examples/pages/components/SubNav.tsx +57 -37
  344. package/examples/pages/components/Switch.tsx +168 -42
  345. package/examples/pages/components/TableList.tsx +220 -66
  346. package/examples/pages/components/Tabs.tsx +149 -64
  347. package/examples/pages/components/TagInputDocs.tsx +73 -17
  348. package/examples/pages/components/Tags.tsx +104 -73
  349. package/examples/pages/components/Text.tsx +108 -58
  350. package/examples/pages/components/TimePicker.tsx +74 -20
  351. package/examples/pages/components/Toasts.tsx +162 -80
  352. package/examples/pages/components/Togglebox.tsx +164 -62
  353. package/examples/pages/components/Tooltips.tsx +27 -15
  354. package/examples/pages/components/TreeMenu.tsx +95 -59
  355. package/examples/pages/components/TreeSelect.tsx +297 -162
  356. package/examples/pages/components/WithPaginationDocs.tsx +15 -16
  357. package/examples/pages/components/WithSizeObserver.tsx +9 -9
  358. package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
  359. package/examples/pages/components/tree-select/example-1.tsx +8 -12
  360. package/examples/pages/components/tree-select/example-2.tsx +2 -5
  361. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
  362. package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
  363. package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
  364. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
  365. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
  366. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
  367. package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
  368. package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
  369. package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
  370. package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
  371. package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
  372. package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
  373. package/examples/pages/design-patterns/Index.tsx +8 -11
  374. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  375. package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
  376. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  377. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  378. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  379. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
  380. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  381. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  382. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  383. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  384. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  385. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  386. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  387. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  388. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  389. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  390. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  391. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  392. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  393. package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  394. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  395. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  396. package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  397. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  398. package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  399. package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  400. package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  401. package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  402. package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  403. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  404. package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  405. package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  406. package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  407. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
  408. package/globals.d.ts +1 -1
  409. package/mocha-setup.ts +3 -3
  410. package/package.json +119 -117
  411. package/react/components/Alert.js +6 -9
  412. package/react/components/Autocomplete.js +15 -23
  413. package/react/components/Badge.js +1 -1
  414. package/react/components/Button.js +4 -6
  415. package/react/components/ButtonGroup.js +1 -1
  416. package/react/components/Carousel.js +3 -3
  417. package/react/components/CheckButtonGroup.js +3 -6
  418. package/react/components/CheckboxButton.js +2 -4
  419. package/react/components/ContentDivider.js +1 -1
  420. package/react/components/DatePicker.js +29 -26
  421. package/react/components/DateTimePicker.d.ts +26 -4
  422. package/react/components/DateTimePicker.js +82 -27
  423. package/react/components/Divider.js +1 -1
  424. package/react/components/DonutChart.js +1 -1
  425. package/react/components/DragHandle.js +1 -1
  426. package/react/components/DragHandleDots.js +1 -1
  427. package/react/components/DropZone.js +6 -8
  428. package/react/components/Dropdown.d.ts +1 -1
  429. package/react/components/Dropdown.js +34 -38
  430. package/react/components/DropdownFirst.d.ts +11 -11
  431. package/react/components/DropdownFirst.js +20 -24
  432. package/react/components/DurationInput.js +37 -34
  433. package/react/components/EmptyState.js +5 -5
  434. package/react/components/Form/FormGroup.js +1 -1
  435. package/react/components/Form/FormItem.js +1 -1
  436. package/react/components/Form/FormRow.js +1 -1
  437. package/react/components/Form/FormRowNew.js +3 -3
  438. package/react/components/Form/FormText.js +1 -1
  439. package/react/components/Form/InputNew.js +3 -3
  440. package/react/components/Form/InputWrapper.js +7 -10
  441. package/react/components/GridItem.d.ts +1 -1
  442. package/react/components/GridItem.js +16 -16
  443. package/react/components/GridList.js +1 -1
  444. package/react/components/HeadingText.js +4 -5
  445. package/react/components/IconLabel.js +3 -5
  446. package/react/components/IconPicker.d.ts +1 -1
  447. package/react/components/IconPicker.js +111 -104
  448. package/react/components/IllustrationButton.js +1 -1
  449. package/react/components/Input.js +1 -1
  450. package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
  451. package/react/components/Layouts/AuthoringContainer.js +1 -1
  452. package/react/components/Layouts/AuthoringFrame.js +4 -4
  453. package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
  454. package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
  455. package/react/components/Layouts/AuthoringFrameMain.js +1 -1
  456. package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
  457. package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
  458. package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
  459. package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
  460. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
  461. package/react/components/Layouts/AuthoringMainContainer.js +1 -1
  462. package/react/components/Layouts/AuthoringMainContent.js +1 -1
  463. package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
  464. package/react/components/Layouts/BottomBarAction.js +2 -2
  465. package/react/components/Layouts/ContentSplitter.js +1 -1
  466. package/react/components/Layouts/CoreLayout.js +2 -2
  467. package/react/components/Layouts/CoreLayoutContainer.js +1 -1
  468. package/react/components/Layouts/CoreLayoutFooter.js +1 -1
  469. package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
  470. package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
  471. package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
  472. package/react/components/Layouts/HamburgerButton.js +1 -1
  473. package/react/components/Layouts/HeaderPanel.js +1 -1
  474. package/react/components/Layouts/Layout.d.ts +1 -1
  475. package/react/components/Layouts/Layout.js +9 -9
  476. package/react/components/Layouts/LayoutContainer.js +1 -1
  477. package/react/components/Layouts/LeftPanel.js +1 -1
  478. package/react/components/Layouts/MainMenu.js +8 -10
  479. package/react/components/Layouts/MainPanel.js +1 -1
  480. package/react/components/Layouts/NotificationPanel.d.ts +1 -1
  481. package/react/components/Layouts/NotificationPanel.js +7 -7
  482. package/react/components/Layouts/OverlayPanel.js +3 -3
  483. package/react/components/Layouts/PageLayout.js +2 -2
  484. package/react/components/Layouts/Panel.d.ts +1 -1
  485. package/react/components/Layouts/Panel.js +12 -18
  486. package/react/components/LeftMenu.d.ts +3 -3
  487. package/react/components/LeftMenu.js +11 -13
  488. package/react/components/Lists/BoxedList.js +6 -6
  489. package/react/components/Lists/CalendarWeekDayItem.js +2 -2
  490. package/react/components/Lists/ContentList.js +24 -26
  491. package/react/components/Lists/TableList.d.ts +1 -1
  492. package/react/components/Lists/TableList.js +59 -79
  493. package/react/components/Loader.js +1 -1
  494. package/react/components/Menu.js +1 -1
  495. package/react/components/Modal.d.ts +1 -1
  496. package/react/components/MultiSelect.d.ts +1 -1
  497. package/react/components/MultiSelect.js +2 -2
  498. package/react/components/NavButton.js +2 -4
  499. package/react/components/Navigation/BottomNav.js +9 -8
  500. package/react/components/Navigation/QuickNavBar.js +17 -20
  501. package/react/components/Navigation/SideBarMenu.js +11 -9
  502. package/react/components/Navigation/SideBarTabs.js +9 -8
  503. package/react/components/Popover.js +1 -1
  504. package/react/components/RadioButtonGroup.js +15 -23
  505. package/react/components/ResizablePanels.js +1 -3
  506. package/react/components/ResizeObserverComponent.js +1 -3
  507. package/react/components/SearchBar.js +14 -16
  508. package/react/components/Select.js +3 -3
  509. package/react/components/SelectGrid.js +15 -20
  510. package/react/components/SelectPreview.js +13 -13
  511. package/react/components/SelectWithTemplate.js +3 -5
  512. package/react/components/ShowPopup.js +7 -10
  513. package/react/components/Skeleton.js +1 -1
  514. package/react/components/SlidingToolbar.js +1 -1
  515. package/react/components/Spinner.js +1 -1
  516. package/react/components/StrechBar.js +1 -1
  517. package/react/components/SubNav.js +1 -1
  518. package/react/components/Switch.js +4 -6
  519. package/react/components/SwitchGroup.js +1 -1
  520. package/react/components/TabCustom.js +6 -4
  521. package/react/components/TabList.js +4 -8
  522. package/react/components/Tag.js +13 -17
  523. package/react/components/TagInput.js +1 -1
  524. package/react/components/Text/Heading.js +6 -6
  525. package/react/components/ThemeSelector.js +1 -1
  526. package/react/components/TimePickerV2.js +17 -17
  527. package/react/components/Toast.js +3 -3
  528. package/react/components/ToastMessage.d.ts +1 -1
  529. package/react/components/ToastMessage.js +1 -1
  530. package/react/components/ToastText.js +5 -8
  531. package/react/components/ToastWrapper.js +3 -5
  532. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
  533. package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
  534. package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
  535. package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
  536. package/react/components/ToggleBox/index.js +3 -3
  537. package/react/components/TreeMenu.d.ts +1 -1
  538. package/react/components/TreeMenu.js +38 -44
  539. package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
  540. package/react/components/TreeSelect/TreeSelect.js +105 -127
  541. package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
  542. package/react/components/TreeSelect/TreeSelectItem.js +10 -13
  543. package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
  544. package/react/components/TreeSelect/TreeSelectPill.js +8 -9
  545. package/react/components/WithPagination.js +18 -21
  546. package/react/components/WithPortal.d.ts +1 -1
  547. package/react/components/WithPortal.js +2 -1
  548. package/react/components/WithSizeObserver.js +1 -3
  549. package/react/components/_Positioner.js +11 -11
  550. package/react/components/avatar/avatar-action-add.js +1 -1
  551. package/react/components/avatar/avatar-group.js +11 -14
  552. package/react/components/avatar/avatar-image.js +6 -4
  553. package/react/components/avatar/avatar-placeholder.js +1 -1
  554. package/react/components/avatar/avatar-wrapper.js +2 -4
  555. package/react/components/avatar/avatar.js +4 -3
  556. package/react/helpers.js +2 -2
  557. package/react/index.d.ts +1 -1
  558. package/tasks/webpack.dev.js +1 -1
  559. package/tasks/webpack.js +5 -5
  560. package/tasks/webpack.prod.js +1 -5
  561. package/tsconfig.json +2 -5
  562. package/tslint.json +6 -12
  563. package/webpack.config.js +2 -5
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
3
  import * as Components from '../playgrounds/react-playgrounds/components/Index';
4
4
 
5
- import { Checkbox, CheckboxButton, CheckGroup, CheckButtonGroup, Alert, Prop, PropsList } from '../../../app-typescript';
5
+ import {Checkbox, CheckboxButton, CheckGroup, CheckButtonGroup, Alert, Prop, PropsList} from '../../../app-typescript';
6
6
 
7
7
  interface IState {
8
8
  value1: boolean;
@@ -19,7 +19,7 @@ interface IState {
19
19
  value12: boolean;
20
20
  value13: boolean;
21
21
  value14: boolean;
22
- value15: boolean;
22
+ value15: boolean;
23
23
  value16: boolean;
24
24
  value17: boolean;
25
25
  value18: boolean;
@@ -109,40 +109,78 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
109
109
  <section className="docs-page__container">
110
110
  <h2 className="docs-page__h2">Checkbox</h2>
111
111
  <p className="docs-page__paragraph"></p>
112
- <Markup.ReactMarkupCodePreview>{`
112
+ <Markup.ReactMarkupCodePreview>
113
+ {`
113
114
  <Checkbox checked={value1} label={{text:'Checkbox label end'}}
114
115
  onChange={(value) => this.setState(() => ({ value1: value }))} />
115
116
  `}
116
117
  </Markup.ReactMarkupCodePreview>
117
118
  <h3 className="docs-page__h3">Basic Checkbox</h3>
118
- <p className="docs-page__paragraph">The label of the checkbox is by default always on the end (right). Although it's not in line with Superdesk design standards the label can also be placed to the start (left), by addind the prop <code>labelSide='start'</code>.</p>
119
+ <p className="docs-page__paragraph">
120
+ The label of the checkbox is by default always on the end (right). Although it's not in line with
121
+ Superdesk design standards the label can also be placed to the start (left), by addind the prop{' '}
122
+ <code>labelSide='start'</code>.
123
+ </p>
119
124
  <Markup.ReactMarkup>
120
125
  <Markup.ReactMarkupPreview>
121
126
  <p className="docs-page__paragraph">// Label on the end/right (default)</p>
122
- <div className='form__row'>
127
+ <div className="form__row">
123
128
  <CheckGroup>
124
- <Checkbox checked={this.state.value1} label={{text:'Checkbox label end'}} onChange={(value) => this.setState(() => ({ value1: value }))} />
125
- <Checkbox checked={this.state.value2} label={{text:'Check me!'}} onChange={(value) => this.setState(() => ({ value2: value }))} />
126
- <Checkbox checked={this.state.value3} label={{text:'Check me too!'}} onChange={(value) => this.setState(() => ({ value3: value }))} />
127
- <Checkbox checked={this.state.value4} label={{text:'I"m disabled :('}} disabled= {true} onChange={(value) => this.setState(() => ({ value4: value }))} />
128
- <Checkbox checked={this.state.value5} label={{text:"I'm disabled and checked :("}} disabled= {true} onChange={(value) => this.setState(() => ({ value5: value }))} />
129
+ <Checkbox
130
+ checked={this.state.value1}
131
+ label={{text: 'Checkbox label end'}}
132
+ onChange={(value) => this.setState(() => ({value1: value}))}
133
+ />
134
+ <Checkbox
135
+ checked={this.state.value2}
136
+ label={{text: 'Check me!'}}
137
+ onChange={(value) => this.setState(() => ({value2: value}))}
138
+ />
139
+ <Checkbox
140
+ checked={this.state.value3}
141
+ label={{text: 'Check me too!'}}
142
+ onChange={(value) => this.setState(() => ({value3: value}))}
143
+ />
144
+ <Checkbox
145
+ checked={this.state.value4}
146
+ label={{text: 'I"m disabled :('}}
147
+ disabled={true}
148
+ onChange={(value) => this.setState(() => ({value4: value}))}
149
+ />
150
+ <Checkbox
151
+ checked={this.state.value5}
152
+ label={{text: "I'm disabled and checked :("}}
153
+ disabled={true}
154
+ onChange={(value) => this.setState(() => ({value5: value}))}
155
+ />
129
156
  </CheckGroup>
130
157
  </div>
131
158
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Label on the start</p>
132
159
  <p className="docs-page__paragraph--small">This option should be avoided in Superdesk.</p>
133
- <div className='form__row'>
160
+ <div className="form__row">
134
161
  <CheckGroup>
135
- <Checkbox checked={this.state.value6} label={{text:'Checkbox label start', side:'start'}} onChange={(value) => this.setState(() => ({ value6: value }))} />
162
+ <Checkbox
163
+ checked={this.state.value6}
164
+ label={{text: 'Checkbox label start', side: 'start'}}
165
+ onChange={(value) => this.setState(() => ({value6: value}))}
166
+ />
136
167
  </CheckGroup>
137
168
  </div>
138
- <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Checkbox with custom values</p>
139
- <div className='form__row'>
169
+ <p className="docs-page__paragraph docs-page__paragraph--topMarginL">
170
+ // Checkbox with custom values
171
+ </p>
172
+ <div className="form__row">
140
173
  <CheckGroup>
141
- <Checkbox checked={this.state.value7} label={{text:'Checkbox with custom values'}} onChange={(value) => this.setState(() => ({ value7: value }))} />
174
+ <Checkbox
175
+ checked={this.state.value7}
176
+ label={{text: 'Checkbox with custom values'}}
177
+ onChange={(value) => this.setState(() => ({value7: value}))}
178
+ />
142
179
  </CheckGroup>
143
180
  </div>
144
181
  </Markup.ReactMarkupPreview>
145
- <Markup.ReactMarkupCode>{`
182
+ <Markup.ReactMarkupCode>
183
+ {`
146
184
  // Label on the end (default)
147
185
  <CheckGroup>
148
186
  <Checkbox checked={value1} label={{text:'Checkbox label end'}}
@@ -173,30 +211,65 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
173
211
  </Markup.ReactMarkup>
174
212
 
175
213
  <Components.GraphicButtonsGroup>
176
- <Components.GraphicButton graphic='design' text='Checkbox usage guidelines' smallText='Design guidelines' link='#/design/checkbox-and-radio' />
214
+ <Components.GraphicButton
215
+ graphic="design"
216
+ text="Checkbox usage guidelines"
217
+ smallText="Design guidelines"
218
+ link="#/design/checkbox-and-radio"
219
+ />
177
220
  </Components.GraphicButtonsGroup>
178
221
  <h3 className="docs-page__h3">Checkbox groups</h3>
179
- <p className="docs-page__paragraph"><code>CheckGroup</code> is a helpful wrapper component used to group <code>Checkbox</code> components. By default the checkboxes are grouped horizontaly. To group them verticaly – in a list-like view – add the prop <code>orientation='vertical'</code> to the <code>CheckGroup</code> component.</p>
222
+ <p className="docs-page__paragraph">
223
+ <code>CheckGroup</code> is a helpful wrapper component used to group <code>Checkbox</code>{' '}
224
+ components. By default the checkboxes are grouped horizontaly. To group them verticaly – in a
225
+ list-like view – add the prop <code>orientation='vertical'</code> to the <code>CheckGroup</code>{' '}
226
+ component.
227
+ </p>
180
228
  <Markup.ReactMarkup>
181
229
  <Markup.ReactMarkupPreview>
182
230
  <p className="docs-page__paragraph">// Horizontal group (default)</p>
183
- <div className='form__group'>
231
+ <div className="form__group">
184
232
  <CheckGroup>
185
- <Checkbox checked={this.state.value16} label={{text:'Checkbox one'}} onChange={(value) => this.setState(() => ({ value16: value }))} />
186
- <Checkbox checked={this.state.value17} label={{text:'Checkbox two'}} onChange={(value) => this.setState(() => ({ value17: value }))} />
187
- <Checkbox checked={this.state.value18} label={{text:'Checkbox three'}} onChange={(value) => this.setState(() => ({ value18: value }))} />
233
+ <Checkbox
234
+ checked={this.state.value16}
235
+ label={{text: 'Checkbox one'}}
236
+ onChange={(value) => this.setState(() => ({value16: value}))}
237
+ />
238
+ <Checkbox
239
+ checked={this.state.value17}
240
+ label={{text: 'Checkbox two'}}
241
+ onChange={(value) => this.setState(() => ({value17: value}))}
242
+ />
243
+ <Checkbox
244
+ checked={this.state.value18}
245
+ label={{text: 'Checkbox three'}}
246
+ onChange={(value) => this.setState(() => ({value18: value}))}
247
+ />
188
248
  </CheckGroup>
189
249
  </div>
190
250
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Vertical group</p>
191
- <div className='form__group'>
192
- <CheckGroup orientation='vertical'>
193
- <Checkbox checked={this.state.value19} label={{text:'Checkbox one'}} onChange={(value) => this.setState(() => ({ value19: value }))} />
194
- <Checkbox checked={this.state.value20} label={{text:'Checkbox two'}} onChange={(value) => this.setState(() => ({ value20: value }))} />
195
- <Checkbox checked={this.state.value21} label={{text:'Checkbox three'}} onChange={(value) => this.setState(() => ({ value21: value }))} />
251
+ <div className="form__group">
252
+ <CheckGroup orientation="vertical">
253
+ <Checkbox
254
+ checked={this.state.value19}
255
+ label={{text: 'Checkbox one'}}
256
+ onChange={(value) => this.setState(() => ({value19: value}))}
257
+ />
258
+ <Checkbox
259
+ checked={this.state.value20}
260
+ label={{text: 'Checkbox two'}}
261
+ onChange={(value) => this.setState(() => ({value20: value}))}
262
+ />
263
+ <Checkbox
264
+ checked={this.state.value21}
265
+ label={{text: 'Checkbox three'}}
266
+ onChange={(value) => this.setState(() => ({value21: value}))}
267
+ />
196
268
  </CheckGroup>
197
269
  </div>
198
270
  </Markup.ReactMarkupPreview>
199
- <Markup.ReactMarkupCode>{`
271
+ <Markup.ReactMarkupCode>
272
+ {`
200
273
  // Horizontal group (default)
201
274
  <CheckGroup>
202
275
  <Checkbox checked={value16} label={{text:'Checkbox one'}}
@@ -221,7 +294,8 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
221
294
  </Markup.ReactMarkup>
222
295
 
223
296
  <h3 className="docs-page__h3">Button style checkbox</h3>
224
- <Markup.ReactMarkupCodePreview>{`
297
+ <Markup.ReactMarkupCodePreview>
298
+ {`
225
299
  <CheckButtonGroup>
226
300
  <CheckboxButton checked={value1} label={{text:'Button Checkbox one'}}
227
301
  onChange={(value) => this.setState(() => ({ value1: value }))} />
@@ -230,47 +304,130 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
230
304
  </CheckButtonGroup>
231
305
  `}
232
306
  </Markup.ReactMarkupCodePreview>
233
- <p className="docs-page__paragraph">The <code>CheckboxButton</code> component shares the same functionality as the Checkbox component but has a different visual appearance. Any icon from the <a className='link' href='#/components/icons' target='blank'>icon font</a> can be added to the component by specifying a value (icon name without the <code>icon-</code> prefix) inside the label prop e.g. <code>label={'{text: "Button style with icon", icon: "th-list"}'}</code> prop.</p>
307
+ <p className="docs-page__paragraph">
308
+ The <code>CheckboxButton</code> component shares the same functionality as the Checkbox component
309
+ but has a different visual appearance. Any icon from the{' '}
310
+ <a className="link" href="#/components/icons" target="blank">
311
+ icon font
312
+ </a>{' '}
313
+ can be added to the component by specifying a value (icon name without the <code>icon-</code>{' '}
314
+ prefix) inside the label prop e.g.{' '}
315
+ <code>label={'{text: "Button style with icon", icon: "th-list"}'}</code> prop.
316
+ </p>
234
317
  <Markup.ReactMarkup>
235
318
  <Markup.ReactMarkupPreview>
236
- <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Button style checkbox</p>
237
- <div className='form__group'>
319
+ <p className="docs-page__paragraph docs-page__paragraph--topMarginL">
320
+ // Button style checkbox
321
+ </p>
322
+ <div className="form__group">
238
323
  <CheckButtonGroup>
239
- <CheckboxButton checked={this.state.value8} label={{text: 'Button style checkbox'}} onChange={(value) => this.setState(() => ({ value8: value }))} />
240
- <CheckboxButton checked={this.state.value9} label={{text: 'Check this out'}} onChange={(value) => this.setState(() => ({ value9: value }))} />
241
- <CheckboxButton checked={this.state.value10} label={{text: 'Check this too!'}} onChange={(value) => this.setState(() => ({ value10: value }))} />
242
- <CheckboxButton checked={this.state.value11} label={{text: "U can't touch this"}} disabled={true} onChange={(value) => this.setState(() => ({ value11: value }))} />
324
+ <CheckboxButton
325
+ checked={this.state.value8}
326
+ label={{text: 'Button style checkbox'}}
327
+ onChange={(value) => this.setState(() => ({value8: value}))}
328
+ />
329
+ <CheckboxButton
330
+ checked={this.state.value9}
331
+ label={{text: 'Check this out'}}
332
+ onChange={(value) => this.setState(() => ({value9: value}))}
333
+ />
334
+ <CheckboxButton
335
+ checked={this.state.value10}
336
+ label={{text: 'Check this too!'}}
337
+ onChange={(value) => this.setState(() => ({value10: value}))}
338
+ />
339
+ <CheckboxButton
340
+ checked={this.state.value11}
341
+ label={{text: "U can't touch this"}}
342
+ disabled={true}
343
+ onChange={(value) => this.setState(() => ({value11: value}))}
344
+ />
243
345
  </CheckButtonGroup>
244
346
  </div>
245
347
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// With label</p>
246
- <div className='form__group'>
247
- <CheckButtonGroup groupLabel='My group label'>
248
- <CheckboxButton checked={this.state.value42} label={{text: 'Button style checkbox'}} onChange={(value) => this.setState(() => ({ value42: value }))} />
249
- <CheckboxButton checked={this.state.value43} label={{text: 'Check this out'}} onChange={(value) => this.setState(() => ({ value43: value }))} />
250
- <CheckboxButton checked={this.state.value44} label={{text: 'Check this too!'}} onChange={(value) => this.setState(() => ({ value44: value }))} />
251
- <CheckboxButton checked={this.state.value45} label={{text: "U can't touch this"}} disabled={true} onChange={(value) => this.setState(() => ({ value45: value }))} />
348
+ <div className="form__group">
349
+ <CheckButtonGroup groupLabel="My group label">
350
+ <CheckboxButton
351
+ checked={this.state.value42}
352
+ label={{text: 'Button style checkbox'}}
353
+ onChange={(value) => this.setState(() => ({value42: value}))}
354
+ />
355
+ <CheckboxButton
356
+ checked={this.state.value43}
357
+ label={{text: 'Check this out'}}
358
+ onChange={(value) => this.setState(() => ({value43: value}))}
359
+ />
360
+ <CheckboxButton
361
+ checked={this.state.value44}
362
+ label={{text: 'Check this too!'}}
363
+ onChange={(value) => this.setState(() => ({value44: value}))}
364
+ />
365
+ <CheckboxButton
366
+ checked={this.state.value45}
367
+ label={{text: "U can't touch this"}}
368
+ disabled={true}
369
+ onChange={(value) => this.setState(() => ({value45: value}))}
370
+ />
252
371
  </CheckButtonGroup>
253
372
  </div>
254
- <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Button style with icon</p>
255
- <div className='form__group'>
373
+ <p className="docs-page__paragraph docs-page__paragraph--topMarginL">
374
+ // Button style with icon
375
+ </p>
376
+ <div className="form__group">
256
377
  <CheckButtonGroup>
257
- <CheckboxButton checked={this.state.value12} label={{text: 'Button style with icon', icon: 'th-list'}} onChange={(value) => this.setState(() => ({ value12: value }))} />
258
- <CheckboxButton checked={this.state.value13} label={{text: 'I have an icon!', icon: 'th'}} onChange={(value) => this.setState(() => ({ value13: value }))} />
259
- <CheckboxButton checked={this.state.value14} label={{text: 'Yeah, me too!', icon: 'th-large'}} onChange={(value) => this.setState(() => ({ value14: value }))} />
260
- <CheckboxButton checked={this.state.value15} label={{text: 'I have an icon :)', icon: 'star'}} onChange={(value) => this.setState(() => ({ value15: value }))} />
378
+ <CheckboxButton
379
+ checked={this.state.value12}
380
+ label={{text: 'Button style with icon', icon: 'th-list'}}
381
+ onChange={(value) => this.setState(() => ({value12: value}))}
382
+ />
383
+ <CheckboxButton
384
+ checked={this.state.value13}
385
+ label={{text: 'I have an icon!', icon: 'th'}}
386
+ onChange={(value) => this.setState(() => ({value13: value}))}
387
+ />
388
+ <CheckboxButton
389
+ checked={this.state.value14}
390
+ label={{text: 'Yeah, me too!', icon: 'th-large'}}
391
+ onChange={(value) => this.setState(() => ({value14: value}))}
392
+ />
393
+ <CheckboxButton
394
+ checked={this.state.value15}
395
+ label={{text: 'I have an icon :)', icon: 'star'}}
396
+ onChange={(value) => this.setState(() => ({value15: value}))}
397
+ />
261
398
  </CheckButtonGroup>
262
399
  </div>
263
- <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Button style with icon only</p>
264
- <div className='form__group'>
400
+ <p className="docs-page__paragraph docs-page__paragraph--topMarginL">
401
+ // Button style with icon only
402
+ </p>
403
+ <div className="form__group">
265
404
  <CheckButtonGroup>
266
- <CheckboxButton checked={this.state.value38} label={{text: 'Button style with hidden text', icon: 'th-list', hidden: true}} onChange={(value) => this.setState(() => ({ value38: value }))} />
267
- <CheckboxButton checked={this.state.value39} label={{text: 'The text is hidden but still accessible', icon: 'th', hidden: true}} onChange={(value) => this.setState(() => ({ value39: value }))} />
268
- <CheckboxButton checked={this.state.value40} label={{text: 'The text is still here', icon: 'th-large', hidden: true}} onChange={(value) => this.setState(() => ({ value40: value }))} />
269
- <CheckboxButton checked={this.state.value41} label={{text: 'Icon, no text ;)', icon: 'star', hidden: true}} disabled={true} onChange={(value) => this.setState(() => ({ value41: value }))} />
405
+ <CheckboxButton
406
+ checked={this.state.value38}
407
+ label={{text: 'Button style with hidden text', icon: 'th-list', hidden: true}}
408
+ onChange={(value) => this.setState(() => ({value38: value}))}
409
+ />
410
+ <CheckboxButton
411
+ checked={this.state.value39}
412
+ label={{text: 'The text is hidden but still accessible', icon: 'th', hidden: true}}
413
+ onChange={(value) => this.setState(() => ({value39: value}))}
414
+ />
415
+ <CheckboxButton
416
+ checked={this.state.value40}
417
+ label={{text: 'The text is still here', icon: 'th-large', hidden: true}}
418
+ onChange={(value) => this.setState(() => ({value40: value}))}
419
+ />
420
+ <CheckboxButton
421
+ checked={this.state.value41}
422
+ label={{text: 'Icon, no text ;)', icon: 'star', hidden: true}}
423
+ disabled={true}
424
+ onChange={(value) => this.setState(() => ({value41: value}))}
425
+ />
270
426
  </CheckButtonGroup>
271
427
  </div>
272
428
  </Markup.ReactMarkupPreview>
273
- <Markup.ReactMarkupCode>{`
429
+ <Markup.ReactMarkupCode>
430
+ {`
274
431
  // Button style checkbox
275
432
  <CheckButtonGroup>
276
433
  <CheckboxButton checked={value8} label={{text: 'Button style checkbox'}}
@@ -322,62 +479,132 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
322
479
  </Markup.ReactMarkupCode>
323
480
  </Markup.ReactMarkup>
324
481
 
325
- <h3 className="docs-page__h3">Button style checkbox Groups</h3>
326
- <p className="docs-page__paragraph"><code>CheckButtonGroup</code> is a helpful wrapper component used to group <code>CheckboxButton</code> components. By default the CheckboxButton components are grouped horizontaly. A few more options are available compared to the <code>CheckGroup</code> component – alignment (start, end and center) and grid layout. </p>
327
- <Alert style='hollow' size='small' type='primary'>
482
+ <h3 className="docs-page__h3">Button style checkbox Groups</h3>
483
+ <p className="docs-page__paragraph">
484
+ <code>CheckButtonGroup</code> is a helpful wrapper component used to group{' '}
485
+ <code>CheckboxButton</code> components. By default the CheckboxButton components are grouped
486
+ horizontaly. A few more options are available compared to the <code>CheckGroup</code> component –
487
+ alignment (start, end and center) and grid layout.{' '}
488
+ </p>
489
+ <Alert style="hollow" size="small" type="primary">
328
490
  NOTE: Alignment will work only in parent elements with display: flex;
329
491
  </Alert>
330
492
  <Markup.ReactMarkup>
331
493
  <Markup.ReactMarkupPreview>
332
494
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Start (default)</p>
333
- <div className='form__row form__row--flex docs-page__test-helper-2'>
495
+ <div className="form__row form__row--flex docs-page__test-helper-2">
334
496
  <CheckButtonGroup>
335
- <CheckboxButton checked={this.state.value22} label={{text: 'Option one'}} onChange={(value) => this.setState(() => ({ value22: value }))} />
336
- <CheckboxButton checked={this.state.value23} label={{text: 'Option two'}} onChange={(value) => this.setState(() => ({ value23: value }))} />
497
+ <CheckboxButton
498
+ checked={this.state.value22}
499
+ label={{text: 'Option one'}}
500
+ onChange={(value) => this.setState(() => ({value22: value}))}
501
+ />
502
+ <CheckboxButton
503
+ checked={this.state.value23}
504
+ label={{text: 'Option two'}}
505
+ onChange={(value) => this.setState(() => ({value23: value}))}
506
+ />
337
507
  </CheckButtonGroup>
338
- </div>
508
+ </div>
339
509
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// End</p>
340
- <div className='form__row form__row--flex docs-page__test-helper-2'>
341
- <CheckButtonGroup align='end' >
342
- <CheckboxButton checked={this.state.value24} label={{text: 'Option one'}} onChange={(value) => this.setState(() => ({ value24: value }))} />
343
- <CheckboxButton checked={this.state.value25} label={{text: 'Option two'}} onChange={(value) => this.setState(() => ({ value25: value }))} />
510
+ <div className="form__row form__row--flex docs-page__test-helper-2">
511
+ <CheckButtonGroup align="end">
512
+ <CheckboxButton
513
+ checked={this.state.value24}
514
+ label={{text: 'Option one'}}
515
+ onChange={(value) => this.setState(() => ({value24: value}))}
516
+ />
517
+ <CheckboxButton
518
+ checked={this.state.value25}
519
+ label={{text: 'Option two'}}
520
+ onChange={(value) => this.setState(() => ({value25: value}))}
521
+ />
344
522
  </CheckButtonGroup>
345
523
  </div>
346
524
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Center</p>
347
- <div className='form__row form__row--flex docs-page__test-helper-2'>
348
- <CheckButtonGroup align='center'>
349
- <CheckboxButton checked={this.state.value26} label={{text: 'Option one'}} onChange={(value) => this.setState(() => ({ value26: value }))} />
350
- <CheckboxButton checked={this.state.value27} label={{text: 'Option two'}} onChange={(value) => this.setState(() => ({ value27: value }))} />
525
+ <div className="form__row form__row--flex docs-page__test-helper-2">
526
+ <CheckButtonGroup align="center">
527
+ <CheckboxButton
528
+ checked={this.state.value26}
529
+ label={{text: 'Option one'}}
530
+ onChange={(value) => this.setState(() => ({value26: value}))}
531
+ />
532
+ <CheckboxButton
533
+ checked={this.state.value27}
534
+ label={{text: 'Option two'}}
535
+ onChange={(value) => this.setState(() => ({value27: value}))}
536
+ />
351
537
  </CheckButtonGroup>
352
538
  </div>
353
539
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Start + Center + End</p>
354
- <div className='form__row form__row--flex docs-page__test-helper-2'>
540
+ <div className="form__row form__row--flex docs-page__test-helper-2">
355
541
  <CheckButtonGroup>
356
- <CheckboxButton checked={this.state.value28} label={{text: 'One'}} onChange={(value) => this.setState(() => ({ value28: value }))} />
357
- <CheckboxButton checked={this.state.value29} label={{text: 'Two'}} onChange={(value) => this.setState(() => ({ value29: value }))} />
542
+ <CheckboxButton
543
+ checked={this.state.value28}
544
+ label={{text: 'One'}}
545
+ onChange={(value) => this.setState(() => ({value28: value}))}
546
+ />
547
+ <CheckboxButton
548
+ checked={this.state.value29}
549
+ label={{text: 'Two'}}
550
+ onChange={(value) => this.setState(() => ({value29: value}))}
551
+ />
358
552
  </CheckButtonGroup>
359
553
 
360
- <CheckButtonGroup align='center'>
361
- <CheckboxButton checked={this.state.value30} label={{text: 'Three'}} onChange={(value) => this.setState(() => ({ value30: value }))} />
362
- <CheckboxButton checked={this.state.value31} label={{text: 'Four'}} onChange={(value) => this.setState(() => ({ value31: value }))} />
554
+ <CheckButtonGroup align="center">
555
+ <CheckboxButton
556
+ checked={this.state.value30}
557
+ label={{text: 'Three'}}
558
+ onChange={(value) => this.setState(() => ({value30: value}))}
559
+ />
560
+ <CheckboxButton
561
+ checked={this.state.value31}
562
+ label={{text: 'Four'}}
563
+ onChange={(value) => this.setState(() => ({value31: value}))}
564
+ />
363
565
  </CheckButtonGroup>
364
566
 
365
- <CheckButtonGroup align='end'>
366
- <CheckboxButton checked={this.state.value32} label={{text: 'Five'}} onChange={(value) => this.setState(() => ({ value32: value }))} />
367
- <CheckboxButton checked={this.state.value33} label={{text: 'Six'}} onChange={(value) => this.setState(() => ({ value33: value }))} />
567
+ <CheckButtonGroup align="end">
568
+ <CheckboxButton
569
+ checked={this.state.value32}
570
+ label={{text: 'Five'}}
571
+ onChange={(value) => this.setState(() => ({value32: value}))}
572
+ />
573
+ <CheckboxButton
574
+ checked={this.state.value33}
575
+ label={{text: 'Six'}}
576
+ onChange={(value) => this.setState(() => ({value33: value}))}
577
+ />
368
578
  </CheckButtonGroup>
369
579
  </div>
370
580
  <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Grid</p>
371
- <div className='form__row form__row--flex docs-page__test-helper-2' style={{width:400}}>
581
+ <div className="form__row form__row--flex docs-page__test-helper-2" style={{width: 400}}>
372
582
  <CheckButtonGroup grid={true}>
373
- <CheckboxButton checked={this.state.value34} label={{text: 'Option one'}} onChange={(value) => this.setState(() => ({ value34: value }))} />
374
- <CheckboxButton checked={this.state.value35} label={{text: 'Option two'}} onChange={(value) => this.setState(() => ({ value35: value }))} />
375
- <CheckboxButton checked={this.state.value36} label={{text: 'Option three'}} onChange={(value) => this.setState(() => ({ value36: value }))} />
376
- <CheckboxButton checked={this.state.value37} label={{text: 'Option four'}} onChange={(value) => this.setState(() => ({ value37: value }))} />
583
+ <CheckboxButton
584
+ checked={this.state.value34}
585
+ label={{text: 'Option one'}}
586
+ onChange={(value) => this.setState(() => ({value34: value}))}
587
+ />
588
+ <CheckboxButton
589
+ checked={this.state.value35}
590
+ label={{text: 'Option two'}}
591
+ onChange={(value) => this.setState(() => ({value35: value}))}
592
+ />
593
+ <CheckboxButton
594
+ checked={this.state.value36}
595
+ label={{text: 'Option three'}}
596
+ onChange={(value) => this.setState(() => ({value36: value}))}
597
+ />
598
+ <CheckboxButton
599
+ checked={this.state.value37}
600
+ label={{text: 'Option four'}}
601
+ onChange={(value) => this.setState(() => ({value37: value}))}
602
+ />
377
603
  </CheckButtonGroup>
378
604
  </div>
379
605
  </Markup.ReactMarkupPreview>
380
- <Markup.ReactMarkupCode>{`
606
+ <Markup.ReactMarkupCode>
607
+ {`
381
608
  // Start (default)
382
609
  <CheckButtonGroup>
383
610
  <CheckboxButton checked={value22} label={{text: 'Option one'}}
@@ -444,33 +671,147 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
444
671
  <h3 className="docs-page__h3">Props</h3>
445
672
  <p className="docs-page__paragraph">Checkbox</p>
446
673
  <PropsList>
447
- <Prop name='checked' isRequired={true} type='boolean' default='false' description='The checked state of the input.'/>
448
- <Prop name='label text' isRequired={true} type='string' default='/' description='Label text value.'/>
449
- <Prop name='label side' isRequired={false} type='start | end' default='end' description='Position of label relative to the button.'/>
450
- <Prop name='label hidden' isRequired={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
451
- <Prop name='disabled' isRequired={false} type='boolean' default='false' description='The disabled state of Checkbox.'/>
452
- <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
453
- <Prop name='groupLabelledBy' isRequired={false} type='string' default='/' description='Aria-labelledby for screen-reader support.'/>
674
+ <Prop
675
+ name="checked"
676
+ isRequired={true}
677
+ type="boolean"
678
+ default="false"
679
+ description="The checked state of the input."
680
+ />
681
+ <Prop
682
+ name="label text"
683
+ isRequired={true}
684
+ type="string"
685
+ default="/"
686
+ description="Label text value."
687
+ />
688
+ <Prop
689
+ name="label side"
690
+ isRequired={false}
691
+ type="start | end"
692
+ default="end"
693
+ description="Position of label relative to the button."
694
+ />
695
+ <Prop
696
+ name="label hidden"
697
+ isRequired={false}
698
+ type="boolean"
699
+ default="false"
700
+ description="Hides visually the label and adds an aria-label for screen-reader support."
701
+ />
702
+ <Prop
703
+ name="disabled"
704
+ isRequired={false}
705
+ type="boolean"
706
+ default="false"
707
+ description="The disabled state of Checkbox."
708
+ />
709
+ <Prop
710
+ name="tabindex"
711
+ isRequired={false}
712
+ type="number"
713
+ default="/"
714
+ description="Indicates an element can be focused on, and determines how that focus is handled."
715
+ />
716
+ <Prop
717
+ name="groupLabelledBy"
718
+ isRequired={false}
719
+ type="string"
720
+ default="/"
721
+ description="Aria-labelledby for screen-reader support."
722
+ />
454
723
  </PropsList>
455
724
  <p className="docs-page__paragraph">Checkbox Button</p>
456
725
  <PropsList>
457
- <Prop name='checked' isRequired={true} type='boolean' default='/' description='The checked state of the input'/>
458
- <Prop name='label text' isRequired={true} type='string' default='/' description='Label text value.'/>
459
- <Prop name='label icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
460
- <Prop name='label hidden' isRequired={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
461
- <Prop name='disabled' isRequired={false} type='boolean' default='false' description='The disabled state of CheckboxButton'/>
462
- <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
726
+ <Prop
727
+ name="checked"
728
+ isRequired={true}
729
+ type="boolean"
730
+ default="/"
731
+ description="The checked state of the input"
732
+ />
733
+ <Prop
734
+ name="label text"
735
+ isRequired={true}
736
+ type="string"
737
+ default="/"
738
+ description="Label text value."
739
+ />
740
+ <Prop
741
+ name="label icon"
742
+ isRequired={false}
743
+ type="string"
744
+ default="/"
745
+ description="Icon class name without the icon- part."
746
+ />
747
+ <Prop
748
+ name="label hidden"
749
+ isRequired={false}
750
+ type="boolean"
751
+ default="false"
752
+ description="Hides visually the label and adds an aria-label for screen-reader support."
753
+ />
754
+ <Prop
755
+ name="disabled"
756
+ isRequired={false}
757
+ type="boolean"
758
+ default="false"
759
+ description="The disabled state of CheckboxButton"
760
+ />
761
+ <Prop
762
+ name="tabindex"
763
+ isRequired={false}
764
+ type="number"
765
+ default="/"
766
+ description="Indicates an element can be focused on, and determines how that focus is handled."
767
+ />
463
768
  </PropsList>
464
769
  <p className="docs-page__paragraph">CheckButtonGroup</p>
465
770
  <PropsList>
466
- <Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='The checked state of the input'/>
467
- <Prop name='grid' isRequired={false} type='boolean' default='/' description='Lays out child elements in an uniform grid list.'/>
468
- <Prop name='align' isRequired={false} type='start | end | center | inline' default='start' description='Alignemnt of the whole group relative to the parent container. Container must be flex for this to work.'/>
469
- <Prop name='padded' isRequired={false} type='boolean' default='/' description='Adds padding on the start and end (left and right) of the group.'/>
470
- <Prop name='groupLabel' isRequired={false} type='string' default='/' description='Label text value.'/>
471
- <Prop name='groupLabelledBy' isRequired={false} type='string' default='/' description='Aria-labelledby for screen-reader support.'/>
771
+ <Prop
772
+ name="orientation"
773
+ isRequired={false}
774
+ type="horizontal | vertical"
775
+ default="horizontal"
776
+ description="The checked state of the input"
777
+ />
778
+ <Prop
779
+ name="grid"
780
+ isRequired={false}
781
+ type="boolean"
782
+ default="/"
783
+ description="Lays out child elements in an uniform grid list."
784
+ />
785
+ <Prop
786
+ name="align"
787
+ isRequired={false}
788
+ type="start | end | center | inline"
789
+ default="start"
790
+ description="Alignemnt of the whole group relative to the parent container. Container must be flex for this to work."
791
+ />
792
+ <Prop
793
+ name="padded"
794
+ isRequired={false}
795
+ type="boolean"
796
+ default="/"
797
+ description="Adds padding on the start and end (left and right) of the group."
798
+ />
799
+ <Prop
800
+ name="groupLabel"
801
+ isRequired={false}
802
+ type="string"
803
+ default="/"
804
+ description="Label text value."
805
+ />
806
+ <Prop
807
+ name="groupLabelledBy"
808
+ isRequired={false}
809
+ type="string"
810
+ default="/"
811
+ description="Aria-labelledby for screen-reader support."
812
+ />
472
813
  </PropsList>
473
814
  </section>
474
- )
815
+ );
475
816
  }
476
817
  }