@workday/canvas-kit-preview-react 7.0.0-alpha.78-next.6 → 7.0.0-alpha.81-next.9

package/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx

@@ -52,7 +52,7 @@ export interface DropdownMenuProps {
 
 const StyledDropdownMenu = styled(Box)<BoxProps>({
   ...type.levels.subtext.large,
-  ...depth[2],
+  ...depth[3],
   backgroundColor: commonColors.background,
   border: `1px solid ${colors.soap500}`,
   borderRadius: borderRadius.m,

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.js

@@ -32,7 +32,7 @@ var tokens_1 = require("@workday/canvas-kit-react/tokens");
 // local components
 var MenuItemLink_1 = require("./MenuItemLink");
 var layout_1 = require("@workday/canvas-kit-react/layout");
-var StyledDropdownMenu = common_1.styled(layout_1.Box)(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), tokens_1.depth[2]), { backgroundColor: tokens_1.commonColors.background, border: "1px solid " + tokens_1.colors.soap500, borderRadius: tokens_1.borderRadius.m, boxSizing: 'border-box', display: 'inline-block', marginTop: tokens_1.space.xxxs, maxHeight: 200, outline: 'none', overflowY: 'auto', position: 'relative', width: 'max-content' }));
+var StyledDropdownMenu = common_1.styled(layout_1.Box)(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), tokens_1.depth[3]), { backgroundColor: tokens_1.commonColors.background, border: "1px solid " + tokens_1.colors.soap500, borderRadius: tokens_1.borderRadius.m, boxSizing: 'border-box', display: 'inline-block', marginTop: tokens_1.space.xxxs, maxHeight: 200, outline: 'none', overflowY: 'auto', position: 'relative', width: 'max-content' }));
 var StyledMenuList = common_1.styled('ul')({
     boxSizing: 'border-box',
     listStyle: 'none',

package/dist/commonjs/menu/lib/Menu.js

@@ -268,7 +268,7 @@ var Menu = /** @class */ (function (_super) {
         var _a = this.props, _b = _a.id, id = _b === void 0 ? this.id : _b, _c = _a.isOpen, isOpen = _c === void 0 ? true : _c, children = _a.children, ariaLabelledby = _a["aria-labelledby"], grow = _a.grow, width = _a.width, onSelect = _a.onSelect, onClose = _a.onClose, initialSelectedItem = _a.initialSelectedItem, elemProps = __rest(_a, ["id", "isOpen", "children", 'aria-labelledby', "grow", "width", "onSelect", "onClose", "initialSelectedItem"]);
         var selectedItemIndex = this.state.selectedItemIndex;
         var cardWidth = grow ? '100%' : width;
-        return (React.createElement(card_1.Card, { style: { display: 'inline-block' }, padding: tokens_1.space.zero, width: cardWidth },
+        return (React.createElement(card_1.Card, { style: { display: 'inline-block' }, padding: tokens_1.space.zero, width: cardWidth, depth: 3 },
             React.createElement(card_1.Card.Body, null,
                 React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem, index) {
                     if (!React.isValidElement(menuItem)) {

package/dist/commonjs/side-panel/lib/SidePanel.d.ts

@@ -50,7 +50,7 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onStateTransition?: (state?: SidePanelTransitionStates) => void;
     /**
-     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 3 depth.
+     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
      *
      * @default 'standard'
      */

package/dist/commonjs/side-panel/lib/SidePanel.js

@@ -63,7 +63,7 @@ var createKeyframes = function (from, to) {
     return react_1.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);
 };
 var containerVariantStyle = {
-    alternate: __assign({ backgroundColor: tokens_1.colors.frenchVanilla100 }, tokens_1.depth[3]),
+    alternate: __assign({ backgroundColor: tokens_1.colors.frenchVanilla100 }, tokens_1.depth[5]),
     standard: {
         backgroundColor: tokens_1.colors.soap100,
     },

package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.js

@@ -26,7 +26,7 @@ import { borderRadius, colors, commonColors, depth, space, type, } from '@workda
 // local components
 import { DropdownMenuItemLink } from './MenuItemLink';
 import { Box } from '@workday/canvas-kit-react/layout';
-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' }));
+var StyledDropdownMenu = styled(Box)(__assign(__assign(__assign({}, type.levels.subtext.large), depth[3]), { 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' }));
 var StyledMenuList = styled('ul')({
     boxSizing: 'border-box',
     listStyle: 'none',

package/dist/es6/menu/lib/Menu.js

@@ -244,7 +244,7 @@ var Menu = /** @class */ (function (_super) {
         var _a = this.props, _b = _a.id, id = _b === void 0 ? this.id : _b, _c = _a.isOpen, isOpen = _c === void 0 ? true : _c, children = _a.children, ariaLabelledby = _a["aria-labelledby"], grow = _a.grow, width = _a.width, onSelect = _a.onSelect, onClose = _a.onClose, initialSelectedItem = _a.initialSelectedItem, elemProps = __rest(_a, ["id", "isOpen", "children", 'aria-labelledby', "grow", "width", "onSelect", "onClose", "initialSelectedItem"]);
         var selectedItemIndex = this.state.selectedItemIndex;
         var cardWidth = grow ? '100%' : width;
-        return (React.createElement(Card, { style: { display: 'inline-block' }, padding: space.zero, width: cardWidth },
+        return (React.createElement(Card, { style: { display: 'inline-block' }, padding: space.zero, width: cardWidth, depth: 3 },
             React.createElement(Card.Body, null,
                 React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem, index) {
                     if (!React.isValidElement(menuItem)) {

package/dist/es6/side-panel/lib/SidePanel.d.ts

@@ -50,7 +50,7 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onStateTransition?: (state?: SidePanelTransitionStates) => void;
     /**
-     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 3 depth.
+     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
      *
      * @default 'standard'
      */

package/dist/es6/side-panel/lib/SidePanel.js

@@ -41,7 +41,7 @@ var createKeyframes = function (from, to) {
     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);
 };
 var containerVariantStyle = {
-    alternate: __assign({ backgroundColor: colors.frenchVanilla100 }, depth[3]),
+    alternate: __assign({ backgroundColor: colors.frenchVanilla100 }, depth[5]),
     standard: {
         backgroundColor: colors.soap100,
     },

package/menu/lib/Menu.tsx

@@ -121,7 +121,7 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
     const cardWidth = grow ? '100%' : width;
 
     return (
-      <Card style={{display: 'inline-block'}} padding={space.zero} width={cardWidth}>
+      <Card style={{display: 'inline-block'}} padding={space.zero} width={cardWidth} depth={3}>
         <Card.Body>
           <List
             role="menu"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "7.0.0-alpha.78-next.6+400ffc0b",
+  "version": "7.0.0-alpha.81-next.9+5f4eca7e",
   "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.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -54,15 +54,15 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.78-next.6+400ffc0b",
+    "@workday/canvas-kit-react": "^7.0.0-alpha.81-next.9+5f4eca7e",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^1.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.78-next.6+400ffc0b",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.81-next.9+5f4eca7e",
     "formik": "^2.2.9",
     "yup": "^0.31.1"
   },
-  "gitHead": "400ffc0b29c2762180758d9b7c1bdc0562cb01e4"
+  "gitHead": "5f4eca7e47351f920cb283c1a1fa16b9ef76b6e5"
 }

package/side-panel/lib/SidePanel.tsx

@@ -56,7 +56,7 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   onStateTransition?: (state?: SidePanelTransitionStates) => void;
   /**
-   * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 3 depth.
+   * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
    *
    * @default 'standard'
    */
@@ -91,7 +91,7 @@ const createKeyframes = (from: number | string, to: number | string) => {
 const containerVariantStyle: Record<SidePanelVariant, CSSObject> = {
   alternate: {
     backgroundColor: colors.frenchVanilla100,
-    ...depth[3],
+    ...depth[5],
   },
   standard: {
     backgroundColor: colors.soap100,

package/ts3.5/dist/commonjs/side-panel/lib/SidePanel.d.ts

@@ -50,7 +50,7 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onStateTransition?: (state?: SidePanelTransitionStates) => void;
     /**
-     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 3 depth.
+     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
      *
      * @default 'standard'
      */

package/ts3.5/dist/es6/side-panel/lib/SidePanel.d.ts

@@ -50,7 +50,7 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onStateTransition?: (state?: SidePanelTransitionStates) => void;
     /**
-     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 3 depth.
+     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
      *
      * @default 'standard'
      */