@workday/canvas-kit-react 11.0.0-alpha.726-next.0 → 11.0.0-alpha.758-next.0

package/text/lib/Text.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createModifiers, createStyles} from '@workday/canvas-kit-styling';
+import {createStencil} from '@workday/canvas-kit-styling';
 import {mergeStyles, BoxProps} from '@workday/canvas-kit-react/layout';
 
 type TypeSize = 'large' | 'medium' | 'small';
@@ -27,65 +27,68 @@ export interface TextProps extends BoxProps {
   variant?: 'error' | 'hint' | 'inverse';
 }
 
-const textModifiers = createModifiers({
-  typeLevel: {
-    // Title level styles
-    'title.large': createStyles({
-      ...system.type.title.large,
-      color: base.blackPepper400,
-    }),
-    'title.medium': createStyles({
-      ...system.type.title.medium,
-      color: base.blackPepper400,
-    }),
-    'title.small': createStyles({
-      ...system.type.title.small,
-      color: base.blackPepper400,
-    }),
-    // Heading level styles
-    'heading.large': createStyles({
-      ...system.type.heading.large,
-      color: base.blackPepper400,
-    }),
-    'heading.medium': createStyles({
-      ...system.type.heading.medium,
-      color: base.blackPepper400,
-    }),
-    'heading.small': createStyles({
-      ...system.type.heading.small,
-      color: base.blackPepper400,
-    }),
-    // Body level styles
-    'body.large': createStyles({
-      ...system.type.body.large,
-      color: base.blackPepper300,
-    }),
-    'body.medium': createStyles({
-      ...system.type.body.medium,
-      color: base.blackPepper300,
-    }),
-    'body.small': createStyles({
-      ...system.type.body.small,
-      color: base.blackPepper300,
-    }),
-    // Subtext level styles
-    'subtext.large': createStyles({
-      ...system.type.subtext.large,
-      color: base.blackPepper300,
-    }),
-    'subtext.medium': createStyles({
-      ...system.type.subtext.medium,
-      color: base.blackPepper300,
-    }),
-    'subtext.small': createStyles({
-      ...system.type.subtext.small,
-      color: base.blackPepper300,
-    }),
-  },
-  variant: {
-    error: createStyles({color: base.cinnamon500}),
-    hint: createStyles({color: base.licorice300}),
-    inverse: createStyles({color: base.frenchVanilla100}),
+export const textStencil = createStencil({
+  base: {},
+  modifiers: {
+    typeLevel: {
+      // Title level styles
+      'title.large': {
+        ...system.type.title.large,
+        color: system.color.text.strong,
+      },
+      'title.medium': {
+        ...system.type.title.medium,
+        color: system.color.text.strong,
+      },
+      'title.small': {
+        ...system.type.title.small,
+        color: system.color.text.strong,
+      },
+      // Heading level styles
+      'heading.large': {
+        ...system.type.heading.large,
+        color: system.color.text.strong,
+      },
+      'heading.medium': {
+        ...system.type.heading.medium,
+        color: system.color.text.strong,
+      },
+      'heading.small': {
+        ...system.type.heading.small,
+        color: system.color.text.strong,
+      },
+      // Body level styles
+      'body.large': {
+        ...system.type.body.large,
+        color: system.color.text.default,
+      },
+      'body.medium': {
+        ...system.type.body.medium,
+        color: system.color.text.default,
+      },
+      'body.small': {
+        ...system.type.body.small,
+        color: system.color.text.default,
+      },
+      // Subtext level styles
+      'subtext.large': {
+        ...system.type.subtext.large,
+        color: system.color.text.default,
+      },
+      'subtext.medium': {
+        ...system.type.subtext.medium,
+        color: system.color.text.default,
+      },
+      'subtext.small': {
+        ...system.type.subtext.small,
+        color: system.color.text.default,
+      },
+    },
+    variant: {
+      error: {color: system.color.text.critical.default},
+      hint: {color: system.color.text.hint},
+      inverse: {color: system.color.text.inverse},
+    },
   },
 });
 
@@ -124,7 +127,7 @@ export const Text = createComponent('span')({
   displayName: 'Text',
   Component: ({children, typeLevel, variant, ...elemProps}: TextProps, ref, Element) => {
     return (
-      <Element ref={ref} {...mergeStyles(elemProps, textModifiers({typeLevel, variant}))}>
+      <Element ref={ref} {...mergeStyles(elemProps, textStencil({typeLevel, variant}))}>
         {children}
       </Element>
     );

package/tooltip/lib/OverflowTooltip.tsx

@@ -59,10 +59,9 @@ const isOverflowed = (element: Element) => {
   const overflowElement = findEllipsisElement(element) || findOverflowElement(element);
 
   if (overflowElement) {
-    const clientRect = overflowElement.getBoundingClientRect();
     return (
-      overflowElement.scrollWidth > clientRect.width ||
-      overflowElement.scrollHeight > clientRect.height
+      overflowElement.scrollWidth > overflowElement.clientWidth ||
+      overflowElement.scrollHeight > overflowElement.clientHeight
     );
   }
   return false;

package/dist/commonjs/icon/lib/Icon.d.ts

@@ -1,9 +0,0 @@
-import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
-import { SvgProps } from './Svg';
-export interface IconProps extends SvgProps {
-    src: CanvasIcon;
-    size?: number | string;
-    type: CanvasIconTypes.Accent | CanvasIconTypes.Applet | CanvasIconTypes.System;
-}
-export declare const Icon: import("@workday/canvas-kit-react/common").ElementComponent<"span", IconProps>;
-//# sourceMappingURL=Icon.d.ts.map

package/dist/commonjs/icon/lib/Icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAGpC,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,EAAE,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;CAChF;AAED,eAAO,MAAM,IAAI,gFAyBf,CAAC"}

package/dist/commonjs/icon/lib/Icon.js

@@ -1,40 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Icon = void 0;
-const React = __importStar(require("react"));
-const Svg_1 = require("./Svg");
-const common_1 = require("@workday/canvas-kit-react/common");
-exports.Icon = common_1.createComponent('span')({
-    displayName: 'Icon',
-    Component: ({ src, size, styles, type, shouldMirror, ...elemProps }, ref, Element) => {
-        var _a;
-        const iconStyles = { ...styles };
-        if (size) {
-            iconStyles['& svg'] = {
-                ...((_a = iconStyles['& svg']) !== null && _a !== void 0 ? _a : {}),
-                width: size,
-                height: size,
-            };
-        }
-        return (React.createElement(Svg_1.Svg, Object.assign({ src: src, type: type, shouldMirror: shouldMirror, as: Element }, elemProps, { ref: ref, styles: iconStyles })));
-    },
-});

package/dist/es6/icon/lib/Icon.d.ts

@@ -1,9 +0,0 @@
-import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
-import { SvgProps } from './Svg';
-export interface IconProps extends SvgProps {
-    src: CanvasIcon;
-    size?: number | string;
-    type: CanvasIconTypes.Accent | CanvasIconTypes.Applet | CanvasIconTypes.System;
-}
-export declare const Icon: import("@workday/canvas-kit-react/common").ElementComponent<"span", IconProps>;
-//# sourceMappingURL=Icon.d.ts.map

package/dist/es6/icon/lib/Icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAGpC,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,EAAE,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;CAChF;AAED,eAAO,MAAM,IAAI,gFAyBf,CAAC"}

package/dist/es6/icon/lib/Icon.js

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { Svg } from './Svg';
-import { createComponent } from '@workday/canvas-kit-react/common';
-export const Icon = createComponent('span')({
-    displayName: 'Icon',
-    Component: ({ src, size, styles, type, shouldMirror, ...elemProps }, ref, Element) => {
-        var _a;
-        const iconStyles = { ...styles };
-        if (size) {
-            iconStyles['& svg'] = {
-                ...((_a = iconStyles['& svg']) !== null && _a !== void 0 ? _a : {}),
-                width: size,
-                height: size,
-            };
-        }
-        return (React.createElement(Svg, Object.assign({ src: src, type: type, shouldMirror: shouldMirror, as: Element }, elemProps, { ref: ref, styles: iconStyles })));
-    },
-});

package/icon/lib/Icon.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import {CSSObject} from '@emotion/styled';
-import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
-import {Svg, SvgProps} from './Svg';
-import {createComponent} from '@workday/canvas-kit-react/common';
-
-export interface IconProps extends SvgProps {
-  src: CanvasIcon;
-  size?: number | string;
-  type: CanvasIconTypes.Accent | CanvasIconTypes.Applet | CanvasIconTypes.System;
-}
-
-export const Icon = createComponent('span')({
-  displayName: 'Icon',
-  Component: ({src, size, styles, type, shouldMirror, ...elemProps}: IconProps, ref, Element) => {
-    const iconStyles: CSSObject = {...styles};
-
-    if (size) {
-      iconStyles['& svg'] = {
-        ...((iconStyles['& svg'] as CSSObject) ?? {}),
-        width: size,
-        height: size,
-      };
-    }
-
-    return (
-      <Svg
-        src={src}
-        type={type}
-        shouldMirror={shouldMirror}
-        as={Element}
-        {...elemProps}
-        ref={ref}
-        styles={iconStyles}
-      />
-    );
-  },
-});