diff --git a/CHANGELOG.md b/CHANGELOG.md index 7ca5b43b99..693ac1b2b2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,39 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [v11.0.18](https://github.com/Workday/canvas-kit/releases/tag/v11.0.18) (2024-07-18) + +### Components + +- fix(avatar): Lazy load avatar images ([#2833](https://github.com/Workday/canvas-kit/pull/2833)) ([@NicholasBoll](https://github.com/NicholasBoll)) + + +## [v11.0.17](https://github.com/Workday/canvas-kit/releases/tag/v11.0.17) (2024-07-17) + +### Documentation + +- docs: Fixing and updating the AriaLiveRegion storybook examples ([#2818](https://github.com/Workday/canvas-kit/pull/2818)) ([@williamjstanton](https://github.com/williamjstanton), William Stanton, [@mannycarrera4](https://github.com/mannycarrera4), [@josh-bagwell](https://github.com/josh-bagwell), manuel.carrera) + + +## [v11.0.16](https://github.com/Workday/canvas-kit/releases/tag/v11.0.16) (2024-07-17) + +### Infrastructure + +- chore: SNYK Security upgrade markdown-to-jsx from 6.11.4 to 7.2.0 ([#2826](https://github.com/Workday/canvas-kit/pull/2826)) ([@mannycarrera4](https://github.com/mannycarrera4), [@snyk-bot](https://github.com/snyk-bot), manuel.carrera) + + +## [v11.0.15](https://github.com/Workday/canvas-kit/releases/tag/v11.0.15) (2024-07-11) + +### Components + +- fix(select): Add conditional for Select in React.StrictMode ([#2822](https://github.com/Workday/canvas-kit/pull/2822)) ([@NicholasBoll](https://github.com/NicholasBoll)) + + +## [v10.3.44](https://github.com/Workday/canvas-kit/releases/tag/v10.3.44) (2024-07-10) + +### Components + +- fix(select): Add conditional for Select in React.StrictMode ([#2822](https://github.com/Workday/canvas-kit/pull/2822)) ([@NicholasBoll](https://github.com/NicholasBoll)) ## [v11.0.14](https://github.com/Workday/canvas-kit/releases/tag/v11.0.14) (2024-07-10) ### Components diff --git a/lerna.json b/lerna.json index 203a23b46a..ed2e243ec1 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "modules/**" ], - "version": "11.0.14", + "version": "11.0.18", "npmClient": "yarn", "useWorkspaces": true, "command": { diff --git a/modules/codemod/package.json b/modules/codemod/package.json index ba20ac0693..4648801def 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.0.14", + "version": "11.0.18", "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 15e89214c9..66078bd98e 100644 --- a/modules/css/package.json +++ b/modules/css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-css", - "version": "11.0.14", + "version": "11.0.18", "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 bd2c3cc5e5..4681911b0e 100644 --- a/modules/docs/package.json +++ b/modules/docs/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-docs", - "version": "11.0.14", + "version": "11.0.18", "description": "Documentation components of Canvas Kit components", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -44,13 +44,13 @@ "dependencies": { "@emotion/styled": "^11.6.0", "@storybook/csf": "0.0.1", - "@workday/canvas-kit-labs-react": "^11.0.14", - "@workday/canvas-kit-preview-react": "^11.0.14", - "@workday/canvas-kit-react": "^11.0.14", - "@workday/canvas-kit-styling": "^11.0.14", + "@workday/canvas-kit-labs-react": "^11.0.18", + "@workday/canvas-kit-preview-react": "^11.0.18", + "@workday/canvas-kit-react": "^11.0.18", + "@workday/canvas-kit-styling": "^11.0.18", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.0", - "markdown-to-jsx": "^6.10.3", + "markdown-to-jsx": "^7.2.0", "ts-node": "^10.9.1" }, "devDependencies": { diff --git a/modules/labs-css/package.json b/modules/labs-css/package.json index 8344ceb66f..ab31ba3aeb 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.0.14", + "version": "11.0.18", "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 34ba72154d..7908ead95a 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.0.14", + "version": "11.0.18", "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.0.14", + "@workday/canvas-kit-react": "^11.0.18", "@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 9836561ff2..6e211030b3 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.0.14", + "version": "11.0.18", "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 4f368b9c15..1c7ff60025 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.0.14", + "version": "11.0.18", "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 5ccd70e4fb..ee6ad0a0fc 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.0.14", + "version": "11.0.18", "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.0.14", - "@workday/canvas-kit-styling": "^11.0.14", + "@workday/canvas-kit-react": "^11.0.18", + "@workday/canvas-kit-styling": "^11.0.18", "@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 f6df1d7540..f0ba675bc7 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.0.14", + "version": "11.0.18", "description": "Fonts for canvas-kit-react", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx index 446b9881f4..47289a1600 100644 --- a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx +++ b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx @@ -1,9 +1,8 @@ import {AriaLiveRegion} from '@workday/canvas-kit-react/common'; -import {FilterListWithLiveStatus} from './examples/common/FilterListWithLiveStatus'; -import {VisibleLiveRegion} from './examples/common/VisibleLiveRegion'; -import {HiddenLiveRegion} from './examples/common/HiddenLiveRegion'; -import {TextInputWithLiveError} from './examples/common/TextInputWithLiveError'; -import {IconButtonsWithLiveBadges} from './examples/common/IconButtonsWithLiveBadges'; +import {FilterListWithLiveStatus} from './examples/AriaLiveRegions/FilterListWithLiveStatus'; +import {VisibleLiveRegion} from './examples/AriaLiveRegions/VisibleLiveRegion'; +import {HiddenLiveRegion} from './examples/AriaLiveRegions/HiddenLiveRegion'; +import {TextInputWithLiveError} from './examples/AriaLiveRegions/TextInputWithLiveError'; @@ -57,7 +56,7 @@ experience when moving the keyboard focus to a new element on screen isn't feasi In this example, a live region is applied to a short UI text describing the number of items shown in the list. As you type characters into the input, listen for the screen reader to automatically -describe how many items in the list or shown. +describe how many items in the list are shown. @@ -73,4 +72,9 @@ of error conditions. As forms increase in complexity, live regions on each error increasingly distracting and disruptive to the experience, especially if users are trying to first understand the information that is required of them to complete the task. +**Note:** The `` component is used inside of the `Hint` to ensure the live +region remains in the browser DOM at all times. The `Hint` is only rendered in the DOM when it +contains content, so it will not work reliably as a live region for screen readers using the +`as={AriaLiveRegion}` prop. + diff --git a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx b/modules/react/_examples/stories/examples/AriaLiveRegions/FilterListWithLiveStatus.tsx similarity index 70% rename from modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx rename to modules/react/_examples/stories/examples/AriaLiveRegions/FilterListWithLiveStatus.tsx index 2568bfdf48..1961a83348 100644 --- a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx +++ b/modules/react/_examples/stories/examples/AriaLiveRegions/FilterListWithLiveStatus.tsx @@ -1,10 +1,12 @@ import React, {useState} from 'react'; -import {TextInput} from '@workday/canvas-kit-preview-react/text-input'; -import {BodyText, Heading} from '@workday/canvas-kit-react/text'; + import {AriaLiveRegion} from '@workday/canvas-kit-react/common'; +import {BodyText, Heading} from '@workday/canvas-kit-react/text'; import {Flex} from '@workday/canvas-kit-react/layout'; +import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {TextInput} from '@workday/canvas-kit-react/text-input'; import {system, base} from '@workday/canvas-tokens-web'; -import {createStyles, px2rem} from '@workday/canvas-kit-styling'; +import {createStyles, cssVar, px2rem} from '@workday/canvas-kit-styling'; const fruits = [ 'Apples', @@ -23,13 +25,19 @@ const liveRegionStyle = createStyles({ padding: system.space.x2, }); -const listStyles = {paddingLeft: '0px'}; +const listStyles = createStyles({ + paddingLeft: system.space.zero, +}); const listItemStyles = createStyles({ listStyle: 'none', paddingLeft: system.space.zero, }); +const flexStyles = createStyles({ + gap: system.space.x4, +}); + let filteredFruits = fruits; export const FilterListWithLiveStatus = () => { @@ -41,7 +49,7 @@ export const FilterListWithLiveStatus = () => { return ( <> - + Fruits @@ -49,11 +57,11 @@ export const FilterListWithLiveStatus = () => { - - Filter Items: - - -
    + + Filter Items: + + +
      {filteredFruits.map(i => ( {i} diff --git a/modules/react/_examples/stories/examples/AriaLiveRegions/HiddenLiveRegion.tsx b/modules/react/_examples/stories/examples/AriaLiveRegions/HiddenLiveRegion.tsx new file mode 100644 index 0000000000..60bffad5fd --- /dev/null +++ b/modules/react/_examples/stories/examples/AriaLiveRegions/HiddenLiveRegion.tsx @@ -0,0 +1,46 @@ +import React from 'react'; + +import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common'; +import {PrimaryButton} from '@workday/canvas-kit-react/button'; +import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {Flex} from '@workday/canvas-kit-react/layout'; +import {Text} from '@workday/canvas-kit-react/text'; +import {TextInput} from '@workday/canvas-kit-react/text-input'; +import {createStyles} from '@workday/canvas-kit-styling'; +import {system} from '@workday/canvas-tokens-web'; + +let liveRegionStr = ''; + +const flexStyles = createStyles({ + gap: system.space.x4, + alignItems: 'center', +}); + +export const HiddenLiveRegion = () => { + const [message, setMessage] = React.useState(''); + + function handleChange(e) { + setMessage(e.target.value); + } + + function handleSendMessage(e) { + e.preventDefault(); + liveRegionStr = message; + setMessage(''); + } + + return ( + <> + + + Type your message: + + + Send Message + + + {liveRegionStr} + + + ); +}; diff --git a/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx b/modules/react/_examples/stories/examples/AriaLiveRegions/IconButtonsWithLiveBadges.tsx similarity index 100% rename from modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx rename to modules/react/_examples/stories/examples/AriaLiveRegions/IconButtonsWithLiveBadges.tsx diff --git a/modules/react/_examples/stories/examples/AriaLiveRegions/TextInputWithLiveError.tsx b/modules/react/_examples/stories/examples/AriaLiveRegions/TextInputWithLiveError.tsx new file mode 100644 index 0000000000..7b1e41e3f1 --- /dev/null +++ b/modules/react/_examples/stories/examples/AriaLiveRegions/TextInputWithLiveError.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common'; +import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {PrimaryButton} from '@workday/canvas-kit-react/button'; +import {TextInput} from '@workday/canvas-kit-react/text-input'; +import {system} from '@workday/canvas-tokens-web'; +import {createStyles} from '@workday/canvas-kit-styling'; + +const hintStyles = createStyles({ + height: system.space.x6, +}); +export const TextInputWithLiveError = () => { + const errMsg = 'Error: First name is required.'; + const [hasError, setHasError] = React.useState('no'); + const inputRef = React.useRef(null); + const handleBlur = e => setHasError(e.target.value.trim().length === 0 ? 'error' : 'no'); + const handleSubmit = () => hasError && changeFocus(inputRef.current); + + return ( + <> + + First Name: + + + {hasError === 'error' && errMsg} + + + Continue + + ); +}; diff --git a/modules/react/_examples/stories/examples/AriaLiveRegions/VisibleLiveRegion.tsx b/modules/react/_examples/stories/examples/AriaLiveRegions/VisibleLiveRegion.tsx new file mode 100644 index 0000000000..56af4e08ec --- /dev/null +++ b/modules/react/_examples/stories/examples/AriaLiveRegions/VisibleLiveRegion.tsx @@ -0,0 +1,61 @@ +import React from 'react'; + +import {AriaLiveRegion} from '@workday/canvas-kit-react/common'; +import {PrimaryButton} from '@workday/canvas-kit-react/button'; +import {FormField} from '@workday/canvas-kit-preview-react/form-field'; +import {Flex} from '@workday/canvas-kit-react/layout'; +import {Text} from '@workday/canvas-kit-react/text'; +import {TextInput} from '@workday/canvas-kit-react/text-input'; +import {system, base} from '@workday/canvas-tokens-web'; +import {createStyles, px2rem, calc} from '@workday/canvas-kit-styling'; + +const liveRegionStyle = createStyles({ + border: `${px2rem(1)} solid ${system.color.border.caution.default}`, + backgroundColor: system.color.bg.caution.default, + padding: system.space.x4, + display: 'block', + marginBlockStart: system.space.x4, + marginBlockEnd: system.space.x4, + width: calc.multiply(system.space.x16, 7), +}); + +const flexGapStyles = createStyles({ + gap: system.space.x4, + alignItems: 'center', +}); + +let liveRegionStr = 'This is an ARIA Live Region!'; + +export const VisibleLiveRegion = () => { + const [message, setMessage] = React.useState(''); + + function handleChange(e) { + setMessage(e.target.value); + } + + function handleSendMessage(e) { + e.preventDefault(); + liveRegionStr = message; + setMessage(''); + } + + return ( + <> + + {liveRegionStr} + + + + Type your message: + + + Send Message + + + ); +}; diff --git a/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx b/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx deleted file mode 100644 index 355a621546..0000000000 --- a/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, {useState, useRef} from 'react'; -import {AriaLiveRegion, AccessibleHide} from '@workday/canvas-kit-react/common'; -import {PrimaryButton} from '@workday/canvas-kit-react/button'; -import {TextInput} from '@workday/canvas-kit-preview-react/text-input'; -import {Flex} from '@workday/canvas-kit-react/layout'; -import {system} from '@workday/canvas-tokens-web'; - -export const HiddenLiveRegion = () => { - const [message, setMessage] = useState('This is an ARIA Live Region!'); - const inputRef = useRef(); - function handleSendMessage() { - setMessage(inputRef.current.value); - inputRef.current.value = ''; - } - - return ( - <> - - - Type your message: - - - Send Message - - - {message} - - - ); -}; diff --git a/modules/react/_examples/stories/examples/common/TextInputWithLiveError.tsx b/modules/react/_examples/stories/examples/common/TextInputWithLiveError.tsx deleted file mode 100644 index fb50e44385..0000000000 --- a/modules/react/_examples/stories/examples/common/TextInputWithLiveError.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, {useState, useRef} from 'react'; -import {TextInput} from '@workday/canvas-kit-preview-react/text-input'; -import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common'; -import {PrimaryButton} from '@workday/canvas-kit-react/button'; - -export const TextInputWithLiveError = () => { - const errMsg = 'Error: First name is required.'; - const [hasError, setHasError] = useState(false); - const inputRef = useRef(); - const handleBlur = e => setHasError(e.target.value.trim().length === 0); - const handleSubmit = () => hasError && changeFocus(inputRef.current); - - return ( - <> - - First Name: - - - {hasError && errMsg} - - - Continue - - ); -}; diff --git a/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx b/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx deleted file mode 100644 index 0ec7bee9f5..0000000000 --- a/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, {useState, useRef} from 'react'; -import {AriaLiveRegion} from '@workday/canvas-kit-react/common'; -import {PrimaryButton} from '@workday/canvas-kit-react/button'; -import {TextInput} from '@workday/canvas-kit-preview-react/text-input'; -import {Flex} from '@workday/canvas-kit-react/layout'; -import {Text} from '@workday/canvas-kit-react/text'; -import {system, base} from '@workday/canvas-tokens-web'; -import {createStyles, px2rem} from '@workday/canvas-kit-styling'; - -const liveRegionStyle = createStyles({ - border: `${px2rem(1)} solid ${base.cantaloupe400}`, - backgroundColor: base.cantaloupe100, - padding: system.space.x4, - display: 'block', - margin: system.space.x4 + ' 0', -}); - -export const VisibleLiveRegion = () => { - const [message, setMessage] = useState('This is an ARIA Live Region!'); - const inputRef = useRef(); - function handleSendMessage() { - setMessage(inputRef.current.value); - inputRef.current.value = ''; - } - - return ( - <> - - {message} - - - - Type your message: - - - Send Message - - - ); -}; diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx index b849a4af62..5988f251b5 100644 --- a/modules/react/avatar/lib/Avatar.tsx +++ b/modules/react/avatar/lib/Avatar.tsx @@ -184,6 +184,7 @@ export const Avatar: AvatarOverload = React.forwardRef( onLoad={loadImage} isLoaded={imageLoaded} objectFit={objectFit} + loading="lazy" /> )} diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx index 288a046109..9e3045a480 100644 --- a/modules/react/avatar/stories/stories.tsx +++ b/modules/react/avatar/stories/stories.tsx @@ -69,6 +69,16 @@ storiesOf('Components/Indicators/Avatar', module)

      Using a Square Image

      + )) + .add('Lazy Loading', () => ( +
      + {Array.from({length: 100}, (v, index) => ( + <> + { - localRef.current!.focus = (options?: FocusOptions) => { - textInputProps.ref.current!.focus(options); - }; - localRef.current!.blur = () => { - textInputProps.ref.current!.blur(); - }; + if (localRef.current) { + localRef.current.focus = (options?: FocusOptions) => { + textInputProps.ref.current!.focus(options); + }; + localRef.current.blur = () => { + textInputProps.ref.current!.blur(); + }; + } return localRef.current!; }, diff --git a/modules/react/select/spec/Select.spec.tsx b/modules/react/select/spec/Select.spec.tsx index 1f8b5d2c54..c6070e3ad5 100644 --- a/modules/react/select/spec/Select.spec.tsx +++ b/modules/react/select/spec/Select.spec.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {render, fireEvent} from '@testing-library/react'; +import {render, screen} from '@testing-library/react'; import {Select} from '../lib/Select'; @@ -14,7 +14,7 @@ describe('Select', () => { describe('when rendered with a single child', () => { it('should not throw an error', () => { - const {getAllByRole} = render( + render( ); - expect(getAllByRole('option')).toHaveLength(1); + expect(screen.getAllByRole('option')).toHaveLength(1); + }); + + it('should render in React Strict Mode', () => { + render( + + + + ); }); }); describe('when rendered with disabled attribute', () => { it('should render a disabled select', () => { - const {getByRole} = render( + render( ); - expect(getByRole(role)).toHaveProperty('disabled', true); + expect(screen.getByRole(role)).toHaveProperty('disabled', true); }); }); describe('when rendered with a value', () => { it('it should render a select whose selected option matches value', () => { const selectedValue = 'Foo'; - const {getAllByDisplayValue} = render( + render( ); - expect(getAllByDisplayValue(selectedValue)[0]).toBeDefined(); + expect(screen.getAllByDisplayValue(selectedValue)[0]).toBeDefined(); }); }); }); diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json index 79ed3483bf..a86c240829 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.0.14", + "version": "11.0.18", "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.0.14", + "@workday/canvas-kit-styling": "^11.0.18", "@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 823b5ac578..f65c306372 100644 --- a/modules/styling/package.json +++ b/modules/styling/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-styling", - "version": "11.0.14", + "version": "11.0.18", "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.0.14", + "@workday/canvas-kit-react": "^11.0.18", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.0", "typescript": "4.2" diff --git a/yarn.lock b/yarn.lock index 03daa07db6..a92aad20bd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12097,6 +12097,11 @@ markdown-to-jsx@^6.10.3: prop-types "^15.6.2" unquote "^1.1.0" +markdown-to-jsx@^7.2.0: + version "7.4.7" + resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.4.7.tgz#740ee7ec933865ef5cc683a0992797685a75e2ee" + integrity sha512-0+ls1IQZdU6cwM1yu0ZjjiVWYtkbExSyUIFU2ZeDIFuZM1W42Mh4OlJ4nb4apX4H8smxDHRdFaoIVJGwfv5hkg== + md5.js@^1.3.4: version "1.3.5" resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f" @@ -12254,7 +12259,7 @@ microevent.ts@~0.1.1: resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0" integrity sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g== -micromatch@4.0.5, micromatch@4.0.6, micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.6: +micromatch@4.0.5, micromatch@4.0.6, micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4: version "4.0.6" resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.6.tgz#ab4e37c42726b9cd788181ba4a2a4fead8e394a3" integrity sha512-Y4Ypn3oujJYxJcMacVgcs92wofTHxp9FzfDpQON4msDefoC0lb3ETvQLOdLcbhSwU1bz8HrL/1sygfBIHudrkQ==