@workday/canvas-kit-preview-react 11.0.0-alpha.760-next.0 → 11.0.0-alpha.761-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/commonjs/form-field/lib/FormField.js +2 -2
  2. package/dist/commonjs/form-field/lib/FormFieldContainer.js +4 -4
  3. package/dist/commonjs/form-field/lib/FormFieldHint.js +2 -2
  4. package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts.map +1 -1
  5. package/dist/commonjs/form-field/lib/FormFieldLabel.js +15 -15
  6. package/dist/es6/form-field/lib/FormField.js +2 -2
  7. package/dist/es6/form-field/lib/FormFieldContainer.js +4 -4
  8. package/dist/es6/form-field/lib/FormFieldHint.js +2 -2
  9. package/dist/es6/form-field/lib/FormFieldLabel.d.ts.map +1 -1
  10. package/dist/es6/form-field/lib/FormFieldLabel.js +17 -17
  11. package/form-field/lib/FormField.tsx +2 -2
  12. package/form-field/lib/FormFieldContainer.tsx +2 -2
  13. package/form-field/lib/FormFieldHint.tsx +1 -1
  14. package/form-field/lib/FormFieldLabel.tsx +28 -22
  15. package/package.json +4 -4
package/dist/commonjs/form-field/lib/FormField.js CHANGED
@@ -15,10 +15,10 @@ const FormFieldLabel_1 = require("./FormFieldLabel");
15
15
  const FormFieldHint_1 = require("./FormFieldHint");
16
16
  const FormFieldContainer_1 = require("./FormFieldContainer");
17
17
  const formFieldStencil = canvas_kit_styling_1.createStencil({
18
- base: { name: "6fc20a", styles: "border:none;padding:0;margin:0 0 var(--cnvs-sys-space-x6);" },
18
+ base: { name: "6fc20a", styles: "border:none;padding:var(--cnvs-sys-space-zero);margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);" },
19
19
  modifiers: {
20
20
  grow: {
21
- true: { name: "5dbca9", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}" }
21
+ true: { name: "59f66e", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}" }
22
22
  }
23
23
  }
24
24
  }, "cnvs-preview-form-field");
package/dist/commonjs/form-field/lib/FormFieldContainer.js CHANGED
@@ -8,12 +8,12 @@ const react_1 = __importDefault(require("react"));
8
8
  const common_1 = require("@workday/canvas-kit-react/common");
9
9
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
10
10
  const hooks_1 = require("./hooks");
11
- const containerBaseStyles = canvas_kit_styling_1.createStencil({
12
- base: { name: "a7aca5", styles: "display:flex;flex-direction:column;" }
13
- }, "cnvs-preview-container-base-styles");
11
+ const formFieldContainerStencil = canvas_kit_styling_1.createStencil({
12
+ base: { name: "299ca4", styles: "display:flex;flex-direction:column;" }
13
+ }, "cnvs-preview-form-field-container");
14
14
  exports.FormFieldContainer = common_1.createSubcomponent('div')({
15
15
  displayName: 'FormField.Container',
16
16
  modelHook: hooks_1.useFormFieldModel,
17
17
  })((elemProps, Element, model) => {
18
- return (react_1.default.createElement(Element, Object.assign({ "data-width": "ck-formfield-width" }, canvas_kit_styling_1.handleCsProp(elemProps, [containerBaseStyles()]))));
18
+ return (react_1.default.createElement(Element, Object.assign({ "data-width": "ck-formfield-width" }, canvas_kit_styling_1.handleCsProp(elemProps, formFieldContainerStencil()))));
19
19
  });
package/dist/commonjs/form-field/lib/FormFieldHint.js CHANGED
@@ -12,10 +12,10 @@ const hooks_1 = require("./hooks");
12
12
  const text_1 = require("@workday/canvas-kit-react/text");
13
13
  const layout_1 = require("@workday/canvas-kit-react/layout");
14
14
  const formFieldHintStencil = canvas_kit_styling_1.createStencil({
15
- base: { name: "b58835", styles: "margin:var(--cnvs-sys-space-x2) 0 0;" },
15
+ base: { name: "b58835", styles: "margin:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);" },
16
16
  modifiers: {
17
17
  error: {
18
- error: { name: "136719", styles: "color:var(--cnvs-brand-error-base);" },
18
+ error: { name: "90c8b0", styles: "color:var(--cnvs-brand-error-base);" },
19
19
  alert: {}
20
20
  }
21
21
  }
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;AAU1B,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;CACxC;AAsDD,eAAO,MAAM,cAAc;;;;;;;;EAmBzB,CAAC"}
1
+ {"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;CACxC;AA8DD,eAAO,MAAM,cAAc;;;;;;;;EAmBzB,CAAC"}
package/dist/commonjs/form-field/lib/FormFieldLabel.js CHANGED
@@ -6,44 +6,44 @@ 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 tokens_1 = require("@workday/canvas-kit-react/tokens");
10
- const text_1 = require("@workday/canvas-kit-react/text");
11
9
  const hooks_1 = require("./hooks");
12
10
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
13
11
  const layout_1 = require("@workday/canvas-kit-react/layout");
14
12
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
15
- const asteriskStyles = canvas_kit_styling_1.createStyles({ name: "3de69e", styles: "margin-inline-start:var(--cnvs-sys-space-x1);font-size:1.25rem;font-weight:400;text-decoration:unset;color:var(--cnvs-brand-error-base);" });
16
- const labelStencil = canvas_kit_styling_1.createStencil({
17
- base: { name: "7ccd23", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-base-palette-black-pepper-300);padding-inline-start:0;margin-bottom:var(--cnvs-sys-space-x1);display:flex;align-items:center;min-width:180px;" },
13
+ const formFieldLabelAsteriskStencil = canvas_kit_styling_1.createStencil({
14
+ base: { name: "a59d7a", styles: "font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);" }
15
+ }, "cnvs-preview-form-field-label-asterisk");
16
+ const formFieldLabelStencil = canvas_kit_styling_1.createStencil({
17
+ base: { name: "5443ce", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-x1);display:flex;align-items:center;min-width:11.25rem;" },
18
18
  modifiers: {
19
19
  orientation: {
20
- horizontal: { name: "0da26d", styles: "float:left;max-height:var(--cnvs-sys-space-x10);" },
21
- vertical: { name: "a7ee33", styles: "width:100%;" }
20
+ horizontal: { name: "ccfa06", styles: "float:left;max-height:var(--cnvs-sys-space-x10);" },
21
+ vertical: { name: "87ba29", styles: "width:100%;" }
22
22
  },
23
23
  variant: {
24
- error: { name: "85f4df", styles: "color:var(--cnvs-base-palette-cinnamon-500);" },
25
- hint: { name: "6895ee", styles: "color:var(--cnvs-base-palette-licorice-300);" },
26
- inverse: { name: "447f36", styles: "color:var(--cnvs-base-palette-french-vanilla-100);" }
24
+ error: { name: "3296af", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
25
+ hint: { name: "d58a54", styles: "color:var(--cnvs-sys-color-text-hint);" },
26
+ inverse: { name: "447f36", styles: "color:var(--cnvs-sys-color-text-inverse);" }
27
27
  },
28
28
  disabled: {
29
- true: { name: "5a1162", styles: "cursor:default;color:var(--cnvs-base-palette-licorice-100);" }
29
+ true: { name: "269a41", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
30
30
  }
31
31
  },
32
32
  compound: [
33
33
  {
34
34
  modifiers: { variant: 'inverse', disabled: true },
35
- styles: { name: "439e22", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-base-palette-french-vanilla-100);" }
35
+ styles: { name: "a1f92a", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
36
36
  }
37
37
  ]
38
- }, "cnvs-preview-label");
38
+ }, "cnvs-preview-form-field-label");
39
39
  exports.FormFieldLabel = common_1.createSubcomponent('label')({
40
40
  displayName: 'FormField.Label',
41
41
  modelHook: hooks_1.useFormFieldModel,
42
42
  elemPropsHook: hooks_1.useFormFieldLabel,
43
43
  })(({ children, disabled, variant, ...elemProps }, Element, model) => {
44
44
  return (react_1.default.createElement(Element, Object.assign({}, layout_1.mergeStyles(elemProps, [
45
- labelStencil({ orientation: model.state.orientation, disabled, variant }),
45
+ formFieldLabelStencil({ orientation: model.state.orientation, disabled, variant }),
46
46
  ])),
47
47
  children,
48
- model.state.isRequired && (react_1.default.createElement(text_1.Text, { cs: asteriskStyles, "aria-hidden": "true" }, "*"))));
48
+ model.state.isRequired && (react_1.default.createElement("span", Object.assign({ "aria-hidden": "true" }, formFieldLabelAsteriskStencil()), "*"))));
49
49
  });
package/dist/es6/form-field/lib/FormField.js CHANGED
@@ -9,10 +9,10 @@ import { FormFieldLabel } from './FormFieldLabel';
9
9
  import { FormFieldHint } from './FormFieldHint';
10
10
  import { FormFieldContainer } from './FormFieldContainer';
11
11
  const formFieldStencil = createStencil({
12
- base: { name: "6fc20a", styles: "border:none;padding:0;margin:0 0 var(--cnvs-sys-space-x6);" },
12
+ base: { name: "6fc20a", styles: "border:none;padding:var(--cnvs-sys-space-zero);margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);" },
13
13
  modifiers: {
14
14
  grow: {
15
- true: { name: "5dbca9", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}" }
15
+ true: { name: "59f66e", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}" }
16
16
  }
17
17
  }
18
18
  }, "cnvs-preview-form-field");
package/dist/es6/form-field/lib/FormFieldContainer.js CHANGED
@@ -2,12 +2,12 @@ import React from 'react';
2
2
  import { createSubcomponent } from '@workday/canvas-kit-react/common';
3
3
  import { handleCsProp, createStencil } from '@workday/canvas-kit-styling';
4
4
  import { useFormFieldModel } from './hooks';
5
- const containerBaseStyles = createStencil({
6
- base: { name: "a7aca5", styles: "display:flex;flex-direction:column;" }
7
- }, "cnvs-preview-container-base-styles");
5
+ const formFieldContainerStencil = createStencil({
6
+ base: { name: "299ca4", styles: "display:flex;flex-direction:column;" }
7
+ }, "cnvs-preview-form-field-container");
8
8
  export const FormFieldContainer = createSubcomponent('div')({
9
9
  displayName: 'FormField.Container',
10
10
  modelHook: useFormFieldModel,
11
11
  })((elemProps, Element, model) => {
12
- return (React.createElement(Element, Object.assign({ "data-width": "ck-formfield-width" }, handleCsProp(elemProps, [containerBaseStyles()]))));
12
+ return (React.createElement(Element, Object.assign({ "data-width": "ck-formfield-width" }, handleCsProp(elemProps, formFieldContainerStencil()))));
13
13
  });
package/dist/es6/form-field/lib/FormFieldHint.js CHANGED
@@ -6,10 +6,10 @@ import { useFormFieldHint, useFormFieldModel } from './hooks';
6
6
  import { Subtext } from '@workday/canvas-kit-react/text';
7
7
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
8
8
  const formFieldHintStencil = createStencil({
9
- base: { name: "b58835", styles: "margin:var(--cnvs-sys-space-x2) 0 0;" },
9
+ base: { name: "b58835", styles: "margin:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);" },
10
10
  modifiers: {
11
11
  error: {
12
- error: { name: "136719", styles: "color:var(--cnvs-brand-error-base);" },
12
+ error: { name: "90c8b0", styles: "color:var(--cnvs-brand-error-base);" },
13
13
  alert: {}
14
14
  }
15
15
  }
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;AAU1B,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;CACxC;AAsDD,eAAO,MAAM,cAAc;;;;;;;;EAmBzB,CAAC"}
1
+ {"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;CACxC;AA8DD,eAAO,MAAM,cAAc;;;;;;;;EAmBzB,CAAC"}
package/dist/es6/form-field/lib/FormFieldLabel.js CHANGED
@@ -1,43 +1,43 @@
1
1
  import React from 'react';
2
2
  import { createSubcomponent } from '@workday/canvas-kit-react/common';
3
- import { type } from '@workday/canvas-kit-react/tokens';
4
- import { Text } from '@workday/canvas-kit-react/text';
5
3
  import { useFormFieldLabel, useFormFieldModel } from './hooks';
6
- import { createStencil, createStyles } from '@workday/canvas-kit-styling';
4
+ import { createStencil, px2rem } from '@workday/canvas-kit-styling';
7
5
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
8
- import { base, brand, system } from '@workday/canvas-tokens-web';
9
- const asteriskStyles = createStyles({ name: "3de69e", styles: "margin-inline-start:var(--cnvs-sys-space-x1);font-size:1.25rem;font-weight:400;text-decoration:unset;color:var(--cnvs-brand-error-base);" });
10
- const labelStencil = createStencil({
11
- base: { name: "7ccd23", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-base-palette-black-pepper-300);padding-inline-start:0;margin-bottom:var(--cnvs-sys-space-x1);display:flex;align-items:center;min-width:180px;" },
6
+ import { brand, system } from '@workday/canvas-tokens-web';
7
+ const formFieldLabelAsteriskStencil = createStencil({
8
+ base: { name: "a59d7a", styles: "font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);" }
9
+ }, "cnvs-preview-form-field-label-asterisk");
10
+ const formFieldLabelStencil = createStencil({
11
+ base: { name: "5443ce", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-x1);display:flex;align-items:center;min-width:11.25rem;" },
12
12
  modifiers: {
13
13
  orientation: {
14
- horizontal: { name: "0da26d", styles: "float:left;max-height:var(--cnvs-sys-space-x10);" },
15
- vertical: { name: "a7ee33", styles: "width:100%;" }
14
+ horizontal: { name: "ccfa06", styles: "float:left;max-height:var(--cnvs-sys-space-x10);" },
15
+ vertical: { name: "87ba29", styles: "width:100%;" }
16
16
  },
17
17
  variant: {
18
- error: { name: "85f4df", styles: "color:var(--cnvs-base-palette-cinnamon-500);" },
19
- hint: { name: "6895ee", styles: "color:var(--cnvs-base-palette-licorice-300);" },
20
- inverse: { name: "447f36", styles: "color:var(--cnvs-base-palette-french-vanilla-100);" }
18
+ error: { name: "3296af", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
19
+ hint: { name: "d58a54", styles: "color:var(--cnvs-sys-color-text-hint);" },
20
+ inverse: { name: "447f36", styles: "color:var(--cnvs-sys-color-text-inverse);" }
21
21
  },
22
22
  disabled: {
23
- true: { name: "5a1162", styles: "cursor:default;color:var(--cnvs-base-palette-licorice-100);" }
23
+ true: { name: "269a41", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
24
24
  }
25
25
  },
26
26
  compound: [
27
27
  {
28
28
  modifiers: { variant: 'inverse', disabled: true },
29
- styles: { name: "439e22", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-base-palette-french-vanilla-100);" }
29
+ styles: { name: "a1f92a", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
30
30
  }
31
31
  ]
32
- }, "cnvs-preview-label");
32
+ }, "cnvs-preview-form-field-label");
33
33
  export const FormFieldLabel = createSubcomponent('label')({
34
34
  displayName: 'FormField.Label',
35
35
  modelHook: useFormFieldModel,
36
36
  elemPropsHook: useFormFieldLabel,
37
37
  })(({ children, disabled, variant, ...elemProps }, Element, model) => {
38
38
  return (React.createElement(Element, Object.assign({}, mergeStyles(elemProps, [
39
- labelStencil({ orientation: model.state.orientation, disabled, variant }),
39
+ formFieldLabelStencil({ orientation: model.state.orientation, disabled, variant }),
40
40
  ])),
41
41
  children,
42
- model.state.isRequired && (React.createElement(Text, { cs: asteriskStyles, "aria-hidden": "true" }, "*"))));
42
+ model.state.isRequired && (React.createElement("span", Object.assign({ "aria-hidden": "true" }, formFieldLabelAsteriskStencil()), "*"))));
43
43
  });
package/form-field/lib/FormField.tsx CHANGED
@@ -18,8 +18,8 @@ export interface FormFieldProps extends FlexProps, GrowthBehavior {
18
18
  const formFieldStencil = createStencil({
19
19
  base: {
20
20
  border: 'none',
21
- padding: 0,
22
- margin: `0 0 ${system.space.x6}`,
21
+ padding: system.space.zero,
22
+ margin: `${system.space.zero} ${system.space.zero} ${system.space.x6}`,
23
23
  },
24
24
  modifiers: {
25
25
  grow: {
package/form-field/lib/FormFieldContainer.tsx CHANGED
@@ -5,7 +5,7 @@ import {handleCsProp, CSProps, createStencil} from '@workday/canvas-kit-styling'
5
5
 
6
6
  import {useFormFieldModel} from './hooks';
7
7
 
8
- const containerBaseStyles = createStencil({
8
+ const formFieldContainerStencil = createStencil({
9
9
  base: {
10
10
  display: 'flex',
11
11
  flexDirection: 'column',
@@ -19,7 +19,7 @@ export const FormFieldContainer = createSubcomponent('div')({
19
19
  return (
20
20
  <Element
21
21
  data-width="ck-formfield-width"
22
- {...handleCsProp(elemProps, [containerBaseStyles()])}
22
+ {...handleCsProp(elemProps, formFieldContainerStencil())}
23
23
  />
24
24
  );
25
25
  });
package/form-field/lib/FormFieldHint.tsx CHANGED
@@ -9,7 +9,7 @@ import {mergeStyles} from '@workday/canvas-kit-react/layout';
9
9
 
10
10
  const formFieldHintStencil = createStencil({
11
11
  base: {
12
- margin: `${system.space.x2} 0 0`,
12
+ margin: `${system.space.x2} ${system.space.zero} ${system.space.zero}`,
13
13
  },
14
14
  modifiers: {
15
15
  error: {
package/form-field/lib/FormFieldLabel.tsx CHANGED
@@ -1,12 +1,10 @@
1
1
  import React from 'react';
2
2
 
3
3
  import {createSubcomponent} from '@workday/canvas-kit-react/common';
4
- import {type} from '@workday/canvas-kit-react/tokens';
5
- import {Text} from '@workday/canvas-kit-react/text';
6
4
  import {useFormFieldLabel, useFormFieldModel} from './hooks';
7
- import {createStencil, createStyles} from '@workday/canvas-kit-styling';
5
+ import {createStencil, px2rem} from '@workday/canvas-kit-styling';
8
6
  import {mergeStyles} from '@workday/canvas-kit-react/layout';
9
- import {base, brand, system} from '@workday/canvas-tokens-web';
7
+ import {brand, system} from '@workday/canvas-tokens-web';
10
8
 
11
9
  export interface FormFieldLabelProps {
12
10
  /**
@@ -23,24 +21,26 @@ export interface FormFieldLabelProps {
23
21
  variant?: 'error' | 'hint' | 'inverse';
24
22
  }
25
23
 
26
- const asteriskStyles = createStyles({
27
- marginInlineStart: system.space.x1,
28
- fontSize: type.properties.fontSizes[20],
29
- fontWeight: type.properties.fontWeights.regular,
30
- textDecoration: 'unset',
31
- color: brand.error.base,
24
+ const formFieldLabelAsteriskStencil = createStencil({
25
+ base: {
26
+ fontSize: system.fontSize.body.large,
27
+ fontWeight: system.fontWeight.normal,
28
+ color: brand.error.base,
29
+ textDecoration: 'unset',
30
+ marginInlineStart: system.space.x1,
31
+ },
32
32
  });
33
33
 
34
- const labelStencil = createStencil({
34
+ const formFieldLabelStencil = createStencil({
35
35
  base: {
36
36
  ...system.type.subtext.large,
37
37
  fontWeight: system.fontWeight.medium,
38
- color: base.blackPepper300,
39
- paddingInlineStart: 0,
38
+ color: system.color.text.default,
39
+ paddingInlineStart: system.space.zero,
40
40
  marginBottom: system.space.x1,
41
41
  display: 'flex',
42
42
  alignItems: 'center',
43
- minWidth: '180px',
43
+ minWidth: px2rem(180),
44
44
  },
45
45
  modifiers: {
46
46
  orientation: {
@@ -53,14 +53,20 @@ const labelStencil = createStencil({
53
53
  },
54
54
  },
55
55
  variant: {
56
- error: {color: base.cinnamon500},
57
- hint: {color: base.licorice300},
58
- inverse: {color: base.frenchVanilla100},
56
+ error: {
57
+ color: system.color.text.critical.default,
58
+ },
59
+ hint: {
60
+ color: system.color.text.hint,
61
+ },
62
+ inverse: {
63
+ color: system.color.text.inverse,
64
+ },
59
65
  },
60
66
  disabled: {
61
67
  true: {
62
68
  cursor: 'default',
63
- color: base.licorice100,
69
+ color: system.color.text.disabled,
64
70
  },
65
71
  },
66
72
  },
@@ -69,7 +75,7 @@ const labelStencil = createStencil({
69
75
  modifiers: {variant: 'inverse', disabled: true},
70
76
  styles: {
71
77
  opacity: system.opacity.disabled,
72
- color: base.frenchVanilla100,
78
+ color: system.color.text.inverse,
73
79
  },
74
80
  },
75
81
  ],
@@ -83,14 +89,14 @@ export const FormFieldLabel = createSubcomponent('label')({
83
89
  return (
84
90
  <Element
85
91
  {...mergeStyles(elemProps, [
86
- labelStencil({orientation: model.state.orientation, disabled, variant}),
92
+ formFieldLabelStencil({orientation: model.state.orientation, disabled, variant}),
87
93
  ])}
88
94
  >
89
95
  {children}
90
96
  {model.state.isRequired && (
91
- <Text cs={asteriskStyles} aria-hidden="true">
97
+ <span aria-hidden="true" {...formFieldLabelAsteriskStencil()}>
92
98
  *
93
- </Text>
99
+ </span>
94
100
  )}
95
101
  </Element>
96
102
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "11.0.0-alpha.760-next.0",
3
+ "version": "11.0.0-alpha.761-next.0",
4
4
  "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -46,8 +46,8 @@
46
46
  "dependencies": {
47
47
  "@emotion/react": "^11.7.1",
48
48
  "@emotion/styled": "^11.6.0",
49
- "@workday/canvas-kit-react": "^11.0.0-alpha.760-next.0",
50
- "@workday/canvas-kit-styling": "^11.0.0-alpha.760-next.0",
49
+ "@workday/canvas-kit-react": "^11.0.0-alpha.761-next.0",
50
+ "@workday/canvas-kit-styling": "^11.0.0-alpha.761-next.0",
51
51
  "@workday/canvas-system-icons-web": "^3.0.0",
52
52
  "@workday/canvas-tokens-web": "^1.3.0",
53
53
  "@workday/design-assets-types": "^0.2.8"
@@ -58,5 +58,5 @@
58
58
  "react-hook-form": "7.36.1",
59
59
  "yup": "^0.32.11"
60
60
  },
61
- "gitHead": "567f7f389a35212b6f58050c9e0bf5f9834589c8"
61
+ "gitHead": "fce337a36c94589dfa4b7cd04f9b3557a044b609"
62
62
  }