Merge branch 'master' into william-tooltip-description

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.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
+
+- fix: Upgrade vulnerable packages for security ([#2812](https://github.com/Workday/canvas-kit/pull/2812)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+
+
+## [v11.0.13](https://github.com/Workday/canvas-kit/releases/tag/v11.0.13) (2024-07-09)
+
+### Components
+
+- fix: Prevent style-only props from being forwarded to elements ([#2819](https://github.com/Workday/canvas-kit/pull/2819)) ([@wainokray-ho](https://github.com/wainokray-ho))
+
+
+## [v11.0.12](https://github.com/Workday/canvas-kit/releases/tag/v11.0.12) (2024-07-08)
+
+### Components
+
+- fix: Fix backwards compatibility with colors prop for buttons ([#2816](https://github.com/Workday/canvas-kit/pull/2816)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+
+### Infrastructure
+
+- fix: Revert jscodeshift version ([#2813](https://github.com/Workday/canvas-kit/pull/2813)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera)
+
+
 ## [v11.0.11](https://github.com/Workday/canvas-kit/releases/tag/v11.0.11) (2024-06-26)
 
 ### Infrastructure

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "modules/**"
   ],
-  "version": "11.0.11",
+  "version": "11.0.15",
   "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.0.11",
+  "version": "11.0.15",
   "description": "A collection of codemods for use on Workday Canvas Kit packages.",
   "main": "dist/es6/index.js",
   "sideEffects": false,
@@ -29,9 +29,6 @@
     "url": "https://github.com/Workday/canvas-kit/issues"
   },
   "homepage": "https://github.com/Workday/canvas-kit#readme",
-  "resolutions": {
-    "ansi-regex": "3.0.1"
-  },
   "dependencies": {
     "chalk": "4.1.2",
     "jscodeshift": "^0.14.0",

modules/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "11.0.11",
+  "version": "11.0.15",
   "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.0.11",
+  "version": "11.0.15",
   "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.0.11",
-    "@workday/canvas-kit-preview-react": "^11.0.11",
-    "@workday/canvas-kit-react": "^11.0.11",
-    "@workday/canvas-kit-styling": "^11.0.11",
+    "@workday/canvas-kit-labs-react": "^11.0.15",
+    "@workday/canvas-kit-preview-react": "^11.0.15",
+    "@workday/canvas-kit-react": "^11.0.15",
+    "@workday/canvas-kit-styling": "^11.0.15",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "markdown-to-jsx": "^6.10.3",

modules/labs-css/package.json

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

modules/labs-react/combobox/lib/Combobox.tsx

@@ -6,6 +6,7 @@ import {
   styled,
   useIsRTL,
   useUniqueId,
+  filterOutProps,
 } from '@workday/canvas-kit-react/common';
 import {space, commonColors, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {Card} from '@workday/canvas-kit-react/card';
@@ -112,7 +113,9 @@ const MenuContainer = styled(Card)({
   overflow: 'hidden',
 });
 
-const ResetButton = styled(TertiaryButton)<{shouldShow: boolean}>(
+const ResetButton = styled(TertiaryButton, {
+  shouldForwardProp: filterOutProps(['shouldShow']),
+})<{shouldShow: boolean}>(
   {
     position: 'absolute',
     margin: `auto ${space.xxxs}`,

modules/labs-react/expandable/lib/ExpandableIcon.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {
   createSubcomponent,
   ExtractProps,
+  filterOutProps,
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
@@ -29,7 +30,9 @@ export interface ExpandableIconProps extends Omit<ExtractProps<typeof SystemIcon
   iconPosition?: IconPositions;
 }
 
-const StyledEndIcon = styled(SystemIcon)<{visible: boolean} & StyledType>(
+const StyledEndIcon = styled(SystemIcon, {
+  shouldForwardProp: filterOutProps(['visible']),
+})<{visible: boolean} & StyledType>(
   {
     marginLeft: 'auto',
   },
@@ -41,7 +44,9 @@ const StyledEndIcon = styled(SystemIcon)<{visible: boolean} & StyledType>(
   })
 );
 
-const StyledStartIcon = styled(SystemIcon)<{visible: boolean} & StyledType>(
+const StyledStartIcon = styled(SystemIcon, {
+  shouldForwardProp: filterOutProps(['visible']),
+})<{visible: boolean} & StyledType>(
   {
     margin: `0 ${space.xxs} 0 0`,
     padding: space.xxxs,

modules/labs-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "11.0.11",
+  "version": "11.0.15",
   "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.11",
+    "@workday/canvas-kit-react": "^11.0.15",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",

modules/labs-react/search-form/lib/SearchForm.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import {CSSObject} from '@emotion/styled';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
-import {GrowthBehavior, styled, generateUniqueId} from '@workday/canvas-kit-react/common';
+import {
+  GrowthBehavior,
+  styled,
+  generateUniqueId,
+  filterOutProps,
+} from '@workday/canvas-kit-react/common';
 import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 import {searchIcon, xIcon} from '@workday/canvas-system-icons-web';
 import {FormField, FormFieldLabelPosition} from '@workday/canvas-kit-react/form-field';
@@ -172,9 +177,9 @@ const SearchCombobox = styled(Combobox)({
   width: `100%`,
 });
 
-const SearchIcon = styled(TertiaryButton)<
-  Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}
->(({isCollapsed, isHidden}) => {
+const SearchIcon = styled(TertiaryButton, {
+  shouldForwardProp: filterOutProps(['isHidden']),
+})<Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}>(({isCollapsed, isHidden}) => {
   return {
     position: `absolute`,
     margin: isCollapsed ? `auto ${space.xxs}` : `auto ${space.xxxs}`,

modules/popup-stack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-popup-stack",
-  "version": "11.0.11",
+  "version": "11.0.15",
   "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",

modules/preview-css/package.json

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

modules/preview-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "11.0.11",
+  "version": "11.0.15",
   "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.11",
-    "@workday/canvas-kit-styling": "^11.0.11",
+    "@workday/canvas-kit-react": "^11.0.15",
+    "@workday/canvas-kit-styling": "^11.0.15",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "@workday/design-assets-types": "^0.2.8"

modules/react-fonts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react-fonts",
-  "version": "11.0.11",
+  "version": "11.0.15",
   "description": "Fonts for canvas-kit-react",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

modules/react/avatar/lib/Avatar.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
-import {styled, focusRing, hideMouseFocus} from '@workday/canvas-kit-react/common';
+import {styled, focusRing, hideMouseFocus, filterOutProps} from '@workday/canvas-kit-react/common';
 import isPropValid from '@emotion/is-prop-valid';
 import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
 import {SystemIconCircle, SystemIconCircleSize} from '@workday/canvas-kit-react/icon';
@@ -106,7 +106,9 @@ const StyledStack = styled('span')<Pick<AvatarProps, 'size'>>(
   })
 );
 
-const StyledIcon = styled(SystemIconCircle)<{isImageLoaded: boolean}>(
+const StyledIcon = styled(SystemIconCircle, {
+  shouldForwardProp: filterOutProps(['isImageLoaded']),
+})<{isImageLoaded: boolean}>(
   {
     transition: fadeTransition,
   },
@@ -115,7 +117,9 @@ const StyledIcon = styled(SystemIconCircle)<{isImageLoaded: boolean}>(
   })
 );
 
-const StyledImage = styled('img')<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
+const StyledImage = styled('img', {
+  shouldForwardProp: filterOutProps(['isLoaded', 'objectFit']),
+})<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
   {
     width: '100%',
     height: '100%',

modules/react/button/lib/DeleteButton.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import {buttonStencil} from './BaseButton';
+import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
@@ -22,32 +22,32 @@ const deleteButtonStencil = createStencil({
     [buttonStencil.vars.background]: brand.error.base,
     [buttonStencil.vars.borderRadius]: system.shape.round,
     [buttonStencil.vars.label]: brand.error.accent,
-    [systemIconStencil.vars.color]: brand.error.accent,
+    [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, brand.error.accent),
     // Focus Styles
     '&:focus-visible, &.focus': {
       [buttonStencil.vars.background]: brand.error.base,
       [buttonStencil.vars.label]: brand.error.accent,
-      [systemIconStencil.vars.color]: brand.error.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, brand.error.accent),
       [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
       [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
     },
     // Hover Styles
     '&:hover, &.hover': {
       [buttonStencil.vars.background]: brand.error.dark,
       [buttonStencil.vars.label]: brand.error.accent,
-      [systemIconStencil.vars.color]: brand.error.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.error.accent),
     },
     // Active Styles
     '&:active, &.active': {
       [buttonStencil.vars.background]: brand.error.darkest,
       [buttonStencil.vars.label]: brand.error.accent,
-      [systemIconStencil.vars.color]: brand.error.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.error.accent),
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
       [buttonStencil.vars.background]: brand.error.base,
       [buttonStencil.vars.label]: brand.error.accent,
-      [systemIconStencil.vars.color]: brand.error.accent,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, brand.error.accent),
       [buttonStencil.vars.opacity]: system.opacity.disabled,
     },
   },