fix(Avatar, Image): fixing fluid prop in Image and applying it in the Avatar component

CHANGELOG.md

@@ -21,7 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 - Add selection property to child items in ListExampleSelection so that styles and roles are applied properly @jurokapsiar ([#70](https://github.com/stardust-ui/react/pull/70))
 - Menu `onClick` handler moved from `li` to `a` (accessibility) @miroslavstastny ([#61](https://github.com/stardust-ui/react/pull/61))
-
+- Image `fluid` is applied on the avatar variations @mnajdova ([#77](https://github.com/stardust-ui/react/pull/77))
 
 ### Features
 - Add `color` variables to Header and Header.Description @kuzhelov ([#72](https://github.com/stardust-ui/react/pull/72))

docs/src/examples/components/Avatar/Variations/AvatarExampleAlt.shorthand.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
 const AvatarExampleAltShorthand = () => (
-  <Avatar src="/public/images/avatar/small/matt.jpg" alt="Profile picture of Matt" />
+  <Avatar src="public/images/avatar/small/matt.jpg" alt="Profile picture of Matt" />
 )
 
 export default AvatarExampleAltShorthand

docs/src/examples/components/Avatar/Variations/AvatarExamplePresenceIndicatorCustomization.shorthand.tsx

@@ -3,7 +3,7 @@ import { Avatar } from '@stardust-ui/react'
 
 const AvatarExamplePresenceIndicatorCustomizationShorthand = () => (
   <Avatar
-    src="/public/images/avatar/small/matt.jpg"
+    src="public/images/avatar/small/matt.jpg"
     alt="Profile picture of Matt"
     status="Available"
     variables={{ presenceIndicatorBackground: '#d3d3d3' }}

src/components/Avatar/Avatar.tsx

@@ -14,7 +14,18 @@ class Avatar extends UIComponent<any, any> {
 
   static displayName = 'Avatar'
 
-  static handledProps = ['alt', 'as', 'className', 'getInitials', 'name', 'size', 'src', 'status']
+  static handledProps = [
+    'alt',
+    'as',
+    'className',
+    'getInitials',
+    'name',
+    'size',
+    'src',
+    'status',
+    'styles',
+    'variables',
+  ]
 
   static propTypes = {
     /** The alternative text for the image used in the Avatar. */
@@ -48,6 +59,12 @@ class Avatar extends UIComponent<any, any> {
 
     /** Custom method for generating the initials from the name property, shown in the avatar if there is no image provided. */
     getInitials: PropTypes.func,
+
+    /** Custom styles to be applied for component. */
+    styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+
+    /** Custom variables to be applied for component. */
+    variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   }
 
   static defaultProps = {
@@ -106,7 +123,7 @@ class Avatar extends UIComponent<any, any> {
     },
   }
 
-  renderComponent({ ElementType, classes, rest }) {
+  renderComponent({ ElementType, classes, rest, styles }) {
     const { src, alt, name, status, getInitials, size } = this.props
     const { icon = '', color = '' } = Avatar.statusToIcon[status] || {}
 
@@ -118,10 +135,17 @@ class Avatar extends UIComponent<any, any> {
     return (
       <ElementType {...rest} className={classes.root}>
         {src ? (
-          <Image className={classes.imageAvatar} avatar src={src} alt={alt} title={name} />
+          <Image
+            styles={{ root: { ...styles.imageAvatar } }}
+            fluid
+            avatar
+            src={src}
+            alt={alt}
+            title={name}
+          />
         ) : (
           <Label
-            className={classes.avatarNameContainer}
+            styles={{ root: { ...styles.avatarNameContainer } }}
             as="div"
             content={getInitials(name)}
             variables={{ padding: '0px' }}
@@ -132,7 +156,7 @@ class Avatar extends UIComponent<any, any> {
         {status && (
           <div className={classes.presenceIndicatorWrapper}>
             <Icon
-              className={classes.presenceIndicator}
+              styles={{ root: { ...styles.presenceIndicator } }}
               size={size < 4 ? 'micro' : size < 6 ? 'mini' : 'tiny'}
               circular
               name={icon}

src/components/Icon/Icon.tsx

@@ -48,9 +48,15 @@ class Icon extends UIComponent<any, any> {
       'massive',
     ]),
 
+    /** Custom styles to be applied for component. */
+    styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+
     /** Render icon from SVGs collection.  */
     svg: PropTypes.bool,
 
+    /** Custom variables to be applied for component. */
+    variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+
     /** Adds space to the before, after or on both sides of the icon, or removes the default space around the icon ('none' value) */
     xSpacing: PropTypes.oneOf(['none', 'before', 'after', 'both']),
   }
@@ -64,7 +70,9 @@ class Icon extends UIComponent<any, any> {
     'font',
     'name',
     'size',
+    'styles',
     'svg',
+    'variables',
     'xSpacing',
   ]
 

src/components/Image/Image.tsx

@@ -30,9 +30,24 @@ class Image extends UIComponent<any, any> {
 
     /** An image can take up the width of its container. */
     fluid: PropTypes.bool,
+
+    /** Custom styles to be applied for component. */
+    styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+
+    /** Custom variables to be applied for component. */
+    variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   }
 
-  static handledProps = ['accessibility', 'as', 'avatar', 'circular', 'className', 'fluid']
+  static handledProps = [
+    'accessibility',
+    'as',
+    'avatar',
+    'circular',
+    'className',
+    'fluid',
+    'styles',
+    'variables',
+  ]
 
   static defaultProps = {
     as: 'img',

src/themes/teams/components/Avatar/avatarStyles.ts

@@ -56,10 +56,8 @@ const avatarStyles: IComponentPartStylesInput = {
     height: pxToRem(getAvatarDimension(size)),
     width: pxToRem(getAvatarDimension(size)),
   }),
-  imageAvatar: ({ props: { size } }): ICSSInJSStyle => ({
-    width: pxToRem(getAvatarDimension(size)),
-    height: pxToRem(getAvatarDimension(size)),
-    verticalAlign: 'top !important',
+  imageAvatar: (): ICSSInJSStyle => ({
+    verticalAlign: 'top',
   }),
   avatarNameContainer: ({ props: { size } }): ICSSInJSStyle => ({
     display: 'inline-block',

src/themes/teams/components/Image/imageStyles.ts

@@ -5,11 +5,11 @@ export default {
   root: ({ props, variables }): ICSSInJSStyle => ({
     display: 'inline-block',
     verticalAlign: 'middle',
-    width: variables.width || (props.fluid && '100%'),
+    width: (props.fluid && '100%') || variables.width,
     height: variables.height || 'auto',
     ...(props.circular && { borderRadius: pxToRem(9999) }),
     ...(props.avatar && {
-      width: variables.avatarSize,
+      width: (props.fluid && '100%') || variables.avatarSize,
       borderRadius: variables.avatarRadius,
     }),
   }),