@workday/canvas-kit-react 15.0.4 → 15.0.6

package/expandable/lib/ExpandableTarget.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Heading} from '@workday/canvas-kit-react/text';
-import {createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {useExpandableModel} from './hooks/useExpandableModel';
 import {useExpandableTarget} from './hooks/useExpandableTarget';
@@ -42,7 +42,7 @@ export const expandableTargetStencil = createStencil({
       backgroundColor: system.legacy.color.surface.overlay.hover.default,
     },
     '&:focus-visible, &.focus': {
-      outline: `${cssVar(system.legacy.color.brand.border.primary, brand.common.focusOutline)} solid ${px2rem(2)}`,
+      outline: `${px2rem(2)} solid ${system.legacy.color.brand.border.primary}`,
     },
   },
 });
@@ -56,7 +56,7 @@ export const ExpandableTarget = createSubcomponent('button')({
   );
 
   return headingLevel ? (
-    <Heading size="small" as={headingLevel} margin="0">
+    <Heading size="small" as={headingLevel} cs={{margin: 0}}>
       {button}
     </Heading>
   ) : (

package/layout/lib/Box.tsx

@@ -117,9 +117,11 @@ export const boxStyleFn = <P extends BoxProps>(props: P) => {
 };
 
 // Meant to be used with elements. The `shouldForwardProps` will remove all style props
+// TODO: Update this to use the new styling approach.
 const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(boxStyleFn);
 
 // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
+// TODO: Update this to use the new styling approach.
 const StyledBoxComponent = styled('div')<StyledType & BoxProps>(boxStyleFn);
 
 /**

package/layout/lib/Flex.tsx

@@ -7,6 +7,7 @@ import {FlexStyleProps, flex} from './utils/flex';
 
 export type FlexProps = Omit<BoxProps, 'display'> & FlexStyleProps;
 
+// TODO: Update this to use the new styling approach.
 const StyledFlex = styled(Box)<StyledType & FlexProps>(
   {
     display: 'flex',

package/layout/lib/Grid.tsx

@@ -8,6 +8,7 @@ import {GridStyleProps, grid} from './utils/grid';
 export type GridProps = Omit<BoxProps, 'display'> & GridStyleProps;
 export type GridItemProps = BoxProps;
 
+// TODO: Update this to use the new styling approach.
 const StyledGrid = styled(Box)<StyledType & GridProps>(
   {
     display: 'grid',

package/menu/lib/MenuDivider.tsx

@@ -9,7 +9,7 @@ export const menuDividerStencil = createStencil({
     display: 'block',
     height: px2rem(1),
     border: 'none',
-    borderTop: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
+    borderBlockStart: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
     margin: `${system.legacy.gap.sm} ${system.legacy.gap.md}`,
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "15.0.4",
+  "version": "15.0.6",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -52,11 +52,11 @@
     "@popperjs/core": "^2.5.4",
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-expressive-icons-web": "1.0.1",
-    "@workday/canvas-kit-popup-stack": "^15.0.4",
-    "@workday/canvas-kit-preview-react": "^15.0.4",
-    "@workday/canvas-kit-styling": "^15.0.4",
-    "@workday/canvas-system-icons-web": "4.0.2",
+    "@workday/canvas-expressive-icons-web": "1.0.2",
+    "@workday/canvas-kit-popup-stack": "^15.0.6",
+    "@workday/canvas-kit-preview-react": "^15.0.6",
+    "@workday/canvas-kit-styling": "^15.0.6",
+    "@workday/canvas-system-icons-web": "4.0.4",
     "@workday/canvas-tokens-web": "4.3.0",
     "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
@@ -70,5 +70,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "f942653d6e32c211030ea73fddebf3af11856056"
+  "gitHead": "7633fbb415cd6f549265955cd80ed21bcc72d3fc"
 }

package/popup/lib/PopupCard.tsx

@@ -65,7 +65,7 @@ function getSpace(value?: string | number) {
 
 function getMaxHeight(margin?: string | number) {
   // set the default margin offset to 40px
-  let marginOffset: string | number = cssVar(base.legacy.size500);
+  let marginOffset: string | number = base.legacy.size500;
 
   if (margin) {
     // parse the margin prop

package/radio/lib/Radio.tsx

@@ -54,6 +54,7 @@ export interface RadioProps extends Themeable {
 
 const radioBorderRadius = 9;
 
+// Ignore all `styled` as component is deprecated in v15
 const RadioContainer = styled('div')({
   display: 'flex',
   alignItems: 'center',

package/radio/lib/RadioGroup.tsx

@@ -38,6 +38,7 @@ export interface RadioGroupProps extends Themeable, GrowthBehavior {
   onChange?: (value: string | number) => void;
 }
 
+// Ignore all `styled` as component is deprecated in v15
 const Container = styled('div')<Pick<RadioGroupProps, 'error' | 'grow' | 'theme'>>(
   {
     display: 'inline-block',

package/skeleton/lib/parts/SkeletonHeader.tsx

@@ -33,7 +33,7 @@ export const skeletonHeaderStencil = createStencil({
     borderRadius: system.legacy.shape.md,
     height: cssVar(height, system.legacy.size.xs),
     width: width,
-    marginBottom: system.legacy.size.xxxs,
+    marginBlockEnd: system.legacy.size.xxxs,
   }),
 });
 

package/skeleton/lib/parts/SkeletonShape.tsx

@@ -37,7 +37,7 @@ export const skeletonShapeStencil = createStencil({
     borderRadius: cssVar(borderRadius, '0'),
     height: cssVar(height, '100%'),
     width: width,
-    marginBottom: system.legacy.size.xxxs,
+    marginBlockEnd: system.legacy.size.xxxs,
   }),
 });
 

package/skeleton/lib/parts/SkeletonText.tsx

@@ -20,7 +20,7 @@ export const skeletonTextStencil = createStencil({
     backgroundColor: '',
   },
   base: ({backgroundColor}) => ({
-    marginBottom: system.legacy.size.xs,
+    marginBlockEnd: system.legacy.size.xs,
     '& [data-part="skeleton-text-lines"]': {
       backgroundColor: cssVar(backgroundColor, system.legacy.color.surface.loading),
       height: system.legacy.size.xxxs,

package/status-indicator/lib/StatusIndicator.tsx

@@ -146,6 +146,7 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
   icon?: CanvasSystemIcon;
 }
 
+// Ignore all `styled` as component is deprecated in v15
 const Container = styled('span')<
   PickRequired<StatusIndicatorProps, 'emphasis' | 'maxWidth', 'type'>
 >(statusIndicatorStyles.styles, ({type, emphasis, maxWidth}) => ({
@@ -183,7 +184,12 @@ export class StatusIndicator extends React.Component<StatusIndicatorProps> {
     return (
       <Container type={type} emphasis={emphasis} maxWidth={maxWidth} {...elemProps}>
         {icon && (
-          <SystemIcon color={variant.color} icon={icon} size={14} cs={{paddingRight: space.xxxs}} />
+          <SystemIcon
+            color={variant.color}
+            icon={icon}
+            size={14}
+            cs={{paddingInlineEnd: space.xxxs}}
+          />
         )}
         <StatusLabel>{label}</StatusLabel>
       </Container>

package/switch/lib/Switch.tsx

@@ -124,7 +124,7 @@ const switchBackgroundStencil = createStencil({
     display: 'flex',
     alignItems: 'center',
     pointerEvents: 'none',
-    marginTop: system.legacy.gap.xs,
+    marginBlockStart: system.legacy.gap.xs,
     width: system.legacy.size.sm,
     height: system.legacy.size.xxxs,
     borderRadius: system.legacy.shape.full,

package/table/lib/Table.tsx

@@ -31,7 +31,7 @@ export const tableCaptionStencil = createStencil({
   extends: baseTableCaptionStencil,
   base: {
     display: 'flex',
-    borderBottom: `${px2rem(1)} solid ${system.color.border.container}`,
+    borderBlockEnd: `${px2rem(1)} solid ${system.legacy.color.border.strong}`,
   },
 });
 

package/table/lib/parts/BaseTableBody.tsx

@@ -7,12 +7,12 @@ export const baseTableBodyStencil = createStencil({
     'tr ': {
       '&:last-of-type': {
         'td, th': {
-          borderBottom: 'none',
+          borderBlockEnd: 'none',
         },
       },
       '&:first-of-type': {
         'td, th': {
-          borderTop: 'none',
+          borderBlockStart: 'none',
         },
       },
     },

package/table/lib/parts/BaseTableCell.tsx

@@ -7,7 +7,7 @@ export const baseTableCellStencil = createStencil({
   base: {
     alignItems: 'center',
     backgroundColor: system.color.bg.default,
-    borderBottom: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
+    borderBlockEnd: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
     gridTemplateColumns: '1fr',
     justifyContent: 'start',
     minHeight: '3.5rem',

package/table/lib/parts/BaseTableHeader.tsx

@@ -6,7 +6,7 @@ import {base, system} from '@workday/canvas-tokens-web';
 export const baseTableHeaderStencil = createStencil({
   base: {
     backgroundColor: system.color.bg.default,
-    borderBottom: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
+    borderBlockEnd: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
     justifyContent: 'start',
     minHeight: calc.subtract(system.legacy.size.xxl, base.legacy.size100),
     padding: `${system.legacy.padding.xs} ${system.legacy.padding.md}`,

package/tabs/lib/TabsItem.tsx

@@ -146,7 +146,7 @@ const tabItemStencil = createStencil({
       '&:after': {
         position: 'absolute',
         // selected state for Windows high contrast theme
-        borderBottom: `${base.legacy.size50} solid transparent`,
+        borderBlockEnd: `${base.legacy.size50} solid transparent`,
         borderRadius: `${system.legacy.shape.md} ${system.legacy.shape.md} ${system.legacy.shape.none} ${system.legacy.shape.none}`,
         backgroundColor: system.legacy.color.brand.fg.primary.default,
         bottom: 0,

package/tabs/lib/TabsList.tsx

@@ -116,7 +116,7 @@ export const tabsListStencil = createStencil({
   base: {
     display: 'flex',
     position: 'relative',
-    borderBottom: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
+    borderBlockEnd: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
     gap: system.legacy.gap.xs,
     // TODO: update this to use a grid token if we make those available as tokens
     paddingInline: base.legacy.size500,

package/tabs/lib/TabsPanel.tsx

@@ -1,10 +1,8 @@
-import styled from '@emotion/styled';
 import React from 'react';
 
 import {ListRenderItemContext} from '@workday/canvas-kit-react/collection';
 import {
   ExtractProps,
-  StyledType,
   createElemPropsHook,
   createSubcomponent,
   slugify,
@@ -35,8 +33,6 @@ export interface TabPanelProps extends ExtractProps<typeof Box, never> {
   tabIndex?: number;
 }
 
-const StyledTabsPanel = styled(Box)<StyledType>();
-
 export const useTabsPanel = createElemPropsHook(useTabsModel)((
   {state, events},
   _,
@@ -74,8 +70,8 @@ export const TabsPanel = createSubcomponent('div')({
   elemPropsHook: useTabsPanel,
 })<TabPanelProps>(({children, ...elemProps}, Element) => {
   return (
-    <StyledTabsPanel as={Element} {...elemProps}>
+    <Box as={Element} {...elemProps}>
       {children}
-    </StyledTabsPanel>
+    </Box>
   );
 });

package/testing/lib/ComponentStatesTable.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import {styled} from '@workday/canvas-kit-react/common';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {PropCombination, Props} from './propTypes';
 
@@ -27,16 +28,16 @@ export interface ComponentStatesTableProps {
   children(props: Props): React.ReactNode;
 }
 
-const Table = styled('table')({
+const tableStyles = createStyles({
   width: '100%',
   thead: {
     textAlign: 'start',
-    paddingBlockEnd: 16,
+    paddingBlockEnd: system.padding.md,
   },
   'td, th': {
-    minWidth: 100,
-    paddingBlockEnd: 16,
-    paddingInlineEnd: 16,
+    minWidth: px2rem(100),
+    paddingBlockEnd: system.padding.md,
+    paddingInlineEnd: system.padding.md,
     textAlign: 'start',
   },
 });
@@ -47,7 +48,7 @@ export const ComponentStatesTable = ({
   children,
 }: ComponentStatesTableProps) => {
   return (
-    <Table>
+    <table className={tableStyles}>
       <thead>
         <tr>
           <th>Variants</th>
@@ -81,6 +82,6 @@ export const ComponentStatesTable = ({
           );
         })}
       </tbody>
-    </Table>
+    </table>
   );
 };