refactor(samples): simplify styling

live-editing/configs/AvatarConfigGenerator.ts

@@ -33,7 +33,6 @@ export class AvatarConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: 'AvatarStylingSampleComponent',
-            additionalFiles: ["/src/app/layouts/avatar/avatar-styling/layout.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/layouts/avatar/"
         }));

live-editing/configs/BadgeConfigGenerator.ts

@@ -55,7 +55,7 @@ export class BadgeConfigGenerator implements IConfigGenerator {
         // badge styling
         configs.push(new Config({
             component: 'BadgeStylingComponent',
-            additionalFiles: ["src/app/data-display/badge/model/member.model.ts", "src/app/data-display/badge/badge-styling/layout.scss"],
+            additionalFiles: ["src/app/data-display/badge/model/member.model.ts"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/badge/"
         }));

src/app/data-display/badge/badge-dot/badge-dot.component.html

@@ -1,43 +1,44 @@
-<div class="badge-dot">
-    <div class="dot-example icon-example">
-        <div class="icon-circle">
-            <igx-icon>notifications</igx-icon>
+<igx-avatar
+    class="icon-anchor"
+    icon="notifications"
+    shape="circle"
+    size="small">
+</igx-avatar>
+<igx-badge dot outlined type="error"></igx-badge>
+
+<div class="notifications-card">
+    @for (item of notifications; track item.title) {
+        <div class="notification-row">
+            <span class="row-indicator">
+                @if (item.unread) {
+                    <igx-badge dot type="info"></igx-badge>
+                }
+            </span>
+            <span class="row-title">{{ item.title }}</span>
+            <span class="row-time" [class.unread]="item.unread">{{ item.time }}</span>
+            <igx-icon class="row-chevron">chevron_right</igx-icon>
         </div>
-        <igx-badge dot outlined type="error"></igx-badge>
-    </div>
-    <div class="dot-example notifications-card">
-        @for (item of notifications; track item.title) {
-            <div class="notification-row">
-                <span class="row-indicator">
-                    @if (item.unread) {
-                        <igx-badge dot type="info"></igx-badge>
-                    }
-                </span>
-                <span class="row-title">{{ item.title }}</span>
-                <span class="row-time" [class.unread]="item.unread">{{ item.time }}</span>
-                <igx-icon class="row-chevron">chevron_right</igx-icon>
-            </div>
-        }
-    </div>
-    <div class="dot-example avatar-example">
-        <igx-avatar src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png" shape="circle" size="small"></igx-avatar>
-        <igx-badge dot outlined type="error"></igx-badge>
-    </div>
-    <div class="dot-example nav-card">
-        @for (tab of tabs; track tab.label) {
-            <div class="nav-item" [class.active]="tab.active">
-                <span class="nav-icon">
-                    @if (tab.icon === 'facebookMessenger') {
-                        <igx-icon name="facebookMessenger"></igx-icon>
-                    } @else {
-                        <igx-icon [name]="tab.icon"></igx-icon>
-                    }
-                    @if (tab.hasUpdates) {
-                        <igx-badge dot type="info"></igx-badge>
-                    }
-                </span>
-                <span class="nav-label">{{ tab.label }}</span>
-            </div>
-        }
-    </div>
+    }
+</div>
+
+<igx-avatar
+    class="avatar-anchor"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
+    shape="circle"
+    size="small">
+</igx-avatar>
+<igx-badge dot outlined type="error"></igx-badge>
+
+<div class="nav-card">
+    @for (tab of tabs; track tab.label) {
+        <div class="nav-item" [class.active]="tab.active">
+            <span class="nav-icon">
+                <igx-icon [name]="tab.icon"></igx-icon>
+                @if (tab.hasUpdates) {
+                    <igx-badge dot type="info"></igx-badge>
+                }
+            </span>
+            <span class="nav-label">{{ tab.label }}</span>
+        </div>
+    }
 </div>

src/app/data-display/badge/badge-dot/badge-dot.component.scss

@@ -1,134 +1,115 @@
-igx-badge {
-    --ig-size: var(--ig-size-small);
-}
-
-igx-avatar {
-    --size: 40px;
-}
+@use "sass:list";
+@use "igniteui-theming/sass/typography" as *;
 
-.icon-example igx-badge,
-.avatar-example igx-badge,
-.nav-icon igx-badge {
-    position: absolute;
-}
+:host {
+    --sample-accent: #0057a9;
 
-.icon-example igx-badge {
-    inset-block-start: 0;
-    inset-inline-end: 2px;
+    display: grid;
+    grid-auto-flow: column;
+    place-content: center;
+    place-items: center;
+    column-gap: rem(40px);
+    min-height: 8.5rem;
 }
 
-.avatar-example igx-badge {
-	inset-block-start: -0.25rem;
-	inset-inline-end: -2px;
-}
+igx-badge {
+    --ig-size: var(--ig-size-small);
 
-.nav-icon igx-badge {
-    inset-block-start: -2px;
-    inset-inline-end: -6px;
+    position: absolute;
+    inset-block-start: anchor(14.5%);
+    inset-inline-start: anchor(85.5%);
+    translate: -50% -50%;
 }
 
-.badge-dot {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 40px;
-    min-height: 8.5rem;
-}
+$anchors: icon, avatar;
 
-.dot-example {
-    position: relative;
-}
+@each $anchor in $anchors {
+    $i: list.index($anchors, $anchor);
 
-.icon-example,
-.avatar-example,
-.icon-circle {
-    display: flex;
-    align-items: center;
-    width: 36px;
-    height: 36px;
-}
+    .#{$anchor}-anchor {
+        anchor-name: --#{$anchor};
+    }
 
-.icon-circle {
-    justify-content: center;
-    border-radius: 50%;
-    background: var(--ig-gray-200);
-    color: var(--ig-gray-800);
+    :host > igx-badge:nth-of-type(#{$i}) {
+        position-anchor: --#{$anchor};
+    }
 }
 
 .notifications-card,
 .nav-card {
     background: var(--ig-surface-500);
-    border-radius: 4px;
-    box-shadow: 0 1px 3px hsl(from var(--ig-gray-900) h s l / 0.12);
+    border-radius: rem(4px);
+    box-shadow: 0 rem(1px) rem(3px) hsl(from var(--ig-gray-900) h s l / 0.12);
 }
 
 .notifications-card {
-    min-width: 272px;
-    padding: 8px 0;
+    min-width: rem(270px);
+    padding-block: rem(8px);
 }
 
 .notification-row {
+    @include type-style("body-2") {
+        margin: 0;
+    }
+
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    font-size: 14px;
+    gap: rem(8px);
+    padding: rem(8px) rem(12px);
     color: var(--ig-gray-900);
 }
 
 .row-indicator {
     display: inline-flex;
     justify-content: center;
-    width: 12px;
+    width: rem(12px);
 }
 
 .row-title {
     flex: 1;
 }
 
-.row-time {
-    font-size: 13px;
-    color: var(--ig-gray-900);
-}
-
-.row-time.unread {
-    color: #0057A9;
+.unread {
+    color: var(--sample-accent);
     font-weight: 600;
 }
 
 .row-chevron {
-    --ig-size: 1rem;
     color: var(--ig-gray-600);
-    font-size: 18px;
+    font-size: rem(18px);
 }
 
 .nav-card {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
+    gap: rem(8px);
+    padding: rem(8px) rem(12px);
 }
 
 .nav-item {
+    @include type-style("caption") {
+        margin: 0;
+    }
+
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 4px;
-    min-width: 56px;
-    color: #556c86;
-    font-family: "Aktiv Grotesk", sans-serif;
-    font-size: 13px;
-    font-weight: 400;
-    font-style: normal;
-    line-height: 20px;
-    letter-spacing: 0.3px;
-}
+    gap: rem(4px);
+    min-width: rem(56px);
+    color: var(--ig-gray-700);
 
-.nav-item.active {
-    color: #0057A9;
+    &.active {
+        color: var(--sample-accent);
+    }
 }
 
 .nav-icon {
     position: relative;
     display: inline-flex;
+
+    igx-badge {
+        position: absolute;
+        inset-block: rem(-2px) auto;
+        inset-inline: auto rem(-6px);
+    }
 }

src/app/data-display/badge/badge-icon/badge-icon.component.html

@@ -1,17 +1,8 @@
-<div class="badge-icon">
-    @for (item of badges; track item.label) {
-        <div class="badge-icon-item">
-            <div class="icon-wrapper">
-                <igx-badge [icon]="item.icon" [type]="item.type"></igx-badge>
-            </div>
-            <span>{{ item.label }}</span>
-        </div>
-    }
-    <div class="badge-icon-item">
-        <div class="icon-wrapper avatar-wrapper">
-            <igx-avatar initials="AZ" shape="circle" size="small"></igx-avatar>
-            <igx-badge icon="close" type="error" outlined ></igx-badge>
-        </div>
-        <span>on avatar</span>
-    </div>
-</div>
+@for (item of badges; track item.label) {
+    <igx-badge [icon]="item.icon" [type]="item.type"></igx-badge>
+    <span>{{ item.label }}</span>
+}
+
+<igx-avatar initials="AZ" shape="circle" size="small"></igx-avatar>
+<igx-badge icon="close" type="error" outlined></igx-badge>
+<span>on avatar</span>