@workday/canvas-kit-preview-react 6.3.5 → 7.0.0-alpha.0-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.
Files changed (68) hide show
  1. package/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx +2 -5
  2. package/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx +5 -6
  3. package/breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx +3 -9
  4. package/breadcrumbs/lib/Breadcrumbs/List/index.tsx +22 -20
  5. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts.map +1 -1
  6. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.js +5 -5
  7. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts +0 -1
  8. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts.map +1 -1
  9. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.js +11 -7
  10. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts +0 -1
  11. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts.map +1 -1
  12. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.js +7 -7
  13. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/index.d.ts +1 -2
  14. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/index.d.ts.map +1 -1
  15. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/index.js +12 -16
  16. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/index.d.ts +1 -2
  17. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/index.d.ts.map +1 -1
  18. package/dist/commonjs/form-field/lib/FormFieldHint.d.ts.map +1 -1
  19. package/dist/commonjs/form-field/lib/FormFieldHint.js +6 -3
  20. package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts.map +1 -1
  21. package/dist/commonjs/form-field/lib/FormFieldLabel.js +14 -13
  22. package/dist/commonjs/side-panel/lib/SidePanel.d.ts +26 -3
  23. package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map +1 -1
  24. package/dist/commonjs/side-panel/lib/SidePanel.js +12 -24
  25. package/dist/commonjs/text-area/lib/TextAreaField.d.ts.map +1 -1
  26. package/dist/commonjs/text-area/lib/TextAreaField.js +1 -0
  27. package/dist/commonjs/text-input/lib/TextInputField.d.ts.map +1 -1
  28. package/dist/commonjs/text-input/lib/TextInputField.js +1 -0
  29. package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts.map +1 -1
  30. package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.js +2 -5
  31. package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts +0 -1
  32. package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts.map +1 -1
  33. package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.js +8 -7
  34. package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts +0 -1
  35. package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts.map +1 -1
  36. package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.js +4 -7
  37. package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/index.d.ts +1 -2
  38. package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/index.d.ts.map +1 -1
  39. package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/index.js +9 -16
  40. package/dist/es6/breadcrumbs/lib/Breadcrumbs/index.d.ts +1 -2
  41. package/dist/es6/breadcrumbs/lib/Breadcrumbs/index.d.ts.map +1 -1
  42. package/dist/es6/form-field/lib/FormFieldHint.d.ts.map +1 -1
  43. package/dist/es6/form-field/lib/FormFieldHint.js +4 -4
  44. package/dist/es6/form-field/lib/FormFieldLabel.d.ts.map +1 -1
  45. package/dist/es6/form-field/lib/FormFieldLabel.js +12 -14
  46. package/dist/es6/side-panel/lib/SidePanel.d.ts +26 -3
  47. package/dist/es6/side-panel/lib/SidePanel.d.ts.map +1 -1
  48. package/dist/es6/side-panel/lib/SidePanel.js +13 -25
  49. package/dist/es6/text-area/lib/TextAreaField.d.ts.map +1 -1
  50. package/dist/es6/text-area/lib/TextAreaField.js +1 -0
  51. package/dist/es6/text-input/lib/TextInputField.d.ts.map +1 -1
  52. package/dist/es6/text-input/lib/TextInputField.js +1 -0
  53. package/form-field/lib/FormFieldHint.tsx +9 -9
  54. package/form-field/lib/FormFieldLabel.tsx +17 -21
  55. package/package.json +4 -4
  56. package/side-panel/lib/SidePanel.tsx +36 -32
  57. package/text-area/lib/TextAreaField.tsx +1 -0
  58. package/text-input/lib/TextInputField.tsx +1 -0
  59. package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts +0 -1
  60. package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts +0 -1
  61. package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/index.d.ts +1 -2
  62. package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/index.d.ts +1 -2
  63. package/ts3.5/dist/commonjs/side-panel/lib/SidePanel.d.ts +26 -3
  64. package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts +0 -1
  65. package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts +0 -1
  66. package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/List/index.d.ts +1 -2
  67. package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/index.d.ts +1 -2
  68. package/ts3.5/dist/es6/side-panel/lib/SidePanel.d.ts +26 -3
@@ -20,8 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- /** @jsx jsx */
24
- import { css, jsx } from '@emotion/core';
23
+ import React from 'react';
25
24
  import { IconButton } from '@workday/canvas-kit-react/button';
26
25
  import { relatedActionsIcon } from '@workday/canvas-system-icons-web';
27
26
  import { colors } from '@workday/canvas-kit-react/tokens';
@@ -31,8 +30,6 @@ export var DropdownButton = createComponent(IconButton)({
31
30
  Component: function (_a, ref, Element) {
32
31
  var _b = _a.buttonIcon, buttonIcon = _b === void 0 ? relatedActionsIcon : _b, toggled = _a.toggled, _c = _a.variant, variant = _c === void 0 ? 'plain' : _c, elemProps = __rest(_a, ["buttonIcon", "toggled", "variant"]);
33
32
  var hasPlainVariant = variant === 'plain';
34
- // gives the plain icon variant a little extra space between the chevron separators
35
- var customStyles = css(hasPlainVariant ? { margin: '0 1px' } : {});
36
- return (jsx(Element, __assign({ ref: ref, type: "button", css: customStyles, variant: variant, icon: buttonIcon, color: colors.licorice200, toggled: toggled, "aria-pressed": undefined, "aria-expanded": toggled, "aria-haspopup": true, "aria-controls": "menu" }, elemProps)));
33
+ return (React.createElement(Element, __assign({ ref: ref, type: "button", style: hasPlainVariant ? { margin: '0 1px' } : {}, variant: variant, icon: buttonIcon, color: colors.licorice200, toggled: toggled, "aria-pressed": undefined, "aria-expanded": toggled, "aria-haspopup": true, "aria-controls": "menu" }, elemProps)));
37
34
  },
38
35
  });
@@ -1,4 +1,3 @@
1
- /** @jsx jsx */
2
1
  import React from 'react';
3
2
  import { Breadcrumb } from '../types';
4
3
  export interface DropdownMenuProps {
@@ -1 +1 @@
1
- {"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAIpC,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,kBAAkB,EAAE,UAAU,CAAC;IAC/B;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,EAAE,UAAU,EAAE,CAAC;IAC5B;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IACxE;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1D;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B;;OAEG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAgCD,eAAO,MAAM,YAAY,6LAqExB,CAAC"}
1
+ {"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAKpC,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,kBAAkB,EAAE,UAAU,CAAC;IAC/B;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,EAAE,UAAU,EAAE,CAAC;IAC5B;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IACxE;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1D;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B;;OAEG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAgCD,eAAO,MAAM,YAAY,6LAqExB,CAAC"}
@@ -20,12 +20,13 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- import { css, jsx } from '@emotion/core';
23
+ import React from 'react';
24
24
  import { styled } from '@workday/canvas-kit-react/common';
25
25
  import { borderRadius, colors, commonColors, depth, space, type, } from '@workday/canvas-kit-react/tokens';
26
26
  // local components
27
27
  import { DropdownMenuItemLink } from './MenuItemLink';
28
- var menuStyles = css(__assign(__assign(__assign({}, type.levels.subtext.large), depth[2]), { backgroundColor: commonColors.background, border: "1px solid " + colors.soap500, borderRadius: borderRadius.m, boxSizing: 'border-box', display: 'inline-block', marginTop: space.xxxs, maxHeight: 200, outline: 'none', overflowY: 'auto', position: 'relative', width: 'max-content' }));
28
+ import { Box } from '@workday/canvas-kit-labs-react/common';
29
+ var StyledDropdownMenu = styled(Box)(__assign(__assign(__assign({}, type.levels.subtext.large), depth[2]), { backgroundColor: commonColors.background, border: "1px solid " + colors.soap500, borderRadius: borderRadius.m, boxSizing: 'border-box', display: 'inline-block', marginTop: space.xxxs, maxHeight: 200, outline: 'none', overflowY: 'auto', position: 'relative', width: 'max-content' }));
29
30
  var StyledMenuList = styled('ul')({
30
31
  boxSizing: 'border-box',
31
32
  listStyle: 'none',
@@ -36,7 +37,7 @@ var StyledMenuList = styled('ul')({
36
37
  wordWrap: 'break-word',
37
38
  });
38
39
  var MenuList = function (elemProps) {
39
- return jsx(StyledMenuList, __assign({ role: "menu" }, elemProps));
40
+ return React.createElement(StyledMenuList, __assign({ role: "menu" }, elemProps));
40
41
  };
41
42
  export var DropdownMenu = function (_a) {
42
43
  var activeDropdownItemRef = _a.activeDropdownItemRef, activeDropdownItem = _a.activeDropdownItem, _b = _a.dropdownItems, dropdownItems = _b === void 0 ? [] : _b, resetFocus = _a.resetFocus, setActiveDropdownItem = _a.setActiveDropdownItem, toggleActiveItemDown = _a.toggleActiveItemDown, toggleActiveItemUp = _a.toggleActiveItemUp, elemProps = __rest(_a, ["activeDropdownItemRef", "activeDropdownItem", "dropdownItems", "resetFocus", "setActiveDropdownItem", "toggleActiveItemDown", "toggleActiveItemUp"]);
@@ -76,11 +77,11 @@ export var DropdownMenu = function (_a) {
76
77
  break;
77
78
  }
78
79
  };
79
- return (jsx("div", { css: menuStyles },
80
- jsx(MenuList, __assign({}, elemProps), dropdownItems.map(function (item, i) {
80
+ return (React.createElement(StyledDropdownMenu, null,
81
+ React.createElement(MenuList, __assign({}, elemProps), dropdownItems.map(function (item, i) {
81
82
  var index = item.index, link = item.link, text = item.text, elemProps = __rest(item, ["index", "link", "text"]);
82
83
  var isFocused = index === activeDropdownItem.index;
83
- return (jsx("li", { onKeyUp: handleItemKeyUp, onKeyDown: function (e) { return handleItemKeyDown(e, item); }, key: i },
84
- jsx(DropdownMenuItemLink, __assign({ ref: isFocused ? activeDropdownItemRef : null, href: link }, elemProps), text)));
84
+ return (React.createElement("li", { onKeyUp: handleItemKeyUp, onKeyDown: function (e) { return handleItemKeyDown(e, item); }, key: i },
85
+ React.createElement(DropdownMenuItemLink, __assign({ ref: isFocused ? activeDropdownItemRef : null, href: link }, elemProps), text)));
85
86
  }))));
86
87
  };
@@ -1,4 +1,3 @@
1
- /** @jsx jsx */
2
1
  import React from 'react';
3
2
  export declare type ListItemProps = React.HTMLAttributes<HTMLLIElement>;
4
3
  export declare const BreadcrumbsListItem: ({ children, ...props }: ListItemProps) => JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAOhE,eAAO,MAAM,mBAAmB,wDAe/B,CAAC"}
1
+ {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAEhE,eAAO,MAAM,mBAAmB,wDAe/B,CAAC"}
@@ -20,20 +20,17 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- import { css, jsx } from '@emotion/core';
23
+ import React from 'react';
24
24
  import { SystemIcon } from '@workday/canvas-kit-react/icon';
25
25
  import { chevronLeftSmallIcon, chevronRightSmallIcon } from '@workday/canvas-system-icons-web';
26
26
  import { colors } from '@workday/canvas-kit-react/tokens';
27
27
  import { useRTL } from '../hooks';
28
- var breadcrumbItemStyles = css({
29
- display: "flex",
30
- alignItems: "center",
31
- });
28
+ import { Flex } from '@workday/canvas-kit-labs-react/layout';
32
29
  export var BreadcrumbsListItem = function (_a) {
33
30
  var children = _a.children, props = __rest(_a, ["children"]);
34
31
  var shouldUseRTL = useRTL().shouldUseRTL;
35
32
  var icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
36
- return (jsx("li", __assign({ css: breadcrumbItemStyles }, props),
33
+ return (React.createElement(Flex, __assign({ as: "li", alignItems: "center" }, props),
37
34
  children,
38
- jsx(SystemIcon, { icon: icon, color: colors.licorice200, colorHover: colors.licorice200, "aria-hidden": true })));
35
+ React.createElement(SystemIcon, { icon: icon, color: colors.licorice200, colorHover: colors.licorice200, "aria-hidden": true })));
39
36
  };
@@ -1,5 +1,4 @@
1
- /** @jsx jsx */
2
1
  import React from 'react';
3
2
  export declare type BreadcrumbsListProps = React.HTMLAttributes<HTMLUListElement>;
4
- export declare const BreadcrumbsList: React.ForwardRefExoticComponent<BreadcrumbsListProps & React.RefAttributes<HTMLUListElement>>;
3
+ export declare const BreadcrumbsList: import("@workday/canvas-kit-react/common").ElementComponent<"ul", BreadcrumbsListProps>;
5
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/index.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,oBAAY,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAE1E,eAAO,MAAM,eAAe,+FAQ3B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,oBAAY,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAE1E,eAAO,MAAM,eAAe,yFAqB1B,CAAC"}
@@ -20,20 +20,13 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- /** @jsx jsx */
24
- import { forwardRef } from 'react';
25
- import { css, jsx } from '@emotion/core';
26
- var breadcrumbListStyles = css({
27
- alignItems: 'center',
28
- boxSizing: 'border-box',
29
- display: 'inline-flex',
30
- // minHeight set to keep the nav from bouncing when the icon button appears / disappears
31
- minHeight: 40,
32
- listStyle: 'none',
33
- margin: 0,
34
- padding: 0,
35
- });
36
- export var BreadcrumbsList = forwardRef(function (_a, ref) {
37
- var children = _a.children, props = __rest(_a, ["children"]);
38
- return (jsx("ul", __assign({ css: breadcrumbListStyles, role: "list", ref: ref }, props), children));
23
+ import React from 'react';
24
+ import { createComponent } from '@workday/canvas-kit-react/common';
25
+ import { Flex } from '@workday/canvas-kit-labs-react/layout';
26
+ export var BreadcrumbsList = createComponent('ul')({
27
+ displayName: 'BreadcrumbsList',
28
+ Component: function (_a, ref) {
29
+ var children = _a.children, elemProps = __rest(_a, ["children"]);
30
+ return (React.createElement(Flex, __assign({ padding: "zero", margin: "zero", display: "inline-flex", alignItems: "center", minHeight: 40, listStyle: "none", style: { boxSizing: 'border-box' }, as: "ul", role: "list", ref: ref }, elemProps), children));
31
+ },
39
32
  });
@@ -1,8 +1,7 @@
1
- /// <reference types="@emotion/core" />
2
1
  export declare const Breadcrumbs: {
3
2
  Nav: ({ "aria-label": ariaLabel, ...elemProps }: import("./Nav").BreadcrumbsNavProps) => JSX.Element;
4
3
  CollapsibleList: ({ children, buttonIcon, buttonAriaLabel, maxWidth, ...props }: import("./List/Collapsible").CollapsibleListProps) => JSX.Element;
5
- List: import("react").ForwardRefExoticComponent<import("./List").BreadcrumbsListProps & import("react").RefAttributes<HTMLUListElement>>;
4
+ List: import("@workday/canvas-kit-react/common").ElementComponent<"ul", import("./List").BreadcrumbsListProps>;
6
5
  ListItem: ({ children, ...props }: import("./List/ListItem").ListItemProps) => JSX.Element;
7
6
  Link: ({ maxWidth, onAction, onClick, href, children, ...props }: import("./List/Link").BreadcrumbLinkProps) => JSX.Element;
8
7
  CurrentItem: ({ children, maxWidth, ...elemProps }: import("./List/CurrentItem").CurrentItemProps) => JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../breadcrumbs/lib/Breadcrumbs/index.tsx"],"names":[],"mappings":";AAOA,eAAO,MAAM,WAAW;;;;;;;CAOvB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../breadcrumbs/lib/Breadcrumbs/index.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW;;;;;;;CAOvB,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,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
+ {"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAW,MAAM,uCAAuC,CAAC;AAGpE,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;AAMD,eAAO,MAAM,aAAa,sFAuBxB,CAAC"}
@@ -20,13 +20,13 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- /** @jsx jsx */
24
- import { jsx } from '@emotion/core';
25
- import { createComponent, useModelContext, useTheme, } from '@workday/canvas-kit-react/common';
23
+ import React from 'react';
24
+ import { createComponent, useModelContext, useTheme, styled, } from '@workday/canvas-kit-react/common';
26
25
  import { space, type } from '@workday/canvas-kit-react/tokens';
27
26
  import { Box } from '@workday/canvas-kit-labs-react/common';
28
27
  import { FormFieldModelContext } from './FormField';
29
28
  import { useFormFieldHint } from './hooks';
29
+ var StyledHint = styled(Box)(__assign({}, type.levels.subtext.medium));
30
30
  export var FormFieldHint = createComponent('p')({
31
31
  displayName: 'FormField.Hint',
32
32
  Component: function (_a, ref, Element) {
@@ -38,6 +38,6 @@ export var FormFieldHint = createComponent('p')({
38
38
  // If there is no hint text just skip rendering
39
39
  return null;
40
40
  }
41
- return (jsx(Box, __assign({ as: Element, css: __assign({}, type.levels.subtext.medium), color: localModel.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: space.xxs }, props), children));
41
+ return (React.createElement(StyledHint, __assign({ as: Element, color: localModel.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: space.xxs }, props), children));
42
42
  },
43
43
  });
@@ -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,2FAqBzB,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,EAEL,YAAY,EAKb,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;AAaD,eAAO,MAAM,cAAc,2FAkBzB,CAAC"}
@@ -20,21 +20,19 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- /** @jsx jsx */
24
- import { jsx } from '@emotion/core';
25
- import { createComponent, useModelContext, useTheme, } from '@workday/canvas-kit-react/common';
23
+ import React from 'react';
24
+ import { createComponent, useModelContext, useTheme, styled, } from '@workday/canvas-kit-react/common';
25
+ import { Box } from '@workday/canvas-kit-labs-react/common';
26
26
  import { type } from '@workday/canvas-kit-react/tokens';
27
27
  import { HStack } from '@workday/canvas-kit-labs-react/layout';
28
28
  import { FormFieldModelContext } from './FormField';
29
29
  import { useFormFieldLabel } from './hooks';
30
- var styles = {
31
- label: __assign(__assign({}, type.levels.subtext.large), { fontWeight: type.properties.fontWeights.medium }),
32
- asterisk: {
33
- fontSize: type.properties.fontSizes[16],
34
- fontWeight: type.properties.fontWeights.regular,
35
- textDecoration: 'unset',
36
- },
37
- };
30
+ var StyledFormFieldLabel = styled('span')(__assign(__assign({}, type.levels.subtext.large), { fontWeight: type.properties.fontWeights.medium }));
31
+ var StyledAsterisk = styled(Box)({
32
+ fontSize: type.properties.fontSizes[20],
33
+ fontWeight: type.properties.fontWeights.regular,
34
+ textDecoration: 'unset',
35
+ });
38
36
  export var FormFieldLabel = createComponent('label')({
39
37
  displayName: 'FormField.Label',
40
38
  Component: function (_a, ref) {
@@ -42,8 +40,8 @@ export var FormFieldLabel = createComponent('label')({
42
40
  var localModel = useModelContext(FormFieldModelContext, model);
43
41
  var props = useFormFieldLabel(localModel, elemProps, ref);
44
42
  var theme = useTheme();
45
- return (jsx(HStack, __assign({ as: "label", spacing: spacing, css: styles.label, minWidth: "180px" }, props),
46
- jsx("span", null, children),
47
- localModel.state.isRequired && (jsx("span", { css: [styles.asterisk, { color: theme.canvas.palette.error.main }], "aria-hidden": "true" }, "*"))));
43
+ return (React.createElement(HStack, __assign({ as: "label", spacing: spacing, minWidth: "180px" }, props),
44
+ React.createElement(StyledFormFieldLabel, null, children),
45
+ localModel.state.isRequired && (React.createElement(StyledAsterisk, { as: "span", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
48
46
  },
49
47
  });
@@ -1,3 +1,4 @@
1
+ /** @jsxRuntime classic */
1
2
  /** @jsx jsx */
2
3
  import * as React from 'react';
3
4
  import { IconButtonProps } from '@workday/canvas-kit-react/button';
@@ -65,9 +66,31 @@ export declare const SidePanelContext: React.Context<{
65
66
  origin: string;
66
67
  }>;
67
68
  declare const SidePanel: {
68
- ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): JSX.Element;
69
- ToggleButton: ({ variant, icon, ...rest }: Pick<IconButtonProps, "size" | "icon" | "children" | "value" | "theme" | "shouldMirrorIcon" | "variant" | "onToggleChange" | "toggled"> & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
69
+ ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, touched, ...elemProps }: SidePanelProps): JSX.Element;
70
+ ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: IconButtonProps & {
71
+ /**
72
+ * The tooltip text to expand the side panel
73
+ * @default 'Expand'
74
+ */
75
+ tooltipTextExpand?: string | undefined;
76
+ /**
77
+ * The tooltip text to collapse the side panel
78
+ * @default 'Collapse'
79
+ */
80
+ tooltipTextCollapse?: string | undefined;
81
+ } & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
82
+ };
83
+ export declare type ToggleButtonProps = IconButtonProps & {
84
+ /**
85
+ * The tooltip text to expand the side panel
86
+ * @default 'Expand'
87
+ */
88
+ tooltipTextExpand?: string;
89
+ /**
90
+ * The tooltip text to collapse the side panel
91
+ * @default 'Collapse'
92
+ */
93
+ tooltipTextCollapse?: string;
70
94
  };
71
- export declare type ToggleButtonProps = Omit<IconButtonProps, 'aria-label'>;
72
95
  export default SidePanel;
73
96
  //# sourceMappingURL=SidePanel.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAI7E,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;;;CAgGd,CAAC;AAEF,oBAAY,iBAAiB,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;AA0CpE,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAM7E,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AA4BD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;;;QA8Fb;;;WAGG;;QAEH;;;WAGG;;;CAXJ,CAAC;AAEF,oBAAY,iBAAiB,GAAG,eAAe,GAAG;IAChD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AA+CF,eAAe,SAAS,CAAC"}
@@ -24,13 +24,16 @@ var __rest = (this && this.__rest) || function (s, e) {
24
24
  }
25
25
  return t;
26
26
  };
27
+ /** @jsxRuntime classic */
27
28
  /** @jsx jsx */
28
29
  import * as React from 'react';
29
30
  import { styled, useIsRTL } from '@workday/canvas-kit-react/common';
30
31
  import { css, jsx, keyframes } from '@emotion/core';
31
32
  import { IconButton } from '@workday/canvas-kit-react/button';
32
- import { space, colors, depth } from '@workday/canvas-kit-react/tokens';
33
+ import { space, colors } from '@workday/canvas-kit-react/tokens';
33
34
  import { transformationImportIcon } from '@workday/canvas-system-icons-web';
35
+ import { Tooltip } from '@workday/canvas-kit-react/tooltip';
36
+ import { Box } from '@workday/canvas-kit-labs-react/common';
34
37
  var createKeyframes = function (from, to) {
35
38
  var normalized = {
36
39
  from: typeof from === 'number' ? from + 'px' : from,
@@ -38,13 +41,7 @@ var createKeyframes = function (from, to) {
38
41
  };
39
42
  return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from {\n width: ", ";\n min-width: ", ";\n max-width: ", ";\n } to {\n width: ", ";\n min-width: ", ";\n max-width: ", ";\n }\n "], ["\n from {\n width: ", ";\n min-width: ", ";\n max-width: ", ";\n } to {\n width: ", ";\n min-width: ", ";\n max-width: ", ";\n }\n "])), normalized.from, normalized.from, normalized.from, normalized.to, normalized.to, normalized.to);
40
43
  };
41
- var containerVariantStyle = {
42
- alternate: __assign({ backgroundColor: colors.frenchVanilla100 }, depth[3]),
43
- standard: {
44
- backgroundColor: colors.soap100,
45
- },
46
- };
47
- var Panel = styled('section')({
44
+ var StyledPanel = styled(Box)({
48
45
  overflow: 'hidden',
49
46
  position: 'relative',
50
47
  boxSizing: 'border-box',
@@ -55,8 +52,10 @@ export var SidePanelContext = React.createContext({
55
52
  origin: 'left',
56
53
  });
57
54
  var SidePanel = function (_a) {
58
- var _b = _a.as, as = _b === void 0 ? 'section' : _b, children = _a.children, _c = _a.collapsedWidth, collapsedWidth = _c === void 0 ? 64 : _c, _d = _a.expanded, expanded = _d === void 0 ? true : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? 320 : _e, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _f = _a.origin, origin = _f === void 0 ? 'left' : _f, _g = _a.variant, variant = _g === void 0 ? 'standard' : _g, touched = _a.touched, elemProps = __rest(_a, ["as", "children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "variant", "touched"]);
59
- var _h = React.useState(expanded ? 'expanded' : 'collapsed'), state = _h[0], setState = _h[1];
55
+ var _b = _a.as, as = _b === void 0 ? 'section' : _b, children = _a.children, _c = _a.collapsedWidth, collapsedWidth = _c === void 0 ? 64 : _c, _d = _a.expanded, expanded = _d === void 0 ? true : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? 320 : _e, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _f = _a.origin, origin = _f === void 0 ? 'left' : _f,
56
+ // variant = 'standard',
57
+ touched = _a.touched, elemProps = __rest(_a, ["as", "children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "touched"]);
58
+ var _g = React.useState(expanded ? 'expanded' : 'collapsed'), state = _g[0], setState = _g[1];
60
59
  React.useEffect(function () {
61
60
  if (typeof onExpandedChange !== 'undefined') {
62
61
  onExpandedChange(expanded);
@@ -95,18 +94,7 @@ var SidePanel = function (_a) {
95
94
  onAnimationStart(event);
96
95
  }
97
96
  };
98
- return (jsx(Panel, __assign({ as: as, css: [
99
- {
100
- width: expanded ? expandedWidth : collapsedWidth,
101
- maxWidth: expanded ? expandedWidth : collapsedWidth,
102
- // mounted.current will be false on the first render, thus you won't get an unwanted animation here
103
- // Will animate again if you force a re-render (like in Storybook)
104
- animation: touched
105
- ? (expanded ? motion.expand : motion.collapse) + " 200ms ease-out"
106
- : undefined,
107
- },
108
- containerVariantStyle[variant],
109
- ], onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
97
+ return (jsx(StyledPanel, __assign({ as: as, width: expanded ? expandedWidth : collapsedWidth, maxWidth: expanded ? expandedWidth : collapsedWidth, backgroundColor: elemProps.variant === 'alternate' ? colors.frenchVanilla100 : colors.soap100, depth: elemProps.variant === 'alternate' ? 3 : undefined, animation: touched ? (expanded ? motion.expand : motion.collapse) + " 200ms ease-out" : undefined, onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
110
98
  jsx(SidePanelContext.Provider, { value: {
111
99
  state: state,
112
100
  origin: origin,
@@ -116,7 +104,7 @@ var SidePanel = function (_a) {
116
104
  * A toggle button styled specifically for the side panel container.
117
105
  */
118
106
  var ToggleButton = function (_a) {
119
- var _b = _a.variant, variant = _b === void 0 ? 'plain' : _b, _c = _a.icon, icon = _c === void 0 ? transformationImportIcon : _c, rest = __rest(_a, ["variant", "icon"]);
107
+ var _b = _a.variant, variant = _b === void 0 ? 'plain' : _b, _c = _a.icon, icon = _c === void 0 ? transformationImportIcon : _c, _d = _a.tooltipTextExpand, expandLabel = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, collapseLabel = _e === void 0 ? 'Collapse' : _e, rest = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
120
108
  var context = React.useContext(SidePanelContext);
121
109
  var useRTLOrigin = function () {
122
110
  var isRTL = useIsRTL();
@@ -139,8 +127,8 @@ var ToggleButton = function (_a) {
139
127
  ? "scaleX(" + (rtlOrigin === 'left' ? '1' : '-1') + ")"
140
128
  : "scaleX(" + (rtlOrigin === 'left' ? '-1' : '1') + ")",
141
129
  });
142
- // @ts-ignore aria-label type error here. The user will decide to use aria-label or aria-labelledby
143
- return jsx(IconButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest));
130
+ return (jsx(Tooltip, { title: context.state === 'collapsed' ? expandLabel : collapseLabel, type: "muted" },
131
+ jsx(IconButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
144
132
  };
145
133
  SidePanel.ToggleButton = ToggleButton;
146
134
  export default SidePanel;
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AAWA,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"}
@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
+ /** @jsxRuntime classic */
23
24
  /** @jsx jsx */
24
25
  import { jsx } from '@emotion/core';
25
26
  import { borderRadius, inputColors, spaceNumbers, type, } from '@workday/canvas-kit-react/tokens';
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAWA,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"}
@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
+ /** @jsxRuntime classic */
23
24
  /** @jsx jsx */
24
25
  import { jsx } from '@emotion/core';
25
26
  import { borderRadius, inputColors, space, type, } from '@workday/canvas-kit-react/tokens';
@@ -1,15 +1,14 @@
1
- /** @jsx jsx */
2
- import {jsx} from '@emotion/core';
3
1
  import React from 'react';
4
-
5
2
  import {
6
3
  createComponent,
7
4
  ExtractProps,
8
5
  useModelContext,
9
6
  useTheme,
7
+ styled,
8
+ StyledType,
10
9
  } from '@workday/canvas-kit-react/common';
11
10
  import {space, type} from '@workday/canvas-kit-react/tokens';
12
- import {Box} from '@workday/canvas-kit-labs-react/common';
11
+ import {Box, BoxProps} from '@workday/canvas-kit-labs-react/common';
13
12
 
14
13
  import {FormFieldModelContext} from './FormField';
15
14
  import {FormFieldModel, useFormFieldHint} from './hooks';
@@ -22,6 +21,10 @@ export interface FormFieldHintProps extends ExtractProps<typeof Box, never> {
22
21
  children?: React.ReactNode;
23
22
  }
24
23
 
24
+ const StyledHint = styled(Box)<StyledType & BoxProps>({
25
+ ...type.levels.subtext.medium,
26
+ });
27
+
25
28
  export const FormFieldHint = createComponent('p')({
26
29
  displayName: 'FormField.Hint',
27
30
  Component: ({model, children, ...elemProps}: FormFieldHintProps, ref, Element) => {
@@ -35,17 +38,14 @@ export const FormFieldHint = createComponent('p')({
35
38
  }
36
39
 
37
40
  return (
38
- <Box
41
+ <StyledHint
39
42
  as={Element}
40
- css={{
41
- ...type.levels.subtext.medium,
42
- }}
43
43
  color={localModel.state.hasError ? theme.canvas.palette.error.main : undefined}
44
44
  marginY={space.xxs}
45
45
  {...props}
46
46
  >
47
47
  {children}
48
- </Box>
48
+ </StyledHint>
49
49
  );
50
50
  },
51
51
  });
@@ -1,5 +1,3 @@
1
- /** @jsx jsx */
2
- import {jsx} from '@emotion/core';
3
1
  import React from 'react';
4
2
 
5
3
  import {
@@ -7,8 +5,10 @@ import {
7
5
  ExtractProps,
8
6
  useModelContext,
9
7
  useTheme,
8
+ styled,
9
+ StyledType,
10
10
  } from '@workday/canvas-kit-react/common';
11
- import {ComponentStyles} from '@workday/canvas-kit-labs-react/common';
11
+ import {Box} from '@workday/canvas-kit-labs-react/common';
12
12
  import {type} from '@workday/canvas-kit-react/tokens';
13
13
  import {HStack, StackSpacing} from '@workday/canvas-kit-labs-react/layout';
14
14
 
@@ -28,17 +28,16 @@ export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, ne
28
28
  spacing?: StackSpacing;
29
29
  }
30
30
 
31
- const styles: ComponentStyles = {
32
- label: {
33
- ...type.levels.subtext.large,
34
- fontWeight: type.properties.fontWeights.medium,
35
- },
36
- asterisk: {
37
- fontSize: type.properties.fontSizes[16],
38
- fontWeight: type.properties.fontWeights.regular,
39
- textDecoration: 'unset',
40
- },
41
- };
31
+ const StyledFormFieldLabel = styled('span')({
32
+ ...type.levels.subtext.large,
33
+ fontWeight: type.properties.fontWeights.medium,
34
+ });
35
+
36
+ const StyledAsterisk = styled(Box)<StyledType>({
37
+ fontSize: type.properties.fontSizes[20],
38
+ fontWeight: type.properties.fontWeights.regular,
39
+ textDecoration: 'unset',
40
+ });
42
41
 
43
42
  export const FormFieldLabel = createComponent('label')({
44
43
  displayName: 'FormField.Label',
@@ -48,15 +47,12 @@ export const FormFieldLabel = createComponent('label')({
48
47
  const theme = useTheme();
49
48
 
50
49
  return (
51
- <HStack as="label" spacing={spacing} css={styles.label} minWidth="180px" {...props}>
52
- <span>{children}</span>
50
+ <HStack as="label" spacing={spacing} minWidth="180px" {...props}>
51
+ <StyledFormFieldLabel>{children}</StyledFormFieldLabel>
53
52
  {localModel.state.isRequired && (
54
- <span
55
- css={[styles.asterisk, {color: theme.canvas.palette.error.main}]}
56
- aria-hidden="true"
57
- >
53
+ <StyledAsterisk as="span" color={theme.canvas.palette.error.main} aria-hidden="true">
58
54
  *
59
- </span>
55
+ </StyledAsterisk>
60
56
  )}
61
57
  </HStack>
62
58
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "6.3.5",
3
+ "version": "7.0.0-alpha.0-next.3+14a81c7e",
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.5",
57
+ "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.3+14a81c7e",
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.5",
63
+ "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.3+14a81c7e",
64
64
  "formik": "^2.2.9",
65
65
  "yup": "^0.31.1"
66
66
  },
67
- "gitHead": "bf02ab73d5e19ecde29cb853dad4f558201cb886"
67
+ "gitHead": "14a81c7ef3deb9efaf67fa3ec9cc2d2a3161b00b"
68
68
  }