From 50fd557698bf24959f0e8d7bcf7e0d011b5c87a1 Mon Sep 17 00:00:00 2001 From: Sheelah Brennan Date: Fri, 5 Jun 2026 16:51:28 -0600 Subject: [PATCH 1/2] feat: Add corner-shape for components with border-radius --- .../color-picker/lib/parts/SwatchBook.tsx | 4 +-- .../multi-select/lib/MultiSelectInput.tsx | 12 ++++++--- .../preview-react/radio/lib/RadioGroup.tsx | 4 +-- .../status-indicator/lib/StatusIndicator.tsx | 9 +++++-- modules/react/banner/lib/Banner.tsx | 3 ++- modules/react/button/lib/Hyperlink.tsx | 10 ++++++-- .../button/lib/ToolbarDropdownButton.tsx | 2 ++ .../react/button/lib/ToolbarIconButton.tsx | 3 ++- modules/react/card/lib/Card.tsx | 4 +-- .../react/checkbox/lib/CheckBackground.tsx | 4 +-- modules/react/checkbox/lib/CheckboxInput.tsx | 11 ++++++-- .../color-picker/lib/parts/ColorSwatch.tsx | 10 ++++++-- modules/react/combobox/lib/ComboboxCard.tsx | 4 +-- .../react/expandable/lib/ExpandableTarget.tsx | 4 +-- .../form-field/lib/FormFieldGroupList.tsx | 11 ++++++-- .../lib/InformationHighlight.tsx | 10 ++++++-- .../react/layout/lib/utils/buildStyleFns.ts | 16 +++++++++--- modules/react/layout/spec/border.spec.ts | 25 +++++++++++++++++++ modules/react/menu/lib/MenuCard.tsx | 4 +-- modules/react/menu/lib/MenuItem.tsx | 10 ++++++-- modules/react/menu/lib/MenuList.tsx | 4 +-- modules/react/modal/lib/ModalCard.tsx | 4 +-- modules/react/pill/lib/Pill.tsx | 4 +-- modules/react/pill/lib/PillCount.tsx | 3 ++- modules/react/pill/lib/PillIconButton.tsx | 4 +-- modules/react/popup/lib/PopupCard.tsx | 3 ++- modules/react/radio/lib/RadioGroup.tsx | 2 ++ .../lib/SegmentedControlItem.tsx | 3 ++- .../lib/SegmentedControlList.tsx | 4 +-- .../skeleton/lib/parts/SkeletonHeader.tsx | 11 ++++++-- .../skeleton/lib/parts/SkeletonShape.tsx | 11 ++++++-- .../react/skeleton/lib/parts/SkeletonText.tsx | 10 ++++++-- .../status-indicator/lib/StatusIndicator.tsx | 2 ++ modules/react/table/lib/BaseTable.tsx | 4 +-- modules/react/tabs/lib/TabsItem.tsx | 4 ++- modules/react/text-input/lib/TextInput.tsx | 4 +-- modules/react/toast/lib/Toast.tsx | 4 +-- .../react/tooltip/lib/TooltipContainer.tsx | 11 ++++++-- modules/styling-transform/index.ts | 1 + .../lib/utils/handleWithCornerShape.ts | 23 +++++++++++++++++ .../spec/createProgramFromSource.ts | 3 +++ .../spec/handleWithCornerShape.spec.ts | 25 +++++++++++++++++++ modules/styling-transform/testing.ts | 1 + modules/styling/index.ts | 1 + modules/styling/lib/cornerShape.ts | 11 ++++++++ modules/styling/spec/cornerShape.spec.ts | 21 ++++++++++++++++ styling.config.ts | 4 +-- 47 files changed, 276 insertions(+), 66 deletions(-) create mode 100644 modules/styling-transform/lib/utils/handleWithCornerShape.ts create mode 100644 modules/styling-transform/spec/handleWithCornerShape.spec.ts create mode 100644 modules/styling/lib/cornerShape.ts create mode 100644 modules/styling/spec/cornerShape.spec.ts diff --git a/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx b/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx index 9d2b41ed87..7d192ae429 100644 --- a/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx +++ b/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 {calc, createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; export interface SwatchBookColorObject { @@ -34,7 +34,7 @@ const colorPickerSwatchBookStencil = createStencil({ width: system.legacy.size.xxs, height: system.legacy.size.xxs, cursor: 'pointer', - borderRadius: system.legacy.shape.sm, + ...withCornerShape(system.legacy.shape.sm), transition: 'box-shadow 120ms ease', margin: `0px ${system.legacy.gap.sm} ${system.legacy.gap.sm} 0px`, diff --git a/modules/preview-react/multi-select/lib/MultiSelectInput.tsx b/modules/preview-react/multi-select/lib/MultiSelectInput.tsx index d6b974cb0a..ad5662d298 100644 --- a/modules/preview-react/multi-select/lib/MultiSelectInput.tsx +++ b/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 { + CSProps, + createStencil, + handleCsProp, + px2rem, + withCornerShape, +} from '@workday/canvas-kit-styling'; import {caretDownSmallIcon, searchIcon} from '@workday/canvas-system-icons-web'; import {system} from '@workday/canvas-tokens-web'; @@ -24,7 +30,7 @@ export const multiSelectInputStencil = createStencil({ display: 'flex', flexDirection: 'column', backgroundColor: system.legacy.color.surface.default, - borderRadius: system.legacy.shape.md, + ...withCornerShape(system.legacy.shape.md), boxSizing: 'border-box', minHeight: system.legacy.size.md, transition: '0.2s box-shadow, 0.2s border-color', @@ -47,7 +53,7 @@ export const multiSelectInputStencil = createStencil({ fontWeight: system.fontWeight.normal, lineHeight: system.legacy.lineHeight.subtext.lg, backgroundColor: system.legacy.color.surface.transparent, - borderRadius: system.legacy.shape.md, + ...withCornerShape(system.legacy.shape.md), // collapse the height of the input by the border width so that an empty multi-select // is the same height as a `TextInput` diff --git a/modules/preview-react/radio/lib/RadioGroup.tsx b/modules/preview-react/radio/lib/RadioGroup.tsx index ee790d560c..8e03b3c9d5 100644 --- a/modules/preview-react/radio/lib/RadioGroup.tsx +++ b/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 {CSProps, calc, createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; import {RadioButton} from './RadioButton'; @@ -21,7 +21,7 @@ const radioGroupStencil = createStencil({ base: { display: 'flex', flexDirection: 'column', - borderRadius: system.legacy.shape.md, + ...withCornerShape(system.legacy.shape.md), gap: system.legacy.gap.sm, padding: `${px2rem(10)} ${base.legacy.size150} ${system.legacy.padding.xs}`, margin: `0 ${calc.negate(base.legacy.size150)}`, diff --git a/modules/preview-react/status-indicator/lib/StatusIndicator.tsx b/modules/preview-react/status-indicator/lib/StatusIndicator.tsx index d5056e0c27..ec5a09dfb1 100644 --- a/modules/preview-react/status-indicator/lib/StatusIndicator.tsx +++ b/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 { + ExtractStencilProps, + createStencil, + px2rem, + withCornerShape, +} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {StatusIndicatorIcon} from './StatusIndicatorIcon'; @@ -63,7 +68,7 @@ const statusIndicatorStencil = createStencil({ gap: system.legacy.gap.xs, maxWidth: px2rem(200), alignItems: 'center', - borderRadius: system.legacy.shape.sm, + ...withCornerShape(system.legacy.shape.sm), height: system.legacy.size.xxs, padding: `0 ${system.legacy.padding.xs}`, outline: `${px2rem(1)} solid transparent`, diff --git a/modules/react/banner/lib/Banner.tsx b/modules/react/banner/lib/Banner.tsx index 927a262f11..7dfc274d71 100644 --- a/modules/react/banner/lib/Banner.tsx +++ b/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', diff --git a/modules/react/button/lib/Hyperlink.tsx b/modules/react/button/lib/Hyperlink.tsx index 7f044984ce..a8e61bf379 100644 --- a/modules/react/button/lib/Hyperlink.tsx +++ b/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 { + CSProps, + createStencil, + handleCsProp, + px2rem, + withCornerShape, +} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; export interface HyperlinkProps extends CSProps { @@ -25,7 +31,7 @@ export const hyperlinkStencil = createStencil({ textDecoration: 'underline', color: system.legacy.color.fg.info.default, cursor: 'pointer', - borderRadius: px2rem(2), + ...withCornerShape(px2rem(2)), padding: `0 ${px2rem(2)} `, margin: '0 -2px', transition: 'color 0.15s,background-color 0.15s', diff --git a/modules/react/button/lib/ToolbarDropdownButton.tsx b/modules/react/button/lib/ToolbarDropdownButton.tsx index 51e8807aca..551a3b24e1 100644 --- a/modules/react/button/lib/ToolbarDropdownButton.tsx +++ b/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 diff --git a/modules/react/button/lib/ToolbarIconButton.tsx b/modules/react/button/lib/ToolbarIconButton.tsx index 191d14e9ae..0909807536 100644 --- a/modules/react/button/lib/ToolbarIconButton.tsx +++ b/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, diff --git a/modules/react/card/lib/Card.tsx b/modules/react/card/lib/Card.tsx index d9c6c7ec5c..1ad983d55d 100644 --- a/modules/react/card/lib/Card.tsx +++ b/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 {createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {CardBody} from './CardBody'; @@ -28,7 +28,7 @@ export const cardStencil = createStencil({ gap: system.legacy.gap.lg, padding: system.legacy.padding.xl, backgroundColor: system.legacy.color.surface.default, - borderRadius: system.legacy.shape.xxl, + ...withCornerShape(system.legacy.shape.xxl), border: `${px2rem(1)} solid ${system.legacy.color.border.default}`, }, modifiers: { diff --git a/modules/react/checkbox/lib/CheckBackground.tsx b/modules/react/checkbox/lib/CheckBackground.tsx index 9b4a80d95e..e5deb3ca49 100644 --- a/modules/react/checkbox/lib/CheckBackground.tsx +++ b/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 {createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; interface CheckBackgroundProps { @@ -21,7 +21,7 @@ export const checkboxBackgroundStencil = createStencil({ base: { alignItems: 'center', backgroundColor: system.legacy.color.surface.default, - borderRadius: system.legacy.shape.sm, + ...withCornerShape(system.legacy.shape.sm), boxSizing: 'border-box', display: 'flex', height: base.legacy.size225, diff --git a/modules/react/checkbox/lib/CheckboxInput.tsx b/modules/react/checkbox/lib/CheckboxInput.tsx index fff4f17757..379a805554 100644 --- a/modules/react/checkbox/lib/CheckboxInput.tsx +++ b/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 { + CSProps, + calc, + createStencil, + handleCsProp, + px2rem, + withCornerShape, +} from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; import {checkboxBackgroundStencil} from './CheckBackground'; @@ -53,7 +60,7 @@ export interface CheckboxProps extends CSProps { const checkboxInputStencil = createStencil({ base: { - borderRadius: system.legacy.shape.sm, + ...withCornerShape(system.legacy.shape.sm), width: base.legacy.size300, height: base.legacy.size300, margin: 0, diff --git a/modules/react/color-picker/lib/parts/ColorSwatch.tsx b/modules/react/color-picker/lib/parts/ColorSwatch.tsx index c924b998d2..9531a34ede 100644 --- a/modules/react/color-picker/lib/parts/ColorSwatch.tsx +++ b/modules/react/color-picker/lib/parts/ColorSwatch.tsx @@ -2,7 +2,13 @@ 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 { + calc, + createStencil, + handleCsProp, + px2rem, + withCornerShape, +} from '@workday/canvas-kit-styling'; import {checkSmallIcon} from '@workday/canvas-system-icons-web'; import {system} from '@workday/canvas-tokens-web'; @@ -20,7 +26,7 @@ export const colorPickerColorSwatchStencil = createStencil({ [systemIconStencil.vars.color]: iconColor, width: system.legacy.size.xxs, height: system.legacy.size.xxs, - borderRadius: system.legacy.shape.sm, + ...withCornerShape(system.legacy.shape.sm), backgroundColor: color, display: 'flex', alignItems: 'center', diff --git a/modules/react/combobox/lib/ComboboxCard.tsx b/modules/react/combobox/lib/ComboboxCard.tsx index 70c5bd8202..db6b8e1c73 100644 --- a/modules/react/combobox/lib/ComboboxCard.tsx +++ b/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 {createStencil, handleCsProp, withCornerShape} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {useComboboxModel} from './hooks/useComboboxModel'; @@ -24,7 +24,7 @@ export const useComboboxCard = createElemPropsHook(useComboboxModel)(model => { export const comboboxCardStencil = createStencil({ base: { '& :where([data-part="list-box-container"])': { - borderRadius: system.legacy.shape.xxl, + ...withCornerShape(system.legacy.shape.xxl), }, }, }); diff --git a/modules/react/expandable/lib/ExpandableTarget.tsx b/modules/react/expandable/lib/ExpandableTarget.tsx index 584e37a33d..4386f8fae0 100644 --- a/modules/react/expandable/lib/ExpandableTarget.tsx +++ b/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 {createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {useExpandableModel} from './hooks/useExpandableModel'; @@ -28,7 +28,7 @@ export const expandableTargetStencil = createStencil({ base: { background: system.legacy.color.surface.transparent, borderColor: system.color.border.transparent, - borderRadius: system.legacy.shape.xxl, + ...withCornerShape(system.legacy.shape.xxl), borderWidth: 0, display: 'flex', alignItems: 'center', diff --git a/modules/react/form-field/lib/FormFieldGroupList.tsx b/modules/react/form-field/lib/FormFieldGroupList.tsx index a8e8a64fc7..f7e9e3f765 100644 --- a/modules/react/form-field/lib/FormFieldGroupList.tsx +++ b/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 { + CSProps, + calc, + createStencil, + handleCsProp, + px2rem, + withCornerShape, +} from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; import {useFormFieldModel} from './hooks'; @@ -11,7 +18,7 @@ const formFieldGroupListStencil = createStencil({ base: { display: 'flex', flexDirection: 'column', - borderRadius: system.legacy.shape.md, + ...withCornerShape(system.legacy.shape.md), gap: system.legacy.gap.sm, padding: `${px2rem(10)} ${base.legacy.size150} ${system.legacy.padding.xs}`, margin: `0 ${calc.negate(base.legacy.size150)}`, diff --git a/modules/react/information-highlight/lib/InformationHighlight.tsx b/modules/react/information-highlight/lib/InformationHighlight.tsx index 0b863fbf76..a1a983e99b 100644 --- a/modules/react/information-highlight/lib/InformationHighlight.tsx +++ b/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 { + CSProps, + createStencil, + handleCsProp, + px2rem, + withCornerShape, +} from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; import {useInformationHighlightModel} from './hooks/useInformationHighlightModel'; @@ -17,7 +23,7 @@ export const informationHighlightStencil = createStencil({ gridTemplateColumns: 'min-content', gap: `${system.legacy.gap.sm} ${system.legacy.gap.md}`, padding: system.legacy.padding.md, - borderRadius: system.legacy.shape.sm, + ...withCornerShape(system.legacy.shape.sm), outline: `${px2rem(1)} solid transparent`, borderInlineStart: `${base.legacy.size50} solid transparent`, }, diff --git a/modules/react/layout/lib/utils/buildStyleFns.ts b/modules/react/layout/lib/utils/buildStyleFns.ts index 128dcdc861..a034740d0d 100644 --- a/modules/react/layout/lib/utils/buildStyleFns.ts +++ b/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 = { ...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') { diff --git a/modules/react/layout/spec/border.spec.ts b/modules/react/layout/spec/border.spec.ts index 1ed38f60f6..c0c7095cb1 100644 --- a/modules/react/layout/spec/border.spec.ts +++ b/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', () => { diff --git a/modules/react/menu/lib/MenuCard.tsx b/modules/react/menu/lib/MenuCard.tsx index 7481f61cc9..df2d0e9339 100644 --- a/modules/react/menu/lib/MenuCard.tsx +++ b/modules/react/menu/lib/MenuCard.tsx @@ -8,7 +8,7 @@ import { } from '@workday/canvas-kit-react/common'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; import {getTransformFromPlacement} from '@workday/canvas-kit-react/popup'; -import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling'; +import {calc, createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {useMenuModel} from './useMenuModel'; @@ -38,7 +38,7 @@ export const menuCardStencil = createStencil({ flexDirection: 'column', transition: `transform ease-out 150ms`, padding: system.legacy.padding.xxs, - borderRadius: system.legacy.shape.xxl, + ...withCornerShape(system.legacy.shape.xxl), maxWidth: calc.subtract('100vw', system.legacy.size.sm), boxShadow: system.depth[3], minWidth, diff --git a/modules/react/menu/lib/MenuItem.tsx b/modules/react/menu/lib/MenuItem.tsx index d8e196d4ec..f0ccad99f2 100644 --- a/modules/react/menu/lib/MenuItem.tsx +++ b/modules/react/menu/lib/MenuItem.tsx @@ -16,7 +16,13 @@ import { import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip'; -import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; +import { + CSProps, + createStencil, + handleCsProp, + px2rem, + withCornerShape, +} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {useMenuModel} from './useMenuModel'; @@ -73,7 +79,7 @@ export const menuItemStencil = createStencil({ cursor: 'pointer', color: system.color.fg.default, borderWidth: 0, - borderRadius: system.legacy.shape.xxl, + ...withCornerShape(system.legacy.shape.xxl), textAlign: 'start', transition: 'background-color 80ms, color 80ms', backgroundColor: 'inherit', diff --git a/modules/react/menu/lib/MenuList.tsx b/modules/react/menu/lib/MenuList.tsx index 7ebdd00e83..3f5b6d0626 100644 --- a/modules/react/menu/lib/MenuList.tsx +++ b/modules/react/menu/lib/MenuList.tsx @@ -6,7 +6,7 @@ import { createSubcomponent, } from '@workday/canvas-kit-react/common'; import {useFocusRedirect, useReturnFocus} from '@workday/canvas-kit-react/popup'; -import {createStencil, handleCsProp} from '@workday/canvas-kit-styling'; +import {createStencil, handleCsProp, withCornerShape} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {useMenuModel} from './useMenuModel'; @@ -34,7 +34,7 @@ export const useMenuList = composeHooks( export const menuListStencil = createStencil({ base: { background: system.legacy.color.surface.popover, - borderRadius: system.legacy.shape.xxl, + ...withCornerShape(system.legacy.shape.xxl), padding: 0, gap: system.legacy.gap.xs, }, diff --git a/modules/react/modal/lib/ModalCard.tsx b/modules/react/modal/lib/ModalCard.tsx index 5025d0e47b..c44cd4612a 100644 --- a/modules/react/modal/lib/ModalCard.tsx +++ b/modules/react/modal/lib/ModalCard.tsx @@ -1,7 +1,7 @@ import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; import {Popup} from '@workday/canvas-kit-react/popup'; -import {createStencil, px2rem} from '@workday/canvas-kit-styling'; +import {createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; import {useModalCard, useModalModel} from './hooks'; @@ -15,7 +15,7 @@ export const modalCardStencil = createStencil({ border: '0', outline: `${px2rem(1)} solid transparent`, boxShadow: system.depth[5], - borderRadius: system.legacy.shape.xxxl, + ...withCornerShape(system.legacy.shape.xxxl), '@media screen and (max-width: 768px)': { gap: 0, margin: system.legacy.gap.md, // 16px all around margin on smaller screen sizes diff --git a/modules/react/pill/lib/Pill.tsx b/modules/react/pill/lib/Pill.tsx index f5a183f773..b5cd716dbb 100644 --- a/modules/react/pill/lib/Pill.tsx +++ b/modules/react/pill/lib/Pill.tsx @@ -2,7 +2,7 @@ import {buttonStencil} from '@workday/canvas-kit-react/button'; import {createContainer, focusRing} from '@workday/canvas-kit-react/common'; import {systemIconStencil} from '@workday/canvas-kit-react/icon'; import {Box, BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout'; -import {colorSpace, createStencil, px2rem} from '@workday/canvas-kit-styling'; +import {colorSpace, createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {PillAvatar} from './PillAvatar'; @@ -34,7 +34,7 @@ export const pillStencil = createStencil({ display: 'initial', flexDirection: 'row', alignItems: 'center', - borderRadius: system.legacy.shape.sm, + ...withCornerShape(system.legacy.shape.sm), fontFamily: system.fontFamily.default, fontSize: system.legacy.fontSize.subtext.lg, letterSpacing: system.legacy.letterSpacing.subtext.lg, diff --git a/modules/react/pill/lib/PillCount.tsx b/modules/react/pill/lib/PillCount.tsx index 4a6d12ad6c..67a37e38e9 100644 --- a/modules/react/pill/lib/PillCount.tsx +++ b/modules/react/pill/lib/PillCount.tsx @@ -1,6 +1,6 @@ import {createComponent} from '@workday/canvas-kit-react/common'; import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout'; -import {calc, createStencil, cssVar} from '@workday/canvas-kit-styling'; +import {CORNER_SHAPE, calc, createStencil, cssVar} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; export interface PillCountProps extends FlexProps {} @@ -15,6 +15,7 @@ export const pillCountStencil = createStencil({ borderStartEndRadius: system.legacy.shape.sm, borderEndStartRadius: 0, borderEndEndRadius: system.legacy.shape.sm, + cornerShape: CORNER_SHAPE, borderWidth: 0, borderInlineStartWidth: 0, borderStyle: 'solid', diff --git a/modules/react/pill/lib/PillIconButton.tsx b/modules/react/pill/lib/PillIconButton.tsx index c04dbe7db0..1533d1a073 100644 --- a/modules/react/pill/lib/PillIconButton.tsx +++ b/modules/react/pill/lib/PillIconButton.tsx @@ -2,7 +2,7 @@ import {buttonStencil} from '@workday/canvas-kit-react/button'; import {createSubcomponent, focusRing} from '@workday/canvas-kit-react/common'; import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; -import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling'; +import {calc, createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; import {xSmallIcon} from '@workday/canvas-system-icons-web'; import {component, system} from '@workday/canvas-tokens-web'; @@ -20,7 +20,7 @@ export const pillIconButtonStencil = createStencil({ base: { marginInlineEnd: calc.negate(px2rem(7)), // visually pull in the pill to the right size by -7px marginInlineStart: calc.negate(px2rem(2)), // visually create space between label and the button by -2px - borderRadius: px2rem(2), + ...withCornerShape(px2rem(2)), height: system.legacy.size.xxs, width: system.legacy.size.xxs, padding: 0, diff --git a/modules/react/popup/lib/PopupCard.tsx b/modules/react/popup/lib/PopupCard.tsx index 5cc494c3e6..ad9fa0a667 100644 --- a/modules/react/popup/lib/PopupCard.tsx +++ b/modules/react/popup/lib/PopupCard.tsx @@ -14,6 +14,7 @@ import { cssVar, keyframes, px2rem, + withCornerShape, } from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; @@ -102,7 +103,7 @@ export const popupCardStencil = createStencil({ boxShadow: system.depth[3], minHeight: 0, padding: system.legacy.padding.xl, - borderRadius: system.legacy.shape.xxxl, + ...withCornerShape(system.legacy.shape.xxxl), maxHeight: maxHeight, overflowY: 'auto', animationName: fadeIn, diff --git a/modules/react/radio/lib/RadioGroup.tsx b/modules/react/radio/lib/RadioGroup.tsx index 6507747dce..4bb863c34f 100644 --- a/modules/react/radio/lib/RadioGroup.tsx +++ b/modules/react/radio/lib/RadioGroup.tsx @@ -8,6 +8,7 @@ import { styled, } from '@workday/canvas-kit-react/common'; import {borderRadius, space} from '@workday/canvas-kit-react/tokens'; +import {CORNER_SHAPE} from '@workday/canvas-kit-styling'; import {Radio, RadioProps} from './Radio'; @@ -44,6 +45,7 @@ const Container = styled('div') div': { diff --git a/modules/react/segmented-control/lib/SegmentedControlItem.tsx b/modules/react/segmented-control/lib/SegmentedControlItem.tsx index 6a269140d5..5849efe4b3 100644 --- a/modules/react/segmented-control/lib/SegmentedControlItem.tsx +++ b/modules/react/segmented-control/lib/SegmentedControlItem.tsx @@ -5,7 +5,7 @@ import {createSubcomponent} from '@workday/canvas-kit-react/common'; import {systemIconStencil} from '@workday/canvas-kit-react/icon'; import {Text} from '@workday/canvas-kit-react/text'; import {Tooltip, TooltipProps} from '@workday/canvas-kit-react/tooltip'; -import {colorSpace, createStencil, handleCsProp} from '@workday/canvas-kit-styling'; +import {CORNER_SHAPE, colorSpace, createStencil, handleCsProp} from '@workday/canvas-kit-styling'; import {CanvasSystemIcon} from '@workday/canvas-system-icons-web'; import {system} from '@workday/canvas-tokens-web'; @@ -63,6 +63,7 @@ export const segmentedControlItemStencil = createStencil({ gap: system.legacy.gap.xs, [buttonStencil.vars.borderRadius]: system.legacy.shape.md, + cornerShape: CORNER_SHAPE, [buttonStencil.vars.label]: system.color.fg.muted.default, [systemIconStencil.vars.color]: system.color.fg.muted.default, diff --git a/modules/react/segmented-control/lib/SegmentedControlList.tsx b/modules/react/segmented-control/lib/SegmentedControlList.tsx index e85a3a35ea..35a15fcc15 100644 --- a/modules/react/segmented-control/lib/SegmentedControlList.tsx +++ b/modules/react/segmented-control/lib/SegmentedControlList.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import {useListRenderItems} from '@workday/canvas-kit-react/collection'; import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common'; import {Grid} from '@workday/canvas-kit-react/layout'; -import {createStencil, handleCsProp} from '@workday/canvas-kit-styling'; +import {createStencil, handleCsProp, withCornerShape} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {useSegmentedControlModel} from './hooks/useSegmentedControlModel'; @@ -22,7 +22,7 @@ export const segmentedControlListStencil = createStencil({ display: 'inline-grid', backgroundColor: system.legacy.color.surface.alt.strong, border: `0 solid ${system.color.border.transparent}`, - borderRadius: system.legacy.shape.lg, + ...withCornerShape(system.legacy.shape.lg), padding: system.legacy.padding.xxs, gridGap: system.legacy.gap.sm, }, diff --git a/modules/react/skeleton/lib/parts/SkeletonHeader.tsx b/modules/react/skeleton/lib/parts/SkeletonHeader.tsx index 8085ac6cbd..ef02a83f4f 100644 --- a/modules/react/skeleton/lib/parts/SkeletonHeader.tsx +++ b/modules/react/skeleton/lib/parts/SkeletonHeader.tsx @@ -1,5 +1,12 @@ import {createComponent} from '@workday/canvas-kit-react/common'; -import {CSProps, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; +import { + CSProps, + createStencil, + cssVar, + handleCsProp, + px2rem, + withCornerShape, +} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {SkeletonShape} from './SkeletonShape'; @@ -30,7 +37,7 @@ export const skeletonHeaderStencil = createStencil({ }, base: ({width, backgroundColor, height}) => ({ backgroundColor: cssVar(backgroundColor, system.legacy.color.surface.loading), - borderRadius: system.legacy.shape.md, + ...withCornerShape(system.legacy.shape.md), height: cssVar(height, system.legacy.size.xs), width: width, marginBlockEnd: system.legacy.size.xxxs, diff --git a/modules/react/skeleton/lib/parts/SkeletonShape.tsx b/modules/react/skeleton/lib/parts/SkeletonShape.tsx index 6a89356851..13b1743789 100644 --- a/modules/react/skeleton/lib/parts/SkeletonShape.tsx +++ b/modules/react/skeleton/lib/parts/SkeletonShape.tsx @@ -1,5 +1,12 @@ import {createComponent} from '@workday/canvas-kit-react/common'; -import {CSProps, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; +import { + CSProps, + createStencil, + cssVar, + handleCsProp, + px2rem, + withCornerShape, +} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; export interface SkeletonShapeProps extends CSProps { @@ -34,7 +41,7 @@ export const skeletonShapeStencil = createStencil({ }, base: ({width, height, borderRadius, backgroundColor}) => ({ backgroundColor: cssVar(backgroundColor, system.legacy.color.surface.loading), - borderRadius: cssVar(borderRadius, '0'), + ...withCornerShape(cssVar(borderRadius, '0')), height: cssVar(height, '100%'), width: width, marginBlockEnd: system.legacy.size.xxxs, diff --git a/modules/react/skeleton/lib/parts/SkeletonText.tsx b/modules/react/skeleton/lib/parts/SkeletonText.tsx index ab472f8585..280dc01e78 100644 --- a/modules/react/skeleton/lib/parts/SkeletonText.tsx +++ b/modules/react/skeleton/lib/parts/SkeletonText.tsx @@ -1,5 +1,11 @@ import {createComponent} from '@workday/canvas-kit-react/common'; -import {CSProps, createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling'; +import { + CSProps, + createStencil, + cssVar, + handleCsProp, + withCornerShape, +} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; export interface SkeletonTextProps extends CSProps { @@ -26,7 +32,7 @@ export const skeletonTextStencil = createStencil({ height: system.legacy.size.xxxs, // We do not have a `gap` token for 0.75rem so `padding` is being used here marginBlockEnd: system.legacy.padding.sm, - borderRadius: system.legacy.shape.md, + ...withCornerShape(system.legacy.shape.md), width: '100%', }, '& [data-part="skeleton-text-lines"]:last-child': { diff --git a/modules/react/status-indicator/lib/StatusIndicator.tsx b/modules/react/status-indicator/lib/StatusIndicator.tsx index 9294e60c70..e028e6e39f 100644 --- a/modules/react/status-indicator/lib/StatusIndicator.tsx +++ b/modules/react/status-indicator/lib/StatusIndicator.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import {GenericStyle, PickRequired} from '@workday/canvas-kit-react/common'; import {SystemIcon} from '@workday/canvas-kit-react/icon'; import {CSSProperties, borderRadius, colors, space, type} from '@workday/canvas-kit-react/tokens'; +import {CORNER_SHAPE} from '@workday/canvas-kit-styling'; import {CanvasSystemIcon} from '@workday/canvas-system-icons-web'; /** @@ -51,6 +52,7 @@ export const statusIndicatorStyles: StatusIndicatorGenericStyle = { height: space.s, padding: `1px ${space.xxxs}`, borderRadius: borderRadius.s, + cornerShape: CORNER_SHAPE, boxSizing: 'border-box', }, variants: { diff --git a/modules/react/table/lib/BaseTable.tsx b/modules/react/table/lib/BaseTable.tsx index 47559925d5..9ef44695d2 100644 --- a/modules/react/table/lib/BaseTable.tsx +++ b/modules/react/table/lib/BaseTable.tsx @@ -1,6 +1,6 @@ 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 {createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {BaseTableBody} from './parts/BaseTableBody'; @@ -23,7 +23,7 @@ export const baseTableStencil = createStencil({ lineHeight: system.legacy.lineHeight.subtext.lg, letterSpacing: system.legacy.letterSpacing.subtext.lg, border: `${px2rem(1)} solid ${system.legacy.color.border.strong}`, - borderRadius: system.legacy.shape.md, + ...withCornerShape(system.legacy.shape.md), overflow: 'auto', color: system.color.fg.default, }, diff --git a/modules/react/tabs/lib/TabsItem.tsx b/modules/react/tabs/lib/TabsItem.tsx index ae0a3bac9e..9749566fc9 100644 --- a/modules/react/tabs/lib/TabsItem.tsx +++ b/modules/react/tabs/lib/TabsItem.tsx @@ -22,7 +22,7 @@ import { import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon'; import {Box, FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout'; import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip'; -import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling'; +import {CORNER_SHAPE, calc, createStencil, px2rem} from '@workday/canvas-kit-styling'; import {base, component, system} from '@workday/canvas-tokens-web'; import {useTabsModel} from './useTabsModel'; @@ -100,6 +100,7 @@ const tabItemStencil = createStencil({ color: system.color.fg.muted.default, position: 'relative', borderRadius: `${system.legacy.shape.md} ${system.legacy.shape.md} ${system.legacy.shape.none} ${system.legacy.shape.none}`, + cornerShape: CORNER_SHAPE, transition: 'background 150ms ease, color 150ms ease', whiteSpace: 'nowrap', textOverflow: 'ellipsis', @@ -148,6 +149,7 @@ const tabItemStencil = createStencil({ // selected state for Windows high contrast theme borderBlockEnd: `${base.legacy.size50} solid transparent`, borderRadius: `${system.legacy.shape.md} ${system.legacy.shape.md} ${system.legacy.shape.none} ${system.legacy.shape.none}`, + cornerShape: CORNER_SHAPE, backgroundColor: system.legacy.color.brand.fg.primary.default, bottom: 0, content: `''`, diff --git a/modules/react/text-input/lib/TextInput.tsx b/modules/react/text-input/lib/TextInput.tsx index 5cb1be52ef..13838fd355 100644 --- a/modules/react/text-input/lib/TextInput.tsx +++ b/modules/react/text-input/lib/TextInput.tsx @@ -1,6 +1,6 @@ import {ErrorType, GrowthBehavior, createComponent} from '@workday/canvas-kit-react/common'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; -import {CSProps, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling'; +import {CSProps, createStencil, cssVar, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; export interface TextInputProps extends GrowthBehavior, CSProps { @@ -27,7 +27,7 @@ export const textInputStencil = createStencil({ display: 'block', border: `${px2rem(1)} solid ${system.color.border.input.default}`, backgroundColor: system.legacy.color.surface.default, - borderRadius: system.legacy.shape.md, + ...withCornerShape(system.legacy.shape.md), height: system.legacy.size.md, transition: '0.2s box-shadow, 0.2s border-color', padding: system.legacy.padding.xs, // Compensate for border diff --git a/modules/react/toast/lib/Toast.tsx b/modules/react/toast/lib/Toast.tsx index 6cab09c530..8717752507 100644 --- a/modules/react/toast/lib/Toast.tsx +++ b/modules/react/toast/lib/Toast.tsx @@ -3,7 +3,7 @@ import React from 'react'; import {ExtractProps, createContainer} from '@workday/canvas-kit-react/common'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; import {Popup} from '@workday/canvas-kit-react/popup'; -import {createStencil, px2rem} from '@workday/canvas-kit-styling'; +import {createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {ToastBody} from './ToastBody'; @@ -54,7 +54,7 @@ const toastStencil = createStencil({ width: px2rem(360), padding: 0, gap: system.legacy.gap.xs, - borderRadius: system.legacy.shape.xl, + ...withCornerShape(system.legacy.shape.xl), }, }); diff --git a/modules/react/tooltip/lib/TooltipContainer.tsx b/modules/react/tooltip/lib/TooltipContainer.tsx index 8f930e79ae..c32683113e 100644 --- a/modules/react/tooltip/lib/TooltipContainer.tsx +++ b/modules/react/tooltip/lib/TooltipContainer.tsx @@ -6,7 +6,14 @@ import { getTransformOrigin, } from '@workday/canvas-kit-react/common'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; -import {calc, createStencil, createVars, keyframes, px2rem} from '@workday/canvas-kit-styling'; +import { + calc, + createStencil, + createVars, + keyframes, + px2rem, + withCornerShape, +} from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; export interface TooltipContainerProps extends React.HTMLAttributes { @@ -76,7 +83,7 @@ export const tooltipContainerStencil = createStencil({ // use :before vs margin to increase the tooltip hit-box '&:before': { content: '""', - borderRadius: system.legacy.shape.md, + ...withCornerShape(system.legacy.shape.md), outline: `${px2rem(1)} solid transparent`, outlineOffset: `-${px2rem(1)}`, zIndex: -1, diff --git a/modules/styling-transform/index.ts b/modules/styling-transform/index.ts index daec6b10b6..4a84b86427 100644 --- a/modules/styling-transform/index.ts +++ b/modules/styling-transform/index.ts @@ -2,6 +2,7 @@ import styleTransformer from './lib/styleTransform'; import type {Config} from './lib/utils/types'; export type * from './lib/utils/types'; +export {handleWithCornerShape} from './lib/utils/handleWithCornerShape'; export {parseNodeToStaticValue} from './lib/utils/parseNodeToStaticValue'; export {parseObjectToStaticValue} from './lib/utils/parseObjectToStaticValue'; export {createObjectTransform} from './lib/createObjectTransform'; diff --git a/modules/styling-transform/lib/utils/handleWithCornerShape.ts b/modules/styling-transform/lib/utils/handleWithCornerShape.ts new file mode 100644 index 0000000000..75da80ca21 --- /dev/null +++ b/modules/styling-transform/lib/utils/handleWithCornerShape.ts @@ -0,0 +1,23 @@ +import ts from 'typescript'; + +import {CORNER_SHAPE} from '@workday/canvas-kit-styling'; + +import {createObjectTransform} from '../createObjectTransform'; +import {isImportedFromStyling} from './isImportedFromStyling'; +import {parseNodeToStaticValue} from './parseNodeToStaticValue'; + +export const handleWithCornerShape = createObjectTransform((node, context) => { + if ( + ts.isCallExpression(node) && + ts.isIdentifier(node.expression) && + node.expression.text === 'withCornerShape' && + isImportedFromStyling(node.expression, context.checker) + ) { + return { + borderRadius: parseNodeToStaticValue(node.arguments[0], context), + cornerShape: CORNER_SHAPE, + }; + } + + return; +}); diff --git a/modules/styling-transform/spec/createProgramFromSource.ts b/modules/styling-transform/spec/createProgramFromSource.ts index 3a7277a2fa..49a854fce7 100644 --- a/modules/styling-transform/spec/createProgramFromSource.ts +++ b/modules/styling-transform/spec/createProgramFromSource.ts @@ -29,6 +29,9 @@ export function createVars(...args: T[]): CsVars; export function createVars(...args: T[]): CsVars; export function cssVar(input: string): string; export function createStyles(...args: any[]): string; +export const CORNER_SHAPE = 'superellipse(1.1)'; +export function withCornerShape(borderRadius: string | number): {borderRadius: string | number; cornerShape: string}; +export function createStencil(...args: any[]): any; `; function getLocalFileName(sources: {filename: string}[], name: string): string | undefined { diff --git a/modules/styling-transform/spec/handleWithCornerShape.spec.ts b/modules/styling-transform/spec/handleWithCornerShape.spec.ts new file mode 100644 index 0000000000..03a735e913 --- /dev/null +++ b/modules/styling-transform/spec/handleWithCornerShape.spec.ts @@ -0,0 +1,25 @@ +// @vitest-environment node +import {handleWithCornerShape} from '../lib/utils/handleWithCornerShape'; +import {createProgramFromSource, transform} from '../testing'; + +describe('handleWithCornerShape', () => { + it('should transform createStencil spreads via styleTransformer', () => { + const program = createProgramFromSource(` + import {createStencil, withCornerShape} from '@workday/canvas-kit-styling'; + + export const cardStencil = createStencil({ + base: { + ...withCornerShape('24px'), + border: '1px solid red', + }, + }); + `); + + const result = transform(program, 'test.ts', { + objectTransforms: [handleWithCornerShape], + }); + + expect(result).toContain('border-radius:24px'); + expect(result).toContain('corner-shape:superellipse(1.1)'); + }); +}); diff --git a/modules/styling-transform/testing.ts b/modules/styling-transform/testing.ts index 7b7503428f..d17b40f848 100644 --- a/modules/styling-transform/testing.ts +++ b/modules/styling-transform/testing.ts @@ -1,3 +1,4 @@ export {createProgramFromSource} from './spec/createProgramFromSource'; +export {parseObjectToStaticValue} from './lib/utils/parseObjectToStaticValue'; export {transform, _reset, withDefaultContext} from './lib/styleTransform'; export {findNodes} from './spec/findNodes'; diff --git a/modules/styling/index.ts b/modules/styling/index.ts index 32f1de3c8a..96c5432cfb 100644 --- a/modules/styling/index.ts +++ b/modules/styling/index.ts @@ -1,5 +1,6 @@ export * from './lib/calc'; export * from './lib/cs'; +export * from './lib/cornerShape'; export * from './lib/px2rem'; export * from './lib/slugify'; export * from './lib/uniqueId'; diff --git a/modules/styling/lib/cornerShape.ts b/modules/styling/lib/cornerShape.ts new file mode 100644 index 0000000000..a7a5cb1038 --- /dev/null +++ b/modules/styling/lib/cornerShape.ts @@ -0,0 +1,11 @@ +import {CSSObjectWithVars} from './cs'; + +export const CORNER_SHAPE = 'superellipse(1.1)'; + +/** Returns borderRadius + cornerShape in the correct declaration order. */ +export function withCornerShape(borderRadius: string | number): CSSObjectWithVars { + return { + borderRadius, + cornerShape: CORNER_SHAPE, + }; +} diff --git a/modules/styling/spec/cornerShape.spec.ts b/modules/styling/spec/cornerShape.spec.ts new file mode 100644 index 0000000000..bef4b182df --- /dev/null +++ b/modules/styling/spec/cornerShape.spec.ts @@ -0,0 +1,21 @@ +import {CORNER_SHAPE, withCornerShape} from '../lib/cornerShape'; + +describe('withCornerShape', () => { + it('should return borderRadius followed by cornerShape', () => { + const result = withCornerShape('8px'); + + expect(result).toEqual({ + borderRadius: '8px', + cornerShape: CORNER_SHAPE, + }); + }); + + it('should support numeric borderRadius values', () => { + const result = withCornerShape(16); + + expect(result).toEqual({ + borderRadius: 16, + cornerShape: CORNER_SHAPE, + }); + }); +}); diff --git a/styling.config.ts b/styling.config.ts index eb3ece3cfa..a2cf802b0f 100644 --- a/styling.config.ts +++ b/styling.config.ts @@ -1,6 +1,6 @@ import crypto from 'node:crypto'; -import {createConfig} from '@workday/canvas-kit-styling-transform'; +import {createConfig, handleWithCornerShape} from '@workday/canvas-kit-styling-transform'; import pkg from './lerna.json'; import {handleFocusRing} from './utils/style-transform/handleFocusRing'; @@ -26,7 +26,7 @@ const config = createConfig({ }, seed: crypto.createHash('sha256').update(pkg.version).digest('hex').slice(0, 6), fallbackFiles: [], - objectTransforms: [handleFocusRing], + objectTransforms: [handleFocusRing, handleWithCornerShape], }); export default config; From 80c62f213caac528e6891aa07c97969a9ecc2708 Mon Sep 17 00:00:00 2001 From: Sheelah Brennan Date: Mon, 8 Jun 2026 13:40:34 -0600 Subject: [PATCH 2/2] refactor: Remove withCornerShape helper in favor of inline cornerShape use CORNER_SHAPE inline, instead of a helper that couldn't be applied consistently due to different use cases of border-radius (shorthand vs longhand, etc). --- .../color-picker/lib/parts/SwatchBook.tsx | 5 ++-- .../multi-select/lib/MultiSelectInput.tsx | 8 +++--- .../preview-react/radio/lib/RadioGroup.tsx | 5 ++-- .../status-indicator/lib/StatusIndicator.tsx | 5 ++-- modules/react/button/lib/Hyperlink.tsx | 5 ++-- modules/react/card/lib/Card.tsx | 5 ++-- .../react/checkbox/lib/CheckBackground.tsx | 5 ++-- modules/react/checkbox/lib/CheckboxInput.tsx | 5 ++-- .../color-picker/lib/parts/ColorSwatch.tsx | 11 +++----- modules/react/combobox/lib/ComboboxCard.tsx | 5 ++-- .../react/expandable/lib/ExpandableTarget.tsx | 5 ++-- .../form-field/lib/FormFieldGroupList.tsx | 5 ++-- .../lib/InformationHighlight.tsx | 5 ++-- modules/react/menu/lib/MenuCard.tsx | 5 ++-- modules/react/menu/lib/MenuItem.tsx | 5 ++-- modules/react/menu/lib/MenuList.tsx | 5 ++-- modules/react/modal/lib/ModalCard.tsx | 5 ++-- modules/react/pill/lib/Pill.tsx | 5 ++-- modules/react/pill/lib/PillIconButton.tsx | 5 ++-- modules/react/popup/lib/PopupCard.tsx | 5 ++-- .../lib/SegmentedControlList.tsx | 5 ++-- .../skeleton/lib/parts/SkeletonHeader.tsx | 5 ++-- .../skeleton/lib/parts/SkeletonShape.tsx | 5 ++-- .../react/skeleton/lib/parts/SkeletonText.tsx | 5 ++-- modules/react/table/lib/BaseTable.tsx | 5 ++-- modules/react/text-input/lib/TextInput.tsx | 5 ++-- modules/react/toast/lib/Toast.tsx | 5 ++-- .../react/tooltip/lib/TooltipContainer.tsx | 5 ++-- modules/styling-transform/index.ts | 1 - .../lib/utils/handleWithCornerShape.ts | 23 ----------------- .../spec/createProgramFromSource.ts | 1 - .../spec/handleWithCornerShape.spec.ts | 25 ------------------- modules/styling/lib/cornerShape.ts | 10 -------- modules/styling/spec/cornerShape.spec.ts | 21 ---------------- 34 files changed, 86 insertions(+), 144 deletions(-) delete mode 100644 modules/styling-transform/lib/utils/handleWithCornerShape.ts delete mode 100644 modules/styling-transform/spec/handleWithCornerShape.spec.ts delete mode 100644 modules/styling/spec/cornerShape.spec.ts diff --git a/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx b/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx index 7d192ae429..554d47e857 100644 --- a/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx +++ b/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, withCornerShape} 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 { @@ -34,7 +34,8 @@ const colorPickerSwatchBookStencil = createStencil({ width: system.legacy.size.xxs, height: system.legacy.size.xxs, cursor: 'pointer', - ...withCornerShape(system.legacy.shape.sm), + borderRadius: system.legacy.shape.sm, + cornerShape: CORNER_SHAPE, transition: 'box-shadow 120ms ease', margin: `0px ${system.legacy.gap.sm} ${system.legacy.gap.sm} 0px`, diff --git a/modules/preview-react/multi-select/lib/MultiSelectInput.tsx b/modules/preview-react/multi-select/lib/MultiSelectInput.tsx index ad5662d298..e1ceb7fe2c 100644 --- a/modules/preview-react/multi-select/lib/MultiSelectInput.tsx +++ b/modules/preview-react/multi-select/lib/MultiSelectInput.tsx @@ -11,11 +11,11 @@ import { import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon'; import {InputGroup, TextInput, textInputStencil} from '@workday/canvas-kit-react/text-input'; import { + CORNER_SHAPE, CSProps, createStencil, handleCsProp, px2rem, - withCornerShape, } from '@workday/canvas-kit-styling'; import {caretDownSmallIcon, searchIcon} from '@workday/canvas-system-icons-web'; import {system} from '@workday/canvas-tokens-web'; @@ -30,7 +30,8 @@ export const multiSelectInputStencil = createStencil({ display: 'flex', flexDirection: 'column', backgroundColor: system.legacy.color.surface.default, - ...withCornerShape(system.legacy.shape.md), + 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', @@ -53,7 +54,8 @@ export const multiSelectInputStencil = createStencil({ fontWeight: system.fontWeight.normal, lineHeight: system.legacy.lineHeight.subtext.lg, backgroundColor: system.legacy.color.surface.transparent, - ...withCornerShape(system.legacy.shape.md), + 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` diff --git a/modules/preview-react/radio/lib/RadioGroup.tsx b/modules/preview-react/radio/lib/RadioGroup.tsx index 8e03b3c9d5..b791fe0e42 100644 --- a/modules/preview-react/radio/lib/RadioGroup.tsx +++ b/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, withCornerShape} 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'; @@ -21,7 +21,8 @@ const radioGroupStencil = createStencil({ base: { display: 'flex', flexDirection: 'column', - ...withCornerShape(system.legacy.shape.md), + 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)}`, diff --git a/modules/preview-react/status-indicator/lib/StatusIndicator.tsx b/modules/preview-react/status-indicator/lib/StatusIndicator.tsx index ec5a09dfb1..9b39736025 100644 --- a/modules/preview-react/status-indicator/lib/StatusIndicator.tsx +++ b/modules/preview-react/status-indicator/lib/StatusIndicator.tsx @@ -4,10 +4,10 @@ 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 { + CORNER_SHAPE, ExtractStencilProps, createStencil, px2rem, - withCornerShape, } from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; @@ -68,7 +68,8 @@ const statusIndicatorStencil = createStencil({ gap: system.legacy.gap.xs, maxWidth: px2rem(200), alignItems: 'center', - ...withCornerShape(system.legacy.shape.sm), + borderRadius: system.legacy.shape.sm, + cornerShape: CORNER_SHAPE, height: system.legacy.size.xxs, padding: `0 ${system.legacy.padding.xs}`, outline: `${px2rem(1)} solid transparent`, diff --git a/modules/react/button/lib/Hyperlink.tsx b/modules/react/button/lib/Hyperlink.tsx index a8e61bf379..b4fd9f8653 100644 --- a/modules/react/button/lib/Hyperlink.tsx +++ b/modules/react/button/lib/Hyperlink.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import {createComponent} from '@workday/canvas-kit-react/common'; import { + CORNER_SHAPE, CSProps, createStencil, handleCsProp, px2rem, - withCornerShape, } from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; @@ -31,7 +31,8 @@ export const hyperlinkStencil = createStencil({ textDecoration: 'underline', color: system.legacy.color.fg.info.default, cursor: 'pointer', - ...withCornerShape(px2rem(2)), + borderRadius: px2rem(2), + cornerShape: CORNER_SHAPE, padding: `0 ${px2rem(2)} `, margin: '0 -2px', transition: 'color 0.15s,background-color 0.15s', diff --git a/modules/react/card/lib/Card.tsx b/modules/react/card/lib/Card.tsx index 1ad983d55d..0e18bbf3fd 100644 --- a/modules/react/card/lib/Card.tsx +++ b/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, withCornerShape} 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'; @@ -28,7 +28,8 @@ export const cardStencil = createStencil({ gap: system.legacy.gap.lg, padding: system.legacy.padding.xl, backgroundColor: system.legacy.color.surface.default, - ...withCornerShape(system.legacy.shape.xxl), + borderRadius: system.legacy.shape.xxl, + cornerShape: CORNER_SHAPE, border: `${px2rem(1)} solid ${system.legacy.color.border.default}`, }, modifiers: { diff --git a/modules/react/checkbox/lib/CheckBackground.tsx b/modules/react/checkbox/lib/CheckBackground.tsx index e5deb3ca49..5e40c026be 100644 --- a/modules/react/checkbox/lib/CheckBackground.tsx +++ b/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, withCornerShape} 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 { @@ -21,7 +21,8 @@ export const checkboxBackgroundStencil = createStencil({ base: { alignItems: 'center', backgroundColor: system.legacy.color.surface.default, - ...withCornerShape(system.legacy.shape.sm), + borderRadius: system.legacy.shape.sm, + cornerShape: CORNER_SHAPE, boxSizing: 'border-box', display: 'flex', height: base.legacy.size225, diff --git a/modules/react/checkbox/lib/CheckboxInput.tsx b/modules/react/checkbox/lib/CheckboxInput.tsx index 379a805554..66f84c946b 100644 --- a/modules/react/checkbox/lib/CheckboxInput.tsx +++ b/modules/react/checkbox/lib/CheckboxInput.tsx @@ -2,12 +2,12 @@ import * as React from 'react'; import {ErrorType, createComponent, focusRing} from '@workday/canvas-kit-react/common'; import { + CORNER_SHAPE, CSProps, calc, createStencil, handleCsProp, px2rem, - withCornerShape, } from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; @@ -60,7 +60,8 @@ export interface CheckboxProps extends CSProps { const checkboxInputStencil = createStencil({ base: { - ...withCornerShape(system.legacy.shape.sm), + borderRadius: system.legacy.shape.sm, + cornerShape: CORNER_SHAPE, width: base.legacy.size300, height: base.legacy.size300, margin: 0, diff --git a/modules/react/color-picker/lib/parts/ColorSwatch.tsx b/modules/react/color-picker/lib/parts/ColorSwatch.tsx index 9531a34ede..86e4bd144e 100644 --- a/modules/react/color-picker/lib/parts/ColorSwatch.tsx +++ b/modules/react/color-picker/lib/parts/ColorSwatch.tsx @@ -2,13 +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, - withCornerShape, -} 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'; @@ -26,7 +20,8 @@ export const colorPickerColorSwatchStencil = createStencil({ [systemIconStencil.vars.color]: iconColor, width: system.legacy.size.xxs, height: system.legacy.size.xxs, - ...withCornerShape(system.legacy.shape.sm), + borderRadius: system.legacy.shape.sm, + cornerShape: CORNER_SHAPE, backgroundColor: color, display: 'flex', alignItems: 'center', diff --git a/modules/react/combobox/lib/ComboboxCard.tsx b/modules/react/combobox/lib/ComboboxCard.tsx index db6b8e1c73..e780a2bd13 100644 --- a/modules/react/combobox/lib/ComboboxCard.tsx +++ b/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, withCornerShape} 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'; @@ -24,7 +24,8 @@ export const useComboboxCard = createElemPropsHook(useComboboxModel)(model => { export const comboboxCardStencil = createStencil({ base: { '& :where([data-part="list-box-container"])': { - ...withCornerShape(system.legacy.shape.xxl), + borderRadius: system.legacy.shape.xxl, + cornerShape: CORNER_SHAPE, }, }, }); diff --git a/modules/react/expandable/lib/ExpandableTarget.tsx b/modules/react/expandable/lib/ExpandableTarget.tsx index 4386f8fae0..ef6810b0c1 100644 --- a/modules/react/expandable/lib/ExpandableTarget.tsx +++ b/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, withCornerShape} 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'; @@ -28,7 +28,8 @@ export const expandableTargetStencil = createStencil({ base: { background: system.legacy.color.surface.transparent, borderColor: system.color.border.transparent, - ...withCornerShape(system.legacy.shape.xxl), + borderRadius: system.legacy.shape.xxl, + cornerShape: CORNER_SHAPE, borderWidth: 0, display: 'flex', alignItems: 'center', diff --git a/modules/react/form-field/lib/FormFieldGroupList.tsx b/modules/react/form-field/lib/FormFieldGroupList.tsx index f7e9e3f765..7b31df1bce 100644 --- a/modules/react/form-field/lib/FormFieldGroupList.tsx +++ b/modules/react/form-field/lib/FormFieldGroupList.tsx @@ -1,12 +1,12 @@ import {createSubcomponent} from '@workday/canvas-kit-react/common'; import {FlexProps} from '@workday/canvas-kit-react/layout'; import { + CORNER_SHAPE, CSProps, calc, createStencil, handleCsProp, px2rem, - withCornerShape, } from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; @@ -18,7 +18,8 @@ const formFieldGroupListStencil = createStencil({ base: { display: 'flex', flexDirection: 'column', - ...withCornerShape(system.legacy.shape.md), + 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)}`, diff --git a/modules/react/information-highlight/lib/InformationHighlight.tsx b/modules/react/information-highlight/lib/InformationHighlight.tsx index a1a983e99b..327b324597 100644 --- a/modules/react/information-highlight/lib/InformationHighlight.tsx +++ b/modules/react/information-highlight/lib/InformationHighlight.tsx @@ -1,11 +1,11 @@ import {createContainer} from '@workday/canvas-kit-react/common'; import {systemIconStencil} from '@workday/canvas-kit-react/icon'; import { + CORNER_SHAPE, CSProps, createStencil, handleCsProp, px2rem, - withCornerShape, } from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; @@ -23,7 +23,8 @@ export const informationHighlightStencil = createStencil({ gridTemplateColumns: 'min-content', gap: `${system.legacy.gap.sm} ${system.legacy.gap.md}`, padding: system.legacy.padding.md, - ...withCornerShape(system.legacy.shape.sm), + borderRadius: system.legacy.shape.sm, + cornerShape: CORNER_SHAPE, outline: `${px2rem(1)} solid transparent`, borderInlineStart: `${base.legacy.size50} solid transparent`, }, diff --git a/modules/react/menu/lib/MenuCard.tsx b/modules/react/menu/lib/MenuCard.tsx index df2d0e9339..e80972ffe4 100644 --- a/modules/react/menu/lib/MenuCard.tsx +++ b/modules/react/menu/lib/MenuCard.tsx @@ -8,7 +8,7 @@ import { } from '@workday/canvas-kit-react/common'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; import {getTransformFromPlacement} from '@workday/canvas-kit-react/popup'; -import {calc, createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; +import {CORNER_SHAPE, calc, createStencil, px2rem} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {useMenuModel} from './useMenuModel'; @@ -38,7 +38,8 @@ export const menuCardStencil = createStencil({ flexDirection: 'column', transition: `transform ease-out 150ms`, padding: system.legacy.padding.xxs, - ...withCornerShape(system.legacy.shape.xxl), + borderRadius: system.legacy.shape.xxl, + cornerShape: CORNER_SHAPE, maxWidth: calc.subtract('100vw', system.legacy.size.sm), boxShadow: system.depth[3], minWidth, diff --git a/modules/react/menu/lib/MenuItem.tsx b/modules/react/menu/lib/MenuItem.tsx index f0ccad99f2..a286535c06 100644 --- a/modules/react/menu/lib/MenuItem.tsx +++ b/modules/react/menu/lib/MenuItem.tsx @@ -17,11 +17,11 @@ import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-ki import {mergeStyles} from '@workday/canvas-kit-react/layout'; import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip'; import { + CORNER_SHAPE, CSProps, createStencil, handleCsProp, px2rem, - withCornerShape, } from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; @@ -79,7 +79,8 @@ export const menuItemStencil = createStencil({ cursor: 'pointer', color: system.color.fg.default, borderWidth: 0, - ...withCornerShape(system.legacy.shape.xxl), + borderRadius: system.legacy.shape.xxl, + cornerShape: CORNER_SHAPE, textAlign: 'start', transition: 'background-color 80ms, color 80ms', backgroundColor: 'inherit', diff --git a/modules/react/menu/lib/MenuList.tsx b/modules/react/menu/lib/MenuList.tsx index 3f5b6d0626..5b285462c8 100644 --- a/modules/react/menu/lib/MenuList.tsx +++ b/modules/react/menu/lib/MenuList.tsx @@ -6,7 +6,7 @@ import { createSubcomponent, } from '@workday/canvas-kit-react/common'; import {useFocusRedirect, useReturnFocus} from '@workday/canvas-kit-react/popup'; -import {createStencil, handleCsProp, withCornerShape} from '@workday/canvas-kit-styling'; +import {CORNER_SHAPE, createStencil, handleCsProp} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {useMenuModel} from './useMenuModel'; @@ -34,7 +34,8 @@ export const useMenuList = composeHooks( export const menuListStencil = createStencil({ base: { background: system.legacy.color.surface.popover, - ...withCornerShape(system.legacy.shape.xxl), + borderRadius: system.legacy.shape.xxl, + cornerShape: CORNER_SHAPE, padding: 0, gap: system.legacy.gap.xs, }, diff --git a/modules/react/modal/lib/ModalCard.tsx b/modules/react/modal/lib/ModalCard.tsx index c44cd4612a..69292acb3a 100644 --- a/modules/react/modal/lib/ModalCard.tsx +++ b/modules/react/modal/lib/ModalCard.tsx @@ -1,7 +1,7 @@ import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; import {Popup} from '@workday/canvas-kit-react/popup'; -import {createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; +import {CORNER_SHAPE, createStencil, px2rem} from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; import {useModalCard, useModalModel} from './hooks'; @@ -15,7 +15,8 @@ export const modalCardStencil = createStencil({ border: '0', outline: `${px2rem(1)} solid transparent`, boxShadow: system.depth[5], - ...withCornerShape(system.legacy.shape.xxxl), + borderRadius: system.legacy.shape.xxxl, + cornerShape: CORNER_SHAPE, '@media screen and (max-width: 768px)': { gap: 0, margin: system.legacy.gap.md, // 16px all around margin on smaller screen sizes diff --git a/modules/react/pill/lib/Pill.tsx b/modules/react/pill/lib/Pill.tsx index b5cd716dbb..dec7648c2f 100644 --- a/modules/react/pill/lib/Pill.tsx +++ b/modules/react/pill/lib/Pill.tsx @@ -2,7 +2,7 @@ import {buttonStencil} from '@workday/canvas-kit-react/button'; import {createContainer, focusRing} from '@workday/canvas-kit-react/common'; import {systemIconStencil} from '@workday/canvas-kit-react/icon'; import {Box, BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout'; -import {colorSpace, createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; +import {CORNER_SHAPE, colorSpace, createStencil, px2rem} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {PillAvatar} from './PillAvatar'; @@ -34,7 +34,8 @@ export const pillStencil = createStencil({ display: 'initial', flexDirection: 'row', alignItems: 'center', - ...withCornerShape(system.legacy.shape.sm), + borderRadius: system.legacy.shape.sm, + cornerShape: CORNER_SHAPE, fontFamily: system.fontFamily.default, fontSize: system.legacy.fontSize.subtext.lg, letterSpacing: system.legacy.letterSpacing.subtext.lg, diff --git a/modules/react/pill/lib/PillIconButton.tsx b/modules/react/pill/lib/PillIconButton.tsx index 1533d1a073..b293193a19 100644 --- a/modules/react/pill/lib/PillIconButton.tsx +++ b/modules/react/pill/lib/PillIconButton.tsx @@ -2,7 +2,7 @@ import {buttonStencil} from '@workday/canvas-kit-react/button'; import {createSubcomponent, focusRing} from '@workday/canvas-kit-react/common'; import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; -import {calc, createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; +import {CORNER_SHAPE, calc, createStencil, px2rem} from '@workday/canvas-kit-styling'; import {xSmallIcon} from '@workday/canvas-system-icons-web'; import {component, system} from '@workday/canvas-tokens-web'; @@ -20,7 +20,8 @@ export const pillIconButtonStencil = createStencil({ base: { marginInlineEnd: calc.negate(px2rem(7)), // visually pull in the pill to the right size by -7px marginInlineStart: calc.negate(px2rem(2)), // visually create space between label and the button by -2px - ...withCornerShape(px2rem(2)), + borderRadius: px2rem(2), + cornerShape: CORNER_SHAPE, height: system.legacy.size.xxs, width: system.legacy.size.xxs, padding: 0, diff --git a/modules/react/popup/lib/PopupCard.tsx b/modules/react/popup/lib/PopupCard.tsx index ad9fa0a667..50216f18ca 100644 --- a/modules/react/popup/lib/PopupCard.tsx +++ b/modules/react/popup/lib/PopupCard.tsx @@ -8,13 +8,13 @@ import { } from '@workday/canvas-kit-react/common'; import {FlexStyleProps, mergeStyles} from '@workday/canvas-kit-react/layout'; import { + CORNER_SHAPE, calc, createStencil, createVars, cssVar, keyframes, px2rem, - withCornerShape, } from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; @@ -103,7 +103,8 @@ export const popupCardStencil = createStencil({ boxShadow: system.depth[3], minHeight: 0, padding: system.legacy.padding.xl, - ...withCornerShape(system.legacy.shape.xxxl), + borderRadius: system.legacy.shape.xxxl, + cornerShape: CORNER_SHAPE, maxHeight: maxHeight, overflowY: 'auto', animationName: fadeIn, diff --git a/modules/react/segmented-control/lib/SegmentedControlList.tsx b/modules/react/segmented-control/lib/SegmentedControlList.tsx index 35a15fcc15..fc08b634e5 100644 --- a/modules/react/segmented-control/lib/SegmentedControlList.tsx +++ b/modules/react/segmented-control/lib/SegmentedControlList.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import {useListRenderItems} from '@workday/canvas-kit-react/collection'; import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common'; import {Grid} from '@workday/canvas-kit-react/layout'; -import {createStencil, handleCsProp, withCornerShape} from '@workday/canvas-kit-styling'; +import {CORNER_SHAPE, createStencil, handleCsProp} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {useSegmentedControlModel} from './hooks/useSegmentedControlModel'; @@ -22,7 +22,8 @@ export const segmentedControlListStencil = createStencil({ display: 'inline-grid', backgroundColor: system.legacy.color.surface.alt.strong, border: `0 solid ${system.color.border.transparent}`, - ...withCornerShape(system.legacy.shape.lg), + borderRadius: system.legacy.shape.lg, + cornerShape: CORNER_SHAPE, padding: system.legacy.padding.xxs, gridGap: system.legacy.gap.sm, }, diff --git a/modules/react/skeleton/lib/parts/SkeletonHeader.tsx b/modules/react/skeleton/lib/parts/SkeletonHeader.tsx index ef02a83f4f..0bbc351df6 100644 --- a/modules/react/skeleton/lib/parts/SkeletonHeader.tsx +++ b/modules/react/skeleton/lib/parts/SkeletonHeader.tsx @@ -1,11 +1,11 @@ import {createComponent} from '@workday/canvas-kit-react/common'; import { + CORNER_SHAPE, CSProps, createStencil, cssVar, handleCsProp, px2rem, - withCornerShape, } from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; @@ -37,7 +37,8 @@ export const skeletonHeaderStencil = createStencil({ }, base: ({width, backgroundColor, height}) => ({ backgroundColor: cssVar(backgroundColor, system.legacy.color.surface.loading), - ...withCornerShape(system.legacy.shape.md), + borderRadius: system.legacy.shape.md, + cornerShape: CORNER_SHAPE, height: cssVar(height, system.legacy.size.xs), width: width, marginBlockEnd: system.legacy.size.xxxs, diff --git a/modules/react/skeleton/lib/parts/SkeletonShape.tsx b/modules/react/skeleton/lib/parts/SkeletonShape.tsx index 13b1743789..fba53b8a34 100644 --- a/modules/react/skeleton/lib/parts/SkeletonShape.tsx +++ b/modules/react/skeleton/lib/parts/SkeletonShape.tsx @@ -1,11 +1,11 @@ import {createComponent} from '@workday/canvas-kit-react/common'; import { + CORNER_SHAPE, CSProps, createStencil, cssVar, handleCsProp, px2rem, - withCornerShape, } from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; @@ -41,7 +41,8 @@ export const skeletonShapeStencil = createStencil({ }, base: ({width, height, borderRadius, backgroundColor}) => ({ backgroundColor: cssVar(backgroundColor, system.legacy.color.surface.loading), - ...withCornerShape(cssVar(borderRadius, '0')), + borderRadius: cssVar(borderRadius, '0'), + cornerShape: CORNER_SHAPE, height: cssVar(height, '100%'), width: width, marginBlockEnd: system.legacy.size.xxxs, diff --git a/modules/react/skeleton/lib/parts/SkeletonText.tsx b/modules/react/skeleton/lib/parts/SkeletonText.tsx index 280dc01e78..2b734652e5 100644 --- a/modules/react/skeleton/lib/parts/SkeletonText.tsx +++ b/modules/react/skeleton/lib/parts/SkeletonText.tsx @@ -1,10 +1,10 @@ import {createComponent} from '@workday/canvas-kit-react/common'; import { + CORNER_SHAPE, CSProps, createStencil, cssVar, handleCsProp, - withCornerShape, } from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; @@ -32,7 +32,8 @@ export const skeletonTextStencil = createStencil({ height: system.legacy.size.xxxs, // We do not have a `gap` token for 0.75rem so `padding` is being used here marginBlockEnd: system.legacy.padding.sm, - ...withCornerShape(system.legacy.shape.md), + borderRadius: system.legacy.shape.md, + cornerShape: CORNER_SHAPE, width: '100%', }, '& [data-part="skeleton-text-lines"]:last-child': { diff --git a/modules/react/table/lib/BaseTable.tsx b/modules/react/table/lib/BaseTable.tsx index 9ef44695d2..84d129979e 100644 --- a/modules/react/table/lib/BaseTable.tsx +++ b/modules/react/table/lib/BaseTable.tsx @@ -1,6 +1,6 @@ import {createComponent} from '@workday/canvas-kit-react/common'; import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout'; -import {createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; +import {CORNER_SHAPE, createStencil, px2rem} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {BaseTableBody} from './parts/BaseTableBody'; @@ -23,7 +23,8 @@ export const baseTableStencil = createStencil({ lineHeight: system.legacy.lineHeight.subtext.lg, letterSpacing: system.legacy.letterSpacing.subtext.lg, border: `${px2rem(1)} solid ${system.legacy.color.border.strong}`, - ...withCornerShape(system.legacy.shape.md), + borderRadius: system.legacy.shape.md, + cornerShape: CORNER_SHAPE, overflow: 'auto', color: system.color.fg.default, }, diff --git a/modules/react/text-input/lib/TextInput.tsx b/modules/react/text-input/lib/TextInput.tsx index 13838fd355..f075d89ae7 100644 --- a/modules/react/text-input/lib/TextInput.tsx +++ b/modules/react/text-input/lib/TextInput.tsx @@ -1,6 +1,6 @@ import {ErrorType, GrowthBehavior, createComponent} from '@workday/canvas-kit-react/common'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; -import {CSProps, createStencil, cssVar, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; +import {CORNER_SHAPE, CSProps, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; export interface TextInputProps extends GrowthBehavior, CSProps { @@ -27,7 +27,8 @@ export const textInputStencil = createStencil({ display: 'block', border: `${px2rem(1)} solid ${system.color.border.input.default}`, backgroundColor: system.legacy.color.surface.default, - ...withCornerShape(system.legacy.shape.md), + borderRadius: system.legacy.shape.md, + cornerShape: CORNER_SHAPE, height: system.legacy.size.md, transition: '0.2s box-shadow, 0.2s border-color', padding: system.legacy.padding.xs, // Compensate for border diff --git a/modules/react/toast/lib/Toast.tsx b/modules/react/toast/lib/Toast.tsx index 8717752507..7c961d349d 100644 --- a/modules/react/toast/lib/Toast.tsx +++ b/modules/react/toast/lib/Toast.tsx @@ -3,7 +3,7 @@ import React from 'react'; import {ExtractProps, createContainer} from '@workday/canvas-kit-react/common'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; import {Popup} from '@workday/canvas-kit-react/popup'; -import {createStencil, px2rem, withCornerShape} from '@workday/canvas-kit-styling'; +import {CORNER_SHAPE, createStencil, px2rem} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; import {ToastBody} from './ToastBody'; @@ -54,7 +54,8 @@ const toastStencil = createStencil({ width: px2rem(360), padding: 0, gap: system.legacy.gap.xs, - ...withCornerShape(system.legacy.shape.xl), + borderRadius: system.legacy.shape.xl, + cornerShape: CORNER_SHAPE, }, }); diff --git a/modules/react/tooltip/lib/TooltipContainer.tsx b/modules/react/tooltip/lib/TooltipContainer.tsx index c32683113e..1cd3558fb8 100644 --- a/modules/react/tooltip/lib/TooltipContainer.tsx +++ b/modules/react/tooltip/lib/TooltipContainer.tsx @@ -7,12 +7,12 @@ import { } from '@workday/canvas-kit-react/common'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; import { + CORNER_SHAPE, calc, createStencil, createVars, keyframes, px2rem, - withCornerShape, } from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; @@ -83,7 +83,8 @@ export const tooltipContainerStencil = createStencil({ // use :before vs margin to increase the tooltip hit-box '&:before': { content: '""', - ...withCornerShape(system.legacy.shape.md), + borderRadius: system.legacy.shape.md, + cornerShape: CORNER_SHAPE, outline: `${px2rem(1)} solid transparent`, outlineOffset: `-${px2rem(1)}`, zIndex: -1, diff --git a/modules/styling-transform/index.ts b/modules/styling-transform/index.ts index 4a84b86427..daec6b10b6 100644 --- a/modules/styling-transform/index.ts +++ b/modules/styling-transform/index.ts @@ -2,7 +2,6 @@ import styleTransformer from './lib/styleTransform'; import type {Config} from './lib/utils/types'; export type * from './lib/utils/types'; -export {handleWithCornerShape} from './lib/utils/handleWithCornerShape'; export {parseNodeToStaticValue} from './lib/utils/parseNodeToStaticValue'; export {parseObjectToStaticValue} from './lib/utils/parseObjectToStaticValue'; export {createObjectTransform} from './lib/createObjectTransform'; diff --git a/modules/styling-transform/lib/utils/handleWithCornerShape.ts b/modules/styling-transform/lib/utils/handleWithCornerShape.ts deleted file mode 100644 index 75da80ca21..0000000000 --- a/modules/styling-transform/lib/utils/handleWithCornerShape.ts +++ /dev/null @@ -1,23 +0,0 @@ -import ts from 'typescript'; - -import {CORNER_SHAPE} from '@workday/canvas-kit-styling'; - -import {createObjectTransform} from '../createObjectTransform'; -import {isImportedFromStyling} from './isImportedFromStyling'; -import {parseNodeToStaticValue} from './parseNodeToStaticValue'; - -export const handleWithCornerShape = createObjectTransform((node, context) => { - if ( - ts.isCallExpression(node) && - ts.isIdentifier(node.expression) && - node.expression.text === 'withCornerShape' && - isImportedFromStyling(node.expression, context.checker) - ) { - return { - borderRadius: parseNodeToStaticValue(node.arguments[0], context), - cornerShape: CORNER_SHAPE, - }; - } - - return; -}); diff --git a/modules/styling-transform/spec/createProgramFromSource.ts b/modules/styling-transform/spec/createProgramFromSource.ts index 49a854fce7..b7175ddec8 100644 --- a/modules/styling-transform/spec/createProgramFromSource.ts +++ b/modules/styling-transform/spec/createProgramFromSource.ts @@ -30,7 +30,6 @@ export function createVars(...args: T[]): C export function cssVar(input: string): string; export function createStyles(...args: any[]): string; export const CORNER_SHAPE = 'superellipse(1.1)'; -export function withCornerShape(borderRadius: string | number): {borderRadius: string | number; cornerShape: string}; export function createStencil(...args: any[]): any; `; diff --git a/modules/styling-transform/spec/handleWithCornerShape.spec.ts b/modules/styling-transform/spec/handleWithCornerShape.spec.ts deleted file mode 100644 index 03a735e913..0000000000 --- a/modules/styling-transform/spec/handleWithCornerShape.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -// @vitest-environment node -import {handleWithCornerShape} from '../lib/utils/handleWithCornerShape'; -import {createProgramFromSource, transform} from '../testing'; - -describe('handleWithCornerShape', () => { - it('should transform createStencil spreads via styleTransformer', () => { - const program = createProgramFromSource(` - import {createStencil, withCornerShape} from '@workday/canvas-kit-styling'; - - export const cardStencil = createStencil({ - base: { - ...withCornerShape('24px'), - border: '1px solid red', - }, - }); - `); - - const result = transform(program, 'test.ts', { - objectTransforms: [handleWithCornerShape], - }); - - expect(result).toContain('border-radius:24px'); - expect(result).toContain('corner-shape:superellipse(1.1)'); - }); -}); diff --git a/modules/styling/lib/cornerShape.ts b/modules/styling/lib/cornerShape.ts index a7a5cb1038..57e2d37730 100644 --- a/modules/styling/lib/cornerShape.ts +++ b/modules/styling/lib/cornerShape.ts @@ -1,11 +1 @@ -import {CSSObjectWithVars} from './cs'; - export const CORNER_SHAPE = 'superellipse(1.1)'; - -/** Returns borderRadius + cornerShape in the correct declaration order. */ -export function withCornerShape(borderRadius: string | number): CSSObjectWithVars { - return { - borderRadius, - cornerShape: CORNER_SHAPE, - }; -} diff --git a/modules/styling/spec/cornerShape.spec.ts b/modules/styling/spec/cornerShape.spec.ts deleted file mode 100644 index bef4b182df..0000000000 --- a/modules/styling/spec/cornerShape.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import {CORNER_SHAPE, withCornerShape} from '../lib/cornerShape'; - -describe('withCornerShape', () => { - it('should return borderRadius followed by cornerShape', () => { - const result = withCornerShape('8px'); - - expect(result).toEqual({ - borderRadius: '8px', - cornerShape: CORNER_SHAPE, - }); - }); - - it('should support numeric borderRadius values', () => { - const result = withCornerShape(16); - - expect(result).toEqual({ - borderRadius: 16, - cornerShape: CORNER_SHAPE, - }); - }); -});