@workday/canvas-kit-labs-react 8.0.0-alpha.150-next.2 → 8.0.0-alpha.151-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 (6) hide show
  1. package/dist/commonjs/drawer/lib/DrawerHeader.d.ts.map +1 -1
  2. package/dist/commonjs/drawer/lib/DrawerHeader.js +4 -8
  3. package/dist/es6/drawer/lib/DrawerHeader.d.ts.map +1 -1
  4. package/dist/es6/drawer/lib/DrawerHeader.js +5 -9
  5. package/drawer/lib/DrawerHeader.tsx +17 -18
  6. package/package.json +4 -4
package/dist/commonjs/drawer/lib/DrawerHeader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../../../../drawer/lib/DrawerHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAsB,WAAW,EAAa,MAAM,kCAAkC,CAAC;AAI9F,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAsCD,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAC/D,MAAM;CA4Bd"}
1
+ {"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../../../../drawer/lib/DrawerHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAgB,WAAW,EAAa,MAAM,kCAAkC,CAAC;AAKxF,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAwBD,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAC/D,MAAM;CAwCd"}
package/dist/commonjs/drawer/lib/DrawerHeader.js CHANGED
@@ -62,6 +62,7 @@ var React = __importStar(require("react"));
62
62
  var styled_1 = __importDefault(require("@emotion/styled"));
63
63
  var tokens_1 = require("@workday/canvas-kit-react/tokens");
64
64
  var button_1 = require("@workday/canvas-kit-react/button");
65
+ var text_1 = require("@workday/canvas-kit-react/text");
65
66
  var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
66
67
  var headerHeight = 56;
67
68
  var HeaderContainer = styled_1.default('div')({
@@ -81,12 +82,6 @@ var HeaderContainer = styled_1.default('div')({
81
82
  backgroundColor: headerColor,
82
83
  });
83
84
  });
84
- var HeaderTitle = styled_1.default('h4')(__assign(__assign({}, tokens_1.type.levels.body.small), { fontWeight: tokens_1.type.properties.fontWeights.bold, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', paddingRight: tokens_1.space.xxxs }), function (_a) {
85
- var inverse = _a.inverse;
86
- return ({
87
- color: inverse ? tokens_1.colors.frenchVanilla100 : tokens_1.typeColors.heading,
88
- });
89
- });
90
85
  var CloseButton = styled_1.default(button_1.TertiaryButton)({
91
86
  margin: '-8px',
92
87
  });
@@ -97,9 +92,10 @@ var DrawerHeader = /** @class */ (function (_super) {
97
92
  }
98
93
  DrawerHeader.prototype.render = function () {
99
94
  var _a = this.props, _b = _a.closeIconAriaLabel, closeIconAriaLabel = _b === void 0 ? 'Close' : _b, _c = _a.headerColor, headerColor = _c === void 0 ? tokens_1.colors.soap100 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? tokens_1.colors.soap500 : _d, _e = _a.inverse, inverse = _e === void 0 ? false : _e, onClose = _a.onClose, title = _a.title, id = _a.id, elemProps = __rest(_a, ["closeIconAriaLabel", "headerColor", "borderColor", "inverse", "onClose", "title", "id"]);
95
+ var variant = inverse ? 'inverse' : undefined;
100
96
  return (React.createElement(HeaderContainer, __assign({ borderColor: borderColor }, elemProps, { headerColor: headerColor }),
101
- React.createElement(HeaderTitle, { id: id, inverse: inverse, title: title }, title),
102
- onClose && closeIconAriaLabel && (React.createElement(CloseButton, { variant: inverse ? 'inverse' : undefined, onClick: onClose, "aria-label": closeIconAriaLabel, icon: canvas_system_icons_web_1.xIcon }))));
97
+ React.createElement(text_1.Text, { as: "h4", typeLevel: "body.small", title: title, fontWeight: "bold", color: tokens_1.typeColors.heading, variant: variant, paddingInlineEnd: "xxxs", whiteSpace: "nowrap", textOverflow: "ellipsis", overflow: "hidden" }, title),
98
+ onClose && closeIconAriaLabel && (React.createElement(CloseButton, { variant: variant, onClick: onClose, "aria-label": closeIconAriaLabel, icon: canvas_system_icons_web_1.xIcon }))));
103
99
  };
104
100
  return DrawerHeader;
105
101
  }(React.Component));
package/dist/es6/drawer/lib/DrawerHeader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../../../../drawer/lib/DrawerHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAsB,WAAW,EAAa,MAAM,kCAAkC,CAAC;AAI9F,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAsCD,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAC/D,MAAM;CA4Bd"}
1
+ {"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../../../../drawer/lib/DrawerHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAgB,WAAW,EAAa,MAAM,kCAAkC,CAAC;AAKxF,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAwBD,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAC/D,MAAM;CAwCd"}
package/dist/es6/drawer/lib/DrawerHeader.js CHANGED
@@ -35,8 +35,9 @@ var __rest = (this && this.__rest) || function (s, e) {
35
35
  };
36
36
  import * as React from 'react';
37
37
  import styled from '@emotion/styled';
38
- import { colors, space, type, typeColors } from '@workday/canvas-kit-react/tokens';
38
+ import { colors, space, typeColors } from '@workday/canvas-kit-react/tokens';
39
39
  import { TertiaryButton } from '@workday/canvas-kit-react/button';
40
+ import { Text } from '@workday/canvas-kit-react/text';
40
41
  import { xIcon } from '@workday/canvas-system-icons-web';
41
42
  var headerHeight = 56;
42
43
  var HeaderContainer = styled('div')({
@@ -56,12 +57,6 @@ var HeaderContainer = styled('div')({
56
57
  backgroundColor: headerColor,
57
58
  });
58
59
  });
59
- var HeaderTitle = styled('h4')(__assign(__assign({}, type.levels.body.small), { fontWeight: type.properties.fontWeights.bold, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', paddingRight: space.xxxs }), function (_a) {
60
- var inverse = _a.inverse;
61
- return ({
62
- color: inverse ? colors.frenchVanilla100 : typeColors.heading,
63
- });
64
- });
65
60
  var CloseButton = styled(TertiaryButton)({
66
61
  margin: '-8px',
67
62
  });
@@ -72,9 +67,10 @@ var DrawerHeader = /** @class */ (function (_super) {
72
67
  }
73
68
  DrawerHeader.prototype.render = function () {
74
69
  var _a = this.props, _b = _a.closeIconAriaLabel, closeIconAriaLabel = _b === void 0 ? 'Close' : _b, _c = _a.headerColor, headerColor = _c === void 0 ? colors.soap100 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? colors.soap500 : _d, _e = _a.inverse, inverse = _e === void 0 ? false : _e, onClose = _a.onClose, title = _a.title, id = _a.id, elemProps = __rest(_a, ["closeIconAriaLabel", "headerColor", "borderColor", "inverse", "onClose", "title", "id"]);
70
+ var variant = inverse ? 'inverse' : undefined;
75
71
  return (React.createElement(HeaderContainer, __assign({ borderColor: borderColor }, elemProps, { headerColor: headerColor }),
76
- React.createElement(HeaderTitle, { id: id, inverse: inverse, title: title }, title),
77
- onClose && closeIconAriaLabel && (React.createElement(CloseButton, { variant: inverse ? 'inverse' : undefined, onClick: onClose, "aria-label": closeIconAriaLabel, icon: xIcon }))));
72
+ React.createElement(Text, { as: "h4", typeLevel: "body.small", title: title, fontWeight: "bold", color: typeColors.heading, variant: variant, paddingInlineEnd: "xxxs", whiteSpace: "nowrap", textOverflow: "ellipsis", overflow: "hidden" }, title),
73
+ onClose && closeIconAriaLabel && (React.createElement(CloseButton, { variant: variant, onClick: onClose, "aria-label": closeIconAriaLabel, icon: xIcon }))));
78
74
  };
79
75
  return DrawerHeader;
80
76
  }(React.Component));
package/drawer/lib/DrawerHeader.tsx CHANGED
@@ -1,7 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import styled from '@emotion/styled';
3
- import {colors, space, type, CanvasColor, typeColors} from '@workday/canvas-kit-react/tokens';
3
+ import {colors, space, CanvasColor, typeColors} from '@workday/canvas-kit-react/tokens';
4
4
  import {TertiaryButton} from '@workday/canvas-kit-react/button';
5
+ import {Text} from '@workday/canvas-kit-react/text';
5
6
  import {xIcon} from '@workday/canvas-system-icons-web';
6
7
 
7
8
  export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -55,20 +56,6 @@ const HeaderContainer = styled('div')<Pick<DrawerHeaderProps, 'headerColor' | 'b
55
56
  })
56
57
  );
57
58
 
58
- const HeaderTitle = styled('h4')<Pick<DrawerHeaderProps, 'inverse'>>(
59
- {
60
- ...type.levels.body.small,
61
- fontWeight: type.properties.fontWeights.bold,
62
- whiteSpace: 'nowrap',
63
- textOverflow: 'ellipsis',
64
- overflow: 'hidden',
65
- paddingRight: space.xxxs,
66
- },
67
- ({inverse}) => ({
68
- color: inverse ? colors.frenchVanilla100 : typeColors.heading,
69
- })
70
- );
71
-
72
59
  const CloseButton = styled(TertiaryButton)({
73
60
  margin: '-8px', // for inverse and plain button, we always want this margin
74
61
  });
@@ -85,15 +72,27 @@ export class DrawerHeader extends React.Component<DrawerHeaderProps, {}> {
85
72
  id,
86
73
  ...elemProps
87
74
  } = this.props;
75
+ const variant = inverse ? 'inverse' : undefined;
88
76
 
89
77
  return (
90
78
  <HeaderContainer borderColor={borderColor} {...elemProps} headerColor={headerColor}>
91
- <HeaderTitle id={id} inverse={inverse} title={title}>
79
+ <Text
80
+ as="h4"
81
+ typeLevel="body.small"
82
+ title={title}
83
+ fontWeight="bold"
84
+ color={typeColors.heading}
85
+ variant={variant}
86
+ paddingInlineEnd="xxxs"
87
+ whiteSpace="nowrap"
88
+ textOverflow="ellipsis"
89
+ overflow="hidden"
90
+ >
92
91
  {title}
93
- </HeaderTitle>
92
+ </Text>
94
93
  {onClose && closeIconAriaLabel && (
95
94
  <CloseButton
96
- variant={inverse ? 'inverse' : undefined}
95
+ variant={variant}
97
96
  onClick={onClose}
98
97
  aria-label={closeIconAriaLabel}
99
98
  icon={xIcon}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-labs-react",
3
- "version": "8.0.0-alpha.150-next.2+b0c3f340",
3
+ "version": "8.0.0-alpha.151-next.3+548c0a40",
4
4
  "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -46,8 +46,8 @@
46
46
  "dependencies": {
47
47
  "@emotion/react": "^11.7.1",
48
48
  "@emotion/styled": "^11.6.0",
49
- "@workday/canvas-kit-preview-react": "^8.0.0-alpha.150-next.2+b0c3f340",
50
- "@workday/canvas-kit-react": "^8.0.0-alpha.150-next.2+b0c3f340",
49
+ "@workday/canvas-kit-preview-react": "^8.0.0-alpha.151-next.3+548c0a40",
50
+ "@workday/canvas-kit-react": "^8.0.0-alpha.151-next.3+548c0a40",
51
51
  "@workday/canvas-system-icons-web": "^3.0.0",
52
52
  "chroma-js": "^2.1.0",
53
53
  "lodash.flatten": "^4.4.0",
@@ -56,5 +56,5 @@
56
56
  "devDependencies": {
57
57
  "@types/lodash.flatten": "^4.4.6"
58
58
  },
59
- "gitHead": "b0c3f340ec8e06d39bed5d992b23a1b36892106f"
59
+ "gitHead": "548c0a4090f25b1feeabaf1c1288fec4539e7d0a"
60
60
  }