@workday/canvas-kit-react 9.1.18 → 9.1.20

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
@@ -79,10 +79,11 @@ const StyledImage = common_1.styled('img')({
79
79
  height: '100%',
80
80
  borderRadius: tokens_1.borderRadius.circle,
81
81
  transition: fadeTransition,
82
- }, ({ isLoaded }) => ({
82
+ }, ({ isLoaded, objectFit }) => ({
83
83
  opacity: isLoaded ? 1 : 0,
84
+ objectFit,
84
85
  }));
85
- exports.Avatar = react_1.default.forwardRef(({ variant = AvatarVariant.Light, size = icon_1.SystemIconCircleSize.m, altText = 'Avatar', url, onClick, ...elemProps }, ref) => {
86
+ exports.Avatar = react_1.default.forwardRef(({ variant = AvatarVariant.Light, size = icon_1.SystemIconCircleSize.m, altText = 'Avatar', url, onClick, objectFit, ...elemProps }, ref) => {
86
87
  const [imageLoaded, setImageLoaded] = react_1.useState(false);
87
88
  const loadImage = () => {
88
89
  if (!imageLoaded) {
@@ -97,7 +98,7 @@ exports.Avatar = react_1.default.forwardRef(({ variant = AvatarVariant.Light, si
97
98
  react_1.default.createElement(StyledStack, { size: size },
98
99
  react_1.default.createElement(StyledIcon, { icon: canvas_system_icons_web_1.userIcon, background: background, size: size, isImageLoaded: imageLoaded })),
99
100
  url && (react_1.default.createElement(StyledStack, { size: size },
100
- react_1.default.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded })))));
101
+ react_1.default.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded, objectFit: objectFit })))));
101
102
  }); // AvatarProps and forwardRef signatures are incompatible, so we must force cast
102
103
  exports.Avatar.Variant = AvatarVariant;
103
104
  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
@@ -54,10 +54,11 @@ const StyledImage = styled('img')({
54
54
  height: '100%',
55
55
  borderRadius: borderRadius.circle,
56
56
  transition: fadeTransition,
57
- }, ({ isLoaded }) => ({
57
+ }, ({ isLoaded, objectFit }) => ({
58
58
  opacity: isLoaded ? 1 : 0,
59
+ objectFit,
59
60
  }));
60
- export const Avatar = React.forwardRef(({ variant = AvatarVariant.Light, size = SystemIconCircleSize.m, altText = 'Avatar', url, onClick, ...elemProps }, ref) => {
61
+ export const Avatar = React.forwardRef(({ variant = AvatarVariant.Light, size = SystemIconCircleSize.m, altText = 'Avatar', url, onClick, objectFit, ...elemProps }, ref) => {
61
62
  const [imageLoaded, setImageLoaded] = useState(false);
62
63
  const loadImage = () => {
63
64
  if (!imageLoaded) {
@@ -72,7 +73,7 @@ export const Avatar = React.forwardRef(({ variant = AvatarVariant.Light, size =
72
73
  React.createElement(StyledStack, { size: size },
73
74
  React.createElement(StyledIcon, { icon: userIcon, background: background, size: size, isImageLoaded: imageLoaded })),
74
75
  url && (React.createElement(StyledStack, { size: size },
75
- React.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded })))));
76
+ React.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded, objectFit: objectFit })))));
76
77
  }); // AvatarProps and forwardRef signatures are incompatible, so we must force cast
77
78
  Avatar.Variant = AvatarVariant;
78
79
  Avatar.Size = SystemIconCircleSize;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "9.1.18",
3
+ "version": "9.1.20",
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": "^9.1.18",
52
+ "@workday/canvas-kit-popup-stack": "^9.1.20",
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",
@@ -66,5 +66,5 @@
66
66
  "@workday/canvas-accent-icons-web": "^3.0.0",
67
67
  "@workday/canvas-applet-icons-web": "^2.0.0"
68
68
  },
69
- "gitHead": "9304dd53defe6773adfef3e3d38e72d0fd6cb62f"
69
+ "gitHead": "bc7ee7591923119553f1bbb2d3fd93c2e4c005d1"
70
70
  }