diff --git a/.storybook/routes.js b/.storybook/routes.js index a921a0cb03..5f17176fb5 100644 --- a/.storybook/routes.js +++ b/.storybook/routes.js @@ -84,6 +84,9 @@ const routes = { '/help/upgrade-guides/canvas-v15-upgrade-guide/': 'guides-upgrade-guides-v15-0-overview--docs', '/help/upgrade-guides/canvas-v15-upgrade-guide/#tab=visual-changes': 'guides-upgrade-guides-v15-0-visual-changes--docs', + '/help/upgrade-guides/canvas-v16-upgrade-guide/': 'guides-upgrade-guides-v16-0-overview--docs', + '/help/upgrade-guides/canvas-v16-upgrade-guide/#tab=visual-changes': + 'guides-upgrade-guides-v16-0-visual-changes--docs', }; export default routes; diff --git a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx index f87f962f7c..251fa494df 100644 --- a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx +++ b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx @@ -122,6 +122,56 @@ functional shortcuts, refer to the storybook documentation and our example stori ## Component Updates +> **Note:** All visual updates apply to both the Default Canvas theme and new Sana Canvas theme +> unless specified otherwise. + +### Color Input + +**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992) + +#### Visual Updates + +- Shape is now **12px** (previously 8px). + +### Color Picker + +**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992) + +#### Visual Updates + +- **Sana Canvas:** swatch shape is now **6px** (previously **4px**). + +### Form Field + +**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992) + +#### Visual Updates + +- Shape for grouped inputs (Radio groups and Checkbox groups) is now **12px** (previously 8px). As + in v15, this shape is primarily visible for error and caution states. +- Error and caution states no longer display a status background color; only the standard background + is shown. + +### Text Area + +**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992) + +#### Visual Updates + +- Shape is now **12px** (previously 8px). +- Error and caution states no longer display a status background color; only the standard background + is shown. + +### Text Input + +**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992) + +#### Visual Updates + +- Shape is now **12px** (previously 8px). +- Error and caution states no longer display a status background color; only the standard background + is shown. + ### Card **PR:** [#4014](https://github.com/Workday/canvas-kit/pull/4014) diff --git a/modules/react/color-picker/lib/ColorInput.tsx b/modules/react/color-picker/lib/ColorInput.tsx index 654718ab5d..d2d35f8f77 100644 --- a/modules/react/color-picker/lib/ColorInput.tsx +++ b/modules/react/color-picker/lib/ColorInput.tsx @@ -86,6 +86,9 @@ export const colorPickerHexInputStencil = createStencil({ left: system.legacy.gap.sm, boxShadow: `inset 0 0 0 ${px2rem(1)} rgba(0,0,0,0.25)`, pointerEvents: 'none', + '@media (forced-colors: active)': { + outline: `solid ${px2rem(1)} SelectedItemText`, + }, }, ':dir(ltr)': { diff --git a/modules/react/color-picker/lib/parts/ColorSwatch.tsx b/modules/react/color-picker/lib/parts/ColorSwatch.tsx index c924b998d2..7e1026039b 100644 --- a/modules/react/color-picker/lib/parts/ColorSwatch.tsx +++ b/modules/react/color-picker/lib/parts/ColorSwatch.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {pickForegroundColor} from '@workday/canvas-kit-react/common'; +import {cornerShapeStencil, 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 {checkSmallIcon} from '@workday/canvas-system-icons-web'; @@ -12,19 +12,21 @@ export interface ColorSwatchProps extends React.HTMLAttributes { } export const colorPickerColorSwatchStencil = createStencil({ + extends: cornerShapeStencil, vars: { color: '', iconColor: '', }, base: ({color, iconColor}) => ({ [systemIconStencil.vars.color]: iconColor, + [cornerShapeStencil.vars.shape]: system.legacy.shape.sm, width: system.legacy.size.xxs, height: system.legacy.size.xxs, - borderRadius: system.legacy.shape.sm, backgroundColor: color, display: 'flex', alignItems: 'center', justifyContent: 'center', + forcedColorAdjust: 'none', '& > *': { // Account for 24px icon margin: calc.negate(px2rem(2)), @@ -34,6 +36,9 @@ export const colorPickerColorSwatchStencil = createStencil({ withShadow: { true: { boxShadow: `inset 0px 0px 0px ${px2rem(1)} rgba(0, 0, 0, 0.25)`, + '@media (forced-colors: active)': { + outline: `solid ${px2rem(1)} SelectedItemText`, + }, }, }, }, @@ -50,7 +55,7 @@ export const ColorSwatch = ({color, showCheck = false, ...elemProps}: ColorSwatc colorPickerColorSwatchStencil({ color, iconColor: pickForegroundColor(color), - withShadow: showCheck || lowerCasedColor === '#ffffff', + withShadow: showCheck || lowerCasedColor === '#ffffff' ? 'true' : undefined, }) )} > diff --git a/modules/react/form-field/lib/FormFieldGroupList.tsx b/modules/react/form-field/lib/FormFieldGroupList.tsx index a8e8a64fc7..83ca4d7596 100644 --- a/modules/react/form-field/lib/FormFieldGroupList.tsx +++ b/modules/react/form-field/lib/FormFieldGroupList.tsx @@ -1,4 +1,4 @@ -import {createSubcomponent} from '@workday/canvas-kit-react/common'; +import {cornerShapeStencil, 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 {base, system} from '@workday/canvas-tokens-web'; @@ -8,10 +8,11 @@ import {useFormFieldModel} from './hooks'; export interface FormFieldGroupListProps extends CSProps, FlexProps {} const formFieldGroupListStencil = createStencil({ + extends: cornerShapeStencil, base: { + [cornerShapeStencil.vars.shape]: system.legacy.shape.lg, display: 'flex', flexDirection: 'column', - borderRadius: 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)}`, @@ -21,12 +22,16 @@ const formFieldGroupListStencil = createStencil({ modifiers: { error: { error: { - backgroundColor: system.legacy.color.brand.surface.critical.default, boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical}`, + '@media (forced-colors: active)': { + outline: `solid ${px2rem(2)} ButtonBorder`, + }, }, caution: { - backgroundColor: system.legacy.color.brand.surface.caution.default, boxShadow: `inset 0 0 0 ${px2rem(1)} ${system.legacy.color.brand.border.caution}, inset 0 0 0 ${px2rem(3)} ${system.legacy.color.brand.focus.caution.inner}`, + '@media (forced-colors: active)': { + outline: `solid ${px2rem(2)} ButtonBorder`, + }, }, }, }, diff --git a/modules/react/text-input/lib/TextInput.tsx b/modules/react/text-input/lib/TextInput.tsx index 5cb1be52ef..c5d7c9f449 100644 --- a/modules/react/text-input/lib/TextInput.tsx +++ b/modules/react/text-input/lib/TextInput.tsx @@ -1,4 +1,9 @@ -import {ErrorType, GrowthBehavior, createComponent} from '@workday/canvas-kit-react/common'; +import { + ErrorType, + GrowthBehavior, + cornerShapeStencil, + 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 {system} from '@workday/canvas-tokens-web'; @@ -15,10 +20,12 @@ export interface TextInputProps extends GrowthBehavior, CSProps { } export const textInputStencil = createStencil({ + extends: cornerShapeStencil, vars: { width: '', }, base: ({width}) => ({ + [cornerShapeStencil.vars.shape]: system.legacy.shape.lg, fontFamily: system.fontFamily.default, fontSize: system.legacy.fontSize.subtext.lg, fontWeight: system.fontWeight.normal, @@ -27,7 +34,6 @@ 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, height: system.legacy.size.md, transition: '0.2s box-shadow, 0.2s border-color', padding: system.legacy.padding.xs, // Compensate for border @@ -74,7 +80,6 @@ export const textInputStencil = createStencil({ borderColor: system.legacy.color.brand.border.critical, // borderWidth: px2rem(2), boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical}`, - backgroundColor: system.legacy.color.brand.surface.critical.default, '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': { borderColor: system.legacy.color.brand.border.critical, @@ -85,11 +90,17 @@ export const textInputStencil = createStencil({ 0 0 0 4px ${system.legacy.color.brand.border.primary}`, outlineOffset: px2rem(2), }, + // For Windows High Contrast mode: display error outline at double the + // width of the focus ring outline (to differentiate the error outline + // from the focus ring outline since both outlines will be the same + // color in WHC mode). + '@media (forced-colors: active)': { + outline: `solid ${px2rem(4)} ButtonBorder`, + }, }, caution: { borderColor: system.legacy.color.brand.border.caution, boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.focus.caution.inner}`, - backgroundColor: system.legacy.color.brand.surface.caution.default, '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': { borderColor: system.legacy.color.brand.border.caution, @@ -100,6 +111,15 @@ export const textInputStencil = createStencil({ 0 0 0 4px ${system.legacy.color.brand.border.primary}`, }, outlineOffset: px2rem(2), + // For Windows High Contrast mode: see comment above regarding the + // error outline. Unlike the error state, outlineOffset for the + // caution state is defined outside of the `(:focus-visible, .focus)` + // selector so we must override it here to prevent the caution outline + // from being separated too far from the input. + '@media (forced-colors: active)': { + outline: `solid ${px2rem(4)} ButtonBorder`, + outlineOffset: 0, + }, }, }, }, @@ -117,7 +137,11 @@ export const TextInput = createComponent('input')({ ref={ref} {...mergeStyles( elemProps, - textInputStencil({width: typeof width === 'number' ? px2rem(width) : width, grow, error}) + textInputStencil({ + width: typeof width === 'number' ? px2rem(width) : width, + grow: grow === true ? 'true' : grow === false ? 'false' : undefined, + error, + }) )} /> );