@workday/canvas-kit-preview-react 6.3.1 → 6.3.5
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.map +1 -1
- package/dist/commonjs/form-field/lib/FormFieldHint.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/FormFieldLabel.js +1 -1
- package/dist/commonjs/menu/lib/MenuItem.js +1 -1
- package/dist/commonjs/text-area/lib/TextArea.d.ts.map +1 -1
- package/dist/commonjs/text-area/lib/TextAreaField.d.ts.map +1 -1
- package/dist/commonjs/text-area/lib/TextAreaField.js +1 -1
- package/dist/commonjs/text-area/lib/hooks/useTextAreaModel.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/TextInput.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/TextInputField.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/TextInputField.js +1 -1
- package/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts.map +1 -1
- package/dist/es6/form-field/lib/FormField.d.ts.map +1 -1
- package/dist/es6/form-field/lib/FormField.js +1 -1
- package/dist/es6/form-field/lib/FormFieldHint.d.ts.map +1 -1
- package/dist/es6/form-field/lib/FormFieldHint.js +1 -1
- package/dist/es6/form-field/lib/FormFieldLabel.d.ts.map +1 -1
- package/dist/es6/form-field/lib/FormFieldLabel.js +1 -1
- package/dist/es6/menu/lib/MenuItem.js +1 -1
- package/dist/es6/text-area/lib/TextArea.d.ts.map +1 -1
- package/dist/es6/text-area/lib/TextArea.js +1 -1
- package/dist/es6/text-area/lib/TextAreaField.d.ts.map +1 -1
- package/dist/es6/text-area/lib/TextAreaField.js +2 -2
- package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts.map +1 -1
- package/dist/es6/text-area/lib/hooks/useTextAreaModel.js +1 -1
- package/dist/es6/text-input/lib/TextInput.d.ts.map +1 -1
- package/dist/es6/text-input/lib/TextInput.js +1 -1
- package/dist/es6/text-input/lib/TextInputField.d.ts.map +1 -1
- package/dist/es6/text-input/lib/TextInputField.js +2 -2
- package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts.map +1 -1
- package/dist/es6/text-input/lib/hooks/useTextInputModel.js +1 -1
- package/form-field/lib/FormField.tsx +7 -5
- package/form-field/lib/FormFieldHint.tsx +6 -1
- package/form-field/lib/FormFieldLabel.tsx +2 -8
- package/form-field/lib/hooks/useFormFieldOrientation.tsx +6 -6
- package/menu/lib/MenuItem.tsx +1 -1
- package/package.json +4 -4
- package/text-area/lib/TextArea.tsx +8 -4
- package/text-area/lib/TextAreaField.tsx +10 -4
- package/text-area/lib/hooks/useTextAreaModel.ts +1 -4
- package/text-input/lib/TextInput.tsx +8 -4
- package/text-input/lib/TextInputField.tsx +9 -4
- package/text-input/lib/hooks/useTextInputModel.ts +1 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAE1E,OAAO,EAEL,cAAc,EACd,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,qBAAqB;;;;OAAiD,CAAC;AAEpF,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAE1E,OAAO,EAEL,cAAc,EACd,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,qBAAqB;;;;OAAiD,CAAC;AAEpF,MAAM,WAAW,cACf,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACpD,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,SAAS;;;;CAqBpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,
|
|
1
|
+
{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAG1D,OAAO,EAAC,cAAc,EAAmB,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IACzE,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,sFA0BxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAG3E,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAcD,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAG3E,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAcD,eAAO,MAAM,cAAc,2FAqBzB,CAAC"}
|
|
@@ -44,7 +44,7 @@ exports.FormFieldLabel = common_1.createComponent('label')({
|
|
|
44
44
|
var localModel = common_1.useModelContext(FormField_1.FormFieldModelContext, model);
|
|
45
45
|
var props = hooks_1.useFormFieldLabel(localModel, elemProps, ref);
|
|
46
46
|
var theme = common_1.useTheme();
|
|
47
|
-
return (core_1.jsx(layout_1.HStack, __assign({ as: "label", spacing: spacing, css: styles.label, minWidth:
|
|
47
|
+
return (core_1.jsx(layout_1.HStack, __assign({ as: "label", spacing: spacing, css: styles.label, minWidth: "180px" }, props),
|
|
48
48
|
core_1.jsx("span", null, children),
|
|
49
49
|
localModel.state.isRequired && (core_1.jsx("span", { css: [styles.asterisk, { color: theme.canvas.palette.error.main }], "aria-hidden": "true" }, "*"))));
|
|
50
50
|
},
|
|
@@ -208,7 +208,7 @@ var MenuItem = /** @class */ (function (_super) {
|
|
|
208
208
|
secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
|
|
209
209
|
return (React.createElement(React.Fragment, null,
|
|
210
210
|
hasDivider && React.createElement(Divider, null),
|
|
211
|
-
React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled":
|
|
211
|
+
React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused }, elemProps),
|
|
212
212
|
icon && iconProps && React.createElement(StyledSystemIcon, __assign({}, iconProps)),
|
|
213
213
|
React.createElement(LabelContainer, null, children),
|
|
214
214
|
secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAGtD,OAAO,EAAC,aAAa,EAAmB,MAAM,SAAS,CAAC;AAKxD,eAAO,MAAM,oBAAoB;;;;OAAwB,CAAC;AAE1D,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;CAqBnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AAUA,OAAO,
|
|
1
|
+
{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAGvE,OAAO,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAEtC,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACrF,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA4BD,eAAO,MAAM,aAAa,6FAkCxB,CAAC"}
|
|
@@ -60,6 +60,6 @@ exports.TextAreaField = common_1.createComponent('textarea')({
|
|
|
60
60
|
boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
|
|
61
61
|
},
|
|
62
62
|
};
|
|
63
|
-
return (core_1.jsx(form_field_1.FormField.Input, __assign({ as: "textarea", ref: ref, css: [baseStyles, focusStyles] }, elemProps, { border: "1px solid " + tokens_1.inputColors.border, display:
|
|
63
|
+
return (core_1.jsx(form_field_1.FormField.Input, __assign({ as: "textarea", ref: ref, 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 })));
|
|
64
64
|
},
|
|
65
65
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTextAreaModel.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/useTextAreaModel.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useTextAreaModel.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/useTextAreaModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAE/F,eAAO,MAAM,gBAAgB;;;;MAAoB,CAAC;AAElD,oBAAY,aAAa,GAAG,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,
|
|
1
|
+
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAGtD,OAAO,EAAoB,cAAc,EAAC,MAAM,SAAS,CAAC;AAK1D,eAAO,MAAM,qBAAqB;;;;OAAwB,CAAC;AAE3D,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC3E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;CAqBpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAUA,OAAO,
|
|
1
|
+
{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAGvE,OAAO,EAAoB,cAAc,EAAC,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACtF,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AA2BD,eAAO,MAAM,cAAc,2FAkCzB,CAAC"}
|
|
@@ -62,6 +62,6 @@ exports.TextInputField = common_1.createComponent('input')({
|
|
|
62
62
|
boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
|
|
63
63
|
},
|
|
64
64
|
};
|
|
65
|
-
return (core_1.jsx(form_field_1.FormField.Input, __assign({ as: "input", css: [baseStyles, focusStyles], padding: tokens_1.space.xxs, margin: 0, display:
|
|
65
|
+
return (core_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 }, props)));
|
|
66
66
|
},
|
|
67
67
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAE/F,eAAO,MAAM,iBAAiB;;;;MAAoB,CAAC;AAEnD,oBAAY,cAAc,GAAG,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAE1E,OAAO,EAEL,cAAc,EACd,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,qBAAqB;;;;OAAiD,CAAC;AAEpF,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAE1E,OAAO,EAEL,cAAc,EACd,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,qBAAqB;;;;OAAiD,CAAC;AAEpF,MAAM,WAAW,cACf,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACpD,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,SAAS;;;;CAqBpB,CAAC"}
|
|
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
23
23
|
import React from 'react';
|
|
24
24
|
import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
|
|
25
25
|
import { Stack } from '@workday/canvas-kit-labs-react/layout';
|
|
26
|
-
import { useFormFieldModel, useFormFieldOrientation } from './hooks';
|
|
26
|
+
import { useFormFieldModel, useFormFieldOrientation, } from './hooks';
|
|
27
27
|
import { FormFieldInput } from './FormFieldInput';
|
|
28
28
|
import { FormFieldLabel } from './FormFieldLabel';
|
|
29
29
|
import { FormFieldHint } from './FormFieldHint';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,
|
|
1
|
+
{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAG1D,OAAO,EAAC,cAAc,EAAmB,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IACzE,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,sFA0BxB,CAAC"}
|
|
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
/** @jsx jsx */
|
|
24
24
|
import { jsx } from '@emotion/core';
|
|
25
|
-
import { createComponent, useModelContext, useTheme } from '@workday/canvas-kit-react/common';
|
|
25
|
+
import { createComponent, useModelContext, useTheme, } from '@workday/canvas-kit-react/common';
|
|
26
26
|
import { space, type } from '@workday/canvas-kit-react/tokens';
|
|
27
27
|
import { Box } from '@workday/canvas-kit-labs-react/common';
|
|
28
28
|
import { FormFieldModelContext } from './FormField';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAG3E,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAcD,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAG3E,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAcD,eAAO,MAAM,cAAc,2FAqBzB,CAAC"}
|
|
@@ -42,7 +42,7 @@ export var FormFieldLabel = createComponent('label')({
|
|
|
42
42
|
var localModel = useModelContext(FormFieldModelContext, model);
|
|
43
43
|
var props = useFormFieldLabel(localModel, elemProps, ref);
|
|
44
44
|
var theme = useTheme();
|
|
45
|
-
return (jsx(HStack, __assign({ as: "label", spacing: spacing, css: styles.label, minWidth:
|
|
45
|
+
return (jsx(HStack, __assign({ as: "label", spacing: spacing, css: styles.label, minWidth: "180px" }, props),
|
|
46
46
|
jsx("span", null, children),
|
|
47
47
|
localModel.state.isRequired && (jsx("span", { css: [styles.asterisk, { color: theme.canvas.palette.error.main }], "aria-hidden": "true" }, "*"))));
|
|
48
48
|
},
|
|
@@ -196,7 +196,7 @@ var MenuItem = /** @class */ (function (_super) {
|
|
|
196
196
|
secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
|
|
197
197
|
return (React.createElement(React.Fragment, null,
|
|
198
198
|
hasDivider && React.createElement(Divider, null),
|
|
199
|
-
React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled":
|
|
199
|
+
React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused }, elemProps),
|
|
200
200
|
icon && iconProps && React.createElement(StyledSystemIcon, __assign({}, iconProps)),
|
|
201
201
|
React.createElement(LabelContainer, null, children),
|
|
202
202
|
secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAGtD,OAAO,EAAC,aAAa,EAAmB,MAAM,SAAS,CAAC;AAKxD,eAAO,MAAM,oBAAoB;;;;OAAwB,CAAC;AAE1D,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;CAqBnB,CAAC"}
|
|
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
import React from 'react';
|
|
24
24
|
import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
|
|
25
|
-
import { FormFieldModelContext, useFormFieldOrientation } from '@workday/canvas-kit-preview-react/form-field';
|
|
25
|
+
import { FormFieldModelContext, useFormFieldOrientation, } from '@workday/canvas-kit-preview-react/form-field';
|
|
26
26
|
import { Stack } from '@workday/canvas-kit-labs-react/layout';
|
|
27
27
|
import { useTextAreaModel } from './hooks';
|
|
28
28
|
import { TextAreaField } from './TextAreaField';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AAUA,OAAO,
|
|
1
|
+
{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAGvE,OAAO,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAEtC,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACrF,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA4BD,eAAO,MAAM,aAAa,6FAkCxB,CAAC"}
|
|
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
23
23
|
/** @jsx jsx */
|
|
24
24
|
import { jsx } from '@emotion/core';
|
|
25
25
|
import { borderRadius, inputColors, spaceNumbers, type, } from '@workday/canvas-kit-react/tokens';
|
|
26
|
-
import { createComponent, useModelContext, useTheme } from '@workday/canvas-kit-react/common';
|
|
26
|
+
import { createComponent, useModelContext, useTheme, } from '@workday/canvas-kit-react/common';
|
|
27
27
|
import { useThemedRing } from '@workday/canvas-kit-labs-react/common';
|
|
28
28
|
import { FormField } from '@workday/canvas-kit-preview-react/form-field';
|
|
29
29
|
import { TextAreaModelContext } from './TextArea';
|
|
@@ -58,6 +58,6 @@ export var TextAreaField = createComponent('textarea')({
|
|
|
58
58
|
boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
|
|
59
59
|
},
|
|
60
60
|
};
|
|
61
|
-
return (jsx(FormField.Input, __assign({ as: "textarea", ref: ref, css: [baseStyles, focusStyles] }, elemProps, { border: "1px solid " + inputColors.border, display:
|
|
61
|
+
return (jsx(FormField.Input, __assign({ as: "textarea", ref: ref, 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 })));
|
|
62
62
|
},
|
|
63
63
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTextAreaModel.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/useTextAreaModel.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useTextAreaModel.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/useTextAreaModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAE/F,eAAO,MAAM,gBAAgB;;;;MAAoB,CAAC;AAElD,oBAAY,aAAa,GAAG,cAAc,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { useFormFieldModel
|
|
1
|
+
import { useFormFieldModel } from '@workday/canvas-kit-preview-react/form-field';
|
|
2
2
|
export var useTextAreaModel = useFormFieldModel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,
|
|
1
|
+
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAGtD,OAAO,EAAoB,cAAc,EAAC,MAAM,SAAS,CAAC;AAK1D,eAAO,MAAM,qBAAqB;;;;OAAwB,CAAC;AAE3D,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC3E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;CAqBpB,CAAC"}
|
|
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
import React from 'react';
|
|
24
24
|
import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
|
|
25
|
-
import { FormFieldModelContext, useFormFieldOrientation } from '@workday/canvas-kit-preview-react/form-field';
|
|
25
|
+
import { FormFieldModelContext, useFormFieldOrientation, } from '@workday/canvas-kit-preview-react/form-field';
|
|
26
26
|
import { Stack } from '@workday/canvas-kit-labs-react/layout';
|
|
27
27
|
import { useTextInputModel } from './hooks';
|
|
28
28
|
import { TextInputField } from './TextInputField';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAUA,OAAO,
|
|
1
|
+
{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAGvE,OAAO,EAAoB,cAAc,EAAC,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACtF,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AA2BD,eAAO,MAAM,cAAc,2FAkCzB,CAAC"}
|
|
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
23
23
|
/** @jsx jsx */
|
|
24
24
|
import { jsx } from '@emotion/core';
|
|
25
25
|
import { borderRadius, inputColors, space, type, } from '@workday/canvas-kit-react/tokens';
|
|
26
|
-
import { createComponent, useModelContext, useTheme } from '@workday/canvas-kit-react/common';
|
|
26
|
+
import { createComponent, useModelContext, useTheme, } from '@workday/canvas-kit-react/common';
|
|
27
27
|
import { useThemedRing } from '@workday/canvas-kit-labs-react/common';
|
|
28
28
|
import { FormField } from '@workday/canvas-kit-preview-react/form-field';
|
|
29
29
|
import { TextInputModelContext } from './TextInput';
|
|
@@ -60,6 +60,6 @@ export var TextInputField = createComponent('input')({
|
|
|
60
60
|
boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
|
|
61
61
|
},
|
|
62
62
|
};
|
|
63
|
-
return (jsx(FormField.Input, __assign({ as: "input", css: [baseStyles, focusStyles], padding: space.xxs, margin: 0, display:
|
|
63
|
+
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 }, props)));
|
|
64
64
|
},
|
|
65
65
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAE/F,eAAO,MAAM,iBAAiB;;;;MAAoB,CAAC;AAEnD,oBAAY,cAAc,GAAG,cAAc,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { useFormFieldModel
|
|
1
|
+
import { useFormFieldModel } from '@workday/canvas-kit-preview-react/form-field';
|
|
2
2
|
export var useTextInputModel = useFormFieldModel;
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
useFormFieldModel,
|
|
8
8
|
FormFieldModel,
|
|
9
9
|
FormFieldModelConfig,
|
|
10
|
-
useFormFieldOrientation
|
|
10
|
+
useFormFieldOrientation,
|
|
11
11
|
} from './hooks';
|
|
12
12
|
import {FormFieldInput} from './FormFieldInput';
|
|
13
13
|
import {FormFieldLabel} from './FormFieldLabel';
|
|
@@ -15,7 +15,9 @@ import {FormFieldHint} from './FormFieldHint';
|
|
|
15
15
|
|
|
16
16
|
export const FormFieldModelContext = React.createContext<FormFieldModel>({} as any);
|
|
17
17
|
|
|
18
|
-
export interface FormFieldProps
|
|
18
|
+
export interface FormFieldProps
|
|
19
|
+
extends FormFieldModelConfig,
|
|
20
|
+
Omit<ExtractProps<typeof Stack, never>, 'spacing'> {
|
|
19
21
|
model?: FormFieldModel;
|
|
20
22
|
/**
|
|
21
23
|
* Children of the Text Input. Should contain a `<FormField.Input>`, a `<FormField.Label>` and an optional `<FormField.Hint>`
|
|
@@ -24,7 +26,7 @@ export interface FormFieldProps extends FormFieldModelConfig, Omit<ExtractProps<
|
|
|
24
26
|
/**
|
|
25
27
|
* The direction the child elements should stack
|
|
26
28
|
*/
|
|
27
|
-
orientation: 'vertical' | 'horizontal'
|
|
29
|
+
orientation: 'vertical' | 'horizontal';
|
|
28
30
|
/**
|
|
29
31
|
* Spacing between children elements
|
|
30
32
|
* @default xxxs when vertical l when orientation is horizontal
|
|
@@ -35,10 +37,10 @@ export interface FormFieldProps extends FormFieldModelConfig, Omit<ExtractProps<
|
|
|
35
37
|
export const FormField = createComponent()({
|
|
36
38
|
displayName: 'FormField',
|
|
37
39
|
Component: ({children, model, spacing, orientation, ...props}: FormFieldProps, ref) => {
|
|
38
|
-
const {hasError, id, isRequired, ...elemProps} = props
|
|
40
|
+
const {hasError, id, isRequired, ...elemProps} = props;
|
|
39
41
|
const value = useDefaultModel(model, {hasError, id, isRequired}, useFormFieldModel);
|
|
40
42
|
|
|
41
|
-
const layoutProps = useFormFieldOrientation(orientation)
|
|
43
|
+
const layoutProps = useFormFieldOrientation(orientation);
|
|
42
44
|
|
|
43
45
|
return (
|
|
44
46
|
<FormFieldModelContext.Provider value={value}>
|
|
@@ -2,7 +2,12 @@
|
|
|
2
2
|
import {jsx} from '@emotion/core';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
|
|
5
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
createComponent,
|
|
7
|
+
ExtractProps,
|
|
8
|
+
useModelContext,
|
|
9
|
+
useTheme,
|
|
10
|
+
} from '@workday/canvas-kit-react/common';
|
|
6
11
|
import {space, type} from '@workday/canvas-kit-react/tokens';
|
|
7
12
|
import {Box} from '@workday/canvas-kit-labs-react/common';
|
|
8
13
|
|
|
@@ -42,19 +42,13 @@ const styles: ComponentStyles = {
|
|
|
42
42
|
|
|
43
43
|
export const FormFieldLabel = createComponent('label')({
|
|
44
44
|
displayName: 'FormField.Label',
|
|
45
|
-
Component: ({spacing='xxxs', model, children, ...elemProps}: FormFieldLabelProps, ref) => {
|
|
45
|
+
Component: ({spacing = 'xxxs', model, children, ...elemProps}: FormFieldLabelProps, ref) => {
|
|
46
46
|
const localModel = useModelContext(FormFieldModelContext, model);
|
|
47
47
|
const props = useFormFieldLabel(localModel, elemProps, ref);
|
|
48
48
|
const theme = useTheme();
|
|
49
49
|
|
|
50
50
|
return (
|
|
51
|
-
<HStack
|
|
52
|
-
as="label"
|
|
53
|
-
spacing={spacing}
|
|
54
|
-
css={styles.label}
|
|
55
|
-
minWidth='180px'
|
|
56
|
-
{...props}
|
|
57
|
-
>
|
|
51
|
+
<HStack as="label" spacing={spacing} css={styles.label} minWidth="180px" {...props}>
|
|
58
52
|
<span>{children}</span>
|
|
59
53
|
{localModel.state.isRequired && (
|
|
60
54
|
<span
|
|
@@ -6,23 +6,23 @@ import {space} from '@workday/canvas-kit-react/tokens';
|
|
|
6
6
|
*/
|
|
7
7
|
export const useFormFieldOrientation = (orientation: 'horizontal' | 'vertical') => {
|
|
8
8
|
let layoutProps: {
|
|
9
|
-
flexDirection: StackProps['flexDirection']
|
|
10
|
-
alignItems: StackProps['alignItems']
|
|
11
|
-
spacing: StackSpacing
|
|
12
|
-
}
|
|
9
|
+
flexDirection: StackProps['flexDirection'];
|
|
10
|
+
alignItems: StackProps['alignItems'];
|
|
11
|
+
spacing: StackSpacing;
|
|
12
|
+
};
|
|
13
13
|
|
|
14
14
|
if (orientation === 'horizontal') {
|
|
15
15
|
layoutProps = {
|
|
16
16
|
flexDirection: 'row',
|
|
17
17
|
spacing: space.l,
|
|
18
18
|
alignItems: 'center',
|
|
19
|
-
}
|
|
19
|
+
};
|
|
20
20
|
} else {
|
|
21
21
|
layoutProps = {
|
|
22
22
|
flexDirection: 'column',
|
|
23
23
|
spacing: space.xxxs,
|
|
24
24
|
alignItems: 'flex-start',
|
|
25
|
-
}
|
|
25
|
+
};
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
return layoutProps;
|
package/menu/lib/MenuItem.tsx
CHANGED
|
@@ -274,7 +274,7 @@ class MenuItem extends React.Component<MenuItemProps> {
|
|
|
274
274
|
id={id}
|
|
275
275
|
role={role}
|
|
276
276
|
onClick={this.handleClick}
|
|
277
|
-
aria-disabled={
|
|
277
|
+
aria-disabled={isDisabled ? true : undefined}
|
|
278
278
|
isDisabled={!!isDisabled}
|
|
279
279
|
isFocused={!!isFocused}
|
|
280
280
|
{...elemProps}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-preview-react",
|
|
3
|
-
"version": "6.3.
|
|
3
|
+
"version": "6.3.5",
|
|
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",
|
|
@@ -54,15 +54,15 @@
|
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"@emotion/core": "^10.0.28",
|
|
56
56
|
"@emotion/styled": "^10.0.27",
|
|
57
|
-
"@workday/canvas-kit-react": "^6.3.
|
|
57
|
+
"@workday/canvas-kit-react": "^6.3.5",
|
|
58
58
|
"@workday/canvas-system-icons-web": "1.0.41",
|
|
59
59
|
"@workday/design-assets-types": "^0.2.4"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@workday/canvas-accent-icons-web": "^1.0.0",
|
|
63
|
-
"@workday/canvas-kit-labs-react": "^6.3.
|
|
63
|
+
"@workday/canvas-kit-labs-react": "^6.3.5",
|
|
64
64
|
"formik": "^2.2.9",
|
|
65
65
|
"yup": "^0.31.1"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "bf02ab73d5e19ecde29cb853dad4f558201cb886"
|
|
68
68
|
}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import {createComponent, ExtractProps, useDefaultModel} from '@workday/canvas-kit-react/common';
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
FormField,
|
|
6
|
+
FormFieldModelContext,
|
|
7
|
+
useFormFieldOrientation,
|
|
8
|
+
} from '@workday/canvas-kit-preview-react/form-field';
|
|
5
9
|
import {Stack} from '@workday/canvas-kit-labs-react/layout';
|
|
6
10
|
|
|
7
|
-
import {
|
|
11
|
+
import {TextAreaModel, useTextAreaModel} from './hooks';
|
|
8
12
|
import {TextAreaField} from './TextAreaField';
|
|
9
13
|
import {TextAreaLabel} from './TextAreaLabel';
|
|
10
14
|
import {TextAreaHint} from './TextAreaHint';
|
|
@@ -22,10 +26,10 @@ export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
|
|
|
22
26
|
export const TextArea = createComponent()({
|
|
23
27
|
displayName: 'TextArea',
|
|
24
28
|
Component: ({children, model, orientation, ...props}: TextAreaProps, ref) => {
|
|
25
|
-
const {hasError, id, isRequired, ...elemProps} = props
|
|
29
|
+
const {hasError, id, isRequired, ...elemProps} = props;
|
|
26
30
|
const value = useDefaultModel(model, {hasError, id, isRequired}, useTextAreaModel);
|
|
27
31
|
|
|
28
|
-
const layoutProps = useFormFieldOrientation(orientation)
|
|
32
|
+
const layoutProps = useFormFieldOrientation(orientation);
|
|
29
33
|
|
|
30
34
|
return (
|
|
31
35
|
<TextAreaModelContext.Provider value={value}>
|
|
@@ -8,12 +8,17 @@ import {
|
|
|
8
8
|
spaceNumbers,
|
|
9
9
|
type,
|
|
10
10
|
} from '@workday/canvas-kit-react/tokens';
|
|
11
|
-
import {
|
|
11
|
+
import {
|
|
12
|
+
createComponent,
|
|
13
|
+
ExtractProps,
|
|
14
|
+
useModelContext,
|
|
15
|
+
useTheme,
|
|
16
|
+
} from '@workday/canvas-kit-react/common';
|
|
12
17
|
import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
|
|
13
18
|
import {FormField} from '@workday/canvas-kit-preview-react/form-field';
|
|
14
19
|
|
|
15
20
|
import {TextAreaModelContext} from './TextArea';
|
|
16
|
-
import {
|
|
21
|
+
import {TextAreaModel} from './hooks';
|
|
17
22
|
|
|
18
23
|
export interface TextAreaFieldProps extends ExtractProps<typeof FormField.Input, never> {
|
|
19
24
|
model?: TextAreaModel;
|
|
@@ -66,9 +71,10 @@ export const TextAreaField = createComponent('textarea')({
|
|
|
66
71
|
<FormField.Input
|
|
67
72
|
as="textarea"
|
|
68
73
|
ref={ref}
|
|
69
|
-
css={[baseStyles, focusStyles]}
|
|
74
|
+
css={[baseStyles, focusStyles]}
|
|
75
|
+
{...elemProps}
|
|
70
76
|
border={`1px solid ${inputColors.border}`}
|
|
71
|
-
display=
|
|
77
|
+
display="block"
|
|
72
78
|
backgroundColor={inputColors.background}
|
|
73
79
|
borderRadius={borderRadius.m}
|
|
74
80
|
minHeight={64}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import {createComponent, ExtractProps, useDefaultModel} from '@workday/canvas-kit-react/common';
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
FormField,
|
|
6
|
+
FormFieldModelContext,
|
|
7
|
+
useFormFieldOrientation,
|
|
8
|
+
} from '@workday/canvas-kit-preview-react/form-field';
|
|
5
9
|
import {Stack} from '@workday/canvas-kit-labs-react/layout';
|
|
6
10
|
|
|
7
11
|
import {useTextInputModel, TextInputModel} from './hooks';
|
|
@@ -11,7 +15,7 @@ import {TextInputHint} from './TextInputHint';
|
|
|
11
15
|
|
|
12
16
|
export const TextInputModelContext = FormFieldModelContext;
|
|
13
17
|
|
|
14
|
-
export interface TextInputProps
|
|
18
|
+
export interface TextInputProps extends ExtractProps<typeof FormField, never> {
|
|
15
19
|
model?: TextInputModel;
|
|
16
20
|
/**
|
|
17
21
|
* Children of the Text Input. Should contain a `<TextInput.Field>`, a `<TextInput.Label>` and an optional `<TextInput.Hint>`
|
|
@@ -22,10 +26,10 @@ export interface TextInputProps extends ExtractProps<typeof FormField, never> {
|
|
|
22
26
|
export const TextInput = createComponent()({
|
|
23
27
|
displayName: 'TextInput',
|
|
24
28
|
Component: ({children, model, orientation, ...props}: TextInputProps, ref) => {
|
|
25
|
-
const {hasError, id, isRequired, ...elemProps} = props
|
|
29
|
+
const {hasError, id, isRequired, ...elemProps} = props;
|
|
26
30
|
const value = useDefaultModel(model, {hasError, id, isRequired}, useTextInputModel);
|
|
27
31
|
|
|
28
|
-
const layoutProps = useFormFieldOrientation(orientation)
|
|
32
|
+
const layoutProps = useFormFieldOrientation(orientation);
|
|
29
33
|
|
|
30
34
|
return (
|
|
31
35
|
<TextInputModelContext.Provider value={value}>
|
|
@@ -8,7 +8,12 @@ import {
|
|
|
8
8
|
space,
|
|
9
9
|
type,
|
|
10
10
|
} from '@workday/canvas-kit-react/tokens';
|
|
11
|
-
import {
|
|
11
|
+
import {
|
|
12
|
+
createComponent,
|
|
13
|
+
ExtractProps,
|
|
14
|
+
useModelContext,
|
|
15
|
+
useTheme,
|
|
16
|
+
} from '@workday/canvas-kit-react/common';
|
|
12
17
|
import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
|
|
13
18
|
import {FormField} from '@workday/canvas-kit-preview-react/form-field';
|
|
14
19
|
|
|
@@ -68,9 +73,9 @@ export const TextInputField = createComponent('input')({
|
|
|
68
73
|
css={[baseStyles, focusStyles]}
|
|
69
74
|
padding={space.xxs}
|
|
70
75
|
margin={0}
|
|
71
|
-
display=
|
|
72
|
-
height=
|
|
73
|
-
minWidth=
|
|
76
|
+
display="block"
|
|
77
|
+
height="40px"
|
|
78
|
+
minWidth="280px"
|
|
74
79
|
border={`1px solid ${inputColors.border}`}
|
|
75
80
|
backgroundColor={inputColors.background}
|
|
76
81
|
borderRadius={borderRadius.m}
|