@instructure/ui-avatar 8.17.1-snapshot.81 → 8.18.1-snapshot.0

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/CHANGELOG.md +4 -0
  2. package/es/Avatar/index.js +21 -13
  3. package/es/Avatar/theme.js +7 -7
  4. package/lib/Avatar/index.js +21 -13
  5. package/lib/Avatar/theme.js +7 -7
  6. package/package.json +14 -14
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [8.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-avatar
9
+
6
10
  # [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
7
11
 
8
12
  ### Bug Fixes
package/es/Avatar/index.js CHANGED
@@ -69,11 +69,15 @@ let Avatar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
69
69
  }
70
70
 
71
71
  componentDidMount() {
72
- this.props.makeStyles?.(this.state);
72
+ var _this$props$makeStyle, _this$props;
73
+
74
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.state);
73
75
  }
74
76
 
75
77
  componentDidUpdate() {
76
- this.props.makeStyles?.(this.state); // in case the image is unset in an update, show icons/initials again
78
+ var _this$props$makeStyle2, _this$props2;
79
+
80
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.state); // in case the image is unset in an update, show icons/initials again
77
81
 
78
82
  if (this.state.loaded && !this.props.src) {
79
83
  this.setState({
@@ -104,31 +108,35 @@ let Avatar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
104
108
  }
105
109
 
106
110
  renderInitials() {
111
+ var _this$props$styles;
112
+
107
113
  return jsx("span", {
108
- css: this.props.styles?.initials,
114
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.initials,
109
115
  "aria-hidden": "true"
110
116
  }, this.makeInitialsFromName());
111
117
  }
112
118
 
113
119
  renderContent() {
114
- const _this$props = this.props,
115
- renderIcon = _this$props.renderIcon,
116
- styles = _this$props.styles;
120
+ const _this$props3 = this.props,
121
+ renderIcon = _this$props3.renderIcon,
122
+ styles = _this$props3.styles;
117
123
 
118
124
  if (!renderIcon) {
119
125
  return this.renderInitials();
120
126
  }
121
127
 
122
128
  return jsx("span", {
123
- css: styles?.iconSVG
129
+ css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
124
130
  }, callRenderProp(renderIcon));
125
131
  }
126
132
 
127
133
  render() {
128
- const _this$props2 = this.props,
129
- onImageLoaded = _this$props2.onImageLoaded,
130
- styles = _this$props2.styles,
131
- props = _objectWithoutProperties(_this$props2, _excluded);
134
+ var _this$props$styles2;
135
+
136
+ const _this$props4 = this.props,
137
+ onImageLoaded = _this$props4.onImageLoaded,
138
+ styles = _this$props4.styles,
139
+ props = _objectWithoutProperties(_this$props4, _excluded);
132
140
 
133
141
  return jsx(View, Object.assign({}, passthroughProps(props), {
134
142
  "aria-label": this.props.alt ? this.props.alt : void 0,
@@ -136,12 +144,12 @@ let Avatar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
136
144
  as: this.props.as,
137
145
  elementRef: this.handleRef,
138
146
  margin: this.props.margin,
139
- css: styles?.avatar,
147
+ css: styles === null || styles === void 0 ? void 0 : styles.avatar,
140
148
  display: this.props.display
141
149
  }), jsx("img", {
142
150
  // This is visually hidden and is here for loading purposes only
143
151
  src: this.props.src,
144
- css: this.props.styles?.loadImage,
152
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.loadImage,
145
153
  alt: this.props.alt,
146
154
  onLoad: this.handleImageLoaded,
147
155
  "aria-hidden": "true"
package/es/Avatar/theme.js CHANGED
@@ -40,14 +40,14 @@ const generateComponentTheme = theme => {
40
40
  licorice = colors.licorice,
41
41
  ash = colors.ash;
42
42
  const componentVariables = {
43
- background: colors?.backgroundLightest,
44
- borderWidthSmall: borders?.widthSmall,
45
- borderWidthMedium: borders?.widthMedium,
46
- borderColor: colors?.borderMedium,
47
- boxShadowColor: alpha(colors?.backgroundDarkest, 12),
43
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
44
+ borderWidthSmall: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
45
+ borderWidthMedium: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
46
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
47
+ boxShadowColor: alpha(colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest, 12),
48
48
  boxShadowBlur: '1rem',
49
- fontFamily: typography?.fontFamily,
50
- fontWeight: typography?.fontWeightBold,
49
+ fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
50
+ fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
51
51
  // these colors have sufficient contrast with the white background
52
52
  // in the normal and high contrast themes
53
53
  color: brand,
package/lib/Avatar/index.js CHANGED
@@ -63,11 +63,15 @@ let Avatar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
63
63
  }
64
64
 
65
65
  componentDidMount() {
66
- this.props.makeStyles?.(this.state);
66
+ var _this$props$makeStyle, _this$props;
67
+
68
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.state);
67
69
  }
68
70
 
69
71
  componentDidUpdate() {
70
- this.props.makeStyles?.(this.state); // in case the image is unset in an update, show icons/initials again
72
+ var _this$props$makeStyle2, _this$props2;
73
+
74
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.state); // in case the image is unset in an update, show icons/initials again
71
75
 
72
76
  if (this.state.loaded && !this.props.src) {
73
77
  this.setState({
@@ -98,43 +102,47 @@ let Avatar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
98
102
  }
99
103
 
100
104
  renderInitials() {
105
+ var _this$props$styles;
106
+
101
107
  return (0, _emotion.jsx)("span", {
102
- css: this.props.styles?.initials,
108
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.initials,
103
109
  "aria-hidden": "true"
104
110
  }, this.makeInitialsFromName());
105
111
  }
106
112
 
107
113
  renderContent() {
108
- const _this$props = this.props,
109
- renderIcon = _this$props.renderIcon,
110
- styles = _this$props.styles;
114
+ const _this$props3 = this.props,
115
+ renderIcon = _this$props3.renderIcon,
116
+ styles = _this$props3.styles;
111
117
 
112
118
  if (!renderIcon) {
113
119
  return this.renderInitials();
114
120
  }
115
121
 
116
122
  return (0, _emotion.jsx)("span", {
117
- css: styles?.iconSVG
123
+ css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
118
124
  }, (0, _callRenderProp.callRenderProp)(renderIcon));
119
125
  }
120
126
 
121
127
  render() {
122
- const _this$props2 = this.props,
123
- onImageLoaded = _this$props2.onImageLoaded,
124
- styles = _this$props2.styles,
125
- props = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
128
+ var _this$props$styles2;
129
+
130
+ const _this$props4 = this.props,
131
+ onImageLoaded = _this$props4.onImageLoaded,
132
+ styles = _this$props4.styles,
133
+ props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
126
134
  return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
127
135
  "aria-label": this.props.alt ? this.props.alt : void 0,
128
136
  role: this.props.alt ? 'img' : void 0,
129
137
  as: this.props.as,
130
138
  elementRef: this.handleRef,
131
139
  margin: this.props.margin,
132
- css: styles?.avatar,
140
+ css: styles === null || styles === void 0 ? void 0 : styles.avatar,
133
141
  display: this.props.display
134
142
  }), (0, _emotion.jsx)("img", {
135
143
  // This is visually hidden and is here for loading purposes only
136
144
  src: this.props.src,
137
- css: this.props.styles?.loadImage,
145
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.loadImage,
138
146
  alt: this.props.alt,
139
147
  onLoad: this.handleImageLoaded,
140
148
  "aria-hidden": "true"
package/lib/Avatar/theme.js CHANGED
@@ -48,14 +48,14 @@ const generateComponentTheme = theme => {
48
48
  licorice = colors.licorice,
49
49
  ash = colors.ash;
50
50
  const componentVariables = {
51
- background: colors?.backgroundLightest,
52
- borderWidthSmall: borders?.widthSmall,
53
- borderWidthMedium: borders?.widthMedium,
54
- borderColor: colors?.borderMedium,
55
- boxShadowColor: (0, _alpha.alpha)(colors?.backgroundDarkest, 12),
51
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
52
+ borderWidthSmall: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
53
+ borderWidthMedium: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
54
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
55
+ boxShadowColor: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest, 12),
56
56
  boxShadowBlur: '1rem',
57
- fontFamily: typography?.fontFamily,
58
- fontWeight: typography?.fontWeightBold,
57
+ fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
58
+ fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
59
59
  // these colors have sufficient contrast with the white background
60
60
  // in the normal and high contrast themes
61
61
  color: brand,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-avatar",
3
- "version": "8.17.1-snapshot.81+b39b60872",
3
+ "version": "8.18.1-snapshot.0+435c9ae79",
4
4
  "description": "An image or letters that represents a user.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,21 +24,21 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.13.10",
27
- "@instructure/console": "8.17.1-snapshot.81+b39b60872",
28
- "@instructure/emotion": "8.17.1-snapshot.81+b39b60872",
29
- "@instructure/shared-types": "8.17.1-snapshot.81+b39b60872",
30
- "@instructure/ui-icons": "8.17.1-snapshot.81+b39b60872",
31
- "@instructure/ui-react-utils": "8.17.1-snapshot.81+b39b60872",
32
- "@instructure/ui-testable": "8.17.1-snapshot.81+b39b60872",
33
- "@instructure/ui-view": "8.17.1-snapshot.81+b39b60872",
27
+ "@instructure/console": "8.18.1-snapshot.0+435c9ae79",
28
+ "@instructure/emotion": "8.18.1-snapshot.0+435c9ae79",
29
+ "@instructure/shared-types": "8.18.1-snapshot.0+435c9ae79",
30
+ "@instructure/ui-icons": "8.18.1-snapshot.0+435c9ae79",
31
+ "@instructure/ui-react-utils": "8.18.1-snapshot.0+435c9ae79",
32
+ "@instructure/ui-testable": "8.18.1-snapshot.0+435c9ae79",
33
+ "@instructure/ui-view": "8.18.1-snapshot.0+435c9ae79",
34
34
  "prop-types": "^15"
35
35
  },
36
36
  "devDependencies": {
37
- "@instructure/ui-babel-preset": "8.17.1-snapshot.81+b39b60872",
38
- "@instructure/ui-color-utils": "8.17.1-snapshot.81+b39b60872",
39
- "@instructure/ui-test-locator": "8.17.1-snapshot.81+b39b60872",
40
- "@instructure/ui-test-utils": "8.17.1-snapshot.81+b39b60872",
41
- "@instructure/ui-themes": "8.17.1-snapshot.81+b39b60872"
37
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.0+435c9ae79",
38
+ "@instructure/ui-color-utils": "8.18.1-snapshot.0+435c9ae79",
39
+ "@instructure/ui-test-locator": "8.18.1-snapshot.0+435c9ae79",
40
+ "@instructure/ui-test-utils": "8.18.1-snapshot.0+435c9ae79",
41
+ "@instructure/ui-themes": "8.18.1-snapshot.0+435c9ae79"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "react": ">=16.8 <=17"
@@ -47,5 +47,5 @@
47
47
  "access": "public"
48
48
  },
49
49
  "sideEffects": false,
50
- "gitHead": "b39b60872cb51a5e9ba26221adceec498d4ce2fb"
50
+ "gitHead": "435c9ae794c15e2bd103f700f8c4e946d91c1b59"
51
51
  }