feat: Add corner-shape for components with border-radius

modules/preview-react/color-picker/lib/parts/SwatchBook.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {ColorSwatch} from '@workday/canvas-kit-react/color-picker';
 import {focusRing} from '@workday/canvas-kit-react/common';
-import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {CORNER_SHAPE, calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 export interface SwatchBookColorObject {
@@ -35,6 +35,7 @@ const colorPickerSwatchBookStencil = createStencil({
       height: system.legacy.size.xxs,
       cursor: 'pointer',
       borderRadius: system.legacy.shape.sm,
+      cornerShape: CORNER_SHAPE,
       transition: 'box-shadow 120ms ease',
       margin: `0px ${system.legacy.gap.sm} ${system.legacy.gap.sm} 0px`,
 

modules/preview-react/multi-select/lib/MultiSelectInput.tsx

@@ -10,7 +10,13 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {InputGroup, TextInput, textInputStencil} from '@workday/canvas-kit-react/text-input';
-import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {
+  CORNER_SHAPE,
+  CSProps,
+  createStencil,
+  handleCsProp,
+  px2rem,
+} from '@workday/canvas-kit-styling';
 import {caretDownSmallIcon, searchIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -25,6 +31,7 @@ export const multiSelectInputStencil = createStencil({
     flexDirection: 'column',
     backgroundColor: system.legacy.color.surface.default,
     borderRadius: system.legacy.shape.md,
+    cornerShape: CORNER_SHAPE,
     boxSizing: 'border-box',
     minHeight: system.legacy.size.md,
     transition: '0.2s box-shadow, 0.2s border-color',
@@ -48,6 +55,7 @@ export const multiSelectInputStencil = createStencil({
       lineHeight: system.legacy.lineHeight.subtext.lg,
       backgroundColor: system.legacy.color.surface.transparent,
       borderRadius: system.legacy.shape.md,
+      cornerShape: CORNER_SHAPE,
 
       // collapse the height of the input by the border width so that an empty multi-select
       // is the same height as a `TextInput`

modules/preview-react/radio/lib/RadioGroup.tsx

@@ -1,6 +1,6 @@
 import {ErrorType, Themeable, createContainer} from '@workday/canvas-kit-react/common';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {CSProps, calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {CORNER_SHAPE, CSProps, calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
 import {RadioButton} from './RadioButton';
@@ -22,6 +22,7 @@ const radioGroupStencil = createStencil({
     display: 'flex',
     flexDirection: 'column',
     borderRadius: system.legacy.shape.md,
+    cornerShape: CORNER_SHAPE,
     gap: system.legacy.gap.sm,
     padding: `${px2rem(10)} ${base.legacy.size150} ${system.legacy.padding.xs}`,
     margin: `0 ${calc.negate(base.legacy.size150)}`,

modules/preview-react/status-indicator/lib/StatusIndicator.tsx

@@ -3,7 +3,12 @@ import React from 'react';
 import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {ExtractStencilProps, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {
+  CORNER_SHAPE,
+  ExtractStencilProps,
+  createStencil,
+  px2rem,
+} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {StatusIndicatorIcon} from './StatusIndicatorIcon';
@@ -64,6 +69,7 @@ const statusIndicatorStencil = createStencil({
     maxWidth: px2rem(200),
     alignItems: 'center',
     borderRadius: system.legacy.shape.sm,
+    cornerShape: CORNER_SHAPE,
     height: system.legacy.size.xxs,
     padding: `0 ${system.legacy.padding.xs}`,
     outline: `${px2rem(1)} solid transparent`,

modules/react/banner/lib/Banner.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {ExtractProps, createContainer, focusRing} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {colorSpace, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {CORNER_SHAPE, colorSpace, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {BannerActionText} from './BannerActionText';
@@ -35,6 +35,7 @@ export const bannerStencil = createStencil({
     borderStartEndRadius: system.legacy.shape.sm,
     borderEndStartRadius: system.legacy.shape.sm,
     borderEndEndRadius: system.legacy.shape.sm,
+    cornerShape: CORNER_SHAPE,
     gap: system.legacy.gap.sm,
     cursor: 'pointer',
     transition: 'background-color 120ms linear',

modules/react/button/lib/Hyperlink.tsx

@@ -1,7 +1,13 @@
 import * as React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {
+  CORNER_SHAPE,
+  CSProps,
+  createStencil,
+  handleCsProp,
+  px2rem,
+} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 export interface HyperlinkProps extends CSProps {
@@ -26,6 +32,7 @@ export const hyperlinkStencil = createStencil({
     color: system.legacy.color.fg.info.default,
     cursor: 'pointer',
     borderRadius: px2rem(2),
+    cornerShape: CORNER_SHAPE,
     padding: `0 ${px2rem(2)} `,
     margin: '0 -2px',
     transition: 'color 0.15s,background-color 0.15s',

modules/react/button/lib/ToolbarDropdownButton.tsx

@@ -1,6 +1,7 @@
 import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {
+  CORNER_SHAPE,
   calc,
   colorSpace,
   createStencil,
@@ -28,6 +29,7 @@ export const toolbarDropdownButtonStencil = createStencil({
     minWidth: system.legacy.size.sm,
     gap: 0,
     [buttonStencil.vars.borderRadius]: system.legacy.shape.sm,
+    cornerShape: CORNER_SHAPE,
     [systemIconStencil.vars.color]: cssVar(
       buttonColorPropVars.default.icon,
       system.color.fg.default

modules/react/button/lib/ToolbarIconButton.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {colorSpace, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {CORNER_SHAPE, colorSpace, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {BaseButton, buttonStencil} from './BaseButton';
@@ -22,6 +22,7 @@ export const toolbarIconButtonStencil = createStencil({
     padding: 0,
     height: system.legacy.size.sm,
     [buttonStencil.vars.borderRadius]: system.legacy.shape.sm,
+    cornerShape: CORNER_SHAPE,
     [systemIconStencil.vars.color]: system.color.fg.default,
     [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
 

modules/react/card/lib/Card.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {CORNER_SHAPE, createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {CardBody} from './CardBody';
@@ -29,6 +29,7 @@ export const cardStencil = createStencil({
     padding: system.legacy.padding.xl,
     backgroundColor: system.legacy.color.surface.default,
     borderRadius: system.legacy.shape.xxl,
+    cornerShape: CORNER_SHAPE,
     border: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
   },
   modifiers: {

modules/react/checkbox/lib/CheckBackground.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import {ErrorType, createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {CORNER_SHAPE, createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
 interface CheckBackgroundProps {
@@ -22,6 +22,7 @@ export const checkboxBackgroundStencil = createStencil({
     alignItems: 'center',
     backgroundColor: system.legacy.color.surface.default,
     borderRadius: system.legacy.shape.sm,
+    cornerShape: CORNER_SHAPE,
     boxSizing: 'border-box',
     display: 'flex',
     height: base.legacy.size225,

modules/react/checkbox/lib/CheckboxInput.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react';
 
 import {ErrorType, createComponent, focusRing} from '@workday/canvas-kit-react/common';
-import {CSProps, calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {
+  CORNER_SHAPE,
+  CSProps,
+  calc,
+  createStencil,
+  handleCsProp,
+  px2rem,
+} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
 import {checkboxBackgroundStencil} from './CheckBackground';
@@ -54,6 +61,7 @@ export interface CheckboxProps extends CSProps {
 const checkboxInputStencil = createStencil({
   base: {
     borderRadius: system.legacy.shape.sm,
+    cornerShape: CORNER_SHAPE,
     width: base.legacy.size300,
     height: base.legacy.size300,
     margin: 0,

modules/react/color-picker/lib/parts/ColorSwatch.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {pickForegroundColor} from '@workday/canvas-kit-react/common';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {CORNER_SHAPE, calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {checkSmallIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -21,6 +21,7 @@ export const colorPickerColorSwatchStencil = createStencil({
     width: system.legacy.size.xxs,
     height: system.legacy.size.xxs,
     borderRadius: system.legacy.shape.sm,
+    cornerShape: CORNER_SHAPE,
     backgroundColor: color,
     display: 'flex',
     alignItems: 'center',

modules/react/combobox/lib/ComboboxCard.tsx

@@ -4,7 +4,7 @@ import {
   createSubcomponent,
 } from '@workday/canvas-kit-react/common';
 import {Menu} from '@workday/canvas-kit-react/menu';
-import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {CORNER_SHAPE, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {useComboboxModel} from './hooks/useComboboxModel';
@@ -25,6 +25,7 @@ export const comboboxCardStencil = createStencil({
   base: {
     '& :where([data-part="list-box-container"])': {
       borderRadius: system.legacy.shape.xxl,
+      cornerShape: CORNER_SHAPE,
     },
   },
 });

modules/react/expandable/lib/ExpandableTarget.tsx

@@ -3,7 +3,7 @@ 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, px2rem} from '@workday/canvas-kit-styling';
+import {CORNER_SHAPE, createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {useExpandableModel} from './hooks/useExpandableModel';
@@ -29,6 +29,7 @@ export const expandableTargetStencil = createStencil({
     background: system.legacy.color.surface.transparent,
     borderColor: system.color.border.transparent,
     borderRadius: system.legacy.shape.xxl,
+    cornerShape: CORNER_SHAPE,
     borderWidth: 0,
     display: 'flex',
     alignItems: 'center',

modules/react/form-field/lib/FormFieldGroupList.tsx

@@ -1,6 +1,13 @@
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
 import {FlexProps} from '@workday/canvas-kit-react/layout';
-import {CSProps, calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {
+  CORNER_SHAPE,
+  CSProps,
+  calc,
+  createStencil,
+  handleCsProp,
+  px2rem,
+} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
 import {useFormFieldModel} from './hooks';
@@ -12,6 +19,7 @@ const formFieldGroupListStencil = createStencil({
     display: 'flex',
     flexDirection: 'column',
     borderRadius: system.legacy.shape.md,
+    cornerShape: CORNER_SHAPE,
     gap: system.legacy.gap.sm,
     padding: `${px2rem(10)} ${base.legacy.size150} ${system.legacy.padding.xs}`,
     margin: `0 ${calc.negate(base.legacy.size150)}`,

modules/react/information-highlight/lib/InformationHighlight.tsx

@@ -1,6 +1,12 @@
 import {createContainer} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {
+  CORNER_SHAPE,
+  CSProps,
+  createStencil,
+  handleCsProp,
+  px2rem,
+} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
 import {useInformationHighlightModel} from './hooks/useInformationHighlightModel';
@@ -18,6 +24,7 @@ export const informationHighlightStencil = createStencil({
     gap: `${system.legacy.gap.sm} ${system.legacy.gap.md}`,
     padding: system.legacy.padding.md,
     borderRadius: system.legacy.shape.sm,
+    cornerShape: CORNER_SHAPE,
     outline: `${px2rem(1)} solid transparent`,
     borderInlineStart: `${base.legacy.size50} solid transparent`,
   },

modules/react/layout/lib/utils/buildStyleFns.ts

@@ -5,7 +5,7 @@ import {
   space as spaceTokens,
   type as typeTokens,
 } from '@workday/canvas-kit-react/tokens';
-import {wrapProperty} from '@workday/canvas-kit-styling';
+import {CORNER_SHAPE, wrapProperty} from '@workday/canvas-kit-styling';
 
 import {CanvasSystemPropValues, SystemPropNames, SystemPropValues} from './systemProps';
 
@@ -102,10 +102,20 @@ export function buildStyleFns(styleFnConfigs: StyleFnConfig[]): StyleFns {
         }
 
         if (styleFnConfig.system === 'shape') {
-          return {
+          const radius = getShape(value as SystemPropValues['shape']);
+          const shapeStyles: Record<string, unknown> = {
             ...styles,
-            [property]: getShape(value as SystemPropValues['shape']),
+            [property]: radius,
           };
+
+          const isShapeToken = typeof value === 'string' && value in borderRadiusTokens;
+          const isCircleToken = value === 'circle' || radius === borderRadiusTokens.circle;
+
+          if (isShapeToken && !isCircleToken) {
+            shapeStyles.cornerShape = CORNER_SHAPE;
+          }
+
+          return shapeStyles;
         }
 
         if (styleFnConfig.system === 'space') {

modules/react/layout/spec/border.spec.ts

@@ -1,5 +1,6 @@
 import {ContentDirection} from '@workday/canvas-kit-react/common';
 import {border} from '@workday/canvas-kit-react/layout';
+import {CORNER_SHAPE} from '@workday/canvas-kit-styling';
 
 const context = describe;
 
@@ -94,11 +95,35 @@ describe('Border Style Props Function', () => {
         borderTopRightRadius: '4px',
         borderBottomLeftRadius: '8px',
         borderBottomRightRadius: '999px',
+        cornerShape: CORNER_SHAPE,
       };
       const borderStyles = border(props);
 
       expect(borderStyles).toEqual(expected);
     });
+
+    it('should include cornerShape for non-circular shape tokens', () => {
+      const props = {
+        borderRadius: 'm',
+      };
+      const borderStyles = border(props);
+
+      expect(borderStyles).toEqual({
+        borderRadius: '4px',
+        cornerShape: CORNER_SHAPE,
+      });
+    });
+
+    it('should not include cornerShape for circle shape tokens', () => {
+      const props = {
+        borderRadius: 'circle',
+      };
+      const borderStyles = border(props);
+
+      expect(borderStyles).toEqual({
+        borderRadius: '999px',
+      });
+    });
   });
 
   context('given border-style props', () => {