@workday/canvas-kit-react 15.0.0-alpha.1283-next.0 → 15.0.0-alpha.1287-next.0

package/layout/lib/utils/border/shorthand.ts

@@ -2,36 +2,49 @@ import {Property} from 'csstype';
 
 import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
 
-/** style props to set CSS border properties */
+/** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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 */
 export const borderShorthandStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'border',
@@ -70,4 +83,5 @@ export const borderShorthandStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const borderShorthandFns = buildStyleFns(borderShorthandStyleFnConfigs);

package/layout/lib/utils/border/width.ts

@@ -2,36 +2,49 @@ import {Property} from 'csstype';
 
 import {buildStyleFns, StyleFnConfig} from '../buildStyleFns';
 
-/** style props to set CSS border width properties */
+/** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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 */
 export const borderWidthStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'borderWidth',
@@ -70,4 +83,5 @@ export const borderWidthStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const borderWidthFns = buildStyleFns(borderWidthStyleFnConfigs);

package/layout/lib/utils/buildStyleFns.ts

@@ -9,32 +9,39 @@ import {wrapProperty} from '@workday/canvas-kit-styling';
 
 import {CanvasSystemPropValues, SystemPropNames, SystemPropValues} from './systemProps';
 
+/** @deprecated */
 export type StyleFnConfig = {
   name: string;
   properties: string[];
   system: SystemPropNames | 'none';
 };
 
+/** @deprecated */
 export type StyleFns = {
   [key: string]: (value: unknown) => {};
 };
 
+/** @deprecated */
 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']] ||
@@ -42,6 +49,7 @@ const getFont = (value: SystemPropValues['font']) => {
   );
 };
 
+/** @deprecated */
 const getFontSize = (value: SystemPropValues['fontSize'] | string) => {
   return (
     typeTokens.properties.fontSizes[value as CanvasSystemPropValues['fontSize']] ||
@@ -49,6 +57,7 @@ const getFontSize = (value: SystemPropValues['fontSize'] | string) => {
   );
 };
 
+/** @deprecated */
 const getFontWeight = (value: SystemPropValues['fontWeight'] | string) => {
   return (
     typeTokens.properties.fontWeights[value as CanvasSystemPropValues['fontWeight']] ||
@@ -56,6 +65,7 @@ const getFontWeight = (value: SystemPropValues['fontWeight'] | string) => {
   );
 };
 
+/** @deprecated */
 export function buildStyleFns(styleFnConfigs: StyleFnConfig[]): StyleFns {
   return styleFnConfigs.reduce((styleFns = {}, styleFnConfig) => {
     const styleFn = (value: unknown) => {
@@ -110,6 +120,7 @@ export function buildStyleFns(styleFnConfigs: StyleFnConfig[]): StyleFns {
   }, {});
 }
 
+/** @deprecated */
 export function buildStylePropFn<P extends {}>(styleFns: StyleFns) {
   return (props: P) => {
     let styles = {};

package/layout/lib/utils/color.ts

@@ -3,22 +3,29 @@ import {Property} from 'csstype';
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
-/** style props to set CSS color properties */
+/** 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
+   */
   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) */
+  /** sets [CSS opacity property](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
+   * @deprecated
+   */
   opacity?: Property.Opacity;
 };
 
+/** @deprecated */
 export const colorStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'backgroundColor',
@@ -37,6 +44,7 @@ export const colorStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const colorFns = buildStyleFns(colorStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns color styles from Canvas token values.
@@ -48,5 +56,6 @@ export const colorFns = buildStyleFns(colorStyleFnConfigs);
  *   <Box color="frenchVanilla100" opacity={0.6}>Hello, colors!</Box>
  * );
  * ```
+ * @deprecated
  */
 export const color = buildStylePropFn<ColorStyleProps>(colorFns);

package/layout/lib/utils/depth.ts

@@ -2,17 +2,23 @@ import {Property} from 'csstype';
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
-/** style props to for depth styles */
+/** 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) */
+  /** 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 */
 export const depthStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'boxShadow',
@@ -26,6 +32,7 @@ export const depthStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const depthStyleFns = buildStyleFns(depthStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns depth styles from Canvas token values.
@@ -37,5 +44,6 @@ export const depthStyleFns = buildStyleFns(depthStyleFnConfigs);
  *   <Box depth={3}>Hello, box shadows!</Box>
  * );
  * ```
+ * @deprecated
  */
 export const depth = buildStylePropFn<DepthStyleProps>(depthStyleFns);

package/layout/lib/utils/flex.ts

@@ -3,42 +3,61 @@ import {Property, Globals} from 'csstype';
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
-/** style props to for CSS flexbox container properties */
+/** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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 */
 export const flexStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'alignContent',
@@ -92,6 +111,7 @@ export const flexStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const flexStyleFns = buildStyleFns(flexStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns flexbox styles.
@@ -105,5 +125,6 @@ export const flexStyleFns = buildStyleFns(flexStyleFnConfigs);
  *   </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
  */
 export const flex = buildStylePropFn<FlexStyleProps>(flexStyleFns);

package/layout/lib/utils/flexItem.ts

@@ -1,24 +1,41 @@
 import {Property} from 'csstype';
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 
-/** style props to for CSS flex item properties */
+/** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** sets [CSS order property](https://developer.mozilla.org/en-US/docs/Web/CSS/order)
+   * @deprecated
+   */
   order?: Property.Order;
 };
 
+/** @deprecated */
 export const flexItemStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'flex',
@@ -57,6 +74,7 @@ export const flexItemStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const flexItemStyleFns = buildStyleFns(flexItemStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns flexbox item styles.
@@ -70,5 +88,6 @@ export const flexItemStyleFns = buildStyleFns(flexItemStyleFnConfigs);
  *   </Box>
  * );
  * ```
+ * @deprecated
  */
 export const flexItem = buildStylePropFn<FlexItemStyleProps>(flexItemStyleFns);

package/layout/lib/utils/grid.ts

@@ -3,58 +3,93 @@ import {Property, Globals} from 'csstype';
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
-/** style props to for CSS grid container properties */
+/** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** sets [CSS grid property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid)
+   * @deprecated
+   */
   grid?: Property.Grid;
 };
 
+/** @deprecated */
 export const gridStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'gridGap',
@@ -148,6 +183,7 @@ export const gridStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const gridStyleFns = buildStyleFns(gridStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns grid styles.
@@ -162,5 +198,6 @@ export const gridStyleFns = buildStyleFns(gridStyleFnConfigs);
  *   </Grid>
  * );
  * ```
+ * @deprecated
  */
 export const grid = buildStylePropFn<GridStyleProps>(gridStyleFns);

package/layout/lib/utils/gridItem.ts

@@ -2,30 +2,53 @@ import {Property} from 'csstype';
 
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 
-/** style props to for CSS grid item properties */
+/** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** sets [CSS place-self property](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self)
+   * @deprecated
+   */
   placeSelf?: Property.PlaceSelf;
 };
 
+/** @deprecated */
 export const gridItemStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'gridColumnStart',
@@ -79,6 +102,7 @@ export const gridItemStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const gridItemStyleFns = buildStyleFns(gridItemStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns grid styles.
@@ -92,5 +116,6 @@ export const gridItemStyleFns = buildStyleFns(gridItemStyleFnConfigs);
  *   </Grid.Item>
  * );
  * ```
+ * @deprecated
  */
 export const gridItem = buildStylePropFn<GridItemStyleProps>(gridItemStyleFns);