{ "meta": { "generatedAt": "2026-09-15T17:09:33.170Z", "canvasKitVersion": "16.1.1", "releaseChannel": "prerelease/major", "storybookUrl": "https://5d854c26ba934e0020f5e98a-edwwbsoyhb.chromatic.com/", "sources": [ { "package": "@workday/canvas-kit-react", "version": "16.1.1", "channel": "production", "path": "modules/react" }, { "package": "@workday/canvas-kit-preview-react", "version": "16.1.1", "channel": "production", "path": "modules/preview-react" }, { "package": "@workday/canvas-kit-labs-react", "version": "16.1.1", "channel": "production", "path": "modules/labs-react" } ] }, "components": [ { "name": "ActionBar", "slug": "action-bar", "packageName": "@workday/canvas-kit-react", "subpath": "action-bar", "canonicalImport": "@workday/canvas-kit-react/action-bar", "status": "production", "exports": [ "ActionBar", "ActionBarProps", "useActionBarModel" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "action-bar", "action-bar", "action-bar" ], "storySlug": "action-bar" }, { "name": "AiIngressButton", "packageName": "@workday/canvas-kit-labs-react", "subpath": "ai-ingress-button", "canonicalImport": "@workday/canvas-kit-labs-react/ai-ingress-button", "status": "labs", "exports": [ "AIIngressButton", "AIIngressButtonProps", "AIIngressButtonStencil", "getAIIngressIcon" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "ai-ingress-button", "ai-ingress-button", "ai-ingress-button-(ai)", "ingress-button" ] }, { "name": "Avatar", "slug": "avatar", "packageName": "@workday/canvas-kit-react", "subpath": "avatar", "canonicalImport": "@workday/canvas-kit-react/avatar", "status": "production", "exports": [ "Avatar", "AvatarImage", "AvatarImageProps", "AvatarName", "AvatarNameProps", "AvatarProps", "BaseAvatar", "BaseAvatarProps", "avatarImageStencil", "avatarNameStencil", "avatarStencil", "baseAvatarStencil", "getInitialsFromName" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "avatar", "avatar", "avatar" ], "storySlug": "avatar" }, { "name": "Badge", "packageName": "@workday/canvas-kit-react", "subpath": "badge", "canonicalImport": "@workday/canvas-kit-react/badge", "status": "production", "exports": [ "CountBadge", "CountBadgeProps" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "badge", "badge" ] }, { "name": "Banner", "slug": "banner", "packageName": "@workday/canvas-kit-react", "subpath": "banner", "canonicalImport": "@workday/canvas-kit-react/banner", "status": "production", "exports": [ "Banner", "BannerProps", "bannerStencil", "getPaletteColors", "useBannerActionText", "useBannerIcon", "useBannerLabel", "useBannerModel", "useThemedPalette" ], "deprecated": false, "recommended": true, "deprecatedExports": [ { "name": "getPaletteColors", "message": "⚠️ `getPaletteColors` is deprecated. Use CSS variables from `@workday/canvas-tokens-web` instead. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)." }, { "name": "useThemedPalette", "message": "⚠️ `useThemedPalette` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)." } ], "deprecatedProps": [], "aliases": [ "banner", "banner", "banner" ], "storySlug": "banner" }, { "name": "Breadcrumbs", "slug": "breadcrumbs", "packageName": "@workday/canvas-kit-react", "subpath": "breadcrumbs", "canonicalImport": "@workday/canvas-kit-react/breadcrumbs", "status": "production", "exports": [ "Breadcrumbs", "BreadcrumbsProps", "useBreadcrumbsModel" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "breadcrumbs", "breadcrumbs", "breadcrumbs" ], "storySlug": "breadcrumbs" }, { "name": "Button", "packageName": "@workday/canvas-kit-react", "subpath": "button", "canonicalImport": "@workday/canvas-kit-react/button", "status": "production", "exports": [ "BaseButton", "BaseButtonProps", "ButtonColors", "ButtonContainerProps", "ButtonSizes", "ButtonStateColors", "DeleteButton", "DeleteButtonProps", "ExternalHyperlink", "ExternalHyperlinkProps", "Hyperlink", "HyperlinkProps", "IconPositions", "PrimaryButton", "PrimaryButtonProps", "SecondaryButton", "SecondaryButtonProps", "TertiaryButton", "TertiaryButtonProps", "ToolbarDropdownButton", "ToolbarDropdownButtonProps", "ToolbarIconButton", "ToolbarIconButtonProps", "buttonColorPropVars", "buttonStencil", "externalHyperlinkStencil", "hyperlinkStencil", "toolbarDropdownButtonStencil", "toolbarIconButtonStencil" ], "deprecated": false, "recommended": true, "deprecatedExports": [ { "name": "ButtonSizes", "message": "The object used for passing in colors to the ButtonContainer / export interface ButtonStateColors { background?: string; border?: string; icon?: string; iconFill?: boolean; label?: string; opacity?: string; } export interface ButtonColors { default?: ButtonStateColors; hover?: ButtonStateColors; active?: ButtonStateColors; focus?: ButtonStateColors & { /** @deprecated This option is no longer supported at run time and will be removed from the type interface in a v12. If you want to customize the focus ring, use `boxShadowInner` and `boxShadowOuter` to update the inner and outer colors of the focus ring. Use with caution. / focusRing?: CSSObject; /** Updates the color of the inner `box-shadow` within a focus ring. / boxShadowInner?: string; /** Updates the color of the outer `box-shadow` within a focus ring. / boxShadowOuter?: string; }; disabled?: ButtonStateColors; } /** There are four button sizes: `extraSmall`, `small`, `medium`, and `large`. If no size is provided, it will default to `medium`. @default 'medium'" } ], "deprecatedProps": [ { "name": "focusRing", "message": "The object used for passing in colors to the ButtonContainer / export interface ButtonStateColors { background?: string; border?: string; icon?: string; iconFill?: boolean; label?: string; opacity?: string; } export interface ButtonColors { default?: ButtonStateColors; hover?: ButtonStateColors; active?: ButtonStateColors; focus?: ButtonStateColors & { /** @deprecated This option is no longer supported at run time and will be removed from the type interface in a v12. If you want to customize the focus ring, use `boxShadowInner` and `boxShadowOuter` to update the inner and outer colors of the focus ring. Use with caution.", "source": "modules/react/button/lib/types.ts" } ], "aliases": [ "button", "button", "buttons", "hyperlink", "link" ] }, { "name": "Card", "slug": "card", "packageName": "@workday/canvas-kit-react", "subpath": "card", "canonicalImport": "@workday/canvas-kit-react/card", "status": "production", "exports": [ "Card", "CardBody", "CardBodyProps", "CardHeading", "CardHeadingProps", "CardProps", "cardBodyStencil", "cardHeadingStencil", "cardStencil" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "card", "card", "card" ], "storySlug": "card" }, { "name": "Checkbox", "slug": "checkbox", "packageName": "@workday/canvas-kit-react", "subpath": "checkbox", "canonicalImport": "@workday/canvas-kit-react/checkbox", "status": "production", "exports": [ "Checkbox", "CheckboxProps" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "checkbox", "checkbox", "checkbox" ], "storySlug": "checkbox" }, { "name": "Collection", "packageName": "@workday/canvas-kit-react", "subpath": "collection", "canonicalImport": "@workday/canvas-kit-react/collection", "status": "production", "exports": [ "AsyncCollectionConfig", "CollectionLoader", "Item", "ListBox", "ListBoxProps", "ListItemProps", "ListProps", "ListRenderItemContext", "LoadParams", "LoadReturn", "NavigationManager", "NavigationRequestor", "Orientation", "SelectedIds", "Selection", "SelectionManager", "defaultGetId", "focusOnCurrentCursor", "getCursor", "getHiddenIds", "getPageNumber", "getPagesToLoad", "isCursor", "isElementDisabled", "isSelected", "keyboardEventToCursorEvents", "listBoxContainerStencil", "listItemRemove", "multiSelectionManager", "navigationManager", "singleSelectionManager", "useGridModel", "useListActiveDescendant", "useListItemActiveDescendant", "useListItemAllowChildStrings", "useListItemRegister", "useListItemRemoveOnDeleteKey", "useListItemRovingFocus", "useListItemSelect", "useListKeyboardHandler", "useListLoader", "useListModel", "useListRenderItems", "useListResetCursorOnBlur", "useOverflowListItemMeasure", "useOverflowListMeasure", "useOverflowListModel", "useOverflowListTarget", "wrappingNavigationManager" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [ { "name": "containerWidth", "message": "Use `containerSize` instead", "source": "modules/react/collection/lib/useOverflowListModel.tsx" }, { "name": "itemWidthCache", "message": "Allows us to prioritize showing the selected item */ let selectedKey: undefined | string; /** Tally of combined item widths. We'll add items that fit until the container is full */ let itemSize = 0; /** Tally ids that won't fit inside the container. These will be used by components to hide elements that won't fit in the container */ const hiddenIds: string[] = []; /** Track if gap should be calculated since gap doesn't apply to the width of the first item, only consecutive items */ let shouldAddGap = false; if (selectedIds !== 'all' && selectedIds.length) { const candidate = selectedIds[0]; const fallbackId = items?.[0]?.id; // Only pin own cached sizes so unmeasured ids and inherited names cannot yield NaN. if (Object.prototype.hasOwnProperty.call(itemSizeCache, candidate)) { selectedKey = candidate; } else if ( fallbackId !== undefined && Object.prototype.hasOwnProperty.call(itemSizeCache, fallbackId) ) { selectedKey = fallbackId; } } if ( Object.keys(itemSizeCache).reduce( (sum, key, index) => sum + itemSizeCache[key] + (index > 0 ? containerGap : 0), 0 ) <= containerSize ) { // All items fit, return empty array return []; } else if (selectedKey) { if (itemSizeCache[selectedKey] + overflowTargetSize > containerSize) { // If the selected item doesn't fit, only show overflow (all items hidden) return Object.keys(itemSizeCache); } else { // at least the selected item and overflow target fit. Update our itemWidth with the sum itemSize += itemSizeCache[selectedKey] + overflowTargetSize; shouldAddGap = true; } } else { itemSize += overflowTargetSize; } for (const key in itemSizeCache) { if (key !== selectedKey) { itemSize += itemSizeCache[key] + (shouldAddGap ? containerGap : 0); shouldAddGap = true; if (itemSize > containerSize) { hiddenIds.push(key); } } } return hiddenIds; } export const useOverflowListModel = createModelHook({ defaultConfig: { ...useSelectionListModel.defaultConfig, initialHiddenIds: [] as string[], containerWidth: 0, /** Determines if overflow should actually occur. For example, touch devices are better at side-scrolling than mouse devices. In these cases, it makes sense to disable overflowing. @default true / shouldCalculateOverflow: true, }, requiredConfig: useSelectionListModel.requiredConfig, contextOverride: useSelectionListModel.Context, })(config => { const shouldCalculateOverflow = config.shouldCalculateOverflow === undefined ? true : config.shouldCalculateOverflow; const [hiddenIds, setHiddenIds] = React.useState(config.initialHiddenIds); const [itemSizeCache, setItemSizeCache] = React.useState>({}); const [containerSize, setContainerSize] = React.useState(0); const [containerGap, setContainerGap] = React.useState(0); const containerSizeRef = React.useRef(0); const itemSizeCacheRef = React.useRef(itemSizeCache); const [overflowTargetWidth, setOverflowTargetWidth] = React.useState(0); const overflowTargetSizeRef = React.useRef(0); const internalHiddenIds = shouldCalculateOverflow ? hiddenIds : []; // Cursors skip over disabled ids, but know nothing of hidden ids. We'll go ahead and disable // hidden ids as well const nonInteractiveIds = (config.nonInteractiveIds || []).concat(internalHiddenIds); const model = useSelectionListModel({ ...config, nonInteractiveIds, }); const state = { ...model.state, hiddenIds: internalHiddenIds, itemSizeCache, /** @deprecated Use `itemSizeCache` instead", "source": "modules/react/collection/lib/useOverflowListModel.tsx" } ], "aliases": [ "collection", "collection" ] }, { "name": "ColorPicker", "packageName": "@workday/canvas-kit-react", "subpath": "color-picker", "canonicalImport": "@workday/canvas-kit-react/color-picker", "status": "production", "exports": [ "ColorInput", "ColorInputProps", "ColorPreview", "ColorPreviewProps", "ColorSwatch", "ColorSwatchProps", "colorPickerColorSwatchStencil", "colorPickerHexInputStencil", "colorPreviewStencil" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "color-picker", "color-picker" ] }, { "name": "ColorPicker", "packageName": "@workday/canvas-kit-preview-react", "subpath": "color-picker", "canonicalImport": "@workday/canvas-kit-preview-react/color-picker", "status": "preview", "exports": [ "ColorPicker", "ColorPickerProps" ], "deprecated": false, "recommended": false, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "color-picker", "color-picker" ] }, { "name": "Combobox", "packageName": "@workday/canvas-kit-react", "subpath": "combobox", "canonicalImport": "@workday/canvas-kit-react/combobox", "status": "production", "exports": [ "Combobox", "ComboboxCard", "ComboboxCardProps", "ComboboxMenuList", "ComboboxMenuListProps", "ComboboxProps", "useComboboxCard", "useComboboxInput", "useComboboxInputArbitrary", "useComboboxInputConstrained", "useComboboxInputOpenWithArrowKeys", "useComboboxKeyboardTypeAhead", "useComboboxListKeyboardHandler", "useComboboxLoader", "useComboboxMenuItem", "useComboboxMenuList", "useComboboxModel", "useComboboxMoveCursorToSelected", "useComboboxResetCursorToSelected", "useInputModel", "useSelectInput", "useSetPopupWidth" ], "deprecated": false, "recommended": true, "deprecatedExports": [ { "name": "useComboboxMenuItem", "message": "Use `useMenuOption` instead" } ], "deprecatedProps": [], "aliases": [ "combobox", "combobox" ] }, { "name": "Dialog", "slug": "dialog", "packageName": "@workday/canvas-kit-react", "subpath": "dialog", "canonicalImport": "@workday/canvas-kit-react/dialog", "status": "production", "exports": [ "Dialog", "DialogProps", "useDialogCard", "useDialogModel", "useDialogPopper" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "dialog", "dialog", "dialog" ], "storySlug": "dialog" }, { "name": "Disclosure", "packageName": "@workday/canvas-kit-react", "subpath": "disclosure", "canonicalImport": "@workday/canvas-kit-react/disclosure", "status": "production", "exports": [ "Visibility", "useDisclosureModel" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "disclosure", "disclosure" ] }, { "name": "Divider", "slug": "divider", "packageName": "@workday/canvas-kit-preview-react", "subpath": "divider", "canonicalImport": "@workday/canvas-kit-preview-react/divider", "status": "preview", "exports": [ "Divider", "DividerProps", "dividerStencil" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "divider", "divider", "divider" ], "storySlug": "divider" }, { "name": "Expandable", "slug": "expandable", "packageName": "@workday/canvas-kit-react", "subpath": "expandable", "canonicalImport": "@workday/canvas-kit-react/expandable", "status": "production", "exports": [ "Expandable", "ExpandableProps", "expandableContainerStencil", "useExpandableContent", "useExpandableIcon", "useExpandableModel", "useExpandableTarget" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "expandable", "expandable", "expandable" ], "storySlug": "expandable" }, { "name": "FormField", "slug": "form-field", "packageName": "@workday/canvas-kit-react", "subpath": "form-field", "canonicalImport": "@workday/canvas-kit-react/form-field", "status": "production", "exports": [ "FormField", "FormFieldGroup", "FormFieldGroupInput", "FormFieldGroupInputProps", "FormFieldGroupLabel", "FormFieldGroupLabelProps", "FormFieldGroupList", "FormFieldGroupListProps", "FormFieldGroupProps", "FormFieldHint", "FormFieldLabel", "FormFieldLabelProps", "FormFieldProps", "formFieldGroupLabelStencil", "formFieldHintStencil", "formFieldLabelStencil", "formFieldStencil", "useFormFieldGroupInput", "useFormFieldHint", "useFormFieldInput", "useFormFieldLabel", "useFormFieldModel", "useFormFieldOrientation" ], "deprecated": false, "recommended": true, "deprecatedExports": [ { "name": "useFormFieldOrientation", "message": "Adds the necessary layout props to a `FormField` component. @deprecated" } ], "deprecatedProps": [], "aliases": [ "form-field", "form-field", "form-field" ], "storySlug": "form-field" }, { "name": "Icon", "packageName": "@workday/canvas-kit-react", "subpath": "icon", "canonicalImport": "@workday/canvas-kit-react/icon", "status": "production", "exports": [ "AccentIcon", "AccentIconProps", "AccentIconStyles", "AppletIcon", "AppletIconProps", "AppletIconStyles", "ExpressiveIcon", "ExpressiveIconProps", "Graphic", "GraphicProps", "GraphicStyles", "Svg", "SvgProps", "SystemIcon", "SystemIconCircle", "SystemIconCircleProps", "SystemIconCircleSize", "SystemIconProps", "accentIconStencil", "accentIconStyles", "appletIconStencil", "appletIconStyles", "base64Encoded", "expressiveIconStencil", "graphicImageStencil", "graphicStencil", "graphicStyles", "svgStencil", "systemIconCircleStencil", "systemIconStencil" ], "deprecated": false, "recommended": true, "deprecatedExports": [ { "name": "AccentIcon", "message": "Deprecated in v11 */ const transformColorNameToToken = (color?: string) => { const {legacy, sana, ...baseTokens} = base; if (color && color in baseTokens) { return cssVar(baseTokens[color as keyof typeof baseTokens]); } if (color?.startsWith('--')) { return cssVar(color); } return color; }; /** @deprecated ⚠️ `AccentIcon` is deprecated and will be removed in a future major version. Deprecated in v15.0.0." }, { "name": "AccentIconProps", "message": "The fill color of the AccentIcon. @default system.legacy.color.bg.primary.strong / color?: SystemPropValues['color']; /** If true, set the background fill of the AccentIcon to `transparent`. If false, set the background fill of the AccentIcon to `system.color.bg.alt.soft`. @default false / transparent?: boolean; } /** @deprecated ⚠️ `AccentIconProps` is deprecated and will be removed in a future major version. Deprecated in v15.0.0." }, { "name": "accentIconStencil", "message": "⚠️ `accentIconStencil` is deprecated and will be removed in a future major version. Deprecated in v15.0.0." }, { "name": "accentIconStyles", "message": "The fill color of the AccentIcon. @default system.legacy.color.bg.primary.strong / color?: SystemPropValues['color']; /** If true, set the background fill of the AccentIcon to `transparent`. If false, set the background fill of the AccentIcon to `system.color.bg.alt.soft`. @default false / transparent?: boolean; /** The icon to display from `@workday/canvas-accent-icons-web`. / icon: CanvasAccentIcon; /** The size of the AccentIcon in `px`. @default 56 / size?: number; } /** @deprecated `accentIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `accentIconStencil` instead. Deprecated in v11.0.0." }, { "name": "AccentIconStyles", "message": "Interface `AccentIconStyles` will be removed in a future version. All props will be moved inside `AccentIconProps`. Consider use the new tokens set to set `color` prop: `color={system.legacy.color.bg.primary.strong}`. Deprecated in v15.0.0." }, { "name": "AppletIcon", "message": "⚠️ `AppletIcon` is deprecated and will be removed in a future major version. Deprecated in v15.0.0." }, { "name": "AppletIconProps", "message": "⚠️ `AppletIconProps` is deprecated and will be removed in a future major version. Deprecated in v15.0.0." }, { "name": "appletIconStencil", "message": "The icon to display from `@workday/canvas-applet-icons-web`. / icon: CanvasAppletIcon; /** The size of the AppletIcon in `px`. @default 92 / size?: number; } /** @deprecated ⚠️ `appletIconStencil` is deprecated and will be removed in a future major version. Deprecated in v15.0.0." }, { "name": "appletIconStyles", "message": "The icon color hue. Must use a member of the `AppletIcon.Colors` static enum. @default AppletIcon.Colors.Blueberry / color?: BrandingColor; } /** @deprecated `appletIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `appletIconStencil` instead." }, { "name": "AppletIconStyles", "message": "Interface `AppletIconStyles` will be removed in a future version. All props will be moved inside `AppletIconProps`." }, { "name": "graphicStencil", "message": "`graphicStencil` will be removed in a future version. Use `graphicImageStencil` instead." }, { "name": "graphicStyles", "message": "The width of the Graphic in `px`. The Graphic's `width` takes precedence over its `height` in order to preserve its proportions. @default width of graphic / width?: number | string; /** The height of the Graphic in `px`. If the Graphic's `height` is set, its `width` will be set to `100%`. @default height of graphic / height?: number | string; /** If true, expand the Graphic to fit its container. `grow` takes precedence over both `width` and `height`. @default false / grow?: boolean; } export interface GraphicProps extends CSProps { /** The height of the graphic / height?: number | string; /** The width of the graphic / width?: number | string; /** If true, expand the Graphic to fit its container. `grow` takes precedence over both `width` and `height`. / grow?: boolean; /** The source of the graphic. If `svg` is provided, it will create a Base64-encoded ASCII string from a binary string (i.e., a string in which each character in the string is treated as a byte of binary data) and pass it to an image `src`. If `url` is provided, it will be rendered as an image via the `src` property. / src: { svg?: string; url?: string; }; /** The `srcset` attribute for the image. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset) for more information. **Note:** If the `srcset` attribute uses `width` descriptors, the `sizes` attribute must also be present, or the `srcset` itself will be ignored. / srcset?: React.ImgHTMLAttributes['srcSet']; /** The `alt` attribute for the image. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#usage_notes) for more information. / alt?: React.ImgHTMLAttributes['alt']; /** The `sizes` attribute for the image. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) for more information. / sizes?: React.ImgHTMLAttributes['sizes']; } /** @deprecated `graphicStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `graphicStencil` instead." }, { "name": "GraphicStyles", "message": "Interface `GraphicStyles` will be removed in a future version. `grow` prop will be moved inside `GraphicProps`." }, { "name": "resolveSize", "message": "If set to `true`, transform the SVG's x-axis to mirror the graphic. Use this if you want to always mirror the icon regardless of the content direction. If the SVG should mirror only when in an right-to-left language, use `shouldMirrorInRTL` instead. @default false / shouldMirror?: boolean; /** If set to `true`, transform the SVG's x-axis to mirror the graphic when the content direction is `rtl`. Icons don't have enough context to know if they should be mirrored in all cases. Setting this to `true` indicates the icon should be mirrored in right-to-left languages. @default false / shouldMirrorInRTL?: boolean; } export const svgStencil = createStencil({ vars: { /** sets width of svg element @deprecated use size instead or svg selector / width: '', /** sets height of svg element @deprecated use size instead or svg selector / height: '', /** sets width and height of svg element */ size: '', }, base: ({height, size, width}) => ({ display: 'inline-block', '> svg': { display: 'block', width: cssVar(width, size), height: cssVar(height, size), }, }), modifiers: { shouldMirror: { true: { transform: 'scaleX(-1)', }, }, shouldMirrorInRTL: { true: { '&:dir(rtl)': { transform: 'scaleX(-1)', }, }, }, }, }); /** Resolves the size of the SVG based on the size token or string / numeric (px) value. @param size - The size variant or string / numeric (px) value. @param tokens - The tokens to use to resolve the size. @returns The resolved size." }, { "name": "SpanProps", "message": "Deprecated in v15.0.0." }, { "name": "SystemIconCircleProps", "message": "Mapping utility for the SystemIconCircleSize enum to the systemLegacy size tokens. @deprecated Use tokens instead. Deprecated in v15.0.0. */ const sizes = { xs: system.legacy.size.xxxs, s: system.legacy.size.xs, m: system.legacy.size.sm, l: system.legacy.size.md, xl: system.legacy.size.xxl, xxl: px2rem(120), }; type SystemIconCircleCommonProps = { /** The icon to display from `@workday/canvas-system-icons-web`. / icon: CanvasSystemIcon | LegacyCanvasSystemIcon; /** The size token of the SystemIconCircle. @default SystemIconCircleSize.l / size?: SystemIconCircleSize | string | number; /** If set to `true`, transform the SVG's x-axis to mirror the graphic. Use this if you want to always mirror the icon regardless of the content direction. If the SVG should mirror only when in an right-to-left language, use `shouldMirrorInRTL` instead. @default false / shouldMirror?: boolean; /** If set to `true`, transform the SVG's x-axis to mirror the graphic when the content direction is `rtl`. Icons don't have enough context to know if they should be mirrored in all cases. Setting this to `true` indicates the icon should be mirrored in right-to-left languages. @default false / shouldMirrorInRTL?: boolean; /** If set to `true`, the icon will be displayed in inverse mode. @default false / inverse?: boolean; } & CSProps; /** Circle fill and icon color. When `background` is set, `color` is required so foreground/background stay paired for contrast." }, { "name": "validateIconType", "message": "Deprecated in v15.0.0." } ], "deprecatedProps": [ { "name": "color", "message": "If true, set the background fill of the AccentIcon to `transparent`. If false, set the background fill of the AccentIcon to `system.color.bg.alt.soft`. @default false / transparent?: boolean; } /** @deprecated ⚠️ `AccentIconProps` is deprecated and will be removed in a future major version. Deprecated in v15.0.0. / export interface AccentIconProps extends Omit { /** The fill color of the AccentIcon. @default system.legacy.color.bg.primary.strong", "source": "modules/react/icon/lib/AccentIcon.tsx" }, { "name": "color", "message": "Interface `AppletIconStyles` will be removed in a future version. All props will be moved inside `AppletIconProps`. / export interface AppletIconStyles { /** The icon color hue. Must use a member of the `AppletIcon.Colors` static enum. @default AppletIcon.Colors.Blueberry", "source": "modules/react/icon/lib/AppletIcon.tsx" }, { "name": "height", "message": "sets height of svg element @deprecated use size instead or svg selector", "source": "modules/react/icon/lib/Svg.tsx" }, { "name": "icon", "message": "`appletIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `appletIconStencil` instead. / export const appletIconStyles = ({ color = BrandingColor.Blueberry, }: AppletIconStyles): CSSObject => { // Check if valid color if ( !(Object.keys(BrandingColor) as (keyof typeof BrandingColor)[]) .map(color => BrandingColor[color]) .includes(color) ) { throw Error(`Color \"${color}\" not found`); } const colorNames: {[key: number]: CanvasColor} = { 100: `${color}100` as CanvasColor, 200: `${color}200` as CanvasColor, 300: `${color}300` as CanvasColor, 400: `${color}400` as CanvasColor, 500: `${color}500` as CanvasColor, }; return { '& .color-100': { fill: system.color.fg.inverse, }, '& .color-200': { fill: colors[colorNames[200]], }, '& .color-300': { fill: colors[colorNames[300]], }, '& .color-400': { fill: colors[colorNames[400]], }, '& .color-400-alpha-20': { fill: colors[colorNames[400]], }, '& .color-500': { fill: colors[colorNames[500]], }, }; }; /** @deprecated ⚠️ `AppletIconProps` is deprecated and will be removed in a future major version. Deprecated in v15.0.0. / export interface AppletIconProps extends AppletIconStyles, Pick { /** The icon to display from `@workday/canvas-applet-icons-web`.", "source": "modules/react/icon/lib/AppletIcon.tsx" }, { "name": "icon", "message": "Mapping utility for the SystemIconCircleSize enum to the systemLegacy size tokens. @deprecated Use tokens instead. Deprecated in v15.0.0. */ const sizes = { xs: system.legacy.size.xxxs, s: system.legacy.size.xs, m: system.legacy.size.sm, l: system.legacy.size.md, xl: system.legacy.size.xxl, xxl: px2rem(120), }; type SystemIconCircleCommonProps = { /** The icon to display from `@workday/canvas-system-icons-web`.", "source": "modules/react/icon/lib/SystemIconCircle.tsx" }, { "name": "width", "message": "Interface `GraphicStyles` will be removed in a future version. `grow` prop will be moved inside `GraphicProps`. / export interface GraphicStyles { /** The width of the Graphic in `px`. The Graphic's `width` takes precedence over its `height` in order to preserve its proportions. @default width of graphic", "source": "modules/react/icon/lib/Graphic.tsx" }, { "name": "width", "message": "If set to `true`, transform the SVG's x-axis to mirror the graphic. Use this if you want to always mirror the icon regardless of the content direction. If the SVG should mirror only when in an right-to-left language, use `shouldMirrorInRTL` instead. @default false / shouldMirror?: boolean; /** If set to `true`, transform the SVG's x-axis to mirror the graphic when the content direction is `rtl`. Icons don't have enough context to know if they should be mirrored in all cases. Setting this to `true` indicates the icon should be mirrored in right-to-left languages. @default false / shouldMirrorInRTL?: boolean; } export const svgStencil = createStencil({ vars: { /** sets width of svg element @deprecated use size instead or svg selector", "source": "modules/react/icon/lib/Svg.tsx" } ], "aliases": [ "icon", "icon" ] }, { "name": "InformationHighlight", "slug": "information-highlight", "packageName": "@workday/canvas-kit-react", "subpath": "information-highlight", "canonicalImport": "@workday/canvas-kit-react/information-highlight", "status": "production", "exports": [ "Body", "Icon", "IconProps", "InformationHighlight", "InformationHighlightHeading", "InformationHighlightHeadingProps", "Link", "informationHighlightStencil" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "information-highlight", "information-highlight", "information-highlight" ], "storySlug": "information-highlight" }, { "name": "Kbd", "slug": "kbd", "packageName": "@workday/canvas-kit-labs-react", "subpath": "kbd", "canonicalImport": "@workday/canvas-kit-labs-react/kbd", "status": "labs", "exports": [ "KBD", "KBDItem", "KBDItemProps", "KBDProps", "kbdItemStencil", "kbdStencil", "useKBDModel" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "kbd", "kbd", "kbd" ], "storySlug": "kbd" }, { "name": "Layout", "packageName": "@workday/canvas-kit-react", "subpath": "layout", "canonicalImport": "@workday/canvas-kit-react/layout", "status": "production", "exports": [ "AllStyleProps", "BackgroundStyleProps", "BorderStyleProps", "Box", "BoxProps", "CanvasSystemPropValues", "ColorStyleProps", "CommonStyleProps", "DepthStyleProps", "Flex", "FlexItemStyleProps", "FlexProps", "FlexStyleProps", "Grid", "GridItemProps", "GridItemStyleProps", "GridProps", "GridStyleProps", "LayoutStyleProps", "OtherStyleProps", "PositionStyleProps", "SpaceStyleProps", "SystemPropNames", "SystemPropValues", "TextStyleProps", "background", "backgroundFns", "backgroundStyleFnConfigs", "border", "borderStyleFnConfigs", "boxStyleFn", "color", "colorFns", "colorStyleFnConfigs", "depthStyleFnConfigs", "flex", "flexItem", "flexItemStyleFnConfigs", "flexItemStyleFns", "flexStyleFnConfigs", "flexStyleFns", "grid", "gridItem", "gridItemStyleFnConfigs", "gridItemStyleFns", "gridStyleFnConfigs", "gridStyleFns", "layout", "layoutStyleFnConfigs", "layoutStyleFns", "mergeStyles", "other", "otherStyleFnConfigs", "otherStyleFns", "position", "positionStyleFnConfigs", "positionStyleFns", "spaceStyleFnConfigs", "text", "textStyleFnConfigs", "textStyleFns" ], "deprecated": true, "recommended": false, "deprecatedExports": [ { "name": "AllStyleProps", "message": "All Style Props --- Types for every style prop - common - flex - grid @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs)." }, { "name": "background", "message": "A style prop function that takes component props and returns border styles. Some props, such as background and backgroundColor, are connected to our design tokens. If no `BackgroundStyleProps` are found, it returns an empty object. @example ```tsx const BackgroundExample = () => ( Hello, background styles! ); ``` @deprecated" }, { "name": "backgroundFns", "message": "" }, { "name": "backgroundStyleFnConfigs", "message": "- sets [CSS background property](https://developer.mozilla.org/en-US/docs/Web/CSS/background) - system tokens: `color` @deprecated Use `cs` prop with `system.color.bg.*` tokens / background?: SystemPropValues['color']; /** sets [CSS background-attachment property](https://developer.mozilla.org/en-US/docs/Web/CSS/) @deprecated / backgroundAttachment?: Property.BackgroundAttachment; /** - sets [CSS background-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) - system tokens: `color` @deprecated Use `cs` prop with `system.color.bg.*` tokens / backgroundColor?: SystemPropValues['color']; /** sets [CSS background-image property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) @deprecated / backgroundImage?: Property.BackgroundImage; /** sets [CSS background-position property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) @deprecated / backgroundPosition?: Property.BackgroundPosition; /** sets [CSS background-repeat property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) @deprecated / backgroundRepeat?: Property.BackgroundRepeat; /** sets [CSS background-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) @deprecated / backgroundSize?: Property.BackgroundSize; }; /** @deprecated" }, { "name": "BackgroundStyleProps", "message": "style props to set CSS background properties @deprecated" }, { "name": "border", "message": "A style prop function that takes component props and returns border styles. Some props, such as borderRadius and borderColor, are connected to our design tokens. If no `BorderStyleProps` are found, it returns an empty object. @example ```tsx const BorderExample = () => ( Hello, border styles! ); ``` @deprecated" }, { "name": "borderColorFns", "message": "" }, { "name": "borderColorStyleFnConfigs", "message": "- sets [CSS border-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) - system tokens: `color` @deprecated Use `cs` prop with `system.color.border.*` tokens / borderColor?: SystemPropValues['color']; /** - sets [CSS border-top-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color) - system tokens: `color` @deprecated Use `cs` prop with `system.color.border.*` tokens / borderTopColor?: SystemPropValues['color']; /** - sets [CSS border-right-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color) - no bidirectional support - system tokens: `color` @deprecated Use `cs` prop with `system.color.border.*` tokens / borderRightColor?: SystemPropValues['color']; /** - sets [CSS border-bottom-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color) - system tokens: `color` @deprecated Use `cs` prop with `system.color.border.*` tokens / borderBottomColor?: SystemPropValues['color']; /** - sets [CSS border-left-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color) - no bidirectional support - system tokens: `color` @deprecated Use `cs` prop with `system.color.border.*` tokens / borderLeftColor?: SystemPropValues['color']; /** - sets [CSS border-inline-start-color property ](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color) - bidirectional support - system tokens: `color` @deprecated Use `cs` prop with `system.color.border.*` tokens / borderInlineStartColor?: SystemPropValues['color']; /** - sets [CSS border-inline-end-color property ](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color) - bidirectional support - system tokens: `color` @deprecated Use `cs` prop with `system.color.border.*` tokens / borderInlineEndColor?: SystemPropValues['color']; }; /** @deprecated" }, { "name": "BorderColorStyleProps", "message": "style props to set CSS border color properties @deprecated" }, { "name": "borderLineStyleFnConfigs", "message": "sets [CSS border-collapse property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse) @deprecated / borderCollapse?: Property.BorderCollapse; /** sets [CSS border-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing) @deprecated / borderSpacing?: Property.BorderSpacing; /** sets [CSS border-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) @deprecated / borderStyle?: Property.Border; /** sets [CSS border-top-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style) @deprecated / borderTopStyle?: Property.Border; /** - sets [CSS border-right-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style) - no bidirectional support @deprecated / borderRightStyle?: Property.Border; /** sets [CSS border-bottom-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style) @deprecated / borderBottomStyle?: Property.Border; /** - sets [CSS border-left-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style) - no bidirectional support @deprecated / borderLeftStyle?: Property.Border; /** - sets [CSS border-inline-start-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style) - bidirectional support @deprecated / borderInlineStartStyle?: Property.Border; /** - sets [CSS border-inline-end-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style) - bidirectional support @deprecated / borderInlineEndStyle?: Property.Border; }; /** @deprecated" }, { "name": "borderLineStyleFns", "message": "" }, { "name": "BorderLineStyleProps", "message": "style props to set CSS border style properties @deprecated" }, { "name": "borderRadiusFns", "message": "" }, { "name": "borderRadiusStyleFnConfigs", "message": "- sets [CSS border-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) - system tokens: `shape` @deprecated ⚠️ Please use the `cs` prop with `createStyles` and `createStencil` to apply styles to our components. For more information, view our [Styling docs](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs). / borderRadius?: SystemPropValues['shape']; /** - sets [CSS border-top-left-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius) - system tokens: `shape` @deprecated / borderTopLeftRadius?: SystemPropValues['shape']; /** - sets [CSS border-top-right-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius) - system tokens: `shape` @deprecated / borderTopRightRadius?: SystemPropValues['shape']; /** - sets [CSS border-bottom-left-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius) - system tokens: `shape` @deprecated / borderBottomLeftRadius?: SystemPropValues['shape']; /** - sets [CSS border-bottom-right-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius) - system tokens: `shape` @deprecated / borderBottomRightRadius?: SystemPropValues['shape']; }; /** @deprecated" }, { "name": "BorderRadiusStyleProps", "message": "style props to set CSS border radius properties @deprecated" }, { "name": "borderShorthandFns", "message": "" }, { "name": "borderShorthandStyleFnConfigs", "message": "sets [CSS border property](https://developer.mozilla.org/en-US/docs/Web/CSS/border) @deprecated / border?: Property.Border; /** sets [CSS border-top property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) @deprecated / borderTop?: Property.BorderTop; /** - sets [CSS border-right property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right) - no bidirectional support @deprecated / borderRight?: Property.BorderRight; /** sets [CSS border-bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) @deprecated / borderBottom?: Property.BorderBottom; /** - sets [CSS border-left property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left) - no bidirectional support @deprecated / borderLeft?: Property.BorderLeft; /** - sets [CSS border-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start) - bidirectional support @deprecated / borderInlineStart?: Property.BorderInlineStart; /** - sets [CSS border-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end) - bidirectional support @deprecated / borderInlineEnd?: Property.BorderInlineEnd; }; /** @deprecated" }, { "name": "BorderShorthandStyleProps", "message": "style props to set CSS border properties @deprecated" }, { "name": "borderStyleFnConfigs", "message": "" }, { "name": "BorderStyleProps", "message": "" }, { "name": "borderWidthFns", "message": "" }, { "name": "borderWidthStyleFnConfigs", "message": "sets [CSS border-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) @deprecated / borderWidth?: Property.BorderWidth | number; /** sets [CSS border-top-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) @deprecated / borderTopWidth?: Property.BorderTopWidth | number; /** - sets [CSS border-right-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) - no bidirectional support @deprecated */ borderRightWidth?: Property.BorderRightWidth | number; /** sets [CSS border-bottom-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) @deprecated / borderBottomWidth?: Property.BorderBottomWidth | number; /** - sets [CSS border-left-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) - no bidirectional support @deprecated */ borderLeftWidth?: Property.BorderLeftWidth | number; /** - sets [CSS border-inline-start-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width) - bidirectional support @deprecated */ borderInlineStartWidth?: Property.BorderInlineStartWidth | number; /** - sets [CSS border-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end) - bidirectional support @deprecated */ borderInlineEndWidth?: Property.BorderInlineEndWidth | number; }; /** @deprecated" }, { "name": "BorderWidthStyleProps", "message": "style props to set CSS border width properties @deprecated" }, { "name": "boxStyleFn", "message": "Box Props --- Common style props + children - background - border - color - depth - flexItem - gridItem - layout - other - position - space - text / export type BoxProps = CommonStyleProps & CSProps & { children?: React.ReactNode; }; const omittedProps = [ 'display', 'color', 'height', 'overflow', 'width', 'border', 'background', 'fontSize', 'fontWeight', 'fontFamily', 'letterSpacing', 'lineHeight', 'textAlign', 'opacity', 'textDecoration', 'textOverflow', 'textTransform', 'textShadow', 'whiteSpace', 'wordBreak', ]; /** @deprecated */ const shouldForwardProp = (prop: string) => { return isPropValid(prop) && !omittedProps.includes(prop); }; /** A function that allows us to call Box styles on an element and reduce the amount of elements in the React Dom tree. Instead of using the `as` in a styled function, you can just call this instead to pass those props to the styled element @example ``` import { boxStyleFn } from '@workday/canvas-kit-react/layout'; const StyledHeader = styled('h1')( boxStyleFn, { fontWeight: 400, } ) ... Hello World ``` @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs)." }, { "name": "buildStyleFns", "message": "*/ const getColor = (value: SystemPropValues['color']) => { return colorTokens[value] || wrapProperty(value); }; /** @deprecated */ const getDepth = (value: SystemPropValues['depth']) => { return depthTokens[value]; }; /** @deprecated */ const getShape = (value: SystemPropValues['shape']) => { return borderRadiusTokens[value as CanvasSystemPropValues['shape']] || wrapProperty(value); }; /** @deprecated */ const getSpace = (value: SystemPropValues['space']) => { return spaceTokens[value as CanvasSystemPropValues['space']] || wrapProperty(value); }; /** @deprecated */ const getFont = (value: SystemPropValues['font']) => { return ( typeTokens.properties.fontFamilies[value as CanvasSystemPropValues['font']] || wrapProperty(value) ); }; /** @deprecated */ const getFontSize = (value: SystemPropValues['fontSize'] | string) => { return ( typeTokens.properties.fontSizes[value as CanvasSystemPropValues['fontSize']] || wrapProperty(value) ); }; /** @deprecated */ const getFontWeight = (value: SystemPropValues['fontWeight'] | string) => { return ( typeTokens.properties.fontWeights[value as CanvasSystemPropValues['fontWeight']] || wrapProperty(value) ); }; /** @deprecated" }, { "name": "buildStylePropFn", "message": "" }, { "name": "CanvasSystemPropValues", "message": "Canvas System Prop Values --- These system prop values are restricted to Canvas token values. @deprecated" }, { "name": "color", "message": "A style prop function that takes component props and returns color styles from Canvas token values. If no `ColorStyleProps` are found, it returns an empty object. @example ```tsx const BoxExample = () => ( Hello, colors! ); ``` @deprecated" }, { "name": "colorFns", "message": "" }, { "name": "colorStyleFnConfigs", "message": "- sets [CSS background-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) - system tokens: `color` @deprecated / backgroundColor?: SystemPropValues['color']; /** - sets [CSS color property](https://developer.mozilla.org/en-US/docs/Web/CSS/color) - system tokens: `color` @deprecated / color?: SystemPropValues['color']; /** sets [CSS opacity property](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) @deprecated / opacity?: Property.Opacity; }; /** @deprecated" }, { "name": "ColorStyleProps", "message": "style props to set CSS color properties @deprecated" }, { "name": "CommonStyleProps", "message": "Common Style Props --- Types for common style props shared across all components - background - border - color - depth - flexItem - gridItem - layout - other - position - space - text @deprecated" }, { "name": "depth", "message": "A style prop function that takes component props and returns depth styles from Canvas token values. If no `DepthStyleProps` are found, it returns an empty object. @example ```tsx const DepthExample = () => ( Hello, box shadows! ); ``` @deprecated" }, { "name": "depthStyleFnConfigs", "message": "sets [CSS box-shadow styles](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) @deprecated / boxShadow?: Property.BoxShadow; /** - sets [CSS box-shadow styles](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) - system tokens: `depth` @deprecated / depth?: SystemPropValues['depth']; }; /** @deprecated" }, { "name": "depthStyleFns", "message": "" }, { "name": "DepthStyleProps", "message": "style props to for depth styles @deprecated" }, { "name": "flex", "message": "A style prop function that takes component props and returns flexbox styles. If no `FlexStyleProps` are found, it returns an empty object. @example ```tsx const FlexExample = () => ( Hello, flex! ); ``` @deprecated ⚠️ `flex` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs" }, { "name": "flexItem", "message": "A style prop function that takes component props and returns flexbox item styles. If no `FlexItemStyleProps` are found, it returns an empty object. @example ```tsx const FlexItemExample = () => ( Hello, flex item! ); ``` @deprecated" }, { "name": "flexItemStyleFnConfigs", "message": "sets [CSS flex property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) @deprecated / flex?: Property.Flex; /** sets [CSS flex-grow property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) @deprecated / flexGrow?: Property.FlexGrow; /** sets [CSS flex-shrink property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) @deprecated / flexShrink?: Property.FlexShrink; /** sets [CSS flex-basis property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) @deprecated / flexBasis?: Property.FlexBasis; /** sets [CSS justify-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) @deprecated / justifySelf?: Property.JustifySelf; /** sets [CSS align-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) @deprecated / alignSelf?: Property.AlignSelf; /** sets [CSS order property](https://developer.mozilla.org/en-US/docs/Web/CSS/order) @deprecated / order?: Property.Order; }; /** @deprecated" }, { "name": "flexItemStyleFns", "message": "" }, { "name": "FlexItemStyleProps", "message": "style props to for CSS flex item properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs)." }, { "name": "flexStyleFnConfigs", "message": "sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) @deprecated / alignItems?: Property.AlignItems; /** sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) @deprecated / alignContent?: Property.AlignContent; /** - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) - @default 'flex' @deprecated / display?: 'flex' | 'inline-flex' | 'none' | Globals | (string & {}); /** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) @deprecated / justifyItems?: Property.JustifyItems; /** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) @deprecated / justifyContent?: Property.JustifyContent; /** sets [CSS flex-wrap property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) @deprecated / flexWrap?: Property.FlexWrap; /** sets [CSS flex-direction property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) @deprecated / flexDirection?: Property.FlexDirection; /** - sets [CSS gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) - system tokens: `space` @deprecated / gap?: SystemPropValues['space']; /** - sets [CSS column-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) - system tokens: `space` @deprecated / columnGap?: SystemPropValues['space']; /** - sets [CSS row-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) - system tokens: `space` @deprecated / rowGap?: SystemPropValues['space']; }; /** @deprecated" }, { "name": "flexStyleFns", "message": "" }, { "name": "FlexStyleProps", "message": "style props to for CSS flexbox container properties @deprecated" }, { "name": "grid", "message": "A style prop function that takes component props and returns grid styles. If no `GridStyleProps` are found, it returns an empty object. Space tokens are available for gridGap, gridRowGap, gridColumnGap props. @example ```tsx const GridExample = () => ( Hello, Grid! ); ``` @deprecated" }, { "name": "gridItem", "message": "A style prop function that takes component props and returns grid styles. If no `GridItemStyleProps` are found, it returns an empty object. @example ```tsx const GridItemExample = () => ( Hello, Grid Item! ); ``` @deprecated" }, { "name": "gridItemStyleFnConfigs", "message": "sets [CSS grid-column-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start) @deprecated / gridColumnStart?: Property.GridColumnStart; /** sets [CSS grid-column-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end) @deprecated / gridColumnEnd?: Property.GridColumnEnd; /** sets [CSS grid-row-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start) @deprecated / gridRowStart?: Property.GridRowStart; /** sets [CSS grid-row-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end) @deprecated / gridRowEnd?: Property.GridRowEnd; /** sets [CSS grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) @deprecated / gridColumn?: Property.GridColumn; /** sets [CSS grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) @deprecated / gridRow?: Property.GridRow; /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) @deprecated / gridArea?: Property.GridArea; /** sets [CSS justify-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) @deprecated / justifySelf?: Property.JustifySelf; /** sets [CSS align-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) @deprecated / alignSelf?: Property.AlignSelf; /** sets [CSS place-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self) @deprecated / placeSelf?: Property.PlaceSelf; }; /** @deprecated" }, { "name": "gridItemStyleFns", "message": "" }, { "name": "GridItemStyleProps", "message": "style props to for CSS grid item properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs)." }, { "name": "gridStyleFnConfigs", "message": "sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) @deprecated / alignItems?: Property.AlignItems; /** sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) @deprecated / alignContent?: Property.AlignContent; /** - sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) - @default 'grid' @deprecated / display?: 'grid' | 'inline-grid' | 'none' | Globals | (string & {}); /** sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) @deprecated / justifyItems?: Property.JustifyItems; /** sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) @deprecated / justifyContent?: Property.JustifyContent; /** sets [CSS grid-template property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template) @deprecated / gridTemplate?: Property.GridTemplate; /** sets [CSS grid-template-areas property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) @deprecated / gridTemplateAreas?: Property.GridTemplateAreas; /** sets [CSS grid-template-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) @deprecated / gridTemplateColumns?: Property.GridTemplateColumns; /** sets [CSS grid-template-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) @deprecated / gridTemplateRows?: Property.GridTemplateRows; /** - sets [CSS column-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) - system tokens: `space` @deprecated / gridColumnGap?: Property.GridColumnGap | SystemPropValues['space']; /** - sets [CSS row-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) - system tokens: `space` @deprecated / gridRowGap?: Property.GridRowGap | SystemPropValues['space']; /** - sets [CSS grid-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap) - system tokens: `space` @deprecated / gridGap?: Property.GridGap | SystemPropValues['space']; /** sets [CSS place-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items) @deprecated / gridPlaceItems?: Property.PlaceItems; /** sets [CSS grid-auto-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) @deprecated / gridAutoColumns?: Property.GridAutoColumns; /** sets [CSS grid-auto-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) @deprecated / gridAutoRows?: Property.GridAutoRows; /** sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) @deprecated / gridArea?: Property.GridArea; /** sets [CSS grid-auto-flow property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) @deprecated / gridAutoFlow?: Property.GridAutoFlow; /** sets [CSS grid property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) @deprecated / grid?: Property.Grid; }; /** @deprecated" }, { "name": "gridStyleFns", "message": "" }, { "name": "GridStyleProps", "message": "style props to for CSS grid container properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs)." }, { "name": "layout", "message": "A style prop function that takes component props and returns layout styles. If no `LayoutStyleProps` are found, it returns an empty object. @example ```tsx const LayoutExample = () => ( Hello, layout! ); ``` @deprecated" }, { "name": "layoutStyleFnConfigs", "message": "sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) @deprecated / display?: Property.Display; /** - sets [CSS height property](https://developer.mozilla.org/en-US/docs/Web/CSS/height) - system tokens: `space` @deprecated / height?: SystemPropValues['space']; /** sets [CSS list-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style) @deprecated / listStyle?: Property.ListStyle; /** - sets [CSS max-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) - system tokens: `space` @deprecated / maxHeight?: SystemPropValues['space']; /** - sets [CSS max-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) - system tokens: `space` @deprecated / maxWidth?: SystemPropValues['space']; /** - sets [CSS min-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) - system tokens: `space` @deprecated / minHeight?: SystemPropValues['space']; /** - sets [CSS min-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) - system tokens: `space` @deprecated / minWidth?: SystemPropValues['space']; /** sets [CSS overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) @deprecated / overflow?: Property.Overflow; /** sets [CSS overflow-x property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x) @deprecated / overflowX?: Property.OverflowX; /** sets [CSS overflow-y property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y) @deprecated / overflowY?: Property.OverflowY; /** sets [CSS vertical-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) @deprecated / verticalAlign?: Property.VerticalAlign; /** - sets [CSS width property](https://developer.mozilla.org/en-US/docs/Web/CSS/width) - system tokens: `space` @deprecated / width?: SystemPropValues['space']; }; /** @deprecated" }, { "name": "layoutStyleFns", "message": "" }, { "name": "LayoutStyleProps", "message": "style props to for CSS layout properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs)." }, { "name": "mergeStyles", "message": "This function has the same signature as {@link handleCsProp} and also calls `handleCsProps`, but adds support for style props. It can be used as a drop-in replacement for `handleCsProps`. @deprecated ⚠️ `mergeStyles` is deprecated since it supports style props. Use `handleCsProps` to ensure correct style merging order. For more information view our [docs](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-merging-styles--docs#handlecsprop)." }, { "name": "other", "message": "" }, { "name": "otherStyleFnConfigs", "message": "sets [CSS animation property](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) @deprecated / animation?: Property.Animation; /** sets [CSS appearance property](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance) @deprecated / appearance?: Property.Appearance; /** sets [CSS box-sizing property](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) @deprecated / boxSizing?: Property.BoxSizing; /** sets [CSS content property](https://developer.mozilla.org/en-US/docs/Web/CSS/content) @deprecated / content?: Property.Content; /** sets [CSS cursor property](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) @deprecated / cursor?: Property.Cursor; /** sets [CSS fill property](https://developer.mozilla.org/en-US/docs/Web/CSS/fill) @deprecated / fill?: Property.Fill; /** sets [CSS float property](https://developer.mozilla.org/en-US/docs/Web/CSS/float) @deprecated / float?: Property.Float; /** sets [CSS object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) @deprecated / objectFit?: Property.ObjectFit; /** sets [CSS object-position property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) @deprecated / objectPosition?: Property.ObjectPosition; /** sets [CSS opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) @deprecated / opacity?: Property.Opacity; /** sets [CSS outline property](https://developer.mozilla.org/en-US/docs/Web/CSS/outline) @deprecated / outline?: Property.Outline; /** sets [CSS outline-offset property](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset) @deprecated / outlineOffset?: Property.OutlineOffset; /** sets [CSS overflow-wrap property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap) @deprecated / overflowWrap?: Property.OverflowWrap; /** sets [CSS pointer-events property](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) @deprecated / pointerEvents?: Property.PointerEvents; /** sets [CSS resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) @deprecated / resize?: Property.Resize; /** sets [CSS scroll margin property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin) @deprecated / scrollMargin?: Property.ScrollMargin; /** sets [CSS scroll margin bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-bottom) @deprecated / scrollMarginBottom?: Property.ScrollMarginBottom; /** sets [CSS scroll margin top property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top) @deprecated / scrollMarginTop?: Property.ScrollMarginTop; /** sets [CSS scroll margin inline start property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-start) @deprecated / scrollMarginInlineStart?: Property.ScrollMarginInlineStart; /** sets [CSS scroll margin inline end property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-end) @deprecated / scrollMarginInlineEnd?: Property.ScrollMarginInlineEnd; /** sets [CSS scroll padding property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding) @deprecated / scrollPadding?: Property.ScrollPadding; /** sets [CSS scroll padding bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-bottom) @deprecated / scrollPaddingBottom?: Property.ScrollPaddingBottom; /** sets [CSS scroll padding top property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top) @deprecated / scrollPaddingTop?: Property.ScrollPaddingTop; /** sets [CSS scroll padding inline start property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-start) @deprecated / scrollPaddingInlineStart?: Property.ScrollPaddingInlineStart; /** sets [CSS scroll padding inline end property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-end) @deprecated / scrollPaddingInlineEnd?: Property.ScrollPaddingInlineEnd; /** sets [CSS scroll snap align property](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-align) @deprecated / scrollSnapAlign?: Property.ScrollSnapAlign; /** sets [CSS scroll snap stop property](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-stop) @deprecated / scrollSnapStop?: Property.ScrollSnapStop; /** sets [CSS scroll snap type property](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type) @deprecated / scrollSnapType?: Property.ScrollSnapType; /** sets [CSS stroke property](https://developer.mozilla.org/en-US/docs/Web/CSS/stroke) @deprecated / stroke?: Property.Stroke; /** sets [CSS transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) @deprecated / transform?: Property.Transform; /** sets [CSS transition property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) @deprecated / transition?: Property.Transition; /** sets [CSS user-select property](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) @deprecated / userSelect?: Property.UserSelect; /** sets [CSS visibility property](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) @deprecated / visibility?: Property.Visibility; }; /** @deprecated" }, { "name": "otherStyleFns", "message": "" }, { "name": "OtherStyleProps", "message": "style props to for other CSS properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs)." }, { "name": "position", "message": "A style prop function that takes component props and returns position styles. If no `PositionProps` are found, it returns an empty object. @example ``` const BoxExample = () => ( Hello, positions! ); ``` @deprecated" }, { "name": "positionStyleFnConfigs", "message": "- sets [CSS position property](https://developer.mozilla.org/en-US/docs/Web/CSS/position) @deprecated / position?: Property.Position; /** - sets [CSS z-index property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) @deprecated / zIndex?: Property.ZIndex; /** - sets [CSS top property](https://developer.mozilla.org/en-US/docs/Web/CSS/top) @deprecated / top?: number | string; /** - sets [CSS right property](https://developer.mozilla.org/en-US/docs/Web/CSS/right) - no bidirectional support @deprecated / right?: number | string; /** - sets [CSS bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) @deprecated / bottom?: number | string; /** - sets [CSS left property](https://developer.mozilla.org/en-US/docs/Web/CSS/left) - no bidirectional support @deprecated / left?: number | string; /** - sets [CSS inset property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset) @deprecated / inset?: number | string; /** - sets [CSS inset-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) - bidirectional support @deprecated / insetInlineStart?: number | string; /** - sets [CSS inset-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) - bidirectional support @deprecated / insetInlineEnd?: number | string; }; /** @deprecated" }, { "name": "positionStyleFns", "message": "" }, { "name": "PositionStyleProps", "message": "style props to for CSS position properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs)." }, { "name": "space", "message": "A style prop function that takes component props and returns space styles. If no `SpaceStyleProps` are found, it returns an empty object. @example ```tsx const BoxExample = () => ( Hello, space! ); ``` @deprecated" }, { "name": "spaceStyleFnConfigs", "message": "- sets [CSS margin-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start) - bidirectional support - system tokens: `space` @deprecated / marginInlineStart?: SystemPropValues['space']; /** - sets [CSS margin-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end) - bidirectional support - system tokens: `space` @deprecated / marginInlineEnd?: SystemPropValues['space']; /** - sets [CSS padding-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start) - bidirectional support - system tokens: `space` @deprecated / paddingInlineStart?: SystemPropValues['space']; /** - sets [CSS padding-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end) - bidirectional support - system tokens: `space` @deprecated / paddingInlineEnd?: SystemPropValues['space']; /** - sets [CSS margin property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) - system tokens: `space` @deprecated / margin?: SystemPropValues['space']; /** - sets [CSS margin-left](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) and [margin-right properties](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) - system tokens: `space` @deprecated / marginX?: SystemPropValues['space']; /** - sets [CSS margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) and [margin-bottom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) - system tokens: `space` @deprecated / marginY?: SystemPropValues['space']; /** - sets [CSS margin-top property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) - system tokens: `space` @deprecated / marginTop?: SystemPropValues['space']; /** - sets [CSS margin-right property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) - no bidirectional support - system tokens: `space` @deprecated / marginRight?: SystemPropValues['space']; /** - sets [CSS margin-bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) - system tokens: `space` @deprecated / marginBottom?: SystemPropValues['space']; /** - sets [CSS margin-left property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) - no bidirectional support - system tokens: `space` @deprecated / marginLeft?: SystemPropValues['space']; /** - sets [CSS padding property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) - system tokens: `space` @deprecated / padding?: SystemPropValues['space']; /** - sets [CSS padding-left]((https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) and [padding-right properties](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) - system tokens: `space` @deprecated / paddingX?: SystemPropValues['space']; /** - sets [CSS padding-top](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) and [padding-bottom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) - system tokens: `space` @deprecated / paddingY?: SystemPropValues['space']; /** - sets [CSS padding-top property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) - system tokens: `space` @deprecated / paddingTop?: SystemPropValues['space']; /** - sets [CSS padding-right property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) - no bidirectional support - system tokens: `space` @deprecated / paddingRight?: SystemPropValues['space']; /** - sets [CSS padding-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) - system tokens: `space` @deprecated / paddingBottom?: SystemPropValues['space']; /** - sets [CSS padding-left property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) - no bidirectional support - system tokens: `space` @deprecated / paddingLeft?: SystemPropValues['space']; }; /** @deprecated" }, { "name": "spaceStyleFns", "message": "" }, { "name": "SpaceStyleProps", "message": "style props to for CSS space properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs)." }, { "name": "StyleFnConfig", "message": "" }, { "name": "StyleFns", "message": "" }, { "name": "SystemPropNames", "message": "" }, { "name": "SystemPropValues", "message": "*/ color: CanvasColor; /** @deprecated */ depth: keyof CanvasDepth; /** @deprecated */ font: keyof CanvasTypeProperties['fontFamilies']; /** @deprecated */ fontSize: keyof CanvasTypeProperties['fontSizes']; /** @deprecated */ fontWeight: keyof CanvasTypeProperties['fontWeights']; /** @deprecated */ shape: CanvasBorderRadiusKeys; /** @deprecated */ space: CanvasSpaceKeys; }; /** System Prop Values --- These system prop values include Canvas System Prop Values and generic values. @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs)." }, { "name": "text", "message": "A style prop function that takes component props and returns font and text styles. If no `TextStyleProps` are found, it returns an empty object. @example ``` const BoxExample = () => ( Hello, alignment! ); ``` @deprecated" }, { "name": "textStyleFnConfigs", "message": "- sets [CSS font-family property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) - system tokens: `font` @deprecated / fontFamily?: Property.FontFamily | SystemPropValues['font']; /** - sets [CSS font-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) - system tokens: `fontSize` @deprecated / fontSize?: Property.FontSize | SystemPropValues['fontSize']; /** sets [CSS font-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) @deprecated / fontStyle?: Property.FontStyle; /** - sets [CSS font-weight property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) - system tokens: `fontWeight` @deprecated / fontWeight?: Property.FontWeight | SystemPropValues['fontWeight']; /** sets [CSS line-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) @deprecated / lineHeight?: Property.LineHeight; /** sets [CSS letter-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) @deprecated / letterSpacing?: Property.LetterSpacing; /** sets [CSS text-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) @deprecated / textAlign?: Property.TextAlign; /** sets [CSS text-decoration property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) @deprecated / textDecoration?: Property.TextDecoration; /** sets [CSS text-overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) @deprecated / textOverflow?: Property.TextOverflow; /** sets [CSS text-transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) @deprecated / textTransform?: Property.TextTransform; /** sets [CSS text-shadow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) @deprecated / textShadow?: Property.TextShadow; /** sets [CSS white-space property](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) @deprecated / whiteSpace?: Property.WhiteSpace; /** sets [CSS word-break property](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) @deprecated / wordBreak?: Property.WordBreak; }; /** @deprecated" }, { "name": "textStyleFns", "message": "" }, { "name": "TextStyleProps", "message": "style props to for CSS font and text properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs)." } ], "deprecatedProps": [ { "name": "alignContent", "message": "sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) @deprecated", "source": "modules/react/layout/lib/utils/flex.ts" }, { "name": "alignContent", "message": "sets [CSS align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "alignItems", "message": "style props to for CSS flexbox container properties @deprecated / export type FlexStyleProps = { /** sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) @deprecated", "source": "modules/react/layout/lib/utils/flex.ts" }, { "name": "alignItems", "message": "style props to for CSS grid container properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs). / export type GridStyleProps = { /** sets [CSS align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "alignSelf", "message": "sets [CSS align-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) @deprecated", "source": "modules/react/layout/lib/utils/flexItem.ts" }, { "name": "alignSelf", "message": "sets [CSS align-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) @deprecated", "source": "modules/react/layout/lib/utils/gridItem.ts" }, { "name": "allProps", "message": "This function has the same signature as {@link handleCsProp} and also calls `handleCsProps`, but adds support for style props. It can be used as a drop-in replacement for `handleCsProps`. @deprecated ⚠️ `mergeStyles` is deprecated since it supports style props. Use `handleCsProps` to ensure correct style merging order. For more information view our [docs](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-merging-styles--docs#handlecsprop). / export function mergeStyles( /** All the props to be spread onto an element. The `cs` prop will be removed an reduced to `className` and `style` props which should be safe on every element.", "source": "modules/react/layout/lib/utils/mergeStyles.ts" }, { "name": "animation", "message": "style props to for other CSS properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs). / export type OtherStyleProps = { /** sets [CSS animation property](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "appearance", "message": "sets [CSS appearance property](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "background", "message": "style props to set CSS background properties @deprecated / export type BackgroundStyleProps = { /** - sets [CSS background property](https://developer.mozilla.org/en-US/docs/Web/CSS/background) - system tokens: `color` @deprecated Use `cs` prop with `system.color.bg.*` tokens", "source": "modules/react/layout/lib/utils/background.ts" }, { "name": "backgroundAttachment", "message": "sets [CSS background-attachment property](https://developer.mozilla.org/en-US/docs/Web/CSS/) @deprecated", "source": "modules/react/layout/lib/utils/background.ts" }, { "name": "backgroundColor", "message": "- sets [CSS background-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) - system tokens: `color` @deprecated Use `cs` prop with `system.color.bg.*` tokens", "source": "modules/react/layout/lib/utils/background.ts" }, { "name": "backgroundColor", "message": "style props to set CSS color properties @deprecated / export type ColorStyleProps = { /** - sets [CSS background-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) - system tokens: `color` @deprecated", "source": "modules/react/layout/lib/utils/color.ts" }, { "name": "backgroundImage", "message": "sets [CSS background-image property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) @deprecated", "source": "modules/react/layout/lib/utils/background.ts" }, { "name": "backgroundPosition", "message": "sets [CSS background-position property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) @deprecated", "source": "modules/react/layout/lib/utils/background.ts" }, { "name": "backgroundRepeat", "message": "sets [CSS background-repeat property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) @deprecated", "source": "modules/react/layout/lib/utils/background.ts" }, { "name": "backgroundSize", "message": "sets [CSS background-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) @deprecated", "source": "modules/react/layout/lib/utils/background.ts" }, { "name": "border", "message": "style props to set CSS border properties @deprecated / export type BorderShorthandStyleProps = { /** sets [CSS border property](https://developer.mozilla.org/en-US/docs/Web/CSS/border) @deprecated", "source": "modules/react/layout/lib/utils/border/shorthand.ts" }, { "name": "borderBottom", "message": "sets [CSS border-bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom) @deprecated", "source": "modules/react/layout/lib/utils/border/shorthand.ts" }, { "name": "borderBottomColor", "message": "- sets [CSS border-bottom-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color) - system tokens: `color` @deprecated Use `cs` prop with `system.color.border.*` tokens", "source": "modules/react/layout/lib/utils/border/color.ts" }, { "name": "borderBottomLeftRadius", "message": "- sets [CSS border-bottom-left-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius) - system tokens: `shape` @deprecated", "source": "modules/react/layout/lib/utils/border/radius.ts" }, { "name": "borderBottomRightRadius", "message": "- sets [CSS border-bottom-right-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius) - system tokens: `shape` @deprecated", "source": "modules/react/layout/lib/utils/border/radius.ts" }, { "name": "borderBottomStyle", "message": "sets [CSS border-bottom-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style) @deprecated", "source": "modules/react/layout/lib/utils/border/lineStyle.ts" }, { "name": "borderBottomWidth", "message": "sets [CSS border-bottom-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) @deprecated", "source": "modules/react/layout/lib/utils/border/width.ts" }, { "name": "borderCollapse", "message": "style props to set CSS border style properties @deprecated / export type BorderLineStyleProps = { /** sets [CSS border-collapse property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse) @deprecated", "source": "modules/react/layout/lib/utils/border/lineStyle.ts" }, { "name": "borderColor", "message": "style props to set CSS border color properties @deprecated / export type BorderColorStyleProps = { /** - sets [CSS border-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) - system tokens: `color` @deprecated Use `cs` prop with `system.color.border.*` tokens", "source": "modules/react/layout/lib/utils/border/color.ts" }, { "name": "borderInlineEnd", "message": "- sets [CSS border-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end) - bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/border/shorthand.ts" }, { "name": "borderInlineEndColor", "message": "- sets [CSS border-inline-end-color property ](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color) - bidirectional support - system tokens: `color` @deprecated Use `cs` prop with `system.color.border.*` tokens", "source": "modules/react/layout/lib/utils/border/color.ts" }, { "name": "borderInlineEndStyle", "message": "- sets [CSS border-inline-end-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style) - bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/border/lineStyle.ts" }, { "name": "borderInlineEndWidth", "message": "- sets [CSS border-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end) - bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/border/width.ts" }, { "name": "borderInlineStart", "message": "- sets [CSS border-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start) - bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/border/shorthand.ts" }, { "name": "borderInlineStartColor", "message": "- sets [CSS border-inline-start-color property ](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color) - bidirectional support - system tokens: `color` @deprecated Use `cs` prop with `system.color.border.*` tokens", "source": "modules/react/layout/lib/utils/border/color.ts" }, { "name": "borderInlineStartStyle", "message": "- sets [CSS border-inline-start-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style) - bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/border/lineStyle.ts" }, { "name": "borderInlineStartWidth", "message": "- sets [CSS border-inline-start-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width) - bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/border/width.ts" }, { "name": "borderLeft", "message": "- sets [CSS border-left property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left) - no bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/border/shorthand.ts" }, { "name": "borderLeftColor", "message": "- sets [CSS border-left-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color) - no bidirectional support - system tokens: `color` @deprecated Use `cs` prop with `system.color.border.*` tokens", "source": "modules/react/layout/lib/utils/border/color.ts" }, { "name": "borderLeftStyle", "message": "- sets [CSS border-left-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style) - no bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/border/lineStyle.ts" }, { "name": "borderLeftWidth", "message": "- sets [CSS border-left-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) - no bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/border/width.ts" }, { "name": "borderRadius", "message": "style props to set CSS border radius properties @deprecated / export type BorderRadiusStyleProps = { /** - sets [CSS border-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) - system tokens: `shape` @deprecated ⚠️ Please use the `cs` prop with `createStyles` and `createStencil` to apply styles to our components. For more information, view our [Styling docs](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs).", "source": "modules/react/layout/lib/utils/border/radius.ts" }, { "name": "borderRight", "message": "- sets [CSS border-right property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right) - no bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/border/shorthand.ts" }, { "name": "borderRightColor", "message": "- sets [CSS border-right-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color) - no bidirectional support - system tokens: `color` @deprecated Use `cs` prop with `system.color.border.*` tokens", "source": "modules/react/layout/lib/utils/border/color.ts" }, { "name": "borderRightStyle", "message": "- sets [CSS border-right-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style) - no bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/border/lineStyle.ts" }, { "name": "borderRightWidth", "message": "- sets [CSS border-right-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) - no bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/border/width.ts" }, { "name": "borderSpacing", "message": "sets [CSS border-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing) @deprecated", "source": "modules/react/layout/lib/utils/border/lineStyle.ts" }, { "name": "borderStyle", "message": "sets [CSS border-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) @deprecated", "source": "modules/react/layout/lib/utils/border/lineStyle.ts" }, { "name": "borderTop", "message": "sets [CSS border-top property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) @deprecated", "source": "modules/react/layout/lib/utils/border/shorthand.ts" }, { "name": "borderTopColor", "message": "- sets [CSS border-top-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color) - system tokens: `color` @deprecated Use `cs` prop with `system.color.border.*` tokens", "source": "modules/react/layout/lib/utils/border/color.ts" }, { "name": "borderTopLeftRadius", "message": "- sets [CSS border-top-left-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius) - system tokens: `shape` @deprecated", "source": "modules/react/layout/lib/utils/border/radius.ts" }, { "name": "borderTopRightRadius", "message": "- sets [CSS border-top-right-radius property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius) - system tokens: `shape` @deprecated", "source": "modules/react/layout/lib/utils/border/radius.ts" }, { "name": "borderTopStyle", "message": "sets [CSS border-top-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style) @deprecated", "source": "modules/react/layout/lib/utils/border/lineStyle.ts" }, { "name": "borderTopWidth", "message": "sets [CSS border-top-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) @deprecated", "source": "modules/react/layout/lib/utils/border/width.ts" }, { "name": "borderWidth", "message": "style props to set CSS border width properties @deprecated / export type BorderWidthStyleProps = { /** sets [CSS border-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) @deprecated", "source": "modules/react/layout/lib/utils/border/width.ts" }, { "name": "bottom", "message": "- sets [CSS bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) @deprecated", "source": "modules/react/layout/lib/utils/position.ts" }, { "name": "boxShadow", "message": "style props to for depth styles @deprecated / export type DepthStyleProps = { /** sets [CSS box-shadow styles](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) @deprecated", "source": "modules/react/layout/lib/utils/depth.ts" }, { "name": "boxSizing", "message": "sets [CSS box-sizing property](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "color", "message": "- sets [CSS color property](https://developer.mozilla.org/en-US/docs/Web/CSS/color) - system tokens: `color` @deprecated", "source": "modules/react/layout/lib/utils/color.ts" }, { "name": "color", "message": "System Prop Values --- These system prop values include Canvas System Prop Values and generic values. @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs). / export type SystemPropValues = { /** @deprecated", "source": "modules/react/layout/lib/utils/systemProps.ts" }, { "name": "columnGap", "message": "- sets [CSS column-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/flex.ts" }, { "name": "content", "message": "sets [CSS content property](https://developer.mozilla.org/en-US/docs/Web/CSS/content) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "cursor", "message": "sets [CSS cursor property](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "depth", "message": "- sets [CSS box-shadow styles](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) - system tokens: `depth` @deprecated", "source": "modules/react/layout/lib/utils/depth.ts" }, { "name": "depth", "message": "", "source": "modules/react/layout/lib/utils/systemProps.ts" }, { "name": "display", "message": "- sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) - @default 'flex' @deprecated", "source": "modules/react/layout/lib/utils/flex.ts" }, { "name": "display", "message": "- sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) - @default 'grid' @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "display", "message": "style props to for CSS layout properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs). / export type LayoutStyleProps = { /** sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) @deprecated", "source": "modules/react/layout/lib/utils/layout.ts" }, { "name": "fill", "message": "sets [CSS fill property](https://developer.mozilla.org/en-US/docs/Web/CSS/fill) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "flex", "message": "style props to for CSS flex item properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs). / export type FlexItemStyleProps = { /** sets [CSS flex property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) @deprecated", "source": "modules/react/layout/lib/utils/flexItem.ts" }, { "name": "flexBasis", "message": "sets [CSS flex-basis property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) @deprecated", "source": "modules/react/layout/lib/utils/flexItem.ts" }, { "name": "flexDirection", "message": "sets [CSS flex-direction property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) @deprecated", "source": "modules/react/layout/lib/utils/flex.ts" }, { "name": "flexGrow", "message": "sets [CSS flex-grow property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) @deprecated", "source": "modules/react/layout/lib/utils/flexItem.ts" }, { "name": "flexShrink", "message": "sets [CSS flex-shrink property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) @deprecated", "source": "modules/react/layout/lib/utils/flexItem.ts" }, { "name": "flexWrap", "message": "sets [CSS flex-wrap property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) @deprecated", "source": "modules/react/layout/lib/utils/flex.ts" }, { "name": "float", "message": "sets [CSS float property](https://developer.mozilla.org/en-US/docs/Web/CSS/float) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "font", "message": "", "source": "modules/react/layout/lib/utils/systemProps.ts" }, { "name": "fontFamily", "message": "style props to for CSS font and text properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs). / export type TextStyleProps = { /** - sets [CSS font-family property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) - system tokens: `font` @deprecated", "source": "modules/react/layout/lib/utils/text.ts" }, { "name": "fontSize", "message": "", "source": "modules/react/layout/lib/utils/systemProps.ts" }, { "name": "fontSize", "message": "- sets [CSS font-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) - system tokens: `fontSize` @deprecated", "source": "modules/react/layout/lib/utils/text.ts" }, { "name": "fontStyle", "message": "sets [CSS font-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) @deprecated", "source": "modules/react/layout/lib/utils/text.ts" }, { "name": "fontWeight", "message": "", "source": "modules/react/layout/lib/utils/systemProps.ts" }, { "name": "fontWeight", "message": "- sets [CSS font-weight property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) - system tokens: `fontWeight` @deprecated", "source": "modules/react/layout/lib/utils/text.ts" }, { "name": "gap", "message": "- sets [CSS gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/flex.ts" }, { "name": "grid", "message": "sets [CSS grid property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "gridArea", "message": "sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "gridArea", "message": "sets [CSS grid-area property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) @deprecated", "source": "modules/react/layout/lib/utils/gridItem.ts" }, { "name": "gridAutoColumns", "message": "sets [CSS grid-auto-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "gridAutoFlow", "message": "sets [CSS grid-auto-flow property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "gridAutoRows", "message": "sets [CSS grid-auto-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "gridColumn", "message": "sets [CSS grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column) @deprecated", "source": "modules/react/layout/lib/utils/gridItem.ts" }, { "name": "gridColumnEnd", "message": "sets [CSS grid-column-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end) @deprecated", "source": "modules/react/layout/lib/utils/gridItem.ts" }, { "name": "gridColumnGap", "message": "- sets [CSS column-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "gridColumnStart", "message": "style props to for CSS grid item properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs). / export type GridItemStyleProps = { /** sets [CSS grid-column-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start) @deprecated", "source": "modules/react/layout/lib/utils/gridItem.ts" }, { "name": "gridGap", "message": "- sets [CSS grid-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "gridPlaceItems", "message": "sets [CSS place-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items) @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "gridRow", "message": "sets [CSS grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) @deprecated", "source": "modules/react/layout/lib/utils/gridItem.ts" }, { "name": "gridRowEnd", "message": "sets [CSS grid-row-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end) @deprecated", "source": "modules/react/layout/lib/utils/gridItem.ts" }, { "name": "gridRowGap", "message": "- sets [CSS row-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "gridRowStart", "message": "sets [CSS grid-row-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start) @deprecated", "source": "modules/react/layout/lib/utils/gridItem.ts" }, { "name": "gridTemplate", "message": "sets [CSS grid-template property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template) @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "gridTemplateAreas", "message": "sets [CSS grid-template-areas property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "gridTemplateColumns", "message": "sets [CSS grid-template-columns property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "gridTemplateRows", "message": "sets [CSS grid-template-rows property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "height", "message": "- sets [CSS height property](https://developer.mozilla.org/en-US/docs/Web/CSS/height) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/layout.ts" }, { "name": "inset", "message": "- sets [CSS inset property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset) @deprecated", "source": "modules/react/layout/lib/utils/position.ts" }, { "name": "insetInlineEnd", "message": "- sets [CSS inset-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) - bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/position.ts" }, { "name": "insetInlineStart", "message": "- sets [CSS inset-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) - bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/position.ts" }, { "name": "justifyContent", "message": "sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) @deprecated", "source": "modules/react/layout/lib/utils/flex.ts" }, { "name": "justifyContent", "message": "sets [CSS justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "justifyItems", "message": "sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) @deprecated", "source": "modules/react/layout/lib/utils/flex.ts" }, { "name": "justifyItems", "message": "sets [CSS justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) @deprecated", "source": "modules/react/layout/lib/utils/grid.ts" }, { "name": "justifySelf", "message": "sets [CSS justify-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) @deprecated", "source": "modules/react/layout/lib/utils/flexItem.ts" }, { "name": "justifySelf", "message": "sets [CSS justify-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self) @deprecated", "source": "modules/react/layout/lib/utils/gridItem.ts" }, { "name": "left", "message": "- sets [CSS left property](https://developer.mozilla.org/en-US/docs/Web/CSS/left) - no bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/position.ts" }, { "name": "letterSpacing", "message": "sets [CSS letter-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) @deprecated", "source": "modules/react/layout/lib/utils/text.ts" }, { "name": "lineHeight", "message": "sets [CSS line-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) @deprecated", "source": "modules/react/layout/lib/utils/text.ts" }, { "name": "listStyle", "message": "sets [CSS list-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style) @deprecated", "source": "modules/react/layout/lib/utils/layout.ts" }, { "name": "margin", "message": "- sets [CSS margin property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "marginBottom", "message": "- sets [CSS margin-bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "marginInlineEnd", "message": "- sets [CSS margin-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end) - bidirectional support - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "marginInlineStart", "message": "style props to for CSS space properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs). / export type SpaceStyleProps = { /** - sets [CSS margin-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start) - bidirectional support - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "marginLeft", "message": "- sets [CSS margin-left property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) - no bidirectional support - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "marginRight", "message": "- sets [CSS margin-right property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) - no bidirectional support - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "marginTop", "message": "- sets [CSS margin-top property](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "marginX", "message": "- sets [CSS margin-left](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) and [margin-right properties](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "marginY", "message": "- sets [CSS margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) and [margin-bottom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "maxHeight", "message": "- sets [CSS max-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/layout.ts" }, { "name": "maxWidth", "message": "- sets [CSS max-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/layout.ts" }, { "name": "minHeight", "message": "- sets [CSS min-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/layout.ts" }, { "name": "minWidth", "message": "- sets [CSS min-width property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/layout.ts" }, { "name": "objectFit", "message": "sets [CSS object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "objectPosition", "message": "sets [CSS object-position property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "opacity", "message": "sets [CSS opacity property](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) @deprecated", "source": "modules/react/layout/lib/utils/color.ts" }, { "name": "opacity", "message": "sets [CSS opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "order", "message": "sets [CSS order property](https://developer.mozilla.org/en-US/docs/Web/CSS/order) @deprecated", "source": "modules/react/layout/lib/utils/flexItem.ts" }, { "name": "outline", "message": "sets [CSS outline property](https://developer.mozilla.org/en-US/docs/Web/CSS/outline) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "outlineOffset", "message": "sets [CSS outline-offset property](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "overflow", "message": "sets [CSS overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) @deprecated", "source": "modules/react/layout/lib/utils/layout.ts" }, { "name": "overflowWrap", "message": "sets [CSS overflow-wrap property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "overflowX", "message": "sets [CSS overflow-x property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x) @deprecated", "source": "modules/react/layout/lib/utils/layout.ts" }, { "name": "overflowY", "message": "sets [CSS overflow-y property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y) @deprecated", "source": "modules/react/layout/lib/utils/layout.ts" }, { "name": "padding", "message": "- sets [CSS padding property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "paddingBottom", "message": "- sets [CSS padding-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "paddingInlineEnd", "message": "- sets [CSS padding-inline-end property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end) - bidirectional support - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "paddingInlineStart", "message": "- sets [CSS padding-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start) - bidirectional support - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "paddingLeft", "message": "- sets [CSS padding-left property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) - no bidirectional support - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "paddingRight", "message": "- sets [CSS padding-right property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) - no bidirectional support - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "paddingTop", "message": "- sets [CSS padding-top property](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "paddingX", "message": "- sets [CSS padding-left]((https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) and [padding-right properties](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "paddingY", "message": "- sets [CSS padding-top](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) and [padding-bottom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/space.ts" }, { "name": "placeSelf", "message": "sets [CSS place-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self) @deprecated", "source": "modules/react/layout/lib/utils/gridItem.ts" }, { "name": "pointerEvents", "message": "sets [CSS pointer-events property](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "position", "message": "style props to for CSS position properties @deprecated ⚠️ Style props are deprecated. Please use our `cs` prop with `createStencil` or `createStyles` to apply styles. For more information view our [Styling docs](* @deprecated ⚠️ `boxStyleFn` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs). / export type PositionStyleProps = { /** - sets [CSS position property](https://developer.mozilla.org/en-US/docs/Web/CSS/position) @deprecated", "source": "modules/react/layout/lib/utils/position.ts" }, { "name": "resize", "message": "sets [CSS resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "right", "message": "- sets [CSS right property](https://developer.mozilla.org/en-US/docs/Web/CSS/right) - no bidirectional support @deprecated", "source": "modules/react/layout/lib/utils/position.ts" }, { "name": "rowGap", "message": "- sets [CSS row-gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/flex.ts" }, { "name": "scrollMargin", "message": "sets [CSS scroll margin property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "scrollMarginBottom", "message": "sets [CSS scroll margin bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-bottom) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "scrollMarginInlineEnd", "message": "sets [CSS scroll margin inline end property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-end) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "scrollMarginInlineStart", "message": "sets [CSS scroll margin inline start property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-start) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "scrollMarginTop", "message": "sets [CSS scroll margin top property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "scrollPadding", "message": "sets [CSS scroll padding property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "scrollPaddingBottom", "message": "sets [CSS scroll padding bottom property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-bottom) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "scrollPaddingInlineEnd", "message": "sets [CSS scroll padding inline end property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-end) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "scrollPaddingInlineStart", "message": "sets [CSS scroll padding inline start property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-start) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "scrollPaddingTop", "message": "sets [CSS scroll padding top property](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "scrollSnapAlign", "message": "sets [CSS scroll snap align property](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-align) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "scrollSnapStop", "message": "sets [CSS scroll snap stop property](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-stop) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "scrollSnapType", "message": "sets [CSS scroll snap type property](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "shape", "message": "", "source": "modules/react/layout/lib/utils/systemProps.ts" }, { "name": "space", "message": "", "source": "modules/react/layout/lib/utils/systemProps.ts" }, { "name": "stroke", "message": "sets [CSS stroke property](https://developer.mozilla.org/en-US/docs/Web/CSS/stroke) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "textAlign", "message": "sets [CSS text-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) @deprecated", "source": "modules/react/layout/lib/utils/text.ts" }, { "name": "textDecoration", "message": "sets [CSS text-decoration property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) @deprecated", "source": "modules/react/layout/lib/utils/text.ts" }, { "name": "textOverflow", "message": "sets [CSS text-overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) @deprecated", "source": "modules/react/layout/lib/utils/text.ts" }, { "name": "textShadow", "message": "sets [CSS text-shadow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) @deprecated", "source": "modules/react/layout/lib/utils/text.ts" }, { "name": "textTransform", "message": "sets [CSS text-transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) @deprecated", "source": "modules/react/layout/lib/utils/text.ts" }, { "name": "top", "message": "- sets [CSS top property](https://developer.mozilla.org/en-US/docs/Web/CSS/top) @deprecated", "source": "modules/react/layout/lib/utils/position.ts" }, { "name": "transform", "message": "sets [CSS transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "transition", "message": "sets [CSS transition property](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "userSelect", "message": "sets [CSS user-select property](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "verticalAlign", "message": "sets [CSS vertical-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) @deprecated", "source": "modules/react/layout/lib/utils/layout.ts" }, { "name": "visibility", "message": "sets [CSS visibility property](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) @deprecated", "source": "modules/react/layout/lib/utils/other.ts" }, { "name": "whiteSpace", "message": "sets [CSS white-space property](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) @deprecated", "source": "modules/react/layout/lib/utils/text.ts" }, { "name": "width", "message": "- sets [CSS width property](https://developer.mozilla.org/en-US/docs/Web/CSS/width) - system tokens: `space` @deprecated", "source": "modules/react/layout/lib/utils/layout.ts" }, { "name": "wordBreak", "message": "sets [CSS word-break property](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) @deprecated", "source": "modules/react/layout/lib/utils/text.ts" }, { "name": "zIndex", "message": "- sets [CSS z-index property](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) @deprecated", "source": "modules/react/layout/lib/utils/position.ts" } ], "aliases": [ "layout", "layout" ] }, { "name": "LoadingDots", "slug": "loading-dots", "packageName": "@workday/canvas-kit-react", "subpath": "loading-dots", "canonicalImport": "@workday/canvas-kit-react/loading-dots", "status": "production", "exports": [ "LoadingDots", "LoadingDotsProps", "loadingDotsStencil" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "loading-dots", "loading-dots", "loading-dots" ], "storySlug": "loading-dots" }, { "name": "LoadingSparkles", "packageName": "@workday/canvas-kit-preview-react", "subpath": "loading-sparkles", "canonicalImport": "@workday/canvas-kit-preview-react/loading-sparkles", "status": "preview", "exports": [ "LoadingSparkles", "loadingSparklesStencil" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "loading-sparkles", "loading-sparkles", "loading-sparkles-(ai)", "ai-loading" ] }, { "name": "Menu", "slug": "menu", "packageName": "@workday/canvas-kit-react", "subpath": "menu", "canonicalImport": "@workday/canvas-kit-react/menu", "status": "production", "exports": [ "DividerProps", "Menu", "MenuCard", "MenuCardProps", "MenuDivider", "MenuItem", "MenuItemProps", "MenuList", "MenuListProps", "MenuOption", "MenuPopper", "MenuPopperProps", "MenuProps", "MenuTarget", "MenuTargetContext", "MenuTargetProps", "StyledMenuItem", "StyledMenuOption", "defaultMenuPopperOptions", "menuCardStencil", "menuDividerStencil", "menuItemStencil", "menuListStencil", "useMenuCard", "useMenuItem", "useMenuItemArrowReturn", "useMenuItemFocus", "useMenuList", "useMenuModel", "useMenuOption", "useMenuPopper", "useMenuTarget", "useMenuTargetBase", "useMenuTargetContext" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [ { "name": "isDisabled", "message": "Optionally pass index to menu item. This should be done if `Menu.Item` components were created via a `Array::map` function. This index will ensure keyboard navigation works even if items are inserted out of order. / index?: number; /** The label text of the MenuItem. / children?: React.ReactNode; /** The name of the menu item. This name will be used in the `onSelect` callback in the model. If this property is not provided, it will default to a string representation of the the zero-based index of the Tab when it was initialized. / 'data-id'?: string; /** `aria-disabled` is used for keyboard and screen reader users to discover disabled content with the keyboard or screen reader caret tool. For more information, see https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls / 'aria-disabled'?: boolean; /** If true, set the StyledMenuItem to the disabled state so it is not clickable. @default false @deprecated Use `aria-disabled` instead", "source": "modules/react/menu/lib/MenuItem.tsx" } ], "aliases": [ "menu", "menu", "menu" ], "storySlug": "menu" }, { "name": "Modal", "slug": "modal", "packageName": "@workday/canvas-kit-react", "subpath": "modal", "canonicalImport": "@workday/canvas-kit-react/modal", "status": "production", "exports": [ "Modal", "useCloseOnOverlayClick", "useModalCard", "useModalHeading", "useModalModel" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "modal", "modal", "modal" ], "storySlug": "modal" }, { "name": "MultiSelect", "slug": "multiselect", "packageName": "@workday/canvas-kit-preview-react", "subpath": "multi-select", "canonicalImport": "@workday/canvas-kit-preview-react/multi-select", "status": "preview", "exports": [ "MultiSelect", "MultiSelectInput", "MultiSelectInputProps", "MultiSelectProps", "MultiSelectSearchInput", "multiSelectInputStencil", "multiSelectStencil", "useMultiSelectInput", "useMultiSelectModel" ], "deprecated": false, "recommended": true, "deprecatedExports": [ { "name": "multiSelectStencil", "message": "use `multiSelectInputStencil` instead. This will be removed in a future version." } ], "deprecatedProps": [], "aliases": [ "multi-select", "multi-select", "multiselect" ], "storySlug": "multiselect" }, { "name": "Pagination", "slug": "pagination", "packageName": "@workday/canvas-kit-react", "subpath": "pagination", "canonicalImport": "@workday/canvas-kit-react/pagination", "status": "production", "exports": [ "Pagination", "PaginationContext", "PaginationEvents", "PaginationModel", "PaginationNavProps", "PaginationProps", "PaginationState", "UsePaginationModelConfig", "getLastPage", "getRangeMax", "getRangeMin", "getVisibleResultsMax", "getVisibleResultsMin", "paginationStencil", "usePaginationModel" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "pagination", "pagination", "pagination" ], "storySlug": "pagination" }, { "name": "Pill", "slug": "pill", "packageName": "@workday/canvas-kit-react", "subpath": "pill", "canonicalImport": "@workday/canvas-kit-react/pill", "status": "production", "exports": [ "Pill", "PillCount", "PillCountProps", "PillIcon", "PillIconButton", "PillIconButtonProps", "PillIconProps", "PillLabel", "PillLabelProps", "PillProps", "pillCountStencil", "pillIconButtonStencil", "pillIconStencil", "pillLabelStencil", "pillStencil", "usePillModel" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "pill", "pill", "pill" ], "storySlug": "pill" }, { "name": "Popup", "slug": "popup", "packageName": "@workday/canvas-kit-react", "subpath": "popup", "canonicalImport": "@workday/canvas-kit-react/popup", "status": "production", "exports": [ "Placement", "Popper", "PopperOptions", "PopperProps", "Popup", "PopupModelContext", "PopupProps", "defaultFallbackPlacements", "getTransformFromPlacement", "useAlwaysCloseOnOutsideClick", "useAssistiveHideSiblings", "useBringToTopOnClick", "useCloseOnEscape", "useCloseOnFullscreenExit", "useCloseOnOutsideClick", "useCloseOnTargetHidden", "useDisableBodyScroll", "useFocusRedirect", "useFocusTrap", "useInitialFocus", "usePopupCard", "usePopupCloseButton", "usePopupHeading", "usePopupModel", "usePopupPopper", "usePopupStack", "usePopupTarget", "usePopupTargetContext", "useReturnFocus", "useTransferOnFullscreenEnter", "useTransferOnFullscreenExit" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "popup", "popup", "popup" ], "storySlug": "popup" }, { "name": "Radio", "slug": "radio", "packageName": "@workday/canvas-kit-react", "subpath": "radio", "canonicalImport": "@workday/canvas-kit-react/radio", "status": "production", "exports": [ "Radio", "RadioGroup", "RadioGroupProps", "RadioProps" ], "deprecated": true, "recommended": false, "deprecatedExports": [ { "name": "Radio", "message": "If true, set the Radio button to the checked state. @default false / checked?: boolean; /** If true, set the Radio button to the disabled state. @default false / disabled?: boolean; /** The HTML `id` of the underlying radio input element. This is required if `label` is defined as a non-empty string. @default A uniquely generated id / id?: string; /** The text of the Radio button label. @default '' / label?: string; /** The name of the Radio button. / name?: string; /** The function called when the Radio button state changes. / onChange?: (e: React.ChangeEvent) => void; /** The value of the Radio button. / value?: string; variant?: 'inverse' | undefined; } const radioBorderRadius = 9; // Ignore all `styled` as component is deprecated in v15 const RadioContainer = styled('div')({ display: 'flex', alignItems: 'center', minHeight: space.m, position: 'relative', }); /** Using a wrapper prevents the browser default behavior of trigging :hover on the radio when you hover on it's corresponding label. This stops the ripple from showing when you hover on the label. / const RadioInputWrapper = styled('div')>({ display: 'flex', height: `calc(${space.s} + 2px)`, width: `calc(${space.s} + 2px)`, }); const RadioRipple = styled('span')>( { borderRadius: borderRadius.circle, boxShadow: `0 0 0 0 ${colors.soap200}`, height: `calc(${space.s} + 2px)`, transition: 'box-shadow 150ms ease-out', width: `calc(${space.s} + 2px)`, position: 'absolute', pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input }, ({variant}) => ({ opacity: variant === 'inverse' ? '0.4' : '1', }) ); const RadioInput = styled('input')( { borderRadius: `calc(${space.xxs} + 1px)`, width: space.m, height: space.m, margin: 0, marginTop: '-3px', marginLeft: '-3px', position: 'absolute', opacity: 0, '&:focus, &:active': { outline: 'none', }, }, ({ checked, disabled, variant, theme: { canvas: { palette: { primary: themePrimary, common: {focusOutline: themeFocusOutline}, }, }, }, }) => ({ cursor: disabled ? undefined : 'pointer', /** These selectors are targetting various sibling elements (~) here because their styles need to be connected to changes around the input's state (e.g. hover, focus, etc.). We are choosing not to use component selectors from Emotion in this case. The Babel transforms have been problematic in the past. / // `span:first-of-type` refers to `RadioRipple`, the light grey // element that animates around the component on hover '&:hover ~ span:first-of-type': { boxShadow: disabled ? undefined : `0 0 0 calc((${space.l} - (${space.s} + 2px)) / 2) ${colors.soap200}`, }, // `div:first-of-type` refers to the `RadioBackground`, the visual facade of the // input (which is visually hidden) '&:hover ~ div:first-of-type': { backgroundColor: checked ? variant === 'inverse' ? colors.frenchVanilla100 : maybeWrapCSSVariables(themePrimary.main) : disabled ? inputColors.disabled.background : 'white', borderColor: checked ? variant === 'inverse' ? colors.soap300 : maybeWrapCSSVariables(themePrimary.main) : disabled ? inputColors.disabled.border : variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder, borderWidth: '1px', }, '&:focus, &focus:hover': { '& ~ div:first-of-type': { borderWidth: '2px', borderColor: variant === 'inverse' ? colors.blackPepper400 : themeFocusOutline, outline: `${px2rem(2)} solid transparent`, outlineOffset: variant === 'inverse' ? '0' : '2px', ...focusRing({ width: variant === 'inverse' ? 2 : 0, separation: 0, animate: false, innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined, outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined, }), }, }, '&:checked:focus ~ div:first-of-type': { ...focusRing({ separation: 2, width: 2, innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined, outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline, }), borderColor: variant === 'inverse' ? colors.frenchVanilla100 : maybeWrapCSSVariables(themePrimary.main), borderWidth: '2px', }, ...mouseFocusBehavior({ '&:focus ~ div:first-of-type': { ...focusRing({ width: 0, outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline, }), borderWidth: '1px', borderColor: checked ? variant === 'inverse' ? colors.soap300 : maybeWrapCSSVariables(themePrimary.main) : inputColors.border, }, '&:focus:hover ~ div:first-of-type, &:focus:active ~ div:first-of-type': { borderColor: checked ? variant === 'inverse' ? colors.soap300 : maybeWrapCSSVariables(themePrimary.main) : variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder, }, }), }) ); const RadioBackground = styled('div')( { alignItems: 'center', backgroundColor: colors.frenchVanilla100, borderRadius: radioBorderRadius, borderStyle: 'solid', borderWidth: '1px', boxSizing: 'border-box', display: 'flex', height: `calc(${space.s} + 2px)`, justifyContent: 'center', padding: '0px 2px', pointerEvents: 'none', position: 'absolute', transition: 'border 200ms ease, background 200ms', width: `calc(${space.s} + 2px)`, }, ({ checked, disabled, variant, theme: { canvas: { palette: {primary: themePrimary}, }, }, }) => ({ borderColor: checked ? variant === 'inverse' ? colors.soap300 : maybeWrapCSSVariables(themePrimary.main) : disabled ? colors.licorice100 : variant === 'inverse' ? colors.soap300 : inputColors.border, backgroundColor: checked ? variant === 'inverse' ? colors.frenchVanilla100 : maybeWrapCSSVariables(themePrimary.main) : disabled ? inputColors.disabled.background : 'white', opacity: disabled && variant === 'inverse' ? '.4' : '1', }) ); const RadioCheck = styled('div')>( { borderRadius: radioBorderRadius, display: 'flex', flexDirection: 'column', height: space.xxs, pointerEvents: 'none', transition: 'transform 200ms ease, opacity 200ms ease', width: space.xxs, }, ({theme, variant}) => ({ backgroundColor: variant === 'inverse' ? maybeWrapCSSVariables(theme.canvas.palette.primary.main) : maybeWrapCSSVariables(theme.canvas.palette.primary.contrast), }), ({checked}) => ({ opacity: checked ? 1 : 0, transform: checked ? 'scale(1)' : 'scale(0.5)', }) ); /** @deprecated ⚠️ `Radio` in Main has been deprecated and will be removed in a future major version. Please use [`Radio` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead.", "replacementPackage": "@workday/canvas-kit-preview-react" }, { "name": "RadioGroup", "message": "The Radio button children of the RadioGroup (must be at least two). / children: React.ReactElement[]; /** The selected value of the RadioGroup. If a string is provided, the Radio button with the corresponding value will be selected. If a number is provided, the Radio button with the corresponding index will be selected. @default 0 / value?: string | number; /** The common `name` passed to all Radio button children of the RadioGroup. This enables you to avoid specifying the `name` for each child. / name?: string; /** The type of error associated with the RadioGroup (if applicable). / error?: ErrorType; /** The function called when the RadioGroup state changes. The value passed to the callback function will be the value of the selected Radio button if it has one; otherwise, the index of the selected Radio button will be passed in. / onChange?: (value: string | number) => void; } // Ignore all `styled` as component is deprecated in v15 const Container = styled('div')>( { display: 'inline-block', boxSizing: 'border-box', borderRadius: borderRadius.m, padding: `${space.xxxs} ${space.xs}`, margin: `0 -${space.xs}`, '& > div': { margin: `${space.xxs} ${space.zero}`, alignItems: 'flex-start', '> div': { flex: '0 0 auto', }, '&:first-of-type': { marginTop: '6px', }, '&:last-child': { marginBottom: space.xxxs, }, }, }, ({grow}) => grow && {width: '100%'}, ({error, theme}) => { const errorColors = getErrorColors(error, theme); return { transition: '100ms box-shadow', boxShadow: errorColors.outer !== errorColors.inner ? `inset 0 0 0 1px ${errorColors.outer}, inset 0 0 0 3px ${errorColors.inner}` : `inset 0 0 0 2px ${errorColors.inner}`, }; } ); /** @deprecated ⚠️ `RadioGroup` in Main has been deprecated and will be removed in a future major version. Please use [`Radio` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead.", "replacementPackage": "@workday/canvas-kit-preview-react" }, { "name": "RadioGroupProps", "message": "⚠️ `RadioGroupProps` in Main has been deprecated and will be removed in a future major version. Please use [`Radio` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead.", "replacementPackage": "@workday/canvas-kit-preview-react" }, { "name": "RadioProps", "message": "⚠️ `RadioProps` in Main has been deprecated and will be removed in a future major version. Please use [`Radio` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead.", "replacementPackage": "@workday/canvas-kit-preview-react" } ], "deprecatedProps": [ { "name": "checked", "message": "⚠️ `RadioProps` in Main has been deprecated and will be removed in a future major version. Please use [`Radio` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead. / export interface RadioProps extends Themeable { /** If true, set the Radio button to the checked state. @default false", "source": "modules/react/radio/lib/Radio.tsx" }, { "name": "children", "message": "⚠️ `RadioGroupProps` in Main has been deprecated and will be removed in a future major version. Please use [`Radio` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead. / export interface RadioGroupProps extends Themeable, GrowthBehavior { /** The Radio button children of the RadioGroup (must be at least two).", "source": "modules/react/radio/lib/RadioGroup.tsx" } ], "aliases": [ "radio", "radio", "radio" ], "storySlug": "radio" }, { "name": "Radio", "slug": "radio", "packageName": "@workday/canvas-kit-preview-react", "subpath": "radio", "canonicalImport": "@workday/canvas-kit-preview-react/radio", "status": "preview", "exports": [ "RadioGroup", "RadioGroupProps", "StyledRadioButton", "StyledRadioButtonProps", "radioInputStencil", "radioInputWrapperStencil", "useRadioModel" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "radio", "radio", "radio" ], "storySlug": "radio" }, { "name": "SegmentedControl", "slug": "segmented-control", "packageName": "@workday/canvas-kit-react", "subpath": "segmented-control", "canonicalImport": "@workday/canvas-kit-react/segmented-control", "status": "production", "exports": [ "SegmentedControl", "SegmentedControlList", "SegmentedControlListProps", "SegmentedControlProps", "segmentedControlListStencil", "useSegmentedControlItem", "useSegmentedControlModel" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "segmented-control", "segmented-control", "segmented-control" ], "storySlug": "segmented-control" }, { "name": "Select", "slug": "select", "packageName": "@workday/canvas-kit-react", "subpath": "select", "canonicalImport": "@workday/canvas-kit-react/select", "status": "production", "exports": [ "Select", "SelectInput", "SelectInputProps", "SelectProps", "selectInputStencil", "useSelectCard", "useSelectInput", "useSelectModel" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "select", "select", "select" ], "storySlug": "select" }, { "name": "SidePanel", "slug": "side-panel", "packageName": "@workday/canvas-kit-react", "subpath": "side-panel", "canonicalImport": "@workday/canvas-kit-react/side-panel", "status": "production", "exports": [ "SidePanel", "SidePanelProps", "SidePanelToggleButton", "SidePanelToggleButtonProps", "SidePanelTransitionStates", "SidePanelVariant", "panelStencil", "sidePanelToggleButtonStencil", "useSidePanelContainer", "useSidePanelModel", "useSidePanelToggleButton" ], "deprecated": false, "recommended": true, "deprecatedExports": [ { "name": "useSidePanelToggleButton", "message": "The tooltip text to expand the side panel @deprecated Use / tooltipTextExpand?: string; /** Provides an accessible label to the button. This text **should not** convey visual state but rather what it does like \"control data panel.\" / tooltipText?: string; /** The tooltip text to collapse the side panel. Optional text for when the side panel is in a collapsed state. / tooltipTextCollapse?: string; tooltipProps?: Omit; } export const sidePanelToggleButtonStencil = createStencil({ base: { position: 'absolute', top: px2rem(12), width: system.legacy.size.md, ':dir(rtl)': { transform: `scaleX(-1)`, }, }, modifiers: { state: { collapsing: { margin: 0, }, collapsed: { margin: 'auto', }, expanded: { margin: 0, }, expanding: { margin: 0, }, }, origin: { start: { insetInlineEnd: base.legacy.size150, }, end: { insetInlineStart: base.legacy.size150, }, }, }, }); /** Adds the necessary ARIA attributes to the SidePanel's toggle button. This includes `aria-controls` pointing at the panel, `aria-pressed` to convey the collapsed state, and `aria-describedby` pointing at the panel's heading." } ], "deprecatedProps": [ { "name": "tooltipTextExpand", "message": "The tooltip text to expand the side panel @deprecated Use", "source": "modules/react/side-panel/lib/SidePanelToggleButton.tsx" } ], "aliases": [ "side-panel", "side-panel", "side-panel" ], "storySlug": "side-panel" }, { "name": "SidePanel", "slug": "side-panel", "packageName": "@workday/canvas-kit-preview-react", "subpath": "side-panel", "canonicalImport": "@workday/canvas-kit-preview-react/side-panel", "status": "preview", "exports": [ "ControlProps", "LabelProps", "PanelProps", "SidePanel", "SidePanelContext", "SidePanelProps", "SidePanelTransitionStates", "SidePanelVariant", "UseSidePanelProps", "panelStencil", "useSidePanel" ], "deprecated": true, "recommended": false, "deprecatedExports": [ { "name": "ControlProps", "message": "the accessible `id` - this will either be a unique identifier value or the `labelId` provided in the config / id: string; } /** @deprecated ⚠️ `ControlProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.", "replacementPackage": "@workday/canvas-kit-labs-react" }, { "name": "LabelProps", "message": "the expand / collasped state / expanded: boolean; /** the accessible `id` - this will either be a unique identifier value or the `panelId` provided in the config / id: string; /** the accessible label `id` - this will either be a unique identifier value or the `labelId` provided in the config / 'aria-labelledby': string; /** an internally-set boolean - this prevents unintentional keyframe animations on the initial render / touched: boolean; } /** @deprecated ⚠️ `LabelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.", "replacementPackage": "@workday/canvas-kit-labs-react" }, { "name": "PanelProps", "message": "sets the initial expanded state for the side panel @default true / initialExpanded?: boolean; /** sets the `id` for the panel @default unique identifier / panelId?: string; /** sets the `id` for the label @default unique identifier / labelId?: string; } /** The `panelProps` provided by the `useSidePanel` hook @deprecated ⚠️ `PanelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.", "replacementPackage": "@workday/canvas-kit-labs-react" }, { "name": "panelStencil", "message": "The width of the component (in `px` if it's a `number`) when it is collapsed. @default 64 / collapsedWidth?: number | string; /** If true, sets the expanded state of the side panel @default true / expanded?: boolean; /** The width of the component (in `px` if it's a `number`) when it is expanded. @default 320 / expandedWidth?: number | string; /** Which side the side panel is meant to originate from. @default 'left' / origin?: 'left' | 'right'; /** The function called when the side panel's `expanded` state changes. States like `'collapsing'` and `'expanding'` are tracked in another callback: `onStateTransition` @param boolean / onExpandedChange?: (expanded?: boolean) => void; /** The function called when the side panel is transitioning between states. Use this to track when the side panel is animating between `'collapsed'`, `'collapsing'`, `'expanded'`, and `'expanding'` states. This can be particularly helpful if child components need to react specifically to these states. @param SidePanelTransitionStates / onStateTransition?: (state?: SidePanelTransitionStates) => void; /** The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth. @default 'standard' / variant?: SidePanelVariant; /** This is set by the useSidePanel hook and prevents unintended keyframe animations @param boolean / touched: boolean; children?: React.ReactNode; onAnimationEnd?: React.TransitionEvent; } /** @deprecated ⚠️ `panelStencil` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.", "replacementPackage": "@workday/canvas-kit-labs-react" }, { "name": "SidePanel", "message": "⚠️ `SidePanel` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.", "replacementPackage": "@workday/canvas-kit-labs-react" }, { "name": "SidePanelProps", "message": "⚠️ `SidePanelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.", "replacementPackage": "@workday/canvas-kit-labs-react" }, { "name": "SidePanelTransitionStates", "message": "⚠️ `SidePanelTransitionStates` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.", "replacementPackage": "@workday/canvas-kit-labs-react" }, { "name": "SidePanelVariant", "message": "⚠️ `SidePanelVariant` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.", "replacementPackage": "@workday/canvas-kit-labs-react" }, { "name": "useSidePanel", "message": "the accessible `id` that connects the panel to this control - this will either be a unique identifier value or the `panelId` provided in the config / 'aria-controls': string; /** the accessible attribute that describes the expanded state of the panel - this is set by the `expanded` state in the `useSidePanel` hook / 'aria-expanded': boolean; /** the accessible label `id` - this will either be a unique identifier value or the `labelId` provided in the config / 'aria-labelledby': string; /** the handler function for toggling the expanded / collapsed state / onClick: () => void; } /** This hook manages the state and `aria-` attributes for the SidePanel. It takes an optional configuration object: ```tsx import {useSidePanel} from '@workday/canvas-kit-preview-react/side-panel'; const {expanded, setExpanded, panelProps, labelProps, controlProps} = useSidePanel({ initialExpanded: false, panelId: 'custom-panel-id', labelId: 'custom-label-id', }); ``` @deprecated ⚠️ `useSidePanel` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.", "replacementPackage": "@workday/canvas-kit-labs-react" }, { "name": "UseSidePanelProps", "message": "The optional config options for the `useSidePanel` hook @deprecated ⚠️ `UseSidePanelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead.", "replacementPackage": "@workday/canvas-kit-labs-react" } ], "deprecatedProps": [ { "name": "collapsedWidth", "message": "⚠️ `SidePanelVariant` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead. / export type SidePanelVariant = 'standard' | 'alternate'; /** @deprecated ⚠️ `SidePanelTransitionStates` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead. / export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding'; /** @deprecated ⚠️ `SidePanelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead. / export interface SidePanelProps { /** The width of the component (in `px` if it's a `number`) when it is collapsed. @default 64", "source": "modules/preview-react/side-panel/lib/SidePanel.tsx" }, { "name": "expanded", "message": "sets the `id` for the panel @default unique identifier / panelId?: string; /** sets the `id` for the label @default unique identifier / labelId?: string; } /** The `panelProps` provided by the `useSidePanel` hook @deprecated ⚠️ `PanelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead. / export interface PanelProps { /** the expand / collasped state", "source": "modules/preview-react/side-panel/lib/hooks.ts" }, { "name": "id", "message": "the accessible `id` - this will either be a unique identifier value or the `panelId` provided in the config / id: string; /** the accessible label `id` - this will either be a unique identifier value or the `labelId` provided in the config / 'aria-labelledby': string; /** an internally-set boolean - this prevents unintentional keyframe animations on the initial render / touched: boolean; } /** @deprecated ⚠️ `LabelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead. / export interface LabelProps { /** the accessible `id` - this will either be a unique identifier value or the `labelId` provided in the config", "source": "modules/preview-react/side-panel/lib/hooks.ts" }, { "name": "initialExpanded", "message": "The optional config options for the `useSidePanel` hook @deprecated ⚠️ `UseSidePanelProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead. / export interface UseSidePanelProps { /** sets the initial expanded state for the side panel @default true", "source": "modules/preview-react/side-panel/lib/hooks.ts" }, { "name": "onClick", "message": "⚠️ `ControlProps` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead. / export interface ControlProps { /** the accessible `id` that connects the panel to this control - this will either be a unique identifier value or the `panelId` provided in the config / 'aria-controls': string; /** the accessible attribute that describes the expanded state of the panel - this is set by the `expanded` state in the `useSidePanel` hook / 'aria-expanded': boolean; /** the accessible label `id` - this will either be a unique identifier value or the `labelId` provided in the config / 'aria-labelledby': string; /** the handler function for toggling the expanded / collapsed state", "source": "modules/preview-react/side-panel/lib/hooks.ts" }, { "name": "ToggleButton", "message": "If true, sets the expanded state of the side panel @default true / expanded?: boolean; /** The width of the component (in `px` if it's a `number`) when it is expanded. @default 320 / expandedWidth?: number | string; /** Which side the side panel is meant to originate from. @default 'left' / origin?: 'left' | 'right'; /** The function called when the side panel's `expanded` state changes. States like `'collapsing'` and `'expanding'` are tracked in another callback: `onStateTransition` @param boolean / onExpandedChange?: (expanded?: boolean) => void; /** The function called when the side panel is transitioning between states. Use this to track when the side panel is animating between `'collapsed'`, `'collapsing'`, `'expanded'`, and `'expanding'` states. This can be particularly helpful if child components need to react specifically to these states. @param SidePanelTransitionStates / onStateTransition?: (state?: SidePanelTransitionStates) => void; /** The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth. @default 'standard' / variant?: SidePanelVariant; /** This is set by the useSidePanel hook and prevents unintended keyframe animations @param boolean / touched: boolean; children?: React.ReactNode; onAnimationEnd?: React.TransitionEvent; } /** @deprecated ⚠️ `panelStencil` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead. / export const panelStencil = createStencil({ vars: { expandedWidth: '', collapsedWidth: '', }, base: () => ({ overflow: 'hidden', position: 'relative', height: '100%', outline: `${px2rem(1)} solid transparent`, transition: 'width ease-out 200ms, max-width ease-out 200ms', }), modifiers: { variant: { alternate: { backgroundColor: system.color.bg.default, boxShadow: system.depth[5], }, standard: { backgroundColor: system.legacy.color.surface.default, }, }, expanded: { true: ({expandedWidth}) => ({ width: expandedWidth, maxWidth: expandedWidth, }), false: ({collapsedWidth}) => ({ width: collapsedWidth, maxWidth: collapsedWidth, }), }, touched: { true: {}, false: { animation: 'none', }, }, }, }); /** @deprecated ⚠️ `SidePanel` in Preview has been deprecated and will be removed in a future major version. Please use [`SidePanel` in Labs](https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs) instead. / export const SidePanel = createComponent('section')({ displayName: 'SidePanel', Component( { children, collapsedWidth = 64, expanded = true, expandedWidth = 320, onAnimationEnd, onExpandedChange, onStateTransition, origin = 'left', variant = 'standard', touched, ...elemProps }: SidePanelProps, ref, Element ) { const [state, setState] = React.useState( expanded ? 'expanded' : 'collapsed' ); React.useEffect(() => { if (typeof onExpandedChange !== 'undefined') { onExpandedChange(expanded); } }, [expanded, onExpandedChange]); React.useEffect(() => { if (typeof onStateTransition !== 'undefined') { onStateTransition(state); } }, [state, onStateTransition]); const handleAnimationEnd = (event: React.TransitionEvent) => { if (event.propertyName === 'width') { if (state === 'expanding') { setState('expanded'); } else if (state === 'collapsing') { setState('collapsed'); } } }; const handleAnimationStart = () => { if (state === 'collapsed' || state === 'collapsing') { setState('expanding'); } else if (state === 'expanded' || state === 'expanding') { setState('collapsing'); } return undefined; }; return ( {children} ); }, subComponents: { /** `SidePanel.ToggleButton` is a control that is meant to toggle between `expanded = true` and `expanded = false` states. It must be used within the `SidePanel` component as a child. Use in conjunction with `useSidePanel`'s `controlProps`, otherwise it does not come with explicit `onClick` handlers. For accessibility purposes, it must be the first focusable element. We recommend that you keep it as the first child of `SidePanel`", "source": "modules/preview-react/side-panel/lib/SidePanel.tsx" } ], "aliases": [ "side-panel", "side-panel", "side-panel-(new)", "sidepanel", "side-panel" ], "storySlug": "side-panel" }, { "name": "Skeleton", "slug": "skeleton", "packageName": "@workday/canvas-kit-react", "subpath": "skeleton", "canonicalImport": "@workday/canvas-kit-react/skeleton", "status": "production", "exports": [ "Skeleton", "SkeletonHeader", "SkeletonHeaderProps", "SkeletonProps", "SkeletonShape", "SkeletonShapeProps", "SkeletonText", "SkeletonTextProps", "skeletonHeaderStencil", "skeletonShapeStencil", "skeletonStencil", "skeletonSurfaceFillStencil", "skeletonTextLineStencil", "skeletonTextStencil" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "skeleton", "skeleton", "skeleton" ], "storySlug": "skeleton" }, { "name": "StatusIndicator", "slug": "status-indicator", "packageName": "@workday/canvas-kit-react", "subpath": "status-indicator", "canonicalImport": "@workday/canvas-kit-react/status-indicator", "status": "production", "exports": [ "StatusIndicator", "StatusIndicatorEmphasis", "StatusIndicatorGenericStyle", "StatusIndicatorProps", "StatusIndicatorType", "statusIndicatorStyles" ], "deprecated": true, "recommended": false, "deprecatedExports": [ { "name": "StatusIndicator", "message": "The type of the StatusIndicator. Accepts `Gray`, `Orange`, `Blue`, `Green`, `Red`, or `Transparent`. / type: StatusIndicatorType; /** The emphasis of the StatusIndicator. Accepts `High` or `Low`. @default StatusIndicatorEmphasis.High / emphasis?: StatusIndicatorEmphasis; /** The maxWidth of the container before it truncates @default 200 / maxWidth?: number; /** The text of the StatusIndicator. / label: string; /** The icon of the StatusIndicator. / icon?: CanvasSystemIcon; } // Ignore all `styled` as component is deprecated in v15 const Container = styled('span')< PickRequired >(statusIndicatorStyles.styles, ({type, emphasis, maxWidth}) => ({ ...statusIndicatorStyles.variants[type][emphasis], maxWidth: maxWidth, })); const StatusLabel = styled('span')({ fontWeight: 'bold', WebkitFontSmoothing: 'antialiased', textTransform: 'uppercase', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }); /** @deprecated ⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead.", "replacementPackage": "@workday/canvas-kit-preview-react" }, { "name": "StatusIndicatorEmphasis", "message": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead.", "replacementPackage": "@workday/canvas-kit-preview-react" }, { "name": "StatusIndicatorGenericStyle", "message": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead.", "replacementPackage": "@workday/canvas-kit-preview-react" }, { "name": "StatusIndicatorProps", "message": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead.", "replacementPackage": "@workday/canvas-kit-preview-react" }, { "name": "statusIndicatorStyles", "message": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead.", "replacementPackage": "@workday/canvas-kit-preview-react" }, { "name": "StatusIndicatorType", "message": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead.", "replacementPackage": "@workday/canvas-kit-preview-react" } ], "deprecatedProps": [ { "name": "type", "message": "⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead. / export enum StatusIndicatorType { Gray = 'gray', Orange = 'orange', Blue = 'blue', Green = 'green', Red = 'red', Transparent = 'transparent', } /** @deprecated ⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead. / export enum StatusIndicatorEmphasis { High = 'high', Low = 'low', } /** @deprecated ⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead. / export interface StatusIndicatorGenericStyle extends GenericStyle { styles: CSSProperties; variants: { [statusType in StatusIndicatorType]: { [statusEmphasis in StatusIndicatorEmphasis]?: CSSProperties; }; }; } /** @deprecated ⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead. / export const statusIndicatorStyles: StatusIndicatorGenericStyle = { classname: 'status-indicator', styles: { ...type.levels.subtext.medium, display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', height: space.s, padding: `1px ${space.xxxs}`, borderRadius: borderRadius.s, boxSizing: 'border-box', }, variants: { gray: { high: { color: colors.frenchVanilla100, background: colors.licorice300, }, low: { color: colors.licorice400, background: colors.soap200, }, }, orange: { high: { color: colors.licorice500, background: colors.cantaloupe400, }, low: { color: colors.toastedMarshmallow600, background: colors.cantaloupe100, }, }, blue: { high: { color: colors.frenchVanilla100, background: colors.blueberry400, }, low: { color: colors.blueberry500, background: colors.blueberry100, }, }, green: { high: { color: colors.frenchVanilla100, background: colors.greenApple600, }, low: { color: colors.greenApple600, background: colors.greenApple100, }, }, red: { high: { color: colors.frenchVanilla100, background: colors.cinnamon500, }, low: { color: colors.cinnamon600, background: colors.cinnamon100, }, }, transparent: { high: { color: colors.frenchVanilla100, background: colors.blackPepper600, }, // Low & High emphasis are identical for transparent status indicators low: { color: colors.frenchVanilla100, background: colors.blackPepper600, }, }, }, }; /** @deprecated ⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in Preview instead. / export interface StatusIndicatorProps extends React.HTMLAttributes { /** The type of the StatusIndicator. Accepts `Gray`, `Orange`, `Blue`, `Green`, `Red`, or `Transparent`.", "source": "modules/react/status-indicator/lib/StatusIndicator.tsx" } ], "aliases": [ "status-indicator", "status-indicator", "statusindicator", "status-indicator" ], "storySlug": "status-indicator" }, { "name": "StatusIndicator", "slug": "status-indicator", "packageName": "@workday/canvas-kit-preview-react", "subpath": "status-indicator", "canonicalImport": "@workday/canvas-kit-preview-react/status-indicator", "status": "preview", "exports": [ "StatusIndicator", "StatusIndicatorProps", "StatusIndicatorVariant" ], "deprecated": false, "recommended": true, "deprecatedExports": [ { "name": "StatusIndicatorVariant", "message": "This is being deprecated and will be removed in a future release. Use `StatusIndicatorProps['variant']` instead." } ], "deprecatedProps": [ { "name": "variant", "message": "This is being deprecated and will be removed in a future release. Use `StatusIndicatorProps['variant']` instead. / export type StatusIndicatorVariant = | 'info' | 'neutral' | 'caution' | 'positive' | 'critical' | 'transparent' | 'blue' | 'green' | 'orange' | 'red' | 'gray'; export interface StatusIndicatorProps extends ExtractProps, Omit, 'variant'> { /** Defines the color of the `StatusIndicator`. * `info` | `blue` - Uses the info system color and is used for informational status indications * `positive` | `green` - Uses the positive system color and is used for positive status indications * `caution` | `orange` - Uses the caution system color and is used for warnings or required actions * `critical` | `red` - Uses the error system color and is used for critical or negative status indications * `neutral` | `gray` - Uses the neutral system color and generally doesn't have positive or negative connotations * `illuminate` - Uses the AI system color and is used for AI generated content * `transparent` - Uses the transparent system color and is used for overlays on top of images or videos @default 'neutral'", "source": "modules/preview-react/status-indicator/lib/StatusIndicator.tsx" } ], "aliases": [ "status-indicator", "status-indicator", "statusindicator", "status-indicator" ], "storySlug": "status-indicator" }, { "name": "Switch", "slug": "switch", "packageName": "@workday/canvas-kit-react", "subpath": "switch", "canonicalImport": "@workday/canvas-kit-react/switch", "status": "production", "exports": [ "Switch", "SwitchProps" ], "deprecated": true, "recommended": false, "deprecatedExports": [ { "name": "Switch", "message": "If true, set the Switch to the on state. @default false / checked?: boolean; /** If true, set the Switch to the disabled state. @default false / disabled?: boolean; /** The HTML `id` of the underlying checkbox input element. @default A uniquely generated id / id?: string; /** The function called when the Switch state changes. / onChange?: (e: React.ChangeEvent) => void; /** The value of the Switch. / value?: string; /** The type of error associated with the Switch (if applicable). / error?: ErrorType; } const switchContainerStencil = createStencil({ base: { position: 'relative', height: system.legacy.size.xs, width: system.legacy.size.sm, }, }); const SwitchContainer = createComponent('div')({ displayName: 'SwitchContainer', Component: ({children, ...elemProps}, ref, Element) => { return ( {children} ); }, }); const switchInputStencil = createStencil({ base: { display: 'flex', position: 'absolute', height: system.legacy.size.xs, width: system.legacy.size.sm, borderRadius: system.legacy.shape.full, opacity: '0', cursor: 'pointer', '&:checked, &.checked': { '& ~ div:first-of-type': { backgroundColor: system.legacy.color.brand.accent.primary, }, '&:disabled, &.disabled': { '& ~ div:first-of-type': { opacity: system.opacity.disabled, }, }, }, '&:disabled, &.disabled': { cursor: 'not-allowed', '& ~ div:first-of-type': { opacity: system.opacity.disabled, }, }, '&:focus-visible, &:focus, &.focus': { outline: 'none', '& ~ div:first-of-type': { ...focusRing({separation: 2, animate: false}), }, }, }, modifiers: { error: { error: { '& ~ div:first-of-type': { boxShadow: ` 0 0 0 ${px2rem(2)} ${system.legacy.color.focus.inverse}, 0 0 0 ${px2rem(4)} ${system.legacy.color.brand.focus.critical}, 0 0 0 ${px2rem(5)} transparent`, }, }, caution: { '& ~ div:first-of-type': { boxShadow: ` 0 0 0 ${px2rem(2)} ${system.legacy.color.focus.inverse}, 0 0 0 ${px2rem(4)} ${system.legacy.color.brand.focus.caution.inner}, 0 0 0 ${px2rem(5)} ${system.legacy.color.brand.border.caution}`, }, }, }, }, }); const SwitchInput = createComponent('input')({ displayName: 'SwitchInput', Component: ({error, ...elemProps}, ref, Element) => { return ; }, }); const switchBackgroundStencil = createStencil({ base: { position: 'absolute', display: 'flex', alignItems: 'center', pointerEvents: 'none', marginBlockStart: system.legacy.gap.xs, width: system.legacy.size.sm, height: system.legacy.size.xxxs, borderRadius: system.legacy.shape.full, padding: `0 ${px2rem(2)}`, transition: 'background-color 200ms ease', backgroundColor: system.legacy.color.accent.muted.soft, }, }); const SwitchBackground = createComponent('div')({ displayName: 'SwitchBackground', Component: ({children, ...elemProps}, ref, Element) => { return ( {children} ); }, }); const switchCircleStencil = createStencil({ base: { width: base.legacy.size150, height: base.legacy.size150, borderRadius: system.legacy.shape.full, boxShadow: system.depth[1], transition: 'transform 150ms ease', pointerEvents: 'none', backgroundColor: system.color.fg.inverse, transform: `translateX(0)`, }, modifiers: { checked: { true: { transform: `translateX(${system.legacy.size.xxxs})`, ':dir(rtl)': { transform: `translateX(${calc.negate(system.legacy.size.xxxs)})`, }, }, }, }, }); const SwitchCircle = createComponent('div')>({ displayName: 'SwitchCircle', Component: ({checked, ...elemProps}, ref, Element) => { return ; }, }); /** @deprecated ⚠️ `Switch` in Main has been deprecated in v15 and will be removed in a future major version. Please use [`Switch` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-switch--docs) instead.", "replacementPackage": "@workday/canvas-kit-preview-react" }, { "name": "SwitchProps", "message": "⚠️ `SwitchProps` in Main has been deprecated in v15 and will be removed in a future major version. Please use [`Switch` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-switch--docs) instead.", "replacementPackage": "@workday/canvas-kit-preview-react" } ], "deprecatedProps": [ { "name": "checked", "message": "⚠️ `SwitchProps` in Main has been deprecated in v15 and will be removed in a future major version. Please use [`Switch` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-switch--docs) instead. / export interface SwitchProps { /** If true, set the Switch to the on state. @default false", "source": "modules/react/switch/lib/Switch.tsx" } ], "aliases": [ "switch", "switch", "switch" ], "storySlug": "switch" }, { "name": "Switch", "slug": "switch", "packageName": "@workday/canvas-kit-preview-react", "subpath": "switch", "canonicalImport": "@workday/canvas-kit-preview-react/switch", "status": "preview", "exports": [ "Switch", "SwitchBackground", "SwitchCircle", "SwitchContainer", "SwitchIcon", "SwitchInput", "SwitchProps", "switchBackgroundStencil", "switchCircleStencil", "switchContainerStencil", "switchIconStencil", "switchInputStencil" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "switch", "switch", "switch-(new)", "switch" ], "storySlug": "switch" }, { "name": "Table", "slug": "table", "packageName": "@workday/canvas-kit-react", "subpath": "table", "canonicalImport": "@workday/canvas-kit-react/table", "status": "production", "exports": [ "App", "BaseTable", "BaseTableBody", "BaseTableCaption", "BaseTableCell", "BaseTableFooter", "BaseTableHead", "BaseTableHeader", "BaseTableProps", "BaseTableRow", "Table", "TableBody", "TableCaption", "TableCell", "TableFooter", "TableHead", "TableHeader", "TableProps", "TableRow", "baseTableBodyStencil", "baseTableCaptionStencil", "baseTableCellStencil", "baseTableHeadStencil", "baseTableHeaderStencil", "baseTableStencil", "tableBodyStencil", "tableCaptionStencil", "tableCellStencil", "tableFooterStencil", "tableHeadStencil", "tableHeaderStencil", "tableStencil" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [], "aliases": [ "table", "table", "table" ], "storySlug": "table" }, { "name": "Tabs", "slug": "preview-tabs", "packageName": "@workday/canvas-kit-react", "subpath": "tabs", "canonicalImport": "@workday/canvas-kit-react/tabs", "status": "production", "exports": [ "OverflowButtonProps", "StyledTabItem", "TabListProps", "TabPanelProps", "Tabs", "TabsItem", "TabsItemProps", "TabsList", "TabsMenuPopper", "TabsMenuPopperProps", "TabsOverflowButton", "TabsPanel", "TabsProps", "tabsListStencil", "useTabOverflowScroll", "useTabsItem", "useTabsList", "useTabsMenuPopper", "useTabsModel", "useTabsOverflowButton", "useTabsPanel" ], "deprecated": false, "recommended": true, "deprecatedExports": [], "deprecatedProps": [ { "name": "MenuPopper", "message": "The contents of the Tabs. Can be `Tabs` children or any valid elements. / children: React.ReactNode; } /** `Tabs` is a container component that is responsible for creating a {@link TabsModel} and sharing it with its subcomponents using React context. It does not represent a real element. ```tsx console.log('Selected tab', data.id)}> {child components} ``` Alternatively, you may pass in a model using the hoisted model pattern. ```tsx const model = useTabsModel({ onSelect(data) { console.log('Activated Tab', data.id); }, }); {child components} ``` See [Configuring a Model](/get-started/for-developers/documentation/compound-components/#configuring-a-model) for more information on model configuration. / export const Tabs = createContainer()({ displayName: 'Tabs', modelHook: useTabsModel, subComponents: { /** `Tabs.List` is a `
` element. It is a container for {@link TabsItem Tabs.Item} subcomponents. ```tsx {Tabs.Items} ``` / List: TabsList, /** `Tabs.Item` is a `