@instructure/ui-avatar 8.49.1-snapshot-7 → 8.49.1-snapshot-9

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.49.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.49.0...v8.49.1-snapshot-7) (2023-12-05)
+## [8.49.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v8.49.0...v8.49.1-snapshot-9) (2023-12-05)
 
-**Note:** Version bump only for package @instructure/ui-avatar
+
+### Features
+
+* **ui-avatar:** add showBorder prop to Avatar ([693ea76](https://github.com/instructure/instructure-ui/commit/693ea767282824272360fbdbcea57ad5152fbd0a))
 
 
 

package/es/Avatar/__examples__/Avatar.examples.js

@@ -36,6 +36,9 @@ export default {
     if (props.color !== 'default' && props.size !== 'medium') {
       return true;
     }
+    if (props.src && props.showBorder === 'never' || !props.src && props.showBorder === 'always') {
+      return true;
+    }
     if (props.renderIcon && props.src) {
       return true;
     }

package/es/Avatar/index.js

@@ -136,6 +136,7 @@ let Avatar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
   size: 'medium',
   color: 'default',
   hasInverseColor: false,
+  showBorder: 'auto',
   shape: 'circle',
   display: 'inline-block',
   onImageLoaded: _event => {}

package/es/Avatar/props.js

@@ -31,6 +31,7 @@ const propTypes = {
   size: PropTypes.oneOf(['auto', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
   color: PropTypes.oneOf(['default', 'shamrock', 'barney', 'crimson', 'fire', 'licorice', 'ash']),
   hasInverseColor: PropTypes.bool,
+  showBorder: PropTypes.oneOf(['auto', 'always', 'never']),
   shape: PropTypes.oneOf(['circle', 'rectangle']),
   margin: ThemeablePropTypes.spacing,
   display: PropTypes.oneOf(['inline-block', 'block']),
@@ -39,5 +40,5 @@ const propTypes = {
   elementRef: PropTypes.func,
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
-const allowedProps = ['name', 'src', 'alt', 'size', 'color', 'hasInverseColor', 'shape', 'margin', 'display', 'onImageLoaded', 'as', 'elementRef', 'renderIcon'];
+const allowedProps = ['name', 'src', 'alt', 'size', 'color', 'hasInverseColor', 'shape', 'margin', 'display', 'onImageLoaded', 'as', 'elementRef', 'renderIcon', 'showBorder'];
 export { propTypes, allowedProps };

package/es/Avatar/styles.js

@@ -37,7 +37,8 @@ const generateStyle = (componentTheme, props, state) => {
     color = props.color,
     hasInverseColor = props.hasInverseColor,
     shape = props.shape,
-    src = props.src;
+    src = props.src,
+    showBorder = props.showBorder;
   const loaded = state.loaded;
   const sizeStyles = {
     auto: {
@@ -109,21 +110,26 @@ const generateStyle = (componentTheme, props, state) => {
       overflow: 'hidden',
       lineHeight: 0,
       textAlign: 'center',
+      borderStyle: 'solid',
+      borderColor: componentTheme.borderColor,
       ...sizeStyles[size],
       ...variantStyles[shape],
       ...(loaded ? {
         backgroundImage: `url('${src}')`,
-        border: 0,
+        ...(showBorder !== 'always' && {
+          border: 0
+        }),
         boxShadow: `inset 0 0 ${componentTheme.boxShadowBlur} 0 ${componentTheme.boxShadowColor}`
       } : {
         backgroundImage: void 0,
-        borderStyle: 'solid',
-        borderColor: componentTheme.borderColor,
         ...(hasInverseColor && {
           border: 0,
           padding: sizeStyles[size].borderWidth,
           backgroundClip: 'border-box'
         })
+      }),
+      ...(showBorder === 'never' && {
+        border: 0
       })
     },
     initials: {

package/lib/Avatar/__examples__/Avatar.examples.js

@@ -42,6 +42,9 @@ var _default = exports.default = {
     if (props.color !== 'default' && props.size !== 'medium') {
       return true;
     }
+    if (props.src && props.showBorder === 'never' || !props.src && props.showBorder === 'always') {
+      return true;
+    }
     if (props.renderIcon && props.src) {
       return true;
     }

package/lib/Avatar/index.js

@@ -143,6 +143,7 @@ let Avatar = exports.Avatar = (_dec = (0, _emotion.withStyle)(_styles.default, _
   size: 'medium',
   color: 'default',
   hasInverseColor: false,
+  showBorder: 'auto',
   shape: 'circle',
   display: 'inline-block',
   onImageLoaded: _event => {}

package/lib/Avatar/props.js

@@ -38,6 +38,7 @@ const propTypes = exports.propTypes = {
   size: _propTypes.default.oneOf(['auto', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
   color: _propTypes.default.oneOf(['default', 'shamrock', 'barney', 'crimson', 'fire', 'licorice', 'ash']),
   hasInverseColor: _propTypes.default.bool,
+  showBorder: _propTypes.default.oneOf(['auto', 'always', 'never']),
   shape: _propTypes.default.oneOf(['circle', 'rectangle']),
   margin: _emotion.ThemeablePropTypes.spacing,
   display: _propTypes.default.oneOf(['inline-block', 'block']),
@@ -46,4 +47,4 @@ const propTypes = exports.propTypes = {
   elementRef: _propTypes.default.func,
   renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
 };
-const allowedProps = exports.allowedProps = ['name', 'src', 'alt', 'size', 'color', 'hasInverseColor', 'shape', 'margin', 'display', 'onImageLoaded', 'as', 'elementRef', 'renderIcon'];
+const allowedProps = exports.allowedProps = ['name', 'src', 'alt', 'size', 'color', 'hasInverseColor', 'shape', 'margin', 'display', 'onImageLoaded', 'as', 'elementRef', 'renderIcon', 'showBorder'];

package/lib/Avatar/styles.js

@@ -43,7 +43,8 @@ const generateStyle = (componentTheme, props, state) => {
     color = props.color,
     hasInverseColor = props.hasInverseColor,
     shape = props.shape,
-    src = props.src;
+    src = props.src,
+    showBorder = props.showBorder;
   const loaded = state.loaded;
   const sizeStyles = {
     auto: {
@@ -115,21 +116,26 @@ const generateStyle = (componentTheme, props, state) => {
       overflow: 'hidden',
       lineHeight: 0,
       textAlign: 'center',
+      borderStyle: 'solid',
+      borderColor: componentTheme.borderColor,
       ...sizeStyles[size],
       ...variantStyles[shape],
       ...(loaded ? {
         backgroundImage: `url('${src}')`,
-        border: 0,
+        ...(showBorder !== 'always' && {
+          border: 0
+        }),
         boxShadow: `inset 0 0 ${componentTheme.boxShadowBlur} 0 ${componentTheme.boxShadowColor}`
       } : {
         backgroundImage: void 0,
-        borderStyle: 'solid',
-        borderColor: componentTheme.borderColor,
         ...(hasInverseColor && {
           border: 0,
           padding: sizeStyles[size].borderWidth,
           backgroundClip: 'border-box'
         })
+      }),
+      ...(showBorder === 'never' && {
+        border: 0
       })
     },
     initials: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-avatar",
-  "version": "8.49.1-snapshot-7",
+  "version": "8.49.1-snapshot-9",
   "description": "An image or letters that represents a user.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,22 +24,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.49.1-snapshot-7",
-    "@instructure/emotion": "8.49.1-snapshot-7",
-    "@instructure/shared-types": "8.49.1-snapshot-7",
-    "@instructure/ui-icons": "8.49.1-snapshot-7",
-    "@instructure/ui-react-utils": "8.49.1-snapshot-7",
-    "@instructure/ui-testable": "8.49.1-snapshot-7",
-    "@instructure/ui-view": "8.49.1-snapshot-7",
+    "@instructure/console": "8.49.1-snapshot-9",
+    "@instructure/emotion": "8.49.1-snapshot-9",
+    "@instructure/shared-types": "8.49.1-snapshot-9",
+    "@instructure/ui-icons": "8.49.1-snapshot-9",
+    "@instructure/ui-react-utils": "8.49.1-snapshot-9",
+    "@instructure/ui-testable": "8.49.1-snapshot-9",
+    "@instructure/ui-view": "8.49.1-snapshot-9",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "8.49.1-snapshot-7",
-    "@instructure/ui-babel-preset": "8.49.1-snapshot-7",
-    "@instructure/ui-color-utils": "8.49.1-snapshot-7",
-    "@instructure/ui-test-locator": "8.49.1-snapshot-7",
-    "@instructure/ui-test-utils": "8.49.1-snapshot-7",
-    "@instructure/ui-themes": "8.49.1-snapshot-7",
+    "@instructure/ui-axe-check": "8.49.1-snapshot-9",
+    "@instructure/ui-babel-preset": "8.49.1-snapshot-9",
+    "@instructure/ui-color-utils": "8.49.1-snapshot-9",
+    "@instructure/ui-test-locator": "8.49.1-snapshot-9",
+    "@instructure/ui-test-utils": "8.49.1-snapshot-9",
+    "@instructure/ui-themes": "8.49.1-snapshot-9",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0"
   },

package/src/Avatar/README.md

@@ -136,6 +136,20 @@ example: true
 </div>
 ```
 
+### Border
+
+By default only avatars without an image have borders but you can force it to `always` or `never` show with the `showBorder` prop however you should only use it rarely in very specific occasions (e.g. displaying an avatar in the [SideNavBar](/#SideNavBar))
+
+```js
+---
+example: true
+---
+<div>
+  <Avatar name="Sarah Robinson" src={avatarSquare} margin="0 small 0 0" showBorder="always"/>
+  <Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 small 0 0" showBorder="never"/>
+</div>
+```
+
 ### Guidelines
 
 ```js

package/src/Avatar/__examples__/Avatar.examples.tsx

@@ -44,6 +44,13 @@ export default {
       return true
     }
 
+    if (
+      (props.src && props.showBorder === 'never') ||
+      (!props.src && props.showBorder === 'always')
+    ) {
+      return true
+    }
+
     if (props.renderIcon && props.src) {
       return true
     }

package/src/Avatar/index.tsx

@@ -53,6 +53,7 @@ class Avatar extends Component<AvatarProps, AvatarState> {
     size: 'medium',
     color: 'default',
     hasInverseColor: false,
+    showBorder: 'auto',
     shape: 'circle',
     display: 'inline-block',
     onImageLoaded: (_event: SyntheticEvent) => {}

package/src/Avatar/props.ts

@@ -74,6 +74,10 @@ type AvatarOwnProps = {
    * In inverse color mode the background and text/icon colors are inverted
    */
   hasInverseColor?: boolean
+  /**
+   * `auto` only shows a border when there is no source image. This prop can force to always or never show that border.
+   */
+  showBorder?: 'auto' | 'always' | 'never'
   shape: 'circle' | 'rectangle'
   display: 'inline-block' | 'block'
   /**
@@ -140,6 +144,7 @@ const propTypes: PropValidators<PropKeys> = {
     'ash'
   ]),
   hasInverseColor: PropTypes.bool,
+  showBorder: PropTypes.oneOf(['auto', 'always', 'never']),
   shape: PropTypes.oneOf(['circle', 'rectangle']),
   margin: ThemeablePropTypes.spacing,
   display: PropTypes.oneOf(['inline-block', 'block']),
@@ -162,7 +167,8 @@ const allowedProps: AllowedPropKeys = [
   'onImageLoaded',
   'as',
   'elementRef',
-  'renderIcon'
+  'renderIcon',
+  'showBorder'
 ]
 
 export type { AvatarProps, AvatarStyle }

package/src/Avatar/styles.ts

@@ -40,7 +40,7 @@ const generateStyle = (
   props: AvatarProps,
   state: AvatarState
 ): AvatarStyle => {
-  const { size, color, hasInverseColor, shape, src } = props
+  const { size, color, hasInverseColor, shape, src, showBorder } = props
   const { loaded } = state
 
   const sizeStyles = {
@@ -121,24 +121,29 @@ const generateStyle = (
       overflow: 'hidden',
       lineHeight: 0,
       textAlign: 'center',
+      borderStyle: 'solid',
+      borderColor: componentTheme.borderColor,
       ...sizeStyles[size],
       ...variantStyles[shape],
       ...(loaded
         ? {
             backgroundImage: `url('${src}')`,
-            border: 0,
+            ...(showBorder !== 'always' && {
+              border: 0
+            }),
             boxShadow: `inset 0 0 ${componentTheme.boxShadowBlur} 0 ${componentTheme.boxShadowColor}`
           }
         : {
             backgroundImage: undefined,
-            borderStyle: 'solid',
-            borderColor: componentTheme.borderColor,
             ...(hasInverseColor && {
               border: 0,
               padding: sizeStyles[size].borderWidth,
               backgroundClip: 'border-box'
             })
-          })
+          }),
+      ...(showBorder === 'never' && {
+        border: 0
+      })
     },
     initials: {
       label: 'avatar__initials',