Refactor #4602 - For Avatar/AvatarGroup

primefaces · Aug 7, 2023 · 1a257dc · 1a257dc
1 parent 89cd19a
commit 1a257dc
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 27 deletions.
diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { IconUtils, ObjectUtils, mergeProps } from '../utils/Utils';
-import { AvatarBase } from './AvatarBase';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
+import { AvatarBase } from './AvatarBase';
 
 export const Avatar = React.forwardRef((inProps, ref) => {
     const context = React.useContext(PrimeReactContext);
@@ -78,7 +78,7 @@ export const Avatar = React.forwardRef((inProps, ref) => {
         {
             ref: elementRef,
             style: props.style,
-            className: cx('root', { imageFailed })
+            className: classNames(props.className, cx('root', { imageFailed }))
         },
         AvatarBase.getOtherProps(props),
         ptm('root')

diff --git a/components/lib/avatar/AvatarBase.js b/components/lib/avatar/AvatarBase.js
@@ -3,17 +3,13 @@ import { ObjectUtils, classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props, state }) =>
-        classNames(
-            'p-avatar p-component',
-            {
-                'p-avatar-image': ObjectUtils.isNotEmpty(props.image) && !state.imageFailed,
-                'p-avatar-circle': props.shape === 'circle',
-                'p-avatar-lg': props.size === 'large',
-                'p-avatar-xl': props.size === 'xlarge',
-                'p-avatar-clickable': !!props.onClick
-            },
-            props.className
-        ),
+        classNames('p-avatar p-component', {
+            'p-avatar-image': ObjectUtils.isNotEmpty(props.image) && !state.imageFailed,
+            'p-avatar-circle': props.shape === 'circle',
+            'p-avatar-lg': props.size === 'large',
+            'p-avatar-xl': props.size === 'xlarge',
+            'p-avatar-clickable': !!props.onClick
+        }),
     label: 'p-avatar-text',
     icon: 'p-avatar-icon'
 };

diff --git a/components/lib/avatargroup/AvatarGroup.css b/components/lib/avatargroup/AvatarGroup.css
diff --git a/components/lib/avatargroup/AvatarGroup.js b/components/lib/avatargroup/AvatarGroup.js
@@ -1,18 +1,20 @@
 import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { classNames, mergeProps } from '../utils/Utils';
 import { AvatarGroupBase } from './AvatarGroupBase';
-import { PrimeReactContext } from '../api/Api';
 
 export const AvatarGroup = React.forwardRef((inProps, ref) => {
     const context = React.useContext(PrimeReactContext);
     const props = AvatarGroupBase.getProps(inProps, context);
 
-    const { ptm } = AvatarGroupBase.setMetaData({
+    const { ptm, cx, isUnstyled } = AvatarGroupBase.setMetaData({
         props
     });
 
+    useHandleStyle(AvatarGroupBase.css.styles, isUnstyled, { name: 'avatargroup' });
+
     const elementRef = React.useRef(null);
-    const className = classNames('p-avatar-group p-component', props.className);
 
     React.useImperativeHandle(ref, () => ({
         props,
@@ -23,7 +25,7 @@ export const AvatarGroup = React.forwardRef((inProps, ref) => {
         {
             ref: elementRef,
             style: props.style,
-            className
+            className: classNames(props.className, cx('root'))
         },
         AvatarGroupBase.getOtherProps(props),
         ptm('root')

diff --git a/components/lib/avatargroup/AvatarGroupBase.js b/components/lib/avatargroup/AvatarGroupBase.js
@@ -1,10 +1,29 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
 
+const classes = {
+    root: 'p-avatar-group p-component'
+};
+
+const styles = `
+.p-avatar-group .p-avatar + .p-avatar {
+    margin-left: -1rem;
+}
+
+.p-avatar-group {
+    display: flex;
+    align-items: center;
+}
+`;
+
 export const AvatarGroupBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'AvatarGroup',
         style: null,
         className: null,
         children: undefined
+    },
+    css: {
+        classes,
+        styles
     }
 });
diff --git a/components/lib/avatargroup/avatargroup.d.ts b/components/lib/avatargroup/avatargroup.d.ts
@@ -43,6 +43,11 @@ export interface AvatarGroupProps extends Omit<React.DetailedHTMLProps<React.HTM
      * @type {AvatarGroupPassThroughOptions}
      */
     pt?: AvatarGroupPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/styles/primereact.css b/styles/primereact.css
@@ -4,5 +4,4 @@
 @import "../components/lib/tooltip/Tooltip.css";
 @import "../components/lib/treetable/TreeTable.css";
 @import "../components/lib/ripple/Ripple.css";
-@import "../components/lib/avatargroup/AvatarGroup.css";
 @import "../components/lib/virtualscroller/VirtualScroller.css";