Merge branch 'prerelease/major' into add-select-preview-24-09

CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [v11.1.13](https://github.com/Workday/canvas-kit/releases/tag/v11.1.13) (2024-09-19)
+
+### Components
+
+- fix: Allow inherit background color on system icon ([#2932](https://github.com/Workday/canvas-kit/pull/2932)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+
+
+## [v11.1.12](https://github.com/Workday/canvas-kit/releases/tag/v11.1.12) (2024-09-18)
+
+### Components
+
+- fix(search-form): Show ellipsis when placeholder overflows ([#2927](https://github.com/Workday/canvas-kit/pull/2927)) ([@NicholasBoll](https://github.com/NicholasBoll))
+
+
+## [v10.3.61](https://github.com/Workday/canvas-kit/releases/tag/v10.3.61) (2024-09-17)
+
+### Components
+
+- fix(search-form): Show ellipsis when placeholder overflows ([#2927](https://github.com/Workday/canvas-kit/pull/2927)) ([@NicholasBoll](https://github.com/NicholasBoll))
+## [v11.1.11](https://github.com/Workday/canvas-kit/releases/tag/v11.1.11) (2024-09-16)
+
+### Components
+
+- fix: Handle empty stack ref in useAssistiveHideSiblings ([#2920](https://github.com/Workday/canvas-kit/pull/2920)) ([@NicholasBoll](https://github.com/NicholasBoll))
+
+
+## [v10.3.60](https://github.com/Workday/canvas-kit/releases/tag/v10.3.60) (2024-09-16)
+
+### Components
+
+- fix: Handle empty stack ref in useAssistiveHideSiblings ([#2920](https://github.com/Workday/canvas-kit/pull/2920)) ([@NicholasBoll](https://github.com/NicholasBoll))
 ## [v11.1.10](https://github.com/Workday/canvas-kit/releases/tag/v11.1.10) (2024-09-16)
 
 

cypress.config.ts

@@ -8,9 +8,6 @@ export default defineConfig({
   retries: {
     runMode: 2,
   },
-  env: {
-    NODE_ENV: 'development', // or 'development', 'production', etc.
-  },
 
   blockHosts: ['cdn.fontawesome.com'],
 
@@ -20,7 +17,7 @@ export default defineConfig({
       framework: 'react',
       bundler: 'webpack',
     },
-    setupNodeEvents(on) {
+    setupNodeEvents(on, config) {
       on('file:preprocessor', webpack());
     },
     viewportWidth: 1024,

cypress/component/Tabs.spec.tsx

@@ -481,11 +481,14 @@ describe('Tabs', () => {
   context('when [Components/Containers/Tabs, OverflowTabs] story is rendered', () => {
     beforeEach(() => {
       cy.mount(<OverflowTabs />);
-      cy.wait(500);
     });
 
     it('should pass axe checks', () => {
-      cy.checkA11y();
+      cy.checkA11y('[role="tablist"]', {
+        rules: {
+          'aria-required-children': {enabled: false},
+        },
+      });
     });
 
     it('should not show the "More" button', () => {
@@ -519,7 +522,7 @@ describe('Tabs', () => {
     context('when tab list container is only 500px wide', () => {
       beforeEach(() => {
         cy.findByRole('button', {name: '500px'}).click();
-        cy.wait(0);
+        cy.findByRole('button', {name: '500px'}).should('have.attr', 'aria-pressed', 'true');
       });
 
       it('should pass axe checks', () => {
@@ -587,6 +590,7 @@ describe('Tabs', () => {
     context('when tab list container is only 360px wide', () => {
       beforeEach(() => {
         cy.findByRole('button', {name: '360px'}).click();
+        cy.findByRole('button', {name: '360px'}).should('have.attr', 'aria-pressed', 'true');
       });
 
       it('should pass axe checks', () => {
@@ -613,6 +617,7 @@ describe('Tabs', () => {
 
       context('when the "More" button is clicked', () => {
         beforeEach(() => {
+          cy.findByRole('button', {name: '360px'}).should('have.attr', 'aria-pressed', 'true');
           cy.findByRole('button', {name: 'More'}).click();
         });
 
@@ -629,6 +634,7 @@ describe('Tabs', () => {
     context('when tab list container is only 150px wide', () => {
       beforeEach(() => {
         cy.findByRole('button', {name: '150px'}).click();
+        cy.findByRole('button', {name: '150px'}).should('have.attr', 'aria-pressed', 'true');
       });
 
       it('should pass axe checks', () => {

cypress/support/component.ts

@@ -54,6 +54,7 @@ before(() => {
       },
     };
   });
+
   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.10",
+  "version": "11.1.13",
   "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.10",
+  "version": "11.1.13",
   "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.10",
+  "version": "11.1.13",
   "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/mdx/12.0-UPGRADE-GUIDE.mdx

@@ -42,11 +42,13 @@ A note to the reader:
 - [Styling Updates](#styling-updates)
   - [Compatability Mode](#compatability-mode)
 - [Deprecations](#deprecations)
+  - [Form Field Container](#form-field-container)
 - [Removals](#removals)
   - [InputIconContainer](#inputiconcontainer)
 - [Component Updates](#component-updates)
   - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
   - [Avatar](#avatar)
+  - [Select](#select)
   - [Form Field](#form-field)
   - [Text Area](#text-area)
 - [Troubleshooting](#troubleshooting)
@@ -82,6 +84,34 @@ We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to co
 in a future major release. This signals consumers to migrate to a more stable alternative before the
 deprecated code is removed.
 
+### Form Field Container
+
+**PR:** [#2865](https://github.com/Workday/canvas-kit/pull/2865)
+
+We've deprecated `FormField.Container`. Please use `FormField.Field` or `FormFieldGroup.Field` for
+grouped inputs, this ensures proper label alignment and spacing of inputs and hint text, regardless
+of the orientation.
+
+```tsx
+// v11
+<FormField>
+  <FormField.Label>Email</FormField.Label>
+  <FormField.Container>
+    <FormField.Input as={TextInput} />
+    <FormField.Hint>You must provide an email</FormField.Hint>
+  </FormField.Container>
+</FormField>
+
+// v12
+<FormField>
+  <FormField.Label>Email</FormField.Label>
+  <FormField.Field>
+    <FormField.Input as={TextInput} />
+    <FormField.Hint>You must provide an email</FormField.Hint>
+  </FormField.Field>
+</FormField>
+```
+
 ## Removals
 
 Removals are deletions from our codebase and you can no longer consume this component. We've either
@@ -115,7 +145,6 @@ The following components are affected:
 
 - `Avatar`
 - `Dialog`
-- `FormField`
 - `Modal`
 - `Popup`
 - `TextArea`
@@ -128,6 +157,12 @@ The following components are affected:
 
 ### Avatar
 
+**PR** [#2793](https://github.com/Workday/canvas-kit/pull/2793)
+
+Avatar has been updated to use our new
+[styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-stencil).
+The following changes have been made to the API:
+
 - `Avatar.Size` has been deprecated. The `size` prop still accepts `Avatar.Size` in addition to the
   following values:
   `"extraExtraLarge" | "extraLarge" | "large" | "medium" | "small" | "extraSmall" | (string{})`
@@ -141,12 +176,16 @@ The following components are affected:
 
 ### Form Field
 
-**PR** [#2881](https://github.com/Workday/canvas-kit/pull/2881)
+**PRs:** [#2865](https://github.com/Workday/canvas-kit/pull/2865),
+[#2881](https://github.com/Workday/canvas-kit/pull/2881)
+
+We've promoted FormField from [Preview](#preview) to [Main](#main). The following changes has 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.
+- 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
@@ -155,9 +194,105 @@ are intended to provide more flexibility with label alignments on `FormField` el
 > **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.
+
+> **Note:** If spacing seems off between the input and hint text, ensure you're using
+> `FormField.Field` wrappign your input and hint text.
+
 🤖 The codemod will handle the change of `orientation="horizontal"` to
 `orientation="horizontalStart"` if you're using the string literal values.
 
+#### Form Field Group
+
+We've added a new component under `FromField` to allow users to group inputs without worrying about
+setting the `as` prop on the `FormField` component.
+
+Use `FormFieldGroup` when you have a group of inputs that need to be associated to one another, like
+`RadioGroup` or a group of `Checkbox`'s.
+
+`FormFieldGroup` supports the same props of `FormField`:
+
+- `error`: `"alert" | "error"` Defines the error around the whole group of inputs.
+- `orientation`: `"horizontalStart" | "horizontalEnd" | "vertical" | "horizontal" `. Defines the
+  label placement.
+- `isRequired`: `true` Defines if a group like `RadioGroup` is required.
+
+#### FormField Field
+
+We've added a new sub-component to `FormField` and `FormFieldGroup`, `FormField.Field` and
+`FormFieldGroup.Field`. This sub-component is meant to ensure that the label is always aligned with
+the input regardless of the `orientation`prop's value on`FormField` or `FormFieldGroup`. This
+component should replace `FormField.Container` and always be used to ensure proper alignment of the
+label and hint text. Our examples have been updated to reflect this.
+
+Although there is no codemod for this change and it's non-breaking, we suggest moving towards adding
+this sub-component when using `FormField`. This component also exists on `FormFieldGroup`.
+
+```tsx
+<FormField orientation="horizontal">
+  <FormField.Label>Email</FormField.Label>
+  <FormField.Field>
+    <FormField.Input as={TextInput} />
+    <FormField.Hint>You must provide an email</FormField.Hint>
+  </FormField.Field>
+</FormField>
+```
+
+### Select
+
+**PR:** [#2865](https://github.com/Workday/canvas-kit/pull/2865)
+
+As we transition to use our CSS tokens to provide better theming capabilities and our new styling
+methods, we're moving away from components extending `Themeable`. `Themeable` has been removed from
+`SelectProps.`
+
+If you wish to theme `Select` we suggest using the CanvasProvider to do so.
+
+```tsx
+const theme: PartialEmotionCanvasTheme = {
+  canvas: {
+    palette: {
+      common: {
+        focusOutline: 'pink',
+      },
+      primary: {
+        main: 'green',
+        light: 'lightgreen',
+      },
+    },
+  },
+};
+
+//...
+
+<CanvasProvider theme={theme}>
+  <Flex cs={parentContainerStyles}>
+    <Select items={options}>
+      <FormField>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Input as={Select.Input} onChange={handleChange} />
+        <Select.Popper>
+          <Select.Card>
+            <Select.List>
+              {item => {
+                return <Select.Item>{item}</Select.Item>;
+              }}
+            </Select.List>
+          </Select.Card>
+        </Select.Popper>
+      </FormField>
+    </Select>
+    Selected Value: {value}
+  </Flex>
+</CanvasProvider>;
+```
+
 ### Text Area
 
 **PR:** [#2825](https://github.com/Workday/canvas-kit/pull/2825)
@@ -168,10 +303,15 @@ type.
 
 ```tsx
 // v11
-interface MyProps { resize?: TextAreaResizeDirection }
-
-// 12 type ValueOf<T> = T[keyof T]; interface MyProps { resize?:
-ValueOf<typeof TextAreaResizeDirection> }
+interface MyProps {
+  resize?: TextAreaResizeDirection;
+}
+
+// 12
+type ValueOf<T> = T[keyof T];
+interface MyProps {
+  resize?: ValueOf<typeof TextAreaResizeDirection>;
+}
 ```
 
 ## Troubleshooting

modules/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.1.10",
+  "version": "11.1.13",
   "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.10",
-    "@workday/canvas-kit-preview-react": "^11.1.10",
-    "@workday/canvas-kit-react": "^11.1.10",
-    "@workday/canvas-kit-styling": "^11.1.10",
+    "@workday/canvas-kit-labs-react": "^11.1.13",
+    "@workday/canvas-kit-preview-react": "^11.1.13",
+    "@workday/canvas-kit-react": "^11.1.13",
+    "@workday/canvas-kit-styling": "^11.1.13",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "react-syntax-highlighter": "^15.5.0",

modules/labs-css/expandable.css

@@ -0,0 +1,5 @@
+.cnvs-labs-expandable-avatar {
+  margin-right: var(--cnvs-sys-space-x2);
+  flex-shrink: 0;
+}
+

modules/labs-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-css",
-  "version": "11.1.10",
+  "version": "11.1.13",
   "description": "The parent module that contains all Workday Canvas Kit Labs CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",