From 8e4c6748cadacb575a568cea78156ed5e2554f5b Mon Sep 17 00:00:00 2001 From: wooksauce Date: Thu, 29 Aug 2024 13:15:31 -0700 Subject: [PATCH 1/5] fix(color-picker): Add support for a11y labels on color swatches (#2894) Fixes: #701 Set `role`, `aria-label`, and `aria-selected` to provide better accessibility when user is interacting with color swatches [category:Accessibility] Co-authored-by: Kiwook Kwon --- .../color-picker/lib/ColorPicker.tsx | 14 +++-- .../color-picker/lib/parts/SwatchBook.tsx | 56 +++++++++++-------- .../color-picker/spec/ColorPicker.spec.tsx | 41 +++++++++++++- 3 files changed, 84 insertions(+), 27 deletions(-) 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'); + }); + }); }); From f2f16c84455ece760c07e75631480f0ec65b9ada Mon Sep 17 00:00:00 2001 From: alanbsmith Date: Thu, 29 Aug 2024 20:16:19 +0000 Subject: [PATCH 2/5] chore: Release v11.1.7 [skip release] --- CHANGELOG.md | 7 +++++++ lerna.json | 2 +- modules/codemod/package.json | 2 +- modules/css/package.json | 2 +- modules/docs/package.json | 10 +++++----- modules/labs-css/package.json | 2 +- modules/labs-react/package.json | 4 ++-- modules/popup-stack/package.json | 2 +- modules/preview-css/package.json | 2 +- modules/preview-react/package.json | 6 +++--- modules/react-fonts/package.json | 2 +- modules/react/package.json | 6 +++--- modules/styling-transform/package.json | 4 ++-- modules/styling/package.json | 4 ++-- 14 files changed, 31 insertions(+), 24 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e547c3255e..fc4a0c35b3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [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..dfb708de9a 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "modules/**" ], - "version": "11.1.6", + "version": "11.1.7", "npmClient": "yarn", "useWorkspaces": true, "command": { diff --git a/modules/codemod/package.json b/modules/codemod/package.json index 7cb2e39bb0..2d89d16764 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.7", "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..1c62b01cc9 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.7", "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/package.json b/modules/docs/package.json index 6b2a520b5a..2fabf557b6 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.7", "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.7", + "@workday/canvas-kit-preview-react": "^11.1.7", + "@workday/canvas-kit-react": "^11.1.7", + "@workday/canvas-kit-styling": "^11.1.7", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.0", "markdown-to-jsx": "^7.2.0", diff --git a/modules/labs-css/package.json b/modules/labs-css/package.json index d30ef46e4b..382e3e5cfd 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.7", "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 ba4dddde07..6f8780b3ed 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.7", "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,7 +46,7 @@ "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@workday/canvas-kit-react": "^11.1.6", + "@workday/canvas-kit-react": "^11.1.7", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/design-assets-types": "^0.2.8", "chroma-js": "^2.1.0", diff --git a/modules/popup-stack/package.json b/modules/popup-stack/package.json index 297f38a65c..6c898aba11 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.7", "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..7d76ce5c73 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.7", "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/package.json b/modules/preview-react/package.json index bed3a24ba3..5299813964 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.7", "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.7", + "@workday/canvas-kit-styling": "^11.1.7", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.0", "@workday/design-assets-types": "^0.2.8" diff --git a/modules/react-fonts/package.json b/modules/react-fonts/package.json index cb5308201f..c7181a394b 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.7", "description": "Fonts for canvas-kit-react", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/react/package.json b/modules/react/package.json index fadd10e52b..6585607ea7 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.7", "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.7", + "@workday/canvas-kit-styling": "^11.1.7", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.0", "@workday/design-assets-types": "^0.2.8", diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json index aceae89eca..0a42adc80f 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.7", "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.7", "@workday/canvas-tokens-web": "^2.0.0", "stylis": "4.0.13", "typescript": "4.2" diff --git a/modules/styling/package.json b/modules/styling/package.json index 766c41f111..2b110a229c 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.7", "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.7", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.0", "typescript": "4.2" From 99cc1073773a815a254fdf241033390050d3ead3 Mon Sep 17 00:00:00 2001 From: Josh <44883293+josh-bagwell@users.noreply.github.com> Date: Fri, 6 Sep 2024 10:18:07 -0600 Subject: [PATCH 3/5] fix: Updated ButtonColors interface to deprecated focusRing from focus (#2906) Fixes: #2905 This fixes a TS error in buttons that wouldn't allow the update of the focusRing styles through the colors prop. Also, deprecated the use of focusRing within focus in the colors prop on buttons and added support for boxShadowInner and boxShadowOuter within focus in colors prop. [category:Components] Release Note: 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. --- modules/docs/lib/Value.tsx | 8 +++++--- modules/react/button/lib/types.ts | 11 +++++++++++ .../button/stories/button/examples/CustomStyles.tsx | 5 ++++- 3 files changed, 20 insertions(+), 4 deletions(-) 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/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 903a0a1399..495429c3f7 100644 --- a/modules/react/button/stories/button/examples/CustomStyles.tsx +++ b/modules/react/button/stories/button/examples/CustomStyles.tsx @@ -20,7 +20,10 @@ const getDropdownColors = () => { label: colors.frenchVanilla100, }, active: {}, - focus: {}, + focus: { + boxShadowInner: colors.berrySmoothie200, + boxShadowOuter: colors.berrySmoothie400, + }, disabled: {}, }; }; From 59c7bda2d43fbefb738588ec1033b7b9f837ceaa Mon Sep 17 00:00:00 2001 From: alanbsmith Date: Fri, 6 Sep 2024 16:20:02 +0000 Subject: [PATCH 4/5] chore: Release v10.3.59 [skip release] --- CHANGELOG.md | 8 ++++++++ lerna.json | 2 +- modules/codemod/package.json | 2 +- modules/docs/package.json | 10 +++++----- modules/labs-react/package.json | 4 ++-- modules/popup-stack/package.json | 2 +- modules/preview-react/package.json | 6 +++--- modules/react-fonts/package.json | 2 +- modules/react/package.json | 6 +++--- modules/styling-transform/package.json | 4 ++-- modules/styling/package.json | 4 ++-- 11 files changed, 29 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a6ddd8381c..48d67e5110 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [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. + + ## [v10.3.58](https://github.com/Workday/canvas-kit/releases/tag/v10.3.58) (2024-08-27) ### Components diff --git a/lerna.json b/lerna.json index 9ecd6f8bf4..43f9a18972 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "modules/**" ], - "version": "10.3.58", + "version": "10.3.59", "npmClient": "yarn", "useWorkspaces": true, "command": { diff --git a/modules/codemod/package.json b/modules/codemod/package.json index 60a8781b9d..ea9a388495 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": "10.3.58", + "version": "10.3.59", "description": "A collection of codemods for use on Workday Canvas Kit packages.", "main": "dist/es6/index.js", "sideEffects": false, diff --git a/modules/docs/package.json b/modules/docs/package.json index 65f38140d4..f3813efdab 100644 --- a/modules/docs/package.json +++ b/modules/docs/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-docs", - "version": "10.3.58", + "version": "10.3.59", "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": "^10.3.58", - "@workday/canvas-kit-preview-react": "^10.3.58", - "@workday/canvas-kit-react": "^10.3.58", - "@workday/canvas-kit-styling": "^10.3.58", + "@workday/canvas-kit-labs-react": "^10.3.59", + "@workday/canvas-kit-preview-react": "^10.3.59", + "@workday/canvas-kit-react": "^10.3.59", + "@workday/canvas-kit-styling": "^10.3.59", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^1.0.0", "markdown-to-jsx": "^6.10.3", diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json index 70543ec5a3..2dbf34aff2 100644 --- a/modules/labs-react/package.json +++ b/modules/labs-react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-labs-react", - "version": "10.3.58", + "version": "10.3.59", "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,7 +46,7 @@ "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@workday/canvas-kit-react": "^10.3.58", + "@workday/canvas-kit-react": "^10.3.59", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/design-assets-types": "^0.2.8", "chroma-js": "^2.1.0", diff --git a/modules/popup-stack/package.json b/modules/popup-stack/package.json index de3997c60b..9c0df56feb 100644 --- a/modules/popup-stack/package.json +++ b/modules/popup-stack/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-popup-stack", - "version": "10.3.58", + "version": "10.3.59", "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-react/package.json b/modules/preview-react/package.json index e0f7234d18..3edadd4b35 100644 --- a/modules/preview-react/package.json +++ b/modules/preview-react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-preview-react", - "version": "10.3.58", + "version": "10.3.59", "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", @@ -47,8 +47,8 @@ "@emotion/is-prop-valid": "^1.1.1", "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@workday/canvas-kit-react": "^10.3.58", - "@workday/canvas-kit-styling": "^10.3.58", + "@workday/canvas-kit-react": "^10.3.59", + "@workday/canvas-kit-styling": "^10.3.59", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^1.0.0", "@workday/design-assets-types": "^0.2.8" diff --git a/modules/react-fonts/package.json b/modules/react-fonts/package.json index 7273f5c300..0812e3a544 100644 --- a/modules/react-fonts/package.json +++ b/modules/react-fonts/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-react-fonts", - "version": "10.3.58", + "version": "10.3.59", "description": "Fonts for canvas-kit-react", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/react/package.json b/modules/react/package.json index ac9b2aa5eb..b94bf4b080 100644 --- a/modules/react/package.json +++ b/modules/react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-react", - "version": "10.3.58", + "version": "10.3.59", "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": "^10.3.58", - "@workday/canvas-kit-styling": "^10.3.58", + "@workday/canvas-kit-popup-stack": "^10.3.59", + "@workday/canvas-kit-styling": "^10.3.59", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^1.0.0", "@workday/design-assets-types": "^0.2.8", diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json index 037112260d..1c12629458 100644 --- a/modules/styling-transform/package.json +++ b/modules/styling-transform/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-styling-transform", - "version": "10.3.58", + "version": "10.3.59", "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": "^10.3.58", + "@workday/canvas-kit-styling": "^10.3.59", "stylis": "4.0.13", "typescript": "4.2" }, diff --git a/modules/styling/package.json b/modules/styling/package.json index f2d45ee4a9..fcc8523d39 100644 --- a/modules/styling/package.json +++ b/modules/styling/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-styling", - "version": "10.3.58", + "version": "10.3.59", "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": "^10.3.58", + "@workday/canvas-kit-react": "^10.3.59", "@workday/canvas-tokens-web": "^1.0.0", "typescript": "4.2" } From 6a3bca7c56f654e282109430f4918d5bc89f2d21 Mon Sep 17 00:00:00 2001 From: alanbsmith Date: Fri, 6 Sep 2024 18:04:24 +0000 Subject: [PATCH 5/5] chore: Release v11.1.8 [skip release] --- CHANGELOG.md | 8 ++++++++ lerna.json | 2 +- modules/codemod/package.json | 2 +- modules/css/package.json | 2 +- modules/docs/package.json | 10 +++++----- modules/labs-css/package.json | 2 +- modules/labs-react/package.json | 4 ++-- modules/popup-stack/package.json | 2 +- modules/preview-css/package.json | 2 +- modules/preview-react/package.json | 6 +++--- modules/react-fonts/package.json | 2 +- modules/react/package.json | 6 +++--- modules/styling-transform/package.json | 4 ++-- modules/styling/package.json | 6 +++--- 14 files changed, 33 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f1ff635ece..ab98493614 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,14 @@ 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 diff --git a/lerna.json b/lerna.json index dfb708de9a..9bd0003aa7 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "modules/**" ], - "version": "11.1.7", + "version": "11.1.8", "npmClient": "yarn", "useWorkspaces": true, "command": { diff --git a/modules/codemod/package.json b/modules/codemod/package.json index 2d89d16764..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.7", + "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 1c62b01cc9..31b3761381 100644 --- a/modules/css/package.json +++ b/modules/css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-css", - "version": "11.1.7", + "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/package.json b/modules/docs/package.json index 2fabf557b6..7d01c04d85 100644 --- a/modules/docs/package.json +++ b/modules/docs/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-docs", - "version": "11.1.7", + "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.7", - "@workday/canvas-kit-preview-react": "^11.1.7", - "@workday/canvas-kit-react": "^11.1.7", - "@workday/canvas-kit-styling": "^11.1.7", + "@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.0", "markdown-to-jsx": "^7.2.0", diff --git a/modules/labs-css/package.json b/modules/labs-css/package.json index 382e3e5cfd..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.7", + "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 6f8780b3ed..77cf010266 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.7", + "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,7 +46,7 @@ "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", - "@workday/canvas-kit-react": "^11.1.7", + "@workday/canvas-kit-react": "^11.1.8", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/design-assets-types": "^0.2.8", "chroma-js": "^2.1.0", diff --git a/modules/popup-stack/package.json b/modules/popup-stack/package.json index 6c898aba11..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.7", + "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 7d76ce5c73..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.7", + "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/package.json b/modules/preview-react/package.json index 5299813964..c158771956 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.7", + "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.7", - "@workday/canvas-kit-styling": "^11.1.7", + "@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.0", "@workday/design-assets-types": "^0.2.8" diff --git a/modules/react-fonts/package.json b/modules/react-fonts/package.json index c7181a394b..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.7", + "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/package.json b/modules/react/package.json index 6585607ea7..f4df8acf35 100644 --- a/modules/react/package.json +++ b/modules/react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-react", - "version": "11.1.7", + "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.7", - "@workday/canvas-kit-styling": "^11.1.7", + "@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.0", "@workday/design-assets-types": "^0.2.8", diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json index 0a42adc80f..e0007d3e31 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.7", + "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.7", + "@workday/canvas-kit-styling": "^11.1.8", "@workday/canvas-tokens-web": "^2.0.0", "stylis": "4.0.13", "typescript": "4.2" diff --git a/modules/styling/package.json b/modules/styling/package.json index 802578302f..ed2ed967b9 100644 --- a/modules/styling/package.json +++ b/modules/styling/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-styling", - "version": "11.1.7", + "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,9 +53,9 @@ "@emotion/react": "^11.7.1", "@emotion/serialize": "^1.0.2", "@emotion/styled": "^11.6.0", - "@workday/canvas-kit-react": "^11.1.7", - "@workday/canvas-tokens-web": "^2.0.0", + "@workday/canvas-kit-react": "^11.1.8", "@workday/canvas-system-icons-web": "^3.0.0", + "@workday/canvas-tokens-web": "^2.0.0", "typescript": "4.2" } }