@workday/canvas-kit-preview-react 10.0.18 → 10.0.20

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.
Files changed (14) hide show
  1. package/dist/commonjs/form-field/lib/FormField.d.ts +1 -1
  2. package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts +4 -3
  3. package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts.map +1 -1
  4. package/dist/commonjs/form-field/lib/FormFieldLabel.js +20 -7
  5. package/dist/commonjs/text-area/lib/TextArea.d.ts +1 -1
  6. package/dist/commonjs/text-input/lib/TextInput.d.ts +1 -1
  7. package/dist/es6/form-field/lib/FormField.d.ts +1 -1
  8. package/dist/es6/form-field/lib/FormFieldLabel.d.ts +4 -3
  9. package/dist/es6/form-field/lib/FormFieldLabel.d.ts.map +1 -1
  10. package/dist/es6/form-field/lib/FormFieldLabel.js +21 -8
  11. package/dist/es6/text-area/lib/TextArea.d.ts +1 -1
  12. package/dist/es6/text-input/lib/TextInput.d.ts +1 -1
  13. package/form-field/lib/FormFieldLabel.tsx +25 -19
  14. package/package.json +5 -3
package/dist/commonjs/form-field/lib/FormField.d.ts CHANGED
@@ -30,7 +30,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
30
30
  };
31
31
  events: {};
32
32
  }>;
33
- Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("./FormFieldLabel").FormFieldLabelProps, {
33
+ Label: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"label", import("@workday/canvas-kit-react/text").TypeLabelProps>, import("./FormFieldLabel").FormFieldLabelProps, {
34
34
  state: {
35
35
  id: string;
36
36
  hasError: boolean;
package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  import React from 'react';
2
- import { FlexProps } from '@workday/canvas-kit-react/layout';
3
- export interface FormFieldLabelProps extends FlexProps {
2
+ import { ExtractProps } from '@workday/canvas-kit-react/common';
3
+ import { LabelText } from '@workday/canvas-kit-react/text';
4
+ export interface FormFieldLabelProps extends ExtractProps<typeof LabelText, never> {
4
5
  /**
5
6
  * The text of the label.
6
7
  */
7
8
  children: React.ReactNode;
8
9
  }
9
- export declare const FormFieldLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"label", FormFieldLabelProps, {
10
+ export declare const FormFieldLabel: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"label", import("@workday/canvas-kit-react/text").TypeLabelProps>, FormFieldLabelProps, {
10
11
  state: {
11
12
  id: string;
12
13
  hasError: boolean;
package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAIjE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc;;;;;;;EAyBzB,CAAC"}
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,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAC,SAAS,EAAO,MAAM,gCAAgC,CAAC;AAM/D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAChF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc;;;;;;;EAezB,CAAC"}
package/dist/commonjs/form-field/lib/FormFieldLabel.js CHANGED
@@ -6,16 +6,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.FormFieldLabel = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const common_1 = require("@workday/canvas-kit-react/common");
9
- const layout_1 = require("@workday/canvas-kit-react/layout");
9
+ const tokens_1 = require("@workday/canvas-kit-react/tokens");
10
10
  const text_1 = require("@workday/canvas-kit-react/text");
11
11
  const hooks_1 = require("./hooks");
12
- exports.FormFieldLabel = common_1.createSubcomponent('label')({
12
+ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
13
+ const layout_1 = require("@workday/canvas-kit-react/layout");
14
+ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
15
+ const labelStyles = canvas_kit_styling_1.createStyles({
16
+ fontWeight: tokens_1.type.properties.fontWeights.medium,
17
+ minWidth: '180px',
18
+ });
19
+ const asteriskStyles = canvas_kit_styling_1.createStyles({
20
+ marginInlineStart: tokens_1.space.xxxs,
21
+ fontSize: tokens_1.type.properties.fontSizes[20],
22
+ fontWeight: tokens_1.type.properties.fontWeights.regular,
23
+ textDecoration: 'unset',
24
+ color: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.base, '#de2e21'),
25
+ });
26
+ exports.FormFieldLabel = common_1.createSubcomponent(text_1.LabelText)({
13
27
  displayName: 'FormField.Label',
14
28
  modelHook: hooks_1.useFormFieldModel,
15
29
  elemPropsHook: hooks_1.useFormFieldLabel,
16
- })(({ gap = 'xxxs', children, ...elemProps }, Element, model) => {
17
- const theme = common_1.useTheme();
18
- return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, gap: gap, minWidth: "180px" }, elemProps),
19
- react_1.default.createElement(text_1.LabelText, { as: "span", fontWeight: "medium" }, children),
20
- 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" }, "*"))));
30
+ })(({ children, ...elemProps }, Element, model) => {
31
+ return (react_1.default.createElement(text_1.LabelText, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, [labelStyles])),
32
+ children,
33
+ model.state.isRequired && (react_1.default.createElement(text_1.Text, { cs: asteriskStyles, "aria-hidden": "true" }, "*"))));
21
34
  });
package/dist/commonjs/text-area/lib/TextArea.d.ts CHANGED
@@ -34,7 +34,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
34
34
  };
35
35
  events: {};
36
36
  }>;
37
- Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps, {
37
+ Label: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"label", import("@workday/canvas-kit-react/text").TypeLabelProps>, import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps, {
38
38
  state: {
39
39
  id: string;
40
40
  hasError: boolean;
package/dist/commonjs/text-input/lib/TextInput.d.ts CHANGED
@@ -41,7 +41,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
41
41
  };
42
42
  events: {};
43
43
  }>;
44
- Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps, {
44
+ Label: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"label", import("@workday/canvas-kit-react/text").TypeLabelProps>, import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps, {
45
45
  state: {
46
46
  id: string;
47
47
  hasError: boolean;
package/dist/es6/form-field/lib/FormField.d.ts CHANGED
@@ -30,7 +30,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
30
30
  };
31
31
  events: {};
32
32
  }>;
33
- Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("./FormFieldLabel").FormFieldLabelProps, {
33
+ Label: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"label", import("@workday/canvas-kit-react/text").TypeLabelProps>, import("./FormFieldLabel").FormFieldLabelProps, {
34
34
  state: {
35
35
  id: string;
36
36
  hasError: boolean;
package/dist/es6/form-field/lib/FormFieldLabel.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  import React from 'react';
2
- import { FlexProps } from '@workday/canvas-kit-react/layout';
3
- export interface FormFieldLabelProps extends FlexProps {
2
+ import { ExtractProps } from '@workday/canvas-kit-react/common';
3
+ import { LabelText } from '@workday/canvas-kit-react/text';
4
+ export interface FormFieldLabelProps extends ExtractProps<typeof LabelText, never> {
4
5
  /**
5
6
  * The text of the label.
6
7
  */
7
8
  children: React.ReactNode;
8
9
  }
9
- export declare const FormFieldLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"label", FormFieldLabelProps, {
10
+ export declare const FormFieldLabel: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"label", import("@workday/canvas-kit-react/text").TypeLabelProps>, FormFieldLabelProps, {
10
11
  state: {
11
12
  id: string;
12
13
  hasError: boolean;
package/dist/es6/form-field/lib/FormFieldLabel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAIjE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc;;;;;;;EAyBzB,CAAC"}
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,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAC,SAAS,EAAO,MAAM,gCAAgC,CAAC;AAM/D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAChF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc;;;;;;;EAezB,CAAC"}
package/dist/es6/form-field/lib/FormFieldLabel.js CHANGED
@@ -1,15 +1,28 @@
1
1
  import React from 'react';
2
- import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
3
- import { Flex } from '@workday/canvas-kit-react/layout';
2
+ import { createSubcomponent } from '@workday/canvas-kit-react/common';
3
+ import { type, space } from '@workday/canvas-kit-react/tokens';
4
4
  import { LabelText, Text } from '@workday/canvas-kit-react/text';
5
5
  import { useFormFieldLabel, useFormFieldModel } from './hooks';
6
- export const FormFieldLabel = createSubcomponent('label')({
6
+ import { createStyles, cssVar } from '@workday/canvas-kit-styling';
7
+ import { mergeStyles } from '@workday/canvas-kit-react/layout';
8
+ import { brand } from '@workday/canvas-tokens-web';
9
+ const labelStyles = createStyles({
10
+ fontWeight: type.properties.fontWeights.medium,
11
+ minWidth: '180px',
12
+ });
13
+ const asteriskStyles = createStyles({
14
+ marginInlineStart: space.xxxs,
15
+ fontSize: type.properties.fontSizes[20],
16
+ fontWeight: type.properties.fontWeights.regular,
17
+ textDecoration: 'unset',
18
+ color: cssVar(brand.error.base, '#de2e21'),
19
+ });
20
+ export const FormFieldLabel = createSubcomponent(LabelText)({
7
21
  displayName: 'FormField.Label',
8
22
  modelHook: useFormFieldModel,
9
23
  elemPropsHook: useFormFieldLabel,
10
- })(({ gap = 'xxxs', children, ...elemProps }, Element, model) => {
11
- const theme = useTheme();
12
- return (React.createElement(Flex, Object.assign({ as: Element, gap: gap, minWidth: "180px" }, elemProps),
13
- React.createElement(LabelText, { as: "span", fontWeight: "medium" }, children),
14
- model.state.isRequired && (React.createElement(Text, { fontSize: 20, fontWeight: "regular", textDecoration: "unset", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
24
+ })(({ children, ...elemProps }, Element, model) => {
25
+ return (React.createElement(LabelText, Object.assign({ as: Element }, mergeStyles(elemProps, [labelStyles])),
26
+ children,
27
+ model.state.isRequired && (React.createElement(Text, { cs: asteriskStyles, "aria-hidden": "true" }, "*"))));
15
28
  });
package/dist/es6/text-area/lib/TextArea.d.ts CHANGED
@@ -34,7 +34,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
34
34
  };
35
35
  events: {};
36
36
  }>;
37
- Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps, {
37
+ Label: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"label", import("@workday/canvas-kit-react/text").TypeLabelProps>, import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps, {
38
38
  state: {
39
39
  id: string;
40
40
  hasError: boolean;
package/dist/es6/text-input/lib/TextInput.d.ts CHANGED
@@ -41,7 +41,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
41
41
  };
42
42
  events: {};
43
43
  }>;
44
- Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps, {
44
+ Label: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"label", import("@workday/canvas-kit-react/text").TypeLabelProps>, import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps, {
45
45
  state: {
46
46
  id: string;
47
47
  hasError: boolean;
package/form-field/lib/FormFieldLabel.tsx CHANGED
@@ -1,40 +1,46 @@
1
1
  import React from 'react';
2
2
 
3
- import {createSubcomponent, useTheme} from '@workday/canvas-kit-react/common';
4
- import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
3
+ import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
4
+ import {type, space} from '@workday/canvas-kit-react/tokens';
5
5
  import {LabelText, Text} from '@workday/canvas-kit-react/text';
6
6
  import {useFormFieldLabel, useFormFieldModel} from './hooks';
7
+ import {createStyles, cssVar} from '@workday/canvas-kit-styling';
8
+ import {mergeStyles} from '@workday/canvas-kit-react/layout';
9
+ import {brand} from '@workday/canvas-tokens-web';
7
10
 
8
- export interface FormFieldLabelProps extends FlexProps {
11
+ export interface FormFieldLabelProps extends ExtractProps<typeof LabelText, never> {
9
12
  /**
10
13
  * The text of the label.
11
14
  */
12
15
  children: React.ReactNode;
13
16
  }
14
17
 
15
- export const FormFieldLabel = createSubcomponent('label')({
18
+ const labelStyles = createStyles({
19
+ fontWeight: type.properties.fontWeights.medium,
20
+ minWidth: '180px',
21
+ });
22
+
23
+ const asteriskStyles = createStyles({
24
+ marginInlineStart: space.xxxs,
25
+ fontSize: type.properties.fontSizes[20],
26
+ fontWeight: type.properties.fontWeights.regular,
27
+ textDecoration: 'unset',
28
+ color: cssVar(brand.error.base, '#de2e21'),
29
+ });
30
+
31
+ export const FormFieldLabel = createSubcomponent(LabelText)({
16
32
  displayName: 'FormField.Label',
17
33
  modelHook: useFormFieldModel,
18
34
  elemPropsHook: useFormFieldLabel,
19
- })<FormFieldLabelProps>(({gap = 'xxxs', children, ...elemProps}, Element, model) => {
20
- const theme = useTheme();
21
-
35
+ })<FormFieldLabelProps>(({children, ...elemProps}, Element, model) => {
22
36
  return (
23
- <Flex as={Element} gap={gap} minWidth="180px" {...elemProps}>
24
- <LabelText as="span" fontWeight="medium">
25
- {children}
26
- </LabelText>
37
+ <LabelText as={Element} {...mergeStyles(elemProps, [labelStyles])}>
38
+ {children}
27
39
  {model.state.isRequired && (
28
- <Text
29
- fontSize={20}
30
- fontWeight="regular"
31
- textDecoration="unset"
32
- color={theme.canvas.palette.error.main}
33
- aria-hidden="true"
34
- >
40
+ <Text cs={asteriskStyles} aria-hidden="true">
35
41
  *
36
42
  </Text>
37
43
  )}
38
- </Flex>
44
+ </LabelText>
39
45
  );
40
46
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "10.0.18",
3
+ "version": "10.0.20",
4
4
  "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -46,8 +46,10 @@
46
46
  "dependencies": {
47
47
  "@emotion/react": "^11.7.1",
48
48
  "@emotion/styled": "^11.6.0",
49
- "@workday/canvas-kit-react": "^10.0.18",
49
+ "@workday/canvas-kit-react": "^10.0.20",
50
+ "@workday/canvas-kit-styling": "^10.0.20",
50
51
  "@workday/canvas-system-icons-web": "^3.0.0",
52
+ "@workday/canvas-tokens-web": "^1.0.0",
51
53
  "@workday/design-assets-types": "^0.2.8"
52
54
  },
53
55
  "devDependencies": {
@@ -56,5 +58,5 @@
56
58
  "react-hook-form": "7.36.1",
57
59
  "yup": "^0.32.11"
58
60
  },
59
- "gitHead": "f769b63e46c6d932449a45e0d780667ddb8a3378"
61
+ "gitHead": "ce342cf5c9bacf184e99e6cd5b4e8cc240ba9367"
60
62
  }