feat(avatar): update styling

samples/layouts/avatar/overview/src/index.css

@@ -1,49 +1,43 @@
 .avatar-overview-sample {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  gap: 90px;
+  gap: 2rem;
+  height: 100vh;
+  padding: 2rem;
 }
 
-.size-large {
+.avatar-overview-sample igc-avatar {
   --ig-size: var(--ig-size-large);
 }
 
-.avatar-with-badge {
-  position: relative;
-  display: inline-flex;
+.profile-status {
+  anchor-name: --profile-status;
 }
 
-.avatar-status {
+.status-badge {
+  --ig-size: var(--ig-size-large);
   position: absolute;
-  right: 6px;
-  bottom: 6px;
+  position-anchor: --profile-status;
+  inset-block-start: anchor(85%);
+  inset-inline-start: anchor(85%);
+  translate: -50% -50%;
 }
 
 .avatar-stack {
-  display: inline-flex;
-  align-items: center;
-}
-
-.avatar-stack .size-large {
-  margin-left: -24px;
+  display: flex;
 }
 
-.avatar-stack .size-large:first-child {
-  margin-left: 0;
+.avatar-stack igc-avatar + igc-avatar {
+  margin-inline-start: -1.5rem;
 }
 
-.avatar-stack .size-large::part(base) {
-  border: 4px solid #fff;
-  box-sizing: border-box;
+.avatar-stack igc-avatar::part(base) {
+  box-shadow: 0 0 0 0.375rem var(--ig-surface-500);
 }
 
-.avatar-stack .size-large:last-child {
+.avatar-stack igc-avatar:last-child {
   --ig-avatar-background: #e8eef6;
   --ig-avatar-color: #6f8097;
 }
-
-.avatar-stack .size-large:last-child::part(initials) {
-  font-size: 32px;
-  font-weight: 500;
-}

samples/layouts/avatar/overview/src/index.tsx

@@ -2,55 +2,43 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import { IgrAvatar, IgrBadge } from "igniteui-react";
-import "igniteui-webcomponents/themes/light/material.css";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
 
 export default function AvatarOverview() {
   return (
     <div className="sample avatar-overview-sample">
       <IgrAvatar
-        className="size-large"
         shape="circle"
         src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
         alt="A profile photo of a man."
       />
-      <span className="avatar-with-badge">
-        <IgrAvatar
-          className="size-large"
-          shape="circle"
-          src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
-          alt="A profile photo of a man."
-        />
-        <IgrBadge
-          className="avatar-status size-large"
-          dot={true}
-          outlined={true}
-          variant="success"
-        />
-      </span>
+      <IgrAvatar
+        className="profile-status"
+        shape="circle"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
+        alt="A profile photo of a woman."
+      />
+      <IgrBadge className="status-badge" dot={true} outlined={true} variant="success" />
       <span className="avatar-stack" aria-label="Project members">
         <IgrAvatar
-          className="size-large"
           shape="circle"
           src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
-          alt="A profile photo of a man."
+          alt="A profile photo of an animated kid."
         />
         <IgrAvatar
-          className="size-large"
           shape="circle"
           src="https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png"
           alt="A profile photo of a man."
         />
         <IgrAvatar
-          className="size-large"
           shape="circle"
           src="https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png"
-          alt="A profile photo of a man."
+          alt="A profile photo of an abstract flat cat."
         />
         <IgrAvatar
-          className="size-large"
           shape="circle"
           initials="+3"
-          alt="A profile photo of a man."
+          alt="Three additional project members."
         />
       </span>
     </div>

samples/layouts/avatar/shape/src/index.css

@@ -1,52 +1,61 @@
-.avatar-overview-sample {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 90px;
-  min-height: 100vh;
-}
-
-.size-small {
+.avatar-shape-sample {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: auto auto;
+  place-content: center;
+  place-items: center;
+  column-gap: 2.5rem;
+  row-gap: 0.5rem;
+  height: 100vh;
+  padding: 2rem;
+}
+
+:where(igc-avatar) {
   --ig-size: var(--ig-size-small);
+  grid-row: 1;
 }
 
-.avatar-variant {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.avatar-label {
+:where(span) {
+  grid-row: 2;
+  text-align: center;
   color: var(--ig-gray-600);
+  font-family: "Aktiv Grotesk", Arial, sans-serif;
   font-size: 0.875rem;
   line-height: 1.25rem;
+  margin: 0;
 }
 
-.avatar-with-badge {
-  position: relative;
-  display: inline-flex;
-}
+:where(igc-badge) {
+  --ig-size: var(--ig-size-small);
+  --ig-badge-icon-color: #ffffff;
+  --ig-badge-text-color: #ffffff;
 
-.avatar-status {
-  --size: 18px;
   position: absolute;
-  right: -4px;
-  bottom: -4px;
-  font-size: 0.75rem;
-  line-height: 1;
+  inset-block-start: anchor(85.5%);
+  inset-inline-start: anchor(85.5%);
+  translate: -50% -50%;
 }
 
-.avatar-dot-badge {
-  --size: 12px;
-  right: 3px;
-  bottom: 3px;
+.avatar-shape-sample igc-avatar:nth-of-type(1) {
+  anchor-name: --circle;
 }
 
-.avatar-count-badge {
-  --ig-badge-text-color: #ffffff;
+.avatar-shape-sample igc-avatar:nth-of-type(2) {
+  anchor-name: --square;
 }
 
-.avatar-check-badge {
-  --ig-badge-icon-color: #ffffff;
+.avatar-shape-sample igc-avatar:nth-of-type(3) {
+  anchor-name: --rounded;
+}
+
+.avatar-shape-sample igc-badge:nth-of-type(1) {
+  position-anchor: --circle;
+}
+
+.avatar-shape-sample igc-badge:nth-of-type(2) {
+  position-anchor: --square;
+}
+
+.avatar-shape-sample igc-badge:nth-of-type(3) {
+  position-anchor: --rounded;
 }

samples/layouts/avatar/shape/src/index.tsx

@@ -7,7 +7,7 @@ import {
   IgrIcon,
   registerIconFromText,
 } from "igniteui-react";
-import "igniteui-webcomponents/themes/light/material.css";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
 
 const mailIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z"/></svg>';
@@ -22,61 +22,32 @@ export default function AvatarShape() {
   }, []);
 
   return (
-    <div className="avatar-overview-sample">
-      <div className="avatar-variant">
-        <span className="avatar-with-badge">
-          <IgrAvatar
-            className="size-small"
-            shape="circle"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
-            alt="A profile photo of a man."
-          />
-          <IgrBadge
-            className="avatar-status avatar-dot-badge size-small"
-            dot={true}
-            outlined={true}
-            variant="success"
-          />
-        </span>
-        <span className="avatar-label">Circle</span>
-      </div>
+    <div className="avatar-shape-sample">
+      <IgrAvatar
+        shape="circle"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
+        alt="A profile photo of a man."
+      />
+      <IgrBadge dot={true} outlined={true} variant="success" />
+      <span>Circle</span>
 
-      <div className="avatar-variant">
-        <span className="avatar-with-badge">
-          <IgrAvatar className="size-small" shape="square">
-            <IgrIcon name="mail" collection="material" />
-          </IgrAvatar>
-          <IgrBadge
-            className="avatar-status avatar-count-badge size-small"
-            outlined={true}
-            shape="square"
-            variant="info"
-          >
-            2
-          </IgrBadge>
-        </span>
-        <span className="avatar-label">Square</span>
-      </div>
+      <IgrAvatar shape="square">
+        <IgrIcon name="mail" collection="material" />
+      </IgrAvatar>
+      <IgrBadge outlined={true} shape="square" variant="info">
+        2
+      </IgrBadge>
+      <span>Square</span>
 
-      <div className="avatar-variant">
-        <span className="avatar-with-badge">
-          <IgrAvatar
-            className="size-small"
-            shape="rounded"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
-            alt="A profile photo of a man."
-          />
-          <IgrBadge
-            className="avatar-status avatar-check-badge size-small"
-            outlined={true}
-            shape="rounded"
-            variant="success"
-          >
-            <IgrIcon name="check" collection="material" />
-          </IgrBadge>
-        </span>
-        <span className="avatar-label">Rounded</span>
-      </div>
+      <IgrAvatar
+        shape="rounded"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
+        alt="A profile photo of a man."
+      />
+      <IgrBadge outlined={true} shape="rounded" variant="success">
+        <IgrIcon name="check" collection="material" />
+      </IgrBadge>
+      <span>Rounded</span>
     </div>
   );
 }