@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2
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/action-bar/lib/ActionBarList.tsx +2 -2
- package/banner/lib/hooks/index.ts +2 -0
- package/banner/lib/hooks/useThemedPalette.ts +3 -3
- package/common/lib/theming/README.md +97 -0
- package/common/lib/theming/index.ts +1 -1
- package/common/lib/theming/useTheme.ts +79 -22
- package/common/lib/theming/useThemedRing.ts +114 -0
- package/common/lib/utils/colorUtils.ts +20 -7
- package/common/lib/utils/components.ts +4 -0
- package/common/lib/utils/memoize.ts +1 -1
- package/dist/commonjs/action-bar/lib/ActionBar.js +8 -9
- package/dist/commonjs/action-bar/lib/ActionBarItem.js +7 -18
- package/dist/commonjs/action-bar/lib/ActionBarList.js +13 -38
- package/dist/commonjs/action-bar/lib/ActionBarOverflowButton.js +13 -24
- package/dist/commonjs/action-bar/lib/useActionBarModel.js +39 -38
- package/dist/commonjs/avatar/lib/Avatar.js +52 -74
- package/dist/commonjs/badge/lib/CountBadge.js +23 -43
- package/dist/commonjs/banner/lib/Banner.js +32 -48
- package/dist/commonjs/banner/lib/BannerActionText.js +7 -30
- package/dist/commonjs/banner/lib/BannerIcon.js +9 -31
- package/dist/commonjs/banner/lib/BannerLabel.js +6 -29
- package/dist/commonjs/banner/lib/hooks/index.d.ts +2 -0
- package/dist/commonjs/banner/lib/hooks/index.d.ts.map +1 -1
- package/dist/commonjs/banner/lib/hooks/index.js +3 -0
- package/dist/commonjs/banner/lib/hooks/useBanner.js +5 -6
- package/dist/commonjs/banner/lib/hooks/useBannerActionText.js +4 -5
- package/dist/commonjs/banner/lib/hooks/useBannerIcon.js +6 -7
- package/dist/commonjs/banner/lib/hooks/useBannerLabel.js +4 -5
- package/dist/commonjs/banner/lib/hooks/useBannerModel.js +8 -16
- package/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts +1 -1
- package/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts.map +1 -1
- package/dist/commonjs/banner/lib/hooks/useThemedPalette.js +11 -11
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs.js +12 -35
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsCurrentItem.js +14 -37
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.js +14 -39
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsLink.js +15 -36
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsList.js +10 -33
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsMenu.js +7 -19
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.js +15 -38
- package/dist/commonjs/breadcrumbs/lib/hooks/useBreadcrumbsModel.js +38 -37
- package/dist/commonjs/breadcrumbs/lib/hooks/utils/index.js +4 -4
- package/dist/commonjs/button/lib/BaseButton.js +128 -78
- package/dist/commonjs/button/lib/DeleteButton.js +27 -58
- package/dist/commonjs/button/lib/ExternalHyperlink.js +25 -39
- package/dist/commonjs/button/lib/Hyperlink.js +9 -34
- package/dist/commonjs/button/lib/PrimaryButton.js +9 -32
- package/dist/commonjs/button/lib/SecondaryButton.js +9 -32
- package/dist/commonjs/button/lib/TertiaryButton.js +23 -49
- package/dist/commonjs/button/lib/ToolbarDropdownButton.js +13 -39
- package/dist/commonjs/button/lib/ToolbarIconButton.js +16 -43
- package/dist/commonjs/button/lib/deprecated_Button.js +51 -54
- package/dist/commonjs/button/lib/parts/ButtonLabel.js +6 -29
- package/dist/commonjs/button/lib/parts/ButtonLabelIcon.js +7 -30
- package/dist/commonjs/card/lib/Card.js +8 -31
- package/dist/commonjs/card/lib/CardBody.js +6 -29
- package/dist/commonjs/card/lib/CardHeading.js +5 -28
- package/dist/commonjs/checkbox/lib/Checkbox.js +120 -129
- package/dist/commonjs/collection/lib/ListBox.js +11 -34
- package/dist/commonjs/collection/lib/react-virtual.js +2 -2
- package/dist/commonjs/collection/lib/useBaseListModel.js +57 -61
- package/dist/commonjs/collection/lib/useCursorListModel.js +98 -130
- package/dist/commonjs/collection/lib/useGridModel.js +14 -32
- package/dist/commonjs/collection/lib/useListItemRegister.js +16 -18
- package/dist/commonjs/collection/lib/useListItemRovingFocus.js +35 -40
- package/dist/commonjs/collection/lib/useListItemSelect.js +6 -8
- package/dist/commonjs/collection/lib/useListModel.js +2 -2
- package/dist/commonjs/collection/lib/useListRenderItem.js +9 -9
- package/dist/commonjs/collection/lib/useListResetCursorOnBlur.js +9 -10
- package/dist/commonjs/collection/lib/useOverflowListItemMeasure.js +10 -11
- package/dist/commonjs/collection/lib/useOverflowListMeasure.js +8 -8
- package/dist/commonjs/collection/lib/useOverflowListModel.js +61 -56
- package/dist/commonjs/collection/lib/useOverflowListTarget.js +10 -10
- package/dist/commonjs/collection/lib/useSelectionListModel.js +31 -37
- package/dist/commonjs/color-picker/lib/ColorInput.js +45 -81
- package/dist/commonjs/color-picker/lib/ColorPreview.js +7 -32
- package/dist/commonjs/color-picker/lib/parts/ColorSwatch.js +15 -43
- package/dist/commonjs/common/lib/CanvasProvider.js +15 -57
- package/dist/commonjs/common/lib/EllipsisText.js +6 -18
- package/dist/commonjs/common/lib/InputProvider.js +73 -93
- package/dist/commonjs/common/lib/parts/_brand-assets.js +6 -6
- package/dist/commonjs/common/lib/responsive/useResponsiveContainerStyles.js +22 -49
- package/dist/commonjs/common/lib/styles/errorRing.js +11 -10
- package/dist/commonjs/common/lib/styles/focusRing.js +19 -21
- package/dist/commonjs/common/lib/styles/hideMouseFocus.js +13 -9
- package/dist/commonjs/common/lib/theming/breakpoints.js +10 -10
- package/dist/commonjs/common/lib/theming/createCanvasTheme.js +36 -65
- package/dist/commonjs/common/lib/theming/getObjectProxy.js +3 -3
- package/dist/commonjs/common/lib/theming/index.d.ts +1 -1
- package/dist/commonjs/common/lib/theming/index.d.ts.map +1 -1
- package/dist/commonjs/common/lib/theming/index.js +1 -1
- package/dist/commonjs/common/lib/theming/styled.js +10 -14
- package/dist/commonjs/common/lib/theming/theme.js +3 -3
- package/dist/commonjs/common/lib/theming/useIsRTL.js +5 -5
- package/dist/commonjs/common/lib/theming/useTheme.d.ts +49 -5
- package/dist/commonjs/common/lib/theming/useTheme.d.ts.map +1 -1
- package/dist/commonjs/common/lib/theming/useTheme.js +82 -37
- package/dist/commonjs/common/lib/theming/useThemedRing.d.ts +43 -0
- package/dist/commonjs/common/lib/theming/useThemedRing.d.ts.map +1 -0
- package/dist/commonjs/common/lib/theming/useThemedRing.js +100 -0
- package/dist/commonjs/common/lib/utils/changeFocus.js +3 -3
- package/dist/commonjs/common/lib/utils/colorUtils.d.ts +7 -0
- package/dist/commonjs/common/lib/utils/colorUtils.d.ts.map +1 -1
- package/dist/commonjs/common/lib/utils/colorUtils.js +28 -15
- package/dist/commonjs/common/lib/utils/components.d.ts +3 -1
- package/dist/commonjs/common/lib/utils/components.d.ts.map +1 -1
- package/dist/commonjs/common/lib/utils/components.js +46 -89
- package/dist/commonjs/common/lib/utils/deepMerge.js +4 -4
- package/dist/commonjs/common/lib/utils/elements.js +16 -16
- package/dist/commonjs/common/lib/utils/getTranslateFromOrigin.js +2 -2
- package/dist/commonjs/common/lib/utils/isWithinBreakpoint.js +1 -1
- package/dist/commonjs/common/lib/utils/makeMq.js +4 -4
- package/dist/commonjs/common/lib/utils/memoize.d.ts +1 -1
- package/dist/commonjs/common/lib/utils/memoize.d.ts.map +1 -1
- package/dist/commonjs/common/lib/utils/memoize.js +4 -8
- package/dist/commonjs/common/lib/utils/mergeCallback.js +1 -5
- package/dist/commonjs/common/lib/utils/mergeProps.js +5 -16
- package/dist/commonjs/common/lib/utils/models.js +48 -70
- package/dist/commonjs/common/lib/utils/useConstant.js +2 -2
- package/dist/commonjs/common/lib/utils/useIsFullscreen.js +7 -7
- package/dist/commonjs/common/lib/utils/useModalityType.js +9 -9
- package/dist/commonjs/common/lib/utils/useMount.js +3 -3
- package/dist/commonjs/common/lib/utils/useResizeObserver.js +9 -21
- package/dist/commonjs/common/lib/utils/useUniqueId.js +8 -8
- package/dist/commonjs/common/lib/utils/useWindowSize.js +10 -10
- package/dist/commonjs/dialog/lib/Dialog.js +7 -8
- package/dist/commonjs/dialog/lib/DialogCard.js +6 -17
- package/dist/commonjs/dialog/lib/DialogPopper.js +9 -32
- package/dist/commonjs/dialog/lib/hooks/useDialogCard.js +4 -5
- package/dist/commonjs/dialog/lib/hooks/useDialogModel.js +4 -4
- package/dist/commonjs/dialog/lib/hooks/useDialogPopper.js +4 -5
- package/dist/commonjs/disclosure/lib/useDisclosureModel.js +12 -12
- package/dist/commonjs/form-field/lib/FormField.js +41 -84
- package/dist/commonjs/form-field/lib/Hint.js +13 -47
- package/dist/commonjs/form-field/lib/Label.js +43 -86
- package/dist/commonjs/icon/lib/AccentIcon.d.ts +3 -2
- package/dist/commonjs/icon/lib/AccentIcon.d.ts.map +1 -1
- package/dist/commonjs/icon/lib/AccentIcon.js +15 -41
- package/dist/commonjs/icon/lib/AppletIcon.js +16 -40
- package/dist/commonjs/icon/lib/Graphic.js +9 -33
- package/dist/commonjs/icon/lib/Icon.js +12 -31
- package/dist/commonjs/icon/lib/Svg.js +11 -34
- package/dist/commonjs/icon/lib/SystemIcon.d.ts.map +1 -1
- package/dist/commonjs/icon/lib/SystemIcon.js +36 -63
- package/dist/commonjs/icon/lib/SystemIconCircle.d.ts +2 -1
- package/dist/commonjs/icon/lib/SystemIconCircle.d.ts.map +1 -1
- package/dist/commonjs/icon/lib/SystemIconCircle.js +18 -47
- package/dist/commonjs/icon/lib/utils.d.ts +0 -2
- package/dist/commonjs/icon/lib/utils.d.ts.map +1 -1
- package/dist/commonjs/icon/lib/utils.js +2 -10
- package/dist/commonjs/layout/lib/Box.js +26 -51
- package/dist/commonjs/layout/lib/Flex.js +8 -31
- package/dist/commonjs/layout/lib/Grid.js +11 -35
- package/dist/commonjs/layout/lib/utils/background.js +1 -1
- package/dist/commonjs/layout/lib/utils/border/color.js +1 -1
- package/dist/commonjs/layout/lib/utils/border/index.js +20 -24
- package/dist/commonjs/layout/lib/utils/border/lineStyle.js +1 -1
- package/dist/commonjs/layout/lib/utils/border/radius.js +1 -1
- package/dist/commonjs/layout/lib/utils/border/shorthand.js +1 -1
- package/dist/commonjs/layout/lib/utils/border/width.js +1 -1
- package/dist/commonjs/layout/lib/utils/buildStyleFns.js +40 -43
- package/dist/commonjs/layout/lib/utils/color.js +1 -1
- package/dist/commonjs/layout/lib/utils/depth.js +1 -1
- package/dist/commonjs/layout/lib/utils/flex.js +1 -1
- package/dist/commonjs/layout/lib/utils/flexItem.js +1 -1
- package/dist/commonjs/layout/lib/utils/getValidChildren.js +2 -4
- package/dist/commonjs/layout/lib/utils/grid.js +1 -1
- package/dist/commonjs/layout/lib/utils/gridItem.js +1 -1
- package/dist/commonjs/layout/lib/utils/layout.js +1 -1
- package/dist/commonjs/layout/lib/utils/other.js +1 -1
- package/dist/commonjs/layout/lib/utils/position.d.ts +4 -0
- package/dist/commonjs/layout/lib/utils/position.d.ts.map +1 -1
- package/dist/commonjs/layout/lib/utils/position.js +6 -1
- package/dist/commonjs/layout/lib/utils/space.js +1 -1
- package/dist/commonjs/layout/lib/utils/text.js +1 -1
- package/dist/commonjs/loading-dots/lib/LoadingDots.js +20 -42
- package/dist/commonjs/menu/lib/Menu.js +10 -11
- package/dist/commonjs/menu/lib/MenuCard.js +14 -26
- package/dist/commonjs/menu/lib/MenuContextTarget.js +9 -32
- package/dist/commonjs/menu/lib/MenuDivider.js +9 -20
- package/dist/commonjs/menu/lib/MenuItem.js +77 -86
- package/dist/commonjs/menu/lib/MenuList.js +8 -31
- package/dist/commonjs/menu/lib/MenuPopper.js +6 -29
- package/dist/commonjs/menu/lib/MenuTarget.js +11 -35
- package/dist/commonjs/menu/lib/useMenuModel.js +22 -24
- package/dist/commonjs/modal/lib/Modal.js +10 -10
- package/dist/commonjs/modal/lib/ModalBody.js +13 -26
- package/dist/commonjs/modal/lib/ModalCard.js +13 -27
- package/dist/commonjs/modal/lib/ModalHeading.js +13 -26
- package/dist/commonjs/modal/lib/ModalOverflowOverlay.js +8 -19
- package/dist/commonjs/modal/lib/ModalOverlay.js +39 -52
- package/dist/commonjs/modal/lib/hooks/useCloseOnOverlayClick.js +17 -17
- package/dist/commonjs/modal/lib/hooks/useModalCard.js +3 -3
- package/dist/commonjs/modal/lib/hooks/useModalHeading.js +7 -7
- package/dist/commonjs/modal/lib/hooks/useModalModel.js +5 -5
- package/dist/commonjs/pagination/lib/Pagination/AdditionalDetails.js +15 -36
- package/dist/commonjs/pagination/lib/Pagination/Controls.js +37 -63
- package/dist/commonjs/pagination/lib/Pagination/GoTo/Form.js +11 -34
- package/dist/commonjs/pagination/lib/Pagination/GoTo/Label.js +7 -30
- package/dist/commonjs/pagination/lib/Pagination/GoTo/TextInput.js +7 -18
- package/dist/commonjs/pagination/lib/Pagination/GoTo/useGoToForm.js +12 -13
- package/dist/commonjs/pagination/lib/Pagination/Nav.js +4 -15
- package/dist/commonjs/pagination/lib/Pagination/PageButton.js +15 -39
- package/dist/commonjs/pagination/lib/Pagination/PageList.js +10 -34
- package/dist/commonjs/pagination/lib/Pagination/Pagination.js +15 -37
- package/dist/commonjs/pagination/lib/Pagination/buildPageRange.js +9 -15
- package/dist/commonjs/pagination/lib/Pagination/common/List.js +8 -32
- package/dist/commonjs/pagination/lib/Pagination/common/useLiveRegion.js +8 -26
- package/dist/commonjs/pagination/lib/Pagination/common/utils/getValidChildren.js +2 -4
- package/dist/commonjs/pagination/lib/Pagination/common/utils/useRTL.js +5 -5
- package/dist/commonjs/pagination/lib/Pagination/usePaginationModel.js +31 -31
- package/dist/commonjs/popup/lib/Popper.js +34 -56
- package/dist/commonjs/popup/lib/Popup.js +11 -12
- package/dist/commonjs/popup/lib/PopupBody.js +6 -17
- package/dist/commonjs/popup/lib/PopupCard.js +33 -55
- package/dist/commonjs/popup/lib/PopupCloseButton.js +6 -29
- package/dist/commonjs/popup/lib/PopupCloseIcon.js +8 -31
- package/dist/commonjs/popup/lib/PopupHeading.js +6 -29
- package/dist/commonjs/popup/lib/PopupPopper.js +6 -29
- package/dist/commonjs/popup/lib/PopupTarget.js +6 -17
- package/dist/commonjs/popup/lib/getTransformFromPlacement.js +6 -6
- package/dist/commonjs/popup/lib/hooks/focus-trap-js.js +23 -27
- package/dist/commonjs/popup/lib/hooks/useAlwaysCloseOnOutsideClick.js +9 -9
- package/dist/commonjs/popup/lib/hooks/useAssistiveHideSiblings.js +14 -17
- package/dist/commonjs/popup/lib/hooks/useBringToTopOnClick.js +11 -11
- package/dist/commonjs/popup/lib/hooks/useCloseOnEscape.js +9 -9
- package/dist/commonjs/popup/lib/hooks/useCloseOnFullscreenExit.js +9 -9
- package/dist/commonjs/popup/lib/hooks/useCloseOnOutsideClick.js +12 -12
- package/dist/commonjs/popup/lib/hooks/useCloseOnTargetHidden.js +12 -12
- package/dist/commonjs/popup/lib/hooks/useDisableBodyScroll.js +10 -10
- package/dist/commonjs/popup/lib/hooks/useFocusRedirect.js +10 -10
- package/dist/commonjs/popup/lib/hooks/useFocusTrap.js +9 -9
- package/dist/commonjs/popup/lib/hooks/useInitialFocus.js +10 -10
- package/dist/commonjs/popup/lib/hooks/usePopupCard.js +3 -4
- package/dist/commonjs/popup/lib/hooks/usePopupCloseButton.js +3 -4
- package/dist/commonjs/popup/lib/hooks/usePopupHeading.js +3 -4
- package/dist/commonjs/popup/lib/hooks/usePopupModel.js +29 -34
- package/dist/commonjs/popup/lib/hooks/usePopupPopper.js +8 -9
- package/dist/commonjs/popup/lib/hooks/usePopupStack.js +15 -15
- package/dist/commonjs/popup/lib/hooks/usePopupTarget.js +5 -6
- package/dist/commonjs/popup/lib/hooks/usePopupTargetContext.js +5 -6
- package/dist/commonjs/popup/lib/hooks/useReturnFocus.js +19 -19
- package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.js +10 -10
- package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.js +10 -10
- package/dist/commonjs/radio/lib/Radio.js +113 -133
- package/dist/commonjs/radio/lib/RadioGroup.js +33 -78
- package/dist/commonjs/segmented-control/lib/SegmentedControl.js +7 -30
- package/dist/commonjs/segmented-control/lib/SegmentedControlButton.js +40 -61
- package/dist/commonjs/select/lib/Select.js +47 -64
- package/dist/commonjs/select/lib/SelectOption.js +6 -48
- package/dist/commonjs/side-panel/lib/SidePanel.js +60 -122
- package/dist/commonjs/skeleton/lib/parts/skeletonHeader.js +5 -30
- package/dist/commonjs/skeleton/lib/parts/skeletonShape.js +12 -40
- package/dist/commonjs/skeleton/lib/parts/skeletonText.js +12 -38
- package/dist/commonjs/skeleton/lib/skeleton.js +15 -40
- package/dist/commonjs/status-indicator/lib/StatusIndicator.js +28 -61
- package/dist/commonjs/switch/lib/Switch.js +55 -65
- package/dist/commonjs/table/lib/Table.js +10 -52
- package/dist/commonjs/table/lib/TableRow.js +40 -67
- package/dist/commonjs/tabs/lib/Tabs.js +11 -12
- package/dist/commonjs/tabs/lib/TabsItem.d.ts +1 -1
- package/dist/commonjs/tabs/lib/TabsItem.js +81 -86
- package/dist/commonjs/tabs/lib/TabsList.js +25 -51
- package/dist/commonjs/tabs/lib/TabsMenuPopper.js +6 -29
- package/dist/commonjs/tabs/lib/TabsOverflowButton.js +12 -35
- package/dist/commonjs/tabs/lib/TabsPanel.js +17 -42
- package/dist/commonjs/tabs/lib/TabsPanels.js +5 -6
- package/dist/commonjs/tabs/lib/useTabsModel.js +44 -43
- package/dist/commonjs/testing/lib/ComponentStatesTable.js +11 -20
- package/dist/commonjs/testing/lib/StaticStates.js +10 -34
- package/dist/commonjs/testing/lib/permutateProps.js +13 -26
- package/dist/commonjs/text/lib/LabelText.js +6 -29
- package/dist/commonjs/text/lib/Text.js +13 -39
- package/dist/commonjs/text/lib/TypeLevelComponents.js +15 -41
- package/dist/commonjs/text-area/lib/TextArea.js +42 -55
- package/dist/commonjs/text-input/lib/InputIconContainer.js +11 -17
- package/dist/commonjs/text-input/lib/TextInput.js +38 -51
- package/dist/commonjs/toast/lib/Toast.js +13 -36
- package/dist/commonjs/toast/lib/ToastBody.js +5 -28
- package/dist/commonjs/toast/lib/ToastCloseIcon.js +5 -16
- package/dist/commonjs/toast/lib/ToastIcon.js +5 -16
- package/dist/commonjs/toast/lib/ToastLink.js +5 -28
- package/dist/commonjs/toast/lib/ToastMessage.js +6 -29
- package/dist/commonjs/toast/lib/hooks/useToastModel.js +8 -16
- package/dist/commonjs/tokens/index.d.ts +2 -2
- package/dist/commonjs/tokens/index.d.ts.map +1 -1
- package/dist/commonjs/tokens/index.js +6 -6
- package/dist/commonjs/tokens/lib/type/fontFamilies.js +3 -3
- package/dist/commonjs/tokens/lib/type/index.js +7 -7
- package/dist/commonjs/tokens/lib/type/levels.js +4 -4
- package/dist/commonjs/tokens/lib/type/variants.js +1 -1
- package/dist/commonjs/tooltip/lib/OverflowTooltip.js +34 -54
- package/dist/commonjs/tooltip/lib/Tooltip.js +26 -47
- package/dist/commonjs/tooltip/lib/TooltipContainer.js +37 -35
- package/dist/commonjs/tooltip/lib/useTooltip.js +32 -34
- package/dist/es6/action-bar/lib/ActionBar.js +3 -4
- package/dist/es6/action-bar/lib/ActionBarItem.js +4 -15
- package/dist/es6/action-bar/lib/ActionBarList.js +10 -35
- package/dist/es6/action-bar/lib/ActionBarOverflowButton.js +6 -17
- package/dist/es6/action-bar/lib/useActionBarModel.js +36 -35
- package/dist/es6/avatar/lib/Avatar.js +46 -68
- package/dist/es6/badge/lib/CountBadge.js +20 -40
- package/dist/es6/banner/lib/Banner.js +25 -41
- package/dist/es6/banner/lib/BannerActionText.js +4 -27
- package/dist/es6/banner/lib/BannerIcon.js +5 -27
- package/dist/es6/banner/lib/BannerLabel.js +3 -26
- package/dist/es6/banner/lib/hooks/index.d.ts +2 -0
- package/dist/es6/banner/lib/hooks/index.d.ts.map +1 -1
- package/dist/es6/banner/lib/hooks/index.js +2 -0
- package/dist/es6/banner/lib/hooks/useBanner.js +3 -4
- package/dist/es6/banner/lib/hooks/useBannerActionText.js +2 -3
- package/dist/es6/banner/lib/hooks/useBannerIcon.js +2 -3
- package/dist/es6/banner/lib/hooks/useBannerLabel.js +2 -3
- package/dist/es6/banner/lib/hooks/useBannerModel.js +8 -16
- package/dist/es6/banner/lib/hooks/useThemedPalette.d.ts +1 -1
- package/dist/es6/banner/lib/hooks/useThemedPalette.d.ts.map +1 -1
- package/dist/es6/banner/lib/hooks/useThemedPalette.js +7 -7
- package/dist/es6/breadcrumbs/lib/Breadcrumbs.js +3 -26
- package/dist/es6/breadcrumbs/lib/BreadcrumbsCurrentItem.js +9 -32
- package/dist/es6/breadcrumbs/lib/BreadcrumbsItem.js +6 -31
- package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.js +11 -32
- package/dist/es6/breadcrumbs/lib/BreadcrumbsList.js +5 -28
- package/dist/es6/breadcrumbs/lib/BreadcrumbsMenu.js +6 -18
- package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.js +6 -29
- package/dist/es6/breadcrumbs/lib/hooks/useBreadcrumbsModel.js +34 -33
- package/dist/es6/breadcrumbs/lib/hooks/utils/index.js +4 -4
- package/dist/es6/button/lib/BaseButton.js +123 -73
- package/dist/es6/button/lib/DeleteButton.js +25 -56
- package/dist/es6/button/lib/ExternalHyperlink.js +21 -35
- package/dist/es6/button/lib/Hyperlink.js +7 -32
- package/dist/es6/button/lib/PrimaryButton.js +6 -29
- package/dist/es6/button/lib/SecondaryButton.js +6 -29
- package/dist/es6/button/lib/TertiaryButton.js +20 -46
- package/dist/es6/button/lib/ToolbarDropdownButton.js +9 -35
- package/dist/es6/button/lib/ToolbarIconButton.js +13 -40
- package/dist/es6/button/lib/deprecated_Button.js +48 -51
- package/dist/es6/button/lib/parts/ButtonLabel.js +4 -27
- package/dist/es6/button/lib/parts/ButtonLabelIcon.js +5 -28
- package/dist/es6/card/lib/Card.js +3 -26
- package/dist/es6/card/lib/CardBody.js +3 -26
- package/dist/es6/card/lib/CardHeading.js +3 -26
- package/dist/es6/checkbox/lib/Checkbox.js +116 -125
- package/dist/es6/collection/lib/ListBox.js +7 -30
- package/dist/es6/collection/lib/react-virtual.js +1 -1
- package/dist/es6/collection/lib/useBaseListModel.js +55 -59
- package/dist/es6/collection/lib/useCursorListModel.js +110 -142
- package/dist/es6/collection/lib/useGridModel.js +12 -30
- package/dist/es6/collection/lib/useListItemRegister.js +13 -15
- package/dist/es6/collection/lib/useListItemRovingFocus.js +33 -38
- package/dist/es6/collection/lib/useListItemSelect.js +4 -6
- package/dist/es6/collection/lib/useListModel.js +1 -1
- package/dist/es6/collection/lib/useListRenderItem.js +8 -8
- package/dist/es6/collection/lib/useListResetCursorOnBlur.js +5 -6
- package/dist/es6/collection/lib/useOverflowListItemMeasure.js +8 -9
- package/dist/es6/collection/lib/useOverflowListMeasure.js +5 -5
- package/dist/es6/collection/lib/useOverflowListModel.js +59 -54
- package/dist/es6/collection/lib/useOverflowListTarget.js +7 -7
- package/dist/es6/collection/lib/useSelectionListModel.js +31 -37
- package/dist/es6/color-picker/lib/ColorInput.js +41 -77
- package/dist/es6/color-picker/lib/ColorPreview.js +3 -28
- package/dist/es6/color-picker/lib/parts/ColorSwatch.js +8 -36
- package/dist/es6/common/lib/CanvasProvider.js +11 -54
- package/dist/es6/common/lib/EllipsisText.js +5 -17
- package/dist/es6/common/lib/InputProvider.js +72 -93
- package/dist/es6/common/lib/parts/_brand-assets.js +6 -6
- package/dist/es6/common/lib/responsive/useResponsiveContainerStyles.js +20 -47
- package/dist/es6/common/lib/styles/accessibleHide.js +1 -1
- package/dist/es6/common/lib/styles/errorRing.js +8 -7
- package/dist/es6/common/lib/styles/focusRing.js +16 -18
- package/dist/es6/common/lib/styles/hideMouseFocus.js +13 -9
- package/dist/es6/common/lib/theming/breakpoints.js +12 -12
- package/dist/es6/common/lib/theming/createCanvasTheme.js +29 -58
- package/dist/es6/common/lib/theming/getObjectProxy.js +3 -3
- package/dist/es6/common/lib/theming/index.d.ts +1 -1
- package/dist/es6/common/lib/theming/index.d.ts.map +1 -1
- package/dist/es6/common/lib/theming/index.js +1 -1
- package/dist/es6/common/lib/theming/styled.js +7 -11
- package/dist/es6/common/lib/theming/theme.js +5 -5
- package/dist/es6/common/lib/theming/useIsRTL.js +2 -2
- package/dist/es6/common/lib/theming/useTheme.d.ts +49 -5
- package/dist/es6/common/lib/theming/useTheme.d.ts.map +1 -1
- package/dist/es6/common/lib/theming/useTheme.js +78 -34
- package/dist/es6/common/lib/theming/useThemedRing.d.ts +43 -0
- package/dist/es6/common/lib/theming/useThemedRing.d.ts.map +1 -0
- package/dist/es6/common/lib/theming/useThemedRing.js +92 -0
- package/dist/es6/common/lib/utils/changeFocus.js +3 -3
- package/dist/es6/common/lib/utils/colorUtils.d.ts +7 -0
- package/dist/es6/common/lib/utils/colorUtils.d.ts.map +1 -1
- package/dist/es6/common/lib/utils/colorUtils.js +24 -12
- package/dist/es6/common/lib/utils/components.d.ts +3 -1
- package/dist/es6/common/lib/utils/components.d.ts.map +1 -1
- package/dist/es6/common/lib/utils/components.js +43 -86
- package/dist/es6/common/lib/utils/deepMerge.js +4 -4
- package/dist/es6/common/lib/utils/elements.js +16 -16
- package/dist/es6/common/lib/utils/getTranslateFromOrigin.js +2 -2
- package/dist/es6/common/lib/utils/isWithinBreakpoint.js +1 -1
- package/dist/es6/common/lib/utils/makeMq.js +4 -4
- package/dist/es6/common/lib/utils/memoize.d.ts +1 -1
- package/dist/es6/common/lib/utils/memoize.d.ts.map +1 -1
- package/dist/es6/common/lib/utils/memoize.js +4 -8
- package/dist/es6/common/lib/utils/mergeCallback.js +1 -5
- package/dist/es6/common/lib/utils/mergeProps.js +4 -15
- package/dist/es6/common/lib/utils/models.js +47 -69
- package/dist/es6/common/lib/utils/useConstant.js +1 -1
- package/dist/es6/common/lib/utils/useIsFullscreen.js +5 -5
- package/dist/es6/common/lib/utils/useModalityType.js +8 -8
- package/dist/es6/common/lib/utils/useMount.js +2 -2
- package/dist/es6/common/lib/utils/useResizeObserver.js +6 -18
- package/dist/es6/common/lib/utils/useUniqueId.js +8 -8
- package/dist/es6/common/lib/utils/useWindowSize.js +8 -8
- package/dist/es6/dialog/lib/Dialog.js +2 -3
- package/dist/es6/dialog/lib/DialogCard.js +3 -14
- package/dist/es6/dialog/lib/DialogPopper.js +6 -29
- package/dist/es6/dialog/lib/hooks/useDialogCard.js +2 -3
- package/dist/es6/dialog/lib/hooks/useDialogModel.js +3 -3
- package/dist/es6/dialog/lib/hooks/useDialogPopper.js +2 -3
- package/dist/es6/disclosure/lib/useDisclosureModel.js +11 -11
- package/dist/es6/form-field/lib/FormField.js +35 -79
- package/dist/es6/form-field/lib/Hint.js +9 -43
- package/dist/es6/form-field/lib/Label.js +39 -82
- package/dist/es6/icon/lib/AccentIcon.d.ts +3 -2
- package/dist/es6/icon/lib/AccentIcon.d.ts.map +1 -1
- package/dist/es6/icon/lib/AccentIcon.js +12 -38
- package/dist/es6/icon/lib/AppletIcon.js +12 -36
- package/dist/es6/icon/lib/Graphic.js +6 -30
- package/dist/es6/icon/lib/Icon.js +10 -29
- package/dist/es6/icon/lib/Svg.js +8 -31
- package/dist/es6/icon/lib/SystemIcon.d.ts.map +1 -1
- package/dist/es6/icon/lib/SystemIcon.js +33 -60
- package/dist/es6/icon/lib/SystemIconCircle.d.ts +2 -1
- package/dist/es6/icon/lib/SystemIconCircle.d.ts.map +1 -1
- package/dist/es6/icon/lib/SystemIconCircle.js +14 -43
- package/dist/es6/icon/lib/utils.d.ts +0 -2
- package/dist/es6/icon/lib/utils.d.ts.map +1 -1
- package/dist/es6/icon/lib/utils.js +1 -8
- package/dist/es6/layout/lib/Box.js +12 -37
- package/dist/es6/layout/lib/Flex.js +4 -27
- package/dist/es6/layout/lib/Grid.js +7 -31
- package/dist/es6/layout/lib/utils/background.js +3 -3
- package/dist/es6/layout/lib/utils/border/color.js +2 -2
- package/dist/es6/layout/lib/utils/border/index.js +14 -18
- package/dist/es6/layout/lib/utils/border/lineStyle.js +2 -2
- package/dist/es6/layout/lib/utils/border/radius.js +2 -2
- package/dist/es6/layout/lib/utils/border/shorthand.js +2 -2
- package/dist/es6/layout/lib/utils/border/width.js +2 -2
- package/dist/es6/layout/lib/utils/buildStyleFns.js +39 -42
- package/dist/es6/layout/lib/utils/color.js +3 -3
- package/dist/es6/layout/lib/utils/depth.js +3 -3
- package/dist/es6/layout/lib/utils/flex.js +3 -3
- package/dist/es6/layout/lib/utils/flexItem.js +3 -3
- package/dist/es6/layout/lib/utils/getValidChildren.js +1 -3
- package/dist/es6/layout/lib/utils/grid.js +3 -3
- package/dist/es6/layout/lib/utils/gridItem.js +3 -3
- package/dist/es6/layout/lib/utils/layout.js +3 -3
- package/dist/es6/layout/lib/utils/other.js +3 -3
- package/dist/es6/layout/lib/utils/position.d.ts +4 -0
- package/dist/es6/layout/lib/utils/position.d.ts.map +1 -1
- package/dist/es6/layout/lib/utils/position.js +8 -3
- package/dist/es6/layout/lib/utils/space.js +3 -3
- package/dist/es6/layout/lib/utils/text.js +3 -3
- package/dist/es6/loading-dots/lib/LoadingDots.js +16 -38
- package/dist/es6/menu/lib/Menu.js +2 -3
- package/dist/es6/menu/lib/MenuCard.js +9 -21
- package/dist/es6/menu/lib/MenuContextTarget.js +7 -30
- package/dist/es6/menu/lib/MenuDivider.js +6 -17
- package/dist/es6/menu/lib/MenuItem.js +70 -79
- package/dist/es6/menu/lib/MenuList.js +4 -27
- package/dist/es6/menu/lib/MenuPopper.js +4 -27
- package/dist/es6/menu/lib/MenuTarget.js +10 -34
- package/dist/es6/menu/lib/useMenuModel.js +20 -22
- package/dist/es6/modal/lib/Modal.js +2 -2
- package/dist/es6/modal/lib/ModalBody.js +10 -23
- package/dist/es6/modal/lib/ModalCard.js +10 -24
- package/dist/es6/modal/lib/ModalHeading.js +10 -23
- package/dist/es6/modal/lib/ModalOverflowOverlay.js +4 -15
- package/dist/es6/modal/lib/ModalOverlay.js +33 -46
- package/dist/es6/modal/lib/hooks/useCloseOnOverlayClick.js +13 -13
- package/dist/es6/modal/lib/hooks/useModalCard.js +1 -1
- package/dist/es6/modal/lib/hooks/useModalHeading.js +5 -5
- package/dist/es6/modal/lib/hooks/useModalModel.js +3 -3
- package/dist/es6/pagination/lib/Pagination/AdditionalDetails.js +10 -31
- package/dist/es6/pagination/lib/Pagination/Controls.js +35 -61
- package/dist/es6/pagination/lib/Pagination/GoTo/Form.js +7 -30
- package/dist/es6/pagination/lib/Pagination/GoTo/Label.js +4 -27
- package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.js +4 -15
- package/dist/es6/pagination/lib/Pagination/GoTo/useGoToForm.js +12 -13
- package/dist/es6/pagination/lib/Pagination/Nav.js +2 -13
- package/dist/es6/pagination/lib/Pagination/PageButton.js +11 -35
- package/dist/es6/pagination/lib/Pagination/PageList.js +7 -31
- package/dist/es6/pagination/lib/Pagination/Pagination.js +16 -38
- package/dist/es6/pagination/lib/Pagination/buildPageRange.js +9 -15
- package/dist/es6/pagination/lib/Pagination/common/List.js +7 -31
- package/dist/es6/pagination/lib/Pagination/common/useLiveRegion.js +8 -26
- package/dist/es6/pagination/lib/Pagination/common/utils/getValidChildren.js +1 -3
- package/dist/es6/pagination/lib/Pagination/common/utils/useRTL.js +4 -4
- package/dist/es6/pagination/lib/Pagination/usePaginationModel.js +29 -29
- package/dist/es6/popup/lib/Popper.js +29 -51
- package/dist/es6/popup/lib/Popup.js +2 -3
- package/dist/es6/popup/lib/PopupBody.js +3 -14
- package/dist/es6/popup/lib/PopupCard.js +26 -48
- package/dist/es6/popup/lib/PopupCloseButton.js +3 -26
- package/dist/es6/popup/lib/PopupCloseIcon.js +3 -26
- package/dist/es6/popup/lib/PopupHeading.js +3 -26
- package/dist/es6/popup/lib/PopupPopper.js +3 -26
- package/dist/es6/popup/lib/PopupTarget.js +3 -14
- package/dist/es6/popup/lib/getTransformFromPlacement.js +6 -6
- package/dist/es6/popup/lib/hooks/focus-trap-js.js +23 -27
- package/dist/es6/popup/lib/hooks/useAlwaysCloseOnOutsideClick.js +5 -5
- package/dist/es6/popup/lib/hooks/useAssistiveHideSiblings.js +11 -14
- package/dist/es6/popup/lib/hooks/useBringToTopOnClick.js +7 -7
- package/dist/es6/popup/lib/hooks/useCloseOnEscape.js +5 -5
- package/dist/es6/popup/lib/hooks/useCloseOnFullscreenExit.js +5 -5
- package/dist/es6/popup/lib/hooks/useCloseOnOutsideClick.js +8 -8
- package/dist/es6/popup/lib/hooks/useCloseOnTargetHidden.js +9 -9
- package/dist/es6/popup/lib/hooks/useDisableBodyScroll.js +7 -7
- package/dist/es6/popup/lib/hooks/useFocusRedirect.js +7 -7
- package/dist/es6/popup/lib/hooks/useFocusTrap.js +5 -5
- package/dist/es6/popup/lib/hooks/useInitialFocus.js +7 -7
- package/dist/es6/popup/lib/hooks/usePopupCard.js +1 -2
- package/dist/es6/popup/lib/hooks/usePopupCloseButton.js +1 -2
- package/dist/es6/popup/lib/hooks/usePopupHeading.js +1 -2
- package/dist/es6/popup/lib/hooks/usePopupModel.js +28 -33
- package/dist/es6/popup/lib/hooks/usePopupPopper.js +5 -6
- package/dist/es6/popup/lib/hooks/usePopupStack.js +12 -12
- package/dist/es6/popup/lib/hooks/usePopupTarget.js +3 -4
- package/dist/es6/popup/lib/hooks/usePopupTargetContext.js +3 -4
- package/dist/es6/popup/lib/hooks/useReturnFocus.js +15 -15
- package/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.js +5 -5
- package/dist/es6/popup/lib/hooks/useTransferOnFullscreenExit.js +5 -5
- package/dist/es6/radio/lib/Radio.js +110 -130
- package/dist/es6/radio/lib/RadioGroup.js +29 -75
- package/dist/es6/segmented-control/lib/SegmentedControl.js +5 -28
- package/dist/es6/segmented-control/lib/SegmentedControlButton.js +37 -58
- package/dist/es6/select/lib/Select.js +44 -61
- package/dist/es6/select/lib/SelectOption.js +5 -48
- package/dist/es6/side-panel/lib/SidePanel.js +54 -117
- package/dist/es6/skeleton/lib/parts/skeletonHeader.js +2 -27
- package/dist/es6/skeleton/lib/parts/skeletonShape.js +9 -37
- package/dist/es6/skeleton/lib/parts/skeletonText.js +9 -35
- package/dist/es6/skeleton/lib/skeleton.js +9 -34
- package/dist/es6/status-indicator/lib/StatusIndicator.js +25 -59
- package/dist/es6/switch/lib/Switch.js +54 -64
- package/dist/es6/table/lib/Table.js +9 -52
- package/dist/es6/table/lib/TableRow.js +35 -62
- package/dist/es6/tabs/lib/Tabs.js +2 -3
- package/dist/es6/tabs/lib/TabsItem.d.ts +1 -1
- package/dist/es6/tabs/lib/TabsItem.js +74 -79
- package/dist/es6/tabs/lib/TabsList.js +20 -46
- package/dist/es6/tabs/lib/TabsMenuPopper.js +4 -27
- package/dist/es6/tabs/lib/TabsOverflowButton.js +5 -28
- package/dist/es6/tabs/lib/TabsPanel.js +13 -38
- package/dist/es6/tabs/lib/TabsPanels.js +2 -3
- package/dist/es6/tabs/lib/useTabsModel.js +41 -40
- package/dist/es6/testing/lib/ComponentStatesTable.js +9 -18
- package/dist/es6/testing/lib/StaticStates.js +8 -32
- package/dist/es6/testing/lib/permutateProps.js +13 -26
- package/dist/es6/text/lib/LabelText.js +3 -26
- package/dist/es6/text/lib/Text.js +10 -36
- package/dist/es6/text/lib/TypeLevelComponents.js +16 -42
- package/dist/es6/text-area/lib/TextArea.js +41 -54
- package/dist/es6/text-input/lib/InputIconContainer.js +8 -14
- package/dist/es6/text-input/lib/TextInput.js +37 -50
- package/dist/es6/toast/lib/Toast.js +4 -27
- package/dist/es6/toast/lib/ToastBody.js +3 -26
- package/dist/es6/toast/lib/ToastCloseIcon.js +3 -14
- package/dist/es6/toast/lib/ToastIcon.js +3 -14
- package/dist/es6/toast/lib/ToastLink.js +3 -26
- package/dist/es6/toast/lib/ToastMessage.js +3 -26
- package/dist/es6/toast/lib/hooks/useToastModel.js +8 -16
- package/dist/es6/tokens/index.d.ts +2 -2
- package/dist/es6/tokens/index.d.ts.map +1 -1
- package/dist/es6/tokens/index.js +16 -16
- package/dist/es6/tokens/lib/depth.js +1 -1
- package/dist/es6/tokens/lib/radius.js +1 -1
- package/dist/es6/tokens/lib/space.js +2 -2
- package/dist/es6/tokens/lib/type/fontFamilies.js +6 -6
- package/dist/es6/tokens/lib/type/fontSizes.js +1 -1
- package/dist/es6/tokens/lib/type/fontWeights.js +1 -1
- package/dist/es6/tokens/lib/type/index.js +8 -8
- package/dist/es6/tokens/lib/type/levels.js +1 -1
- package/dist/es6/tokens/lib/type/variants.js +1 -1
- package/dist/es6/tooltip/lib/OverflowTooltip.js +29 -49
- package/dist/es6/tooltip/lib/Tooltip.js +21 -42
- package/dist/es6/tooltip/lib/TooltipContainer.js +33 -31
- package/dist/es6/tooltip/lib/useTooltip.js +29 -31
- package/icon/lib/AccentIcon.tsx +5 -6
- package/icon/lib/SystemIcon.tsx +1 -2
- package/icon/lib/SystemIconCircle.tsx +4 -3
- package/icon/lib/utils.ts +0 -8
- package/layout/lib/utils/position.ts +9 -0
- package/modal/lib/ModalBody.tsx +2 -2
- package/modal/lib/ModalCard.tsx +2 -2
- package/modal/lib/ModalHeading.tsx +2 -2
- package/modal/lib/ModalOverlay.tsx +2 -2
- package/package.json +3 -3
- package/tokens/index.ts +3 -3
- package/common/lib/theming/getCanvasTheme.ts +0 -40
- package/dist/commonjs/common/lib/theming/getCanvasTheme.d.ts +0 -28
- package/dist/commonjs/common/lib/theming/getCanvasTheme.d.ts.map +0 -1
- package/dist/commonjs/common/lib/theming/getCanvasTheme.js +0 -42
- package/dist/es6/common/lib/theming/getCanvasTheme.d.ts +0 -28
- package/dist/es6/common/lib/theming/getCanvasTheme.d.ts.map +0 -1
- package/dist/es6/common/lib/theming/getCanvasTheme.js +0 -37
|
@@ -1,31 +1,8 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import * as React from 'react';
|
|
24
2
|
import { CanvasIconTypes } from '@workday/design-assets-types';
|
|
25
3
|
import { Svg } from './Svg';
|
|
26
4
|
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
27
|
-
export
|
|
28
|
-
var width = _a.width, height = _a.height, grow = _a.grow;
|
|
5
|
+
export const graphicStyles = ({ width, height, grow }) => {
|
|
29
6
|
if (grow) {
|
|
30
7
|
return {
|
|
31
8
|
width: '100%',
|
|
@@ -38,7 +15,7 @@ export var graphicStyles = function (_a) {
|
|
|
38
15
|
if (width) {
|
|
39
16
|
return {
|
|
40
17
|
'& svg': {
|
|
41
|
-
width
|
|
18
|
+
width,
|
|
42
19
|
height: '100%',
|
|
43
20
|
},
|
|
44
21
|
};
|
|
@@ -46,17 +23,16 @@ export var graphicStyles = function (_a) {
|
|
|
46
23
|
else if (height) {
|
|
47
24
|
return {
|
|
48
25
|
'& svg': {
|
|
49
|
-
height
|
|
26
|
+
height,
|
|
50
27
|
width: '100%',
|
|
51
28
|
},
|
|
52
29
|
};
|
|
53
30
|
}
|
|
54
31
|
return {};
|
|
55
32
|
};
|
|
56
|
-
export
|
|
33
|
+
export const Graphic = createComponent('span')({
|
|
57
34
|
displayName: 'Graphic',
|
|
58
|
-
Component:
|
|
59
|
-
|
|
60
|
-
return (React.createElement(Svg, __assign({ src: src, styles: graphicStyles({ width: width, height: height, grow: grow }), type: CanvasIconTypes.Graphic, as: Element, ref: ref, shouldMirror: shouldMirror }, elemProps)));
|
|
35
|
+
Component: ({ grow = false, src, width, height, shouldMirror, ...elemProps }, ref, Element) => {
|
|
36
|
+
return (React.createElement(Svg, Object.assign({ src: src, styles: graphicStyles({ width, height, grow }), type: CanvasIconTypes.Graphic, as: Element, ref: ref, shouldMirror: shouldMirror }, elemProps)));
|
|
61
37
|
},
|
|
62
38
|
});
|
|
@@ -1,37 +1,18 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import * as React from 'react';
|
|
24
2
|
import { Svg } from './Svg';
|
|
25
3
|
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
26
|
-
export
|
|
4
|
+
export const Icon = createComponent('span')({
|
|
27
5
|
displayName: 'Icon',
|
|
28
|
-
Component:
|
|
29
|
-
var
|
|
30
|
-
|
|
31
|
-
var iconStyles = __assign({}, styles);
|
|
6
|
+
Component: ({ src, size, styles, type, shouldMirror, ...elemProps }, ref, Element) => {
|
|
7
|
+
var _a;
|
|
8
|
+
const iconStyles = { ...styles };
|
|
32
9
|
if (size) {
|
|
33
|
-
iconStyles['& svg'] =
|
|
10
|
+
iconStyles['& svg'] = {
|
|
11
|
+
...((_a = iconStyles['& svg']) !== null && _a !== void 0 ? _a : {}),
|
|
12
|
+
width: size,
|
|
13
|
+
height: size,
|
|
14
|
+
};
|
|
34
15
|
}
|
|
35
|
-
return (React.createElement(Svg,
|
|
16
|
+
return (React.createElement(Svg, Object.assign({ src: src, type: type, shouldMirror: shouldMirror, as: Element }, elemProps, { ref: ref, styles: iconStyles })));
|
|
36
17
|
},
|
|
37
18
|
});
|
package/dist/es6/icon/lib/Svg.js
CHANGED
|
@@ -1,40 +1,17 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import * as React from 'react';
|
|
24
2
|
import { validateIconType } from './utils';
|
|
25
3
|
import { createComponent, styled } from '@workday/canvas-kit-react/common';
|
|
26
4
|
import { Box } from '@workday/canvas-kit-react/layout';
|
|
27
|
-
|
|
5
|
+
const StyledIconSpan = styled(Box.as('span'))({
|
|
28
6
|
display: 'inline-block',
|
|
29
7
|
'> svg': { display: 'block' },
|
|
30
|
-
},
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
});
|
|
34
|
-
export
|
|
8
|
+
}, ({ shouldMirror, styles }) => ({
|
|
9
|
+
transform: shouldMirror ? 'scaleX(-1)' : undefined,
|
|
10
|
+
...styles,
|
|
11
|
+
}));
|
|
12
|
+
export const Svg = createComponent('span')({
|
|
35
13
|
displayName: 'Svg',
|
|
36
|
-
Component:
|
|
37
|
-
var src = _a.src, type = _a.type, elemProps = __rest(_a, ["src", "type"]);
|
|
14
|
+
Component: ({ src, type, ...elemProps }, ref, Element) => {
|
|
38
15
|
try {
|
|
39
16
|
validateIconType(src, type);
|
|
40
17
|
}
|
|
@@ -42,6 +19,6 @@ export var Svg = createComponent('span')({
|
|
|
42
19
|
console.error(e);
|
|
43
20
|
return null;
|
|
44
21
|
}
|
|
45
|
-
return (React.createElement(StyledIconSpan,
|
|
22
|
+
return (React.createElement(StyledIconSpan, Object.assign({ as: Element, dangerouslySetInnerHTML: { __html: src.svg } }, elemProps, { ref: ref })));
|
|
46
23
|
},
|
|
47
24
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAElE,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC;;;OAGG;IACH,eAAe,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACpC;AAED,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAEH,eAAO,MAAM,UAAU,sFA4CrB,CAAC"}
|
|
@@ -1,68 +1,41 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import * as React from 'react';
|
|
24
2
|
import { iconColors } from '@workday/canvas-kit-react/tokens';
|
|
25
3
|
import { CanvasIconTypes } from '@workday/design-assets-types';
|
|
26
4
|
import { Icon } from './Icon';
|
|
27
|
-
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
},
|
|
50
|
-
});
|
|
51
|
-
};
|
|
52
|
-
export var SystemIcon = createComponent('span')({
|
|
5
|
+
import { createComponent, getColor } from '@workday/canvas-kit-react/common';
|
|
6
|
+
export const systemIconStyles = ({ accent, accentHover, background = 'transparent', backgroundHover = 'transparent', color = iconColors.standard, colorHover = iconColors.hover, fill, fillHover, }) => ({
|
|
7
|
+
'& .wd-icon-fill': {
|
|
8
|
+
fill: getColor(fill) || getColor(color),
|
|
9
|
+
},
|
|
10
|
+
':hover .wd-icon-fill': {
|
|
11
|
+
fill: getColor(fillHover) || getColor(colorHover),
|
|
12
|
+
},
|
|
13
|
+
'& .wd-icon-accent, & .wd-icon-accent2': {
|
|
14
|
+
fill: getColor(accent) || getColor(color),
|
|
15
|
+
},
|
|
16
|
+
':hover .wd-icon-accent, :hover .wd-icon-accent2': {
|
|
17
|
+
fill: getColor(accentHover) || getColor(colorHover),
|
|
18
|
+
},
|
|
19
|
+
'& .wd-icon-background': {
|
|
20
|
+
fill: getColor(background),
|
|
21
|
+
},
|
|
22
|
+
':hover .wd-icon-background': {
|
|
23
|
+
fill: getColor(backgroundHover),
|
|
24
|
+
},
|
|
25
|
+
});
|
|
26
|
+
export const SystemIcon = createComponent('span')({
|
|
53
27
|
displayName: 'SystemIcon',
|
|
54
|
-
Component:
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
fillHover: fillHover,
|
|
28
|
+
Component: ({ background = 'transparent', backgroundHover = 'transparent', color = iconColors.standard, colorHover = iconColors.hover, icon, accent, accentHover, fill, fillHover, size, shouldMirror, ...elemProps }, ref, Element) => {
|
|
29
|
+
const style = systemIconStyles({
|
|
30
|
+
accent,
|
|
31
|
+
accentHover,
|
|
32
|
+
background,
|
|
33
|
+
backgroundHover,
|
|
34
|
+
color,
|
|
35
|
+
colorHover,
|
|
36
|
+
fill,
|
|
37
|
+
fillHover,
|
|
65
38
|
});
|
|
66
|
-
return (React.createElement(Icon,
|
|
39
|
+
return (React.createElement(Icon, Object.assign({ src: icon, type: CanvasIconTypes.System, size: size, as: Element, shouldMirror: shouldMirror, ref: ref, styles: style }, elemProps)));
|
|
67
40
|
},
|
|
68
41
|
});
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { SystemIconProps } from './SystemIcon';
|
|
2
2
|
import { CanvasSystemIcon } from '@workday/design-assets-types';
|
|
3
|
+
import { SystemPropValues } from '@workday/canvas-kit-react/layout';
|
|
3
4
|
export declare enum SystemIconCircleSize {
|
|
4
5
|
xs = 16,
|
|
5
6
|
s = 24,
|
|
@@ -13,7 +14,7 @@ export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirr
|
|
|
13
14
|
* The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
|
|
14
15
|
* @default colors.soap300
|
|
15
16
|
*/
|
|
16
|
-
background?:
|
|
17
|
+
background?: SystemPropValues['color'];
|
|
17
18
|
/**
|
|
18
19
|
* The icon to display from `@workday/canvas-accent-icons-web`.
|
|
19
20
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAElE,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IAClF;;;OAGG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA4BD,eAAO,MAAM,gBAAgB,4FA8B3B,CAAC"}
|
|
@@ -1,31 +1,9 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import * as React from 'react';
|
|
24
2
|
import styled from '@emotion/styled';
|
|
25
3
|
import isPropValid from '@emotion/is-prop-valid';
|
|
26
4
|
import { colors, borderRadius } from '@workday/canvas-kit-react/tokens';
|
|
27
5
|
import { SystemIcon } from './SystemIcon';
|
|
28
|
-
import { createComponent, pickForegroundColor } from '@workday/canvas-kit-react/common';
|
|
6
|
+
import { createComponent, getColor, pickForegroundColor } from '@workday/canvas-kit-react/common';
|
|
29
7
|
export var SystemIconCircleSize;
|
|
30
8
|
(function (SystemIconCircleSize) {
|
|
31
9
|
SystemIconCircleSize[SystemIconCircleSize["xs"] = 16] = "xs";
|
|
@@ -35,8 +13,8 @@ export var SystemIconCircleSize;
|
|
|
35
13
|
SystemIconCircleSize[SystemIconCircleSize["xl"] = 64] = "xl";
|
|
36
14
|
SystemIconCircleSize[SystemIconCircleSize["xxl"] = 120] = "xxl";
|
|
37
15
|
})(SystemIconCircleSize || (SystemIconCircleSize = {}));
|
|
38
|
-
|
|
39
|
-
shouldForwardProp:
|
|
16
|
+
const Container = styled('div', {
|
|
17
|
+
shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
|
|
40
18
|
})({
|
|
41
19
|
display: 'flex',
|
|
42
20
|
alignItems: 'center',
|
|
@@ -50,25 +28,18 @@ var Container = styled('div', {
|
|
|
50
28
|
width: '100%',
|
|
51
29
|
height: '100%',
|
|
52
30
|
},
|
|
53
|
-
},
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
return ({
|
|
61
|
-
width: size,
|
|
62
|
-
height: size,
|
|
63
|
-
});
|
|
64
|
-
});
|
|
65
|
-
export var SystemIconCircle = createComponent('span')({
|
|
31
|
+
}, ({ background }) => ({
|
|
32
|
+
background: getColor(background),
|
|
33
|
+
}), ({ size }) => ({
|
|
34
|
+
width: size,
|
|
35
|
+
height: size,
|
|
36
|
+
}));
|
|
37
|
+
export const SystemIconCircle = createComponent('span')({
|
|
66
38
|
displayName: 'SystemIconCircle',
|
|
67
|
-
Component:
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
return (React.createElement(Container, __assign({ background: background, size: size }, elemProps),
|
|
39
|
+
Component: ({ background = colors.soap200, size = SystemIconCircleSize.l, icon, shouldMirror, ...elemProps }, ref, Element) => {
|
|
40
|
+
const iconColor = pickForegroundColor(background, 'rgba(0,0,0,0.65)', colors.frenchVanilla100);
|
|
41
|
+
const iconSize = size * 0.625;
|
|
42
|
+
return (React.createElement(Container, Object.assign({ background: background, size: size }, elemProps),
|
|
72
43
|
React.createElement(SystemIcon, { icon: icon, color: iconColor, colorHover: iconColor, as: Element, size: iconSize, ref: ref, shouldMirror: shouldMirror })));
|
|
73
44
|
},
|
|
74
45
|
});
|
|
@@ -1,5 +1,3 @@
|
|
|
1
1
|
import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
|
|
2
|
-
import { CanvasColor } from '@workday/canvas-kit-react/tokens';
|
|
3
2
|
export declare function validateIconType(icon: CanvasIcon, expectedType: CanvasIconTypes): void;
|
|
4
|
-
export declare function getColor(value?: CanvasColor | string): string | undefined;
|
|
5
3
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../icon/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../icon/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAEzE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,eAAe,QAI/E"}
|
|
@@ -1,12 +1,5 @@
|
|
|
1
|
-
import { colors } from '@workday/canvas-kit-react/tokens';
|
|
2
1
|
export function validateIconType(icon, expectedType) {
|
|
3
2
|
if (icon.type !== expectedType) {
|
|
4
|
-
throw icon.name
|
|
3
|
+
throw `${icon.name}: Icon type "${icon.type}" does not match expected type "${expectedType}"`;
|
|
5
4
|
}
|
|
6
5
|
}
|
|
7
|
-
export function getColor(value) {
|
|
8
|
-
if (value in colors) {
|
|
9
|
-
return colors[value];
|
|
10
|
-
}
|
|
11
|
-
return value;
|
|
12
|
-
}
|
|
@@ -1,25 +1,3 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import * as React from 'react';
|
|
24
2
|
import styled from '@emotion/styled';
|
|
25
3
|
import isPropValid from '@emotion/is-prop-valid';
|
|
@@ -36,7 +14,7 @@ import { other } from './utils/other';
|
|
|
36
14
|
import { position } from './utils/position';
|
|
37
15
|
import { space } from './utils/space';
|
|
38
16
|
import { text } from './utils/text';
|
|
39
|
-
|
|
17
|
+
const omittedProps = [
|
|
40
18
|
'display',
|
|
41
19
|
'color',
|
|
42
20
|
'height',
|
|
@@ -58,7 +36,7 @@ var omittedProps = [
|
|
|
58
36
|
'whiteSpace',
|
|
59
37
|
'wordBreak',
|
|
60
38
|
];
|
|
61
|
-
|
|
39
|
+
const shouldForwardProp = (prop) => {
|
|
62
40
|
return isPropValid(prop) && !omittedProps.includes(prop);
|
|
63
41
|
};
|
|
64
42
|
/**
|
|
@@ -79,7 +57,7 @@ var shouldForwardProp = function (prop) {
|
|
|
79
57
|
* <StyledHeader color='red'>Hello World</StyledHeader>
|
|
80
58
|
* ```
|
|
81
59
|
*/
|
|
82
|
-
export
|
|
60
|
+
export const boxStyleFn = (props) => {
|
|
83
61
|
return [
|
|
84
62
|
{
|
|
85
63
|
boxSizing: 'border-box',
|
|
@@ -95,11 +73,11 @@ export var boxStyleFn = function (props) {
|
|
|
95
73
|
position,
|
|
96
74
|
space,
|
|
97
75
|
text,
|
|
98
|
-
].reduce(
|
|
76
|
+
].reduce((result, style) => {
|
|
99
77
|
// @ts-ignore
|
|
100
|
-
|
|
78
|
+
const temp = typeof style === 'function' ? style(props) : style;
|
|
101
79
|
// eslint-disable-next-line guard-for-in
|
|
102
|
-
for (
|
|
80
|
+
for (const key in temp) {
|
|
103
81
|
// @ts-ignore
|
|
104
82
|
result[key] = temp[key];
|
|
105
83
|
}
|
|
@@ -107,9 +85,9 @@ export var boxStyleFn = function (props) {
|
|
|
107
85
|
}, {});
|
|
108
86
|
};
|
|
109
87
|
// Meant to be used with elements. The `shouldForwardProps` will remove all style props
|
|
110
|
-
|
|
88
|
+
const StyledBoxElement = styled('div', { shouldForwardProp })(boxStyleFn);
|
|
111
89
|
// Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
|
|
112
|
-
|
|
90
|
+
const StyledBoxComponent = styled('div')(boxStyleFn);
|
|
113
91
|
/**
|
|
114
92
|
* `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
|
|
115
93
|
* It is highly flexible, and its primary purpose is to build other components.
|
|
@@ -127,13 +105,10 @@ var StyledBoxComponent = styled('div')(boxStyleFn);
|
|
|
127
105
|
* );
|
|
128
106
|
*
|
|
129
107
|
*/
|
|
130
|
-
export
|
|
108
|
+
export const Box = createComponent('div')({
|
|
131
109
|
displayName: 'Box',
|
|
132
|
-
Component:
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
|
|
136
|
-
});
|
|
137
|
-
return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
|
|
110
|
+
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
111
|
+
const BoxComponent = useConstant(() => typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent);
|
|
112
|
+
return (React.createElement(BoxComponent, Object.assign({ as: Element, ref: ref }, elemProps), children));
|
|
138
113
|
},
|
|
139
114
|
});
|
|
@@ -1,31 +1,9 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import * as React from 'react';
|
|
24
2
|
import styled from '@emotion/styled';
|
|
25
3
|
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
26
4
|
import { Box } from './Box';
|
|
27
5
|
import { flex } from './utils/flex';
|
|
28
|
-
|
|
6
|
+
const StyledFlex = styled(Box)({
|
|
29
7
|
display: 'flex',
|
|
30
8
|
}, flex);
|
|
31
9
|
/**
|
|
@@ -50,11 +28,10 @@ var StyledFlex = styled(Box)({
|
|
|
50
28
|
* );
|
|
51
29
|
* ```
|
|
52
30
|
*/
|
|
53
|
-
export
|
|
31
|
+
export const Flex = createComponent('div')({
|
|
54
32
|
displayName: 'Flex',
|
|
55
|
-
Component:
|
|
56
|
-
|
|
57
|
-
return (React.createElement(StyledFlex, __assign({ as: Element, ref: ref }, elemProps), children));
|
|
33
|
+
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
34
|
+
return (React.createElement(StyledFlex, Object.assign({ as: Element, ref: ref }, elemProps), children));
|
|
58
35
|
},
|
|
59
36
|
subComponents: {
|
|
60
37
|
Item: Box,
|
|
@@ -1,38 +1,15 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import * as React from 'react';
|
|
24
2
|
import styled from '@emotion/styled';
|
|
25
3
|
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
26
4
|
import { Box } from './Box';
|
|
27
5
|
import { grid } from './utils/grid';
|
|
28
|
-
|
|
6
|
+
const StyledGrid = styled(Box)({
|
|
29
7
|
display: 'grid',
|
|
30
8
|
}, grid);
|
|
31
|
-
|
|
9
|
+
const GridItem = createComponent('div')({
|
|
32
10
|
displayName: 'Grid.Item',
|
|
33
|
-
Component:
|
|
34
|
-
|
|
35
|
-
return (React.createElement(Box, __assign({ as: Element, ref: ref }, elemProps), children));
|
|
11
|
+
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
12
|
+
return (React.createElement(Box, Object.assign({ as: Element, ref: ref }, elemProps), children));
|
|
36
13
|
},
|
|
37
14
|
});
|
|
38
15
|
/**
|
|
@@ -57,11 +34,10 @@ var GridItem = createComponent('div')({
|
|
|
57
34
|
* );
|
|
58
35
|
*```
|
|
59
36
|
*/
|
|
60
|
-
export
|
|
37
|
+
export const Grid = createComponent('div')({
|
|
61
38
|
displayName: 'Grid',
|
|
62
|
-
Component:
|
|
63
|
-
|
|
64
|
-
return (React.createElement(StyledGrid, __assign({ as: Element, ref: ref }, elemProps), children));
|
|
39
|
+
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
40
|
+
return (React.createElement(StyledGrid, Object.assign({ as: Element, ref: ref }, elemProps), children));
|
|
65
41
|
},
|
|
66
42
|
subComponents: {
|
|
67
43
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
|
|
2
|
-
export
|
|
2
|
+
export const backgroundStyleFnConfigs = [
|
|
3
3
|
{
|
|
4
4
|
name: 'background',
|
|
5
5
|
properties: ['background'],
|
|
@@ -36,7 +36,7 @@ export var backgroundStyleFnConfigs = [
|
|
|
36
36
|
system: 'none',
|
|
37
37
|
},
|
|
38
38
|
];
|
|
39
|
-
export
|
|
39
|
+
export const backgroundFns = buildStyleFns(backgroundStyleFnConfigs);
|
|
40
40
|
/**
|
|
41
41
|
* A style prop function that takes component props and returns border styles.
|
|
42
42
|
* Some props, such as background and backgroundColor, are connected to our design tokens.
|
|
@@ -51,4 +51,4 @@ export var backgroundFns = buildStyleFns(backgroundStyleFnConfigs);
|
|
|
51
51
|
* );
|
|
52
52
|
*```
|
|
53
53
|
*/
|
|
54
|
-
export
|
|
54
|
+
export const background = buildStylePropFn(backgroundFns);
|