diff --git a/CHANGELOG.md b/CHANGELOG.md index cd3d6847bc..10e3e2e589 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,37 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [v11.1.13](https://github.com/Workday/canvas-kit/releases/tag/v11.1.13) (2024-09-19) + +### Components + +- fix: Allow inherit background color on system icon ([#2932](https://github.com/Workday/canvas-kit/pull/2932)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera) + + +## [v11.1.12](https://github.com/Workday/canvas-kit/releases/tag/v11.1.12) (2024-09-18) + +### Components + +- fix(search-form): Show ellipsis when placeholder overflows ([#2927](https://github.com/Workday/canvas-kit/pull/2927)) ([@NicholasBoll](https://github.com/NicholasBoll)) + + +## [v10.3.61](https://github.com/Workday/canvas-kit/releases/tag/v10.3.61) (2024-09-17) + +### Components + +- fix(search-form): Show ellipsis when placeholder overflows ([#2927](https://github.com/Workday/canvas-kit/pull/2927)) ([@NicholasBoll](https://github.com/NicholasBoll)) +## [v11.1.11](https://github.com/Workday/canvas-kit/releases/tag/v11.1.11) (2024-09-16) + +### Components + +- fix: Handle empty stack ref in useAssistiveHideSiblings ([#2920](https://github.com/Workday/canvas-kit/pull/2920)) ([@NicholasBoll](https://github.com/NicholasBoll)) + + +## [v10.3.60](https://github.com/Workday/canvas-kit/releases/tag/v10.3.60) (2024-09-16) + +### Components + +- fix: Handle empty stack ref in useAssistiveHideSiblings ([#2920](https://github.com/Workday/canvas-kit/pull/2920)) ([@NicholasBoll](https://github.com/NicholasBoll)) ## [v11.1.10](https://github.com/Workday/canvas-kit/releases/tag/v11.1.10) (2024-09-16) diff --git a/cypress.config.ts b/cypress.config.ts index d98cf21741..ab2ec0e85e 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -8,9 +8,6 @@ export default defineConfig({ retries: { runMode: 2, }, - env: { - NODE_ENV: 'development', // or 'development', 'production', etc. - }, blockHosts: ['cdn.fontawesome.com'], @@ -20,7 +17,7 @@ export default defineConfig({ framework: 'react', bundler: 'webpack', }, - setupNodeEvents(on) { + setupNodeEvents(on, config) { on('file:preprocessor', webpack()); }, viewportWidth: 1024, diff --git a/cypress/component/Tabs.spec.tsx b/cypress/component/Tabs.spec.tsx index f299b46d37..027a23761d 100644 --- a/cypress/component/Tabs.spec.tsx +++ b/cypress/component/Tabs.spec.tsx @@ -481,11 +481,14 @@ describe('Tabs', () => { context('when [Components/Containers/Tabs, OverflowTabs] story is rendered', () => { beforeEach(() => { cy.mount(); - cy.wait(500); }); it('should pass axe checks', () => { - cy.checkA11y(); + cy.checkA11y('[role="tablist"]', { + rules: { + 'aria-required-children': {enabled: false}, + }, + }); }); it('should not show the "More" button', () => { @@ -519,7 +522,7 @@ describe('Tabs', () => { context('when tab list container is only 500px wide', () => { beforeEach(() => { cy.findByRole('button', {name: '500px'}).click(); - cy.wait(0); + cy.findByRole('button', {name: '500px'}).should('have.attr', 'aria-pressed', 'true'); }); it('should pass axe checks', () => { @@ -587,6 +590,7 @@ describe('Tabs', () => { context('when tab list container is only 360px wide', () => { beforeEach(() => { cy.findByRole('button', {name: '360px'}).click(); + cy.findByRole('button', {name: '360px'}).should('have.attr', 'aria-pressed', 'true'); }); it('should pass axe checks', () => { @@ -613,6 +617,7 @@ describe('Tabs', () => { context('when the "More" button is clicked', () => { beforeEach(() => { + cy.findByRole('button', {name: '360px'}).should('have.attr', 'aria-pressed', 'true'); cy.findByRole('button', {name: 'More'}).click(); }); @@ -629,6 +634,7 @@ describe('Tabs', () => { context('when tab list container is only 150px wide', () => { beforeEach(() => { cy.findByRole('button', {name: '150px'}).click(); + cy.findByRole('button', {name: '150px'}).should('have.attr', 'aria-pressed', 'true'); }); it('should pass axe checks', () => { diff --git a/cypress/support/component.ts b/cypress/support/component.ts index 93794ea43a..243c4caf61 100644 --- a/cypress/support/component.ts +++ b/cypress/support/component.ts @@ -54,6 +54,7 @@ before(() => { }, }; }); + cy.configureAxe({ rules: [ {id: 'landmark-one-main', enabled: false}, // stories don't require navigation rules diff --git a/lerna.json b/lerna.json index af5712dce9..e5b1527cf8 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "modules/**" ], - "version": "11.1.10", + "version": "11.1.13", "npmClient": "yarn", "useWorkspaces": true, "command": { diff --git a/modules/codemod/package.json b/modules/codemod/package.json index ec9228e1b7..835710829c 100644 --- a/modules/codemod/package.json +++ b/modules/codemod/package.json @@ -2,7 +2,7 @@ "name": "@workday/canvas-kit-codemod", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", - "version": "11.1.10", + "version": "11.1.13", "description": "A collection of codemods for use on Workday Canvas Kit packages.", "main": "dist/es6/index.js", "sideEffects": false, diff --git a/modules/css/package.json b/modules/css/package.json index 014ea24a42..5eb120def4 100644 --- a/modules/css/package.json +++ b/modules/css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-css", - "version": "11.1.10", + "version": "11.1.13", "description": "The parent module that contains all Workday Canvas Kit CSS components", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx index df7f59eb82..d3eb2bf306 100644 --- a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx +++ b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx @@ -42,11 +42,13 @@ A note to the reader: - [Styling Updates](#styling-updates) - [Compatability Mode](#compatability-mode) - [Deprecations](#deprecations) + - [Form Field Container](#form-field-container) - [Removals](#removals) - [InputIconContainer](#inputiconcontainer) - [Component Updates](#component-updates) - [Styling API and CSS Tokens](#styling-api-and-css-tokens) - [Avatar](#avatar) + - [Select](#select) - [Form Field](#form-field) - [Text Area](#text-area) - [Troubleshooting](#troubleshooting) @@ -82,6 +84,34 @@ We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to co in a future major release. This signals consumers to migrate to a more stable alternative before the deprecated code is removed. +### Form Field Container + +**PR:** [#2865](https://github.com/Workday/canvas-kit/pull/2865) + +We've deprecated `FormField.Container`. Please use `FormField.Field` or `FormFieldGroup.Field` for +grouped inputs, this ensures proper label alignment and spacing of inputs and hint text, regardless +of the orientation. + +```tsx +// v11 + + Email + + + You must provide an email + + + +// v12 + + Email + + + You must provide an email + + +``` + ## Removals Removals are deletions from our codebase and you can no longer consume this component. We've either @@ -115,7 +145,6 @@ The following components are affected: - `Avatar` - `Dialog` -- `FormField` - `Modal` - `Popup` - `TextArea` @@ -128,6 +157,12 @@ The following components are affected: ### Avatar +**PR** [#2793](https://github.com/Workday/canvas-kit/pull/2793) + +Avatar has been updated to use our new +[styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-stencil). +The following changes have been made to the API: + - `Avatar.Size` has been deprecated. The `size` prop still accepts `Avatar.Size` in addition to the following values: `"extraExtraLarge" | "extraLarge" | "large" | "medium" | "small" | "extraSmall" | (string{})` @@ -141,12 +176,16 @@ The following components are affected: ### Form Field -**PR** [#2881](https://github.com/Workday/canvas-kit/pull/2881) +**PRs:** [#2865](https://github.com/Workday/canvas-kit/pull/2865), +[#2881](https://github.com/Workday/canvas-kit/pull/2881) + +We've promoted FormField from [Preview](#preview) to [Main](#main). The following changes has been +made to provide more flexibility and better explicit components when using inputs. -The orientation prop on the `FormField` component will be updated to accept the following values: -`vertical`, `horizontalStart`, and `horizontalEnd`. `horizontal` will still be accepted as a value -in v12, but it will be deprecated and slated for removal in a future major release. These changes -are intended to provide more flexibility with label alignments on `FormField` elements. +- The orientation prop on the `FormField` component will be updated to accept the following values: + `vertical`, `horizontalStart`, and `horizontalEnd`. `horizontal` will still be accepted as a value + in v12, but it will be deprecated and slated for removal in a future major release. These changes + are intended to provide more flexibility with label alignments on `FormField` elements. > **Note**: The horizontal alignment of start and end are relative to its container, meaning start > and end match the flex property of `flex-start` and `flex-end`. This is especially applicable for @@ -155,9 +194,105 @@ are intended to provide more flexibility with label alignments on `FormField` el > **Note:** Orientation "horizontal" has been deprecated. You will see a console warn message > suggesting to update your types and usage to `horizontalStart`, `horizontalEnd` or `vertical`. +- `useFormFieldModel`: `orientation` has been added back into `useFormFieldModel`. While we still + support compat mode due to + [style merging issues](https://github.com/Workday/canvas-kit/discussions/2893), having orientation + on the model allows for proper styling of sub components. + +- Styles clean up. `FormField.Hint` and `FormField.Label` where using `margin` for spacing. We've + updated styles so that the containing element uses `gap` for proper spacing. + +> **Note:** If spacing seems off between the input and hint text, ensure you're using +> `FormField.Field` wrappign your input and hint text. + 🤖 The codemod will handle the change of `orientation="horizontal"` to `orientation="horizontalStart"` if you're using the string literal values. +#### Form Field Group + +We've added a new component under `FromField` to allow users to group inputs without worrying about +setting the `as` prop on the `FormField` component. + +Use `FormFieldGroup` when you have a group of inputs that need to be associated to one another, like +`RadioGroup` or a group of `Checkbox`'s. + +`FormFieldGroup` supports the same props of `FormField`: + +- `error`: `"alert" | "error"` Defines the error around the whole group of inputs. +- `orientation`: `"horizontalStart" | "horizontalEnd" | "vertical" | "horizontal" `. Defines the + label placement. +- `isRequired`: `true` Defines if a group like `RadioGroup` is required. + +#### FormField Field + +We've added a new sub-component to `FormField` and `FormFieldGroup`, `FormField.Field` and +`FormFieldGroup.Field`. This sub-component is meant to ensure that the label is always aligned with +the input regardless of the `orientation`prop's value on`FormField` or `FormFieldGroup`. This +component should replace `FormField.Container` and always be used to ensure proper alignment of the +label and hint text. Our examples have been updated to reflect this. + +Although there is no codemod for this change and it's non-breaking, we suggest moving towards adding +this sub-component when using `FormField`. This component also exists on `FormFieldGroup`. + +```tsx + + Email + + + You must provide an email + + +``` + +### Select + +**PR:** [#2865](https://github.com/Workday/canvas-kit/pull/2865) + +As we transition to use our CSS tokens to provide better theming capabilities and our new styling +methods, we're moving away from components extending `Themeable`. `Themeable` has been removed from +`SelectProps.` + +If you wish to theme `Select` we suggest using the CanvasProvider to do so. + +```tsx +const theme: PartialEmotionCanvasTheme = { + canvas: { + palette: { + common: { + focusOutline: 'pink', + }, + primary: { + main: 'green', + light: 'lightgreen', + }, + }, + }, +}; + +//... + + + + + Selected Value: {value} + +; +``` + ### Text Area **PR:** [#2825](https://github.com/Workday/canvas-kit/pull/2825) @@ -168,10 +303,15 @@ type. ```tsx // v11 -interface MyProps { resize?: TextAreaResizeDirection } - -// 12 type ValueOf = T[keyof T]; interface MyProps { resize?: -ValueOf } +interface MyProps { + resize?: TextAreaResizeDirection; +} + +// 12 +type ValueOf = T[keyof T]; +interface MyProps { + resize?: ValueOf; +} ``` ## Troubleshooting diff --git a/modules/docs/package.json b/modules/docs/package.json index cdee562b73..81b7d05376 100644 --- a/modules/docs/package.json +++ b/modules/docs/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-docs", - "version": "11.1.10", + "version": "11.1.13", "description": "Documentation components of Canvas Kit components", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -44,10 +44,10 @@ "dependencies": { "@emotion/styled": "^11.6.0", "@storybook/csf": "0.0.1", - "@workday/canvas-kit-labs-react": "^11.1.10", - "@workday/canvas-kit-preview-react": "^11.1.10", - "@workday/canvas-kit-react": "^11.1.10", - "@workday/canvas-kit-styling": "^11.1.10", + "@workday/canvas-kit-labs-react": "^11.1.13", + "@workday/canvas-kit-preview-react": "^11.1.13", + "@workday/canvas-kit-react": "^11.1.13", + "@workday/canvas-kit-styling": "^11.1.13", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "react-syntax-highlighter": "^15.5.0", diff --git a/modules/labs-css/expandable.css b/modules/labs-css/expandable.css new file mode 100644 index 0000000000..555411bb02 --- /dev/null +++ b/modules/labs-css/expandable.css @@ -0,0 +1,5 @@ +.cnvs-labs-expandable-avatar { + margin-right: var(--cnvs-sys-space-x2); + flex-shrink: 0; +} + diff --git a/modules/labs-css/package.json b/modules/labs-css/package.json index 6eab8a129d..a728950ffd 100644 --- a/modules/labs-css/package.json +++ b/modules/labs-css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-labs-css", - "version": "11.1.10", + "version": "11.1.13", "description": "The parent module that contains all Workday Canvas Kit Labs CSS components", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json index f0fc27a111..c6174e16a4 100644 --- a/modules/labs-react/package.json +++ b/modules/labs-react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-labs-react", - "version": "11.1.10", + "version": "11.1.13", "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -46,8 +46,8 @@ "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@workday/canvas-kit-react": "^11.1.10", - "@workday/canvas-kit-styling": "^11.1.10", + "@workday/canvas-kit-react": "^11.1.13", + "@workday/canvas-kit-styling": "^11.1.13", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "@workday/design-assets-types": "^0.2.8", diff --git a/modules/labs-react/search-form/lib/SearchForm.tsx b/modules/labs-react/search-form/lib/SearchForm.tsx index 441a3f65ab..23d99676f5 100644 --- a/modules/labs-react/search-form/lib/SearchForm.tsx +++ b/modules/labs-react/search-form/lib/SearchForm.tsx @@ -270,6 +270,9 @@ const SearchInput = styled(TextInput)< '&::placeholder': { color: inputColors.placeholderColor, }, + '&:placeholder-shown': { + textOverflow: 'ellipsis', + }, '&:not([disabled])': { '&:focus, &:active': { outline: 'none', diff --git a/modules/popup-stack/package.json b/modules/popup-stack/package.json index 4ba17b4506..d6644c19ac 100644 --- a/modules/popup-stack/package.json +++ b/modules/popup-stack/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-popup-stack", - "version": "11.1.10", + "version": "11.1.13", "description": "Stack for managing popup UIs to coordinate global concerns like escape key handling and rendering order", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/preview-css/package.json b/modules/preview-css/package.json index cb965ac2a4..eb4f7cc0aa 100644 --- a/modules/preview-css/package.json +++ b/modules/preview-css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-preview-css", - "version": "11.1.10", + "version": "11.1.13", "description": "The parent module that contains all Workday Canvas Kit Preview CSS components", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/preview-react/_examples/stories/mdx/Density.mdx b/modules/preview-react/_examples/stories/mdx/Density.mdx new file mode 100644 index 0000000000..d6dd49a532 --- /dev/null +++ b/modules/preview-react/_examples/stories/mdx/Density.mdx @@ -0,0 +1,12 @@ +import {ExampleCodeBlock} from '@workday/canvas-kit-docs'; +import {Density} from './examples/Density'; + + + +# Canvas Kit Density Examples + +Although we currently don't support a density system, it's common practice to provide varying +options to users, especially in the context of forms. Below is an example of how you can style our +from elements to achieve the desired density. + + diff --git a/modules/preview-react/_examples/stories/mdx/examples/Density.tsx b/modules/preview-react/_examples/stories/mdx/examples/Density.tsx new file mode 100644 index 0000000000..ac55f606c3 --- /dev/null +++ b/modules/preview-react/_examples/stories/mdx/examples/Density.tsx @@ -0,0 +1,370 @@ +import React from 'react'; +import {FormField, FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; +import {TextInput} from '@workday/canvas-kit-react/text-input'; +import {Select} from '@workday/canvas-kit-react/select'; +import {Switch} from '@workday/canvas-kit-react/switch'; +import {Heading, Text} from '@workday/canvas-kit-react/text'; +import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control'; +import {calc, createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling'; +import {system} from '@workday/canvas-tokens-web'; + +const formStyles = createStyles({ + margin: `${system.space.x3} ${system.space.zero}`, + maxWidth: px2rem(600), + minWidth: system.space.zero, +}); + +const formFieldGroupListStyles = createStyles({ + display: 'inline-flex', + flexDirection: 'row', + padding: system.space.zero, + flexWrap: 'wrap', +}); + +const sideBySideInputs = createStencil({ + base: { + display: 'inline-flex', + gap: system.space.x2, + justifyContent: 'space-between', + }, + modifiers: { + labelOrientation: { + horizontalStart: { + display: 'flex', + flexDirection: 'column', + }, + horizontalEnd: { + display: 'flex', + flexDirection: 'column', + }, + vertical: { + display: 'inline-flex', + }, + }, + density: { + high: {}, + medium: {}, + low: {}, + }, + }, + compound: [ + { + modifiers: {labelOrientation: 'horizontalStart', density: 'high'}, + styles: { + gap: system.space.x4, + }, + }, + { + modifiers: {labelOrientation: 'horizontalStart', density: 'medium'}, + styles: { + gap: system.space.x6, + }, + }, + { + modifiers: {labelOrientation: 'horizontalStart', density: 'low'}, + styles: { + gap: system.space.x8, + }, + }, + { + modifiers: {labelOrientation: 'horizontalEnd', density: 'high'}, + styles: { + gap: system.space.x4, + }, + }, + { + modifiers: {labelOrientation: 'horizontalEnd', density: 'medium'}, + styles: { + gap: system.space.x6, + }, + }, + { + modifiers: {labelOrientation: 'horizontalEnd', density: 'low'}, + styles: { + gap: system.space.x8, + }, + }, + ], +}); + +const zipCodeInput = createStyles({ + minWidth: px2rem(90), +}); + +const zipCodeContainerStyles = createStyles({ + minWidth: system.space.zero, +}); + +const formFieldStencil = createStencil({ + base: {}, + modifiers: { + density: { + high: { + gap: px2rem(2), + }, + medium: { + gap: system.space.x1, + }, + low: { + gap: system.space.x2, + }, + }, + }, +}); + +const creditCardInputStyles = createStyles({ + width: calc.add(system.space.x10, system.space.x10), + minWidth: calc.add(system.space.x10, system.space.x10), + textAlign: 'center', +}); + +const selectStencil = createStencil({ + base: {}, + modifiers: { + density: { + high: { + height: system.space.x8, + padding: `${system.space.x1} ${system.space.x2}`, + '& + div': { + height: system.space.x8, + }, + }, + medium: { + height: system.space.x10, + padding: `${system.space.x2}`, + }, + low: { + height: calc.add(system.space.x10, system.space.x2), + padding: `${system.space.x3} ${system.space.x2}`, + '& + div': { + height: calc.add(system.space.x10, system.space.x2), + }, + }, + }, + }, +}); + +const inputStencil = createStencil({ + base: { + minWidth: px2rem(200), + }, + modifiers: { + density: { + high: { + height: system.space.x8, + padding: `${system.space.x1} ${system.space.x2}`, + }, + medium: { + height: system.space.x10, + padding: `${system.space.x2}`, + }, + + low: { + height: calc.add(system.space.x10, system.space.x2), + padding: `${system.space.x3} ${system.space.x2}`, + }, + }, + }, +}); + +const flexContainerStencil = createStencil({ + base: { + display: 'flex', + flexDirection: 'column', + minWidth: 0, + }, + modifiers: { + density: { + high: { + gap: system.space.x4, + }, + medium: { + gap: system.space.x6, + }, + low: { + gap: system.space.x8, + }, + }, + }, +}); + +const containerAlignmentStencil = createStencil({ + base: { + display: 'flex', + }, + modifiers: { + alignment: { + left: { + justifyContent: 'flex-start', + }, + center: { + justifyContent: 'center', + }, + }, + }, +}); + +const optionStyles = createStyles({ + display: 'flex', + gap: system.space.x3, + flexDirection: 'column', +}); + +const optionItemStyles = createStyles({ + display: 'flex', + flexDirection: 'column', + gap: system.space.x3, + maxWidth: 'fit-content', +}); + +// high = 32px height on inputs, space between inputs is 16px +// medium 40px height on inputs, space between inputs is 24px +// low = 48px height on inputs, space between inputs is 32px + +export const Density = () => { + const [density, setDensity] = React.useState<'high' | 'medium' | 'low'>('medium'); + const [containerAlignment, setContainerAlignment] = React.useState<'left' | 'center'>('left'); + const [labelOrientation, setLabelOrientation] = React.useState< + 'vertical' | 'horizontalStart' | 'horizontalEnd' + >('vertical'); + + const handleDensity = data => { + setDensity(data.id); + }; + + const handleContainerAlignment = data => { + setContainerAlignment(data.id); + }; + + const handleLabelOrientation = data => { + setLabelOrientation(data.id); + }; + + return ( +
+ Choose Your Density and Alignment +
+
+ Density + handleDensity(data)} size="small"> + + High + Medium + Low + + +
+
+ Label Orientation + handleLabelOrientation(data)} size="small"> + + Vertical + + Horizontal Start + + Horizontal End + + +
+
+ Container Alignment + handleContainerAlignment(data)} size="small"> + + Left + Center + + +
+
+ +
+
+
+ + Choose Country + + + + Full Name + + + + Phone Number + + + + Street Address + + + + City + + +
+ + State + + + + Zip Code + + +
+ + Enable Fast Shipping + + + + + + Credit Card + + + + + + + + +
+
+
+
+ ); +}; diff --git a/modules/preview-react/form-field/index.ts b/modules/preview-react/form-field/index.ts index bf873ef0ea..06c41d72f3 100644 --- a/modules/preview-react/form-field/index.ts +++ b/modules/preview-react/form-field/index.ts @@ -1,6 +1,11 @@ export * from './lib/FormField'; +export * from './lib/FormFieldGroup'; export * from './lib/hooks/'; +export * from './lib/FormFieldGroupLabel'; +export * from './lib/FormFieldGroupInput'; +export * from './lib/FormFieldGroupList'; export {formFieldStencil} from './lib/formFieldStencil'; export {formFieldContainerStencil} from './lib/FormFieldContainer'; export {formFieldHintStencil} from './lib/FormFieldHint'; export {formFieldLabelStencil} from './lib/FormFieldLabel'; +export {useFormFieldGroupInput} from './lib/FormFieldGroupInput'; diff --git a/modules/preview-react/form-field/lib/FormField.tsx b/modules/preview-react/form-field/lib/FormField.tsx index fb5ea6857b..7ef9a5388c 100644 --- a/modules/preview-react/form-field/lib/FormField.tsx +++ b/modules/preview-react/form-field/lib/FormField.tsx @@ -9,6 +9,7 @@ import {FormFieldLabel} from './FormFieldLabel'; import {FormFieldHint} from './FormFieldHint'; import {FormFieldContainer} from './FormFieldContainer'; import {formFieldStencil} from './formFieldStencil'; +import {FormFieldField} from './FormFieldField'; //TODO: Remove `horizontal` option in v13 and the console warn message. export interface FormFieldProps extends FlexProps, GrowthBehavior { @@ -66,7 +67,7 @@ export const FormField = createContainer('div')({ Label: FormFieldLabel, /** * `FormField.Hint` will render any additional information you want to provide to the `FormField.Input`. If you - * set the `orientation` prop to `horizontal` you should use `FormField.Container` to properly align the hint with your `FormField.Input`. + * set the `orientation` prop to `horizontal` you should use `FormField.Field` to properly align the hint with your `FormField.Input`. * * ```tsx * @@ -80,7 +81,7 @@ export const FormField = createContainer('div')({ */ Hint: FormFieldHint, /** - * `FormField.Container` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text.. + * `FormField.Field` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text.. * * ```tsx * @@ -93,25 +94,41 @@ export const FormField = createContainer('div')({ * ``` * * @stencil formFieldContainerStencil + * @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment. */ Container: FormFieldContainer, + /** + * `FormField.Field` allows you to customize container alignment and styles when wrapping your input and hint text. + * ```tsx + * + * First Name + * + * console.log(e)} /> + * This is your hint text + * + * + * ``` + */ + Field: FormFieldField, }, })(({children, grow, orientation, ...elemProps}, Element, model) => { // TODO: Remove this warning in v13 once we remove horizontal support in favor of horizontalStart and horizontalEnd. - if (process && process.env.NODE_ENV === 'development') { + if (process.env.NODE_ENV === 'development') { if (orientation === 'horizontal') { console.warn( 'FormField: Orientation option of "horizontal" is deprecated and will be removed in v13. Please update your types and value to use the string literal of "horizontalStart". The following values will be accepted in v13: "horizontalStart" | "horizontalEnd" | "vertical".' ); } } + return ( ((elemProps, Element, model) => { + return ( + + ); +}); diff --git a/modules/preview-react/form-field/lib/FormFieldGroup.tsx b/modules/preview-react/form-field/lib/FormFieldGroup.tsx new file mode 100644 index 0000000000..731695170b --- /dev/null +++ b/modules/preview-react/form-field/lib/FormFieldGroup.tsx @@ -0,0 +1,133 @@ +import React from 'react'; + +import {createContainer, GrowthBehavior} from '@workday/canvas-kit-react/common'; +import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout'; + +import {FormFieldGroupList} from './FormFieldGroupList'; +import {FormFieldGroupInput} from './FormFieldGroupInput'; +import {FormFieldGroupLabel} from './FormFieldGroupLabel'; +import {FormField} from './FormField'; + +import {useFormFieldModel} from './hooks'; +import {formFieldStencil} from './formFieldStencil'; + +//TODO: Remove `horizontal` option in v13 and the console warn message. +export interface FormFieldGroupProps extends FlexProps, GrowthBehavior { + /** + * The direction the child elements should stack. In v13, `horizontal` will be removed. Please use `horizontalStart` or `horizontalEnd` for horizontal alignment. + * @default vertical + */ + orientation?: 'vertical' | 'horizontalStart' | 'horizontalEnd' | 'horizontal'; + children: React.ReactNode; +} + +/** + * Use `FormFieldGroup` to wrap a group of inputs to make them accessible. + * + * ```tsx + * + * Choose a Pet + * + * + * Dog + * Cat + * + * + * + * ``` + * + * @stencil formFieldStencil + */ +export const FormFieldGroup = createContainer('div')({ + displayName: 'FormFieldGroup', + modelHook: useFormFieldModel, + subComponents: { + /** + * `FormFieldGroup.Input` will render any `inputs` passed to it via the `as` prop. Use this component with checkboxes or radio inputs. + * `FormFieldGroup.Input` will apply `aria-invalid` when there is an error on `FromFieldGroup` or `aria-describedby` when an `id` is added on the `FormFieldGroup`. + * + * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.** + * + * ```tsx + * + * Choose a Pet + * + * Dog + * Cat + * + * + * ``` + */ + Input: FormFieldGroupInput, + /** + * `FormFieldGroup.Label` this element labels the contents of the group of inputs.. + * + * ```tsx + * + * Choose a pet + * //... + * + * ``` + * + * @stencil formFieldLabelStencil + */ + Label: FormFieldGroupLabel, + /** + * `FormFieldGroup.List` will render a `div`. This element is used to apply the visual error states around the group of inputs. It's contents will be your inputs. + */ + List: FormFieldGroupList, + /** + * `FormFieldGroup.Hint` will render any additional information you want to provide to the `FormFieldGroup`. + * + * ```tsx + * + * Choose a pet + * + * //... + * + * This is your hint text + * + * ``` + * + * @stencil formFieldHintStencil + */ + Hint: FormField.Hint, + /** + * `FormFieldGroup.Field` allows you to properly align the legend to the group of inputs. + * + * ```tsx + * + * Choose a pet + * + * + * Dog + * Cat + * + * This is your hint text + * + * + * ``` + * + */ + Field: FormField.Field, + }, +})(({children, grow, orientation, ...elemProps}, Element, model) => { + return ( + + {children} + + ); +}); diff --git a/modules/preview-react/form-field/lib/FormFieldGroupInput.tsx b/modules/preview-react/form-field/lib/FormFieldGroupInput.tsx new file mode 100644 index 0000000000..f16b1c95d7 --- /dev/null +++ b/modules/preview-react/form-field/lib/FormFieldGroupInput.tsx @@ -0,0 +1,23 @@ +import {createElemPropsHook, createSubcomponent} from '@workday/canvas-kit-react/common'; +import {CSProps, handleCsProp} from '@workday/canvas-kit-styling'; +import React from 'react'; +import {useFormFieldModel} from './hooks'; + +export interface FormFieldGroupInputProps extends CSProps {} +/** + * Adds the necessary props to an `Input` component for grouped inputs. + */ +export const useFormFieldGroupInput = createElemPropsHook(useFormFieldModel)(({state}) => { + return { + 'aria-invalid': state.error === 'error' ? true : undefined, + 'aria-describedby': state.id ? `hint-${state.id}` : undefined, + }; +}); + +export const FormFieldGroupInput = createSubcomponent('input')({ + displayName: 'FormField.Input', + modelHook: useFormFieldModel, + elemPropsHook: useFormFieldGroupInput, +})((elemProps: FormFieldGroupInputProps, Element) => { + return ; +}); diff --git a/modules/preview-react/form-field/lib/FormFieldGroupLabel.tsx b/modules/preview-react/form-field/lib/FormFieldGroupLabel.tsx new file mode 100644 index 0000000000..117983e2ac --- /dev/null +++ b/modules/preview-react/form-field/lib/FormFieldGroupLabel.tsx @@ -0,0 +1,88 @@ +import React from 'react'; + +import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; +import {createStencil, px2rem} from '@workday/canvas-kit-styling'; +import {Text, textStencil} from '@workday/canvas-kit-react/text'; +import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout'; +import {brand, system} from '@workday/canvas-tokens-web'; + +import {useFormFieldLabel, useFormFieldModel} from './hooks'; + +export interface FormFieldGroupLabelProps + extends FlexProps, + Omit, 'display'> { + /** + * The text of the label. + */ + children: React.ReactNode; +} + +export const formFieldGroupLabelStencil = createStencil({ + extends: textStencil, + // @ts-ignore Still weird about CSS font variables + base: { + fontWeight: system.fontWeight.medium, + color: system.color.text.default, + paddingInlineStart: system.space.zero, + display: 'flex', + alignItems: 'center', + minWidth: px2rem(180), + }, + modifiers: { + isRequired: { + true: { + // @ts-ignore fonts + '&::after': { + content: '"*"', + fontSize: system.fontSize.body.large, + fontWeight: system.fontWeight.normal, + color: brand.error.base, + textDecoration: 'unset', + marginInlineStart: system.space.x1, + }, + }, + }, + orientation: { + vertical: { + width: '100%', + }, + horizontalStart: { + justifyContent: 'flex-start', + float: 'left', + maxHeight: system.space.x10, + }, + horizontalEnd: { + maxHeight: system.space.x10, + float: 'left', + justifyContent: 'flex-end', + }, + }, + }, + defaultModifiers: { + typeLevel: 'subtext.large', + }, +}); + +export const FormFieldGroupLabel = createSubcomponent('div')({ + displayName: 'FormFieldGroup.Label', + modelHook: useFormFieldModel, + elemPropsHook: useFormFieldLabel, +})(({children, typeLevel, variant, ...elemProps}, Element, model) => { + return ( + + {children} + + ); +}); diff --git a/modules/preview-react/form-field/lib/FormFieldGroupList.tsx b/modules/preview-react/form-field/lib/FormFieldGroupList.tsx new file mode 100644 index 0000000000..778c1deb8c --- /dev/null +++ b/modules/preview-react/form-field/lib/FormFieldGroupList.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import {createSubcomponent} from '@workday/canvas-kit-react/common'; + +import {FlexProps} from '@workday/canvas-kit-react/layout'; + +import {createStencil, CSProps, calc, px2rem, handleCsProp} from '@workday/canvas-kit-styling'; +import {brand, system} from '@workday/canvas-tokens-web'; + +import {useFormFieldModel} from './hooks'; + +export interface FormFieldGroupListProps extends CSProps, FlexProps {} + +const formFieldGroupListStencil = createStencil({ + base: { + display: 'flex', + flexDirection: 'column', + borderRadius: system.shape.x1, + gap: system.space.x2, + padding: `${px2rem(10)} ${system.space.x3} ${system.space.x2}`, + margin: `0 ${calc.negate(system.space.x3)}`, + transition: '100ms box-shadow', + width: 'fit-content', + }, + modifiers: { + error: { + error: { + boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.error.base}`, + }, + alert: { + boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.alert.darkest}, inset 0 0 0 ${px2rem(3)} ${ + brand.alert.base + }`, + }, + }, + }, +}); + +export const FormFieldGroupList = createSubcomponent('div')({ + displayName: 'FormFieldGroup.List', + modelHook: useFormFieldModel, +})(({children, ...elemProps}, Element, model) => { + return ( + + {children} + + ); +}); diff --git a/modules/preview-react/form-field/lib/FormFieldHint.tsx b/modules/preview-react/form-field/lib/FormFieldHint.tsx index e753891365..97bc74ad0c 100644 --- a/modules/preview-react/form-field/lib/FormFieldHint.tsx +++ b/modules/preview-react/form-field/lib/FormFieldHint.tsx @@ -2,20 +2,23 @@ import React from 'react'; import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; import {system, brand} from '@workday/canvas-tokens-web'; -import {createStencil, parentModifier} from '@workday/canvas-kit-styling'; +import {createStencil} from '@workday/canvas-kit-styling'; import {Text, textStencil} from '@workday/canvas-kit-react/text'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; import {useFormFieldHint, useFormFieldModel} from './hooks'; -import {formFieldStencil} from './formFieldStencil'; export const formFieldHintStencil = createStencil({ extends: textStencil, base: { - margin: `${system.space.x2} ${system.space.zero} ${system.space.zero}`, - - [parentModifier(formFieldStencil.modifiers.error.error)]: { - color: brand.error.base, + margin: system.space.zero, + }, + modifiers: { + error: { + error: { + color: brand.error.base, + }, + alert: {}, }, }, defaultModifiers: { @@ -27,15 +30,22 @@ export const FormFieldHint = createSubcomponent('p')({ displayName: 'FormField.Hint', modelHook: useFormFieldModel, elemPropsHook: useFormFieldHint, -})>(({children, typeLevel, variant, ...elemProps}, Element) => { - if (!children) { - // If there is no hint text just skip rendering - return null; - } +})>( + ({children, typeLevel, variant, ...elemProps}, Element, model) => { + if (!children) { + // If there is no hint text just skip rendering + return null; + } - return ( - - {children} - - ); -}); + return ( + + {children} + + ); + } +); diff --git a/modules/preview-react/form-field/lib/FormFieldInput.tsx b/modules/preview-react/form-field/lib/FormFieldInput.tsx index 69de3dcf7c..bdd196135e 100644 --- a/modules/preview-react/form-field/lib/FormFieldInput.tsx +++ b/modules/preview-react/form-field/lib/FormFieldInput.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; -import {Box} from '@workday/canvas-kit-react/layout'; +import {Box, mergeStyles} from '@workday/canvas-kit-react/layout'; import {useFormFieldInput, useFormFieldModel} from './hooks'; @@ -10,5 +10,5 @@ export const FormFieldInput = createSubcomponent('input')({ modelHook: useFormFieldModel, elemPropsHook: useFormFieldInput, })>((elemProps, Element) => { - return ; + return ; }); diff --git a/modules/preview-react/form-field/lib/FormFieldLabel.tsx b/modules/preview-react/form-field/lib/FormFieldLabel.tsx index ea9f6e697d..93eda43168 100644 --- a/modules/preview-react/form-field/lib/FormFieldLabel.tsx +++ b/modules/preview-react/form-field/lib/FormFieldLabel.tsx @@ -1,13 +1,12 @@ import React from 'react'; import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; -import {createStencil, parentModifier, px2rem} from '@workday/canvas-kit-styling'; +import {createStencil, px2rem} from '@workday/canvas-kit-styling'; import {Text, textStencil} from '@workday/canvas-kit-react/text'; import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout'; import {brand, system} from '@workday/canvas-tokens-web'; import {useFormFieldLabel, useFormFieldModel} from './hooks'; -import {formFieldStencil} from './formFieldStencil'; export interface FormFieldLabelProps extends FlexProps, @@ -20,7 +19,7 @@ export interface FormFieldLabelProps export const formFieldLabelStencil = createStencil({ extends: textStencil, - // @ts-ignore Still weird about CSS variables + // @ts-ignore Still weird about CSS font variables base: { fontWeight: system.fontWeight.medium, color: system.color.text.default, @@ -28,37 +27,40 @@ export const formFieldLabelStencil = createStencil({ display: 'flex', alignItems: 'center', minWidth: px2rem(180), - - // asterisk - [parentModifier(formFieldStencil.modifiers.required.true)]: { - '&::after': { - content: '"*"', - fontSize: system.fontSize.body.large, - fontWeight: system.fontWeight.normal, - color: brand.error.base, - textDecoration: 'unset', - marginInlineStart: system.space.x1, + }, + modifiers: { + isRequired: { + true: { + // @ts-ignore Still weird about CSS font variables + '&::after': { + content: '"*"', + fontSize: system.fontSize.body.large, + fontWeight: system.fontWeight.normal, + color: brand.error.base, + textDecoration: 'unset', + marginInlineStart: system.space.x1, + }, }, }, - - // orientation modifier from parent FormField - [parentModifier(formFieldStencil.modifiers.orientation.horizontalStart)]: { - justifyContent: 'flex-start', - float: 'left', - maxHeight: system.space.x10, - }, - // orientation modifier from parent FormField - [parentModifier(formFieldStencil.modifiers.orientation.horizontalEnd)]: { - maxHeight: system.space.x10, - float: 'left', - justifyContent: 'flex-end', - }, - [parentModifier(formFieldStencil.modifiers.orientation.vertical)]: { - width: '100%', + orientation: { + horizontalStart: { + justifyContent: 'flex-start', + float: 'left', + maxHeight: system.space.x10, + }, + horizontalEnd: { + maxHeight: system.space.x10, + float: 'left', + justifyContent: 'flex-end', + }, + vertical: { + width: '100%', + }, }, }, defaultModifiers: { typeLevel: 'subtext.large', + isRequired: 'false', }, }); @@ -66,9 +68,20 @@ export const FormFieldLabel = createSubcomponent('label')({ displayName: 'FormField.Label', modelHook: useFormFieldModel, elemPropsHook: useFormFieldLabel, -})(({children, typeLevel, variant, ...elemProps}, Element) => { +})(({children, typeLevel, variant, ...elemProps}, Element, model) => { return ( - + {children} ); diff --git a/modules/preview-react/form-field/lib/formFieldStencil.ts b/modules/preview-react/form-field/lib/formFieldStencil.ts index 8f63363889..3c6e9979d4 100644 --- a/modules/preview-react/form-field/lib/formFieldStencil.ts +++ b/modules/preview-react/form-field/lib/formFieldStencil.ts @@ -15,6 +15,9 @@ export const formFieldStencil = createStencil({ '[data-width="ck-formfield-width"]': { width: '100%', }, + '&:has(div[data-width="ck-formfield-width"])': { + width: '100%', + }, }, }, orientation: { diff --git a/modules/preview-react/form-field/lib/hooks/useFormFieldModel.tsx b/modules/preview-react/form-field/lib/hooks/useFormFieldModel.tsx index 814fdd4dbc..2c138f1fb7 100644 --- a/modules/preview-react/form-field/lib/hooks/useFormFieldModel.tsx +++ b/modules/preview-react/form-field/lib/hooks/useFormFieldModel.tsx @@ -24,6 +24,8 @@ export const useFormFieldModel = createModelHook({ * `required` set to true, and an asterisk will be appended to the `FormField.Label`. */ isRequired: false, + + orientation: '' as 'vertical' | 'horizontal' | 'horizontalEnd' | 'horizontalStart', }, })(config => { const id = useUniqueId(config.id); diff --git a/modules/preview-react/form-field/stories/FormField.mdx b/modules/preview-react/form-field/stories/FormField.mdx index 9471e7373d..10d82ddd93 100644 --- a/modules/preview-react/form-field/stories/FormField.mdx +++ b/modules/preview-react/form-field/stories/FormField.mdx @@ -13,9 +13,9 @@ import {Custom} from './examples/Custom'; import {CustomId} from './examples/CustomId'; import {AllFields} from './examples/AllFields'; import {Hint} from './examples/Hint'; -import {FieldSet} from './examples/FieldSet'; import {Grow} from './examples/Grow'; import {ThemedError} from './examples/ThemedErrors'; +import {GroupedInputs} from './examples/GroupedInputs'; @@ -66,8 +66,8 @@ Set the `disabled` prop of `FormField.Input` to prevent users from interacting w ### Hint -Use `FormField.Hint` to display a short message below the input component and `FormField.Container` -to ensure proper alignment. +Use `FormField.Hint` to display a short message below the input component and `FormField.Field` to +ensure proper alignment. @@ -77,11 +77,13 @@ Set the `orientation` prop of the Form Field to designate the position of the la input component. By default, the orientation will be set to `vertical`. If you want your label to be horizontal, you have two options: `horizontalStart` and `horizontalEnd`. -If you want the position of the label at the start of the container, set orientation prop to `horizontalStart`. +If you want the position of the label at the start of the container, set orientation prop to +`horizontalStart`. -If you want the position of the label at the end of the container, set orientation prop to `horizontalEnd`. +If you want the position of the label at the end of the container, set orientation prop to +`horizontalEnd`. @@ -109,12 +111,20 @@ for required fields are suffixed by a red asterisk. -### Field Set +### Grouped Inputs -Set the `as` prop of the `FormField` to `fieldset` and the `as` prop of the `FormField.Label` to -`legend` when using `RadioGroup` to ensure proper accessbility. +Use `FormFieldGroup` when you have a group of inputs that need to be associated to one another, like +`RadioGroup` or a group of `Checkbox`'s. `FormFieldGroup` renders a `fieldset` element and +`FormFieldGroup.Label` renders a `legend` element. These elements will allow for correct +accessibility of grouped inputs. - +`FormFieldGroup` supports the same props of `FormField`: + +- `error`: `"alert" | "error"` Defines the error around the whole group of inputs. +- `orientation`: `"horizontal" | "vertical"` Defines the legend placement. +- `isRequired`: `true` Defines if a group like RadioGroup is required. + + ### Custom diff --git a/modules/preview-react/form-field/stories/FormField.stories.ts b/modules/preview-react/form-field/stories/FormField.stories.ts index dc4b7711c5..a6c0bef78d 100644 --- a/modules/preview-react/form-field/stories/FormField.stories.ts +++ b/modules/preview-react/form-field/stories/FormField.stories.ts @@ -14,9 +14,9 @@ import {Custom as CustomExample} from './examples/Custom'; import {CustomId as CustomIdExample} from './examples/CustomId'; import {AllFields as AllFieldsExample} from './examples/AllFields'; import {Hint as HintExample} from './examples/Hint'; -import {FieldSet as FieldSetExample} from './examples/FieldSet'; import {Grow as GrowExample} from './examples/Grow'; import {ThemedError as ThemedErrorExample} from './examples/ThemedErrors'; +import {GroupedInputs as GroupedInputsExample} from './examples/GroupedInputs'; export default { title: 'Preview/Inputs/Form Field', @@ -67,12 +67,13 @@ export const AllFields: Story = { export const Hint: Story = { render: HintExample, }; -export const FieldSet: Story = { - render: FieldSetExample, -}; export const Grow: Story = { render: GrowExample, }; export const ThemedError: Story = { render: ThemedErrorExample, }; + +export const GroupedInputs: Story = { + render: GroupedInputsExample, +}; diff --git a/modules/preview-react/form-field/stories/examples/Alert.tsx b/modules/preview-react/form-field/stories/examples/Alert.tsx index fc8561cbe0..cefaa92bc4 100644 --- a/modules/preview-react/form-field/stories/examples/Alert.tsx +++ b/modules/preview-react/form-field/stories/examples/Alert.tsx @@ -14,10 +14,10 @@ export const Alert = () => { First Name - + Cannot contain numbers - + ); diff --git a/modules/preview-react/form-field/stories/examples/AllFields.tsx b/modules/preview-react/form-field/stories/examples/AllFields.tsx index c1de8aec0f..4fbf1dde34 100644 --- a/modules/preview-react/form-field/stories/examples/AllFields.tsx +++ b/modules/preview-react/form-field/stories/examples/AllFields.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {FormField, FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; import {Flex} from '@workday/canvas-kit-react/layout'; import {TextInput} from '@workday/canvas-kit-react/text-input'; import {RadioGroup} from '@workday/canvas-kit-preview-react/radio'; @@ -22,19 +22,23 @@ export const AllFields = () => { First Name - + + + Email - + Hint text for your input - + Text Area Label - + + + Choose a Crust @@ -68,10 +72,41 @@ export const AllFields = () => { + + Choose Your Crust + + + + Thin Crust + + + Hand Tossed + + + Deep Dish + + + Cauliflower + + + + + + Checkbox Legend + + + + + + + + Switch Label - + + + ); diff --git a/modules/preview-react/form-field/stories/examples/Basic.tsx b/modules/preview-react/form-field/stories/examples/Basic.tsx index 5825203b8a..81ecf88103 100644 --- a/modules/preview-react/form-field/stories/examples/Basic.tsx +++ b/modules/preview-react/form-field/stories/examples/Basic.tsx @@ -14,7 +14,9 @@ export const Basic = () => { First Name - + + + ); diff --git a/modules/preview-react/form-field/stories/examples/CustomId.tsx b/modules/preview-react/form-field/stories/examples/CustomId.tsx index c5ac5e3e0c..f36866b034 100644 --- a/modules/preview-react/form-field/stories/examples/CustomId.tsx +++ b/modules/preview-react/form-field/stories/examples/CustomId.tsx @@ -14,7 +14,9 @@ export const CustomId = () => { First Name - + + + ); diff --git a/modules/preview-react/form-field/stories/examples/Disabled.tsx b/modules/preview-react/form-field/stories/examples/Disabled.tsx index 433f670854..f6228ae40a 100644 --- a/modules/preview-react/form-field/stories/examples/Disabled.tsx +++ b/modules/preview-react/form-field/stories/examples/Disabled.tsx @@ -15,7 +15,9 @@ export const Disabled = () => { Email - + + + ); diff --git a/modules/preview-react/form-field/stories/examples/Error.tsx b/modules/preview-react/form-field/stories/examples/Error.tsx index b2f9344828..2ca3091a07 100644 --- a/modules/preview-react/form-field/stories/examples/Error.tsx +++ b/modules/preview-react/form-field/stories/examples/Error.tsx @@ -15,10 +15,10 @@ export const Error = () => { Password - + Must Contain a number and a capital letter - + ); diff --git a/modules/preview-react/form-field/stories/examples/FieldSet.tsx b/modules/preview-react/form-field/stories/examples/FieldSet.tsx deleted file mode 100644 index c82bd9683a..0000000000 --- a/modules/preview-react/form-field/stories/examples/FieldSet.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; -import {Flex} from '@workday/canvas-kit-react/layout'; -import {RadioGroup} from '@workday/canvas-kit-preview-react/radio'; - -export const FieldSet = () => { - const [value, setValue] = React.useState(''); - - const handleChange = (event: React.ChangeEvent) => { - setValue(event.target.value); - }; - - return ( - - - Radio Group Legend - - Deep dish - Thin - Gluten free - Cauliflower - - Butter - the best thing to put on bread - - - - - ); -}; diff --git a/modules/preview-react/form-field/stories/examples/GroupedInputs.tsx b/modules/preview-react/form-field/stories/examples/GroupedInputs.tsx new file mode 100644 index 0000000000..48ab4bcef2 --- /dev/null +++ b/modules/preview-react/form-field/stories/examples/GroupedInputs.tsx @@ -0,0 +1,207 @@ +import React from 'react'; +import {FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; +import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button'; +import {system} from '@workday/canvas-tokens-web'; +import {Banner} from '@workday/canvas-kit-react/banner'; + +import {Checkbox} from '@workday/canvas-kit-react/checkbox'; +import {RadioGroup} from '@workday/canvas-kit-preview-react/radio'; +import {createStyles} from '@workday/canvas-kit-styling'; +import {AriaLiveRegion} from '@workday/canvas-kit-react/common'; + +const formStyles = createStyles({ + margin: `${system.space.zero} ${system.space.x3}`, +}); + +const formButtonStyles = createStyles({ + display: 'inline-flex', + gap: system.space.x2, +}); + +const toppings = [ + { + id: 1, + label: 'Pepperoni', + checked: false, + }, + { + id: 2, + label: 'Cheese', + checked: false, + }, + { + id: 3, + label: 'Pineapple', + checked: false, + }, + { + id: 4, + label: 'Mushrooms', + checked: false, + }, +]; + +const bannerStyles = createStyles({ + position: 'absolute', + right: 0, +}); + +export const GroupedInputs = () => { + const [toppingsState, setToppingsState] = React.useState(toppings); + const [error, setError] = React.useState(undefined); + const [radioError, setRadioError] = React.useState(undefined); + const [showSuccess, setShowSuccess] = React.useState(false); + + const [value, setValue] = React.useState(''); + const [formData, setFormData] = React.useState({ + toppings: [], + crust: '', + }); + const handleCheckboxCheck = id => { + if (error) { + setError(undefined); + } + setToppingsState( + toppingsState.map(item => (item.id === id ? {...item, checked: !item.checked} : item)) + ); + }; + + const handleRadioChange = (e: React.ChangeEvent) => { + if (radioError) { + setRadioError(undefined); + } + const target = e.currentTarget; + if (target instanceof HTMLInputElement) { + setValue(target.value); + } + }; + + const handleSubmit = e => { + e.preventDefault(); + const radioError = !value && toppingsState.some(item => !item.checked) ? 'error' : undefined; + const error = toppingsState.every(item => !item.checked) ? 'error' : undefined; + + setRadioError(radioError); + setError(error); + if (!error && !radioError && toppingsState.some(item => item.checked) && value) { + setShowSuccess(true); + } + setFormData({ + toppings: toppingsState, + crust: value, + }); + }; + + React.useEffect(() => { + const timeout = setTimeout(() => { + if (showSuccess) { + setShowSuccess(false); + } + }, 3000); + + return () => clearTimeout(timeout); + }, [showSuccess]); + + const handleReset = () => { + setFormData({toppings: [], crust: ''}); + setError(undefined); + setValue(''); + setRadioError(''); + setShowSuccess(false); + setToppingsState( + toppingsState.map(item => { + return {...item, checked: false}; + }) + ); + }; + + return ( +
+

Choose your pizza options

+ +
+ {error || radioError ? ( + + + {error && radioError + ? 'At least one topping and crust selection is required' + : error + ? 'You must choose at least one topping' + : radioError + ? 'You must choose a crust' + : ''} + + + ) : null} + {showSuccess && ( + + You've successfully submitted your pizza options. + + )} +
+ + +
+ + Choose Your Toppings + + {toppingsState.map(item => { + return ( + handleCheckboxCheck(item.id)} + checked={item.checked} + value={item.label} + as={Checkbox} + disabled={item.label === 'Pineapple' ? true : undefined} + label={item.label} + /> + ); + })} + + + {error === 'error' && 'You must choose one topping'} + + + + Choose Your Crust + + + + Thin Crust + + + Hand Tossed + + + Deep Dish + + + Cauliflower + + + + {radioError === 'error' ? 'You must choose a crust' : null} + + + +
+ Submit Your Choices + handleReset()}>Reset Form +
+
+
+
+ Selected Toppings:{' '} + {!error && formData.toppings.map(item => (item.checked ? `${item.label} ` : null))} +
+
Selected Crust: {formData.crust}
+
+
+ ); +}; diff --git a/modules/preview-react/form-field/stories/examples/Hint.tsx b/modules/preview-react/form-field/stories/examples/Hint.tsx index 013b64e9db..1e795d2537 100644 --- a/modules/preview-react/form-field/stories/examples/Hint.tsx +++ b/modules/preview-react/form-field/stories/examples/Hint.tsx @@ -15,10 +15,10 @@ export const Hint = () => { First Name - + Cannot contain numbers - + ); diff --git a/modules/preview-react/form-field/stories/examples/RefForwarding.tsx b/modules/preview-react/form-field/stories/examples/RefForwarding.tsx index e8be6a685f..6702cf3277 100644 --- a/modules/preview-react/form-field/stories/examples/RefForwarding.tsx +++ b/modules/preview-react/form-field/stories/examples/RefForwarding.tsx @@ -29,7 +29,9 @@ export const RefForwarding = () => { Email - + + + Focus Text Input diff --git a/modules/preview-react/form-field/stories/examples/Required.tsx b/modules/preview-react/form-field/stories/examples/Required.tsx index 7241147906..1d892cc31b 100644 --- a/modules/preview-react/form-field/stories/examples/Required.tsx +++ b/modules/preview-react/form-field/stories/examples/Required.tsx @@ -12,12 +12,14 @@ export const Required = () => { return ( Email - + + + ); }; diff --git a/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx b/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx index 5a4ecc0ef4..dc06f7baee 100644 --- a/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx +++ b/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx @@ -34,10 +34,12 @@ export const ThemedError = () => { Email - - - {!value && 'Please enter an email.'} - + + + + {!value && 'Please enter an email.'} + + ); diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json index 29a31f4efe..0e4054bbd0 100644 --- a/modules/preview-react/package.json +++ b/modules/preview-react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-preview-react", - "version": "11.1.10", + "version": "11.1.13", "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -46,8 +46,8 @@ "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@workday/canvas-kit-react": "^11.1.10", - "@workday/canvas-kit-styling": "^11.1.10", + "@workday/canvas-kit-react": "^11.1.13", + "@workday/canvas-kit-styling": "^11.1.13", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "@workday/design-assets-types": "^0.2.8" diff --git a/modules/preview-react/radio/lib/RadioGroup.tsx b/modules/preview-react/radio/lib/RadioGroup.tsx index a8f327e669..f1158cda92 100644 --- a/modules/preview-react/radio/lib/RadioGroup.tsx +++ b/modules/preview-react/radio/lib/RadioGroup.tsx @@ -24,7 +24,7 @@ const radioGroupStencil = createStencil({ borderRadius: system.shape.x1, gap: system.space.x2, padding: `${px2rem(10)} ${system.space.x3} ${system.space.x2}`, - margin: `${calc.negate(system.space.x1)} ${calc.negate(system.space.x3)}`, + margin: `0 ${calc.negate(system.space.x3)}`, transition: '100ms box-shadow', width: 'fit-content', }, diff --git a/modules/preview-react/radio/stories/examples/Alert.tsx b/modules/preview-react/radio/stories/examples/Alert.tsx index 5421a8beda..c9ec3b98ff 100644 --- a/modules/preview-react/radio/stories/examples/Alert.tsx +++ b/modules/preview-react/radio/stories/examples/Alert.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; import {RadioGroup} from '@workday/canvas-kit-preview-react/radio'; export const Alert = () => { @@ -13,15 +13,30 @@ export const Alert = () => { }; return ( - - Choose Your Pizza Crust - - Deep dish - Thin - Gluten free - Cauliflower - - Deep dish is an extra $2.99. - + + Choose Your Pizza Crust + + + + Deep dish + + + Thin + + + Gluten free + + + Cauliflower + + + Deep dish is an extra $2.99. + + ); }; diff --git a/modules/preview-react/radio/stories/examples/Basic.tsx b/modules/preview-react/radio/stories/examples/Basic.tsx index 7082faa43a..8f40af7dce 100644 --- a/modules/preview-react/radio/stories/examples/Basic.tsx +++ b/modules/preview-react/radio/stories/examples/Basic.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; import {RadioGroup} from '@workday/canvas-kit-preview-react/radio'; import {Flex} from '@workday/canvas-kit-react/layout'; import {createStyles, px2rem} from '@workday/canvas-kit-styling'; @@ -20,24 +20,34 @@ export const Basic = () => { return ( - - Choose Your Pizza Crust - - Deep dish - Thin - Gluten free - Cauliflower - - Butter - the best thing to put on bread - - - + + Choose Your Pizza Crust + + + + Deep dish + + + Thin + + + Gluten free + + + Cauliflower + + + Butter - the best thing to put on bread + + + + Value selected: {value} ); diff --git a/modules/preview-react/radio/stories/examples/Custom.tsx b/modules/preview-react/radio/stories/examples/Custom.tsx index 7910f9e901..0e16d70e62 100644 --- a/modules/preview-react/radio/stories/examples/Custom.tsx +++ b/modules/preview-react/radio/stories/examples/Custom.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; import {RadioGroup} from '@workday/canvas-kit-preview-react/radio'; import {Flex} from '@workday/canvas-kit-react/layout'; import {createStyles, px2rem} from '@workday/canvas-kit-styling'; @@ -26,35 +26,37 @@ export const Custom = () => { return ( - - Choose Your Pizza Crust - - - - - Deep dish - - - - - - Gluten free - - - - - - Cauliflower - - - - + + Choose Your Pizza Crust + + + + + + Deep dish + + + + + + Gluten free + + + + + + Cauliflower + + + + + Value selected: {value} ); diff --git a/modules/preview-react/radio/stories/examples/Disabled.tsx b/modules/preview-react/radio/stories/examples/Disabled.tsx index dc7fe5af8b..cf4f8d93f8 100644 --- a/modules/preview-react/radio/stories/examples/Disabled.tsx +++ b/modules/preview-react/radio/stories/examples/Disabled.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; import {RadioGroup} from '@workday/canvas-kit-preview-react/radio'; export const Disabled = () => { @@ -12,16 +12,29 @@ export const Disabled = () => { } }; return ( - - Choose Your Pizza Crust - - Deep dish - Thin - - Gluten free (sold out) - - Cauliflower - - + + Choose Your Pizza Crust + + + + Deep dish + + + Thin + + + Gluten free (sold out) + + + Cauliflower + + + + ); }; diff --git a/modules/preview-react/radio/stories/examples/Error.tsx b/modules/preview-react/radio/stories/examples/Error.tsx index 2260d84a85..4386d09942 100644 --- a/modules/preview-react/radio/stories/examples/Error.tsx +++ b/modules/preview-react/radio/stories/examples/Error.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {FormField, FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; import {RadioGroup} from '@workday/canvas-kit-preview-react/radio'; export const Error = () => { @@ -13,15 +13,30 @@ export const Error = () => { }; return ( - - Choose Your Pizza Crust - - Deep dish - Thin - Gluten free - Cauliflower - - Deep dish is currently sold out. - + + Choose Your Pizza Crust + + + + Deep dish + + + Thin + + + Gluten free + + + Cauliflower + + + Deep dish is currently sold out. + + ); }; diff --git a/modules/preview-react/radio/stories/examples/Inverse.tsx b/modules/preview-react/radio/stories/examples/Inverse.tsx index 2587803a99..c4810f8ad2 100644 --- a/modules/preview-react/radio/stories/examples/Inverse.tsx +++ b/modules/preview-react/radio/stories/examples/Inverse.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {Box} from '@workday/canvas-kit-react/layout'; import {RadioGroup} from '@workday/canvas-kit-preview-react/radio'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {FormField, FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; import {createStyles} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; @@ -29,23 +29,20 @@ export const Inverse = () => { return ( - - Choose Your Pizza Crust - - - Deep dish - - - Thin - - - Gluten free - - - Cauliflower - - - + + + Deep dish + + + Thin + + + Gluten free + + + Cauliflower + + ); }; diff --git a/modules/preview-react/radio/stories/examples/LabelPosition.tsx b/modules/preview-react/radio/stories/examples/LabelPosition.tsx index 4de7943df4..a9bc23d212 100644 --- a/modules/preview-react/radio/stories/examples/LabelPosition.tsx +++ b/modules/preview-react/radio/stories/examples/LabelPosition.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {FormField, FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; import {RadioGroup} from '@workday/canvas-kit-preview-react/radio'; export const LabelPosition = () => { @@ -12,14 +12,29 @@ export const LabelPosition = () => { } }; return ( - - Choose Your Pizza Crust - - Deep dish - Thin - Gluten free - Cauliflower - - + + Choose Your Pizza Crust + + + + Deep dish + + + Thin + + + Gluten free + + + Cauliflower + + + + ); }; diff --git a/modules/preview-react/radio/stories/examples/NoValue.tsx b/modules/preview-react/radio/stories/examples/NoValue.tsx index 3e6aa54bf2..55b38d2708 100644 --- a/modules/preview-react/radio/stories/examples/NoValue.tsx +++ b/modules/preview-react/radio/stories/examples/NoValue.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; import {RadioGroup} from '@workday/canvas-kit-preview-react/radio'; export const NoValue = () => { @@ -12,14 +12,27 @@ export const NoValue = () => { } }; return ( - - Choose Your Pizza Crust - - Deep dish - Thin - Gluten free - Cauliflower - - + + Choose Your Pizza Crust + + + Deep dish + + + Thin + + + Gluten free + + + Cauliflower + + + ); }; diff --git a/modules/preview-react/radio/stories/examples/RefForwarding.tsx b/modules/preview-react/radio/stories/examples/RefForwarding.tsx index 645134fcfc..d487e40fde 100644 --- a/modules/preview-react/radio/stories/examples/RefForwarding.tsx +++ b/modules/preview-react/radio/stories/examples/RefForwarding.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; import {RadioGroup} from '@workday/canvas-kit-preview-react/radio'; export const RefForwarding = () => { @@ -20,17 +20,23 @@ export const RefForwarding = () => { return ( <> - - Choose Your Pizza Crust - - Deep dish - Thin - + + Choose Your Pizza Crust + + + Deep dish + + + Thin + + Gluten free - - Cauliflower - - + + + Cauliflower + + + Select Gluten Free ); diff --git a/modules/preview-react/radio/stories/examples/Required.tsx b/modules/preview-react/radio/stories/examples/Required.tsx index 075b7f8434..77ce0d71d4 100644 --- a/modules/preview-react/radio/stories/examples/Required.tsx +++ b/modules/preview-react/radio/stories/examples/Required.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; import {RadioGroup} from '@workday/canvas-kit-preview-react/radio'; export const Required = () => { @@ -12,21 +12,29 @@ export const Required = () => { } }; return ( - - Choose Your Pizza Crust - + Choose Your Pizza Crust + - Deep dish - Thin - Gluten free - Cauliflower - - You must choose a crust - + + Deep dish + + + Thin + + + Gluten free + + + Cauliflower + + + You must choose a crust + ); }; diff --git a/modules/preview-react/radio/stories/examples/StandaloneRadio.tsx b/modules/preview-react/radio/stories/examples/StandaloneRadio.tsx index 45623b09b6..e1e1709d0e 100644 --- a/modules/preview-react/radio/stories/examples/StandaloneRadio.tsx +++ b/modules/preview-react/radio/stories/examples/StandaloneRadio.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; import {StyledRadioButton} from '@workday/canvas-kit-preview-react/radio'; import {Flex} from '@workday/canvas-kit-react/layout'; @@ -15,11 +15,11 @@ export const StandaloneRadio = () => { return ( - - Choose Your Pizza Crust + + Choose Your Pizza Crust - { Deep dish - { Gluten free - + Value selected: {value} ); diff --git a/modules/preview-react/radio/stories/testing.stories.tsx b/modules/preview-react/radio/stories/testing.stories.tsx index 1736e8e9e4..bc26d7e6ad 100644 --- a/modules/preview-react/radio/stories/testing.stories.tsx +++ b/modules/preview-react/radio/stories/testing.stories.tsx @@ -6,7 +6,7 @@ import { permutateProps, } from '@workday/canvas-kit-react/testing'; import {customColorTheme} from '../../../../utils/storybook'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {FormFieldGroup} from '@workday/canvas-kit-preview-react/form-field'; import {RadioGroup} from '@workday/canvas-kit-preview-react/radio'; const hintText = 'Helpful text goes here.'; @@ -23,20 +23,20 @@ export default { }; const testGroup = ( - - + + Email - - + + Phone - - + + Fax (disabled) - - + + "Mail (US Postal Service aka USPS), a longer than normal label" - - + + ); export const RadioStates = { @@ -108,20 +108,15 @@ export const RadioStates = { ]} > {props => ( - - {props.label} - + + {props.label} + {testGroup} - + {typeof props.error !== 'undefined' ? hintText : undefined} - - - + + + )} @@ -143,43 +138,38 @@ export const RadioStates = { ]} > {props => ( - - {props.label} - + + {props.label} + {testGroup} - + {typeof props.error !== 'undefined' ? hintText : undefined} - - - + + + )}

RadioGroup (wrapping)

- - + + Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. - - {testGroup} - - - + + {testGroup} + + + Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. - - {testGroup} - + + {testGroup} +
); diff --git a/modules/react-fonts/package.json b/modules/react-fonts/package.json index 6327c5f8ee..ba59737220 100644 --- a/modules/react-fonts/package.json +++ b/modules/react-fonts/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-react-fonts", - "version": "11.1.10", + "version": "11.1.13", "description": "Fonts for canvas-kit-react", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/react/action-bar/stories/examples/Basic.tsx b/modules/react/action-bar/stories/examples/Basic.tsx index cd73c03a2d..f7c06b2e6d 100644 --- a/modules/react/action-bar/stories/examples/Basic.tsx +++ b/modules/react/action-bar/stories/examples/Basic.tsx @@ -2,13 +2,15 @@ import React from 'react'; import {ActionBar} from '@workday/canvas-kit-react/action-bar'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; -export const Basic = () => ( - - - console.log('first action')}> - First Action - - Second Action - - -); +export const Basic = () => { + return ( + + + console.log('first action')}> + First Action + + Second Action + + + ); +}; diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx index 39785ec952..491893aeed 100644 --- a/modules/react/avatar/lib/Avatar.tsx +++ b/modules/react/avatar/lib/Avatar.tsx @@ -83,14 +83,14 @@ export const avatarStencil = createStencil({ ':is(button)': { cursor: 'pointer', }, - ['& > [data-slot="avatar-icon"]']: { + ['& > [data-part="avatar-icon"]']: { transition: 'opacity 150ms linear', display: 'flex', alignItems: 'center', justifyContent: 'center', [systemIconStencil.vars.size]: calc.multiply(size, 0.625), }, - ['& > [data-slot="avatar-image"]']: { + ['& > [data-part="avatar-image"]']: { position: 'absolute', width: '100%', height: '100%', @@ -102,13 +102,13 @@ export const avatarStencil = createStencil({ variant: { light: { backgroundColor: system.color.bg.alt.default, - ['& [data-slot="avatar-icon"]']: { + ['& [data-part="avatar-icon"]']: { [systemIconStencil.vars.color]: system.color.fg.default, }, }, dark: { backgroundColor: system.color.bg.primary.default, - ['& [data-slot="avatar-icon"]']: { + ['& [data-part="avatar-icon"]']: { [systemIconStencil.vars.color]: system.color.fg.inverse, }, }, @@ -117,112 +117,112 @@ export const avatarStencil = createStencil({ extraSmall: { width: system.space.x4, height: system.space.x4, - ['& [data-slot="avatar-icon"]']: { + ['& [data-part="avatar-icon"]']: { [systemIconStencil.vars.size]: calc.multiply(system.space.x4, 0.625), }, }, small: { width: system.space.x6, height: system.space.x6, - ['& [data-slot="avatar-icon"]']: { + ['& [data-part="avatar-icon"]']: { [systemIconStencil.vars.size]: calc.multiply(system.space.x6, 0.625), }, }, medium: { width: system.space.x8, height: system.space.x8, - ['& [data-slot="avatar-icon"]']: { + ['& [data-part="avatar-icon"]']: { [systemIconStencil.vars.size]: calc.multiply(system.space.x8, 0.625), }, }, large: { width: system.space.x10, height: system.space.x10, - ['& [data-slot="avatar-icon"]']: { + ['& [data-part="avatar-icon"]']: { [systemIconStencil.vars.size]: calc.multiply(system.space.x10, 0.625), }, }, extraLarge: { width: system.space.x16, height: system.space.x16, - ['& [data-slot="avatar-icon"]']: { + ['& [data-part="avatar-icon"]']: { [systemIconStencil.vars.size]: calc.multiply(system.space.x16, 0.625), }, }, extraExtraLarge: { width: calc.multiply(system.space.x10, 3), height: calc.multiply(system.space.x10, 3), - ['& [data-slot="avatar-icon"]']: { + ['& [data-part="avatar-icon"]']: { [systemIconStencil.vars.size]: calc.multiply(calc.multiply(system.space.x10, 3), 0.625), }, }, }, objectFit: { contain: { - ['& [data-slot="avatar-image"]']: { + ['& [data-part="avatar-image"]']: { objectFit: 'contain', }, }, fill: { - ['& [data-slot="avatar-image"]']: { + ['& [data-part="avatar-image"]']: { objectFit: 'fill', }, }, cover: { - ['& [data-slot="avatar-image"]']: { + ['& [data-part="avatar-image"]']: { objectFit: 'cover', }, }, ['scale-down']: { - ['& [data-slot="avatar-image"]']: { + ['& [data-part="avatar-image"]']: { objectFit: 'scale-down', }, }, none: { - ['& [data-slot="avatar-image"]']: { + ['& [data-part="avatar-image"]']: { objectFit: 'none', }, }, ['-moz-initial']: { - ['& [data-slot="avatar-image"]']: { + ['& [data-part="avatar-image"]']: { objectFit: '-moz-initial', }, }, ['initial']: { - ['& [data-slot="avatar-image"]']: { + ['& [data-part="avatar-image"]']: { objectFit: 'initial', }, }, ['inherit']: { - ['& [data-slot="avatar-image"]']: { + ['& [data-part="avatar-image"]']: { objectFit: 'inherit', }, }, ['revert']: { - ['& [data-slot="avatar-image"]']: { + ['& [data-part="avatar-image"]']: { objectFit: 'revert', }, }, ['unset']: { - ['& [data-slot="avatar-image"]']: { + ['& [data-part="avatar-image"]']: { objectFit: 'unset', }, }, }, isImageLoaded: { true: { - ['& [data-slot="avatar-icon"]']: { + ['& [data-part="avatar-icon"]']: { opacity: 0, }, - ['& [data-slot="avatar-image"]']: { + ['& [data-part="avatar-image"]']: { opacity: 1, }, }, false: { - ['& [data-slot="avatar-icon"]']: { + ['& [data-part="avatar-icon"]']: { opacity: 1, }, - ['& [data-slot="avatar-image"]']: { + ['& [data-part="avatar-image"]']: { opacity: 0, }, }, @@ -256,7 +256,7 @@ export const Avatar = createComponent('button')({ }, [url]); // TODO: Remove this warning for a hard breaking change in v13 - if (process && process.env.NODE_ENV === 'development') { + if (process.env.NODE_ENV === 'development') { if (typeof variant === 'number') { console.warn( 'Avatar: Avatar.Variant is deprecated and will be removed in v13. Please use a string literal of "light" or "dark"' @@ -287,8 +287,8 @@ export const Avatar = createComponent('button')({ }), ])} > - - {url && {altText}} + + {url && {altText}} ); }, diff --git a/modules/react/avatar/spec/Avatar.spec.tsx b/modules/react/avatar/spec/Avatar.spec.tsx index 4195453d5b..ba557d9386 100644 --- a/modules/react/avatar/spec/Avatar.spec.tsx +++ b/modules/react/avatar/spec/Avatar.spec.tsx @@ -61,7 +61,7 @@ describe('Avatar', () => { const customGreenAvatarStencil = createStencil({ base: { backgroundColor: base.watermelon400, - ['[data-slot="avatar-icon"]']: { + ['[data-part="avatar-icon"]']: { [systemIconStencil.vars.color]: base.watermelon100, }, }, @@ -73,7 +73,7 @@ describe('Avatar', () => { it('should set the object fit of the image when objectFit prop is specified', () => { const {container} = render(); - expect(container.querySelector('[data-slot="avatar-image"]')).toHaveStyle('object-fit: cover'); + expect(container.querySelector('[data-part="avatar-image"]')).toHaveStyle('object-fit: cover'); }); it('should hide the icon when the image is loaded', () => { diff --git a/modules/react/avatar/stories/avatar/examples/CustomStyles.tsx b/modules/react/avatar/stories/avatar/examples/CustomStyles.tsx index 59c72837dd..485b476cdd 100644 --- a/modules/react/avatar/stories/avatar/examples/CustomStyles.tsx +++ b/modules/react/avatar/stories/avatar/examples/CustomStyles.tsx @@ -7,7 +7,7 @@ import {systemIconStencil} from '../../../../icon'; const customBlueAvatarStencil = createStencil({ base: { backgroundColor: base.berrySmoothie400, - ['[data-slot="avatar-icon"]']: { + ['[data-part="avatar-icon"]']: { [systemIconStencil.vars.color]: base.berrySmoothie100, }, }, @@ -16,7 +16,7 @@ const customBlueAvatarStencil = createStencil({ const customGreenAvatarStencil = createStencil({ base: { backgroundColor: base.watermelon400, - ['[data-slot="avatar-icon"]']: { + ['[data-part="avatar-icon"]']: { [systemIconStencil.vars.color]: base.watermelon100, }, }, diff --git a/modules/react/checkbox/stories/examples/Alert.tsx b/modules/react/checkbox/stories/examples/Alert.tsx index d1722a16c8..7c69d9d258 100644 --- a/modules/react/checkbox/stories/examples/Alert.tsx +++ b/modules/react/checkbox/stories/examples/Alert.tsx @@ -10,8 +10,9 @@ export const Alert = () => { }; return ( - - + + Confirm + { onChange={handleChange} /> You must agree to the terms before proceeding - + ); }; diff --git a/modules/react/checkbox/stories/examples/Basic.tsx b/modules/react/checkbox/stories/examples/Basic.tsx index c0f2136e39..0e4bb54e03 100644 --- a/modules/react/checkbox/stories/examples/Basic.tsx +++ b/modules/react/checkbox/stories/examples/Basic.tsx @@ -1,5 +1,6 @@ import React from 'react'; import {Checkbox} from '@workday/canvas-kit-react/checkbox'; +import {FormField} from '@workday/canvas-kit-preview-react/form-field'; export const Basic = () => { const [checked, setChecked] = React.useState(false); @@ -8,5 +9,17 @@ export const Basic = () => { setChecked(event.target.checked); }; - return ; + return ( + + Confirm + + + + + ); }; diff --git a/modules/react/checkbox/stories/examples/Disabled.tsx b/modules/react/checkbox/stories/examples/Disabled.tsx index db99e4e967..ea1af1c7f2 100644 --- a/modules/react/checkbox/stories/examples/Disabled.tsx +++ b/modules/react/checkbox/stories/examples/Disabled.tsx @@ -1,5 +1,6 @@ import React from 'react'; import {Checkbox} from '@workday/canvas-kit-react/checkbox'; +import {FormField} from '@workday/canvas-kit-preview-react/form-field'; export const Disabled = () => { const [checked, setChecked] = React.useState(false); @@ -9,11 +10,17 @@ export const Disabled = () => { }; return ( - + + Confirm + + + + ); }; diff --git a/modules/react/checkbox/stories/examples/Error.tsx b/modules/react/checkbox/stories/examples/Error.tsx index 5b5d26a509..8755c74cf8 100644 --- a/modules/react/checkbox/stories/examples/Error.tsx +++ b/modules/react/checkbox/stories/examples/Error.tsx @@ -10,8 +10,9 @@ export const Error = () => { }; return ( - - + + Confirm + { onChange={handleChange} /> You must agree to the terms before proceeding - + ); }; diff --git a/modules/react/checkbox/stories/examples/Inverse.tsx b/modules/react/checkbox/stories/examples/Inverse.tsx index 33c29d4261..bcb69c19b2 100644 --- a/modules/react/checkbox/stories/examples/Inverse.tsx +++ b/modules/react/checkbox/stories/examples/Inverse.tsx @@ -5,7 +5,6 @@ import {createStyles} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; const styleOverrides = createStyles({ - gap: system.space.x4, backgroundColor: system.color.bg.primary.default, padding: system.space.x4, }); diff --git a/modules/react/checkbox/stories/examples/LabelPosition.tsx b/modules/react/checkbox/stories/examples/LabelPosition.tsx index be723fb410..95ea13438a 100644 --- a/modules/react/checkbox/stories/examples/LabelPosition.tsx +++ b/modules/react/checkbox/stories/examples/LabelPosition.tsx @@ -11,13 +11,15 @@ export const LabelPosition = () => { return ( - Terms - + Confirm + + + ); }; diff --git a/modules/react/checkbox/stories/examples/RefForwarding.tsx b/modules/react/checkbox/stories/examples/RefForwarding.tsx index 650cb6b27f..914b60bfc5 100644 --- a/modules/react/checkbox/stories/examples/RefForwarding.tsx +++ b/modules/react/checkbox/stories/examples/RefForwarding.tsx @@ -2,6 +2,14 @@ import React from 'react'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; import {Checkbox} from '@workday/canvas-kit-react/checkbox'; import {Box} from '@workday/canvas-kit-react/layout'; +import {system} from '@workday/canvas-tokens-web'; +import {createStyles, px2rem} from '@workday/canvas-kit-styling'; +import {FormField} from '@workday/canvas-kit-preview-react/form-field'; + +const boxStyles = createStyles({ + display: 'flex', + flexDirection: 'column', +}); export const RefForwarding = () => { const [checked, setChecked] = React.useState(false); @@ -17,13 +25,19 @@ export const RefForwarding = () => { return ( <> - - + + + Confirm + + + + Check Agreement to Terms diff --git a/modules/react/checkbox/stories/examples/Required.tsx b/modules/react/checkbox/stories/examples/Required.tsx index c81a3929d7..d50d7eead8 100644 --- a/modules/react/checkbox/stories/examples/Required.tsx +++ b/modules/react/checkbox/stories/examples/Required.tsx @@ -11,13 +11,15 @@ export const Required = () => { return ( - Terms - + Confirm + + + ); }; diff --git a/modules/react/color-picker/stories/color-input/examples/Alert.tsx b/modules/react/color-picker/stories/color-input/examples/Alert.tsx index e367d2b9f8..d6d0910fbf 100644 --- a/modules/react/color-picker/stories/color-input/examples/Alert.tsx +++ b/modules/react/color-picker/stories/color-input/examples/Alert.tsx @@ -12,8 +12,10 @@ export const Alert = () => { return ( Background Color - - Please select a background color. + + + Please select a background color. + ); }; diff --git a/modules/react/color-picker/stories/color-input/examples/Basic.tsx b/modules/react/color-picker/stories/color-input/examples/Basic.tsx index d7d3935702..a80dca86e4 100644 --- a/modules/react/color-picker/stories/color-input/examples/Basic.tsx +++ b/modules/react/color-picker/stories/color-input/examples/Basic.tsx @@ -12,7 +12,9 @@ export const Basic = () => { return ( Background Color - + + + ); }; diff --git a/modules/react/color-picker/stories/color-input/examples/Checked.tsx b/modules/react/color-picker/stories/color-input/examples/Checked.tsx index 571400360e..adec6c7ca4 100644 --- a/modules/react/color-picker/stories/color-input/examples/Checked.tsx +++ b/modules/react/color-picker/stories/color-input/examples/Checked.tsx @@ -12,7 +12,9 @@ export const Checked = () => { return ( Background Color - + + + ); }; diff --git a/modules/react/color-picker/stories/color-input/examples/Disabled.tsx b/modules/react/color-picker/stories/color-input/examples/Disabled.tsx index 7bd3bec589..54696c327a 100644 --- a/modules/react/color-picker/stories/color-input/examples/Disabled.tsx +++ b/modules/react/color-picker/stories/color-input/examples/Disabled.tsx @@ -12,7 +12,9 @@ export const Disabled = () => { return ( Background Color - + + + ); }; diff --git a/modules/react/color-picker/stories/color-input/examples/Error.tsx b/modules/react/color-picker/stories/color-input/examples/Error.tsx index fe5a8c2dbd..14177309b9 100644 --- a/modules/react/color-picker/stories/color-input/examples/Error.tsx +++ b/modules/react/color-picker/stories/color-input/examples/Error.tsx @@ -12,8 +12,10 @@ export const Error = () => { return ( Background Color - - Please select a background color. + + + Please select a background color. + ); }; diff --git a/modules/react/color-picker/stories/color-input/examples/Grow.tsx b/modules/react/color-picker/stories/color-input/examples/Grow.tsx index 3698816035..0a8e153203 100644 --- a/modules/react/color-picker/stories/color-input/examples/Grow.tsx +++ b/modules/react/color-picker/stories/color-input/examples/Grow.tsx @@ -12,7 +12,14 @@ export const Grow = () => { return ( Background Color - + + + ); }; diff --git a/modules/react/color-picker/stories/color-input/examples/LabelPosition.tsx b/modules/react/color-picker/stories/color-input/examples/LabelPosition.tsx index 1c252e460d..4060f5bd2b 100644 --- a/modules/react/color-picker/stories/color-input/examples/LabelPosition.tsx +++ b/modules/react/color-picker/stories/color-input/examples/LabelPosition.tsx @@ -12,7 +12,9 @@ export const LabelPosition = () => { return ( Background Color - + + + ); }; diff --git a/modules/react/color-picker/stories/color-input/examples/RefForwarding.tsx b/modules/react/color-picker/stories/color-input/examples/RefForwarding.tsx index c7ac7b4f34..6a128678ce 100644 --- a/modules/react/color-picker/stories/color-input/examples/RefForwarding.tsx +++ b/modules/react/color-picker/stories/color-input/examples/RefForwarding.tsx @@ -19,7 +19,9 @@ export const RefForwarding = () => { <> Background Color - + + + Focus Color Input diff --git a/modules/react/color-picker/stories/color-input/examples/Required.tsx b/modules/react/color-picker/stories/color-input/examples/Required.tsx index 65bc7ad3a8..d25a76af92 100644 --- a/modules/react/color-picker/stories/color-input/examples/Required.tsx +++ b/modules/react/color-picker/stories/color-input/examples/Required.tsx @@ -12,7 +12,9 @@ export const Required = () => { return ( Background Color - + + + ); }; diff --git a/modules/react/color-picker/stories/color-input/examples/ValidColorChange.tsx b/modules/react/color-picker/stories/color-input/examples/ValidColorChange.tsx index e109e023d6..9580763b62 100644 --- a/modules/react/color-picker/stories/color-input/examples/ValidColorChange.tsx +++ b/modules/react/color-picker/stories/color-input/examples/ValidColorChange.tsx @@ -19,12 +19,14 @@ export const ValidColorChange = () => { <> Background Color - + + +

Last valid color: {validColor}

diff --git a/modules/react/color-picker/stories/color-preview/examples/Basic.tsx b/modules/react/color-picker/stories/color-preview/examples/Basic.tsx index 666f3d6d25..da371b6ee0 100644 --- a/modules/react/color-picker/stories/color-preview/examples/Basic.tsx +++ b/modules/react/color-picker/stories/color-preview/examples/Basic.tsx @@ -6,7 +6,9 @@ export const Basic = () => { return ( Current Color - + + + ); }; diff --git a/modules/react/color-picker/stories/color-preview/examples/LabelPosition.tsx b/modules/react/color-picker/stories/color-preview/examples/LabelPosition.tsx index 4cc0cb029e..ad5bb6a81f 100644 --- a/modules/react/color-picker/stories/color-preview/examples/LabelPosition.tsx +++ b/modules/react/color-picker/stories/color-preview/examples/LabelPosition.tsx @@ -6,7 +6,9 @@ export const LabelPosition = () => { return ( Background Color - + + + ); }; diff --git a/modules/react/color-picker/stories/color-preview/examples/RefForwarding.tsx b/modules/react/color-picker/stories/color-preview/examples/RefForwarding.tsx index 2d098dcd71..aab99a491f 100644 --- a/modules/react/color-picker/stories/color-preview/examples/RefForwarding.tsx +++ b/modules/react/color-picker/stories/color-preview/examples/RefForwarding.tsx @@ -16,7 +16,9 @@ export const RefForwarding = () => { <> Background Color - + + +

Width of Color Preview: {width}

Calculate Width of Color Preview diff --git a/modules/react/combobox/stories/examples/Autocomplete.tsx b/modules/react/combobox/stories/examples/Autocomplete.tsx index 2ee55d247b..368b8d474b 100644 --- a/modules/react/combobox/stories/examples/Autocomplete.tsx +++ b/modules/react/combobox/stories/examples/Autocomplete.tsx @@ -107,34 +107,36 @@ export const Autocomplete = () => { return ( Fruit - console.log('input', event.currentTarget.value)}> - - - - - - - - - - - - {model.state.items.length === 0 && ( - No Results Found - )} - {model.state.items.length > 0 && ( - - {item => {item}} - - )} - - - + + console.log('input', event.currentTarget.value)}> + + + + + + + + + + + + {model.state.items.length === 0 && ( + No Results Found + )} + {model.state.items.length > 0 && ( + + {item => {item}} + + )} + + + + ); }; diff --git a/modules/react/common/lib/theming/useTheme.ts b/modules/react/common/lib/theming/useTheme.ts index 732bff5299..b9b4a0e83b 100644 --- a/modules/react/common/lib/theming/useTheme.ts +++ b/modules/react/common/lib/theming/useTheme.ts @@ -98,7 +98,7 @@ export function useTheme(theme?: PartialEmotionCanvasTheme): EmotionCanvasTheme return getFilledTheme(contextTheme); } } catch (e) { - if (process && process.env.NODE_ENV === 'development') { + if (process.env.NODE_ENV === 'development') { console.warn( 'useTheme: Context not supported or invalid. Please consider using `getTheme` function instead for `styled` or class components.' ); diff --git a/modules/react/form-field/stories/visual-testing/ColorInput.stories.tsx b/modules/react/form-field/stories/visual-testing/ColorInput.stories.tsx index 8e5446be28..10db4b50d2 100644 --- a/modules/react/form-field/stories/visual-testing/ColorInput.stories.tsx +++ b/modules/react/form-field/stories/visual-testing/ColorInput.stories.tsx @@ -79,7 +79,9 @@ export const ColorInputStates = { > {props => ( - + + + )} diff --git a/modules/react/form-field/stories/visual-testing/Radio.stories.tsx b/modules/react/form-field/stories/visual-testing/Radio.stories.tsx index d2cca6c537..bc5396d53a 100644 --- a/modules/react/form-field/stories/visual-testing/Radio.stories.tsx +++ b/modules/react/form-field/stories/visual-testing/Radio.stories.tsx @@ -103,10 +103,10 @@ export const RadioStates = { {props.label} {props.orientation === 'horizontalStart' ? ( - + {testGroup} {props.error && hintText} - + ) : ( <> {testGroup} @@ -139,9 +139,9 @@ export const RadioStates = { {props.label} {testGroup} {props.orientation === 'horizontalStart' && ( - + {testGroup} {props.error && hintText} - + )} {props.error && hintText} @@ -156,7 +156,7 @@ export const RadioStates = { Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. - {testGroup} + {testGroup} @@ -167,7 +167,7 @@ export const RadioStates = { Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. - {testGroup} + {testGroup} diff --git a/modules/react/icon/lib/SystemIcon.tsx b/modules/react/icon/lib/SystemIcon.tsx index 8d7f879d0b..5dba600b74 100644 --- a/modules/react/icon/lib/SystemIcon.tsx +++ b/modules/react/icon/lib/SystemIcon.tsx @@ -152,10 +152,10 @@ export const systemIconStencil = createStencil({ */ color: '', accentColor: '', - backgroundColor: 'transparent', + backgroundColor: '', }, base: ({accentColor, backgroundColor, color}) => ({ - [backgroundColor]: 'transparent', + [backgroundColor]: cssVar(backgroundColor, 'transparent'), '& .wd-icon-fill': { fill: cssVar(color, base.licorice200), }, @@ -163,7 +163,7 @@ export const systemIconStencil = createStencil({ fill: cssVar(accentColor, cssVar(color, base.licorice200)), }, '& .wd-icon-background': { - fill: backgroundColor, + fill: cssVar(backgroundColor, 'transparent'), }, // will be removed eventually '&:where(:hover, .hover) .wd-icon-fill': { @@ -182,7 +182,10 @@ export const systemIconStencil = createStencil({ ), }, '&:where(:hover, .hover) .wd-icon-background': { - fill: cssVar(deprecatedSystemIconVars.backgroundHover, backgroundColor), + fill: cssVar( + deprecatedSystemIconVars.backgroundHover, + cssVar(backgroundColor, 'transparent') + ), }, }), }); diff --git a/modules/react/package.json b/modules/react/package.json index fdecca4232..0dadc745a5 100644 --- a/modules/react/package.json +++ b/modules/react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-react", - "version": "11.1.10", + "version": "11.1.13", "description": "The parent module that contains all Workday Canvas Kit React components", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -49,8 +49,8 @@ "@emotion/styled": "^11.6.0", "@popperjs/core": "^2.5.4", "@workday/canvas-colors-web": "^2.0.0", - "@workday/canvas-kit-popup-stack": "^11.1.10", - "@workday/canvas-kit-styling": "^11.1.10", + "@workday/canvas-kit-popup-stack": "^11.1.13", + "@workday/canvas-kit-styling": "^11.1.13", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "@workday/design-assets-types": "^0.2.8", diff --git a/modules/react/popup/lib/hooks/focus-trap-js.ts b/modules/react/popup/lib/hooks/focus-trap-js.ts index 0b7da9c327..7d3c317612 100644 --- a/modules/react/popup/lib/hooks/focus-trap-js.ts +++ b/modules/react/popup/lib/hooks/focus-trap-js.ts @@ -91,7 +91,7 @@ function tabTrappingKey( } if (!parentElem || !parentElem.contains) { - if (process && process.env.NODE_ENV === 'development') { + if (process.env.NODE_ENV === 'development') { console.warn('focus-trap-js: parent element is not defined'); } return false; diff --git a/modules/react/popup/lib/hooks/useAssistiveHideSiblings.ts b/modules/react/popup/lib/hooks/useAssistiveHideSiblings.ts index f940e41ad3..7aaab19b6b 100644 --- a/modules/react/popup/lib/hooks/useAssistiveHideSiblings.ts +++ b/modules/react/popup/lib/hooks/useAssistiveHideSiblings.ts @@ -23,7 +23,7 @@ export const useAssistiveHideSiblings = createElemPropsHook(usePopupModel)(model } const siblings = [ - ...((model.state.stackRef.current?.parentElement?.children as any) as HTMLElement[]), + ...((model.state.stackRef.current?.parentElement?.children || []) as HTMLElement[]), ].filter(el => el !== model.state.stackRef.current); const prevAriaHidden = siblings.map(el => el.getAttribute('aria-hidden')); siblings.forEach(el => { diff --git a/modules/react/radio/lib/RadioGroup.tsx b/modules/react/radio/lib/RadioGroup.tsx index 62e02aec78..35ea51d5f7 100644 --- a/modules/react/radio/lib/RadioGroup.tsx +++ b/modules/react/radio/lib/RadioGroup.tsx @@ -39,7 +39,7 @@ const Container = styled('div') div': { margin: `${space.xxs} ${space.zero}`, alignItems: 'flex-start', diff --git a/modules/react/radio/stories/examples/NoValue.tsx b/modules/react/radio/stories/examples/NoValue.tsx index 4a7c6d8d40..9ad304eb7b 100644 --- a/modules/react/radio/stories/examples/NoValue.tsx +++ b/modules/react/radio/stories/examples/NoValue.tsx @@ -5,7 +5,7 @@ import {Subtext} from '@workday/canvas-kit-react/text'; import {useUniqueId} from '@workday/canvas-kit-react/common'; export const NoValue = () => { - const [value, setValue] = React.useState(0); + const [value, setValue] = React.useState(''); const handleChange = (value: string | number) => { setValue(value); diff --git a/modules/react/select/lib/Select.tsx b/modules/react/select/lib/Select.tsx index 2e3468c68d..f5213fd938 100644 --- a/modules/react/select/lib/Select.tsx +++ b/modules/react/select/lib/Select.tsx @@ -9,12 +9,7 @@ import {SystemIcon} from '@workday/canvas-kit-react/icon'; import {useSelectCard} from './hooks/useSelectCard'; import {useSelectInput} from './hooks/useSelectInput'; import {useSelectModel} from './hooks/useSelectModel'; -import { - createSubcomponent, - ExtractProps, - createContainer, - Themeable, -} from '@workday/canvas-kit-react/common'; +import {createSubcomponent, ExtractProps, createContainer} from '@workday/canvas-kit-react/common'; import {system} from '@workday/canvas-tokens-web'; export interface SelectInputProps extends ExtractProps, CSProps { @@ -86,8 +81,8 @@ export const SelectInput = createSubcomponent(TextInput)({ return ( {inputStartIcon && model.state.selectedIds.length > 0 && ( - - + + )} {/* Hidden input to handle ids */} @@ -101,6 +96,7 @@ export const SelectInput = createSubcomponent(TextInput)({ value={value} name={name} ref={ref} + data-part="select-hidden-input" {...hiddenSelectInputStencil()} /> {/* Visual input */} @@ -109,11 +105,12 @@ export const SelectInput = createSubcomponent(TextInput)({ disabled={disabled} placeholder={placeholder} error={error} + data-part="select-visual-input" {...textInputProps} {...mergeStyles(elemProps, selectInputStencil())} /> - - + + ); @@ -148,7 +145,7 @@ export const SelectCard = createSubcomponent('div')({ ); }); -export interface SelectProps extends Themeable, ExtractProps {} +export interface SelectProps extends ExtractProps {} /** * Use `Select` to allow users to choose an option from a list or type characters to select a matching option. * diff --git a/modules/react/select/stories/Select.mdx b/modules/react/select/stories/Select.mdx index 6afc5e86a0..678762be2d 100644 --- a/modules/react/select/stories/Select.mdx +++ b/modules/react/select/stories/Select.mdx @@ -21,6 +21,7 @@ import {FetchingDynamicItems} from './examples/FetchingDynamicItems'; import {Placeholder} from './examples/Placeholder'; import {InitialSelectedItem} from './examples/InitialSelectedItem'; import * as SelectStories from './Select.stories'; +import {Table} from '@workday/canvas-kit-react/table'; @@ -317,6 +318,7 @@ Select and its subcomponents support custom styling via the `cs` prop. For more our ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page). + ## Component API diff --git a/modules/react/select/stories/examples/Alert.tsx b/modules/react/select/stories/examples/Alert.tsx index b1ecd30947..20467c9974 100644 --- a/modules/react/select/stories/examples/Alert.tsx +++ b/modules/react/select/stories/examples/Alert.tsx @@ -25,18 +25,20 @@ export const Alert = () => { }; return ( - + + Contact + + + + Selected value: {value} ); diff --git a/modules/react/select/stories/examples/Basic.tsx b/modules/react/select/stories/examples/Basic.tsx index 099b70e939..228a25a662 100644 --- a/modules/react/select/stories/examples/Basic.tsx +++ b/modules/react/select/stories/examples/Basic.tsx @@ -26,21 +26,23 @@ export const Basic = () => { return ( - + + Contact + + + + Selected Value: {value} ); diff --git a/modules/react/select/stories/examples/Complex.tsx b/modules/react/select/stories/examples/Complex.tsx index 84789ebe5f..0764c04505 100644 --- a/modules/react/select/stories/examples/Complex.tsx +++ b/modules/react/select/stories/examples/Complex.tsx @@ -31,17 +31,19 @@ export const Complex = () => { return ( - + + Contact + + + +

Id: {id}

Value: {value}

 diff --git a/modules/react/select/stories/examples/Disabled.tsx b/modules/react/select/stories/examples/Disabled.tsx index 5df3c57057..c14c2d30f7 100644 --- a/modules/react/select/stories/examples/Disabled.tsx +++ b/modules/react/select/stories/examples/Disabled.tsx @@ -26,23 +26,25 @@ export const Disabled = () => { return ( - + + Contact + + + + ); }; diff --git a/modules/react/select/stories/examples/DisabledOption.tsx b/modules/react/select/stories/examples/DisabledOption.tsx index 2c4582a720..43a4c1e90a 100644 --- a/modules/react/select/stories/examples/DisabledOption.tsx +++ b/modules/react/select/stories/examples/DisabledOption.tsx @@ -26,27 +26,29 @@ export const DisabledOptions = () => { return ( - + + Contact + + + + Selected Value: {value} ); diff --git a/modules/react/select/stories/examples/Error.tsx b/modules/react/select/stories/examples/Error.tsx index 5a5678395d..db8c4a571d 100644 --- a/modules/react/select/stories/examples/Error.tsx +++ b/modules/react/select/stories/examples/Error.tsx @@ -25,24 +25,26 @@ export const Error = () => { }; return ( - + + Contact + + + + Selected Value: {value} ); diff --git a/modules/react/select/stories/examples/FetchingDynamicItems.tsx b/modules/react/select/stories/examples/FetchingDynamicItems.tsx index aa4ecf4940..5d44eacb0b 100644 --- a/modules/react/select/stories/examples/FetchingDynamicItems.tsx +++ b/modules/react/select/stories/examples/FetchingDynamicItems.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {FormField} from '@workday/canvas-kit-react/form-field'; +import {FormField} from '@workday/canvas-kit-preview-react/form-field'; import {Select, useSelectModel} from '@workday/canvas-kit-react/select'; import {Flex} from '@workday/canvas-kit-react/layout'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; @@ -75,25 +75,29 @@ export const FetchingDynamicItems = () => { return ( - + + Choose a Film + + + +
Selected Id: {id}
Selected value: {stringValue}
{ return ( - + + Contact + + + + ); }; diff --git a/modules/react/select/stories/examples/HoistedModel.tsx b/modules/react/select/stories/examples/HoistedModel.tsx index 03756dd06d..0ba9c7d5f4 100644 --- a/modules/react/select/stories/examples/HoistedModel.tsx +++ b/modules/react/select/stories/examples/HoistedModel.tsx @@ -20,17 +20,19 @@ export const HoistedModel = () => { return ( <> - + + Contact + + + + Selected Value: {model.state.selectedIds[0]} { diff --git a/modules/react/select/stories/examples/InitialSelectedItem.tsx b/modules/react/select/stories/examples/InitialSelectedItem.tsx index b9584e213d..b5c099bef0 100644 --- a/modules/react/select/stories/examples/InitialSelectedItem.tsx +++ b/modules/react/select/stories/examples/InitialSelectedItem.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {FormField} from '@workday/canvas-kit-react/form-field'; +import {FormField} from '@workday/canvas-kit-preview-react/form-field'; import {Select} from '@workday/canvas-kit-react/select'; import {Flex} from '@workday/canvas-kit-react/layout'; import {createStyles} from '@workday/canvas-kit-styling'; @@ -43,21 +43,24 @@ export const InitialSelectedItem = () => { return ( - + + Contact + + + +

Id: {id}

Value: {value}

 diff --git a/modules/react/select/stories/examples/LabelPosition.tsx b/modules/react/select/stories/examples/LabelPosition.tsx index 32640334e9..b7161ddb5c 100644 --- a/modules/react/select/stories/examples/LabelPosition.tsx +++ b/modules/react/select/stories/examples/LabelPosition.tsx @@ -19,17 +19,20 @@ export const LabelPosition = () => { return ( - + + Contact + + + + ); }; diff --git a/modules/react/select/stories/examples/MenuHeight.tsx b/modules/react/select/stories/examples/MenuHeight.tsx index 7d634fd95a..f9a37b2611 100644 --- a/modules/react/select/stories/examples/MenuHeight.tsx +++ b/modules/react/select/stories/examples/MenuHeight.tsx @@ -45,14 +45,16 @@ export const MenuHeight = () => { Choose a City - + + + ); diff --git a/modules/react/select/stories/examples/Placeholder.tsx b/modules/react/select/stories/examples/Placeholder.tsx index 0624370cf8..dd96d94442 100644 --- a/modules/react/select/stories/examples/Placeholder.tsx +++ b/modules/react/select/stories/examples/Placeholder.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {FormField} from '@workday/canvas-kit-react/form-field'; +import {FormField} from '@workday/canvas-kit-preview-react/form-field'; import {Select} from '@workday/canvas-kit-react/select'; import {Flex} from '@workday/canvas-kit-react/layout'; import {createStyles} from '@workday/canvas-kit-styling'; @@ -26,20 +26,23 @@ export const Placeholder = () => { return ( - + + Contact + + + + Selected Value: {value} ); diff --git a/modules/react/select/stories/examples/RefForwarding.tsx b/modules/react/select/stories/examples/RefForwarding.tsx index 053f2c7ab8..f22a127af0 100644 --- a/modules/react/select/stories/examples/RefForwarding.tsx +++ b/modules/react/select/stories/examples/RefForwarding.tsx @@ -31,15 +31,17 @@ export const RefForwarding = () => { return ( <> - + Contact + + + Focus Select diff --git a/modules/react/select/stories/examples/Required.tsx b/modules/react/select/stories/examples/Required.tsx index ddc12909ed..d957802e83 100644 --- a/modules/react/select/stories/examples/Required.tsx +++ b/modules/react/select/stories/examples/Required.tsx @@ -27,15 +27,17 @@ export const Required = () => { return ( - + Contact + + + Selected Value: {value} diff --git a/modules/react/select/stories/examples/WithIcons.tsx b/modules/react/select/stories/examples/WithIcons.tsx index e69aa0b0f5..84da2ac981 100644 --- a/modules/react/select/stories/examples/WithIcons.tsx +++ b/modules/react/select/stories/examples/WithIcons.tsx @@ -34,28 +34,30 @@ export const WithIcons = () => { return ( - + Contact + + + ); diff --git a/modules/react/switch/stories/examples/Alert.tsx b/modules/react/switch/stories/examples/Alert.tsx index 82a46a8767..6666fc64d1 100644 --- a/modules/react/switch/stories/examples/Alert.tsx +++ b/modules/react/switch/stories/examples/Alert.tsx @@ -12,8 +12,10 @@ export const Alert = () => { return ( Dark Mode - - We were unable to activate Dark Mode. + + + We were unable to activate Dark Mode. + ); }; diff --git a/modules/react/switch/stories/examples/Basic.tsx b/modules/react/switch/stories/examples/Basic.tsx index 6f0bb4b2f4..54aa798dd0 100644 --- a/modules/react/switch/stories/examples/Basic.tsx +++ b/modules/react/switch/stories/examples/Basic.tsx @@ -12,7 +12,9 @@ export const Basic = () => { return ( Dark Mode - + + + ); }; diff --git a/modules/react/switch/stories/examples/Disabled.tsx b/modules/react/switch/stories/examples/Disabled.tsx index 104917604a..29d7c1a5de 100644 --- a/modules/react/switch/stories/examples/Disabled.tsx +++ b/modules/react/switch/stories/examples/Disabled.tsx @@ -12,7 +12,9 @@ export const Disabled = () => { return ( Dark Mode - + + + ); }; diff --git a/modules/react/switch/stories/examples/Error.tsx b/modules/react/switch/stories/examples/Error.tsx index 7f670648ce..28ea52ba60 100644 --- a/modules/react/switch/stories/examples/Error.tsx +++ b/modules/react/switch/stories/examples/Error.tsx @@ -12,8 +12,10 @@ export const Error = () => { return ( Dark Mode - - We were unable to activate Dark Mode. + + + We were unable to activate Dark Mode. + ); }; diff --git a/modules/react/switch/stories/examples/LabelPosition.tsx b/modules/react/switch/stories/examples/LabelPosition.tsx index 381b945bc8..a8767b55bb 100644 --- a/modules/react/switch/stories/examples/LabelPosition.tsx +++ b/modules/react/switch/stories/examples/LabelPosition.tsx @@ -12,7 +12,9 @@ export const LabelPosition = () => { return ( Dark Mode - + + + ); }; diff --git a/modules/react/switch/stories/examples/RefForwarding.tsx b/modules/react/switch/stories/examples/RefForwarding.tsx index d7861d4996..fca1fe05aa 100644 --- a/modules/react/switch/stories/examples/RefForwarding.tsx +++ b/modules/react/switch/stories/examples/RefForwarding.tsx @@ -19,7 +19,9 @@ export const RefForwarding = () => { <> Dark Mode - + + + Focus Switch diff --git a/modules/react/text-area/stories/examples/Alert.tsx b/modules/react/text-area/stories/examples/Alert.tsx index 20d337a3c2..16b0361f73 100644 --- a/modules/react/text-area/stories/examples/Alert.tsx +++ b/modules/react/text-area/stories/examples/Alert.tsx @@ -12,8 +12,10 @@ export const Alert = () => { return ( Please enter your review. - - Please enter your review. + + + Please enter your review. + ); }; diff --git a/modules/react/text-area/stories/examples/Basic.tsx b/modules/react/text-area/stories/examples/Basic.tsx index 9b063e8af1..3ada9a1f16 100644 --- a/modules/react/text-area/stories/examples/Basic.tsx +++ b/modules/react/text-area/stories/examples/Basic.tsx @@ -12,7 +12,9 @@ export const Basic = () => { return ( Leave a Review - + + + ); }; diff --git a/modules/react/text-area/stories/examples/Disabled.tsx b/modules/react/text-area/stories/examples/Disabled.tsx index 5bffb0cde5..ea5c23612c 100644 --- a/modules/react/text-area/stories/examples/Disabled.tsx +++ b/modules/react/text-area/stories/examples/Disabled.tsx @@ -12,7 +12,9 @@ export const Disabled = () => { return ( Leave a Review - + + + ); }; diff --git a/modules/react/text-area/stories/examples/Error.tsx b/modules/react/text-area/stories/examples/Error.tsx index 72da7becbd..2d3e47d209 100644 --- a/modules/react/text-area/stories/examples/Error.tsx +++ b/modules/react/text-area/stories/examples/Error.tsx @@ -12,8 +12,10 @@ export const Error = () => { return ( Leave a Review - - Please enter your review. + + + Please enter your review. + ); }; diff --git a/modules/react/text-area/stories/examples/Grow.tsx b/modules/react/text-area/stories/examples/Grow.tsx index d07fd0df30..abe0a3bd1f 100644 --- a/modules/react/text-area/stories/examples/Grow.tsx +++ b/modules/react/text-area/stories/examples/Grow.tsx @@ -10,9 +10,11 @@ export const Grow = () => { }; return ( - - Leave a Review - + + Leave a Review foo + + + ); }; diff --git a/modules/react/text-area/stories/examples/LabelPosition.tsx b/modules/react/text-area/stories/examples/LabelPosition.tsx index 4d014171f9..434eb7d84c 100644 --- a/modules/react/text-area/stories/examples/LabelPosition.tsx +++ b/modules/react/text-area/stories/examples/LabelPosition.tsx @@ -12,7 +12,10 @@ export const LabelPosition = () => { return ( Leave a Review - + + + Message must be under 200 characters + ); }; diff --git a/modules/react/text-area/stories/examples/Placeholder.tsx b/modules/react/text-area/stories/examples/Placeholder.tsx index 5d212b1a04..0c3c6f7c0e 100644 --- a/modules/react/text-area/stories/examples/Placeholder.tsx +++ b/modules/react/text-area/stories/examples/Placeholder.tsx @@ -12,12 +12,14 @@ export const Placeholder = () => { return ( Leave a Review - + + + ); }; diff --git a/modules/react/text-area/stories/examples/RefForwarding.tsx b/modules/react/text-area/stories/examples/RefForwarding.tsx index fe6a56571d..e302af9b55 100644 --- a/modules/react/text-area/stories/examples/RefForwarding.tsx +++ b/modules/react/text-area/stories/examples/RefForwarding.tsx @@ -19,7 +19,9 @@ export const RefForwarding = () => { <> Leave a Review - + + + Focus Text Area diff --git a/modules/react/text-area/stories/examples/Required.tsx b/modules/react/text-area/stories/examples/Required.tsx index 8555cd196c..cd9504ecc8 100644 --- a/modules/react/text-area/stories/examples/Required.tsx +++ b/modules/react/text-area/stories/examples/Required.tsx @@ -12,7 +12,9 @@ export const Required = () => { return ( Leave a Review - + + + ); }; diff --git a/modules/react/text-area/stories/examples/ResizeConstraints.tsx b/modules/react/text-area/stories/examples/ResizeConstraints.tsx index 833853f8d2..9eab4661f6 100644 --- a/modules/react/text-area/stories/examples/ResizeConstraints.tsx +++ b/modules/react/text-area/stories/examples/ResizeConstraints.tsx @@ -12,12 +12,14 @@ export const ResizeConstraints = () => { return ( Leave a Review - + + + ); }; diff --git a/modules/react/text-input/lib/TextInput.tsx b/modules/react/text-input/lib/TextInput.tsx index 12d3c1d97a..e472ccaa50 100644 --- a/modules/react/text-input/lib/TextInput.tsx +++ b/modules/react/text-input/lib/TextInput.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import {createComponent, GrowthBehavior, ErrorType} from '@workday/canvas-kit-react/common'; -import {createStencil, cssVar, px2rem, calc} from '@workday/canvas-kit-styling'; +import {createStencil, cssVar, px2rem, calc, CSProps} from '@workday/canvas-kit-styling'; import {brand, system} from '@workday/canvas-tokens-web'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; -export interface TextInputProps extends GrowthBehavior { +export interface TextInputProps extends GrowthBehavior, CSProps { /** * The type of error associated with the TextInput (if applicable). */ diff --git a/modules/react/text-input/stories/examples/Alert.tsx b/modules/react/text-input/stories/examples/Alert.tsx index 026f9d5d3f..c18e318bd7 100644 --- a/modules/react/text-input/stories/examples/Alert.tsx +++ b/modules/react/text-input/stories/examples/Alert.tsx @@ -12,8 +12,10 @@ export const Alert = () => { return ( Email - - Please enter a valid email. + + + Please enter a valid email. + ); }; diff --git a/modules/react/text-input/stories/examples/Basic.tsx b/modules/react/text-input/stories/examples/Basic.tsx index bda4475432..d0bec5c7ea 100644 --- a/modules/react/text-input/stories/examples/Basic.tsx +++ b/modules/react/text-input/stories/examples/Basic.tsx @@ -15,7 +15,9 @@ export const Basic = () => { return ( Email - + + + ); }; diff --git a/modules/react/text-input/stories/examples/Disabled.tsx b/modules/react/text-input/stories/examples/Disabled.tsx index f92b43acdc..8b053f158e 100644 --- a/modules/react/text-input/stories/examples/Disabled.tsx +++ b/modules/react/text-input/stories/examples/Disabled.tsx @@ -12,7 +12,9 @@ export const Disabled = () => { return ( Email - + + + ); }; diff --git a/modules/react/text-input/stories/examples/Error.tsx b/modules/react/text-input/stories/examples/Error.tsx index 41de428ac2..87da37c66c 100644 --- a/modules/react/text-input/stories/examples/Error.tsx +++ b/modules/react/text-input/stories/examples/Error.tsx @@ -12,8 +12,10 @@ export const Error = () => { return ( Email - - Please enter a valid email. + + + Please enter a valid email. + ); }; diff --git a/modules/react/text-input/stories/examples/Grow.tsx b/modules/react/text-input/stories/examples/Grow.tsx index a66f027b19..1626f05ff5 100644 --- a/modules/react/text-input/stories/examples/Grow.tsx +++ b/modules/react/text-input/stories/examples/Grow.tsx @@ -10,9 +10,11 @@ export const Grow = () => { }; return ( - + Street Address - + + + ); }; diff --git a/modules/react/text-input/stories/examples/Icons.tsx b/modules/react/text-input/stories/examples/Icons.tsx index eb43f9d9ac..89b530cade 100644 --- a/modules/react/text-input/stories/examples/Icons.tsx +++ b/modules/react/text-input/stories/examples/Icons.tsx @@ -9,7 +9,9 @@ export const Icons = () => { return ( Email - + + + ); }; diff --git a/modules/react/text-input/stories/examples/LabelPosition.tsx b/modules/react/text-input/stories/examples/LabelPosition.tsx index 5cf02152e4..cb5205d04f 100644 --- a/modules/react/text-input/stories/examples/LabelPosition.tsx +++ b/modules/react/text-input/stories/examples/LabelPosition.tsx @@ -12,7 +12,10 @@ export const LabelPosition = () => { return ( Email - + + + Add a valid email + ); }; diff --git a/modules/react/text-input/stories/examples/Placeholder.tsx b/modules/react/text-input/stories/examples/Placeholder.tsx index 419fd3234f..3e96516332 100644 --- a/modules/react/text-input/stories/examples/Placeholder.tsx +++ b/modules/react/text-input/stories/examples/Placeholder.tsx @@ -12,12 +12,14 @@ export const Placeholder = () => { return ( Email - + + + ); }; diff --git a/modules/react/text-input/stories/examples/RefForwarding.tsx b/modules/react/text-input/stories/examples/RefForwarding.tsx index e1c89aca8d..62575d1462 100644 --- a/modules/react/text-input/stories/examples/RefForwarding.tsx +++ b/modules/react/text-input/stories/examples/RefForwarding.tsx @@ -19,7 +19,9 @@ export const RefForwarding = () => { <> Email - + + + Focus Text Input diff --git a/modules/react/text-input/stories/examples/Required.tsx b/modules/react/text-input/stories/examples/Required.tsx index 4de028aa93..24e843002e 100644 --- a/modules/react/text-input/stories/examples/Required.tsx +++ b/modules/react/text-input/stories/examples/Required.tsx @@ -12,7 +12,9 @@ export const Required = () => { return ( Email - + + + ); }; diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json index fa8570d0f9..423cd1ee41 100644 --- a/modules/styling-transform/package.json +++ b/modules/styling-transform/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-styling-transform", - "version": "11.1.10", + "version": "11.1.13", "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -34,7 +34,7 @@ ], "dependencies": { "@emotion/serialize": "^1.0.2", - "@workday/canvas-kit-styling": "^11.1.10", + "@workday/canvas-kit-styling": "^11.1.13", "@workday/canvas-tokens-web": "^2.0.1", "stylis": "4.0.13", "typescript": "4.9" diff --git a/modules/styling/lib/cs.ts b/modules/styling/lib/cs.ts index f89652e414..e3a14d4583 100644 --- a/modules/styling/lib/cs.ts +++ b/modules/styling/lib/cs.ts @@ -1069,6 +1069,7 @@ function combineClassNames(input: (string | undefined)[]): string { * } * }) * ``` + * @deprecated `parentModifier` is deprecated. While we support compat mode, we can't use `parentModifier`. If consumers pass in a style prop, this will created an unstable hash, breaking this function. */ export function parentModifier(value: string) { return `.${value.replace('css-', 'm')} :where(&)`; @@ -1220,7 +1221,7 @@ export const createInstance: typeof _createInstance = options => { _instance = _createInstance({key: 'css', ...options}); } else { // @ts-ignore - if (process && process.env.NODE_ENV === 'development') { + if (process.env.NODE_ENV === 'development') { console.warn( 'An instance has already been created. `createInstance` cannot be called after styles have already been created. Canvas Kit styles are created immediately, so this function must be called before any Canvas Kit components are even imported.' ); diff --git a/modules/styling/package.json b/modules/styling/package.json index c44442ac25..da053cb8e1 100644 --- a/modules/styling/package.json +++ b/modules/styling/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-styling", - "version": "11.1.10", + "version": "11.1.13", "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -53,7 +53,7 @@ "@emotion/react": "^11.7.1", "@emotion/serialize": "^1.0.2", "@emotion/styled": "^11.6.0", - "@workday/canvas-kit-react": "^11.1.10", + "@workday/canvas-kit-react": "^11.1.13", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "typescript": "4.9"