@workday/canvas-kit-react 7.3.0 → 7.3.2

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 (17) hide show
  1. package/dist/commonjs/popup/lib/PopupBody.js +1 -1
  2. package/dist/commonjs/popup/lib/PopupCard.d.ts +3 -2
  3. package/dist/commonjs/popup/lib/PopupCard.d.ts.map +1 -1
  4. package/dist/commonjs/popup/lib/PopupCard.js +3 -3
  5. package/dist/commonjs/popup/lib/PopupHeading.js +1 -1
  6. package/dist/commonjs/toast/lib/Toast.js +1 -1
  7. package/dist/es6/popup/lib/PopupBody.js +1 -1
  8. package/dist/es6/popup/lib/PopupCard.d.ts +3 -2
  9. package/dist/es6/popup/lib/PopupCard.d.ts.map +1 -1
  10. package/dist/es6/popup/lib/PopupCard.js +4 -4
  11. package/dist/es6/popup/lib/PopupHeading.js +1 -1
  12. package/dist/es6/toast/lib/Toast.js +1 -1
  13. package/package.json +3 -3
  14. package/popup/lib/PopupBody.tsx +1 -1
  15. package/popup/lib/PopupCard.tsx +6 -6
  16. package/popup/lib/PopupHeading.tsx +1 -1
  17. package/toast/lib/Toast.tsx +1 -1
package/dist/commonjs/popup/lib/PopupBody.js CHANGED
@@ -39,5 +39,5 @@ exports.PopupBody = common_1.createSubcomponent('div')({
39
39
  displayName: 'Popup.Body',
40
40
  modelHook: hooks_1.usePopupModel,
41
41
  })(function (elemProps) {
42
- return React.createElement(card_1.Card.Body, __assign({ overflowY: "auto" }, elemProps));
42
+ return React.createElement(card_1.Card.Body, __assign({ overflowY: "auto", padding: "xxs" }, elemProps));
43
43
  });
package/dist/commonjs/popup/lib/PopupCard.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import { Card } from '@workday/canvas-kit-react/card';
3
3
  import { ExtractProps } from '@workday/canvas-kit-react/common';
4
- import { StackStyleProps } from '@workday/canvas-kit-react/layout';
5
- export interface PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
4
+ import { FlexStyleProps } from '@workday/canvas-kit-react/layout';
5
+ export declare type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
6
+ export interface PopupCardProps extends FlexAndBoxProps {
6
7
  children?: React.ReactNode;
7
8
  }
8
9
  export declare const PopupCard: import("../../common").ElementComponentM<"div", PopupCardProps, {
package/dist/commonjs/popup/lib/PopupCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAQ,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAKxE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAgCpB,CAAC"}
1
+ {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAO,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAKtE,oBAAY,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA+BpB,CAAC"}
package/dist/commonjs/popup/lib/PopupCard.js CHANGED
@@ -83,9 +83,9 @@ exports.PopupCard = common_1.createSubcomponent('div')({
83
83
  var transformOrigin = React.useMemo(function () {
84
84
  return getTransformFromPlacement_1.getTransformFromPlacement(model.state.placement || 'bottom');
85
85
  }, [model.state.placement]);
86
- // As is a Stack that will render an element of `Element`
87
- var As = common_1.useConstant(function () { return layout_1.Stack.as(Element); });
88
- return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 5, maxWidth: "calc(100vw - " + tokens_1.space.l + ")", spacing: 0, flexDirection: "column", minHeight: 0, maxHeight: "calc(100vh - " + (elemProps.margin ? tokens_1.space[elemProps.margin] || elemProps.margin : tokens_1.space.xl) + " * 2)", overflowY: "auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
86
+ // As is a Flex that will render an element of `Element`
87
+ var As = common_1.useConstant(function () { return layout_1.Flex.as(Element); });
88
+ return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", depth: 5, maxWidth: "calc(100vw - " + tokens_1.space.l + ")", flexDirection: "column", minHeight: 0, padding: "m", maxHeight: "calc(100vh - " + (elemProps.margin ? tokens_1.space[elemProps.margin] || elemProps.margin : tokens_1.space.xl) + " * 2)", overflowY: "auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
89
89
  }, elemProps), children));
90
90
  });
91
91
  var templateObject_1;
package/dist/commonjs/popup/lib/PopupHeading.js CHANGED
@@ -52,5 +52,5 @@ exports.PopupHeading = common_1.createSubcomponent('h2')({
52
52
  elemPropsHook: hooks_1.usePopupHeading,
53
53
  })(function (_a, Element) {
54
54
  var children = _a.children, elemProps = __rest(_a, ["children"]);
55
- return (React.createElement(card_1.Card.Heading, __assign({ as: Element, marginBottom: "s" }, elemProps), children));
55
+ return (React.createElement(card_1.Card.Heading, __assign({ as: Element, marginBottom: "xxs", padding: "xxs" }, elemProps), children));
56
56
  });
package/dist/commonjs/toast/lib/Toast.js CHANGED
@@ -74,7 +74,7 @@ exports.Toast = common_1.createComponent('div')({
74
74
  iconColor = _c === void 0 ? tokens_1.colors.greenApple400 : _c, onClose = _a.onClose, onActionClick = _a.onActionClick, actionText = _a.actionText, children = _a.children, elemProps = __rest(_a, ["icon", "iconColor", "onClose", "onActionClick", "actionText", "children"]);
75
75
  var isInteractive = onClose || onActionClick;
76
76
  var isError = iconColor === tokens_1.colors.cinnamon500 && icon === canvas_system_icons_web_1.exclamationCircleIcon;
77
- return (React.createElement(popup_1.Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", depth: 5, role: isInteractive ? 'dialog' : isError ? 'alert' : 'status', "aria-live": isInteractive ? 'off' : isError ? 'assertive' : 'polite', "aria-atomic": !isInteractive }, elemProps),
77
+ return (React.createElement(popup_1.Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, depth: 5, role: isInteractive ? 'dialog' : isError ? 'alert' : 'status', "aria-live": isInteractive ? 'off' : isError ? 'assertive' : 'polite', "aria-atomic": !isInteractive, padding: "xxs" }, elemProps),
78
78
  onClose && React.createElement(popup_1.Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
79
79
  React.createElement(popup_1.Popup.Body, null,
80
80
  React.createElement(ToastContentContainer, { onClose: onClose },
package/dist/es6/popup/lib/PopupBody.js CHANGED
@@ -17,5 +17,5 @@ export var PopupBody = createSubcomponent('div')({
17
17
  displayName: 'Popup.Body',
18
18
  modelHook: usePopupModel,
19
19
  })(function (elemProps) {
20
- return React.createElement(Card.Body, __assign({ overflowY: "auto" }, elemProps));
20
+ return React.createElement(Card.Body, __assign({ overflowY: "auto", padding: "xxs" }, elemProps));
21
21
  });
package/dist/es6/popup/lib/PopupCard.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import { Card } from '@workday/canvas-kit-react/card';
3
3
  import { ExtractProps } from '@workday/canvas-kit-react/common';
4
- import { StackStyleProps } from '@workday/canvas-kit-react/layout';
5
- export interface PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
4
+ import { FlexStyleProps } from '@workday/canvas-kit-react/layout';
5
+ export declare type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
6
+ export interface PopupCardProps extends FlexAndBoxProps {
6
7
  children?: React.ReactNode;
7
8
  }
8
9
  export declare const PopupCard: import("../../common").ElementComponentM<"div", PopupCardProps, {
package/dist/es6/popup/lib/PopupCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAQ,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAKxE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAgCpB,CAAC"}
1
+ {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAO,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAKtE,oBAAY,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA+BpB,CAAC"}
package/dist/es6/popup/lib/PopupCard.js CHANGED
@@ -29,7 +29,7 @@ import { keyframes } from '@emotion/react';
29
29
  import { Card } from '@workday/canvas-kit-react/card';
30
30
  import { space, type } from '@workday/canvas-kit-react/tokens';
31
31
  import { styled, getTranslateFromOrigin, useConstant, createSubcomponent, } from '@workday/canvas-kit-react/common';
32
- import { Stack } from '@workday/canvas-kit-react/layout';
32
+ import { Flex } from '@workday/canvas-kit-react/layout';
33
33
  import { getTransformFromPlacement } from './getTransformFromPlacement';
34
34
  import { usePopupCard, usePopupModel } from './hooks';
35
35
  var popupAnimation = function (transformOrigin) {
@@ -61,9 +61,9 @@ export var PopupCard = createSubcomponent('div')({
61
61
  var transformOrigin = React.useMemo(function () {
62
62
  return getTransformFromPlacement(model.state.placement || 'bottom');
63
63
  }, [model.state.placement]);
64
- // As is a Stack that will render an element of `Element`
65
- var As = useConstant(function () { return Stack.as(Element); });
66
- return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 5, maxWidth: "calc(100vw - " + space.l + ")", spacing: 0, flexDirection: "column", minHeight: 0, maxHeight: "calc(100vh - " + (elemProps.margin ? space[elemProps.margin] || elemProps.margin : space.xl) + " * 2)", overflowY: "auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
64
+ // As is a Flex that will render an element of `Element`
65
+ var As = useConstant(function () { return Flex.as(Element); });
66
+ return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", depth: 5, maxWidth: "calc(100vw - " + space.l + ")", flexDirection: "column", minHeight: 0, padding: "m", maxHeight: "calc(100vh - " + (elemProps.margin ? space[elemProps.margin] || elemProps.margin : space.xl) + " * 2)", overflowY: "auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
67
67
  }, elemProps), children));
68
68
  });
69
69
  var templateObject_1;
package/dist/es6/popup/lib/PopupHeading.js CHANGED
@@ -30,5 +30,5 @@ export var PopupHeading = createSubcomponent('h2')({
30
30
  elemPropsHook: usePopupHeading,
31
31
  })(function (_a, Element) {
32
32
  var children = _a.children, elemProps = __rest(_a, ["children"]);
33
- return (React.createElement(Card.Heading, __assign({ as: Element, marginBottom: "s" }, elemProps), children));
33
+ return (React.createElement(Card.Heading, __assign({ as: Element, marginBottom: "xxs", padding: "xxs" }, elemProps), children));
34
34
  });
package/dist/es6/toast/lib/Toast.js CHANGED
@@ -52,7 +52,7 @@ export var Toast = createComponent('div')({
52
52
  iconColor = _c === void 0 ? colors.greenApple400 : _c, onClose = _a.onClose, onActionClick = _a.onActionClick, actionText = _a.actionText, children = _a.children, elemProps = __rest(_a, ["icon", "iconColor", "onClose", "onActionClick", "actionText", "children"]);
53
53
  var isInteractive = onClose || onActionClick;
54
54
  var isError = iconColor === colors.cinnamon500 && icon === exclamationCircleIcon;
55
- return (React.createElement(Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", depth: 5, role: isInteractive ? 'dialog' : isError ? 'alert' : 'status', "aria-live": isInteractive ? 'off' : isError ? 'assertive' : 'polite', "aria-atomic": !isInteractive }, elemProps),
55
+ return (React.createElement(Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, depth: 5, role: isInteractive ? 'dialog' : isError ? 'alert' : 'status', "aria-live": isInteractive ? 'off' : isError ? 'assertive' : 'polite', "aria-atomic": !isInteractive, padding: "xxs" }, elemProps),
56
56
  onClose && React.createElement(Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
57
57
  React.createElement(Popup.Body, null,
58
58
  React.createElement(ToastContentContainer, { onClose: onClose },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "7.3.0",
3
+ "version": "7.3.2",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -49,7 +49,7 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^7.3.0",
52
+ "@workday/canvas-kit-popup-stack": "^7.3.2",
53
53
  "@workday/canvas-system-icons-web": "^3.0.0",
54
54
  "@workday/design-assets-types": "^0.2.8",
55
55
  "chroma-js": "^2.1.0",
@@ -68,5 +68,5 @@
68
68
  "@workday/canvas-accent-icons-web": "^3.0.0",
69
69
  "@workday/canvas-applet-icons-web": "^2.0.0"
70
70
  },
71
- "gitHead": "ea5edda9b7a9f66cf7238bfdc1de77ad822db7b2"
71
+ "gitHead": "90ff2f44000d4993ef13d6aea0ffcc2071cbe523"
72
72
  }
package/popup/lib/PopupBody.tsx CHANGED
@@ -8,5 +8,5 @@ export const PopupBody = createSubcomponent('div')({
8
8
  displayName: 'Popup.Body',
9
9
  modelHook: usePopupModel,
10
10
  })<ExtractProps<typeof Card.Body>>(elemProps => {
11
- return <Card.Body overflowY="auto" {...elemProps} />;
11
+ return <Card.Body overflowY="auto" padding="xxs" {...elemProps} />;
12
12
  });
package/popup/lib/PopupCard.tsx CHANGED
@@ -12,12 +12,13 @@ import {
12
12
  useConstant,
13
13
  createSubcomponent,
14
14
  } from '@workday/canvas-kit-react/common';
15
- import {Stack, StackStyleProps} from '@workday/canvas-kit-react/layout';
15
+ import {Flex, FlexStyleProps} from '@workday/canvas-kit-react/layout';
16
16
 
17
17
  import {getTransformFromPlacement} from './getTransformFromPlacement';
18
18
  import {usePopupCard, usePopupModel} from './hooks';
19
19
 
20
- export interface PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
20
+ export type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
21
+ export interface PopupCardProps extends FlexAndBoxProps {
21
22
  children?: React.ReactNode;
22
23
  }
23
24
 
@@ -63,20 +64,19 @@ export const PopupCard = createSubcomponent('div')({
63
64
  return getTransformFromPlacement(model.state.placement || 'bottom');
64
65
  }, [model.state.placement]);
65
66
 
66
- // As is a Stack that will render an element of `Element`
67
- const As = useConstant(() => Stack.as(Element));
67
+ // As is a Flex that will render an element of `Element`
68
+ const As = useConstant(() => Flex.as(Element));
68
69
 
69
70
  return (
70
71
  <StyledPopupCard
71
72
  as={As}
72
73
  transformOrigin={transformOrigin}
73
74
  position="relative"
74
- padding="l"
75
75
  depth={5}
76
76
  maxWidth={`calc(100vw - ${space.l})`}
77
- spacing={0}
78
77
  flexDirection="column"
79
78
  minHeight={0}
79
+ padding="m"
80
80
  maxHeight={`calc(100vh - ${
81
81
  elemProps.margin ? space[elemProps.margin as CanvasSpaceKeys] || elemProps.margin : space.xl
82
82
  } * 2)`}
package/popup/lib/PopupHeading.tsx CHANGED
@@ -15,7 +15,7 @@ export const PopupHeading = createSubcomponent('h2')({
15
15
  elemPropsHook: usePopupHeading,
16
16
  })<PopupHeadingProps>(({children, ...elemProps}, Element) => {
17
17
  return (
18
- <Card.Heading as={Element} marginBottom="s" {...elemProps}>
18
+ <Card.Heading as={Element} marginBottom="xxs" padding="xxs" {...elemProps}>
19
19
  {children}
20
20
  </Card.Heading>
21
21
  );
package/toast/lib/Toast.tsx CHANGED
@@ -92,11 +92,11 @@ export const Toast = createComponent('div')({
92
92
  ref={ref}
93
93
  as={Element}
94
94
  width={toastWidth}
95
- padding="s"
96
95
  depth={5}
97
96
  role={isInteractive ? 'dialog' : isError ? 'alert' : 'status'}
98
97
  aria-live={isInteractive ? 'off' : isError ? 'assertive' : 'polite'}
99
98
  aria-atomic={!isInteractive}
99
+ padding="xxs"
100
100
  {...elemProps}
101
101
  >
102
102
  {onClose && <Popup.CloseIcon aria-label="Close" onClick={onClose} size="small" />}