diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d0f09473d..e547c3255e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,43 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [v11.1.6](https://github.com/Workday/canvas-kit/releases/tag/v11.1.6) (2024-08-27) + +### Components + +- fix: Make overflow items inert ([#2886](https://github.com/Workday/canvas-kit/pull/2886)) ([@NicholasBoll](https://github.com/NicholasBoll), manuel.carrera) +- fix(select): Forward ref to Select input ([#2892](https://github.com/Workday/canvas-kit/pull/2892)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera) + +### Infrastructure + +- fix: Enable styling compat mode to ensure proper style merging ([#2890](https://github.com/Workday/canvas-kit/pull/2890)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera) + We're seeing style merging issues when using createStyles or createStencil. It only happens when every style override of the element uses these utilities and @emotion/react or @emotion/styled is not used on the same element. These utilities rely on module execution order and we're having a few reports where modules are possibly executing out of order. In order to allow everyone to use createStyles and createStencil without worrying about style merge issues, we're going to enable compat mode all the time. We'll look into possible out-of-order execution issues in the future and plan to re-enable full static mode (for better performance) once we know why this is happening and have a proper workaround. + + For more information, please read our [discussion](https://github.com/Workday/canvas-kit/discussions/2893) + + +## [v10.3.58](https://github.com/Workday/canvas-kit/releases/tag/v10.3.58) (2024-08-27) + +### Components + +- fix(select): Forward ref to Select input ([#2892](https://github.com/Workday/canvas-kit/pull/2892)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera) + + +## [v10.3.57](https://github.com/Workday/canvas-kit/releases/tag/v10.3.57) (2024-08-27) + +### Components + +- fix: Make overflow items inert ([#2886](https://github.com/Workday/canvas-kit/pull/2886)) ([@NicholasBoll](https://github.com/NicholasBoll), manuel.carrera) + + +## [v10.3.56](https://github.com/Workday/canvas-kit/releases/tag/v10.3.56) (2024-08-27) + +### Infrastructure + +- fix: Enable styling compat mode to ensure proper style merging ([#2890](https://github.com/Workday/canvas-kit/pull/2890)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera) + We're seeing style merging issues when using createStyles or createStencil. It only happens when every style override of the element uses these utilities and @emotion/react or @emotion/styled is not used on the same element. These utilities rely on module execution order and we're having a few reports where modules are possibly executing out of order. In order to allow everyone to use createStyles and createStencil without worrying about style merge issues, we're going to enable compat mode all the time. We'll look into possible out-of-order execution issues in the future and plan to re-enable full static mode (for better performance) once we know why this is happening and have a proper workaround. + + For more information, please read our [discussion](https://github.com/Workday/canvas-kit/discussions/2893) ## [v11.1.5](https://github.com/Workday/canvas-kit/releases/tag/v11.1.5) (2024-08-23) ### Components diff --git a/cypress/integration/Select.spec.ts b/cypress/integration/Select.spec.ts index 9933d3a076..be690d796d 100644 --- a/cypress/integration/Select.spec.ts +++ b/cypress/integration/Select.spec.ts @@ -421,6 +421,23 @@ describe('Select', () => { }); }); + context.only(`given the "Ref Forwarding" story is rendered`, () => { + beforeEach(() => { + h.stories.load('Components/Inputs/Select', 'Ref Forwarding'); + }); + + it('should not have any axe errors', () => { + cy.checkA11y(); + }); + + context('the select input', () => { + it('should receive focus via ref forwarding when the button is clicked', () => { + cy.findByRole('button', {name: 'Focus Select'}).click(); + cy.findByRole('combobox').should('have.focus'); + }); + }); + }); + context(`given the "Complex" story is rendered`, () => { beforeEach(() => { h.stories.load('Components/Inputs/Select', 'Complex'); diff --git a/lerna.json b/lerna.json index b821fb73fe..66bca368de 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "modules/**" ], - "version": "11.1.5", + "version": "11.1.6", "npmClient": "yarn", "useWorkspaces": true, "command": { diff --git a/modules/codemod/package.json b/modules/codemod/package.json index 23f0980685..7cb2e39bb0 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.5", + "version": "11.1.6", "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 ee950c8f57..ecfa9d7033 100644 --- a/modules/css/package.json +++ b/modules/css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-css", - "version": "11.1.5", + "version": "11.1.6", "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 e475686786..6b2a520b5a 100644 --- a/modules/docs/package.json +++ b/modules/docs/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-docs", - "version": "11.1.5", + "version": "11.1.6", "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.5", - "@workday/canvas-kit-preview-react": "^11.1.5", - "@workday/canvas-kit-react": "^11.1.5", - "@workday/canvas-kit-styling": "^11.1.5", + "@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-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 1998d7a7cc..d30ef46e4b 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.5", + "version": "11.1.6", "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 8ff51607d4..ba4dddde07 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.5", + "version": "11.1.6", "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.5", + "@workday/canvas-kit-react": "^11.1.6", "@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 c6d54d87d2..297f38a65c 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.5", + "version": "11.1.6", "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 bbbf478ae8..ae349663b0 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.5", + "version": "11.1.6", "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 cbbc83720a..bed3a24ba3 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.5", + "version": "11.1.6", "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.5", - "@workday/canvas-kit-styling": "^11.1.5", + "@workday/canvas-kit-react": "^11.1.6", + "@workday/canvas-kit-styling": "^11.1.6", "@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 eb87521368..cb5308201f 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.5", + "version": "11.1.6", "description": "Fonts for canvas-kit-react", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/react/breadcrumbs/lib/BreadcrumbsItem.tsx b/modules/react/breadcrumbs/lib/BreadcrumbsItem.tsx index e92325bf8f..8e9874a331 100644 --- a/modules/react/breadcrumbs/lib/BreadcrumbsItem.tsx +++ b/modules/react/breadcrumbs/lib/BreadcrumbsItem.tsx @@ -1,10 +1,5 @@ import * as React from 'react'; -import { - composeHooks, - createSubcomponent, - createElemPropsHook, - useIsRTL, -} from '@workday/canvas-kit-react/common'; +import {composeHooks, createSubcomponent, useIsRTL} from '@workday/canvas-kit-react/common'; import { useListItemRegister, useOverflowListItemMeasure, @@ -33,27 +28,7 @@ export interface BreadcrumbsItemProps extends FlexProps { 'data-id'?: string; } -export const useBreadcrumbsItem = composeHooks( - useOverflowListItemMeasure, - createElemPropsHook(useBreadcrumbsModel)( - ( - {state}, - _, - elemProps: { - 'data-id'?: string; - item?: {id: string}; - } = {} - ) => { - const [localId] = React.useState(elemProps['data-id'] || elemProps.item?.id || ''); - - return { - inert: state.nonInteractiveIds.includes(localId) ? '' : undefined, - disabled: undefined, - }; - } - ), - useListItemRegister -); +export const useBreadcrumbsItem = composeHooks(useOverflowListItemMeasure, useListItemRegister); export const BreadcrumbsItem = createSubcomponent('li')({ displayName: 'Breadcrumbs.Item', diff --git a/modules/react/collection/lib/useOverflowListItemMeasure.tsx b/modules/react/collection/lib/useOverflowListItemMeasure.tsx index efdac437ad..ef71ef5001 100644 --- a/modules/react/collection/lib/useOverflowListItemMeasure.tsx +++ b/modules/react/collection/lib/useOverflowListItemMeasure.tsx @@ -46,6 +46,7 @@ export const useOverflowListItemMeasure = createElemPropsHook(useOverflowListMod ref: elementRef, 'aria-hidden': hidden || undefined, style: hidden ? hiddenStyles : {}, + inert: hidden ? '' : undefined, }; } ); diff --git a/modules/react/layout/spec/mergeStyles.spec.tsx b/modules/react/layout/spec/mergeStyles.spec.tsx index 7cadbf4da7..d24392ebbe 100644 --- a/modules/react/layout/spec/mergeStyles.spec.tsx +++ b/modules/react/layout/spec/mergeStyles.spec.tsx @@ -41,8 +41,8 @@ describe('mergeStyles', () => { expect(screen.getByTestId('base')).toHaveStyle({padding: padding.styleAttribute}); }); - - it('should allow the cs prop to override base styles', () => { + // Skipping this for now while we enable compat mode to run all the time + it.skip('should allow the cs prop to override base styles', () => { const overrideStyles = createStyles({ padding: padding.createStyles, }); diff --git a/modules/react/package.json b/modules/react/package.json index 0cbb127143..fadd10e52b 100644 --- a/modules/react/package.json +++ b/modules/react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-react", - "version": "11.1.5", + "version": "11.1.6", "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.5", - "@workday/canvas-kit-styling": "^11.1.5", + "@workday/canvas-kit-popup-stack": "^11.1.6", + "@workday/canvas-kit-styling": "^11.1.6", "@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/select/lib/hooks/useSelectInput.ts b/modules/react/select/lib/hooks/useSelectInput.ts index 72a6b97d71..b2f70283c9 100644 --- a/modules/react/select/lib/hooks/useSelectInput.ts +++ b/modules/react/select/lib/hooks/useSelectInput.ts @@ -33,25 +33,27 @@ export const useSelectInput = composeHooks( model.state.targetRef as any as React.Ref ); - const {localRef, elementRef} = useLocalRef(ref as React.Ref); + const {localRef: hiddenLocalRef, elementRef: hiddenElementRef} = useLocalRef( + ref as React.Ref + ); // We need to create a proxy between the multiple inputs. We need to redirect a few methods to // the visible input React.useImperativeHandle( - elementRef, + hiddenElementRef, () => { - if (localRef.current) { - localRef.current.focus = (options?: FocusOptions) => { + if (hiddenLocalRef.current) { + hiddenLocalRef.current.focus = (options?: FocusOptions) => { textInputRef.current!.focus(options); }; - localRef.current.blur = () => { + hiddenLocalRef.current.blur = () => { textInputRef.current!.blur(); }; } - return localRef.current!; + return hiddenLocalRef.current!; }, - [textInputRef, localRef] + [textInputRef, hiddenLocalRef] ); // Remap the Popup model's targetRef to be the visible ref. `ref` and `model.state.targetRef` are already linked. We have to override that. @@ -172,6 +174,7 @@ export const useSelectInput = composeHooks( }, onChange: handleOnChange, autoComplete: 'off', + ref: hiddenElementRef, // When the hidden input is focused, we want to show the focus/hover states of the input that sits below it. onFocus() { textInputRef.current?.focus(); diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json index 9c2a42e260..aceae89eca 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.5", + "version": "11.1.6", "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.5", + "@workday/canvas-kit-styling": "^11.1.6", "@workday/canvas-tokens-web": "^2.0.0", "stylis": "4.0.13", "typescript": "4.2" diff --git a/modules/styling/lib/cs.ts b/modules/styling/lib/cs.ts index 376deba31a..154d92226f 100644 --- a/modules/styling/lib/cs.ts +++ b/modules/styling/lib/cs.ts @@ -739,8 +739,13 @@ export function handleCsProp< const {cs, style, className, ...restProps} = elemProps; const instance = getInstance(); - // We are going to track if any runtime styles are detected - let shouldRuntimeMergeStyles = false; + // We're seeing style merging issues when using createStyles or createStencil. It only happens when + // every style override of the element uses these utilities and @emotion/react or @emotion/styled is not used on the same element. + // These utilities rely on module execution order and we're having a few reports where modules are possibly executing out of order. + // In order to allow everyone to use createStyles and createStencil without worrying about style merge issues, we're going + // to enable compat mode all the time. We'll look into possible out-of-order execution issues in the future and plan to re-enable + // full static mode (for better performance) once we know why this is happening and have a proper workaround. + let shouldRuntimeMergeStyles = true; // The order is intentional. The `className` should go first, then the `cs` prop. If we don't do // runtime merging, this order doesn't actually matter because the browser doesn't care the order diff --git a/modules/styling/package.json b/modules/styling/package.json index d697a657ed..766c41f111 100644 --- a/modules/styling/package.json +++ b/modules/styling/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-styling", - "version": "11.1.5", + "version": "11.1.6", "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.5", + "@workday/canvas-kit-react": "^11.1.6", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.0", "typescript": "4.2" diff --git a/modules/styling/spec/cs.spec.tsx b/modules/styling/spec/cs.spec.tsx index c4b139863d..ec01e87cf7 100644 --- a/modules/styling/spec/cs.spec.tsx +++ b/modules/styling/spec/cs.spec.tsx @@ -1222,7 +1222,9 @@ describe('handleCsProp', () => { expect(screen.getByTestId('base')).toHaveStyle({padding: padding.styleAttribute}); }); - it('should allow the cs prop to override base styles', () => { + // While we have compat mode enabled, we'll skip these tests. The class generated comes from emotion and + //we have no way of validating the correct class. + it.skip('should allow the cs prop to override base styles', () => { const overrideStyles = createStyles({ padding: padding.createStyles, });