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
@@ -1,82 +1,94 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
3
 
4
- import { ButtonGroup, Button, IconButton, Tooltip, Alert, Divider, Prop, PropsList} from '../../../app-typescript';
4
+ import {ButtonGroup, Button, IconButton, Tooltip, Alert, Divider, Prop, PropsList} from '../../../app-typescript';
5
5
 
6
6
  export default class ButtonGroupsDoc extends React.Component {
7
7
  render() {
8
8
  return (
9
9
  <section className="docs-page__container">
10
10
  <h2 className="docs-page__h2">Button group</h2>
11
- <Markup.ReactMarkupCodePreview>{`
11
+ <Markup.ReactMarkupCodePreview>
12
+ {`
12
13
  <ButtonGroup align='left'>
13
14
  <Button text='one' style='hollow' onClick={()=> false} />
14
15
  <Button text='two' style='hollow' onClick={()=> false} />
15
16
  </ButtonGroup>
16
17
  `}
17
18
  </Markup.ReactMarkupCodePreview>
18
- <p className="docs-page__paragraph"><code>ButtonGroup</code> is a wrapper component used to group different button components. It supports <code>Button</code>, <code>IconButton</code> and <code>NavButton</code> as children.</p>
19
- <p className="docs-page__paragraph">By default the buttons components are grouped horizontally, to group them vertical add <code>orientation='vertical'</code>. Note that vertical alignment will stretch the buttons to the full width of the container, as it is intended for use in narrower layout modules.</p>
20
- <p className="docs-page__paragraph">Other available options are alignment (left, right and center) and compact mode (less space between buttons).</p>
19
+ <p className="docs-page__paragraph">
20
+ <code>ButtonGroup</code> is a wrapper component used to group different button components. It
21
+ supports <code>Button</code>, <code>IconButton</code> and <code>NavButton</code> as children.
22
+ </p>
23
+ <p className="docs-page__paragraph">
24
+ By default the buttons components are grouped horizontally, to group them vertical add{' '}
25
+ <code>orientation='vertical'</code>. Note that vertical alignment will stretch the buttons to the
26
+ full width of the container, as it is intended for use in narrower layout modules.
27
+ </p>
28
+ <p className="docs-page__paragraph">
29
+ Other available options are alignment (left, right and center) and compact mode (less space between
30
+ buttons).
31
+ </p>
21
32
  <h3 className="docs-page__h3 docs-page__h3--small-top-m ">Horizontal</h3>
22
- <Alert style='hollow' size='small' type='primary'>
33
+ <Alert style="hollow" size="small" type="primary">
23
34
  NOTE: Alignment will work only in parent elements with display: flex;
24
35
  </Alert>
25
36
  <Markup.ReactMarkup>
26
37
  <Markup.ReactMarkupPreview>
27
- <p className="docs-page__paragraph">// Start (left)</p>
28
- <div className="form__row form__row--flex docs-page__test-helper-2">
29
- <ButtonGroup align='start'>
30
- <Button text='one' style='hollow' onClick={()=> false} />
31
- <Button text='two' style='hollow' onClick={()=> false} />
32
- </ButtonGroup>
33
- </div>
34
- <div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
35
- <ButtonGroup align='start'>
36
- <IconButton icon='home' ariaValue='Home' onClick={()=> false} />
37
- <IconButton icon='bell' ariaValue='Notifications' onClick={()=> false} />
38
- <IconButton icon='heart' ariaValue='Favorites' onClick={()=> false} />
39
- </ButtonGroup>
40
- </div>
41
-
42
- <p className="docs-page__paragraph">// End (right)</p>
43
- <div className="form__row form__row--flex docs-page__test-helper-2">
44
- <ButtonGroup align='end'>
45
- <Button text='Cancel' style='hollow' onClick={()=> false} />
46
- <Button text='Save' type='primary' onClick={()=> false} />
47
- </ButtonGroup>
48
- </div>
49
- <div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
50
- <ButtonGroup align='end'>
51
- <IconButton icon='trash' ariaValue='Delete' onClick={()=> false} />
52
- <IconButton icon='pencil' ariaValue='Edit' onClick={()=> false} />
53
- <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
54
- </ButtonGroup>
55
- </div>
56
- <p className="docs-page__paragraph">// Center</p>
57
- <div className="form__row form__row--flex docs-page__test-helper-2">
58
- <ButtonGroup align='center'>
59
- <Button text='one' style='hollow' onClick={()=> false} />
60
- <Button text='two' style='hollow' onClick={()=> false} />
61
- </ButtonGroup>
62
- </div>
63
- <p className="docs-page__paragraph">// Start + Center + End</p>
64
- <div className="form__row form__row--flex docs-page__test-helper-2">
65
- <ButtonGroup align='start'>
66
- <Button text='one' style='hollow' onClick={()=> false} />
67
- <Button text='two' style='hollow' onClick={()=> false} />
68
- </ButtonGroup>
69
- <ButtonGroup align='center'>
70
- <Button text='three' style='hollow' onClick={()=> false} />
71
- <Button text='four' style='hollow' onClick={()=> false} />
72
- </ButtonGroup>
73
- <ButtonGroup align='end'>
74
- <Button text='Cancel' style='hollow' onClick={()=> false} />
75
- <Button text='Save' type='primary' onClick={()=> false} />
76
- </ButtonGroup>
77
- </div>
38
+ <p className="docs-page__paragraph">// Start (left)</p>
39
+ <div className="form__row form__row--flex docs-page__test-helper-2">
40
+ <ButtonGroup align="start">
41
+ <Button text="one" style="hollow" onClick={() => false} />
42
+ <Button text="two" style="hollow" onClick={() => false} />
43
+ </ButtonGroup>
44
+ </div>
45
+ <div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
46
+ <ButtonGroup align="start">
47
+ <IconButton icon="home" ariaValue="Home" onClick={() => false} />
48
+ <IconButton icon="bell" ariaValue="Notifications" onClick={() => false} />
49
+ <IconButton icon="heart" ariaValue="Favorites" onClick={() => false} />
50
+ </ButtonGroup>
51
+ </div>
52
+
53
+ <p className="docs-page__paragraph">// End (right)</p>
54
+ <div className="form__row form__row--flex docs-page__test-helper-2">
55
+ <ButtonGroup align="end">
56
+ <Button text="Cancel" style="hollow" onClick={() => false} />
57
+ <Button text="Save" type="primary" onClick={() => false} />
58
+ </ButtonGroup>
59
+ </div>
60
+ <div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
61
+ <ButtonGroup align="end">
62
+ <IconButton icon="trash" ariaValue="Delete" onClick={() => false} />
63
+ <IconButton icon="pencil" ariaValue="Edit" onClick={() => false} />
64
+ <IconButton icon="close-small" ariaValue="Close" onClick={() => false} />
65
+ </ButtonGroup>
66
+ </div>
67
+ <p className="docs-page__paragraph">// Center</p>
68
+ <div className="form__row form__row--flex docs-page__test-helper-2">
69
+ <ButtonGroup align="center">
70
+ <Button text="one" style="hollow" onClick={() => false} />
71
+ <Button text="two" style="hollow" onClick={() => false} />
72
+ </ButtonGroup>
73
+ </div>
74
+ <p className="docs-page__paragraph">// Start + Center + End</p>
75
+ <div className="form__row form__row--flex docs-page__test-helper-2">
76
+ <ButtonGroup align="start">
77
+ <Button text="one" style="hollow" onClick={() => false} />
78
+ <Button text="two" style="hollow" onClick={() => false} />
79
+ </ButtonGroup>
80
+ <ButtonGroup align="center">
81
+ <Button text="three" style="hollow" onClick={() => false} />
82
+ <Button text="four" style="hollow" onClick={() => false} />
83
+ </ButtonGroup>
84
+ <ButtonGroup align="end">
85
+ <Button text="Cancel" style="hollow" onClick={() => false} />
86
+ <Button text="Save" type="primary" onClick={() => false} />
87
+ </ButtonGroup>
88
+ </div>
78
89
  </Markup.ReactMarkupPreview>
79
- <Markup.ReactMarkupCode>{`
90
+ <Markup.ReactMarkupCode>
91
+ {`
80
92
  // Start (left)
81
93
  <ButtonGroup align='start'>
82
94
  <Button text='one' style='hollow' onClick={()=> false} />
@@ -118,99 +130,143 @@ export default class ButtonGroupsDoc extends React.Component {
118
130
  </Markup.ReactMarkup>
119
131
 
120
132
  <h3 className="docs-page__h3">Vertical</h3>
121
- <p className="docs-page__paragraph">Note that the <code>align</code> prop doesn't work in combination with <code>orientation='vertical'</code>. The vertical orientation will stretch buttons to take the full width of the container. Limit this option only to the <code>Button</code> component in narrow layout modules.</p>
133
+ <p className="docs-page__paragraph">
134
+ Note that the <code>align</code> prop doesn't work in combination with{' '}
135
+ <code>orientation='vertical'</code>. The vertical orientation will stretch buttons to take the full
136
+ width of the container. Limit this option only to the <code>Button</code> component in narrow layout
137
+ modules.
138
+ </p>
122
139
 
123
140
  <Markup.ReactMarkup>
124
141
  <Markup.ReactMarkupPreview>
125
- <div className="form__row form__row--flex docs-page__test-helper-2">
126
- <ButtonGroup orientation='vertical'>
127
- <Button text='one' style='hollow' onClick={()=> false} />
128
- <Button text='two' style='hollow' onClick={()=> false} />
129
- <Button text='three' style='hollow' onClick={()=> false} />
130
- </ButtonGroup>
131
- </div>
142
+ <div className="form__row form__row--flex docs-page__test-helper-2">
143
+ <ButtonGroup orientation="vertical">
144
+ <Button text="one" style="hollow" onClick={() => false} />
145
+ <Button text="two" style="hollow" onClick={() => false} />
146
+ <Button text="three" style="hollow" onClick={() => false} />
147
+ </ButtonGroup>
148
+ </div>
132
149
  </Markup.ReactMarkupPreview>
133
- <Markup.ReactMarkupCode>{`
150
+ <Markup.ReactMarkupCode>
151
+ {`
134
152
  <ButtonGroup orientation='vertical'>
135
153
  <Button text='one' style='hollow' onClick={()=> false} />
136
154
  <Button text='two' style='hollow' onClick={()=> false} />
137
155
  <Button text='three' style='hollow' onClick={()=> false} />
138
156
  </ButtonGroup>
139
- `}
157
+ `}
140
158
  </Markup.ReactMarkupCode>
141
159
  </Markup.ReactMarkup>
142
-
160
+
143
161
  <h3 className="docs-page__h3">Props</h3>
144
162
  <PropsList>
145
- <Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='Specifies orientation for child components of ButtonGroup'/>
146
- <Prop name='spaces' isRequired={false} type='comfort | compact | no-space' default='comfort' description='Space (gap) between buttons: comfort (default), compact and no-space.'/>
147
- <Prop name='align' isRequired={false} type='start | end | center | inline | sub' default='start' description='Alignment in relation to the parent element. Inline value renders the ButtonGroup without pushing surrounding elements.'/>
148
- <Prop name='padded' isRequired={false} type='boolean' default='false' description='Adds predefined space to the side based on alignment and orientation.'/>
149
- <Prop name='subgroup' isRequired={false} type='boolean' default='false' description='For nested ButtonGroups. Set to true for a ButtonGroup nested inside a parent ButtonGroup.'/>
163
+ <Prop
164
+ name="orientation"
165
+ isRequired={false}
166
+ type="horizontal | vertical"
167
+ default="horizontal"
168
+ description="Specifies orientation for child components of ButtonGroup"
169
+ />
170
+ <Prop
171
+ name="spaces"
172
+ isRequired={false}
173
+ type="comfort | compact | no-space"
174
+ default="comfort"
175
+ description="Space (gap) between buttons: comfort (default), compact and no-space."
176
+ />
177
+ <Prop
178
+ name="align"
179
+ isRequired={false}
180
+ type="start | end | center | inline | sub"
181
+ default="start"
182
+ description="Alignment in relation to the parent element. Inline value renders the ButtonGroup without pushing surrounding elements."
183
+ />
184
+ <Prop
185
+ name="padded"
186
+ isRequired={false}
187
+ type="boolean"
188
+ default="false"
189
+ description="Adds predefined space to the side based on alignment and orientation."
190
+ />
191
+ <Prop
192
+ name="subgroup"
193
+ isRequired={false}
194
+ type="boolean"
195
+ default="false"
196
+ description="For nested ButtonGroups. Set to true for a ButtonGroup nested inside a parent ButtonGroup."
197
+ />
150
198
  </PropsList>
151
199
 
152
-
153
200
  <h2 className="docs-page__h2 sd-margin-t--5">Button divider</h2>
154
- <Markup.ReactMarkupCodePreview>{`
201
+ <Markup.ReactMarkupCodePreview>
202
+ {`
155
203
  <Divider size="large" border={true} />
156
204
  `}
157
205
  </Markup.ReactMarkupCodePreview>
158
- <p className="docs-page__paragraph"><code>Divider</code> is a small helper component used to add additional space between <code>Button</code> or <code>IconButton</code> items inside a single <code>ButtonGroup</code>.</p>
159
- <p className="docs-page__paragraph">By default the divider will add only a space specified through the <code>size</code> prop value. For more visual sepparation between items a dotted border can be added just append <code>border={'{true}'}</code> to the component.</p>
206
+ <p className="docs-page__paragraph">
207
+ <code>Divider</code> is a small helper component used to add additional space between{' '}
208
+ <code>Button</code> or <code>IconButton</code> items inside a single <code>ButtonGroup</code>.
209
+ </p>
210
+ <p className="docs-page__paragraph">
211
+ By default the divider will add only a space specified through the <code>size</code> prop value. For
212
+ more visual sepparation between items a dotted border can be added – just append{' '}
213
+ <code>border={'{true}'}</code> to the component.
214
+ </p>
160
215
 
161
216
  <Markup.ReactMarkup>
162
217
  <Markup.ReactMarkupPreview>
163
- <p className="docs-page__paragraph">// Default (small)</p>
164
- <div className="form__row form__row--flex docs-page__test-helper-2">
165
- <ButtonGroup align='start'>
166
- <Button text='one' style='hollow' onClick={()=> false} />
167
- <Button text='two' style='hollow' onClick={()=> false} />
168
- <Divider />
169
- <Button text='three' style='hollow' onClick={()=> false} />
170
- <Button text='four' style='hollow' onClick={()=> false} />
171
- </ButtonGroup>
172
- </div>
218
+ <p className="docs-page__paragraph">// Default (small)</p>
219
+ <div className="form__row form__row--flex docs-page__test-helper-2">
220
+ <ButtonGroup align="start">
221
+ <Button text="one" style="hollow" onClick={() => false} />
222
+ <Button text="two" style="hollow" onClick={() => false} />
223
+ <Divider />
224
+ <Button text="three" style="hollow" onClick={() => false} />
225
+ <Button text="four" style="hollow" onClick={() => false} />
226
+ </ButtonGroup>
227
+ </div>
173
228
 
174
- <p className="docs-page__paragraph">// Small with border</p>
175
- <div className="form__row form__row--flex docs-page__test-helper-2">
176
- <ButtonGroup align='end'>
177
- <Button text='one' style='hollow' onClick={()=> false} />
178
- <Button text='two' style='hollow' onClick={()=> false} />
179
- <Divider border={true} />
180
- <Button text='Cancel' style='hollow' onClick={()=> false} />
181
- <Button text='Save' type='primary' onClick={()=> false} />
182
- </ButtonGroup>
183
- </div>
229
+ <p className="docs-page__paragraph">// Small with border</p>
230
+ <div className="form__row form__row--flex docs-page__test-helper-2">
231
+ <ButtonGroup align="end">
232
+ <Button text="one" style="hollow" onClick={() => false} />
233
+ <Button text="two" style="hollow" onClick={() => false} />
234
+ <Divider border={true} />
235
+ <Button text="Cancel" style="hollow" onClick={() => false} />
236
+ <Button text="Save" type="primary" onClick={() => false} />
237
+ </ButtonGroup>
238
+ </div>
184
239
 
185
- <div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
186
- <ButtonGroup align='center'>
187
- <IconButton icon='undo' ariaValue='Undo' onClick={()=> false} />
188
- <IconButton icon='redo' ariaValue='Redo' onClick={()=> false} />
189
- <IconButton icon='print' ariaValue='Print' onClick={()=> false} />
190
- <Divider border={true} />
191
- <IconButton icon='bold' ariaValue='Bold' onClick={()=> false} />
192
- <IconButton icon='italic' ariaValue='Italic' onClick={()=> false} />
193
- <IconButton icon='underline' ariaValue='Underline' onClick={()=> false} />
194
- <IconButton icon='strikethrough' ariaValue='Strikethrough' onClick={()=> false} />
195
- <Divider border={true} />
196
- <IconButton icon='align-left' ariaValue='Align left' onClick={()=> false} />
197
- <IconButton icon='align-center' ariaValue='Align center' onClick={()=> false} />
198
- <IconButton icon='align-right' ariaValue='Align right' onClick={()=> false} />
199
- </ButtonGroup>
200
- </div>
240
+ <div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
241
+ <ButtonGroup align="center">
242
+ <IconButton icon="undo" ariaValue="Undo" onClick={() => false} />
243
+ <IconButton icon="redo" ariaValue="Redo" onClick={() => false} />
244
+ <IconButton icon="print" ariaValue="Print" onClick={() => false} />
245
+ <Divider border={true} />
246
+ <IconButton icon="bold" ariaValue="Bold" onClick={() => false} />
247
+ <IconButton icon="italic" ariaValue="Italic" onClick={() => false} />
248
+ <IconButton icon="underline" ariaValue="Underline" onClick={() => false} />
249
+ <IconButton icon="strikethrough" ariaValue="Strikethrough" onClick={() => false} />
250
+ <Divider border={true} />
251
+ <IconButton icon="align-left" ariaValue="Align left" onClick={() => false} />
252
+ <IconButton icon="align-center" ariaValue="Align center" onClick={() => false} />
253
+ <IconButton icon="align-right" ariaValue="Align right" onClick={() => false} />
254
+ </ButtonGroup>
255
+ </div>
201
256
 
202
- <p className="docs-page__paragraph">// Medium</p>
203
- <div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
204
- <ButtonGroup align='start'>
205
- <IconButton icon='home' ariaValue='Home' onClick={()=> false} />
206
- <IconButton icon='slideshow' ariaValue='Gallery' onClick={()=> false} />
207
- <Divider size='medium' />
208
- <IconButton icon='bell' ariaValue='Notifications' onClick={()=> false} />
209
- <IconButton icon='heart' ariaValue='Favorites' onClick={()=> false} />
210
- </ButtonGroup>
211
- </div>
257
+ <p className="docs-page__paragraph">// Medium</p>
258
+ <div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
259
+ <ButtonGroup align="start">
260
+ <IconButton icon="home" ariaValue="Home" onClick={() => false} />
261
+ <IconButton icon="slideshow" ariaValue="Gallery" onClick={() => false} />
262
+ <Divider size="medium" />
263
+ <IconButton icon="bell" ariaValue="Notifications" onClick={() => false} />
264
+ <IconButton icon="heart" ariaValue="Favorites" onClick={() => false} />
265
+ </ButtonGroup>
266
+ </div>
212
267
  </Markup.ReactMarkupPreview>
213
- <Markup.ReactMarkupCode>{`
268
+ <Markup.ReactMarkupCode>
269
+ {`
214
270
  // // Default (small)
215
271
  <ButtonGroup align='start'>
216
272
  <Button text='one' style='hollow' onClick={()=> false} />
@@ -257,21 +313,25 @@ export default class ButtonGroupsDoc extends React.Component {
257
313
  </Markup.ReactMarkup>
258
314
 
259
315
  <h3 className="docs-page__h3">Vertical</h3>
260
- <p className="docs-page__paragraph">No additional adjustments are needed for Dividers inside a vertically oriented ButtonGroup, they will adapt automatically.</p>
316
+ <p className="docs-page__paragraph">
317
+ No additional adjustments are needed for Dividers inside a vertically oriented ButtonGroup, they
318
+ will adapt automatically.
319
+ </p>
261
320
 
262
321
  <Markup.ReactMarkup>
263
322
  <Markup.ReactMarkupPreview>
264
- <div className="form__row form__row--flex docs-page__test-helper-2">
265
- <ButtonGroup orientation='vertical'>
266
- <Button text='one' onClick={()=> false} />
267
- <Button text='two' onClick={()=> false} />
268
- <Divider size="medium" border={true} />
269
- <Button text='three' type='primary' onClick={()=> false} />
270
- <Button text='four' type='primary' onClick={()=> false} />
271
- </ButtonGroup>
272
- </div>
323
+ <div className="form__row form__row--flex docs-page__test-helper-2">
324
+ <ButtonGroup orientation="vertical">
325
+ <Button text="one" onClick={() => false} />
326
+ <Button text="two" onClick={() => false} />
327
+ <Divider size="medium" border={true} />
328
+ <Button text="three" type="primary" onClick={() => false} />
329
+ <Button text="four" type="primary" onClick={() => false} />
330
+ </ButtonGroup>
331
+ </div>
273
332
  </Markup.ReactMarkupPreview>
274
- <Markup.ReactMarkupCode>{`
333
+ <Markup.ReactMarkupCode>
334
+ {`
275
335
  <ButtonGroup orientation='vertical'>
276
336
  <Button text='one' onClick={()=> false} />
277
337
  <Button text='two' onClick={()=> false} />
@@ -279,22 +339,28 @@ export default class ButtonGroupsDoc extends React.Component {
279
339
  <Button text='three' type='primary' onClick={()=> false} />
280
340
  <Button text='four' type='primary' onClick={()=> false} />
281
341
  </ButtonGroup>
282
- `}
342
+ `}
283
343
  </Markup.ReactMarkupCode>
284
344
  </Markup.ReactMarkup>
285
-
345
+
286
346
  <h3 className="docs-page__h3">Props</h3>
287
347
  <PropsList>
288
- <Prop name='size' isRequired={false} type='mini | small | medium | large' default='small' description='Specifies the size of the divider (spacing between buttons).'/>
289
- <Prop name='border' isRequired={false} type='boolean' default='false' description='Adds a dotted border in the middle of the divider.'/>
348
+ <Prop
349
+ name="size"
350
+ isRequired={false}
351
+ type="mini | small | medium | large"
352
+ default="small"
353
+ description="Specifies the size of the divider (spacing between buttons)."
354
+ />
355
+ <Prop
356
+ name="border"
357
+ isRequired={false}
358
+ type="boolean"
359
+ default="false"
360
+ description="Adds a dotted border in the middle of the divider."
361
+ />
290
362
  </PropsList>
291
-
292
-
293
-
294
-
295
-
296
363
  </section>
297
-
298
- )
364
+ );
299
365
  }
300
366
  }