chore: Merge prerelease/minor into prerelease/major

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

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "modules/**"
   ],
-  "version": "11.1.6",
+  "version": "11.1.8",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

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,

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",

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<string, React.FC<ValueProps>> = {};
 
@@ -52,18 +53,19 @@ export const PropertiesInline = ({properties}: {properties: types.ObjectProperty
           <React.Fragment key={index}>
             <br />
             {indent(level + 1)}
-            {p.description ? (
+            {p.description || p.tags.deprecated ? (
               <DescriptionTooltip
                 type="describe"
                 style={{maxWidth: '50em'}}
-                title={<MdxJSToJSX>{p.description}</MdxJSToJSX>}
+                title={<MdxJSToJSX>{p.description || p.tags.deprecated}</MdxJSToJSX>}
               >
                 <span
                   className="token property"
                   style={{
                     cursor: 'pointer',
-                    textDecoration: 'underline',
+                    textDecoration: p.tags.deprecated ? 'line-through' : 'underline',
                     textDecorationStyle: 'dotted',
+                    color: p.tags.deprecated ? colors.cinnamon600 : colors.plum600,
                   }}
                 >
                   {p.name}

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",

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",

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",

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",

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",

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<HTMLDivElement> {
   /**
@@ -21,7 +21,7 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * 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 = ({

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) => (
-  <Container>
-    {colors.map((color, index) => {
-      const isSelected = value ? color.toLowerCase() === value.toLowerCase() : false;
+export const SwatchBook = ({colors, value, onSelect}: SwatchBookProps) => {
+  return (
+    <Container>
+      {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 (
-        <SwatchContainer
-          key={index + '-' + color}
-          onClick={handleClick}
-          onKeyDown={handleKeyDown}
-          tabIndex={0}
-          isSelected={isSelected}
-        >
-          <ColorSwatch color={color} showCheck={isSelected} />
-        </SwatchContainer>
-      );
-    })}
-  </Container>
-);
+        return (
+          <SwatchContainer
+            key={index + '-' + color}
+            onClick={handleClick}
+            onKeyDown={handleKeyDown}
+            tabIndex={0}
+            isSelected={isSelected}
+            role="button"
+            aria-label={label}
+            aria-selected={isSelected}
+          >
+            <ColorSwatch color={hexCode} showCheck={isSelected} />
+          </SwatchContainer>
+        );
+      })}
+    </Container>
+  );
+};

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');
+    });
+  });
 });

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"

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",

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;
 }