@workday/canvas-kit-react 12.6.24 → 12.6.26

package/dist/es6/toast/lib/ToastIcon.js

@@ -4,7 +4,7 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const toastIconStencil = createStencil({
-    base: { name: "ork467", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);" }
+    base: { name: "cm4k67", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);" }
 }, "toast-icon-4b0701");
 export const ToastIcon = createComponent('div')({
     displayName: 'Toast.Icon',

package/dist/es6/toast/lib/ToastMessage.js

@@ -6,7 +6,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system } from '@workday/canvas-tokens-web';
 export const toastMessageStencil = createStencil({
-    base: { name: "ork468", styles: "box-sizing:border-box;word-break:break-word;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);" }
+    base: { name: "cm4k68", styles: "box-sizing:border-box;word-break:break-word;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);" }
 }, "toast-message-759382");
 export const ToastMessage = createSubcomponent('p')({
     modelHook: useToastModel,

package/dist/es6/version.js

@@ -1 +1 @@
-export const version = '12.6.24';
+export const version = '12.6.26';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "12.6.24",
+  "version": "12.6.26",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -51,8 +51,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^12.6.24",
-    "@workday/canvas-kit-styling": "^12.6.24",
+    "@workday/canvas-kit-popup-stack": "^12.6.26",
+    "@workday/canvas-kit-styling": "^12.6.26",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.1",
     "@workday/design-assets-types": "^0.2.8",
@@ -68,5 +68,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "fbd6c218bb1814cfcc6a15181ed3b4b9373a56d0"
+  "gitHead": "c779982abeeb548d372d3d93a214dc59c1e955be"
 }

package/radio/lib/Radio.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   createComponent,
   StyledType,
-  focusRing,
   mouseFocusBehavior,
   styled,
   Themeable,
@@ -153,34 +152,31 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
       '& ~ div:first-of-type': {
         borderWidth: '2px',
         borderColor: variant === 'inverse' ? colors.blackPepper400 : themeFocusOutline,
-        boxShadow: 'none',
         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,
-        }),
+        // using `focusRing` in support doesn't work for components that use `styled` function because we changed the type to be `CSSObjectWithVars`. Changing this to use `boxShadow` works in support for non stencil components.
+        boxShadow:
+          variant === 'inverse'
+            ? '0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))'
+            : '0 0 0 0px transparent',
       },
     },
     '&:checked:focus ~ div:first-of-type': {
-      ...focusRing({
-        separation: 2,
-        width: 2,
-        innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
-        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
-      }),
+      // using `focusRing` in support doesn't work for components that use `styled` function because we changed the type to be `CSSObjectWithVars`. Changing this to use `boxShadow` works in support for non stencil components.
+      boxShadow:
+        variant === 'inverse'
+          ? '0 0 0 2px var(--cnvs-base-palette-blackpepper-400, rgba(51,51,51,1)), 0 0 0 4px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))'
+          : '0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1))',
       borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
       borderWidth: '2px',
     },
     ...mouseFocusBehavior({
       '&:focus ~ div:first-of-type': {
-        ...focusRing({
-          width: 0,
-          outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
-        }),
+        // using `focusRing` in support doesn't work for components that use `styled` function because we changed the type to be `CSSObjectWithVars`. Changing this to use `boxShadow` works in support for non stencil components.
+        boxShadow:
+          variant === 'inverse'
+            ? '0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))'
+            : '0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1))',
         borderWidth: '1px',
         borderColor: checked
           ? variant === 'inverse'

package/tabs/lib/TabsItem.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import {colors, space, type, borderRadius, iconColors} from '@workday/canvas-kit-react/tokens';
 import {
-  focusRing,
   styled,
   StyledType,
   slugify,
@@ -108,7 +107,8 @@ export const StyledTabItem = styled(Box.as('button'))<StyledType & Pick<TabsItem
 
     '&:focus-visible, &.focus': {
       outline: `${px2rem(2)} solid transparent`,
-      ...focusRing({inset: 'outer', width: 0, separation: 2}, theme),
+      // using `focusRing` in support doesn't work for components that use `styled` function because we changed the type to be `CSSObjectWithVars`. Changing this to use `boxShadow` works in support for non stencil components.
+      boxShadow: `inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)),inset 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))`,
     },
 
     '&:disabled, &[aria-disabled]': {