-
+
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx
index acc0a86b79..f645d4e2b5 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx
@@ -3,8 +3,7 @@ import { Avatar } from '@stardust-ui/react'
const AvatarExampleStatusCustomizationShorthand = () => (
(
+
string
styles?: ComponentPartStyle
@@ -31,22 +31,19 @@ class Avatar extends UIComponent, any> {
static displayName = 'Avatar'
static handledProps = [
- 'alt',
'as',
'className',
'getInitials',
+ 'image',
+ 'label',
'name',
'size',
- 'src',
'status',
'styles',
'variables',
]
static propTypes = {
- /** The alternative text for the image used in the Avatar. */
- alt: PropTypes.string,
-
/** An element type to render as (string or function). */
as: customPropTypes.as,
@@ -56,13 +53,16 @@ class Avatar extends UIComponent, any> {
/** The name used for displaying the initials of the avatar if the image is not provided. */
name: PropTypes.string,
- /** Size multiplier */
- size: PropTypes.number,
+ /** Shorthand for the image. */
+ image: customPropTypes.itemShorthand,
- /** The src of the image used in the Avatar. */
- src: PropTypes.string,
+ /** Shorthand for the label. */
+ label: customPropTypes.itemShorthand,
+
+ /** Size multiplier. */
+ size: PropTypes.number,
- /** Shorthand for the status of the user */
+ /** Shorthand for the status of the user. */
status: customPropTypes.itemShorthand,
/** Custom method for generating the initials from the name property, shown in the avatar if there is no image provided. */
@@ -101,22 +101,28 @@ class Avatar extends UIComponent, any> {
}
renderComponent({ ElementType, classes, rest, styles, variables }) {
- const { src, alt, name, status, getInitials, size } = this.props as IAvatarPropsWithDefaults
+ const { name, status, image, label, getInitials, size } = this.props as IAvatarPropsWithDefaults
return (
- {src ? (
-
- ) : (
-
- )}
+ {Image.create(image, {
+ defaultProps: {
+ fluid: true,
+ avatar: true,
+ title: name,
+ styles: styles.image,
+ },
+ })}
+ {!image &&
+ Label.create(label || {}, {
+ defaultProps: {
+ as: 'div',
+ content: getInitials(name),
+ circular: true,
+ title: name,
+ styles: styles.label,
+ },
+ })}
{Status.create(status, {
defaultProps: {
styles: styles.status,
diff --git a/src/themes/teams/components/Avatar/avatarStyles.ts b/src/themes/teams/components/Avatar/avatarStyles.ts
index 07e2314c8d..8bd906b8da 100644
--- a/src/themes/teams/components/Avatar/avatarStyles.ts
+++ b/src/themes/teams/components/Avatar/avatarStyles.ts
@@ -11,10 +11,10 @@ const avatarStyles: IComponentPartStylesInput = {
height: pxToRem(size),
width: pxToRem(size),
}),
- imageAvatar: (): ICSSInJSStyle => ({
+ image: (): ICSSInJSStyle => ({
verticalAlign: 'top',
}),
- avatarNameContainer: ({ props: { size } }): ICSSInJSStyle => ({
+ label: ({ props: { size } }): ICSSInJSStyle => ({
display: 'inline-block',
width: pxToRem(size),
height: pxToRem(size),
@@ -22,6 +22,7 @@ const avatarStyles: IComponentPartStylesInput = {
fontSize: pxToRem(size / 2.333),
verticalAlign: 'top',
textAlign: 'center',
+ padding: '0px',
}),
status: ({ props, variables }): ICSSInJSStyle => ({
position: 'absolute',
diff --git a/test/specs/components/Avatar/Avatar-test.tsx b/test/specs/components/Avatar/Avatar-test.tsx
index fb56f3ffc2..63a4fcb7e7 100644
--- a/test/specs/components/Avatar/Avatar-test.tsx
+++ b/test/specs/components/Avatar/Avatar-test.tsx
@@ -1,9 +1,15 @@
-import { isConformant } from 'test/specs/commonTests'
+import { implementsShorthandProp, isConformant } from 'test/specs/commonTests'
import Avatar from 'src/components/Avatar/Avatar'
+import Label from 'src/components/Label/Label'
+import Image from 'src/components/Image/Image'
+
+const avatarImplementsShorthandProp = implementsShorthandProp(Avatar)
describe('Avatar', () => {
isConformant(Avatar)
+ avatarImplementsShorthandProp('label', Label)
+ avatarImplementsShorthandProp('image', Image, { mapsValueToProp: 'src' })
describe('generateInitials', () => {
it('generateInitials should show just the initials of the first and last words in the name', () => {