diff --git a/packages/main/__karma_snapshots__/Avatar.md b/packages/main/__karma_snapshots__/Avatar.md
index c826497f3cf..fb002849c00 100644
--- a/packages/main/__karma_snapshots__/Avatar.md
+++ b/packages/main/__karma_snapshots__/Avatar.md
@@ -6,11 +6,9 @@
-
-
-
-
-
+
+
+
@@ -22,11 +20,9 @@
-
-
-
-
-
+
+
+
@@ -38,11 +34,9 @@
-
-
-
-
-
+
+
+
@@ -54,11 +48,9 @@
-
-
-
-
-
+
+
+
@@ -70,11 +62,9 @@
-
-
-
-
-
+
+
+
@@ -86,11 +76,9 @@
-
-
-
-
-
+
+
+
@@ -102,11 +90,9 @@
-
-
-
-
-
+
+
+
@@ -118,11 +104,9 @@
-
-
-
-
-
+
+
+
@@ -134,11 +118,9 @@
-
-
-
-
-
+
+
+
@@ -150,11 +132,9 @@
-
-
-
-
-
+
+
+
@@ -166,11 +146,9 @@
-
-
-
-
-
+
+
+
@@ -182,11 +160,9 @@
-
-
-
-
-
+
+
+
@@ -198,13 +174,11 @@
-
-
-
- JD
-
-
-
+
+
+ JD
+
+
diff --git a/packages/main/__karma_snapshots__/CheckBox.md b/packages/main/__karma_snapshots__/CheckBox.md
index b77f76286bd..299e8db0cfd 100644
--- a/packages/main/__karma_snapshots__/CheckBox.md
+++ b/packages/main/__karma_snapshots__/CheckBox.md
@@ -4,7 +4,7 @@
```
-
+
diff --git a/packages/main/src/components/Avatar/Avatar.karma.tsx b/packages/main/src/components/Avatar/Avatar.karma.tsx
index f80ce72c5b4..15ae69b5af7 100644
--- a/packages/main/src/components/Avatar/Avatar.karma.tsx
+++ b/packages/main/src/components/Avatar/Avatar.karma.tsx
@@ -67,7 +67,7 @@ describe('Avatar', () => {
it('enter key down', () => {
const callback = sinon.spy();
const wrapper = mountThemedComponent();
- wrapper.find(Avatar).simulate('keyDown', { keyCode: KeyCodes.ENTER });
+ wrapper.find(Avatar).simulate('keyDown', { key: 'Enter' });
expect(callback.called).to.equal(true);
});
diff --git a/packages/main/src/components/Avatar/index.tsx b/packages/main/src/components/Avatar/index.tsx
index 438ea9bfc44..eb14f34c9d1 100644
--- a/packages/main/src/components/Avatar/index.tsx
+++ b/packages/main/src/components/Avatar/index.tsx
@@ -1,7 +1,8 @@
-import { Event, KeyCodes, withStyles } from '@ui5/webcomponents-react-base';
-import React, { CSSProperties, PureComponent } from 'react';
-import { ClassProps } from '../../interfaces/ClassProps';
+import { Event } from '@ui5/webcomponents-react-base';
+import React, { CSSProperties, forwardRef, Ref, useCallback } from 'react';
+import { createUseStyles } from 'react-jss';
import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
import { AvatarShape } from '../../lib/AvatarShape';
import { AvatarSize } from '../../lib/AvatarSize';
import styles from './Avatar.jss';
@@ -17,93 +18,100 @@ export interface AvatarPropTypes extends CommonProps {
customFontSize?: CSSProperties['width'];
}
-export interface AvatarPropsInternal extends AvatarPropTypes, CommonProps, ClassProps {}
-
-@withStyles(styles)
-export class Avatar extends PureComponent {
- static defaultProps = {
- size: AvatarSize.S,
- shape: AvatarShape.Circle,
- initials: null,
- image: null,
- onClick: null,
- customDisplaySize: '3rem',
- customFontSize: '1.125rem'
- };
-
- private handleKeyDown = (e) => {
- if (e.keyCode === KeyCodes.ENTER) {
- this.props.onClick(Event.of(this, e));
- }
- };
-
- private handleOnClick = (e) => {
- this.props.onClick(Event.of(this, e));
- };
-
- render() {
- const {
- initials,
- size,
- shape,
- image,
- onClick,
- classes,
- customFontSize,
- customDisplaySize,
- children,
- className,
- style,
- tooltip,
- innerRef,
- slot
- } = this.props as AvatarPropsInternal;
-
- 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}`]);
- }
-
- inlineStyle['--sapUiContentNonInteractiveIconColor'] = 'var(--sapContent_ContrastIconColor)';
-
- if (shape === AvatarShape.Circle) {
- cssClasses.push(classes.circle);
- }
-
- if (image) {
- inlineStyle.backgroundImage = `url(${image})`;
- }
-
- if (onClick) {
- inlineStyle.cursor = 'pointer';
- }
-
- if (className) {
- cssClasses.push(className);
- }
- if (style) {
- Object.assign(inlineStyle, style);
- }
-
- return (
-
- {initials ? initials : children}
-
- );
+const useStyles = createUseStyles(styles);
+
+const Avatar = forwardRef((props: AvatarPropTypes, ref: Ref) => {
+ const {
+ initials,
+ size,
+ shape,
+ image,
+ onClick,
+ customFontSize,
+ customDisplaySize,
+ children,
+ className,
+ style,
+ tooltip,
+ slot
+ } = props;
+
+ 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}`]);
}
-}
+
+ inlineStyle['--sapUiContentNonInteractiveIconColor'] = 'var(--sapContent_ContrastIconColor)';
+
+ if (shape === AvatarShape.Circle) {
+ cssClasses.push(classes.circle);
+ }
+
+ if (image) {
+ inlineStyle.backgroundImage = `url(${image})`;
+ }
+
+ if (onClick) {
+ inlineStyle.cursor = 'pointer';
+ }
+
+ if (className) {
+ cssClasses.push(className);
+ }
+ if (style) {
+ Object.assign(inlineStyle, style);
+ }
+
+ const handleKeyDown = useCallback(
+ (e) => {
+ if (e.key === 'Enter') {
+ onClick(Event.of(null, e));
+ }
+ },
+ [onClick]
+ );
+
+ const handleOnClick = useCallback(
+ (e) => {
+ onClick(Event.of(null, e));
+ },
+ [onClick]
+ );
+
+ return (
+
+ {initials ? initials : children}
+
+ );
+});
+
+Avatar.defaultProps = {
+ size: AvatarSize.S,
+ shape: AvatarShape.Circle,
+ initials: null,
+ image: null,
+ onClick: null,
+ customDisplaySize: '3rem',
+ customFontSize: '1.125rem'
+};
+
+Avatar.displayName = 'Avatar';
+
+export { Avatar };