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/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/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/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/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/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/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/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/styling-transform/package.json b/modules/styling-transform/package.json index a2991d5184..4c5a15202b 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.6", + "version": "11.1.8", "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.6", + "@workday/canvas-kit-styling": "^11.1.8", "@workday/canvas-tokens-web": "^2.0.1", "stylis": "4.0.13", "typescript": "4.9" diff --git a/modules/styling/package.json b/modules/styling/package.json index edc0e8ccb2..8e547fca82 100644 --- a/modules/styling/package.json +++ b/modules/styling/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-styling", - "version": "11.1.6", + "version": "11.1.8", "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.6", + "@workday/canvas-kit-react": "^11.1.8", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "typescript": "4.9"