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.
- package/.eslintrc.js +0 -1
- package/.eslintrc.json +2 -5
- package/.github/workflows/test.yml +22 -26
- package/.prettierignore +3 -0
- package/.prettierrc.js +9 -0
- package/.travis.yml +4 -4
- package/README.md +14 -1
- package/app/styles/form-elements/_forms-general.scss +0 -4
- package/app-typescript/components/Alert.tsx +12 -16
- package/app-typescript/components/Autocomplete.tsx +53 -42
- package/app-typescript/components/Badge.tsx +1 -1
- package/app-typescript/components/Button.tsx +5 -11
- package/app-typescript/components/ButtonGroup.tsx +15 -10
- package/app-typescript/components/Carousel.tsx +25 -26
- package/app-typescript/components/CheckButtonGroup.tsx +6 -10
- package/app-typescript/components/Checkbox.tsx +16 -10
- package/app-typescript/components/CheckboxButton.tsx +22 -13
- package/app-typescript/components/ContentDivider.tsx +6 -7
- package/app-typescript/components/CreateButton.tsx +8 -6
- package/app-typescript/components/DatePicker.tsx +59 -55
- package/app-typescript/components/DateTimePicker.tsx +175 -117
- package/app-typescript/components/Divider.tsx +2 -4
- package/app-typescript/components/DonutChart.tsx +11 -6
- package/app-typescript/components/DragHandle.tsx +10 -6
- package/app-typescript/components/DragHandleDots.tsx +1 -3
- package/app-typescript/components/DropZone.tsx +27 -25
- package/app-typescript/components/Dropdown.tsx +61 -102
- package/app-typescript/components/DropdownFirst.tsx +57 -69
- package/app-typescript/components/DurationInput.tsx +64 -54
- package/app-typescript/components/Editor/EditorButton.tsx +4 -3
- package/app-typescript/components/EmptyState.tsx +10 -14
- package/app-typescript/components/Form/FormGroup.tsx +9 -16
- package/app-typescript/components/Form/FormItem.tsx +1 -5
- package/app-typescript/components/Form/FormLabel.tsx +0 -1
- package/app-typescript/components/Form/FormRow.tsx +12 -19
- package/app-typescript/components/Form/FormRowNew.tsx +9 -16
- package/app-typescript/components/Form/FormText.tsx +1 -5
- package/app-typescript/components/Form/InputBase.tsx +12 -11
- package/app-typescript/components/Form/InputNew.tsx +11 -12
- package/app-typescript/components/Form/InputWrapper.tsx +9 -18
- package/app-typescript/components/Form/index.tsx +9 -9
- package/app-typescript/components/FormLabel.tsx +1 -5
- package/app-typescript/components/GridItem.tsx +38 -69
- package/app-typescript/components/GridList.tsx +2 -6
- package/app-typescript/components/HeadingText.tsx +4 -5
- package/app-typescript/components/IconButton.tsx +4 -10
- package/app-typescript/components/IconLabel.tsx +5 -5
- package/app-typescript/components/IconPicker.tsx +128 -126
- package/app-typescript/components/IllustrationButton.tsx +2 -8
- package/app-typescript/components/Input.tsx +2 -2
- package/app-typescript/components/Label.tsx +11 -7
- package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
- package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
- package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
- package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
- package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
- package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
- package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
- package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
- package/app-typescript/components/Layouts/Container.tsx +13 -8
- package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
- package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
- package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
- package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
- package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
- package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
- package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
- package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
- package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
- package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
- package/app-typescript/components/Layouts/Layout.tsx +10 -16
- package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
- package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
- package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
- package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
- package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
- package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
- package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
- package/app-typescript/components/Layouts/Panel.tsx +45 -81
- package/app-typescript/components/Layouts/index.tsx +39 -39
- package/app-typescript/components/LeftMenu.tsx +51 -53
- package/app-typescript/components/ListItemLoader.tsx +1 -1
- package/app-typescript/components/Lists/BoxedList.tsx +16 -41
- package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
- package/app-typescript/components/Lists/ContentList.tsx +68 -62
- package/app-typescript/components/Lists/SimpleList.tsx +13 -12
- package/app-typescript/components/Lists/TableList.tsx +169 -217
- package/app-typescript/components/Lists/index.tsx +2 -2
- package/app-typescript/components/Loader.tsx +1 -3
- package/app-typescript/components/Menu.tsx +2 -4
- package/app-typescript/components/Modal.tsx +21 -21
- package/app-typescript/components/MultiSelect.tsx +6 -6
- package/app-typescript/components/NavButton.tsx +10 -8
- package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
- package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
- package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
- package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
- package/app-typescript/components/Navigation/index.tsx +3 -3
- package/app-typescript/components/Popover.tsx +19 -21
- package/app-typescript/components/PropsList.tsx +2 -4
- package/app-typescript/components/RadioButtonGroup.tsx +48 -45
- package/app-typescript/components/RadioGroup.tsx +9 -8
- package/app-typescript/components/ResizablePanels.tsx +2 -3
- package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
- package/app-typescript/components/SearchBar.tsx +53 -45
- package/app-typescript/components/Select.tsx +6 -8
- package/app-typescript/components/SelectGrid.tsx +32 -40
- package/app-typescript/components/SelectPreview.tsx +31 -25
- package/app-typescript/components/SelectWithTemplate.tsx +10 -11
- package/app-typescript/components/ShowPopup.tsx +30 -46
- package/app-typescript/components/SidebarMenu.tsx +19 -18
- package/app-typescript/components/Skeleton.tsx +12 -11
- package/app-typescript/components/SlidingToolbar.tsx +1 -6
- package/app-typescript/components/Spinner.tsx +2 -6
- package/app-typescript/components/StrechBar.tsx +1 -5
- package/app-typescript/components/SubNav.tsx +10 -8
- package/app-typescript/components/SvgIconIllustration.tsx +477 -105
- package/app-typescript/components/Switch.tsx +14 -12
- package/app-typescript/components/SwitchGroup.tsx +10 -10
- package/app-typescript/components/TabCustom.tsx +28 -35
- package/app-typescript/components/TabList.tsx +13 -10
- package/app-typescript/components/Tag.tsx +21 -24
- package/app-typescript/components/TagInput.tsx +4 -11
- package/app-typescript/components/Text/Heading.tsx +21 -41
- package/app-typescript/components/Text/Text.tsx +16 -12
- package/app-typescript/components/Text/Time.tsx +14 -10
- package/app-typescript/components/ThemeSelector.tsx +15 -14
- package/app-typescript/components/TimePicker.tsx +2 -2
- package/app-typescript/components/TimePickerV2.tsx +20 -20
- package/app-typescript/components/Toast.tsx +11 -7
- package/app-typescript/components/ToastMessage.tsx +3 -14
- package/app-typescript/components/ToastText.tsx +30 -32
- package/app-typescript/components/ToastWrapper.tsx +76 -74
- package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
- package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
- package/app-typescript/components/ToggleBox/index.tsx +3 -7
- package/app-typescript/components/Tooltip.tsx +1 -1
- package/app-typescript/components/TreeMenu.tsx +72 -81
- package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
- package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
- package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
- package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
- package/app-typescript/components/WithPagination.tsx +34 -39
- package/app-typescript/components/WithPopover.tsx +0 -1
- package/app-typescript/components/WithPortal.tsx +4 -7
- package/app-typescript/components/WithSizeObserver.tsx +2 -6
- package/app-typescript/components/_Positioner.tsx +26 -26
- package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
- package/app-typescript/components/avatar/avatar-group.tsx +49 -68
- package/app-typescript/components/avatar/avatar-image.tsx +18 -12
- package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
- package/app-typescript/components/avatar/avatar-text.tsx +1 -4
- package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
- package/app-typescript/components/avatar/avatar.tsx +5 -8
- package/app-typescript/components/with-pagination.spec.tsx +8 -27
- package/app-typescript/helpers.tsx +2 -2
- package/app-typescript/index.ts +111 -100
- package/declarations.d.ts +1 -1
- package/dist/components/Alerts.tsx +171 -78
- package/dist/components/Autocomplete.tsx +187 -78
- package/dist/components/Avatar.tsx +52 -112
- package/dist/components/Badges.tsx +111 -67
- package/dist/components/BigIconFont.tsx +29 -17
- package/dist/components/BoxedList.tsx +244 -114
- package/dist/components/ButtonGroups.tsx +213 -147
- package/dist/components/Buttons.tsx +409 -137
- package/dist/components/Card.tsx +6 -7
- package/dist/components/Carousel.tsx +126 -39
- package/dist/components/Checkboxs.tsx +446 -105
- package/dist/components/Container.tsx +95 -48
- package/dist/components/ContentDivider.tsx +110 -63
- package/dist/components/ContentList.tsx +577 -253
- package/dist/components/CreateButton.tsx +71 -21
- package/dist/components/DatePicker.tsx +102 -26
- package/dist/components/DateTimePicker.tsx +46 -10
- package/dist/components/DragHandleDocs.tsx +56 -26
- package/dist/components/DropZone.tsx +67 -29
- package/dist/components/Dropdowns.tsx +220 -131
- package/dist/components/DurationInput.tsx +92 -32
- package/dist/components/EmptyStates.tsx +61 -26
- package/dist/components/GridItem.tsx +190 -91
- package/dist/components/GridList.tsx +37 -17
- package/dist/components/Heading.tsx +81 -35
- package/dist/components/IconButtons.tsx +125 -32
- package/dist/components/IconFont.tsx +24 -12
- package/dist/components/IconLabels.tsx +146 -39
- package/dist/components/IconPicker.tsx +30 -13
- package/dist/components/IllustrationButton.tsx +40 -20
- package/dist/components/Index.tsx +128 -114
- package/dist/components/Inputs.tsx +153 -51
- package/dist/components/Labels.tsx +191 -117
- package/dist/components/LeftNavigations.tsx +327 -100
- package/dist/components/ListItems.tsx +8 -9
- package/dist/components/Loader.tsx +5 -4
- package/dist/components/Menu.tsx +48 -26
- package/dist/components/Modal.tsx +298 -104
- package/dist/components/MultiSelect.tsx +189 -53
- package/dist/components/NavButtons.tsx +86 -30
- package/dist/components/Panel.tsx +367 -120
- package/dist/components/Popover.tsx +37 -17
- package/dist/components/QuickNavigationBar.tsx +222 -86
- package/dist/components/RadioGroup.tsx +375 -137
- package/dist/components/ResizablePanels.tsx +8 -14
- package/dist/components/SelectGrid.tsx +79 -38
- package/dist/components/SelectWithTemplate.tsx +23 -14
- package/dist/components/Selects.tsx +94 -29
- package/dist/components/SimpleList.tsx +91 -41
- package/dist/components/SubNav.tsx +57 -37
- package/dist/components/Switch.tsx +168 -42
- package/dist/components/TableList.tsx +220 -66
- package/dist/components/Tabs.tsx +149 -64
- package/dist/components/TagInputDocs.tsx +73 -17
- package/dist/components/Tags.tsx +104 -73
- package/dist/components/Text.tsx +108 -58
- package/dist/components/TimePicker.tsx +74 -20
- package/dist/components/Toasts.tsx +162 -80
- package/dist/components/Togglebox.tsx +164 -62
- package/dist/components/Tooltips.tsx +27 -15
- package/dist/components/TreeMenu.tsx +95 -59
- package/dist/components/TreeSelect.tsx +297 -162
- package/dist/components/WithPaginationDocs.tsx +15 -16
- package/dist/components/WithSizeObserver.tsx +9 -9
- package/dist/components/tree-select/TreeSelect.tsx +126 -77
- package/dist/components/tree-select/example-1.tsx +8 -12
- package/dist/components/tree-select/example-2.tsx +2 -5
- package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
- package/dist/components/utilities/BorderUtilities.tsx +31 -32
- package/dist/components/utilities/DisplayUtilities.tsx +4 -5
- package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
- package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
- package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
- package/dist/components/utilities/OpacityUtilities.tsx +4 -7
- package/dist/components/utilities/OverflowUtilities.tsx +4 -5
- package/dist/components/utilities/PositionUtilities.tsx +4 -5
- package/dist/components/utilities/ShadowUtilities.tsx +15 -16
- package/dist/components/utilities/SpacingUtilities.tsx +483 -178
- package/dist/components/utilities/TextUtilities.tsx +109 -60
- package/dist/design-patterns/Index.tsx +8 -11
- package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
- package/dist/examples.bundle.css +1257 -1155
- package/dist/examples.bundle.js +6246 -5620
- package/dist/playgrounds/dummy-data/items.ts +9 -8
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
- package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
- package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
- package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
- package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
- package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
- package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
- package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
- package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
- package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
- package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
- package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
- package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
- package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
- package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
- package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
- package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
- package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
- package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
- package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
- package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
- package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
- package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
- package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
- package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
- package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
- package/dist/superdesk-ui.bundle.css +0 -3
- package/dist/superdesk-ui.bundle.js +1791 -1865
- package/dist/vendor.bundle.js +2 -2
- package/examples/css/docs-page.css +1135 -1116
- package/examples/css/reset.css +124 -43
- package/examples/css/vendor.css +125 -125
- package/examples/index.js +138 -139
- package/examples/js/doc.js +41 -40
- package/examples/js/react.js +82 -48
- package/examples/pages/components/Alerts.tsx +171 -78
- package/examples/pages/components/Autocomplete.tsx +187 -78
- package/examples/pages/components/Avatar.tsx +52 -112
- package/examples/pages/components/Badges.tsx +111 -67
- package/examples/pages/components/BigIconFont.tsx +29 -17
- package/examples/pages/components/BoxedList.tsx +244 -114
- package/examples/pages/components/ButtonGroups.tsx +213 -147
- package/examples/pages/components/Buttons.tsx +409 -137
- package/examples/pages/components/Card.tsx +6 -7
- package/examples/pages/components/Carousel.tsx +126 -39
- package/examples/pages/components/Checkboxs.tsx +446 -105
- package/examples/pages/components/Container.tsx +95 -48
- package/examples/pages/components/ContentDivider.tsx +110 -63
- package/examples/pages/components/ContentList.tsx +577 -253
- package/examples/pages/components/CreateButton.tsx +71 -21
- package/examples/pages/components/DatePicker.tsx +102 -26
- package/examples/pages/components/DateTimePicker.tsx +46 -10
- package/examples/pages/components/DragHandleDocs.tsx +56 -26
- package/examples/pages/components/DropZone.tsx +67 -29
- package/examples/pages/components/Dropdowns.tsx +220 -131
- package/examples/pages/components/DurationInput.tsx +92 -32
- package/examples/pages/components/EmptyStates.tsx +61 -26
- package/examples/pages/components/GridItem.tsx +190 -91
- package/examples/pages/components/GridList.tsx +37 -17
- package/examples/pages/components/Heading.tsx +81 -35
- package/examples/pages/components/IconButtons.tsx +125 -32
- package/examples/pages/components/IconFont.tsx +24 -12
- package/examples/pages/components/IconLabels.tsx +146 -39
- package/examples/pages/components/IconPicker.tsx +30 -13
- package/examples/pages/components/IllustrationButton.tsx +40 -20
- package/examples/pages/components/Index.tsx +128 -114
- package/examples/pages/components/Inputs.tsx +153 -51
- package/examples/pages/components/Labels.tsx +191 -117
- package/examples/pages/components/LeftNavigations.tsx +327 -100
- package/examples/pages/components/ListItems.tsx +8 -9
- package/examples/pages/components/Loader.tsx +5 -4
- package/examples/pages/components/Menu.tsx +48 -26
- package/examples/pages/components/Modal.tsx +298 -104
- package/examples/pages/components/MultiSelect.tsx +189 -53
- package/examples/pages/components/NavButtons.tsx +86 -30
- package/examples/pages/components/Panel.tsx +367 -120
- package/examples/pages/components/Popover.tsx +37 -17
- package/examples/pages/components/QuickNavigationBar.tsx +222 -86
- package/examples/pages/components/RadioGroup.tsx +375 -137
- package/examples/pages/components/ResizablePanels.tsx +8 -14
- package/examples/pages/components/SelectGrid.tsx +79 -38
- package/examples/pages/components/SelectWithTemplate.tsx +23 -14
- package/examples/pages/components/Selects.tsx +94 -29
- package/examples/pages/components/SimpleList.tsx +91 -41
- package/examples/pages/components/SubNav.tsx +57 -37
- package/examples/pages/components/Switch.tsx +168 -42
- package/examples/pages/components/TableList.tsx +220 -66
- package/examples/pages/components/Tabs.tsx +149 -64
- package/examples/pages/components/TagInputDocs.tsx +73 -17
- package/examples/pages/components/Tags.tsx +104 -73
- package/examples/pages/components/Text.tsx +108 -58
- package/examples/pages/components/TimePicker.tsx +74 -20
- package/examples/pages/components/Toasts.tsx +162 -80
- package/examples/pages/components/Togglebox.tsx +164 -62
- package/examples/pages/components/Tooltips.tsx +27 -15
- package/examples/pages/components/TreeMenu.tsx +95 -59
- package/examples/pages/components/TreeSelect.tsx +297 -162
- package/examples/pages/components/WithPaginationDocs.tsx +15 -16
- package/examples/pages/components/WithSizeObserver.tsx +9 -9
- package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
- package/examples/pages/components/tree-select/example-1.tsx +8 -12
- package/examples/pages/components/tree-select/example-2.tsx +2 -5
- package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
- package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
- package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
- package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
- package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
- package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
- package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
- package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
- package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
- package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
- package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
- package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
- package/examples/pages/design-patterns/Index.tsx +8 -11
- package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
- package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
- package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
- package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
- package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
- package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
- package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
- package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
- package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
- package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
- package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
- package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
- package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
- package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
- package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
- package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
- package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
- package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
- package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
- package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
- package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
- package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
- package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
- package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
- package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
- package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
- package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
- package/globals.d.ts +1 -1
- package/mocha-setup.ts +3 -3
- package/package.json +119 -117
- package/react/components/Alert.js +6 -9
- package/react/components/Autocomplete.js +15 -23
- package/react/components/Badge.js +1 -1
- package/react/components/Button.js +4 -6
- package/react/components/ButtonGroup.js +1 -1
- package/react/components/Carousel.js +3 -3
- package/react/components/CheckButtonGroup.js +3 -6
- package/react/components/CheckboxButton.js +2 -4
- package/react/components/ContentDivider.js +1 -1
- package/react/components/DatePicker.js +29 -26
- package/react/components/DateTimePicker.d.ts +26 -4
- package/react/components/DateTimePicker.js +82 -27
- package/react/components/Divider.js +1 -1
- package/react/components/DonutChart.js +1 -1
- package/react/components/DragHandle.js +1 -1
- package/react/components/DragHandleDots.js +1 -1
- package/react/components/DropZone.js +6 -8
- package/react/components/Dropdown.d.ts +1 -1
- package/react/components/Dropdown.js +34 -38
- package/react/components/DropdownFirst.d.ts +11 -11
- package/react/components/DropdownFirst.js +20 -24
- package/react/components/DurationInput.js +37 -34
- package/react/components/EmptyState.js +5 -5
- package/react/components/Form/FormGroup.js +1 -1
- package/react/components/Form/FormItem.js +1 -1
- package/react/components/Form/FormRow.js +1 -1
- package/react/components/Form/FormRowNew.js +3 -3
- package/react/components/Form/FormText.js +1 -1
- package/react/components/Form/InputNew.js +3 -3
- package/react/components/Form/InputWrapper.js +7 -10
- package/react/components/GridItem.d.ts +1 -1
- package/react/components/GridItem.js +16 -16
- package/react/components/GridList.js +1 -1
- package/react/components/HeadingText.js +4 -5
- package/react/components/IconLabel.js +3 -5
- package/react/components/IconPicker.d.ts +1 -1
- package/react/components/IconPicker.js +111 -104
- package/react/components/IllustrationButton.js +1 -1
- package/react/components/Input.js +1 -1
- package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
- package/react/components/Layouts/AuthoringContainer.js +1 -1
- package/react/components/Layouts/AuthoringFrame.js +4 -4
- package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
- package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
- package/react/components/Layouts/AuthoringFrameMain.js +1 -1
- package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
- package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
- package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
- package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
- package/react/components/Layouts/AuthoringMainContainer.js +1 -1
- package/react/components/Layouts/AuthoringMainContent.js +1 -1
- package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
- package/react/components/Layouts/BottomBarAction.js +2 -2
- package/react/components/Layouts/ContentSplitter.js +1 -1
- package/react/components/Layouts/CoreLayout.js +2 -2
- package/react/components/Layouts/CoreLayoutContainer.js +1 -1
- package/react/components/Layouts/CoreLayoutFooter.js +1 -1
- package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
- package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
- package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
- package/react/components/Layouts/HamburgerButton.js +1 -1
- package/react/components/Layouts/HeaderPanel.js +1 -1
- package/react/components/Layouts/Layout.d.ts +1 -1
- package/react/components/Layouts/Layout.js +9 -9
- package/react/components/Layouts/LayoutContainer.js +1 -1
- package/react/components/Layouts/LeftPanel.js +1 -1
- package/react/components/Layouts/MainMenu.js +8 -10
- package/react/components/Layouts/MainPanel.js +1 -1
- package/react/components/Layouts/NotificationPanel.d.ts +1 -1
- package/react/components/Layouts/NotificationPanel.js +7 -7
- package/react/components/Layouts/OverlayPanel.js +3 -3
- package/react/components/Layouts/PageLayout.js +2 -2
- package/react/components/Layouts/Panel.d.ts +1 -1
- package/react/components/Layouts/Panel.js +12 -18
- package/react/components/LeftMenu.d.ts +3 -3
- package/react/components/LeftMenu.js +11 -13
- package/react/components/Lists/BoxedList.js +6 -6
- package/react/components/Lists/CalendarWeekDayItem.js +2 -2
- package/react/components/Lists/ContentList.js +24 -26
- package/react/components/Lists/TableList.d.ts +1 -1
- package/react/components/Lists/TableList.js +59 -79
- package/react/components/Loader.js +1 -1
- package/react/components/Menu.js +1 -1
- package/react/components/Modal.d.ts +1 -1
- package/react/components/MultiSelect.d.ts +1 -1
- package/react/components/MultiSelect.js +2 -2
- package/react/components/NavButton.js +2 -4
- package/react/components/Navigation/BottomNav.js +9 -8
- package/react/components/Navigation/QuickNavBar.js +17 -20
- package/react/components/Navigation/SideBarMenu.js +11 -9
- package/react/components/Navigation/SideBarTabs.js +9 -8
- package/react/components/Popover.js +1 -1
- package/react/components/RadioButtonGroup.js +15 -23
- package/react/components/ResizablePanels.js +1 -3
- package/react/components/ResizeObserverComponent.js +1 -3
- package/react/components/SearchBar.js +14 -16
- package/react/components/Select.js +3 -3
- package/react/components/SelectGrid.js +15 -20
- package/react/components/SelectPreview.js +13 -13
- package/react/components/SelectWithTemplate.js +3 -5
- package/react/components/ShowPopup.js +7 -10
- package/react/components/Skeleton.js +1 -1
- package/react/components/SlidingToolbar.js +1 -1
- package/react/components/Spinner.js +1 -1
- package/react/components/StrechBar.js +1 -1
- package/react/components/SubNav.js +1 -1
- package/react/components/Switch.js +4 -6
- package/react/components/SwitchGroup.js +1 -1
- package/react/components/TabCustom.js +6 -4
- package/react/components/TabList.js +4 -8
- package/react/components/Tag.js +13 -17
- package/react/components/TagInput.js +1 -1
- package/react/components/Text/Heading.js +6 -6
- package/react/components/ThemeSelector.js +1 -1
- package/react/components/TimePickerV2.js +17 -17
- package/react/components/Toast.js +3 -3
- package/react/components/ToastMessage.d.ts +1 -1
- package/react/components/ToastMessage.js +1 -1
- package/react/components/ToastText.js +5 -8
- package/react/components/ToastWrapper.js +3 -5
- package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
- package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
- package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
- package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
- package/react/components/ToggleBox/index.js +3 -3
- package/react/components/TreeMenu.d.ts +1 -1
- package/react/components/TreeMenu.js +38 -44
- package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
- package/react/components/TreeSelect/TreeSelect.js +105 -127
- package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
- package/react/components/TreeSelect/TreeSelectItem.js +10 -13
- package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
- package/react/components/TreeSelect/TreeSelectPill.js +8 -9
- package/react/components/WithPagination.js +18 -21
- package/react/components/WithPortal.d.ts +1 -1
- package/react/components/WithPortal.js +2 -1
- package/react/components/WithSizeObserver.js +1 -3
- package/react/components/_Positioner.js +11 -11
- package/react/components/avatar/avatar-action-add.js +1 -1
- package/react/components/avatar/avatar-group.js +11 -14
- package/react/components/avatar/avatar-image.js +6 -4
- package/react/components/avatar/avatar-placeholder.js +1 -1
- package/react/components/avatar/avatar-wrapper.js +2 -4
- package/react/components/avatar/avatar.js +4 -3
- package/react/helpers.js +2 -2
- package/react/index.d.ts +1 -1
- package/tasks/webpack.dev.js +1 -1
- package/tasks/webpack.js +5 -5
- package/tasks/webpack.prod.js +1 -5
- package/tsconfig.json +2 -5
- package/tslint.json +6 -12
- package/webpack.config.js +2 -5
@@ -6,12 +6,10 @@ class BorderUtilitiesDoc extends React.Component {
|
|
6
6
|
return (
|
7
7
|
<section className="docs-page__container">
|
8
8
|
<h2 className="docs-page__h2">Border</h2>
|
9
|
-
<p className="docs-page__paragraph">
|
10
|
-
|
11
|
-
</p>
|
12
|
-
<div className='docs-page__container-block--border'>
|
9
|
+
<p className="docs-page__paragraph">Utility classes for controlling the borders of an element..</p>
|
10
|
+
<div className="docs-page__container-block--border">
|
13
11
|
<h3 className="docs-page__h3">Basic Border with neutral color</h3>
|
14
|
-
<p className=
|
12
|
+
<p className="docs-page__paragraph">
|
15
13
|
Utilities classes for adding a neutral 1px solid border to an element.
|
16
14
|
</p>
|
17
15
|
<div className="utilities-table__container">
|
@@ -27,32 +25,41 @@ class BorderUtilitiesDoc extends React.Component {
|
|
27
25
|
<tr>
|
28
26
|
<td>sd-border--x-light</td>
|
29
27
|
<td>{'border: 1px solid var(--sd-colour-line--x-light);'}</td>
|
30
|
-
<td
|
28
|
+
<td>
|
29
|
+
<div className="border-example-box sd-border--x-light"></div>
|
30
|
+
</td>
|
31
31
|
</tr>
|
32
32
|
<tr>
|
33
33
|
<td>sd-border--light</td>
|
34
34
|
<td>{'border: 1px solid var(--sd-colour-line--light);'}</td>
|
35
|
-
<td
|
35
|
+
<td>
|
36
|
+
<div className="border-example-box sd-border--light"></div>
|
37
|
+
</td>
|
36
38
|
</tr>
|
37
39
|
<tr>
|
38
40
|
<td>sd-border--medium</td>
|
39
41
|
<td>{'border: 1px solid var(--sd-colour-line--medium);'}</td>
|
40
|
-
<td
|
42
|
+
<td>
|
43
|
+
<div className="border-example-box sd-border--medium"></div>
|
44
|
+
</td>
|
41
45
|
</tr>
|
42
46
|
<tr>
|
43
47
|
<td>sd-border--strong</td>
|
44
48
|
<td>{'border: 1px solid var(--sd-colour-line--strong);'}</td>
|
45
|
-
<td
|
49
|
+
<td>
|
50
|
+
<div className="border-example-box sd-border--strong"></div>
|
51
|
+
</td>
|
46
52
|
</tr>
|
47
53
|
</tbody>
|
48
54
|
</table>
|
49
55
|
</div>
|
50
56
|
</div>
|
51
57
|
|
52
|
-
<div className=
|
58
|
+
<div className="docs-page__container-block--border-width">
|
53
59
|
<h3 className="docs-page__h3">Border Width</h3>
|
54
|
-
<p className=
|
55
|
-
Utilities classes for overriding the border width of an element. Options are limited to common
|
60
|
+
<p className="docs-page__paragraph">
|
61
|
+
Utilities classes for overriding the border width of an element. Options are limited to common
|
62
|
+
use cases.
|
56
63
|
</p>
|
57
64
|
<div className="utilities-table__container utilities-table__container--no-height">
|
58
65
|
<table className="table utilities-table">
|
@@ -86,50 +93,43 @@ class BorderUtilitiesDoc extends React.Component {
|
|
86
93
|
<tr>
|
87
94
|
<td>border-x-0</td>
|
88
95
|
<td>
|
89
|
-
{'border-inline-start-width: 0px;'}
|
96
|
+
{'border-inline-start-width: 0px;'}
|
97
|
+
<br />
|
90
98
|
{'border-inline-end-width: 0px;'}
|
91
|
-
|
92
99
|
</td>
|
93
100
|
</tr>
|
94
101
|
<tr>
|
95
102
|
<td>border-y-0</td>
|
96
103
|
<td>
|
97
|
-
{'border-block-start-width: 0px;'}
|
104
|
+
{'border-block-start-width: 0px;'}
|
105
|
+
<br />
|
98
106
|
{'border-block-end-width: 0px;'}
|
99
107
|
</td>
|
100
108
|
</tr>
|
101
109
|
<tr>
|
102
110
|
<td>border-s-0</td>
|
103
|
-
<td>
|
104
|
-
{'border-inline-start-width: 0px;'}
|
105
|
-
</td>
|
111
|
+
<td>{'border-inline-start-width: 0px;'}</td>
|
106
112
|
</tr>
|
107
113
|
<tr>
|
108
114
|
<td>border-e-0</td>
|
109
|
-
<td>
|
110
|
-
{'border-inline-end-width: 0px;'}
|
111
|
-
</td>
|
115
|
+
<td>{'border-inline-end-width: 0px;'}</td>
|
112
116
|
</tr>
|
113
117
|
<tr>
|
114
118
|
<td>border-t-0</td>
|
115
|
-
<td>
|
116
|
-
{'border-top: 0px;'}
|
117
|
-
</td>
|
119
|
+
<td>{'border-top: 0px;'}</td>
|
118
120
|
</tr>
|
119
121
|
<tr>
|
120
122
|
<td>border-b-0</td>
|
121
|
-
<td>
|
122
|
-
{'border-bottom: 0px;'}
|
123
|
-
</td>
|
123
|
+
<td>{'border-bottom: 0px;'}</td>
|
124
124
|
</tr>
|
125
125
|
</tbody>
|
126
126
|
</table>
|
127
127
|
</div>
|
128
128
|
</div>
|
129
129
|
|
130
|
-
<div className=
|
130
|
+
<div className="docs-page__container-block--border-style">
|
131
131
|
<h3 className="docs-page__h3">Border Style</h3>
|
132
|
-
<p className=
|
132
|
+
<p className="docs-page__paragraph">
|
133
133
|
Utilities classes for overriding the border style of an element.
|
134
134
|
</p>
|
135
135
|
<div className="utilities-table__container utilities-table__container--no-height">
|
@@ -161,10 +161,9 @@ class BorderUtilitiesDoc extends React.Component {
|
|
161
161
|
</table>
|
162
162
|
</div>
|
163
163
|
</div>
|
164
|
-
|
165
164
|
</section>
|
166
|
-
)
|
165
|
+
);
|
167
166
|
}
|
168
167
|
}
|
169
168
|
|
170
|
-
export {
|
169
|
+
export {BorderUtilitiesDoc};
|
@@ -7,9 +7,9 @@ class DisplayUtilitiesDoc extends React.Component {
|
|
7
7
|
<section className="docs-page__container">
|
8
8
|
<h2 className="docs-page__h2">Display</h2>
|
9
9
|
<p className="docs-page__paragraph">
|
10
|
-
|
10
|
+
Utility classes for controlling the display box type of an element.
|
11
11
|
</p>
|
12
|
-
<div className=
|
12
|
+
<div className="docs-page__container-block--display">
|
13
13
|
<div className="utilities-table__container utilities-table__container--no-height">
|
14
14
|
<table className="table utilities-table">
|
15
15
|
<thead>
|
@@ -107,10 +107,9 @@ class DisplayUtilitiesDoc extends React.Component {
|
|
107
107
|
</table>
|
108
108
|
</div>
|
109
109
|
</div>
|
110
|
-
|
111
110
|
</section>
|
112
|
-
)
|
111
|
+
);
|
113
112
|
}
|
114
113
|
}
|
115
114
|
|
116
|
-
export {
|
115
|
+
export {DisplayUtilitiesDoc};
|
@@ -7,9 +7,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
7
7
|
<section className="docs-page__container">
|
8
8
|
<h2 className="docs-page__h2">Flex & Grid</h2>
|
9
9
|
|
10
|
-
<div className=
|
10
|
+
<div className="docs-page__container-block--flex-direction">
|
11
11
|
<h3 className="docs-page__h3">Flex Direction</h3>
|
12
|
-
<p className=
|
12
|
+
<p className="docs-page__paragraph">
|
13
13
|
Utilities classes for controlling the direction of flex items.
|
14
14
|
</p>
|
15
15
|
<div className="utilities-table__container">
|
@@ -37,17 +37,14 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
37
37
|
<td>flex-col-reverse</td>
|
38
38
|
<td>{'flex-direction: column-reverse !important;'}</td>
|
39
39
|
</tr>
|
40
|
-
|
41
40
|
</tbody>
|
42
41
|
</table>
|
43
42
|
</div>
|
44
43
|
</div>
|
45
44
|
|
46
|
-
<div className=
|
45
|
+
<div className="docs-page__container-block--flex-wrap">
|
47
46
|
<h3 className="docs-page__h3">Flex Wrap</h3>
|
48
|
-
<p className=
|
49
|
-
Utilities classes for controlling how flex items wrap.
|
50
|
-
</p>
|
47
|
+
<p className="docs-page__paragraph">Utilities classes for controlling how flex items wrap.</p>
|
51
48
|
<div className="utilities-table__container">
|
52
49
|
<table className="table utilities-table">
|
53
50
|
<thead>
|
@@ -74,9 +71,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
74
71
|
</div>
|
75
72
|
</div>
|
76
73
|
|
77
|
-
<div className=
|
74
|
+
<div className="docs-page__container-block--flex">
|
78
75
|
<h3 className="docs-page__h3">Flex</h3>
|
79
|
-
<p className=
|
76
|
+
<p className="docs-page__paragraph">
|
80
77
|
Utilities classes for controlling how flex items both grow and shrink.
|
81
78
|
</p>
|
82
79
|
<div className="utilities-table__container">
|
@@ -109,9 +106,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
109
106
|
</div>
|
110
107
|
</div>
|
111
108
|
|
112
|
-
<div className=
|
109
|
+
<div className="docs-page__container-block--flex-grow-shrink">
|
113
110
|
<h3 className="docs-page__h3">Flex Grow & Flex Shrink</h3>
|
114
|
-
<p className=
|
111
|
+
<p className="docs-page__paragraph">
|
115
112
|
Utilities classes for controlling how flex items individually grow or shrink.
|
116
113
|
</p>
|
117
114
|
<div className="utilities-table__container">
|
@@ -123,7 +120,7 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
123
120
|
</tr>
|
124
121
|
</thead>
|
125
122
|
<tbody>
|
126
|
-
<tr className=
|
123
|
+
<tr className="utilities-table__divider-row">
|
127
124
|
<td>Flex grow</td>
|
128
125
|
<td></td>
|
129
126
|
</tr>
|
@@ -135,7 +132,7 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
135
132
|
<td>flex-grow-0</td>
|
136
133
|
<td>{'flex-grow: 0 !important;'}</td>
|
137
134
|
</tr>
|
138
|
-
<tr className=
|
135
|
+
<tr className="utilities-table__divider-row">
|
139
136
|
<td>Flex shrink</td>
|
140
137
|
<td></td>
|
141
138
|
</tr>
|
@@ -152,10 +149,11 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
152
149
|
</div>
|
153
150
|
</div>
|
154
151
|
|
155
|
-
<div className=
|
152
|
+
<div className="docs-page__container-block--flex-grow-shrink">
|
156
153
|
<h3 className="docs-page__h3">Justify Content</h3>
|
157
|
-
<p className=
|
158
|
-
Utilities classes for controlling how flex and grid items are positioned along a container's
|
154
|
+
<p className="docs-page__paragraph">
|
155
|
+
Utilities classes for controlling how flex and grid items are positioned along a container's
|
156
|
+
main axis.
|
159
157
|
</p>
|
160
158
|
<div className="utilities-table__container">
|
161
159
|
<table className="table utilities-table">
|
@@ -203,9 +201,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
203
201
|
</div>
|
204
202
|
</div>
|
205
203
|
|
206
|
-
<div className=
|
204
|
+
<div className="docs-page__container-block--justify-items">
|
207
205
|
<h3 className="docs-page__h3">Justify Items</h3>
|
208
|
-
<p className=
|
206
|
+
<p className="docs-page__paragraph">
|
209
207
|
Utilities classes for controlling how grid items are aligned along their inline axis.
|
210
208
|
</p>
|
211
209
|
<div className="utilities-table__container">
|
@@ -238,9 +236,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
238
236
|
</div>
|
239
237
|
</div>
|
240
238
|
|
241
|
-
<div className=
|
239
|
+
<div className="docs-page__container-block--justify-self">
|
242
240
|
<h3 className="docs-page__h3">Justify Self</h3>
|
243
|
-
<p className=
|
241
|
+
<p className="docs-page__paragraph">
|
244
242
|
Utilities classes for controlling how an individual grid item is aligned along its inline axis.
|
245
243
|
</p>
|
246
244
|
<div className="utilities-table__container">
|
@@ -277,9 +275,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
277
275
|
</div>
|
278
276
|
</div>
|
279
277
|
|
280
|
-
<div className=
|
278
|
+
<div className="docs-page__container-block--align-content">
|
281
279
|
<h3 className="docs-page__h3">Align Content</h3>
|
282
|
-
<p className=
|
280
|
+
<p className="docs-page__paragraph">
|
283
281
|
Utilities classes for controlling how rows are positioned in multi-row flex and grid containers.
|
284
282
|
</p>
|
285
283
|
<div className="utilities-table__container utilities-table__container--no-height">
|
@@ -332,10 +330,11 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
332
330
|
</div>
|
333
331
|
</div>
|
334
332
|
|
335
|
-
<div className=
|
333
|
+
<div className="docs-page__container-block--align-items">
|
336
334
|
<h3 className="docs-page__h3">Align Items</h3>
|
337
|
-
<p className=
|
338
|
-
Utilities classes for controlling how flex and grid items are positioned along a container's
|
335
|
+
<p className="docs-page__paragraph">
|
336
|
+
Utilities classes for controlling how flex and grid items are positioned along a container's
|
337
|
+
cross axis.
|
339
338
|
</p>
|
340
339
|
<div className="utilities-table__container">
|
341
340
|
<table className="table utilities-table">
|
@@ -371,10 +370,11 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
371
370
|
</div>
|
372
371
|
</div>
|
373
372
|
|
374
|
-
<div className=
|
373
|
+
<div className="docs-page__container-block--align-self">
|
375
374
|
<h3 className="docs-page__h3">Align Self</h3>
|
376
|
-
<p className=
|
377
|
-
Utilities classes for controlling how an individual flex or grid item is positioned along its
|
375
|
+
<p className="docs-page__paragraph">
|
376
|
+
Utilities classes for controlling how an individual flex or grid item is positioned along its
|
377
|
+
container's cross axis.
|
378
378
|
</p>
|
379
379
|
<div className="utilities-table__container">
|
380
380
|
<table className="table utilities-table">
|
@@ -414,9 +414,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
414
414
|
</div>
|
415
415
|
</div>
|
416
416
|
|
417
|
-
<div className=
|
417
|
+
<div className="docs-page__container-block--place-content">
|
418
418
|
<h3 className="docs-page__h3">Place Content</h3>
|
419
|
-
<p className=
|
419
|
+
<p className="docs-page__paragraph">
|
420
420
|
Utilities classes for controlling how content is justified and aligned at the same time.
|
421
421
|
</p>
|
422
422
|
<div className="utilities-table__container">
|
@@ -465,9 +465,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
465
465
|
</div>
|
466
466
|
</div>
|
467
467
|
|
468
|
-
<div className=
|
468
|
+
<div className="docs-page__container-block--place-items">
|
469
469
|
<h3 className="docs-page__h3">Place Items</h3>
|
470
|
-
<p className=
|
470
|
+
<p className="docs-page__paragraph">
|
471
471
|
Utilities classes for controlling how items are justified and aligned at the same time.
|
472
472
|
</p>
|
473
473
|
<div className="utilities-table__container">
|
@@ -504,10 +504,11 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
504
504
|
</div>
|
505
505
|
</div>
|
506
506
|
|
507
|
-
<div className=
|
507
|
+
<div className="docs-page__container-block--place-self">
|
508
508
|
<h3 className="docs-page__h3">Place Self</h3>
|
509
|
-
<p className=
|
510
|
-
Utilities classes for controlling how an individual item is justified and aligned at the same
|
509
|
+
<p className="docs-page__paragraph">
|
510
|
+
Utilities classes for controlling how an individual item is justified and aligned at the same
|
511
|
+
time.
|
511
512
|
</p>
|
512
513
|
<div className="utilities-table__container">
|
513
514
|
<table className="table utilities-table">
|
@@ -542,10 +543,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
|
|
542
543
|
</table>
|
543
544
|
</div>
|
544
545
|
</div>
|
545
|
-
|
546
546
|
</section>
|
547
|
-
)
|
547
|
+
);
|
548
548
|
}
|
549
549
|
}
|
550
550
|
|
551
|
-
export {
|
551
|
+
export {FlexAndGridUtilitiesDoc};
|
@@ -7,9 +7,9 @@ class ObjectFitUtilitiesDoc extends React.Component {
|
|
7
7
|
<section className="docs-page__container">
|
8
8
|
<h2 className="docs-page__h2">Object Fit</h2>
|
9
9
|
<p className="docs-page__paragraph">
|
10
|
-
Utilities for managing how a replaced element's content should be resized.
|
10
|
+
Utilities for managing how a replaced element's content should be resized.
|
11
11
|
</p>
|
12
|
-
<div className=
|
12
|
+
<div className="docs-page__container-block--object-fit">
|
13
13
|
<div className="utilities-table__container">
|
14
14
|
<table className="table utilities-table">
|
15
15
|
<thead>
|
@@ -39,15 +39,13 @@ class ObjectFitUtilitiesDoc extends React.Component {
|
|
39
39
|
<td>object-scale-down</td>
|
40
40
|
<td>{'object-fit: scale-down;'}</td>
|
41
41
|
</tr>
|
42
|
-
|
43
42
|
</tbody>
|
44
43
|
</table>
|
45
44
|
</div>
|
46
45
|
</div>
|
47
|
-
|
48
46
|
</section>
|
49
|
-
)
|
47
|
+
);
|
50
48
|
}
|
51
49
|
}
|
52
50
|
|
53
|
-
export {
|
51
|
+
export {ObjectFitUtilitiesDoc};
|
@@ -9,7 +9,7 @@ class ObjectPositionUtilitiesDoc extends React.Component {
|
|
9
9
|
<p className="docs-page__paragraph">
|
10
10
|
Utilities for managing how a replaced element's content should be positioned within its container.
|
11
11
|
</p>
|
12
|
-
<div className=
|
12
|
+
<div className="docs-page__container-block--object-position">
|
13
13
|
<div className="utilities-table__container utilities-table__container--no-height">
|
14
14
|
<table className="table utilities-table">
|
15
15
|
<thead>
|
@@ -59,10 +59,9 @@ class ObjectPositionUtilitiesDoc extends React.Component {
|
|
59
59
|
</table>
|
60
60
|
</div>
|
61
61
|
</div>
|
62
|
-
|
63
62
|
</section>
|
64
|
-
)
|
63
|
+
);
|
65
64
|
}
|
66
65
|
}
|
67
66
|
|
68
|
-
export {
|
67
|
+
export {ObjectPositionUtilitiesDoc};
|
@@ -6,10 +6,8 @@ class OpacityUtilitiesDoc extends React.Component {
|
|
6
6
|
return (
|
7
7
|
<section className="docs-page__container">
|
8
8
|
<h2 className="docs-page__h2">Opacity</h2>
|
9
|
-
<p className="docs-page__paragraph">
|
10
|
-
|
11
|
-
</p>
|
12
|
-
<div className='docs-page__container-block--opacity'>
|
9
|
+
<p className="docs-page__paragraph">Utility classes for controlling the opacity of an element.</p>
|
10
|
+
<div className="docs-page__container-block--opacity">
|
13
11
|
<div className="utilities-table__container">
|
14
12
|
<table className="table utilities-table">
|
15
13
|
<thead>
|
@@ -55,10 +53,9 @@ class OpacityUtilitiesDoc extends React.Component {
|
|
55
53
|
</table>
|
56
54
|
</div>
|
57
55
|
</div>
|
58
|
-
|
59
56
|
</section>
|
60
|
-
)
|
57
|
+
);
|
61
58
|
}
|
62
59
|
}
|
63
60
|
|
64
|
-
export {
|
61
|
+
export {OpacityUtilitiesDoc};
|
@@ -7,9 +7,9 @@ class OverflowUtilitiesDoc extends React.Component {
|
|
7
7
|
<section className="docs-page__container">
|
8
8
|
<h2 className="docs-page__h2">Overflow</h2>
|
9
9
|
<p className="docs-page__paragraph">
|
10
|
-
|
10
|
+
Utility classes for managing how an element deals with content that exceeds the container's size.
|
11
11
|
</p>
|
12
|
-
<div className=
|
12
|
+
<div className="docs-page__container-block--position">
|
13
13
|
<div className="utilities-table__container utilities-table__container--no-height">
|
14
14
|
<table className="table utilities-table">
|
15
15
|
<thead>
|
@@ -84,10 +84,9 @@ class OverflowUtilitiesDoc extends React.Component {
|
|
84
84
|
</table>
|
85
85
|
</div>
|
86
86
|
</div>
|
87
|
-
|
88
87
|
</section>
|
89
|
-
)
|
88
|
+
);
|
90
89
|
}
|
91
90
|
}
|
92
91
|
|
93
|
-
export {
|
92
|
+
export {OverflowUtilitiesDoc};
|
@@ -7,9 +7,9 @@ class PositionUtilitiesDoc extends React.Component {
|
|
7
7
|
<section className="docs-page__container">
|
8
8
|
<h2 className="docs-page__h2">Position</h2>
|
9
9
|
<p className="docs-page__paragraph">
|
10
|
-
|
10
|
+
Utility classes for managing the placement of an element within the DOM.
|
11
11
|
</p>
|
12
|
-
<div className=
|
12
|
+
<div className="docs-page__container-block--position">
|
13
13
|
<div className="utilities-table__container">
|
14
14
|
<table className="table utilities-table">
|
15
15
|
<thead>
|
@@ -43,10 +43,9 @@ class PositionUtilitiesDoc extends React.Component {
|
|
43
43
|
</table>
|
44
44
|
</div>
|
45
45
|
</div>
|
46
|
-
|
47
46
|
</section>
|
48
|
-
)
|
47
|
+
);
|
49
48
|
}
|
50
49
|
}
|
51
50
|
|
52
|
-
export {
|
51
|
+
export {PositionUtilitiesDoc};
|
@@ -6,11 +6,9 @@ class ShadowUtilitiesDoc extends React.Component {
|
|
6
6
|
return (
|
7
7
|
<section className="docs-page__container">
|
8
8
|
<h2 className="docs-page__h2">Shadow</h2>
|
9
|
-
<p className="docs-page__paragraph">
|
10
|
-
Utility classes for managing the shadow depth of an element.
|
11
|
-
</p>
|
9
|
+
<p className="docs-page__paragraph">Utility classes for managing the shadow depth of an element.</p>
|
12
10
|
|
13
|
-
<div className=
|
11
|
+
<div className="docs-page__container-block--box-shadow">
|
14
12
|
<h3 className="docs-page__h3">box-shadow</h3>
|
15
13
|
<div className="utilities-table__container">
|
16
14
|
<table className="table utilities-table">
|
@@ -44,7 +42,7 @@ class ShadowUtilitiesDoc extends React.Component {
|
|
44
42
|
</tbody>
|
45
43
|
</table>
|
46
44
|
</div>
|
47
|
-
<div className=
|
45
|
+
<div className="docs-page__container-block">
|
48
46
|
<h4 className="docs-page__h4">Usage</h4>
|
49
47
|
<div className="docs-page__code-window">
|
50
48
|
<div className="sd-grid-list">
|
@@ -60,16 +58,18 @@ class ShadowUtilitiesDoc extends React.Component {
|
|
60
58
|
<div className="docs-page__example-box sd-shadow--z4">
|
61
59
|
<p>sd-shadow--z4</p>
|
62
60
|
</div>
|
63
|
-
|
64
61
|
</div>
|
65
62
|
</div>
|
66
63
|
</div>
|
67
64
|
</div>
|
68
65
|
|
69
|
-
<div className=
|
66
|
+
<div className="docs-page__container-block--drop-shadow">
|
70
67
|
<h3 className="docs-page__h3">drop-shadow filter</h3>
|
71
68
|
<p className="docs-page__paragraph">
|
72
|
-
These helper classes utilize the <code>drop-shadow</code> filter. Use them exclusively to apply
|
69
|
+
These helper classes utilize the <code>drop-shadow</code> filter. Use them exclusively to apply
|
70
|
+
a shadow to an element that doesn't correspond to its bounding box, but instead uses the
|
71
|
+
element's alpha mask, such as transparent PNG or SVG. For all other situations, it is
|
72
|
+
recommended to use the above classes, based on the <code>box-shadow</code> property.
|
73
73
|
</p>
|
74
74
|
<div className="utilities-table__container">
|
75
75
|
<table className="table utilities-table">
|
@@ -105,19 +105,18 @@ class ShadowUtilitiesDoc extends React.Component {
|
|
105
105
|
</div>
|
106
106
|
</div>
|
107
107
|
|
108
|
-
<div className=
|
108
|
+
<div className="docs-page__container-block--drop-shadow">
|
109
109
|
<h4 className="docs-page__h4">Basic usage</h4>
|
110
110
|
<div className="docs-page__code-window docs-page__example-box">
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
111
|
+
<div className="p-4">
|
112
|
+
<p className="text-md font-light text-color-subdued mb-2">sd-drop-shadow--z3</p>
|
113
|
+
<img className="sd-drop-shadow--z3" width={300} src="./SD-logo.svg" />
|
114
|
+
</div>
|
115
115
|
</div>
|
116
116
|
</div>
|
117
|
-
|
118
117
|
</section>
|
119
|
-
)
|
118
|
+
);
|
120
119
|
}
|
121
120
|
}
|
122
121
|
|
123
|
-
export {
|
122
|
+
export {ShadowUtilitiesDoc};
|