@workday/canvas-kit-preview-react 8.0.0-alpha.150-next.2 → 8.0.0-alpha.151-next.3
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/form-field/lib/FormField.d.ts +2 -2
- package/dist/commonjs/form-field/lib/FormFieldHint.d.ts +1 -1
- package/dist/commonjs/form-field/lib/FormFieldHint.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/FormFieldHint.js +2 -3
- package/dist/commonjs/form-field/lib/FormFieldInput.d.ts +1 -1
- package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/FormFieldLabel.js +3 -9
- package/dist/commonjs/text-area/lib/TextArea.d.ts +2 -2
- package/dist/commonjs/text-area/lib/TextAreaField.d.ts +1 -1
- package/dist/commonjs/text-area/lib/TextAreaField.d.ts.map +1 -1
- package/dist/commonjs/text-area/lib/TextAreaField.js +15 -7
- package/dist/commonjs/text-input/lib/TextInput.d.ts +2 -2
- package/dist/commonjs/text-input/lib/TextInputField.d.ts +1 -1
- package/dist/commonjs/text-input/lib/TextInputField.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/TextInputField.js +14 -7
- package/dist/es6/form-field/lib/FormField.d.ts +2 -2
- package/dist/es6/form-field/lib/FormFieldHint.d.ts +1 -1
- package/dist/es6/form-field/lib/FormFieldHint.d.ts.map +1 -1
- package/dist/es6/form-field/lib/FormFieldHint.js +4 -5
- package/dist/es6/form-field/lib/FormFieldInput.d.ts +1 -1
- package/dist/es6/form-field/lib/FormFieldLabel.d.ts.map +1 -1
- package/dist/es6/form-field/lib/FormFieldLabel.js +5 -11
- package/dist/es6/text-area/lib/TextArea.d.ts +2 -2
- package/dist/es6/text-area/lib/TextAreaField.d.ts +1 -1
- package/dist/es6/text-area/lib/TextAreaField.d.ts.map +1 -1
- package/dist/es6/text-area/lib/TextAreaField.js +15 -7
- package/dist/es6/text-input/lib/TextInput.d.ts +2 -2
- package/dist/es6/text-input/lib/TextInputField.d.ts +1 -1
- package/dist/es6/text-input/lib/TextInputField.d.ts.map +1 -1
- package/dist/es6/text-input/lib/TextInputField.js +14 -7
- package/form-field/lib/FormFieldHint.tsx +23 -30
- package/form-field/lib/FormFieldLabel.tsx +14 -24
- package/package.json +4 -4
- package/text-area/lib/TextAreaField.tsx +1 -1
- package/text-input/lib/TextInputField.tsx +1 -1
|
@@ -37,7 +37,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
|
|
|
37
37
|
events: {};
|
|
38
38
|
}>;
|
|
39
39
|
} & {
|
|
40
|
-
Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
|
|
40
|
+
Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").FontStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/layout").TextStyleProps, {
|
|
41
41
|
state: {
|
|
42
42
|
id: string;
|
|
43
43
|
hasError: boolean;
|
|
@@ -53,7 +53,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
|
|
|
53
53
|
};
|
|
54
54
|
events: {};
|
|
55
55
|
}>;
|
|
56
|
-
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/
|
|
56
|
+
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "left" | "right" | "top" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "listStyle" | "margin" | "overflow" | "padding" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
57
57
|
state: {
|
|
58
58
|
id: string;
|
|
59
59
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/
|
|
1
|
+
export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "left" | "right" | "top" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "listStyle" | "margin" | "overflow" | "padding" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,aAAa;;;;;;;EAyBzB,CAAC"}
|
|
@@ -29,9 +29,8 @@ exports.FormFieldHint = void 0;
|
|
|
29
29
|
var react_1 = __importDefault(require("react"));
|
|
30
30
|
var common_1 = require("@workday/canvas-kit-react/common");
|
|
31
31
|
var tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
32
|
-
var layout_1 = require("@workday/canvas-kit-react/layout");
|
|
33
32
|
var hooks_1 = require("./hooks");
|
|
34
|
-
var
|
|
33
|
+
var text_1 = require("@workday/canvas-kit-react/text");
|
|
35
34
|
exports.FormFieldHint = common_1.createSubcomponent('p')({
|
|
36
35
|
displayName: 'FormField.Hint',
|
|
37
36
|
modelHook: hooks_1.useFormFieldModel,
|
|
@@ -43,5 +42,5 @@ exports.FormFieldHint = common_1.createSubcomponent('p')({
|
|
|
43
42
|
// If there is no hint text just skip rendering
|
|
44
43
|
return null;
|
|
45
44
|
}
|
|
46
|
-
return (react_1.default.createElement(
|
|
45
|
+
return (react_1.default.createElement(text_1.Subtext, __assign({ as: Element, size: "medium", color: model.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: tokens_1.space.xxs }, elemProps), children));
|
|
47
46
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
|
|
1
|
+
export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").FontStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/layout").TextStyleProps, {
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,
|
|
1
|
+
{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,YAAY,EAAW,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAItE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,cAAc;;;;;;;EAyBzB,CAAC"}
|
|
@@ -29,14 +29,8 @@ exports.FormFieldLabel = void 0;
|
|
|
29
29
|
var react_1 = __importDefault(require("react"));
|
|
30
30
|
var common_1 = require("@workday/canvas-kit-react/common");
|
|
31
31
|
var layout_1 = require("@workday/canvas-kit-react/layout");
|
|
32
|
-
var
|
|
32
|
+
var text_1 = require("@workday/canvas-kit-react/text");
|
|
33
33
|
var hooks_1 = require("./hooks");
|
|
34
|
-
var StyledFormFieldLabel = common_1.styled('span')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { fontWeight: tokens_1.type.properties.fontWeights.medium }));
|
|
35
|
-
var StyledAsterisk = common_1.styled(layout_1.Box)({
|
|
36
|
-
fontSize: tokens_1.type.properties.fontSizes[20],
|
|
37
|
-
fontWeight: tokens_1.type.properties.fontWeights.regular,
|
|
38
|
-
textDecoration: 'unset',
|
|
39
|
-
});
|
|
40
34
|
exports.FormFieldLabel = common_1.createSubcomponent('label')({
|
|
41
35
|
displayName: 'FormField.Label',
|
|
42
36
|
modelHook: hooks_1.useFormFieldModel,
|
|
@@ -45,6 +39,6 @@ exports.FormFieldLabel = common_1.createSubcomponent('label')({
|
|
|
45
39
|
var _b = _a.spacing, spacing = _b === void 0 ? 'xxxs' : _b, children = _a.children, elemProps = __rest(_a, ["spacing", "children"]);
|
|
46
40
|
var theme = common_1.useTheme();
|
|
47
41
|
return (react_1.default.createElement(layout_1.HStack, __assign({ as: Element, spacing: spacing, minWidth: "180px" }, elemProps),
|
|
48
|
-
react_1.default.createElement(
|
|
49
|
-
model.state.isRequired && (react_1.default.createElement(
|
|
42
|
+
react_1.default.createElement(text_1.LabelText, { as: "span", fontWeight: "medium" }, children),
|
|
43
|
+
model.state.isRequired && (react_1.default.createElement(text_1.Text, { fontSize: 20, fontWeight: "regular", textDecoration: "unset", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
|
|
50
44
|
});
|
|
@@ -28,7 +28,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
|
|
|
28
28
|
events: {};
|
|
29
29
|
}>;
|
|
30
30
|
} & {
|
|
31
|
-
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
31
|
+
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").FontStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
32
32
|
state: {
|
|
33
33
|
id: string;
|
|
34
34
|
hasError: boolean;
|
|
@@ -51,7 +51,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
|
|
|
51
51
|
};
|
|
52
52
|
events: {};
|
|
53
53
|
}>;
|
|
54
|
-
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/
|
|
54
|
+
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "left" | "right" | "top" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "listStyle" | "margin" | "overflow" | "padding" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
55
55
|
state: {
|
|
56
56
|
id: string;
|
|
57
57
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
1
|
+
export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").FontStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AAyCA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;EAgCxB,CAAC"}
|
|
@@ -31,22 +31,30 @@ var common_1 = require("@workday/canvas-kit-react/common");
|
|
|
31
31
|
var common_2 = require("@workday/canvas-kit-labs-react/common");
|
|
32
32
|
var form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
|
|
33
33
|
var text_input_1 = require("@workday/canvas-kit-preview-react/text-input");
|
|
34
|
-
var baseStyles =
|
|
34
|
+
var baseStyles = {
|
|
35
|
+
transition: '0.2s box-shadow, 0.2s border-color',
|
|
36
|
+
resize: 'both',
|
|
37
|
+
'&::webkit-resizer': {
|
|
35
38
|
display: 'none',
|
|
36
|
-
},
|
|
39
|
+
},
|
|
40
|
+
'&::placeholder': {
|
|
37
41
|
color: tokens_1.inputColors.placeholder,
|
|
38
|
-
},
|
|
42
|
+
},
|
|
43
|
+
'&:hover': {
|
|
39
44
|
borderColor: tokens_1.inputColors.hoverBorder,
|
|
40
|
-
},
|
|
45
|
+
},
|
|
46
|
+
'&:focus:not([disabled])': {
|
|
41
47
|
outline: 'none',
|
|
42
|
-
},
|
|
48
|
+
},
|
|
49
|
+
'&:disabled': {
|
|
43
50
|
backgroundColor: tokens_1.inputColors.disabled.background,
|
|
44
51
|
borderColor: tokens_1.inputColors.disabled.border,
|
|
45
52
|
color: tokens_1.inputColors.disabled.text,
|
|
46
53
|
'&::placeholder': {
|
|
47
54
|
color: tokens_1.inputColors.disabled.text,
|
|
48
55
|
},
|
|
49
|
-
}
|
|
56
|
+
},
|
|
57
|
+
};
|
|
50
58
|
exports.TextAreaField = common_1.createSubcomponent('textarea')({
|
|
51
59
|
displayName: 'TextArea.Field',
|
|
52
60
|
modelHook: text_input_1.useTextInputModel,
|
|
@@ -62,5 +70,5 @@ exports.TextAreaField = common_1.createSubcomponent('textarea')({
|
|
|
62
70
|
boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
|
|
63
71
|
},
|
|
64
72
|
};
|
|
65
|
-
return (react_1.jsx(form_field_1.FormField.Input, __assign({ as: Element, css: [baseStyles, focusStyles] }, elemProps, { border: "1px solid " + tokens_1.inputColors.border, display: "block", backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m, minHeight: 64, minWidth: 280, padding: tokens_1.spaceNumbers.xxs, margin: 0 })));
|
|
73
|
+
return (react_1.jsx(form_field_1.FormField.Input, __assign({ as: Element }, tokens_1.type.levels.subtext.large, { css: [baseStyles, focusStyles] }, elemProps, { border: "1px solid " + tokens_1.inputColors.border, display: "block", backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m, minHeight: 64, minWidth: 280, padding: tokens_1.spaceNumbers.xxs, margin: 0 })));
|
|
66
74
|
});
|
|
@@ -35,7 +35,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
|
|
|
35
35
|
events: {};
|
|
36
36
|
}>;
|
|
37
37
|
} & {
|
|
38
|
-
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
38
|
+
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").FontStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
39
39
|
state: {
|
|
40
40
|
id: string;
|
|
41
41
|
hasError: boolean;
|
|
@@ -58,7 +58,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
|
|
|
58
58
|
};
|
|
59
59
|
events: {};
|
|
60
60
|
}>;
|
|
61
|
-
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/
|
|
61
|
+
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "left" | "right" | "top" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "listStyle" | "margin" | "overflow" | "padding" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
62
62
|
state: {
|
|
63
63
|
id: string;
|
|
64
64
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
1
|
+
export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").FontStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAyCA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;EAiCzB,CAAC"}
|
|
@@ -20,22 +20,29 @@ var common_1 = require("@workday/canvas-kit-react/common");
|
|
|
20
20
|
var common_2 = require("@workday/canvas-kit-labs-react/common");
|
|
21
21
|
var form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
|
|
22
22
|
var hooks_1 = require("./hooks");
|
|
23
|
-
var baseStyles =
|
|
23
|
+
var baseStyles = {
|
|
24
|
+
transition: '0.2s box-shadow, 0.2s border-color',
|
|
25
|
+
'&::placeholder': {
|
|
24
26
|
color: tokens_1.inputColors.placeholder,
|
|
25
|
-
},
|
|
27
|
+
},
|
|
28
|
+
'&:hover': {
|
|
26
29
|
borderColor: tokens_1.inputColors.hoverBorder,
|
|
27
|
-
},
|
|
30
|
+
},
|
|
31
|
+
'&:focus:not([disabled])': {
|
|
28
32
|
outline: 'none',
|
|
29
|
-
},
|
|
33
|
+
},
|
|
34
|
+
'&:disabled': {
|
|
30
35
|
backgroundColor: tokens_1.inputColors.disabled.background,
|
|
31
36
|
borderColor: tokens_1.inputColors.disabled.border,
|
|
32
37
|
color: tokens_1.inputColors.disabled.text,
|
|
33
38
|
'&::placeholder': {
|
|
34
39
|
color: tokens_1.inputColors.disabled.text,
|
|
35
40
|
},
|
|
36
|
-
},
|
|
41
|
+
},
|
|
42
|
+
'::-ms-clear': {
|
|
37
43
|
display: 'none',
|
|
38
|
-
}
|
|
44
|
+
},
|
|
45
|
+
};
|
|
39
46
|
exports.TextInputField = common_1.createSubcomponent('input')({
|
|
40
47
|
displayName: 'TextInput.Field',
|
|
41
48
|
modelHook: hooks_1.useTextInputModel,
|
|
@@ -51,5 +58,5 @@ exports.TextInputField = common_1.createSubcomponent('input')({
|
|
|
51
58
|
boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
|
|
52
59
|
},
|
|
53
60
|
};
|
|
54
|
-
return (react_1.jsx(form_field_1.FormField.Input, __assign({ as: "input", css: [baseStyles, focusStyles], padding: tokens_1.space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: "1px solid " + tokens_1.inputColors.border, backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m }, elemProps)));
|
|
61
|
+
return (react_1.jsx(form_field_1.FormField.Input, __assign({ as: "input" }, tokens_1.type.levels.subtext.large, { css: [baseStyles, focusStyles], padding: tokens_1.space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: "1px solid " + tokens_1.inputColors.border, backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m }, elemProps)));
|
|
55
62
|
});
|
|
@@ -37,7 +37,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
|
|
|
37
37
|
events: {};
|
|
38
38
|
}>;
|
|
39
39
|
} & {
|
|
40
|
-
Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
|
|
40
|
+
Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").FontStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/layout").TextStyleProps, {
|
|
41
41
|
state: {
|
|
42
42
|
id: string;
|
|
43
43
|
hasError: boolean;
|
|
@@ -53,7 +53,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
|
|
|
53
53
|
};
|
|
54
54
|
events: {};
|
|
55
55
|
}>;
|
|
56
|
-
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/
|
|
56
|
+
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "left" | "right" | "top" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "listStyle" | "margin" | "overflow" | "padding" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
57
57
|
state: {
|
|
58
58
|
id: string;
|
|
59
59
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/
|
|
1
|
+
export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "left" | "right" | "top" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "listStyle" | "margin" | "overflow" | "padding" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,aAAa;;;;;;;EAyBzB,CAAC"}
|
|
@@ -21,11 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
import React from 'react';
|
|
24
|
-
import { createSubcomponent, useTheme
|
|
25
|
-
import { space
|
|
26
|
-
import { Box } from '@workday/canvas-kit-react/layout';
|
|
24
|
+
import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
|
|
25
|
+
import { space } from '@workday/canvas-kit-react/tokens';
|
|
27
26
|
import { useFormFieldHint, useFormFieldModel } from './hooks';
|
|
28
|
-
|
|
27
|
+
import { Subtext } from '@workday/canvas-kit-react/text';
|
|
29
28
|
export var FormFieldHint = createSubcomponent('p')({
|
|
30
29
|
displayName: 'FormField.Hint',
|
|
31
30
|
modelHook: useFormFieldModel,
|
|
@@ -37,5 +36,5 @@ export var FormFieldHint = createSubcomponent('p')({
|
|
|
37
36
|
// If there is no hint text just skip rendering
|
|
38
37
|
return null;
|
|
39
38
|
}
|
|
40
|
-
return (React.createElement(
|
|
39
|
+
return (React.createElement(Subtext, __assign({ as: Element, size: "medium", color: model.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: space.xxs }, elemProps), children));
|
|
41
40
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
|
|
1
|
+
export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").FontStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/layout").TextStyleProps, {
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,
|
|
1
|
+
{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,YAAY,EAAW,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAItE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,cAAc;;;;;;;EAyBzB,CAAC"}
|
|
@@ -21,16 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
import React from 'react';
|
|
24
|
-
import { createSubcomponent, useTheme
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
24
|
+
import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
|
|
25
|
+
import { HStack } from '@workday/canvas-kit-react/layout';
|
|
26
|
+
import { LabelText, Text } from '@workday/canvas-kit-react/text';
|
|
27
27
|
import { useFormFieldLabel, useFormFieldModel } from './hooks';
|
|
28
|
-
var StyledFormFieldLabel = styled('span')(__assign(__assign({}, type.levels.subtext.large), { fontWeight: type.properties.fontWeights.medium }));
|
|
29
|
-
var StyledAsterisk = styled(Box)({
|
|
30
|
-
fontSize: type.properties.fontSizes[20],
|
|
31
|
-
fontWeight: type.properties.fontWeights.regular,
|
|
32
|
-
textDecoration: 'unset',
|
|
33
|
-
});
|
|
34
28
|
export var FormFieldLabel = createSubcomponent('label')({
|
|
35
29
|
displayName: 'FormField.Label',
|
|
36
30
|
modelHook: useFormFieldModel,
|
|
@@ -39,6 +33,6 @@ export var FormFieldLabel = createSubcomponent('label')({
|
|
|
39
33
|
var _b = _a.spacing, spacing = _b === void 0 ? 'xxxs' : _b, children = _a.children, elemProps = __rest(_a, ["spacing", "children"]);
|
|
40
34
|
var theme = useTheme();
|
|
41
35
|
return (React.createElement(HStack, __assign({ as: Element, spacing: spacing, minWidth: "180px" }, elemProps),
|
|
42
|
-
React.createElement(
|
|
43
|
-
model.state.isRequired && (React.createElement(
|
|
36
|
+
React.createElement(LabelText, { as: "span", fontWeight: "medium" }, children),
|
|
37
|
+
model.state.isRequired && (React.createElement(Text, { fontSize: 20, fontWeight: "regular", textDecoration: "unset", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
|
|
44
38
|
});
|
|
@@ -28,7 +28,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
|
|
|
28
28
|
events: {};
|
|
29
29
|
}>;
|
|
30
30
|
} & {
|
|
31
|
-
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
31
|
+
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").FontStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
32
32
|
state: {
|
|
33
33
|
id: string;
|
|
34
34
|
hasError: boolean;
|
|
@@ -51,7 +51,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
|
|
|
51
51
|
};
|
|
52
52
|
events: {};
|
|
53
53
|
}>;
|
|
54
|
-
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/
|
|
54
|
+
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "left" | "right" | "top" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "listStyle" | "margin" | "overflow" | "padding" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
55
55
|
state: {
|
|
56
56
|
id: string;
|
|
57
57
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
1
|
+
export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").FontStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AAyCA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;EAgCxB,CAAC"}
|
|
@@ -28,22 +28,30 @@ import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
|
|
|
28
28
|
import { useThemedRing } from '@workday/canvas-kit-labs-react/common';
|
|
29
29
|
import { FormField } from '@workday/canvas-kit-preview-react/form-field';
|
|
30
30
|
import { useTextInputModel } from '@workday/canvas-kit-preview-react/text-input';
|
|
31
|
-
var baseStyles =
|
|
31
|
+
var baseStyles = {
|
|
32
|
+
transition: '0.2s box-shadow, 0.2s border-color',
|
|
33
|
+
resize: 'both',
|
|
34
|
+
'&::webkit-resizer': {
|
|
32
35
|
display: 'none',
|
|
33
|
-
},
|
|
36
|
+
},
|
|
37
|
+
'&::placeholder': {
|
|
34
38
|
color: inputColors.placeholder,
|
|
35
|
-
},
|
|
39
|
+
},
|
|
40
|
+
'&:hover': {
|
|
36
41
|
borderColor: inputColors.hoverBorder,
|
|
37
|
-
},
|
|
42
|
+
},
|
|
43
|
+
'&:focus:not([disabled])': {
|
|
38
44
|
outline: 'none',
|
|
39
|
-
},
|
|
45
|
+
},
|
|
46
|
+
'&:disabled': {
|
|
40
47
|
backgroundColor: inputColors.disabled.background,
|
|
41
48
|
borderColor: inputColors.disabled.border,
|
|
42
49
|
color: inputColors.disabled.text,
|
|
43
50
|
'&::placeholder': {
|
|
44
51
|
color: inputColors.disabled.text,
|
|
45
52
|
},
|
|
46
|
-
}
|
|
53
|
+
},
|
|
54
|
+
};
|
|
47
55
|
export var TextAreaField = createSubcomponent('textarea')({
|
|
48
56
|
displayName: 'TextArea.Field',
|
|
49
57
|
modelHook: useTextInputModel,
|
|
@@ -59,5 +67,5 @@ export var TextAreaField = createSubcomponent('textarea')({
|
|
|
59
67
|
boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
|
|
60
68
|
},
|
|
61
69
|
};
|
|
62
|
-
return (jsx(FormField.Input, __assign({ as: Element, css: [baseStyles, focusStyles] }, elemProps, { border: "1px solid " + inputColors.border, display: "block", backgroundColor: inputColors.background, borderRadius: borderRadius.m, minHeight: 64, minWidth: 280, padding: spaceNumbers.xxs, margin: 0 })));
|
|
70
|
+
return (jsx(FormField.Input, __assign({ as: Element }, type.levels.subtext.large, { css: [baseStyles, focusStyles] }, elemProps, { border: "1px solid " + inputColors.border, display: "block", backgroundColor: inputColors.background, borderRadius: borderRadius.m, minHeight: 64, minWidth: 280, padding: spaceNumbers.xxs, margin: 0 })));
|
|
63
71
|
});
|
|
@@ -35,7 +35,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
|
|
|
35
35
|
events: {};
|
|
36
36
|
}>;
|
|
37
37
|
} & {
|
|
38
|
-
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
38
|
+
Field: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").FontStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
39
39
|
state: {
|
|
40
40
|
id: string;
|
|
41
41
|
hasError: boolean;
|
|
@@ -58,7 +58,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
|
|
|
58
58
|
};
|
|
59
59
|
events: {};
|
|
60
60
|
}>;
|
|
61
|
-
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/
|
|
61
|
+
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "left" | "right" | "top" | "bottom" | "children" | "color" | "width" | "height" | "alignSelf" | "backgroundColor" | "backgroundImage" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "verticalAlign" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "listStyle" | "margin" | "overflow" | "padding" | "textDecoration" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
|
|
62
62
|
state: {
|
|
63
63
|
id: string;
|
|
64
64
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
1
|
+
export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & 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").FontStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAyCA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;EAiCzB,CAAC"}
|
|
@@ -17,22 +17,29 @@ import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
|
|
|
17
17
|
import { useThemedRing } from '@workday/canvas-kit-labs-react/common';
|
|
18
18
|
import { FormField } from '@workday/canvas-kit-preview-react/form-field';
|
|
19
19
|
import { useTextInputField, useTextInputModel } from './hooks';
|
|
20
|
-
var baseStyles =
|
|
20
|
+
var baseStyles = {
|
|
21
|
+
transition: '0.2s box-shadow, 0.2s border-color',
|
|
22
|
+
'&::placeholder': {
|
|
21
23
|
color: inputColors.placeholder,
|
|
22
|
-
},
|
|
24
|
+
},
|
|
25
|
+
'&:hover': {
|
|
23
26
|
borderColor: inputColors.hoverBorder,
|
|
24
|
-
},
|
|
27
|
+
},
|
|
28
|
+
'&:focus:not([disabled])': {
|
|
25
29
|
outline: 'none',
|
|
26
|
-
},
|
|
30
|
+
},
|
|
31
|
+
'&:disabled': {
|
|
27
32
|
backgroundColor: inputColors.disabled.background,
|
|
28
33
|
borderColor: inputColors.disabled.border,
|
|
29
34
|
color: inputColors.disabled.text,
|
|
30
35
|
'&::placeholder': {
|
|
31
36
|
color: inputColors.disabled.text,
|
|
32
37
|
},
|
|
33
|
-
},
|
|
38
|
+
},
|
|
39
|
+
'::-ms-clear': {
|
|
34
40
|
display: 'none',
|
|
35
|
-
}
|
|
41
|
+
},
|
|
42
|
+
};
|
|
36
43
|
export var TextInputField = createSubcomponent('input')({
|
|
37
44
|
displayName: 'TextInput.Field',
|
|
38
45
|
modelHook: useTextInputModel,
|
|
@@ -48,5 +55,5 @@ export var TextInputField = createSubcomponent('input')({
|
|
|
48
55
|
boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
|
|
49
56
|
},
|
|
50
57
|
};
|
|
51
|
-
return (jsx(FormField.Input, __assign({ as: "input", css: [baseStyles, focusStyles], padding: space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: "1px solid " + inputColors.border, backgroundColor: inputColors.background, borderRadius: borderRadius.m }, elemProps)));
|
|
58
|
+
return (jsx(FormField.Input, __assign({ as: "input" }, type.levels.subtext.large, { css: [baseStyles, focusStyles], padding: space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: "1px solid " + inputColors.border, backgroundColor: inputColors.background, borderRadius: borderRadius.m }, elemProps)));
|
|
52
59
|
});
|
|
@@ -1,40 +1,33 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
ExtractProps,
|
|
5
|
-
useTheme,
|
|
6
|
-
styled,
|
|
7
|
-
StyledType,
|
|
8
|
-
} from '@workday/canvas-kit-react/common';
|
|
9
|
-
import {space, type} from '@workday/canvas-kit-react/tokens';
|
|
10
|
-
import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
|
|
2
|
+
import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
|
|
3
|
+
import {space} from '@workday/canvas-kit-react/tokens';
|
|
11
4
|
|
|
12
5
|
import {useFormFieldHint, useFormFieldModel} from './hooks';
|
|
13
|
-
|
|
14
|
-
const StyledHint = styled(Box)<StyledType & BoxProps>({
|
|
15
|
-
...type.levels.subtext.medium,
|
|
16
|
-
});
|
|
6
|
+
import {Subtext} from '@workday/canvas-kit-react/text';
|
|
17
7
|
|
|
18
8
|
export const FormFieldHint = createSubcomponent('p')({
|
|
19
9
|
displayName: 'FormField.Hint',
|
|
20
10
|
modelHook: useFormFieldModel,
|
|
21
11
|
elemPropsHook: useFormFieldHint,
|
|
22
|
-
})<ExtractProps<typeof
|
|
23
|
-
|
|
12
|
+
})<Omit<ExtractProps<typeof Subtext, never>, 'size'>>(
|
|
13
|
+
({children, ...elemProps}, Element, model) => {
|
|
14
|
+
const theme = useTheme();
|
|
24
15
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
16
|
+
if (!children) {
|
|
17
|
+
// If there is no hint text just skip rendering
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
29
20
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
21
|
+
return (
|
|
22
|
+
<Subtext
|
|
23
|
+
as={Element}
|
|
24
|
+
size="medium"
|
|
25
|
+
color={model.state.hasError ? theme.canvas.palette.error.main : undefined}
|
|
26
|
+
marginY={space.xxs}
|
|
27
|
+
{...elemProps}
|
|
28
|
+
>
|
|
29
|
+
{children}
|
|
30
|
+
</Subtext>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
);
|
|
@@ -1,15 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
useTheme,
|
|
7
|
-
styled,
|
|
8
|
-
StyledType,
|
|
9
|
-
} from '@workday/canvas-kit-react/common';
|
|
10
|
-
import {Box, HStack, StackSpacing} from '@workday/canvas-kit-react/layout';
|
|
11
|
-
import {type} from '@workday/canvas-kit-react/tokens';
|
|
12
|
-
|
|
3
|
+
import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
|
|
4
|
+
import {HStack, StackSpacing} from '@workday/canvas-kit-react/layout';
|
|
5
|
+
import {LabelText, Text} from '@workday/canvas-kit-react/text';
|
|
13
6
|
import {useFormFieldLabel, useFormFieldModel} from './hooks';
|
|
14
7
|
|
|
15
8
|
export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, never>, 'spacing'> {
|
|
@@ -24,17 +17,6 @@ export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, ne
|
|
|
24
17
|
spacing?: StackSpacing;
|
|
25
18
|
}
|
|
26
19
|
|
|
27
|
-
const StyledFormFieldLabel = styled('span')({
|
|
28
|
-
...type.levels.subtext.large,
|
|
29
|
-
fontWeight: type.properties.fontWeights.medium,
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
const StyledAsterisk = styled(Box)<StyledType>({
|
|
33
|
-
fontSize: type.properties.fontSizes[20],
|
|
34
|
-
fontWeight: type.properties.fontWeights.regular,
|
|
35
|
-
textDecoration: 'unset',
|
|
36
|
-
});
|
|
37
|
-
|
|
38
20
|
export const FormFieldLabel = createSubcomponent('label')({
|
|
39
21
|
displayName: 'FormField.Label',
|
|
40
22
|
modelHook: useFormFieldModel,
|
|
@@ -44,11 +26,19 @@ export const FormFieldLabel = createSubcomponent('label')({
|
|
|
44
26
|
|
|
45
27
|
return (
|
|
46
28
|
<HStack as={Element} spacing={spacing} minWidth="180px" {...elemProps}>
|
|
47
|
-
<
|
|
29
|
+
<LabelText as="span" fontWeight="medium">
|
|
30
|
+
{children}
|
|
31
|
+
</LabelText>
|
|
48
32
|
{model.state.isRequired && (
|
|
49
|
-
<
|
|
33
|
+
<Text
|
|
34
|
+
fontSize={20}
|
|
35
|
+
fontWeight="regular"
|
|
36
|
+
textDecoration="unset"
|
|
37
|
+
color={theme.canvas.palette.error.main}
|
|
38
|
+
aria-hidden="true"
|
|
39
|
+
>
|
|
50
40
|
*
|
|
51
|
-
</
|
|
41
|
+
</Text>
|
|
52
42
|
)}
|
|
53
43
|
</HStack>
|
|
54
44
|
);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-preview-react",
|
|
3
|
-
"version": "8.0.0-alpha.
|
|
3
|
+
"version": "8.0.0-alpha.151-next.3+548c0a40",
|
|
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,15 +46,15 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@emotion/react": "^11.7.1",
|
|
48
48
|
"@emotion/styled": "^11.6.0",
|
|
49
|
-
"@workday/canvas-kit-react": "^8.0.0-alpha.
|
|
49
|
+
"@workday/canvas-kit-react": "^8.0.0-alpha.151-next.3+548c0a40",
|
|
50
50
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
51
51
|
"@workday/design-assets-types": "^0.2.8"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
55
|
-
"@workday/canvas-kit-labs-react": "^8.0.0-alpha.
|
|
55
|
+
"@workday/canvas-kit-labs-react": "^8.0.0-alpha.151-next.3+548c0a40",
|
|
56
56
|
"formik": "^2.2.9",
|
|
57
57
|
"yup": "^0.31.1"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "548c0a4090f25b1feeabaf1c1288fec4539e7d0a"
|
|
60
60
|
}
|
|
@@ -15,7 +15,6 @@ import {FormField} from '@workday/canvas-kit-preview-react/form-field';
|
|
|
15
15
|
import {useTextInputModel} from '@workday/canvas-kit-preview-react/text-input';
|
|
16
16
|
|
|
17
17
|
const baseStyles: CSSProperties = {
|
|
18
|
-
...type.levels.subtext.large,
|
|
19
18
|
transition: '0.2s box-shadow, 0.2s border-color',
|
|
20
19
|
resize: 'both',
|
|
21
20
|
'&::webkit-resizer': {
|
|
@@ -59,6 +58,7 @@ export const TextAreaField = createSubcomponent('textarea')({
|
|
|
59
58
|
return (
|
|
60
59
|
<FormField.Input
|
|
61
60
|
as={Element}
|
|
61
|
+
{...type.levels.subtext.large}
|
|
62
62
|
css={[baseStyles, focusStyles]}
|
|
63
63
|
{...elemProps}
|
|
64
64
|
border={`1px solid ${inputColors.border}`}
|
|
@@ -16,7 +16,6 @@ import {FormField} from '@workday/canvas-kit-preview-react/form-field';
|
|
|
16
16
|
import {useTextInputField, useTextInputModel} from './hooks';
|
|
17
17
|
|
|
18
18
|
const baseStyles: CSSProperties = {
|
|
19
|
-
...type.levels.subtext.large,
|
|
20
19
|
transition: '0.2s box-shadow, 0.2s border-color',
|
|
21
20
|
'&::placeholder': {
|
|
22
21
|
color: inputColors.placeholder,
|
|
@@ -60,6 +59,7 @@ export const TextInputField = createSubcomponent('input')({
|
|
|
60
59
|
return (
|
|
61
60
|
<FormField.Input
|
|
62
61
|
as="input"
|
|
62
|
+
{...type.levels.subtext.large}
|
|
63
63
|
css={[baseStyles, focusStyles]}
|
|
64
64
|
padding={space.xxs}
|
|
65
65
|
margin={0}
|