@workday/canvas-kit-react 8.6.21 → 8.6.22

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 (8) hide show
  1. package/avatar/lib/Avatar.tsx +19 -3
  2. package/dist/commonjs/avatar/lib/Avatar.d.ts +8 -0
  3. package/dist/commonjs/avatar/lib/Avatar.d.ts.map +1 -1
  4. package/dist/commonjs/avatar/lib/Avatar.js +4 -3
  5. package/dist/es6/avatar/lib/Avatar.d.ts +8 -0
  6. package/dist/es6/avatar/lib/Avatar.d.ts.map +1 -1
  7. package/dist/es6/avatar/lib/Avatar.js +4 -3
  8. package/package.json +3 -3
package/avatar/lib/Avatar.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, {useState} from 'react';
2
+ import {Property} from 'csstype';
2
3
  import {styled, focusRing, hideMouseFocus} from '@workday/canvas-kit-react/common';
3
4
  import isPropValid from '@emotion/is-prop-valid';
4
5
  import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
@@ -35,6 +36,13 @@ export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
35
36
  * Will render an `div` tag instead of a `button` when defined.
36
37
  */
37
38
  as?: 'div';
39
+ /**
40
+ * The object-fit CSS property sets how the content of a replaced element,
41
+ * such as an <img> or <video>, should be resized to fit its container.
42
+ * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
43
+ * If your image is not a square, you can use this property to ensure the image is rendered properly.
44
+ */
45
+ objectFit?: Property.ObjectFit;
38
46
  }
39
47
 
40
48
  /**
@@ -107,15 +115,16 @@ const StyledIcon = styled(SystemIconCircle)<{isImageLoaded: boolean}>(
107
115
  })
108
116
  );
109
117
 
110
- const StyledImage = styled('img')<{isLoaded: boolean}>(
118
+ const StyledImage = styled('img')<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
111
119
  {
112
120
  width: '100%',
113
121
  height: '100%',
114
122
  borderRadius: borderRadius.circle,
115
123
  transition: fadeTransition,
116
124
  },
117
- ({isLoaded}) => ({
125
+ ({isLoaded, objectFit}) => ({
118
126
  opacity: isLoaded ? 1 : 0,
127
+ objectFit,
119
128
  })
120
129
  );
121
130
 
@@ -127,6 +136,7 @@ export const Avatar: AvatarOverload = React.forwardRef(
127
136
  altText = 'Avatar',
128
137
  url,
129
138
  onClick,
139
+ objectFit,
130
140
  ...elemProps
131
141
  }: AvatarProps,
132
142
  ref: React.Ref<HTMLButtonElement>
@@ -164,7 +174,13 @@ export const Avatar: AvatarOverload = React.forwardRef(
164
174
  </StyledStack>
165
175
  {url && (
166
176
  <StyledStack size={size}>
167
- <StyledImage src={url} alt={altText} onLoad={loadImage} isLoaded={imageLoaded} />
177
+ <StyledImage
178
+ src={url}
179
+ alt={altText}
180
+ onLoad={loadImage}
181
+ isLoaded={imageLoaded}
182
+ objectFit={objectFit}
183
+ />
168
184
  </StyledStack>
169
185
  )}
170
186
  </StyledContainer>
package/dist/commonjs/avatar/lib/Avatar.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { Property } from 'csstype';
2
3
  import { SystemIconCircleSize } from '@workday/canvas-kit-react/icon';
3
4
  export declare enum AvatarVariant {
4
5
  Light = 0,
@@ -29,6 +30,13 @@ export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
29
30
  * Will render an `div` tag instead of a `button` when defined.
30
31
  */
31
32
  as?: 'div';
33
+ /**
34
+ * The object-fit CSS property sets how the content of a replaced element,
35
+ * such as an <img> or <video>, should be resized to fit its container.
36
+ * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
37
+ * If your image is not a square, you can use this property to ensure the image is rendered properly.
38
+ */
39
+ objectFit?: Property.ObjectFit;
32
40
  }
33
41
  /**
34
42
  * Used to get the props of the div version of an avatar
package/dist/commonjs/avatar/lib/Avatar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;CACZ;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAoEF,eAAO,MAAM,MAAM,EAAE,cAmDb,CAAC"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAqEF,eAAO,MAAM,MAAM,EAAE,cA0Db,CAAC"}
package/dist/commonjs/avatar/lib/Avatar.js CHANGED
@@ -98,13 +98,14 @@ var StyledImage = common_1.styled('img')({
98
98
  borderRadius: tokens_1.borderRadius.circle,
99
99
  transition: fadeTransition,
100
100
  }, function (_a) {
101
- var isLoaded = _a.isLoaded;
101
+ var isLoaded = _a.isLoaded, objectFit = _a.objectFit;
102
102
  return ({
103
103
  opacity: isLoaded ? 1 : 0,
104
+ objectFit: objectFit,
104
105
  });
105
106
  });
106
107
  exports.Avatar = react_1.default.forwardRef(function (_a, ref) {
107
- var _b = _a.variant, variant = _b === void 0 ? AvatarVariant.Light : _b, _c = _a.size, size = _c === void 0 ? icon_1.SystemIconCircleSize.m : _c, _d = _a.altText, altText = _d === void 0 ? 'Avatar' : _d, url = _a.url, onClick = _a.onClick, elemProps = __rest(_a, ["variant", "size", "altText", "url", "onClick"]);
108
+ var _b = _a.variant, variant = _b === void 0 ? AvatarVariant.Light : _b, _c = _a.size, size = _c === void 0 ? icon_1.SystemIconCircleSize.m : _c, _d = _a.altText, altText = _d === void 0 ? 'Avatar' : _d, url = _a.url, onClick = _a.onClick, objectFit = _a.objectFit, elemProps = __rest(_a, ["variant", "size", "altText", "url", "onClick", "objectFit"]);
108
109
  var _e = react_1.useState(false), imageLoaded = _e[0], setImageLoaded = _e[1];
109
110
  var loadImage = function () {
110
111
  if (!imageLoaded) {
@@ -119,7 +120,7 @@ exports.Avatar = react_1.default.forwardRef(function (_a, ref) {
119
120
  react_1.default.createElement(StyledStack, { size: size },
120
121
  react_1.default.createElement(StyledIcon, { icon: canvas_system_icons_web_1.userIcon, background: background, size: size, isImageLoaded: imageLoaded })),
121
122
  url && (react_1.default.createElement(StyledStack, { size: size },
122
- react_1.default.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded })))));
123
+ react_1.default.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded, objectFit: objectFit })))));
123
124
  }); // AvatarProps and forwardRef signatures are incompatible, so we must force cast
124
125
  exports.Avatar.Variant = AvatarVariant;
125
126
  exports.Avatar.Size = icon_1.SystemIconCircleSize;
package/dist/es6/avatar/lib/Avatar.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { Property } from 'csstype';
2
3
  import { SystemIconCircleSize } from '@workday/canvas-kit-react/icon';
3
4
  export declare enum AvatarVariant {
4
5
  Light = 0,
@@ -29,6 +30,13 @@ export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
29
30
  * Will render an `div` tag instead of a `button` when defined.
30
31
  */
31
32
  as?: 'div';
33
+ /**
34
+ * The object-fit CSS property sets how the content of a replaced element,
35
+ * such as an <img> or <video>, should be resized to fit its container.
36
+ * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
37
+ * If your image is not a square, you can use this property to ensure the image is rendered properly.
38
+ */
39
+ objectFit?: Property.ObjectFit;
32
40
  }
33
41
  /**
34
42
  * Used to get the props of the div version of an avatar
package/dist/es6/avatar/lib/Avatar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;CACZ;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAoEF,eAAO,MAAM,MAAM,EAAE,cAmDb,CAAC"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAqEF,eAAO,MAAM,MAAM,EAAE,cA0Db,CAAC"}
package/dist/es6/avatar/lib/Avatar.js CHANGED
@@ -73,13 +73,14 @@ var StyledImage = styled('img')({
73
73
  borderRadius: borderRadius.circle,
74
74
  transition: fadeTransition,
75
75
  }, function (_a) {
76
- var isLoaded = _a.isLoaded;
76
+ var isLoaded = _a.isLoaded, objectFit = _a.objectFit;
77
77
  return ({
78
78
  opacity: isLoaded ? 1 : 0,
79
+ objectFit: objectFit,
79
80
  });
80
81
  });
81
82
  export var Avatar = React.forwardRef(function (_a, ref) {
82
- var _b = _a.variant, variant = _b === void 0 ? AvatarVariant.Light : _b, _c = _a.size, size = _c === void 0 ? SystemIconCircleSize.m : _c, _d = _a.altText, altText = _d === void 0 ? 'Avatar' : _d, url = _a.url, onClick = _a.onClick, elemProps = __rest(_a, ["variant", "size", "altText", "url", "onClick"]);
83
+ var _b = _a.variant, variant = _b === void 0 ? AvatarVariant.Light : _b, _c = _a.size, size = _c === void 0 ? SystemIconCircleSize.m : _c, _d = _a.altText, altText = _d === void 0 ? 'Avatar' : _d, url = _a.url, onClick = _a.onClick, objectFit = _a.objectFit, elemProps = __rest(_a, ["variant", "size", "altText", "url", "onClick", "objectFit"]);
83
84
  var _e = useState(false), imageLoaded = _e[0], setImageLoaded = _e[1];
84
85
  var loadImage = function () {
85
86
  if (!imageLoaded) {
@@ -94,7 +95,7 @@ export var Avatar = React.forwardRef(function (_a, ref) {
94
95
  React.createElement(StyledStack, { size: size },
95
96
  React.createElement(StyledIcon, { icon: userIcon, background: background, size: size, isImageLoaded: imageLoaded })),
96
97
  url && (React.createElement(StyledStack, { size: size },
97
- React.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded })))));
98
+ React.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded, objectFit: objectFit })))));
98
99
  }); // AvatarProps and forwardRef signatures are incompatible, so we must force cast
99
100
  Avatar.Variant = AvatarVariant;
100
101
  Avatar.Size = SystemIconCircleSize;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "8.6.21",
3
+ "version": "8.6.22",
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": "^8.6.21",
52
+ "@workday/canvas-kit-popup-stack": "^8.6.22",
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",
@@ -67,5 +67,5 @@
67
67
  "@workday/canvas-accent-icons-web": "^3.0.0",
68
68
  "@workday/canvas-applet-icons-web": "^2.0.0"
69
69
  },
70
- "gitHead": "0fc986886607ff391c6de3b05d98fc8ab7795efe"
70
+ "gitHead": "d6d7dfd67c9f7e2b2b54f66452f6940955aeb70c"
71
71
  }