feat(Avatar): adjust typography usages and sizing for icons

- use typography token values from design - scale icons at 80 percent of size value, centered vertically and horizontally
chanzuckerberg · Jan 17, 2024 · 8c4bd2c · 8c4bd2c
1 parent 08fa1c4
commit 8c4bd2c
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 8 deletions.
diff --git a/src/components/Avatar/Avatar.module.css b/src/components/Avatar/Avatar.module.css
@@ -31,49 +31,49 @@
 }
 
 .avatar--xs {
-  font: var(--eds-theme-typography-title-xs);
+  font: var(--eds-theme-typography-tag);
 
   height: var(--eds-size-3);
   width: var(--eds-size-3);
 }
 
 .avatar--sm {
-  font: var(--eds-theme-typography-title-sm);
+  font: var(--eds-theme-typography-title-sm-bold);
 
   height: var(--eds-size-4);
   width: var(--eds-size-4);
 }
 
 .avatar--md {
-  font: var(--eds-theme-typography-title-md);
+  font: var(--eds-theme-typography-title-md-bold);
 
   height: var(--eds-size-5);
   width: var(--eds-size-5);
 }
 
 .avatar--lg {
-  font: var(--eds-theme-typography-title-md);
+  font: var(--eds-theme-typography-title-md-bold);
 
   height: var(--eds-size-6);
   width: var(--eds-size-6);
 }
 
 .avatar--xl {
-  font: var(--eds-theme-typography-title-lg);
+  font: var(--eds-theme-typography-headline-md-bold);
 
   height: var(--eds-size-8);
   width: var(--eds-size-8);
 }
 
 .avatar--xxl {
-  font: var(--eds-theme-typography-title-lg);
+  font: var(--eds-theme-typography-headline-lg-bold);
 
   height: var(--eds-size-12);
   width: var(--eds-size-12);
 }
 
 .avatar--xxxl {
-  font: var(--eds-theme-typography-title-lg);
+  font: var(--eds-theme-typography-headline-lg-bold);
 
   height: calc(var(--eds-size-base-unit) * 20);
   width: calc(var(--eds-size-base-unit) * 20);
@@ -83,6 +83,10 @@
   border-radius: var(--eds-border-radius-full);
 }
 
+.avatar--square {
+  border-radius: var(--eds-border-radius-none);
+}
+
 .avatar__image {
   width: 100%;
 }
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -131,7 +131,9 @@ export const Avatar = ({
       {...other}
     >
       {variant === 'initials' && avatarDisplayName}
-      {variant === 'icon' && <Icon name={icon} purpose="decorative" />}
+      {variant === 'icon' && (
+        <Icon name={icon} purpose="decorative" size="80%" />
+      )}
       {variant === 'image' && src && (
         <img alt="user" className={styles['avatar__image']} src={src} />
       )}

diff --git a/src/components/Avatar/__snapshots__/Avatar.test.ts.snap b/src/components/Avatar/__snapshots__/Avatar.test.ts.snap
@@ -20,7 +20,10 @@ exports[`<Avatar /> ExtraExtraExtraLarge story renders snapshot 1`] = `
     aria-hidden="true"
     class="icon"
     fill="currentColor"
+    height="80%"
+    style="--icon-size: 80%;"
     viewBox="0 0 24 24"
+    width="80%"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -40,7 +43,10 @@ exports[`<Avatar /> ExtraExtraLarge story renders snapshot 1`] = `
     aria-hidden="true"
     class="icon"
     fill="currentColor"
+    height="80%"
+    style="--icon-size: 80%;"
     viewBox="0 0 24 24"
+    width="80%"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -60,7 +66,10 @@ exports[`<Avatar /> ExtraLarge story renders snapshot 1`] = `
     aria-hidden="true"
     class="icon"
     fill="currentColor"
+    height="80%"
+    style="--icon-size: 80%;"
     viewBox="0 0 24 24"
+    width="80%"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -80,7 +89,10 @@ exports[`<Avatar /> ExtraSmall story renders snapshot 1`] = `
     aria-hidden="true"
     class="icon"
     fill="currentColor"
+    height="80%"
+    style="--icon-size: 80%;"
     viewBox="0 0 24 24"
+    width="80%"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -100,7 +112,10 @@ exports[`<Avatar /> Large story renders snapshot 1`] = `
     aria-hidden="true"
     class="icon"
     fill="currentColor"
+    height="80%"
+    style="--icon-size: 80%;"
     viewBox="0 0 24 24"
+    width="80%"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -120,7 +135,10 @@ exports[`<Avatar /> Medium story renders snapshot 1`] = `
     aria-hidden="true"
     class="icon"
     fill="currentColor"
+    height="80%"
+    style="--icon-size: 80%;"
     viewBox="0 0 24 24"
+    width="80%"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -140,7 +158,10 @@ exports[`<Avatar /> Small story renders snapshot 1`] = `
     aria-hidden="true"
     class="icon"
     fill="currentColor"
+    height="80%"
+    style="--icon-size: 80%;"
     viewBox="0 0 24 24"
+    width="80%"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -160,7 +181,10 @@ exports[`<Avatar /> Square story renders snapshot 1`] = `
     aria-hidden="true"
     class="icon"
     fill="currentColor"
+    height="80%"
+    style="--icon-size: 80%;"
     viewBox="0 0 24 24"
+    width="80%"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -234,7 +258,10 @@ exports[`<Avatar /> WithCustomIcon story renders snapshot 1`] = `
     aria-hidden="true"
     class="icon"
     fill="currentColor"
+    height="80%"
+    style="--icon-size: 80%;"
     viewBox="0 0 24 24"
+    width="80%"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path