@workday/canvas-kit-react/dist/es6/layout/lib/Box.d.ts

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { CSProps } from '@workday/canvas-kit-styling';
import { CommonStyleProps } from './utils/styleProps';
/**
 * 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;
};
/**
 * 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,
 *  }
 * )
 *
 * ...
 *
 * <StyledHeader color='red'>Hello World</StyledHeader>
 * ```
 */
export declare const boxStyleFn: <P extends BoxProps>(props: P) => {};
/**
 * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
 * It is highly flexible, and its primary purpose is to build other components.
 *
 * @example
 * import { Box, BoxProps } from '@workday/canvas-kit-react/layout';
 *
 * interface CardProps extends BoxProps {
 *   // card-specific props
 * }
 *
 * // `Card`'s default values are set using `BoxProps`
 * const Card = (props: CardProps) => (
 *   <Box depth={1} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
 * );
 *
 */
export declare const Box: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./utils/background").BackgroundStyleProps & import("./utils/border/color").BorderColorStyleProps & import("./utils/border/lineStyle").BorderLineStyleProps & import("./utils/border/radius").BorderRadiusStyleProps & import("./utils/border/shorthand").BorderShorthandStyleProps & import("./utils/border/width").BorderWidthStyleProps & import("./utils/color").ColorStyleProps & import("./utils/depth").DepthStyleProps & import("./utils/flexItem").FlexItemStyleProps & import("./utils/gridItem").GridItemStyleProps & import("./utils/layout").LayoutStyleProps & import("./utils/other").OtherStyleProps & import("./utils/position").PositionStyleProps & import("./utils/space").SpaceStyleProps & import("./utils/text").TextStyleProps & CSProps>;
//# sourceMappingURL=Box.d.ts.map