fix(Avatar): Adjust icon size in sync with Avatar Size (#317)

* fix(Avatar): icon size changes along with avatar size

* fix(Icon): remove deprecated onPress prop

Co-authored-by: Marcus Notheis <[email protected]>

Author: Lukas742

packages/main/src/components/Avatar/Avatar.jss.ts

@@ -31,28 +31,56 @@ const styles = ({ parameters }: JSSTheme) => ({
   // biggest avatar; 7rem
   sizeXL: {
     ...size('7rem'),
-    fontSize: '2.75rem'
+    fontSize: '3rem',
+    '& ui5-icon': {
+      width: '3rem',
+      height: '3rem'
+    }
   },
   // 5rem
   sizeL: {
     ...size('5rem'),
-    fontSize: '2rem'
+    fontSize: '2.25rem',
+    '& ui5-icon': {
+      width: '2.25rem',
+      height: '2.25rem'
+    }
   },
   // 4rem
   sizeM: {
     ...size('4rem'),
-    fontSize: '1.75rem'
+    fontSize: '1.5rem',
+    '& ui5-icon': {
+      width: '1.5rem',
+      height: '1.5rem'
+    }
   },
   // 3rem
   sizeS: {
     ...size('3rem'),
-    fontSize: '1.125rem'
+    fontSize: '1.125rem',
+    '& ui5-icon': {
+      width: '1.125rem',
+      height: '1.125rem'
+    }
   },
   // 2rem
   sizeXS: {
     ...size('2rem'),
-    fontSize: '0.75rem'
-  }
+    fontSize: '1rem',
+    '& ui5-icon': {
+      width: '1rem',
+      height: '1rem'
+    }
+  },
+  sizeCustom: ({ customFontSize, customDisplaySize }) => ({
+    ...size(customDisplaySize),
+    fontSize: customFontSize,
+    '& ui5-icon': {
+      width: customFontSize,
+      height: customFontSize
+    }
+  })
 });
 
 export default styles;

packages/main/src/components/Avatar/Avatar.test.tsx

@@ -32,10 +32,11 @@ describe('Avatar', () => {
       <Avatar size={AvatarSize.Custom} customDisplaySize="5rem" customFontSize="2rem" initials="JD" />
     );
     const el = wrapper.find(Avatar).getDOMNode() as HTMLElement;
-    expect(el.style.fontSize).toEqual('2rem');
-    expect(el.style.width).toEqual('5rem');
-    expect(el.style.height).toEqual('5rem');
-    expect(el.style.lineHeight).toEqual('5rem');
+    const computedStyle = getComputedStyle(el);
+    expect(computedStyle.fontSize).toEqual('2rem');
+    expect(computedStyle.width).toEqual('5rem');
+    expect(computedStyle.height).toEqual('5rem');
+    expect(computedStyle.lineHeight).toEqual('5rem');
   });
 
   test('Custom Size Defined but wrong size prop', () => {

packages/main/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -2,16 +2,14 @@
 
 exports[`Avatar Avatar - size: Custom shape: Circle 1`] = `
 <span
-  class="Avatar--avatar- Avatar--circle-"
-  style="font-size: 1.125rem; width: 3rem; height: 3rem; line-height: 3rem;"
+  class="Avatar--avatar- Avatar--sizeCustom- Avatar--sizeCustom-d0- Avatar--circle-"
   tabindex="0"
 />
 `;
 
 exports[`Avatar Avatar - size: Custom shape: Square 1`] = `
 <span
-  class="Avatar--avatar-"
-  style="font-size: 1.125rem; width: 3rem; height: 3rem; line-height: 3rem;"
+  class="Avatar--avatar- Avatar--sizeCustom- Avatar--sizeCustom-d0-"
   tabindex="0"
 />
 `;

packages/main/src/components/Avatar/index.tsx

@@ -2,7 +2,7 @@ import { Event } from '@ui5/webcomponents-react-base/lib/Event';
 import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
 import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape';
 import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
-import React, { CSSProperties, FC, forwardRef, Ref, useCallback } from 'react';
+import React, { CSSProperties, FC, forwardRef, Ref, useCallback, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { JSSTheme } from '../../interfaces/JSSTheme';
@@ -39,38 +39,34 @@ const Avatar: FC<AvatarPropTypes> = forwardRef((props: AvatarPropTypes, ref: Ref
     tooltip,
     slot
   } = props;
+  const classes = useStyles({ customDisplaySize, customFontSize });
 
-  const classes = useStyles();
-
-  const cssClasses = [classes.avatar];
-  const inlineStyle: CSSProperties = {};
-  if (size === AvatarSize.Custom) {
-    inlineStyle.fontSize = customFontSize;
-    inlineStyle.width = customDisplaySize;
-    inlineStyle.height = customDisplaySize;
-    inlineStyle.lineHeight = customDisplaySize;
-  } else {
-    cssClasses.push(classes[`size${size}`]);
-  }
+  const cssClasses = [classes.avatar, classes[`size${size}`]];
 
   if (shape === AvatarShape.Circle) {
     cssClasses.push(classes.circle);
   }
 
-  if (image) {
-    inlineStyle.backgroundImage = `url(${image})`;
-  }
+  const inlineStyle = useMemo(() => {
+    const internalStyle: CSSProperties = {};
+    if (image) {
+      internalStyle.backgroundImage = `url(${image})`;
+    }
 
-  if (onClick) {
-    inlineStyle.cursor = 'pointer';
-  }
+    if (onClick) {
+      internalStyle.cursor = 'pointer';
+    }
+
+    if (style) {
+      Object.assign(internalStyle, style);
+    }
+
+    return internalStyle;
+  }, [image, onClick, style]);
 
   if (className) {
     cssClasses.push(className);
   }
-  if (style) {
-    Object.assign(inlineStyle, style);
-  }
 
   const handleKeyDown = useCallback(
     (e) => {

packages/main/src/webComponents/Icon/demo.stories.tsx

@@ -9,7 +9,7 @@ export default {
   component: Icon
 };
 
-export const defaultStory = () => <Icon name={text('src', 'add')} onPress={action('onPress')} />;
+export const defaultStory = () => <Icon name={text('src', 'add')} />;
 
 defaultStory.story = {
   name: 'Default story'