diff --git a/CHANGELOG.md b/CHANGELOG.md index a814dfdadf..f544c13b42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,165 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [v12.0.0](https://github.com/Workday/canvas-kit/releases/tag/v12.0.0) (2024-10-16) + +### BREAKING CHANGES + +- [#2793](https://github.com/Workday/canvas-kit/pull/2793) - Avatar no longer uses `SystemIconCircle` for sizing. + - `Avatar.Size` is no longer supported. The `size` prop type has change to accept the following: `"extraExtraLarge" | "extraLarge" | "large" | "medium" | "small" | "extraSmall" | (string{})` + - `Avatar.Variant` is no longer supported. Enum `AvatarVariant` has been removed. The `variant` type prop now accepts `"dark" | "light"` + - The `as` prop now accepts any element, not just `div`. +- [#2674](https://github.com/Workday/canvas-kit/pull/2674) Codemods formatting have been updated and users will need to format their files after the codemod has been used. +- [#2934](https://github.com/Workday/canvas-kit/pull/2934) The newly promoted `FormField` is a + [compound component](https://workday.github.io/canvas-kit/?path=/docs/guides-compound-components--page). + Due to the different APIs of the component, this change is **not codemodable**. The following shows + an example of how to **update** your code to match the new compound component API. + + ```tsx + // v11 FormField in Main + + + + + // v12 Newly promoted FormField from Preview to Main + + Email + + + Please enter a valid email. + + + ``` + + **Noticeable changes:** + + - `error` prop takes in the following values: `"error" | "alert"`. + - `labelPosition` becomes `orientation` with the following values: + `"horizontal" | "horizontalStart" | "horizontalEnd" | "vertical"`. + - `useFieldSet` is no longer valid. If you want to group inputs, use + [`FormFieldGroup`](#form-field-group) component. + - `required` becomes `isRequired`. + - `hintId` is no longer needed. The component handles associating the hint text, label and input + automatically. If you wish to have a unique `id`, you can add one onto the `FormField` element. + - `hintText` is no longer a valid prop. Use `FormField.Hint` sub component. + - `errorLabel` and `alertLabel` are no longer valid props. Customizing your hint text inside of + `FormField.Hint`. + - `label` is no longer a valid prop. Use `FormField.Label` sub component to render your label text. + - Instead of rendering an input, ensure you use `FormField.Input` with the `as` prop. This ensures + proper error handling and aria attributes for accessibility. +- [#2969](https://github.com/Workday/canvas-kit/pull/2969) We've removed the `MenuItemProps` export from `@workday/canvas-kit-react/menu`. Use `ExtractProps` instead. We don't mean to export prop interfaces of polymorphic components. The `never` means "don't add element props". The second parameter is used to pass the interface that the `as` prop is pointing to. +- [#2980](https://github.com/Workday/canvas-kit/pull/2980) `elemProps` hooks using `composeHooks` have more accurate type signatures which may lead to new type errors. For information, view our [discussion](https://github.com/Workday/canvas-kit/discussions/2979). +- [#2982](https://github.com/Workday/canvas-kit/pull/2982) A list model's `navigation.getItem()` can return `undefined` if no item is found. Previously it threw an error, which cause many problems. It is now up to the caller to decide what to do with an `undefined` return value + +### Components + +- chore: Removed Select in Preview ([#2796](https://github.com/Workday/canvas-kit/pull/2796)) ([@thunguyen19](https://github.com/thunguyen19), manuel.carrera, [@mannycarrera4](https://github.com/mannycarrera4)) + We've removed the `Select` component that was in `@workday/canvas-kit-preview-react`. Please use the `Select` in Main (https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) which is a compound component and offers more flexibility. + + Thank You Picture + + image +- chore: Modal, Dialog, Popup and Toast Styles Refactor ([#2795](https://github.com/Workday/canvas-kit/pull/2795)) ([@josh-bagwell](https://github.com/josh-bagwell)) + Updated `Modal, Dialog, Popup and Toast` to use new `system` tokens and style utilities. +- chore: Removal of InputIconContainer ([#2838](https://github.com/Workday/canvas-kit/pull/2838)) ([@josh-bagwell](https://github.com/josh-bagwell)) + We've removed `InputIconContainer` from Main. Please use [`InputGroup`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons) from Main instead. +- chore: Refactor TextArea and TextInput with new styling utilities ([#2825](https://github.com/Workday/canvas-kit/pull/2825)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@NicholasBoll](https://github.com/NicholasBoll)) + We've updated `TextInput` and `TextArea` to use our new Tokens and styling utilities. The React interface **has not changed**, but CSS variables are now used for dynamic properties. +- chore: Update Avatar to use createStencil and createComponent ([#2793](https://github.com/Workday/canvas-kit/pull/2793)) ([@kaconant](https://github.com/kaconant), krissy.conant, [@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera) + The Avatar component has been refactored to use our new tokens and styling utilities. The changes below highlight the breaking changes to the API. +- feat: Add horizontal start and end label position for form field ([#2881](https://github.com/Workday/canvas-kit/pull/2881)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@josh-bagwell](https://github.com/josh-bagwell)) + The orientation prop on the FormField component will be updated to accept the following values: `vertical`, `horizontalStart`, and `horizontalEnd`. `horizontal` will still be accepted as a value in v12, but it will be deprecated and slated for removal in a future major release. These changes are intended to provide more flexibility with label alignments on FormField elements. + + Instances where the orientation prop of the FormField component is set to `horizontal` will automatically default to `horizontalStart` via a codemod. A console warning message will also appear with a message to change the prop value to either horizontalStart or horizontalEnd. +- chore: Updated unique id generation for classnames ([#2913](https://github.com/Workday/canvas-kit/pull/2913)) ([@josh-bagwell](https://github.com/josh-bagwell), [@mannycarrera4](https://github.com/mannycarrera4)) +- chore: Add FormFieldGroup component and density example ([#2865](https://github.com/Workday/canvas-kit/pull/2865)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@josh-bagwell](https://github.com/josh-bagwell), [@RayRedGoose](https://github.com/RayRedGoose)) + - We've added a new `FormFieldGroup` component to use when grouping inputs like checkboxes and radio inputs that need to be associated to one another. Its API matches the `FormField` API where you have `error` prop as well as `id` `isRequired` and `orienation`. + + - `orientation` has been added back to `useFormFieldModel` to better support sub component styling. + + - Styles have been cleaned up to use `gap` for proper spacing between labels, inputs and hint text. + + - Added a new `FormField.Field` component to ensure proper alignment between label and inputs regardless of orientation and hint text. Ensure to wrap your inputs and hint text in this component. +- chore: Revert Select Preview Removal ([#2933](https://github.com/Workday/canvas-kit/pull/2933)) ([@josh-bagwell](https://github.com/josh-bagwell)) +- feat(text-input): Support CSS Variables in InputGroup ([#2935](https://github.com/Workday/canvas-kit/pull/2935)) ([@NicholasBoll](https://github.com/NicholasBoll)) +- feat: Promote FormField from Preview to Main ([#2934](https://github.com/Workday/canvas-kit/pull/2934)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@josh-bagwell](https://github.com/josh-bagwell)) + We've promoted FormField from [Preview](#preview) to [Main](#main). The following changes have been + made to provide more flexibility and better explicit components when using inputs. + + - The orientation prop on the `FormField` component will be updated to accept the following values: + `vertical`, `horizontalStart`, and `horizontalEnd`. `horizontal` will still be accepted as a value + in v12, but it will be deprecated and slated for removal in a future major release. These changes + are intended to provide more flexibility with label alignments on `FormField` elements. + + > **Note**: The horizontal alignment of start and end are relative to its container, meaning start + > and end match the flex property of `flex-start` and `flex-end`. This is especially applicable for + > moving between RTL (right-to-left) and LTR (left-to-right) languages. + + > **Note:** Orientation "horizontal" has been deprecated. You will see a console warn message + > suggesting to update your types and usage to `horizontalStart`, `horizontalEnd` or `vertical`. + + - `useFormFieldModel`: `orientation` has been added back into `useFormFieldModel`. While we still + support compat mode due to + [style merging issues](https://github.com/Workday/canvas-kit/discussions/2893), having orientation + on the model allows for proper styling of sub components. + + - Styles clean up. `FormField.Hint` and `FormField.Label` where using `margin` for spacing. We've + updated styles so that the containing element uses `gap` for proper spacing. +- fix: Add visual testing for inputs after form field promotion ([#2963](https://github.com/Workday/canvas-kit/pull/2963)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera) +- chore(text-input): Convert `InputGroup` to use Stencils ([#2964](https://github.com/Workday/canvas-kit/pull/2964)) ([@NicholasBoll](https://github.com/NicholasBoll)) +- feat(form-field): Add a11y links for non-input fields ([#2967](https://github.com/Workday/canvas-kit/pull/2967)) ([@NicholasBoll](https://github.com/NicholasBoll), manuel.carrera) +- feat(menu): Add `MenuOption` and convert to MenuItem to Stencil ([#2969](https://github.com/Workday/canvas-kit/pull/2969)) ([@NicholasBoll](https://github.com/NicholasBoll)) +- fix: Add isHidden to FormField label element ([#2973](https://github.com/Workday/canvas-kit/pull/2973)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@josh-bagwell](https://github.com/josh-bagwell)) + If you want to hide the label but maintain accessibility, add the `isHidden` prop on the `FormField.Label` element. +- fix: Fix mergeProps, createElemPropsHook, and composeHooks types ([#2980](https://github.com/Workday/canvas-kit/pull/2980)) ([@NicholasBoll](https://github.com/NicholasBoll)) +- chore: Remove useResizeObserver hack ([#2981](https://github.com/Workday/canvas-kit/pull/2981)) ([@NicholasBoll](https://github.com/NicholasBoll)) +- chore: Collection navigation getItem can return undefined ([#2982](https://github.com/Workday/canvas-kit/pull/2982)) ([@NicholasBoll](https://github.com/NicholasBoll)) +- fix: Fix InputGroup inner end width calculations ([#2984](https://github.com/Workday/canvas-kit/pull/2984)) ([@NicholasBoll](https://github.com/NicholasBoll)) +- refactor(select): Fix all syncing issues with the Select component ([#2983](https://github.com/Workday/canvas-kit/pull/2983)) ([@NicholasBoll](https://github.com/NicholasBoll)) +- feat: Add a MultiSelect component ([#2911](https://github.com/Workday/canvas-kit/pull/2911)) ([@NicholasBoll](https://github.com/NicholasBoll)) + +### Documentation + +- chore: Upgrade Guide Cleanup ([#2936](https://github.com/Workday/canvas-kit/pull/2936)) ([@josh-bagwell](https://github.com/josh-bagwell)) +- chore: Fix for ExampleCodeBlock ([#2938](https://github.com/Workday/canvas-kit/pull/2938)) ([@josh-bagwell](https://github.com/josh-bagwell), manuel.carrera) +- docs: Fix Markdown tables ([#2986](https://github.com/Workday/canvas-kit/pull/2986)) ([@NicholasBoll](https://github.com/NicholasBoll)) +- chore: Storybook sidebar theme ([#2987](https://github.com/Workday/canvas-kit/pull/2987)) ([@jaclynjessup](https://github.com/jaclynjessup)) + +### Infrastructure + +- chore: Upgrade Storybook and Webpack ([#2674](https://github.com/Workday/canvas-kit/pull/2674)) ([@RayRedGoose](https://github.com/RayRedGoose), [@NicholasBoll](https://github.com/NicholasBoll), manuel.carrera, [@josh-bagwell](https://github.com/josh-bagwell)) + - In Storybook, each component now has a "Docs" page. This is dedicated to documentation of the component and has examples as it did before. + - We now use the Cypress Component runner and not e2e. + - Codemod formatting has been updated with a dependency update and docs have been added to reflect the formatting issue. + + The following have been upgraded: + - Storybook 7 + - Webpack 5 + - Typescript 4.9 + - Cypress 13 +- fix: Update comment for canary action ([#2950](https://github.com/Workday/canvas-kit/pull/2950)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera) +- fix: Update routes path ([#2966](https://github.com/Workday/canvas-kit/pull/2966)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera) +- fix: Try to fix canary build ([#2970](https://github.com/Workday/canvas-kit/pull/2970)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera) +- ci: Fix build script ([#2985](https://github.com/Workday/canvas-kit/pull/2985)) ([@NicholasBoll](https://github.com/NicholasBoll)) +- ci: Fix tspc command ([@NicholasBoll](https://github.com/NicholasBoll)) + +### Styling + +- feat(styling): Add support for fallthrough modifiers ([#2944](https://github.com/Workday/canvas-kit/pull/2944)) ([@NicholasBoll](https://github.com/NicholasBoll)) + + ## [v11.1.17](https://github.com/Workday/canvas-kit/releases/tag/v11.1.17) (2024-10-11) ### Components diff --git a/lerna.json b/lerna.json index fed29043de..00c772f758 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "modules/**" ], - "version": "11.1.17", + "version": "12.0.0", "npmClient": "yarn", "useWorkspaces": true, "command": { diff --git a/modules/codemod/package.json b/modules/codemod/package.json index f482d5cade..e50340de2d 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.17", + "version": "12.0.0", "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 68aa405072..5f3fd86797 100644 --- a/modules/css/package.json +++ b/modules/css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-css", - "version": "11.1.17", + "version": "12.0.0", "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 f7585736a6..536ce1cef9 100644 --- a/modules/docs/package.json +++ b/modules/docs/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-docs", - "version": "11.1.17", + "version": "12.0.0", "description": "Documentation components of Canvas Kit components", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", @@ -44,14 +44,14 @@ "dependencies": { "@emotion/styled": "^11.6.0", "@storybook/csf": "0.0.1", - "@workday/canvas-kit-labs-react": "^11.1.17", - "@workday/canvas-kit-preview-react": "^11.1.17", - "@workday/canvas-kit-react": "^11.1.17", - "@workday/canvas-kit-styling": "^11.1.17", + "@workday/canvas-kit-labs-react": "^12.0.0", + "@workday/canvas-kit-preview-react": "^12.0.0", + "@workday/canvas-kit-react": "^12.0.0", + "@workday/canvas-kit-styling": "^12.0.0", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", - "react-syntax-highlighter": "^15.5.0", "markdown-to-jsx": "^7.2.0", + "react-syntax-highlighter": "^15.5.0", "ts-node": "^10.9.1" }, "devDependencies": { diff --git a/modules/labs-css/package.json b/modules/labs-css/package.json index d63f72f3ab..eb4be24455 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.17", + "version": "12.0.0", "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 5006c77500..a8bfd19061 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.17", + "version": "12.0.0", "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.17", - "@workday/canvas-kit-styling": "^11.1.17", + "@workday/canvas-kit-react": "^12.0.0", + "@workday/canvas-kit-styling": "^12.0.0", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "@workday/design-assets-types": "^0.2.8", diff --git a/modules/popup-stack/package.json b/modules/popup-stack/package.json index 7e63a0c993..3a4962f2f9 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.17", + "version": "12.0.0", "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 7bbe7c34af..0c51b62402 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.17", + "version": "12.0.0", "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 0c25abd196..91c18c8868 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.17", + "version": "12.0.0", "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.17", - "@workday/canvas-kit-styling": "^11.1.17", + "@workday/canvas-kit-react": "^12.0.0", + "@workday/canvas-kit-styling": "^12.0.0", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "@workday/design-assets-types": "^0.2.8" diff --git a/modules/react-fonts/package.json b/modules/react-fonts/package.json index 149b0b4441..895a787e33 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.17", + "version": "12.0.0", "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 9d195ab977..4710138770 100644 --- a/modules/react/package.json +++ b/modules/react/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-react", - "version": "11.1.17", + "version": "12.0.0", "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.17", - "@workday/canvas-kit-styling": "^11.1.17", + "@workday/canvas-kit-popup-stack": "^12.0.0", + "@workday/canvas-kit-styling": "^12.0.0", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "@workday/design-assets-types": "^0.2.8", diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json index c0dc2029e6..5d9047dcaf 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.17", + "version": "12.0.0", "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.17", + "@workday/canvas-kit-styling": "^12.0.0", "@workday/canvas-tokens-web": "^2.0.1", "stylis": "4.0.13", "ts-node": "^10.9.1", diff --git a/modules/styling/package.json b/modules/styling/package.json index 2157b8fdb3..ecca59ef13 100644 --- a/modules/styling/package.json +++ b/modules/styling/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-styling", - "version": "11.1.17", + "version": "12.0.0", "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.17", + "@workday/canvas-kit-react": "^12.0.0", "@workday/canvas-system-icons-web": "^3.0.0", "@workday/canvas-tokens-web": "^2.0.1", "typescript": "5.0"