Merge branch 'prerelease/major' into modal-button-example-update-24-08

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

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'],
 

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(<CustomFocus />);
-    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', () => {

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

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

lerna.json

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

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;

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

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<string, any>) => {
+    return runInlineTest(fn, options, {source: input}, expected, {parser: 'tsx'});
+  };

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'
+            <>
+                <FormField hasError={true} />
+            </>
+        `;
+
+    const expected = stripIndent`
+            import {FormField} from 'any-other-package'
+            <>
+                <FormField hasError={true} />
+            </>
+        `;
+    expectTransform(input, expected);
+  });
+
+  it('should rename orientation horizontal to horizontalStart', () => {
+    const input = stripIndent`
+        import {FormField} from '@workday/canvas-kit-preview-react/form-field'
+        <>
+            <FormField orientation="horizontal" />
+        </>
+    `;
+
+    const expected = stripIndent`
+        import {FormField} from '@workday/canvas-kit-preview-react/form-field'
+        <>
+            <FormField orientation="horizontalStart" />
+        </>
+    `;
+    expectTransform(input, expected);
+  });
+
+  it('should change renamed FormField', () => {
+    const input = stripIndent`
+        import {FormField as CanvasForm} from '@workday/canvas-kit-preview-react/form-field'
+
+        <>
+            <CanvasForm orientation="horizontal" />
+        </>
+    `;
+
+    const expected = stripIndent`
+        import {FormField as CanvasForm} from '@workday/canvas-kit-preview-react/form-field'
+
+        <>
+            <CanvasForm orientation="horizontalStart" />
+        </>
+    `;
+    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"});
+        <StyledForm orientation="horizontal" />
+    `;
+
+    const expected = stripIndent`
+        import {FormField} from '@workday/canvas-kit-preview-react/form-field'
+        const StyledForm = styled(FormField)({color: "#000"});
+        <StyledForm orientation="horizontalStart" />
+    `;
+    expectTransform(input, expected);
+  });
+});

modules/codemod/lib/v12/utils/getImportRenameMap.ts

@@ -0,0 +1,63 @@
+import {Collection, JSCodeshift, CallExpression} from 'jscodeshift';
+
+export function getImportRenameMap(
+  j: JSCodeshift,
+  root: Collection<any>,
+  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<string, string> = {};
+  const styledMap: Record<string, string> = {};
+  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};
+}

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}