@workday/canvas-kit-labs-react 8.0.0 → 8.0.1

package/dist/es6/toast/lib/Toast.js

@@ -0,0 +1,72 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { createContainer } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { Popup } from '@workday/canvas-kit-react/popup';
+import { ToastCloseIcon } from './ToastCloseIcon';
+import { ToastIcon } from './ToastIcon';
+import { ToastMessage } from './ToastMessage';
+import { ToastLink } from './ToastLink';
+import { ToastBody } from './ToastBody';
+import { useToastModel } from './hooks/useToastModel';
+export var Toast = createContainer('div')({
+    displayName: 'Toast',
+    modelHook: useToastModel,
+    subComponents: {
+        Body: ToastBody,
+        CloseIcon: ToastCloseIcon,
+        Icon: ToastIcon,
+        Message: ToastMessage,
+        Link: ToastLink,
+    },
+})(function (_a, Element, model) {
+    var children = _a.children, elemProps = __rest(_a, ["children"]);
+    var getAriaAttributes = function (mode) {
+        switch (mode) {
+            case 'dialog':
+                return {
+                    'aria-describedby': model.state.id,
+                    'aria-label': 'notification',
+                    role: 'dialog',
+                };
+            case 'alert':
+                return {
+                    role: 'alert',
+                    'aria-live': 'assertive',
+                    'aria-atomic': true,
+                };
+            case 'status':
+                return {
+                    role: 'status',
+                    'aria-live': 'polite',
+                    'aria-atomic': true,
+                };
+            default: {
+                return {};
+            }
+        }
+    };
+    return (React.createElement(Popup.Card, __assign({ as: Element, width: 360, padding: "0" }, getAriaAttributes(model.state.mode), elemProps),
+        React.createElement(Flex, null, children)));
+});

package/dist/es6/toast/lib/ToastBody.d.ts

@@ -0,0 +1,6 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Popup } from '@workday/canvas-kit-react/popup';
+export interface ToastBodyProps extends ExtractProps<typeof Popup.Body> {
+}
+export declare const ToastBody: import("@workday/canvas-kit-react/common").ElementComponent<"div", ToastBodyProps>;
+//# sourceMappingURL=ToastBody.d.ts.map

package/dist/es6/toast/lib/ToastBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastBody.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastBody.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AACnG,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAGtD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC;CAAG;AAW1E,eAAO,MAAM,SAAS,oFAgBpB,CAAC"}

package/dist/es6/toast/lib/ToastBody.js

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { createComponent, styled } from '@workday/canvas-kit-react/common';
+import { Popup } from '@workday/canvas-kit-react/popup';
+import { type } from '@workday/canvas-kit-react/tokens';
+var StyledToastBody = styled(Popup.Body)(__assign({ display: 'flex', alignItems: 'flex-start', flexDirection: 'column', justifyContent: 'center' }, type.levels.subtext.large));
+export var ToastBody = createComponent('div')({
+    displayName: 'Toast.Body',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(StyledToastBody, __assign({ paddingInlineStart: "xxxs", paddingY: "s", paddingInlineEnd: "s", ref: ref, as: Element }, elemProps), children));
+    },
+});

package/dist/es6/toast/lib/ToastCloseIcon.d.ts

@@ -0,0 +1,6 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Popup } from '@workday/canvas-kit-react/popup';
+export interface ToastCloseIconProps extends ExtractProps<typeof Popup.CloseIcon, never> {
+}
+export declare const ToastCloseIcon: import("@workday/canvas-kit-react/common").ElementComponent<"button", ToastCloseIconProps>;
+//# sourceMappingURL=ToastCloseIcon.d.ts.map

package/dist/es6/toast/lib/ToastCloseIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastCloseIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastCloseIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,YAAY,EAAa,MAAM,kCAAkC,CAAC;AAC3F,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAGtD,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;CAAG;AAO3F,eAAO,MAAM,cAAc,4FAKzB,CAAC"}

package/dist/es6/toast/lib/ToastCloseIcon.js

@@ -0,0 +1,37 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Popup } from '@workday/canvas-kit-react/popup';
+import styled from '@emotion/styled';
+// TODO Remove this once we extend style properties for buttons https://github.com/Workday/canvas-kit/issues/1746
+var StyledCloseIcon = styled(Popup.CloseIcon)({
+    position: 'relative',
+});
+export var ToastCloseIcon = createComponent('button')({
+    displayName: 'Toast.CloseIcon',
+    Component: function (_a, ref, Element) {
+        var elemProps = __rest(_a, []);
+        return React.createElement(StyledCloseIcon, __assign({ as: Element, ref: ref, size: "small" }, elemProps));
+    },
+});

package/dist/es6/toast/lib/ToastIcon.d.ts

@@ -0,0 +1,5 @@
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
+export interface ToastIconProps extends Omit<SystemIconProps, 'colorHover'> {
+}
+export declare const ToastIcon: import("@workday/canvas-kit-react/common").ElementComponent<"div", ToastIconProps>;
+//# sourceMappingURL=ToastIcon.d.ts.map

package/dist/es6/toast/lib/ToastIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE3E,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;CAAG;AAE9E,eAAO,MAAM,SAAS,oFAgBpB,CAAC"}

package/dist/es6/toast/lib/ToastIcon.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+export var ToastIcon = createComponent('div')({
+    displayName: 'Toast.Icon',
+    Component: function (elemProps, ref, Element) {
+        return (React.createElement(SystemIcon, __assign({ colorHover: elemProps.color, marginY: "s", marginInlineEnd: "xs", marginInlineStart: "xs", alignSelf: "start", ref: ref, as: Element }, elemProps)));
+    },
+});

package/dist/es6/toast/lib/ToastLink.d.ts

@@ -0,0 +1,9 @@
+import { HyperlinkProps } from '@workday/canvas-kit-react/button';
+export interface ToastLinkProps extends HyperlinkProps {
+    /**
+     * attribute for the hyperlink URL
+     */
+    href: string;
+}
+export declare const ToastLink: import("@workday/canvas-kit-react/common").ElementComponent<"a", ToastLinkProps>;
+//# sourceMappingURL=ToastLink.d.ts.map

package/dist/es6/toast/lib/ToastLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastLink.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastLink.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAG3E,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAMD,eAAO,MAAM,SAAS,kFASpB,CAAC"}

package/dist/es6/toast/lib/ToastLink.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { createComponent, styled } from '@workday/canvas-kit-react/common';
+import { Hyperlink } from '@workday/canvas-kit-react/button';
+import { space } from '@workday/canvas-kit-react/tokens';
+var StyledHyperLink = styled(Hyperlink)({
+    marginTop: space.xxxs,
+});
+export var ToastLink = createComponent('a')({
+    displayName: 'Toast.Link',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, href = _a.href, elemProps = __rest(_a, ["children", "href"]);
+        return (React.createElement(StyledHyperLink, __assign({ ref: ref, href: href, as: Element }, elemProps), children));
+    },
+});

package/dist/es6/toast/lib/ToastMessage.d.ts

@@ -0,0 +1,11 @@
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+export interface ToastMessageProps extends FlexProps {
+}
+export declare const ToastMessage: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ToastMessageProps, {
+    state: {
+        id: string;
+        mode: import("./hooks/useToastModel").AriaRoleMode;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=ToastMessage.d.ts.map

package/dist/es6/toast/lib/ToastMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastMessage.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAGjE,MAAM,WAAW,iBAAkB,SAAQ,SAAS;CAAG;AAMvD,eAAO,MAAM,YAAY;;;;;;EAQvB,CAAC"}

package/dist/es6/toast/lib/ToastMessage.js

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { createSubcomponent, styled } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { useToastModel } from './hooks/useToastModel';
+var StyledMessage = styled(Flex)({
+    wordBreak: 'break-word',
+});
+export var ToastMessage = createSubcomponent('div')({
+    modelHook: useToastModel,
+})(function (_a, Element, model) {
+    var children = _a.children, elemProps = __rest(_a, ["children"]);
+    return (React.createElement(StyledMessage, __assign({ flexDirection: "column", id: model.state.id, as: Element }, elemProps), children));
+});

package/dist/es6/toast/lib/hooks/useToastModel.d.ts

@@ -0,0 +1,65 @@
+export declare type AriaRoleMode = 'dialog' | 'status' | 'alert';
+export declare const useToastModel: (<TT_Special_Generic>(config?: (Partial<{
+    /**
+     * Sets the correct aria attributes for the Toast.
+     * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+     * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+     * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`
+     * @default 'status'
+     */
+    mode: AriaRoleMode;
+    /**
+     * When the Toast has a `mode="dialog"` this adds a unique id to type the `Toast.Message` to the dialog.
+     */
+    id: string;
+}> & {} & {}) | undefined) => {
+    state: {
+        id: string;
+        /**
+         * Sets the correct aria attributes for the Toast.
+         * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+         * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+         * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`
+         * @default 'status'
+         */
+        mode: AriaRoleMode;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    /**
+     * Sets the correct aria attributes for the Toast.
+     * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+     * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+     * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`
+     * @default 'status'
+     */
+    mode: AriaRoleMode;
+    /**
+     * When the Toast has a `mode="dialog"` this adds a unique id to type the `Toast.Message` to the dialog.
+     */
+    id: string;
+}, {}, {
+    id: string;
+    /**
+     * Sets the correct aria attributes for the Toast.
+     * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+     * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+     * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`
+     * @default 'status'
+     */
+    mode: AriaRoleMode;
+}, {}, {
+    state: {
+        id: string;
+        /**
+         * Sets the correct aria attributes for the Toast.
+         * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+         * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+         * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`
+         * @default 'status'
+         */
+        mode: AriaRoleMode;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=useToastModel.d.ts.map

package/dist/es6/toast/lib/hooks/useToastModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToastModel.d.ts","sourceRoot":"","sources":["../../../../../toast/lib/hooks/useToastModel.tsx"],"names":[],"mappings":"AACA,oBAAY,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,eAAO,MAAM,aAAa;IAEtB;;;;;;OAMG;;IAEH;;OAEG;;;;;QAVH;;;;;;WAMG;;;;;IANH;;;;;;OAMG;;IAEH;;OAEG;;;;IAVH;;;;;;OAMG;;;;;QANH;;;;;;WAMG;;;;EAeL,CAAC"}

package/dist/es6/toast/lib/hooks/useToastModel.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { createModelHook, useUniqueId } from '@workday/canvas-kit-react/common';
+export var useToastModel = createModelHook({
+    defaultConfig: {
+        /**
+         * Sets the correct aria attributes for the Toast.
+         * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+         * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+         * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`
+         * @default 'status'
+         */
+        mode: 'status',
+        /**
+         * When the Toast has a `mode="dialog"` this adds a unique id to type the `Toast.Message` to the dialog.
+         */
+        id: '',
+    },
+})(function (config) {
+    var id = useUniqueId(config.id);
+    var state = __assign(__assign({}, config), { id: id });
+    return { state: state, events: {} };
+});

package/drawer/index.ts

@@ -1,5 +1,2 @@
-import Drawer from './lib/Drawer';
-import DrawerHeader from './lib/DrawerHeader';
-export {Drawer, DrawerHeader};
-export default Drawer;
+export {DeprecatedDrawerHeader} from './lib/DrawerHeader';
 export * from './lib/Drawer';

package/drawer/lib/Drawer.tsx

@@ -2,52 +2,70 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 import {colors, space, CanvasSpaceValues} from '@workday/canvas-kit-react/tokens';
 
-export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
+/**
+ * ### Deprecated Drawer Props
+ *
+ * As of Canvas Kit v8, Drawer is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+
+export interface DeprecatedDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * The padding of the Drawer contents.
+   * The padding of the DeprecatedDrawer contents.
    * @default space.s
    */
   padding?: CanvasSpaceValues;
   /**
-   * The direction from which the Drawer opens. Accepts `Left` or `Right`.
-   * @default DrawerDirection.Right
+   * The direction from which the DeprecatedDrawer opens. Accepts `Left` or `Right`.
+   * @default DeprecatedDrawerDirection.Right
    */
-  openDirection?: DrawerDirection;
+  openDirection?: DeprecatedDrawerDirection;
   /**
-   * The width of the Drawer in `px`.
+   * The width of the DeprecatedDrawer in `px`.
    * @default 360
    */
   width?: number;
   /**
-   * If true, render the Drawer with a drop shadow.
+   * If true, render the DeprecatedDrawer with a drop shadow.
    * @default false
    */
   showDropShadow?: boolean;
   /**
-   * The optional DrawerHeader component of the Drawer. Shows an optional string and close button.
+   * The optional DeprecatedDrawerHeader component of the DeprecatedDrawer. Shows an optional string and close button.
    */
   header?: React.ReactElement;
   /**
-   * The `aria-labelledby` of the Drawer. Set this when there is a `header` for accessibility. The `role` attribute should also be used when this attribute is present. This value should be the same as the `id` attribute of the `header` element.
+   * The `aria-labelledby` of the DeprecatedDrawer. Set this when there is a `header` for accessibility. The `role` attribute should also be used when this attribute is present. This value should be the same as the `id` attribute of the `header` element.
    */
   'aria-labelledby'?: string;
   /**
-   * The `aria-label` for the Drawer. Set this when there is NO `header` for accessibility.
+   * The `aria-label` for the DeprecatedDrawer. Set this when there is NO `header` for accessibility.
    */
   'aria-label'?: string;
   /**
-   * The role of the Drawer. If `role` is provided, you must also set `aria-labelledby` to link `header` to the `role`.
+   * The role of the DeprecatedDrawer. If `role` is provided, you must also set `aria-labelledby` to link `header` to the `role`.
    */
   role?: string;
 }
 
-export enum DrawerDirection {
+/**
+ * ### Deprecated Drawer Direction
+ *
+ * As of Canvas Kit v8, Drawer is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+
+export enum DeprecatedDrawerDirection {
   Left,
   Right,
 }
 
 const DrawerContainer = styled('div')<
-  Pick<DrawerProps, 'width' | 'showDropShadow' | 'openDirection'>
+  Pick<DeprecatedDrawerProps, 'width' | 'showDropShadow' | 'openDirection'>
 >(
   {
     height: '100%',
@@ -61,26 +79,27 @@ const DrawerContainer = styled('div')<
   }),
   ({showDropShadow, openDirection}) => ({
     boxShadow:
-      openDirection === DrawerDirection.Right && showDropShadow
+      openDirection === DeprecatedDrawerDirection.Right && showDropShadow
         ? '-8px 0px 16px 0 rgba(0,0,0,0.12)'
-        : openDirection === DrawerDirection.Left && showDropShadow
+        : openDirection === DeprecatedDrawerDirection.Left && showDropShadow
         ? '8px 0px 16px 0 rgba(0,0,0,0.12)'
         : undefined,
   }),
   ({openDirection}) => ({
-    borderLeft: openDirection === DrawerDirection.Right ? `1px solid ${colors.soap400}` : undefined,
-    borderRight: openDirection === DrawerDirection.Left ? `1px solid ${colors.soap400}` : undefined,
-    right: openDirection === DrawerDirection.Right ? space.zero : undefined,
-    left: openDirection === DrawerDirection.Left ? space.zero : undefined,
+    borderLeft:
+      openDirection === DeprecatedDrawerDirection.Right ? `1px solid ${colors.soap400}` : undefined,
+    borderRight:
+      openDirection === DeprecatedDrawerDirection.Left ? `1px solid ${colors.soap400}` : undefined,
+    right: openDirection === DeprecatedDrawerDirection.Right ? space.zero : undefined,
+    left: openDirection === DeprecatedDrawerDirection.Left ? space.zero : undefined,
   })
 );
 
-const ChildrenContainer = styled('div')<Pick<DrawerProps, 'padding'>>(
+const ChildrenContainer = styled('div')<Pick<DeprecatedDrawerProps, 'padding'>>(
   {
     height: '100%',
     overflowY: 'auto',
     wordBreak: 'break-word',
-    wordWrap: 'break-word', // Needed for IE11
     position: 'relative',
   },
   ({padding}) => ({
@@ -88,14 +107,32 @@ const ChildrenContainer = styled('div')<Pick<DrawerProps, 'padding'>>(
   })
 );
 
-export default class Drawer extends React.Component<DrawerProps, {}> {
-  static OpenDirection = DrawerDirection;
+/**
+ * ### Deprecated Drawer
+ *
+ * As of Canvas Kit v8, this component is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+
+export class DeprecatedDrawer extends React.Component<DeprecatedDrawerProps, {}> {
+  static OpenDirection = DeprecatedDrawerDirection;
+
+  componentDidMount() {
+    console.warn(
+      `This component is being deprecated and will be removed in Canvas Kit V9.\n
+      For more information, please see the V8 upgrade guide:\n
+      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page
+      `
+    );
+  }
 
   public render() {
     const {
       padding = space.s,
       width = 360,
-      openDirection = DrawerDirection.Right,
+      openDirection = DeprecatedDrawerDirection.Right,
       showDropShadow = false,
       children,
       header,