@workday/canvas-kit-preview-react 11.0.0-alpha.798-next.0 → 11.0.0-alpha.804-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/radio/lib/StyledRadioButton.d.ts.map +1 -1
- package/dist/commonjs/radio/lib/StyledRadioButton.js +11 -11
- package/dist/commonjs/text-area/lib/TextArea.d.ts +1 -1
- package/dist/commonjs/text-area/lib/TextAreaField.d.ts +1 -1
- package/dist/commonjs/text-area/lib/TextAreaField.js +1 -1
- package/dist/es6/radio/lib/StyledRadioButton.d.ts.map +1 -1
- package/dist/es6/radio/lib/StyledRadioButton.js +12 -12
- package/dist/es6/text-area/lib/TextArea.d.ts +1 -1
- package/dist/es6/text-area/lib/TextAreaField.d.ts +1 -1
- package/dist/es6/text-area/lib/TextAreaField.js +1 -1
- package/package.json +4 -4
- package/radio/lib/StyledRadioButton.tsx +19 -7
- package/text-area/lib/TextArea.tsx +1 -1
- package/text-area/lib/TextAreaField.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAoB,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAA4C,MAAM,6BAA6B,CAAC;AAQ/F,MAAM,WAAW,sBAAuB,SAAQ,OAAO;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA6MD,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,8FAsB5B,CAAC"}
|
|
@@ -13,13 +13,13 @@ const RadioLabel_1 = require("./RadioLabel");
|
|
|
13
13
|
const radioWidth = 18;
|
|
14
14
|
const radioHeight = 18;
|
|
15
15
|
const radioInputStencil = canvas_kit_styling_1.createStencil({
|
|
16
|
-
base: { name: "
|
|
16
|
+
base: { name: "907b9c", styles: "box-sizing:border-box;cursor:pointer;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:var(--cnvs-sys-space-zero);&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
|
|
17
17
|
modifiers: {
|
|
18
18
|
variant: {
|
|
19
|
-
inverse: { name: "
|
|
19
|
+
inverse: { name: "a1eca8", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-inverse);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);}" }
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
|
-
}, "radio-input-
|
|
22
|
+
}, "radio-input-f05aaa");
|
|
23
23
|
const StyledRadioInput = common_1.createComponent('input')({
|
|
24
24
|
displayName: 'StyledRadioInput',
|
|
25
25
|
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
@@ -27,21 +27,21 @@ const StyledRadioInput = common_1.createComponent('input')({
|
|
|
27
27
|
},
|
|
28
28
|
});
|
|
29
29
|
const radioInputWrapperStyles = canvas_kit_styling_1.createStencil({
|
|
30
|
-
base: { name: "
|
|
30
|
+
base: { name: "8a4daf", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);}" },
|
|
31
31
|
modifiers: {
|
|
32
32
|
variant: {
|
|
33
|
-
inverse: { name: "
|
|
33
|
+
inverse: { name: "98af03", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
|
|
34
34
|
},
|
|
35
35
|
disabled: {
|
|
36
|
-
true: { name: "
|
|
36
|
+
true: { name: "36a341", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
|
-
}, "radio-input-wrapper-styles-
|
|
39
|
+
}, "radio-input-wrapper-styles-fce2c4");
|
|
40
40
|
const RadioInputWrapper = common_1.createComponent(layout_1.Flex)({
|
|
41
41
|
displayName: 'RadioInputWrapper',
|
|
42
42
|
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
43
43
|
const { disabled } = react_1.default.useContext(RadioLabel_1.RadioLabelContext);
|
|
44
|
-
return (react_1.default.createElement(Element, Object.assign({ ref: ref },
|
|
44
|
+
return (react_1.default.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, radioInputWrapperStyles({ variant, disabled }))), children));
|
|
45
45
|
},
|
|
46
46
|
});
|
|
47
47
|
/**
|
|
@@ -50,9 +50,9 @@ const RadioInputWrapper = common_1.createComponent(layout_1.Flex)({
|
|
|
50
50
|
*/
|
|
51
51
|
exports.StyledRadioButton = common_1.createComponent('input')({
|
|
52
52
|
displayName: 'Radio',
|
|
53
|
-
Component: ({ ...elemProps }, ref, Element) => {
|
|
54
|
-
return (react_1.default.createElement(RadioInputWrapper,
|
|
55
|
-
react_1.default.createElement(StyledRadioInput, Object.assign({ type: "radio" }, elemProps)),
|
|
53
|
+
Component: ({ className, variant, disabled, ...elemProps }, ref, Element) => {
|
|
54
|
+
return (react_1.default.createElement(RadioInputWrapper, { className: className, variant: variant, disabled: disabled },
|
|
55
|
+
react_1.default.createElement(StyledRadioInput, Object.assign({ as: Element, ref: ref, type: "radio", className: className, variant: variant, disabled: disabled }, elemProps)),
|
|
56
56
|
react_1.default.createElement("span", { className: "cnvs-radio-check" })));
|
|
57
57
|
},
|
|
58
58
|
});
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { FormField } from '@workday/canvas-kit-preview-react/form-field';
|
|
4
4
|
/**
|
|
5
|
-
* @deprecated ⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`
|
|
5
|
+
* @deprecated ⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
|
|
6
6
|
*/
|
|
7
7
|
export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
|
|
8
8
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`
|
|
2
|
+
* @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
|
|
3
3
|
*/
|
|
4
4
|
export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
5
5
|
state: {
|
|
@@ -33,7 +33,7 @@ const baseStyles = {
|
|
|
33
33
|
},
|
|
34
34
|
};
|
|
35
35
|
/**
|
|
36
|
-
* @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`
|
|
36
|
+
* @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
|
|
37
37
|
*/
|
|
38
38
|
exports.TextAreaField = common_1.createSubcomponent('textarea')({
|
|
39
39
|
displayName: 'TextArea.Field',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAoB,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAA4C,MAAM,6BAA6B,CAAC;AAQ/F,MAAM,WAAW,sBAAuB,SAAQ,OAAO;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA6MD,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,8FAsB5B,CAAC"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { focusRing, createComponent, } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { Flex, mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
4
|
-
import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
|
|
4
|
+
import { calc, createStencil, px2rem, handleCsProp } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { brand, system } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { RadioLabelContext } from './RadioLabel';
|
|
7
7
|
const radioWidth = 18;
|
|
8
8
|
const radioHeight = 18;
|
|
9
9
|
const radioInputStencil = createStencil({
|
|
10
|
-
base: { name: "
|
|
10
|
+
base: { name: "907b9c", styles: "box-sizing:border-box;cursor:pointer;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:var(--cnvs-sys-space-zero);&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
|
|
11
11
|
modifiers: {
|
|
12
12
|
variant: {
|
|
13
|
-
inverse: { name: "
|
|
13
|
+
inverse: { name: "a1eca8", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-inverse);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);}" }
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
|
-
}, "radio-input-
|
|
16
|
+
}, "radio-input-f05aaa");
|
|
17
17
|
const StyledRadioInput = createComponent('input')({
|
|
18
18
|
displayName: 'StyledRadioInput',
|
|
19
19
|
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
@@ -21,21 +21,21 @@ const StyledRadioInput = createComponent('input')({
|
|
|
21
21
|
},
|
|
22
22
|
});
|
|
23
23
|
const radioInputWrapperStyles = createStencil({
|
|
24
|
-
base: { name: "
|
|
24
|
+
base: { name: "8a4daf", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);}" },
|
|
25
25
|
modifiers: {
|
|
26
26
|
variant: {
|
|
27
|
-
inverse: { name: "
|
|
27
|
+
inverse: { name: "98af03", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
|
|
28
28
|
},
|
|
29
29
|
disabled: {
|
|
30
|
-
true: { name: "
|
|
30
|
+
true: { name: "36a341", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
-
}, "radio-input-wrapper-styles-
|
|
33
|
+
}, "radio-input-wrapper-styles-fce2c4");
|
|
34
34
|
const RadioInputWrapper = createComponent(Flex)({
|
|
35
35
|
displayName: 'RadioInputWrapper',
|
|
36
36
|
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
37
37
|
const { disabled } = React.useContext(RadioLabelContext);
|
|
38
|
-
return (React.createElement(Element, Object.assign({ ref: ref },
|
|
38
|
+
return (React.createElement(Element, Object.assign({ ref: ref }, handleCsProp(elemProps, radioInputWrapperStyles({ variant, disabled }))), children));
|
|
39
39
|
},
|
|
40
40
|
});
|
|
41
41
|
/**
|
|
@@ -44,9 +44,9 @@ const RadioInputWrapper = createComponent(Flex)({
|
|
|
44
44
|
*/
|
|
45
45
|
export const StyledRadioButton = createComponent('input')({
|
|
46
46
|
displayName: 'Radio',
|
|
47
|
-
Component: ({ ...elemProps }, ref, Element) => {
|
|
48
|
-
return (React.createElement(RadioInputWrapper,
|
|
49
|
-
React.createElement(StyledRadioInput, Object.assign({ type: "radio" }, elemProps)),
|
|
47
|
+
Component: ({ className, variant, disabled, ...elemProps }, ref, Element) => {
|
|
48
|
+
return (React.createElement(RadioInputWrapper, { className: className, variant: variant, disabled: disabled },
|
|
49
|
+
React.createElement(StyledRadioInput, Object.assign({ as: Element, ref: ref, type: "radio", className: className, variant: variant, disabled: disabled }, elemProps)),
|
|
50
50
|
React.createElement("span", { className: "cnvs-radio-check" })));
|
|
51
51
|
},
|
|
52
52
|
});
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { FormField } from '@workday/canvas-kit-preview-react/form-field';
|
|
4
4
|
/**
|
|
5
|
-
* @deprecated ⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`
|
|
5
|
+
* @deprecated ⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
|
|
6
6
|
*/
|
|
7
7
|
export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
|
|
8
8
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`
|
|
2
|
+
* @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
|
|
3
3
|
*/
|
|
4
4
|
export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
5
5
|
state: {
|
|
@@ -30,7 +30,7 @@ const baseStyles = {
|
|
|
30
30
|
},
|
|
31
31
|
};
|
|
32
32
|
/**
|
|
33
|
-
* @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`
|
|
33
|
+
* @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
|
|
34
34
|
*/
|
|
35
35
|
export const TextAreaField = createSubcomponent('textarea')({
|
|
36
36
|
displayName: 'TextArea.Field',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-preview-react",
|
|
3
|
-
"version": "11.0.0-alpha.
|
|
3
|
+
"version": "11.0.0-alpha.804-next.0",
|
|
4
4
|
"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.",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@emotion/react": "^11.7.1",
|
|
48
48
|
"@emotion/styled": "^11.6.0",
|
|
49
|
-
"@workday/canvas-kit-react": "^11.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-styling": "^11.0.0-alpha.
|
|
49
|
+
"@workday/canvas-kit-react": "^11.0.0-alpha.804-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^11.0.0-alpha.804-next.0",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^1.3.1",
|
|
53
53
|
"@workday/design-assets-types": "^0.2.8"
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"react-hook-form": "7.36.1",
|
|
59
59
|
"yup": "^0.32.11"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "7533a39ddf564279965947149a424f67d1070b03"
|
|
62
62
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
|
|
2
3
|
import {
|
|
3
4
|
StyledType,
|
|
4
5
|
focusRing,
|
|
@@ -7,8 +8,9 @@ import {
|
|
|
7
8
|
} from '@workday/canvas-kit-react/common';
|
|
8
9
|
|
|
9
10
|
import {Box, Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
10
|
-
import {CSProps, calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
|
|
11
|
+
import {CSProps, calc, createStencil, px2rem, handleCsProp} from '@workday/canvas-kit-styling';
|
|
11
12
|
import {brand, system} from '@workday/canvas-tokens-web';
|
|
13
|
+
|
|
12
14
|
import {RadioLabelContext} from './RadioLabel';
|
|
13
15
|
|
|
14
16
|
const radioWidth = 18;
|
|
@@ -214,7 +216,7 @@ const RadioInputWrapper = createComponent(Flex)<
|
|
|
214
216
|
Component: ({children, variant, ...elemProps}: StyledRadioButtonProps, ref, Element) => {
|
|
215
217
|
const {disabled} = React.useContext(RadioLabelContext);
|
|
216
218
|
return (
|
|
217
|
-
<Element ref={ref} {...
|
|
219
|
+
<Element ref={ref} {...handleCsProp(elemProps, radioInputWrapperStyles({variant, disabled}))}>
|
|
218
220
|
{children}
|
|
219
221
|
</Element>
|
|
220
222
|
);
|
|
@@ -231,12 +233,22 @@ export interface StyledRadioButtonProps extends ExtractProps<typeof Box, 'input'
|
|
|
231
233
|
*/
|
|
232
234
|
export const StyledRadioButton = createComponent('input')({
|
|
233
235
|
displayName: 'Radio',
|
|
234
|
-
Component: (
|
|
236
|
+
Component: (
|
|
237
|
+
{className, variant, disabled, ...elemProps}: StyledRadioButtonProps,
|
|
238
|
+
ref,
|
|
239
|
+
Element
|
|
240
|
+
) => {
|
|
235
241
|
return (
|
|
236
|
-
<RadioInputWrapper
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
242
|
+
<RadioInputWrapper className={className} variant={variant} disabled={disabled}>
|
|
243
|
+
<StyledRadioInput
|
|
244
|
+
as={Element}
|
|
245
|
+
ref={ref}
|
|
246
|
+
type="radio"
|
|
247
|
+
className={className}
|
|
248
|
+
variant={variant}
|
|
249
|
+
disabled={disabled}
|
|
250
|
+
{...elemProps}
|
|
251
|
+
/>
|
|
240
252
|
<span className="cnvs-radio-check" />
|
|
241
253
|
</RadioInputWrapper>
|
|
242
254
|
);
|
|
@@ -7,7 +7,7 @@ import {mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
|
7
7
|
import {TextAreaField} from './TextAreaField';
|
|
8
8
|
import {useTextInputModel} from '@workday/canvas-kit-preview-react/text-input';
|
|
9
9
|
/**
|
|
10
|
-
* @deprecated ⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`
|
|
10
|
+
* @deprecated ⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
|
|
11
11
|
*/
|
|
12
12
|
export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
|
|
13
13
|
/**
|
|
@@ -45,7 +45,7 @@ const baseStyles: CSSProperties = {
|
|
|
45
45
|
};
|
|
46
46
|
|
|
47
47
|
/**
|
|
48
|
-
* @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`
|
|
48
|
+
* @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
|
|
49
49
|
*/
|
|
50
50
|
export const TextAreaField = createSubcomponent('textarea')({
|
|
51
51
|
displayName: 'TextArea.Field',
|