Fixed #6659 - Avatar - New Design Tokens

primefaces · Oct 28, 2024 · e2040e9 · e2040e9
1 parent 44cb582
commit e2040e9
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 39 deletions.
diff --git a/apps/showcase/doc/avatar/AvatarGroupDoc.vue b/apps/showcase/doc/avatar/AvatarGroupDoc.vue
@@ -4,12 +4,12 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <AvatarGroup>
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
-            <Avatar label="+2" shape="circle" size="large" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
         </AvatarGroup>
     </div>
     <DocSectionCode :code="code" />
@@ -22,24 +22,24 @@ export default {
             code: {
                 basic: `
 <AvatarGroup>
-    <Avatar image="/images/avatar/amyelsner.png" size="large" shape="circle" />
-    <Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle" />
-    <Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle" />
-    <Avatar image="/images/avatar/ionibowcher.png" size="large" shape="circle" />
-    <Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle" />
-    <Avatar label="+2" shape="circle" size="large" />
+    <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+    <Avatar image="/images/avatar/asiyajavayant.png" shape="circle" />
+    <Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
+    <Avatar image="/images/avatar/ionibowcher.png" shape="circle" />
+    <Avatar image="/images/avatar/xuxuefeng.png" shape="circle" />
+    <Avatar label="+2" shape="circle" />
 </AvatarGroup>
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
         <AvatarGroup>
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
-            <Avatar label="+2" shape="circle" size="large" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
         </AvatarGroup>
     </div>
 </template>
@@ -52,12 +52,12 @@ export default {
 <template>
     <div class="card flex justify-center">
         <AvatarGroup>
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
-            <Avatar label="+2" shape="circle" size="large" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
         </AvatarGroup>
     </div>
 </template>

diff --git a/packages/primevue/src/avatar/style/AvatarStyle.js b/packages/primevue/src/avatar/style/AvatarStyle.js
@@ -9,6 +9,7 @@ const theme = ({ dt }) => `
     height: ${dt('avatar.height')};
     font-size: ${dt('avatar.font.size')};
     background: ${dt('avatar.background')};
+    color: ${dt('avatar.color')};
     border-radius: ${dt('avatar.border.radius')};
 }
 
@@ -25,7 +26,9 @@ const theme = ({ dt }) => `
 }
 
 .p-avatar-icon {
-    font-size: ${dt('avatar.font.size')};
+    font-size: ${dt('avatar.icon.size')};
+    width: ${dt('avatar.icon.size')};
+    height: ${dt('avatar.icon.size')};
 }
 
 .p-avatar img {
@@ -40,7 +43,9 @@ const theme = ({ dt }) => `
 }
 
 .p-avatar-lg .p-avatar-icon {
-    font-size: ${dt('avatar.lg.font.size')};
+    font-size: ${dt('avatar.lg.icon.size')};
+    width: ${dt('avatar.lg.icon.size')};
+    height: ${dt('avatar.lg.icon.size')};
 }
 
 .p-avatar-xl {
@@ -50,7 +55,9 @@ const theme = ({ dt }) => `
 }
 
 .p-avatar-xl .p-avatar-icon {
-    font-size: ${dt('avatar.xl.font.size')};
+    font-size: ${dt('avatar.xl.icon.size')};
+    width: ${dt('avatar.xl.icon.size')};
+    height: ${dt('avatar.xl.icon.size')};
 }
 
 .p-avatar-group {
@@ -65,6 +72,14 @@ const theme = ({ dt }) => `
 .p-avatar-group .p-avatar {
     border: 2px solid ${dt('avatar.group.border.color')};
 }
+
+.p-avatar-group .p-avatar-lg + .p-avatar-lg {
+    margin-left: ${dt('avatar.lg.group.offset')};
+}
+
+.p-avatar-group .p-avatar-xl + .p-avatar-xl {
+    margin-left: ${dt('avatar.xl.group.offset')};
+}
 `;
 
 const classes = {

diff --git a/packages/themes/src/presets/aura/avatar/index.js b/packages/themes/src/presets/aura/avatar/index.js
@@ -4,20 +4,36 @@ export default {
         height: '2rem',
         fontSize: '1rem',
         background: '{content.border.color}',
+        color: '{content.color}',
         borderRadius: '{content.border.radius}'
     },
+    icon: {
+        size: '1rem'
+    },
     group: {
         borderColor: '{content.background}',
-        offset: '-1rem'
+        offset: '-0.75rem'
     },
     lg: {
         width: '3rem',
         height: '3rem',
-        fontSize: '1.5rem'
+        fontSize: '1.5rem',
+        icon: {
+            size: '1.5rem'
+        },
+        group: {
+            offset: '-1rem'
+        }
     },
     xl: {
         width: '4rem',
         height: '4rem',
-        fontSize: '2rem'
+        fontSize: '2rem',
+        icon: {
+            size: '2rem'
+        },
+        group: {
+            offset: '-1.5rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/lara/avatar/index.js b/packages/themes/src/presets/lara/avatar/index.js
@@ -4,20 +4,33 @@ export default {
         height: '2rem',
         fontSize: '1rem',
         background: '{content.border.color}',
+        color: '{content.color}',
         borderRadius: '{content.border.radius}'
     },
+    icon: {
+        size: '1rem'
+    },
     group: {
         borderColor: '{content.background}',
-        offset: '-1rem'
+        offset: '-0.75rem'
     },
     lg: {
         width: '3rem',
         height: '3rem',
-        fontSize: '1.5rem'
+        fontSize: '1.5rem',
+        icon: {
+            size: '1.5rem'
+        },
+        group: {
+            offset: '-1rem'
+        }
     },
     xl: {
         width: '4rem',
         height: '4rem',
-        fontSize: '2rem'
+        fontSize: '2rem',
+        icon: {
+            size: '2rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/material/avatar/index.js b/packages/themes/src/presets/material/avatar/index.js
@@ -4,20 +4,36 @@ export default {
         height: '2rem',
         fontSize: '1rem',
         background: '{content.border.color}',
+        color: '{content.color}',
         borderRadius: '{content.border.radius}'
     },
+    icon: {
+        size: '1rem'
+    },
     group: {
         borderColor: '{content.background}',
-        offset: '-1rem'
+        offset: '-0.75rem'
     },
     lg: {
         width: '3rem',
         height: '3rem',
-        fontSize: '1.5rem'
+        fontSize: '1.5rem',
+        icon: {
+            size: '1.5rem'
+        },
+        group: {
+            offset: '-1rem'
+        }
     },
     xl: {
         width: '4rem',
         height: '4rem',
-        fontSize: '2rem'
+        fontSize: '2rem',
+        icon: {
+            size: '2rem'
+        },
+        group: {
+            offset: '-1.5rem'
+        }
     }
 };
diff --git a/packages/themes/src/presets/nora/avatar/index.js b/packages/themes/src/presets/nora/avatar/index.js
@@ -4,20 +4,36 @@ export default {
         height: '2rem',
         fontSize: '1rem',
         background: '{content.hover.background}',
+        color: '{content.color}',
         borderRadius: '{content.border.radius}'
     },
+    icon: {
+        size: '1rem'
+    },
     group: {
         borderColor: '{content.background}',
-        offset: '-1rem'
+        offset: '-0.75rem'
     },
     lg: {
         width: '3rem',
         height: '3rem',
-        fontSize: '1.5rem'
+        fontSize: '1.5rem',
+        icon: {
+            size: '1.5rem'
+        },
+        group: {
+            offset: '-1rem'
+        }
     },
     xl: {
         width: '4rem',
         height: '4rem',
-        fontSize: '2rem'
+        fontSize: '2rem',
+        icon: {
+            size: '2rem'
+        },
+        group: {
+            offset: '-1.5rem'
+        }
     }
 };