feat: Implement Sana Canvas Text Input, Text Area, Form Field, and Color Picker #3992
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| 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,24 +8,23 @@ 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', | ||
| gap: system.legacy.gap.sm, | ||
| padding: `${system.legacy.padding.xs} ${system.legacy.padding.xxs}`, | ||
| margin: `0 ${calc.negate(base.legacy.size150)}`, | ||
| transition: '100ms box-shadow', | ||
| width: 'fit-content', | ||
| }, | ||
| modifiers: { | ||
| error: { | ||
|
Collaborator
There was a problem hiding this comment. Medium: Error/caution visual affordances rely heavily on boxShadow, which is removed in forced-colors mode. For TextInput, TextArea inherits this behavior; for grouped fields, the group ring is entirely shadow-based. Add @media (forced-colors: active) fallbacks using real border/outline and system colors so Windows High Contrast users can still perceive invalid/caution states.
Member
Author
There was a problem hiding this comment. @williamjstanton I'm consulting the MDN docs for system colors. Which color would you recommend I use for error and caution states? For example, ActiveText is visually similar to our standard error color (red), but doesn't line up semantically (i.e., the form field error has nothing to do with the "text of active links").
Member
Author
There was a problem hiding this comment. @williamjstanton Also, it wasn't quite clear from your original comment, but is it ok to leave TextInput and TextArea as-is given they both still have a border in the error and caution states?
Collaborator
There was a problem hiding this comment.
This is a really good question, and I don't know. There isn't any semantically correct option available at all. The recommendation is to use border differentiation like
Member
Author
There was a problem hiding this comment. I'm using I can double the thickness, however. Out of curiosity, what's the rationale behind differentiating the border if forced-colors is active? Also, did you mean to use
Collaborator
There was a problem hiding this comment.
Really? Presents as black? I'd assumed it would present as white on a dark background. I'll definitely need to test on a real Windows machine. Rationale: Since we can't use color to differentiate a border on an input that already uses a border in a valid state (e.g. TextInput), that's where it is useful to use more thickness or a I don't think that rationale applies in this situation with the group list. (Because the border / outline / boxShadow is absent in valid state.) |
||
| error: { | ||
| boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical}`, | ||
| }, | ||
| caution: { | ||
| 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}`, | ||
| }, | ||
| }, | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,9 @@ | ||
| 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, | ||
| 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}`, | ||
| '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': | ||
| { | ||
| borderColor: system.legacy.color.brand.border.critical, | ||
|
|
@@ -89,7 +94,6 @@ export const textInputStencil = createStencil({ | |
| caution: { | ||
| borderColor: system.legacy.color.brand.border.caution, | ||
| boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.focus.caution.inner}`, | ||
| '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': | ||
| { | ||
| borderColor: system.legacy.color.brand.border.caution, | ||
|
|
@@ -117,7 +121,11 @@ export const TextInput = createComponent('input')({ | |
| ref={ref} | ||
| {...mergeStyles( | ||
| elemProps, | ||
| textInputStencil({ | ||
| width: typeof width === 'number' ? px2rem(width) : width, | ||
| grow: grow === true ? 'true' : grow === false ? 'false' : undefined, | ||
| error, | ||
| }) | ||
|
Comment on lines
+124
to
+128
Member
Author
There was a problem hiding this comment. This fix addresses a TypeScript issue which appeared after introducing 
Explanation of the fix from Cursor: 
And why the error only happened after introducing 
Contributor
There was a problem hiding this comment. connected to #3896, I'll talk to Alan about that the next week
Comment on lines
+124
to
+128
Contributor
There was a problem hiding this comment. we need to fix that issue finally :D I'll talk to Alan about that when he is back |
||
| )} | ||
| /> | ||
| ); | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ty for adding that 😎