diff --git a/CHANGELOG.md b/CHANGELOG.md index e547c3255e..ab98493614 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,27 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [v11.1.8](https://github.com/Workday/canvas-kit/releases/tag/v11.1.8) (2024-09-06) + +### Components + +- fix: Updated ButtonColors interface to deprecated focusRing from focus ([#2906](https://github.com/Workday/canvas-kit/pull/2906)) ([@josh-bagwell](https://github.com/josh-bagwell)) + Deprecated the use of focusRing within focus in the colors prop on buttons as this does not work with our current styling methods. Added support for boxShadowInner and boxShadowOuter within focus in colors prop. + + +## [v10.3.59](https://github.com/Workday/canvas-kit/releases/tag/v10.3.59) (2024-09-06) + +### Components + +- fix: Updated ButtonColors interface to deprecated focusRing from focus ([#2906](https://github.com/Workday/canvas-kit/pull/2906)) ([@josh-bagwell](https://github.com/josh-bagwell)) + Deprecated the use of focusRing within focus in the colors prop on buttons as this does not work with our current styling methods. Added support for boxShadowInner and boxShadowOuter within focus in colors prop. +## [v11.1.7](https://github.com/Workday/canvas-kit/releases/tag/v11.1.7) (2024-08-29) + +### Accessibility + +- fix(color-picker): Add support for a11y labels on color swatches ([#2894](https://github.com/Workday/canvas-kit/pull/2894)) ([@wooksauce](https://github.com/wooksauce), Kiwook Kwon) + + ## [v11.1.6](https://github.com/Workday/canvas-kit/releases/tag/v11.1.6) (2024-08-27) ### Components diff --git a/cypress.config.ts b/cypress.config.ts index a3408cadd5..d98cf21741 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -8,6 +8,9 @@ export default defineConfig({ retries: { runMode: 2, }, + env: { + NODE_ENV: 'development', // or 'development', 'production', etc. + }, blockHosts: ['cdn.fontawesome.com'], diff --git a/cypress/component/Modal.spec.tsx b/cypress/component/Modal.spec.tsx index 449bfb0a3d..c5a51c93a0 100644 --- a/cypress/component/Modal.spec.tsx +++ b/cypress/component/Modal.spec.tsx @@ -452,7 +452,6 @@ context(`given the [Components/Popups/Modal, Without close icon] story is render context(`given the [Components/Popups/Modal, Custom focus] story is rendered`, () => { beforeEach(() => { cy.mount(); - cy.wait(150); }); context('when button is focused', () => { @@ -467,7 +466,9 @@ context(`given the [Components/Popups/Modal, Custom focus] story is rendered`, ( context('when the target button is clicked', () => { beforeEach(() => { - cy.findByRole('button', {name: 'Acknowledge License'}).click(); + cy.findByRole('button', {name: 'Acknowledge License'}).should('exist'); + cy.findByRole('button', {name: 'Acknowledge License'}).focus(); + cy.focused().click(); }); it('should open the modal', () => { diff --git a/cypress/component/Select.spec.tsx b/cypress/component/Select.spec.tsx index a3ad25ab40..08e71a9da7 100644 --- a/cypress/component/Select.spec.tsx +++ b/cypress/component/Select.spec.tsx @@ -293,6 +293,14 @@ describe('Select', () => { context('when the menu is opened', () => { beforeEach(() => { + cy.window().then(win => { + // @ts-ignore mocking window process + win.process = { + env: { + NODE_ENV: 'development', + }, + }; + }); cy.findByRole('combobox').focus().realType('{downarrow}'); }); diff --git a/cypress/support/component.ts b/cypress/support/component.ts index 56f0dfaa8f..93794ea43a 100644 --- a/cypress/support/component.ts +++ b/cypress/support/component.ts @@ -46,6 +46,14 @@ declare global { Cypress.Commands.add('mount', mount); before(() => { + cy.window().then(win => { + // @ts-ignore mocking window for each test + win.process = { + env: { + NODE_ENV: 'development', + }, + }; + }); cy.configureAxe({ rules: [ {id: 'landmark-one-main', enabled: false}, // stories don't require navigation rules diff --git a/lerna.json b/lerna.json index 66bca368de..9bd0003aa7 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "modules/**" ], - "version": "11.1.6", + "version": "11.1.8", "npmClient": "yarn", "useWorkspaces": true, "command": { diff --git a/modules/codemod/lib/v12/index.ts b/modules/codemod/lib/v12/index.ts new file mode 100644 index 0000000000..44d20888f8 --- /dev/null +++ b/modules/codemod/lib/v12/index.ts @@ -0,0 +1,14 @@ +import {Transform} from 'jscodeshift'; + +import renameFormFieldHorizontal from './renameFormFieldHorizontal'; + +const transform: Transform = (file, api, options) => { + // These will run in order. If your transform depends on others, place yours after dependent transforms + const fixes = [ + // add codemods here + renameFormFieldHorizontal, + ]; + return fixes.reduce((source, fix) => fix({...file, source}, api, options) as string, file.source); +}; + +export default transform; diff --git a/modules/codemod/lib/v12/renameFormFieldHorizontal.ts b/modules/codemod/lib/v12/renameFormFieldHorizontal.ts new file mode 100644 index 0000000000..ad7f2ffa6c --- /dev/null +++ b/modules/codemod/lib/v12/renameFormFieldHorizontal.ts @@ -0,0 +1,50 @@ +import {API, FileInfo, Options, JSXOpeningElement, JSXIdentifier} from 'jscodeshift'; +import {hasImportSpecifiers} from '../v6/utils'; +import {getImportRenameMap} from './utils/getImportRenameMap'; + +const formFieldPackage = '@workday/canvas-kit-preview-react/form-field'; +const packages = [formFieldPackage]; +const packageImports = ['FormField']; + +export default function transformer(file: FileInfo, api: API, options: Options) { + const j = api.jscodeshift; + + const root = j(file.source); + + // exit if the named imports aren't found + if (!hasImportSpecifiers(api, root, packages, packageImports)) { + return file.source; + } + + // getImportRenameMap utility will tell us if the file containsCanvasImports + // and give us an importMap to track what identifiers we need to update + const {importMap, styledMap} = getImportRenameMap(j, root, '@workday/canvas-kit-preview-react'); + + root + .find(j.JSXOpeningElement, (value: JSXOpeningElement) => { + const isCorrectImport = Object.entries(importMap).some( + ([original, imported]) => + imported === (value.name as JSXIdentifier).name && packageImports.includes(original) + ); + + const isCorrectStyled = Object.entries(styledMap).some( + ([original, styled]) => + styled === (value.name as JSXIdentifier).name && packageImports.includes(original) + ); + + return isCorrectImport || isCorrectStyled; + }) + .forEach(nodePath => { + nodePath.node.attributes?.forEach(attr => { + if (attr.type === 'JSXAttribute') { + if (attr.name.name === 'orientation') { + if (attr.value && attr.value.type === 'StringLiteral') { + attr.value = j.stringLiteral('horizontalStart'); + } + } + } + }); + }); + + return root.toSource(); +} diff --git a/modules/codemod/lib/v12/spec/expectTransformFactory.ts b/modules/codemod/lib/v12/spec/expectTransformFactory.ts new file mode 100644 index 0000000000..d2ec7424b0 --- /dev/null +++ b/modules/codemod/lib/v12/spec/expectTransformFactory.ts @@ -0,0 +1,6 @@ +import {runInlineTest} from 'jscodeshift/dist/testUtils'; + +export const expectTransformFactory = + (fn: Function) => (input: string, expected: string, options?: Record) => { + return runInlineTest(fn, options, {source: input}, expected, {parser: 'tsx'}); + }; diff --git a/modules/codemod/lib/v12/spec/renameFormFieldHorizontal.spec.ts b/modules/codemod/lib/v12/spec/renameFormFieldHorizontal.spec.ts new file mode 100644 index 0000000000..18afdce33b --- /dev/null +++ b/modules/codemod/lib/v12/spec/renameFormFieldHorizontal.spec.ts @@ -0,0 +1,75 @@ +import {expectTransformFactory} from './expectTransformFactory'; +import transform from '../renameFormFieldHorizontal'; +import {stripIndent} from 'common-tags'; + +const expectTransform = expectTransformFactory(transform); + +describe('rename horizontal', () => { + it('should not change non-canvas imports', () => { + const input = stripIndent` + import {FormField} from 'any-other-package' + <> + + + `; + + const expected = stripIndent` + import {FormField} from 'any-other-package' + <> + + + `; + expectTransform(input, expected); + }); + + it('should rename orientation horizontal to horizontalStart', () => { + const input = stripIndent` + import {FormField} from '@workday/canvas-kit-preview-react/form-field' + <> + + + `; + + const expected = stripIndent` + import {FormField} from '@workday/canvas-kit-preview-react/form-field' + <> + + + `; + expectTransform(input, expected); + }); + + it('should change renamed FormField', () => { + const input = stripIndent` + import {FormField as CanvasForm} from '@workday/canvas-kit-preview-react/form-field' + + <> + + + `; + + const expected = stripIndent` + import {FormField as CanvasForm} from '@workday/canvas-kit-preview-react/form-field' + + <> + + + `; + expectTransform(input, expected); + }); + + it('should change styled FormField', () => { + const input = stripIndent` + import {FormField} from '@workday/canvas-kit-preview-react/form-field' + const StyledForm = styled(FormField)({color: "#000"}); + + `; + + const expected = stripIndent` + import {FormField} from '@workday/canvas-kit-preview-react/form-field' + const StyledForm = styled(FormField)({color: "#000"}); + + `; + expectTransform(input, expected); + }); +}); diff --git a/modules/codemod/lib/v12/utils/getImportRenameMap.ts b/modules/codemod/lib/v12/utils/getImportRenameMap.ts new file mode 100644 index 0000000000..d0c4a70039 --- /dev/null +++ b/modules/codemod/lib/v12/utils/getImportRenameMap.ts @@ -0,0 +1,63 @@ +import {Collection, JSCodeshift, CallExpression} from 'jscodeshift'; + +export function getImportRenameMap( + j: JSCodeshift, + root: Collection, + mainPackage = '@workday/canvas-kit-react', + packageName = '' +) { + let containsCanvasImports = false; + + // build import name remapping - in case someone renamed imports... + // i.e. `import { IconButton as StyledIconButton } ...` + const importMap: Record = {}; + const styledMap: Record = {}; + root.find(j.ImportDeclaration, node => { + // imports our module + const value = node.source.value; + if ( + typeof value === 'string' && + (value === mainPackage || value.startsWith(mainPackage) || value === packageName) + ) { + containsCanvasImports = true; + (node.specifiers || []).forEach(specifier => { + if (specifier.type === 'ImportSpecifier') { + if (!specifier.local || specifier.local.name === specifier.imported.name) { + importMap[specifier.imported.name] = specifier.imported.name; + } else { + importMap[specifier.imported.name] = specifier.local.name; + } + } + }); + } + return false; + }); + + root + .find(j.CallExpression, (node: CallExpression) => { + if ( + node.callee.type === 'Identifier' && + node.callee.name === 'styled' && + node.arguments[0].type === 'Identifier' + ) { + return true; + } + return false; + }) + .forEach(nodePath => { + if ( + (nodePath.parent.value.type === 'CallExpression' || + nodePath.parent.value.type === 'TaggedTemplateExpression') && + nodePath.parent.parent.value.type === 'VariableDeclarator' && + nodePath.parent.parent.value.id.type === 'Identifier' + ) { + const styledName = nodePath.parent.parent.value.id.name; + + if (nodePath.value.arguments[0].type === 'Identifier') { + styledMap[nodePath.value.arguments[0].name] = styledName; + } + } + }); + + return {containsCanvasImports, importMap, styledMap}; +} diff --git a/modules/codemod/package.json b/modules/codemod/package.json index 7cb2e39bb0..fc6f616a46 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.6", + "version": "11.1.8", "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 ecfa9d7033..31b3761381 100644 --- a/modules/css/package.json +++ b/modules/css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-css", - "version": "11.1.6", + "version": "11.1.8", "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/lib/Value.tsx b/modules/docs/lib/Value.tsx index 9cbffed618..5b4d960417 100644 --- a/modules/docs/lib/Value.tsx +++ b/modules/docs/lib/Value.tsx @@ -8,6 +8,7 @@ import {MdxJSToJSX} from './MDXElements'; import {Table} from './Table'; import {capitalize, IndentLevelContext, RenderContext, indent} from './widgetUtils'; import {DescriptionTooltip} from './DescriptionTooltip'; +import {colors} from '@workday/canvas-kit-react/tokens'; const widgets: Record> = {}; @@ -52,18 +53,19 @@ export const PropertiesInline = ({properties}: {properties: types.ObjectProperty
{indent(level + 1)} - {p.description ? ( + {p.description || p.tags.deprecated ? ( {p.description}} + title={{p.description || p.tags.deprecated}} > {p.name} diff --git a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx index eb5c98bb48..c4cd5af1fe 100644 --- a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx +++ b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx @@ -46,6 +46,7 @@ A note to the reader: - [Component Updates](#component-updates) - [Styling API and CSS Tokens](#styling-api-and-css-tokens) - [Avatar](#avatar) + - [Form Field](#form-field) - [Text Area](#text-area) - [Troubleshooting](#troubleshooting) - [Glossary](#glossary) @@ -102,7 +103,8 @@ from Main instead. **PRs:** [#2825](https://github.com/Workday/canvas-kit/pull/2825), [#2795](https://github.com/Workday/canvas-kit/pull/2795), -[#2793](https://github.com/Workday/canvas-kit/pull/2793) +[#2793](https://github.com/Workday/canvas-kit/pull/2793), +[#2881](https://github.com/Workday/canvas-kit/pull/2881) Several components have been refactored to use our new [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and @@ -113,6 +115,7 @@ The following components are affected: - `Avatar` - `Dialog` +- `FormField` - `Modal` - `Popup` - `TextArea` @@ -125,13 +128,36 @@ The following components are affected: ### Avatar -- Avatar no longer uses `SystemIconCircle` for sizing. -- `Avatar.Size` is no longer supported. The `size` prop type has change to accept the following: +- `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{})` -- `Avatar.Variant` is no longer supported. Enum `AvatarVariant` has been removed. The `variant` type - prop now accepts `"dark" | "light"` +- `Avatar.Variant` has been deprecated. The `variant` prop still accepts `Avatar.Variant` in + addition to the following values: `"dark" | "light"` - The `as` prop now accepts any element, not just `div`. +> **Note:** Both `Avatar.Size` and `Avatar.Variant` have been deprecated in favor of the new string +> union types. You will see a console warn message while in development if you're still using this. +> Please update your types and usage before v13. + +### Form Field + +**PR** [#2881](https://github.com/Workday/canvas-kit/pull/2881) + +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 +> moving between RTL (right-to-left) and LTR (left-to-right) languages. + +> **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`. + +🤖 The codemod will handle the change of `orientation="horizontal"` to +`orientation="horizontalStart"` if you're using the string literal values. + ### Text Area **PR:** [#2825](https://github.com/Workday/canvas-kit/pull/2825) @@ -209,5 +235,5 @@ experimental code and is analagous to code in alpha. Breaking changes can be deployed to Labs at any time without triggering a major version update and may not be subject to the same rigor in communcation and migration strategies reserved for breaking -changes in [Preview](#preview) and [Main](#main). `import { opacity } from -"@workday/canvas-tokens-web/dist/es6/system"` +changes in [Preview](#preview) and [Main](#main). +`import { opacity } from "@workday/canvas-tokens-web/dist/es6/system"` diff --git a/modules/docs/package.json b/modules/docs/package.json index 630159e11d..b2fe7d58a5 100644 --- a/modules/docs/package.json +++ b/modules/docs/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-docs", - "version": "11.1.6", + "version": "11.1.8", "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.6", - "@workday/canvas-kit-preview-react": "^11.1.6", - "@workday/canvas-kit-react": "^11.1.6", - "@workday/canvas-kit-styling": "^11.1.6", + "@workday/canvas-kit-labs-react": "^11.1.8", + "@workday/canvas-kit-preview-react": "^11.1.8", + "@workday/canvas-kit-react": "^11.1.8", + "@workday/canvas-kit-styling": "^11.1.8", "@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/package.json b/modules/labs-css/package.json index d30ef46e4b..d9839af3da 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.6", + "version": "11.1.8", "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 9109afeca5..763add0e44 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.6", + "version": "11.1.8", "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.6", - "@workday/canvas-kit-styling": "^11.1.6", + "@workday/canvas-kit-react": "^11.1.8", + "@workday/canvas-kit-styling": "^11.1.8", "@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/popup-stack/package.json b/modules/popup-stack/package.json index 297f38a65c..74ae433df1 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.6", + "version": "11.1.8", "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 ae349663b0..dc00fb7f7e 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.6", + "version": "11.1.8", "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/color-picker/lib/ColorPicker.tsx b/modules/preview-react/color-picker/lib/ColorPicker.tsx index a7fd4131e9..8434dd8140 100644 --- a/modules/preview-react/color-picker/lib/ColorPicker.tsx +++ b/modules/preview-react/color-picker/lib/ColorPicker.tsx @@ -7,7 +7,7 @@ import {FormField} from '@workday/canvas-kit-preview-react/form-field'; import styled from '@emotion/styled'; import {ResetButton} from './parts/ColorReset'; -import {SwatchBook} from './parts/SwatchBook'; +import {SwatchBook, SwatchBookColorObject} from './parts/SwatchBook'; export interface ColorPickerProps extends React.HTMLAttributes { /** @@ -21,7 +21,7 @@ export interface ColorPickerProps extends React.HTMLAttributes { /** * The array of colors to be rendered in the swatchbook. */ - colorSet?: string[]; + colorSet?: string[] | SwatchBookColorObject[]; /** * If true, render an input for entering a custom hex color. * @default false @@ -149,13 +149,19 @@ const HexColorInput = styled(ColorInput)({ width: '168px', }); -const isCustomColor = (colors: string[], hexCode?: string) => { +const isCustomColor = (colors: (string | SwatchBookColorObject)[], hexCode?: string) => { if (!hexCode) { return false; } const lowercaseHex = hexCode.toLowerCase(); - return !colors.includes(lowercaseHex); + return !colors.some((color: string | SwatchBookColorObject) => { + if (typeof color === 'string') { + return color.toLowerCase() === lowercaseHex; + } else { + return color.value.toLowerCase() === lowercaseHex; + } + }); }; export const ColorPicker = ({ diff --git a/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx b/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx index 62800c5a8a..89c221c7eb 100644 --- a/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx +++ b/modules/preview-react/color-picker/lib/parts/SwatchBook.tsx @@ -4,8 +4,13 @@ import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens'; import {focusRing, mouseFocusBehavior} from '@workday/canvas-kit-react/common'; import {ColorSwatch} from '@workday/canvas-kit-react/color-picker'; +export interface SwatchBookColorObject { + value: string; + label: string; +} + export interface SwatchBookProps { - colors: string[]; + colors: (string | SwatchBookColorObject)[]; value?: string; onSelect: (color: string) => void; } @@ -58,26 +63,33 @@ const Container = styled('div')({ margin: `0px -${space.xxs} -${space.xxs} 0px`, }); -export const SwatchBook = ({colors, value, onSelect}: SwatchBookProps) => ( - - {colors.map((color, index) => { - const isSelected = value ? color.toLowerCase() === value.toLowerCase() : false; +export const SwatchBook = ({colors, value, onSelect}: SwatchBookProps) => { + return ( + + {colors.map((color: string | SwatchBookColorObject, index: number) => { + const hexCode = typeof color === 'object' ? color.value : color; + const label = typeof color === 'object' ? color.label : color; + const isSelected = value ? hexCode.toLowerCase() === value.toLowerCase() : false; - const handleClick = () => onSelect(color); - const handleKeyDown = (event: React.KeyboardEvent) => - (event.key === 'Enter' || event.key === ' ') && onSelect(color); + const handleClick = () => onSelect(hexCode); + const handleKeyDown = (event: React.KeyboardEvent) => + (event.key === 'Enter' || event.key === ' ') && onSelect(hexCode); - return ( - - - - ); - })} - -); + return ( + + + + ); + })} + + ); +}; diff --git a/modules/preview-react/color-picker/spec/ColorPicker.spec.tsx b/modules/preview-react/color-picker/spec/ColorPicker.spec.tsx index 2cf595f5e7..e3b88e2181 100644 --- a/modules/preview-react/color-picker/spec/ColorPicker.spec.tsx +++ b/modules/preview-react/color-picker/spec/ColorPicker.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {fireEvent, render} from '@testing-library/react'; +import {fireEvent, render, screen} from '@testing-library/react'; import {colors} from '@workday/canvas-kit-react/tokens'; import {ColorPicker, ColorPickerProps} from '@workday/canvas-kit-preview-react/color-picker'; @@ -49,6 +49,18 @@ describe('Color Picker', () => { expect(getByRole('textbox')).not.toBeNull(); }); + + it('should work with color objects', () => { + const {getByRole} = renderColorPicker({ + colorSet: [ + {label: 'Cinnamon', value: colors.cinnamon200}, + {label: 'Blueberry', value: colors.blueberry400}, + ], + showCustomHexInput: true, + }); + + expect(getByRole('textbox')).not.toBeNull(); + }); }); describe('reset button', () => { @@ -87,4 +99,31 @@ describe('Color Picker', () => { }); }); }); + describe('accessibility', () => { + it('should have correct aria attributes', () => { + renderColorPicker({value: colors.blueberry400}); + const swatchCinnamon = screen.getByRole('button', {name: /#fcc9c5/}); + const swatchBlueberry = screen.getByRole('button', {name: /#0875e1/}); + + expect(swatchCinnamon).toHaveAttribute('aria-selected', 'false'); + expect(swatchBlueberry).toHaveAttribute('aria-selected', 'true'); + + expect(swatchCinnamon.getAttribute('aria-label')).toBe('#fcc9c5'); + expect(swatchBlueberry.getAttribute('aria-label')).toBe('#0875e1'); + }); + it('should use color labels when provided', () => { + renderColorPicker({ + colorSet: [ + {label: 'Cinnamon', value: colors.cinnamon200}, + {label: 'Blueberry', value: colors.blueberry400}, + ], + value: colors.cinnamon200, + }); + const swatchCinnamon = screen.getByRole('button', {name: /Cinnamon/}); + const swatchBlueberry = screen.getByRole('button', {name: /Blueberry/}); + + expect(swatchCinnamon.getAttribute('aria-label')).toBe('Cinnamon'); + expect(swatchBlueberry.getAttribute('aria-label')).toBe('Blueberry'); + }); + }); }); diff --git a/modules/preview-react/form-field/lib/FormField.tsx b/modules/preview-react/form-field/lib/FormField.tsx index 8d3415c40c..fb5ea6857b 100644 --- a/modules/preview-react/form-field/lib/FormField.tsx +++ b/modules/preview-react/form-field/lib/FormField.tsx @@ -10,12 +10,13 @@ import {FormFieldHint} from './FormFieldHint'; import {FormFieldContainer} from './FormFieldContainer'; import {formFieldStencil} from './formFieldStencil'; +//TODO: Remove `horizontal` option in v13 and the console warn message. export interface FormFieldProps extends FlexProps, GrowthBehavior { /** - * The direction the child elements should stack + * 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' | 'horizontal'; + orientation?: 'vertical' | 'horizontalStart' | 'horizontalEnd' | 'horizontal'; children: React.ReactNode; } @@ -82,7 +83,7 @@ export const FormField = createContainer('div')({ * `FormField.Container` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text.. * * ```tsx - * + * * First Name * * console.log(e)} /> @@ -96,13 +97,21 @@ export const FormField = createContainer('div')({ Container: FormFieldContainer, }, })(({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 (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 ( -### Label Position Horizontal +### Label Position Set the `orientation` prop of the Form Field to designate the position of the label relative to the -input component. By default, the orientation will be set to `vertical`. +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 end of the container, set orientation prop to `horizontalEnd`. + + ### Grow diff --git a/modules/preview-react/form-field/stories/FormField.stories.ts b/modules/preview-react/form-field/stories/FormField.stories.ts index 3d561dcf40..dc4b7711c5 100644 --- a/modules/preview-react/form-field/stories/FormField.stories.ts +++ b/modules/preview-react/form-field/stories/FormField.stories.ts @@ -6,7 +6,8 @@ import {Basic as BasicExample} from './examples/Basic'; import {Alert as AlertExample} from './examples/Alert'; import {Error as ErrorExample} from './examples/Error'; import {Disabled as DisabledExample} from './examples/Disabled'; -import {LabelPositionHorizontal as LabelPositionHorizontalExample} from './examples/LabelPositionHorizontal'; +import {LabelPositionHorizontalStart as LabelPositionHorizontalStartExample} from './examples/LabelPositionHorizontalStart'; +import {LabelPositionHorizontalEnd as LabelPositionHorizontalEndExample} from './examples/LabelPositionHorizontalEnd'; import {RefForwarding as RefForwardingExample} from './examples/RefForwarding'; import {Required as RequiredExample} from './examples/Required'; import {Custom as CustomExample} from './examples/Custom'; @@ -42,8 +43,11 @@ export const Error: Story = { export const Disabled: Story = { render: DisabledExample, }; -export const LabelPositionHorizontal: Story = { - render: LabelPositionHorizontalExample, +export const LabelPositionHorizontalStart: Story = { + render: LabelPositionHorizontalStartExample, +}; +export const LabelPositionHorizontalEnd: Story = { + render: LabelPositionHorizontalEndExample, }; export const RefForwarding: Story = { render: RefForwardingExample, diff --git a/modules/preview-react/form-field/stories/examples/AllFields.tsx b/modules/preview-react/form-field/stories/examples/AllFields.tsx index 6251291a48..c1de8aec0f 100644 --- a/modules/preview-react/form-field/stories/examples/AllFields.tsx +++ b/modules/preview-react/form-field/stories/examples/AllFields.tsx @@ -47,7 +47,7 @@ export const AllFields = () => { - + Radio Group Legend @@ -69,7 +69,7 @@ export const AllFields = () => { - + Switch Label diff --git a/modules/preview-react/form-field/stories/examples/Custom.tsx b/modules/preview-react/form-field/stories/examples/Custom.tsx index be540db3a8..a1a8c39ae0 100644 --- a/modules/preview-react/form-field/stories/examples/Custom.tsx +++ b/modules/preview-react/form-field/stories/examples/Custom.tsx @@ -45,7 +45,7 @@ export const Custom = () => { const model = useFormFieldModel({isRequired: true}); return ( - + You can be anything diff --git a/modules/preview-react/form-field/stories/examples/Hint.tsx b/modules/preview-react/form-field/stories/examples/Hint.tsx index 13a2dd015a..013b64e9db 100644 --- a/modules/preview-react/form-field/stories/examples/Hint.tsx +++ b/modules/preview-react/form-field/stories/examples/Hint.tsx @@ -13,7 +13,7 @@ export const Hint = () => { return ( - + First Name diff --git a/modules/preview-react/form-field/stories/examples/LabelPositionHorizontal.tsx b/modules/preview-react/form-field/stories/examples/LabelPositionHorizontal.tsx deleted file mode 100644 index d5d70c4417..0000000000 --- a/modules/preview-react/form-field/stories/examples/LabelPositionHorizontal.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import {TextInput} from '@workday/canvas-kit-react/text-input'; -import {FormField} from '@workday/canvas-kit-preview-react/form-field'; - -export const LabelPositionHorizontal = () => { - const [value, setValue] = React.useState(''); - - const handleChange = (event: React.ChangeEvent) => { - setValue(event.target.value); - }; - - return ( - - Email - - - ); -}; diff --git a/modules/preview-react/form-field/stories/examples/LabelPositionHorizontalEnd.tsx b/modules/preview-react/form-field/stories/examples/LabelPositionHorizontalEnd.tsx new file mode 100644 index 0000000000..98e2ab3abb --- /dev/null +++ b/modules/preview-react/form-field/stories/examples/LabelPositionHorizontalEnd.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import {TextInput} from '@workday/canvas-kit-react/text-input'; +import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {createStyles} from '@workday/canvas-kit-styling'; +import {system} from '@workday/canvas-tokens-web'; + +const formStyles = createStyles({ + display: 'flex', + gap: system.space.x2, + flexDirection: 'column', +}); + +export const LabelPositionHorizontalEnd = () => { + const [value, setValue] = React.useState(''); + + const handleChange = (event: React.ChangeEvent) => { + setValue(event.target.value); + }; + + return ( +
+ + Email + + + + Password + + +
+ ); +}; diff --git a/modules/preview-react/form-field/stories/examples/LabelPositionHorizontalStart.tsx b/modules/preview-react/form-field/stories/examples/LabelPositionHorizontalStart.tsx new file mode 100644 index 0000000000..10ccdbd4fa --- /dev/null +++ b/modules/preview-react/form-field/stories/examples/LabelPositionHorizontalStart.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import {TextInput} from '@workday/canvas-kit-react/text-input'; +import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {createStyles} from '@workday/canvas-kit-styling'; +import {system} from '@workday/canvas-tokens-web'; + +const formStyles = createStyles({ + display: 'flex', + gap: system.space.x2, + flexDirection: 'column', +}); + +export const LabelPositionHorizontalStart = () => { + const [value, setValue] = React.useState(''); + + const handleChange = (event: React.ChangeEvent) => { + setValue(event.target.value); + }; + + return ( +
+ + Email + + + + Password + + +
+ ); +}; diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json index d0da593af7..9ca342c2b8 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.6", + "version": "11.1.8", "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.6", - "@workday/canvas-kit-styling": "^11.1.6", + "@workday/canvas-kit-react": "^11.1.8", + "@workday/canvas-kit-styling": "^11.1.8", "@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/stories/examples/LabelPosition.tsx b/modules/preview-react/radio/stories/examples/LabelPosition.tsx index 68ab50e34b..4de7943df4 100644 --- a/modules/preview-react/radio/stories/examples/LabelPosition.tsx +++ b/modules/preview-react/radio/stories/examples/LabelPosition.tsx @@ -12,7 +12,7 @@ export const LabelPosition = () => { } }; return ( - + Choose Your Pizza Crust Deep dish diff --git a/modules/preview-react/radio/stories/testing.stories.tsx b/modules/preview-react/radio/stories/testing.stories.tsx index 3b769404c9..1736e8e9e4 100644 --- a/modules/preview-react/radio/stories/testing.stories.tsx +++ b/modules/preview-react/radio/stories/testing.stories.tsx @@ -99,7 +99,7 @@ export const RadioStates = { columnProps={[ { label: 'Left Label', - props: {label: 'Contact', labelPosition: 'horizontal'}, + props: {label: 'Contact', labelPosition: 'horizontalStart'}, }, { label: 'Top Label', @@ -162,7 +162,7 @@ export const RadioStates = {

RadioGroup (wrapping)

- + Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. diff --git a/modules/preview-react/text-area/lib/TextArea.tsx b/modules/preview-react/text-area/lib/TextArea.tsx index dc35a5a696..518688d324 100644 --- a/modules/preview-react/text-area/lib/TextArea.tsx +++ b/modules/preview-react/text-area/lib/TextArea.tsx @@ -35,7 +35,7 @@ export const TextArea = createContainer('div')({ elemProps, formFieldStencil({ grow, - orientation, + orientation: orientation === 'horizontal' ? 'horizontalStart' : orientation, error: model.state.error, required: model.state.isRequired, }) diff --git a/modules/preview-react/text-area/stories/examples/LabelPositionHorizontal.tsx b/modules/preview-react/text-area/stories/examples/LabelPositionHorizontal.tsx index ce122e39f8..a0490f5d7f 100644 --- a/modules/preview-react/text-area/stories/examples/LabelPositionHorizontal.tsx +++ b/modules/preview-react/text-area/stories/examples/LabelPositionHorizontal.tsx @@ -9,7 +9,7 @@ export const LabelPositionHorizontal = () => { }; return ( - diff --git a/modules/preview-react/text-input/lib/TextInput.tsx b/modules/preview-react/text-input/lib/TextInput.tsx index 106f4ef5d3..8f64af8689 100644 --- a/modules/preview-react/text-input/lib/TextInput.tsx +++ b/modules/preview-react/text-input/lib/TextInput.tsx @@ -39,7 +39,7 @@ export const TextInput = createContainer('div')({ elemProps, formFieldStencil({ grow, - orientation, + orientation: orientation === 'horizontal' ? 'horizontalStart' : orientation, error: model.state.error, required: model.state.isRequired, }) diff --git a/modules/preview-react/text-input/stories/examples/LabelPositionHorizontal.tsx b/modules/preview-react/text-input/stories/examples/LabelPositionHorizontal.tsx index 118f2953ee..490cd3ad51 100644 --- a/modules/preview-react/text-input/stories/examples/LabelPositionHorizontal.tsx +++ b/modules/preview-react/text-input/stories/examples/LabelPositionHorizontal.tsx @@ -9,7 +9,7 @@ export const LabelPositionHorizontal = () => { }; return ( - + Email diff --git a/modules/react-fonts/package.json b/modules/react-fonts/package.json index cb5308201f..cbbddf182c 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.6", + "version": "11.1.8", "description": "Fonts for canvas-kit-react", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx index 7350c827cf..39785ec952 100644 --- a/modules/react/avatar/lib/Avatar.tsx +++ b/modules/react/avatar/lib/Avatar.tsx @@ -1,20 +1,28 @@ import React, {useState} from 'react'; import {Property} from 'csstype'; import {createComponent, focusRing} from '@workday/canvas-kit-react/common'; -import {createStencil, calc, CSProps} from '@workday/canvas-kit-styling'; +import {createStencil, calc, CSProps, px2rem} from '@workday/canvas-kit-styling'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; import {borderRadius} from '@workday/canvas-kit-react/tokens'; -import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon'; +import {SystemIcon, SystemIconCircleSize, systemIconStencil} from '@workday/canvas-kit-react/icon'; import {userIcon} from '@workday/canvas-system-icons-web'; import {system} from '@workday/canvas-tokens-web'; +/** + * @deprecated `AvatarVariant` is deprecated and will be removed in a future major version. Update your types and values to use the string literal of either `light` or `dark`. + */ +export enum AvatarVariant { + Light, + Dark, +} + export interface AvatarProps extends CSProps { /** * The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds. * @default "light" */ - variant?: 'light' | 'dark'; + variant?: 'light' | 'dark' | AvatarVariant; /** * The size of the Avatar. * - `extraExtraLarge`: 7.5rem x 7.5rem (120px x 120px) @@ -26,7 +34,15 @@ export interface AvatarProps extends CSProps { * @default "medium" */ size?: /** size of small */ - 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {}); + | 'extraSmall' + | 'small' + | 'medium' + | 'large' + | 'extraLarge' + | 'extraExtraLarge' + | (string & {}) + | SystemIconCircleSize + | number; /** * The alt text of the Avatar image. This prop is also used for the aria-label. * @default Avatar @@ -239,6 +255,19 @@ export const Avatar = createComponent('button')({ setImageLoaded(false); }, [url]); + // TODO: Remove this warning for a hard breaking change in v13 + if (process && 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"' + ); + } + if (typeof size === 'number') { + console.warn( + "Avatar: Avatar.Size is deprecated and will be removed in v13. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})" + ); + } + } return ( ); }, + subComponents: { + /** + * @deprecated `Avatar.Variant` is deprecated and will be removed in a future major version. Use the string literal of `light` or `dark`. + */ + Variant: AvatarVariant, + /** + * @deprecated `Avatar.Size` is deprecated and will be removed in a future major version. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {}) + */ + Size: SystemIconCircleSize, + }, }); diff --git a/modules/react/button/lib/types.ts b/modules/react/button/lib/types.ts index fd09c6af6a..6dc03853a4 100644 --- a/modules/react/button/lib/types.ts +++ b/modules/react/button/lib/types.ts @@ -16,7 +16,18 @@ export interface ButtonColors { hover?: ButtonStateColors; active?: ButtonStateColors; focus?: ButtonStateColors & { + /** + * @deprecated This option is no longer supported at run time and will be removed from the type interface in a v12. If you want to customize the focus ring, use `boxShadowInner` and `boxShadowOuter` to update the inner and outer colors of the focus ring. Use with caution. + */ focusRing?: CSSObject; + /** + * Updates the color of the inner `box-shadow` within a focus ring. + */ + boxShadowInner?: string; + /** + * Updates the color of the outer `box-shadow` within a focus ring. + */ + boxShadowOuter?: string; }; disabled?: ButtonStateColors; } diff --git a/modules/react/button/stories/button/examples/CustomStyles.tsx b/modules/react/button/stories/button/examples/CustomStyles.tsx index d439d69d51..187591397a 100644 --- a/modules/react/button/stories/button/examples/CustomStyles.tsx +++ b/modules/react/button/stories/button/examples/CustomStyles.tsx @@ -15,6 +15,11 @@ const myButtonStencil = createStencil({ [systemIconStencil.vars.color]: system.color.static.green.strong, [buttonStencil.vars.borderRadius]: system.shape.half, border: `${px2rem(3)} solid transparent`, + '&:focus-visible': { + [buttonStencil.vars.background]: system.color.static.green.strong, + [buttonStencil.vars.boxShadowInner]: system.color.static.green.soft, + [buttonStencil.vars.boxShadowOuter]: system.color.static.green.strong, + }, '&:hover': { [buttonStencil.vars.background]: system.color.static.green.default, border: `${px2rem(3)} dotted ${system.color.static.green.strong}`, @@ -29,8 +34,8 @@ const myButtonStencil = createStencil({ }); const MyCustomButton = createComponent('button')({ - Component: ({children, size, ...elemProps}: PrimaryButtonProps, ref, Element) => ( - + Component: ({children, ...elemProps}: PrimaryButtonProps, ref, Element) => ( + {children} ), @@ -43,14 +48,23 @@ const myCustomStyles = createStyles({ const customColors = { default: { - background: system.color.static.green.soft, - icon: system.color.static.green.strong, - label: system.color.static.green.strong, + background: system.color.static.orange.soft, + icon: system.color.static.orange.strong, + label: system.color.static.orange.strong, }, hover: { - background: system.color.static.green.default, - icon: system.color.static.green.strong, + background: system.color.static.orange.default, + icon: system.color.static.orange.strong, + }, + active: { + background: system.color.static.orange.strong, + }, + focus: { + background: system.color.static.orange.strong, + boxShadowInner: system.color.static.orange.soft, + boxShadowOuter: system.color.static.orange.strong, }, + disabled: {}, }; export const CustomStyles = () => ( diff --git a/modules/react/checkbox/stories/examples/Alert.tsx b/modules/react/checkbox/stories/examples/Alert.tsx index 97c38da533..d1722a16c8 100644 --- a/modules/react/checkbox/stories/examples/Alert.tsx +++ b/modules/react/checkbox/stories/examples/Alert.tsx @@ -10,7 +10,7 @@ export const Alert = () => { }; return ( - + { }; return ( - + { }; return ( - + Terms { }; return ( - + Background 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 716f51dbb6..4cc0cb029e 100644 --- a/modules/react/color-picker/stories/color-preview/examples/LabelPosition.tsx +++ b/modules/react/color-picker/stories/color-preview/examples/LabelPosition.tsx @@ -4,7 +4,7 @@ import {ColorPreview} from '@workday/canvas-kit-react/color-picker'; export const LabelPosition = () => { return ( - + Background Color diff --git a/modules/react/combobox/stories/examples/Autocomplete.tsx b/modules/react/combobox/stories/examples/Autocomplete.tsx index 165a9ef0b9..2ee55d247b 100644 --- a/modules/react/combobox/stories/examples/Autocomplete.tsx +++ b/modules/react/combobox/stories/examples/Autocomplete.tsx @@ -105,7 +105,7 @@ export const Autocomplete = () => { ); return ( - + Fruit console.log('input', event.currentTarget.value)}> 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 c588bac187..d2cca6c537 100644 --- a/modules/react/form-field/stories/visual-testing/Radio.stories.tsx +++ b/modules/react/form-field/stories/visual-testing/Radio.stories.tsx @@ -91,7 +91,7 @@ export const RadioStates = { columnProps={[ { label: 'Left Label', - props: {label: 'Contact', orientation: 'horizontal'}, + props: {label: 'Contact', orientation: 'horizontalStart'}, }, { label: 'Top Label', @@ -102,7 +102,7 @@ export const RadioStates = { {props => ( {props.label} - {props.orientation === 'horizontal' ? ( + {props.orientation === 'horizontalStart' ? ( {testGroup} {props.error && hintText} @@ -138,7 +138,7 @@ export const RadioStates = { {props.label} {testGroup} - {props.orientation === 'horizontal' && ( + {props.orientation === 'horizontalStart' && ( {testGroup} {props.error && hintText} @@ -151,7 +151,7 @@ export const RadioStates = {

RadioGroup (wrapping)

- + Really long label. Really long label. Really long label. Really long label. Really long label. Really long label. diff --git a/modules/react/form-field/stories/visual-testing/stories_Radio.tsx b/modules/react/form-field/stories/visual-testing/stories_Radio.tsx new file mode 100644 index 0000000000..923766dfb4 --- /dev/null +++ b/modules/react/form-field/stories/visual-testing/stories_Radio.tsx @@ -0,0 +1,230 @@ +import * as React from 'react'; + +import { + ComponentStatesTable, + permutateProps, + StaticStates, +} from '@workday/canvas-kit-react/testing'; +import {withSnapshotsEnabled, customColorTheme} from '../../../../../utils/storybook'; + +import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio'; +import {FormField} from '@workday/canvas-kit-preview-react/form-field'; + +export default withSnapshotsEnabled({ + title: 'Testing/Inputs/Radio', + component: FormField, +}); + +const testGroup = ( + + + + + + +); + +export const RadioStates = () => ( +
+

Radio

+ + { + if (props.disabled && !['', 'hover'].includes(props.className)) { + return false; + } + return true; + } + )} + > + {props => ( + {}} // eslint-disable-line no-empty-function + label="Radio" + /> + )} + + + +

Radio Group

+ + + {props => ( + + {props.label} + {props.orientation === 'horizontal' ? ( + + {testGroup} + {props.error && hintText} + + ) : ( + <> + {testGroup} + {props.error && hintText} + + )} + + )} + + +

Radio Group (grow)

+ + + {props => ( + + {props.label} + {testGroup} + {props.orientation === 'horizontal' && ( + + {testGroup} {props.error && hintText} + + )} + {props.error && hintText} + + )} + + + +

RadioGroup (wrapping)

+
+ + + Really long label. Really long label. Really long label. Really long label. Really long + label. Really long label. + + {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} + +
+
+); + +export const InverseRadioStates = () => ( +
+ + { + if (props.disabled && !['', 'hover'].includes(props.className)) { + return false; + } + return true; + } + )} + > + {props => ( +
+ {}} // eslint-disable-line no-empty-function + label="Radio" + /> +
+ )} + + +
+); + +export const RadioThemedStates = () => ; +RadioThemedStates.parameters = { + canvasProviderDecorator: { + theme: customColorTheme, + }, +}; + +export const RadioInverseThemedStates = () => ; +RadioInverseThemedStates.parameters = { + canvasProviderDecorator: { + theme: customColorTheme, + }, +}; diff --git a/modules/react/package.json b/modules/react/package.json index acd2f7334d..82c007c8cb 100644 --- a/modules/react/package.json +++ b/modules/react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-react", - "version": "11.1.6", + "version": "11.1.8", "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.6", - "@workday/canvas-kit-styling": "^11.1.6", + "@workday/canvas-kit-popup-stack": "^11.1.8", + "@workday/canvas-kit-styling": "^11.1.8", "@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/radio/stories/examples/LabelPosition.tsx b/modules/react/radio/stories/examples/LabelPosition.tsx index e8817943cb..df27e35695 100644 --- a/modules/react/radio/stories/examples/LabelPosition.tsx +++ b/modules/react/radio/stories/examples/LabelPosition.tsx @@ -11,7 +11,7 @@ export const LabelPosition = () => { }; return ( - + Choose Your Pizza Crust diff --git a/modules/react/select/stories/examples/LabelPosition.tsx b/modules/react/select/stories/examples/LabelPosition.tsx index 384211603f..32640334e9 100644 --- a/modules/react/select/stories/examples/LabelPosition.tsx +++ b/modules/react/select/stories/examples/LabelPosition.tsx @@ -20,7 +20,7 @@ export const LabelPosition = () => { return (