@workday/canvas-kit-preview-react 9.1.41 → 9.1.42

package/dist/commonjs/radio/lib/StyledRadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,YAAY,EACZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,GAAG,EAAO,MAAM,kCAAkC,CAAC;AAM3D,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC,EAAE,SAAS;IAC1F,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8HD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAuB5B,CAAC"}
+{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,YAAY,EACZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,GAAG,EAAO,MAAM,kCAAkC,CAAC;AAO3D,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC,EAAE,SAAS;IAC1F,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAgID,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAgC5B,CAAC"}

package/dist/commonjs/radio/lib/StyledRadioButton.js

@@ -8,6 +8,7 @@ const react_1 = __importDefault(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const layout_1 = require("@workday/canvas-kit-react/layout");
+const is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 const radioWidth = 18;
 const rippleRadius = (tokens_1.spaceNumbers.l - radioWidth) / 2;
 const radioHeight = 18;
@@ -90,7 +91,9 @@ const StyledRadioInput = common_1.styled(layout_1.Box.as('input'))({
         },
     }),
 }));
-const RadioInputWrapper = common_1.styled(layout_1.Flex)({
+const RadioInputWrapper = common_1.styled(layout_1.Flex, {
+    shouldForwardProp: prop => is_prop_valid_1.default(prop) && prop !== 'disabled' && prop !== 'variant',
+})({
     // Hover Ripple element
     '::before': {
         content: "''",
@@ -114,9 +117,9 @@ const RadioInputWrapper = common_1.styled(layout_1.Flex)({
  */
 exports.StyledRadioButton = common_1.createComponent('input')({
     displayName: 'Radio',
-    Component: ({ ...elemProps }, ref, Element) => {
-        return (react_1.default.createElement(RadioInputWrapper, Object.assign({ height: "18px", width: "18px", flex: "0 0 auto" }, elemProps),
-            react_1.default.createElement(StyledRadioInput, Object.assign({ borderRadius: "circle", position: "absolute", margin: "zero", as: Element, type: "radio", ref: ref }, elemProps)),
+    Component: ({ className, variant, disabled, ...elemProps }, ref, Element) => {
+        return (react_1.default.createElement(RadioInputWrapper, { height: "18px", width: "18px", flex: "0 0 auto", className: className, variant: variant, disabled: disabled },
+            react_1.default.createElement(StyledRadioInput, Object.assign({ borderRadius: "circle", position: "absolute", margin: "zero", as: Element, type: "radio", ref: ref, className: className, variant: variant, disabled: disabled }, elemProps)),
             react_1.default.createElement("span", { className: "cnvs-radio-check" })));
     },
 });

package/dist/es6/radio/lib/StyledRadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,YAAY,EACZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,GAAG,EAAO,MAAM,kCAAkC,CAAC;AAM3D,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC,EAAE,SAAS;IAC1F,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8HD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAuB5B,CAAC"}
+{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,YAAY,EACZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,GAAG,EAAO,MAAM,kCAAkC,CAAC;AAO3D,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC,EAAE,SAAS;IAC1F,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAgID,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAgC5B,CAAC"}

package/dist/es6/radio/lib/StyledRadioButton.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { styled, focusRing, mouseFocusBehavior, createComponent, } from '@workday/canvas-kit-react/common';
 import { colors, inputColors, spaceNumbers, borderRadius } from '@workday/canvas-kit-react/tokens';
 import { Box, Flex } from '@workday/canvas-kit-react/layout';
+import isPropValid from '@emotion/is-prop-valid';
 const radioWidth = 18;
 const rippleRadius = (spaceNumbers.l - radioWidth) / 2;
 const radioHeight = 18;
@@ -84,7 +85,9 @@ const StyledRadioInput = styled(Box.as('input'))({
         },
     }),
 }));
-const RadioInputWrapper = styled(Flex)({
+const RadioInputWrapper = styled(Flex, {
+    shouldForwardProp: prop => isPropValid(prop) && prop !== 'disabled' && prop !== 'variant',
+})({
     // Hover Ripple element
     '::before': {
         content: "''",
@@ -108,9 +111,9 @@ const RadioInputWrapper = styled(Flex)({
  */
 export const StyledRadioButton = createComponent('input')({
     displayName: 'Radio',
-    Component: ({ ...elemProps }, ref, Element) => {
-        return (React.createElement(RadioInputWrapper, Object.assign({ height: "18px", width: "18px", flex: "0 0 auto" }, elemProps),
-            React.createElement(StyledRadioInput, Object.assign({ borderRadius: "circle", position: "absolute", margin: "zero", as: Element, type: "radio", ref: ref }, elemProps)),
+    Component: ({ className, variant, disabled, ...elemProps }, ref, Element) => {
+        return (React.createElement(RadioInputWrapper, { height: "18px", width: "18px", flex: "0 0 auto", className: className, variant: variant, disabled: disabled },
+            React.createElement(StyledRadioInput, Object.assign({ borderRadius: "circle", position: "absolute", margin: "zero", as: Element, type: "radio", ref: ref, className: className, variant: variant, disabled: disabled }, elemProps)),
             React.createElement("span", { className: "cnvs-radio-check" })));
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "9.1.41",
+  "version": "9.1.42",
   "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",
@@ -44,9 +44,10 @@
     "react": ">=16.14"
   },
   "dependencies": {
+    "@emotion/is-prop-valid": "^1.1.1",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^9.1.41",
+    "@workday/canvas-kit-react": "^9.1.42",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8"
   },
@@ -56,5 +57,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "85e34879090b7a9b98e4f17cb122359b8a3eef92"
+  "gitHead": "905c1fc2a76b91054fe872adea18035e9d3f0e41"
 }

package/radio/lib/StyledRadioButton.tsx

@@ -11,6 +11,7 @@ import {
 import {colors, inputColors, spaceNumbers, borderRadius} from '@workday/canvas-kit-react/tokens';
 
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import isPropValid from '@emotion/is-prop-valid';
 
 const radioWidth = 18;
 const rippleRadius = (spaceNumbers.l - radioWidth) / 2;
@@ -122,7 +123,9 @@ const StyledRadioInput = styled(Box.as('input'))<StyledRadioButtonProps & Styled
   })
 );
 
-const RadioInputWrapper = styled(Flex)<Pick<StyledRadioButtonProps, 'disabled' | 'variant'>>(
+const RadioInputWrapper = styled(Flex, {
+  shouldForwardProp: prop => isPropValid(prop) && prop !== 'disabled' && prop !== 'variant',
+})<Pick<StyledRadioButtonProps, 'variant' | 'disabled'>>(
   {
     // Hover Ripple element
     '::before': {
@@ -154,13 +157,19 @@ export interface StyledRadioButtonProps extends ExtractProps<typeof Box, 'input'
  */
 export const StyledRadioButton = createComponent('input')({
   displayName: 'Radio',
-  Component: ({...elemProps}: StyledRadioButtonProps, ref, Element) => {
+  Component: (
+    {className, variant, disabled, ...elemProps}: StyledRadioButtonProps,
+    ref,
+    Element
+  ) => {
     return (
       <RadioInputWrapper
         height="18px"
         width="18px"
         flex="0 0 auto"
-        {...elemProps} // This ensures our visual testing stories work properly
+        className={className}
+        variant={variant}
+        disabled={disabled}
       >
         <StyledRadioInput
           borderRadius="circle"
@@ -169,6 +178,9 @@ export const StyledRadioButton = createComponent('input')({
           as={Element}
           type="radio"
           ref={ref}
+          className={className}
+          variant={variant}
+          disabled={disabled}
           {...elemProps}
         />
         <span className="cnvs-radio-check"></span>