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

package/layout/lib/utils/text.ts

@@ -3,42 +3,71 @@ import {Property} from 'csstype';
 import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
 import {SystemPropValues} from './systemProps';
 
-/** style props to for CSS font and text properties */
+/** 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` */
+   * - 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` */
+   * - 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) */
+  /** 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` */
+   * - 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** 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) */
+  /** sets [CSS word-break property](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)
+   * @deprecated
+   */
   wordBreak?: Property.WordBreak;
 };
 
+/** @deprecated */
 export const textStyleFnConfigs: StyleFnConfig[] = [
   {
     name: 'fontFamily',
@@ -107,6 +136,7 @@ export const textStyleFnConfigs: StyleFnConfig[] = [
   },
 ];
 
+/** @deprecated */
 export const textStyleFns = buildStyleFns(textStyleFnConfigs);
 /**
  * A style prop function that takes component props and returns font and text styles.
@@ -118,5 +148,6 @@ export const textStyleFns = buildStyleFns(textStyleFnConfigs);
  *   <Box textAlign="center" fontWeight="medium">Hello, alignment!</Box>
  * );
  * ```
+ * @deprecated
  */
 export const text = buildStylePropFn<TextStyleProps>(textStyleFns);

package/menu/lib/MenuItem.tsx

@@ -97,8 +97,7 @@ export const menuItemStencil = createStencil({
       [`& :where(${selectedPart})`]: {
         opacity: system.opacity.full,
       },
-
-      '&:where(.focus, :focus)': {
+      '&:where(.focus, :focus-visible)': {
         [systemIconStencil.vars.color]: brand.primary.accent,
         outline: 'none',
         backgroundColor: brand.primary.base,
@@ -113,7 +112,7 @@ export const menuItemStencil = createStencil({
     },
 
     // Focus styles
-    '&:is(.focus, :focus)': {
+    '&:is(.focus, :focus-visible)': {
       color: brand.primary.accent,
       backgroundColor: brand.primary.base,
       outline: `${px2rem(2)} solid transparent`,
@@ -129,8 +128,7 @@ export const menuItemStencil = createStencil({
         background: 'none',
       },
       // Focus + Disabled
-      '&:where(.focus, :focus)': {
-        color: system.color.fg.inverse,
+      '&:where(.focus, :focus-visible)': {
         backgroundColor: brand.primary.light,
       },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "15.0.0-alpha.1283-next.0",
+  "version": "15.0.0-alpha.1287-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -52,8 +52,8 @@
     "@popperjs/core": "^2.5.4",
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.1283-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.1283-next.0",
+    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.1287-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.1287-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "^3.1.1",
     "@workday/design-assets-types": "^0.2.10",
@@ -68,5 +68,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "69e1e3b1fb6262a3db424e4b538fb6dc1afb20f2"
+  "gitHead": "ff2e4b3c7152235ef0f3d6d8f8a1244312657c11"
 }

package/text-input/lib/TextInput.tsx

@@ -23,7 +23,7 @@ export const textInputStencil = createStencil({
     display: 'block',
     border: `${px2rem(1)} solid ${cssVar(system.color.border.input.default)}`,
     backgroundColor: system.color.bg.default,
-    borderRadius: system.shape.x1Half,
+    borderRadius: cssVar('--cnvs-sys-shape-md', system.shape.x1Half),
     boxSizing: 'border-box',
     height: system.space.x10,
     transition: '0.2s box-shadow, 0.2s border-color',