fix indicators styles, address review

blackbaud · Feb 28, 2025 · 5e5f927 · 5e5f927
1 parent 30f7453
commit 5e5f927
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 86 deletions.
diff --git a/libs/components/icon/src/lib/modules/icon/icon-svg.component.scss b/libs/components/icon/src/lib/modules/icon/icon-svg.component.scss
@@ -1,76 +1,78 @@
 @use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
 
-@include compatMixins.sky-default-overrides('.sky-icon-svg') {
+@include compatMixins.sky-default-host-overrides() {
   --sky-override-sky-icon-svg-size-xs: 8px;
   --sky-override-sky-icon-svg-size-s: 16px;
   --sky-override-sky-icon-svg-size-m: 20px;
   --sky-override-sky-icon-svg-size-l: 24px;
   --sky-override-sky-icon-svg-size-xl: 32px;
 }
 
-.sky-icon-svg {
+:host {
   display: inline-flex;
   --sky-icon-svg-img-size: var(
     --sky-override-sky-icon-svg-size-s,
     var(--sky-size-icon-s)
   );
 
-  &-responsive-md {
-    --sky-icon-svg-img-size: 1em;
-  }
-
-  &-responsive-lg {
-    .sky-icon-svg-img {
-      transform: scale(1.33);
+  &.sky-icon-svg {
+    &-responsive-md {
+      --sky-icon-svg-img-size: 1em;
     }
 
-    .sky-icon-svg-container {
-      margin: 0 0.166em;
+    &-responsive-lg {
+      .sky-icon-svg-img {
+        transform: scale(1.33);
+      }
+
+      .sky-icon-svg-container {
+        margin: 0 0.166em;
+      }
     }
-  }
 
-  &-responsive-2x {
-    --sky-icon-svg-img-size: 2em;
-  }
+    &-responsive-2x {
+      --sky-icon-svg-img-size: 2em;
+    }
 
-  &-responsive-3x {
-    --sky-icon-svg-img-size: 3em;
-  }
+    &-responsive-3x {
+      --sky-icon-svg-img-size: 3em;
+    }
 
-  &-responsive-4x {
-    --sky-icon-svg-img-size: 4em;
-  }
+    &-responsive-4x {
+      --sky-icon-svg-img-size: 4em;
+    }
 
-  &-responsive-5x {
-    --sky-icon-svg-img-size: 5em;
-  }
+    &-responsive-5x {
+      --sky-icon-svg-img-size: 5em;
+    }
 
-  &-xs {
-    --sky-icon-svg-img-size: var(
-      --sky-override-sky-icon-svg-size-xs,
-      var(--sky-size-icon-xs)
-    );
-  }
+    &-xs {
+      --sky-icon-svg-img-size: var(
+        --sky-override-sky-icon-svg-size-xs,
+        var(--sky-size-icon-xs)
+      );
+    }
 
-  &-m {
-    --sky-icon-svg-img-size: var(
-      --sky-override-sky-icon-svg-size-m,
-      var(--sky-size-icon-m)
-    );
-  }
+    &-m {
+      --sky-icon-svg-img-size: var(
+        --sky-override-sky-icon-svg-size-m,
+        var(--sky-size-icon-m)
+      );
+    }
 
-  &-l {
-    --sky-icon-svg-img-size: var(
-      --sky-override-sky-icon-svg-size-l,
-      var(--sky-size-icon-l)
-    );
-  }
+    &-l {
+      --sky-icon-svg-img-size: var(
+        --sky-override-sky-icon-svg-size-l,
+        var(--sky-size-icon-l)
+      );
+    }
 
-  &-xl {
-    --sky-icon-svg-img-size: var(
-      --sky-override-sky-icon-svg-size-xl,
-      var(--sky-size-icon-xl)
-    );
+    &-xl {
+      --sky-icon-svg-img-size: var(
+        --sky-override-sky-icon-svg-size-xl,
+        var(--sky-size-icon-xl)
+      );
+    }
   }
 }
 
@@ -89,11 +91,3 @@
     fill: currentColor;
   }
 }
-
-.sky-i-path-1 {
-  fill: var(--sky-icon-svg-color-input, currentColor);
-}
-
-.sky-i-path-2 {
-  fill: var(--sky-icon-svg-path-2-color-input, #fff);
-}
diff --git a/libs/components/icon/src/lib/modules/icon/icon-svg.component.spec.ts b/libs/components/icon/src/lib/modules/icon/icon-svg.component.spec.ts
@@ -64,7 +64,7 @@ describe('Icon SVG component', () => {
 
   it('should display the resolved icon by ID and responsive size', fakeAsync(() => {
     fixture.componentRef.setInput('iconName', 'test');
-    fixture.componentRef.setInput('responsiveSize', '2x');
+    fixture.componentRef.setInput('relativeSize', '2x');
     detectUrlChanges();
 
     validateIconId('#test-32-line');
@@ -88,7 +88,7 @@ describe('Icon SVG component', () => {
 
   it('should display the resolved icon by ID, responsive size, and variant', fakeAsync(() => {
     fixture.componentRef.setInput('iconName', 'test');
-    fixture.componentRef.setInput('responsiveSize', '2x');
+    fixture.componentRef.setInput('relativeSize', '2x');
     fixture.componentRef.setInput('iconVariant', 'solid');
     detectUrlChanges();
 

diff --git a/libs/components/icon/src/lib/modules/icon/icon-svg.component.ts b/libs/components/icon/src/lib/modules/icon/icon-svg.component.ts
@@ -1,11 +1,6 @@
-import {
-  Component,
-  ViewEncapsulation,
-  computed,
-  inject,
-  input,
-} from '@angular/core';
+import { Component, computed, inject, input } from '@angular/core';
 import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { SkyThemeComponentClassDirective } from '@skyux/theme';
 
 import { catchError, of, switchMap } from 'rxjs';
 
@@ -38,24 +33,24 @@ const FIXED_SIZES = new Map([
   selector: 'sky-icon-svg',
   templateUrl: './icon-svg.component.html',
   styleUrls: ['./icon-svg.component.scss'],
-  encapsulation: ViewEncapsulation.None,
   host: {
     '[class]':
-      'iconSize() ? "sky-icon-svg sky-icon-svg-" + iconSize() : "sky-icon-svg sky-icon-svg-responsive-" + responsiveSize()',
+      'iconSize() ? "sky-icon-svg-" + iconSize() : "sky-icon-svg-responsive-" + relativeSize()',
   },
+  hostDirectives: [SkyThemeComponentClassDirective],
 })
 export class SkyIconSvgComponent {
   readonly #resolverSvc = inject(SkyIconSvgResolverService);
 
   public readonly iconName = input.required<string>();
   public readonly iconSize = input<SkyIconSize | undefined>();
-  public readonly responsiveSize = input<string>('md');
+  public readonly relativeSize = input<string>('md');
   public readonly iconVariant = input<SkyIconVariantType>();
 
   readonly #iconInfo = computed(() => {
     return {
       src: this.iconName(),
-      responsiveSize: this.responsiveSize(),
+      relativeSize: this.relativeSize(),
       iconSize: this.iconSize(),
       variant: this.iconVariant(),
     };
@@ -68,7 +63,7 @@ export class SkyIconSvgComponent {
           info.src,
           info.iconSize !== undefined
             ? FIXED_SIZES.get(info.iconSize)
-            : FLUID_SIZES.get(info.responsiveSize),
+            : FLUID_SIZES.get(info.relativeSize),
           info.variant,
         ),
       ),

diff --git a/libs/components/icon/src/lib/modules/icon/icon.component.html b/libs/components/icon/src/lib/modules/icon/icon.component.html
@@ -1,7 +1,7 @@
 @if (iconName) {
   <sky-icon-svg
     [iconName]="iconName"
-    [responsiveSize]="size"
+    [relativeSize]="size"
     [iconSize]="iconSize()"
     [iconVariant]="variant"
     [attr.data-sky-icon]="iconName"

diff --git a/libs/components/icon/src/lib/modules/icon/icon.component.ts b/libs/components/icon/src/lib/modules/icon/icon.component.ts
@@ -23,7 +23,7 @@ export class SkyIconComponent {
    * The name of
    * [the Font Awesome 4.7 icon](https://fontawesome.com/v4.7/icons/) or the SKY UX icon to
    * display. When specifying a Font Awesome icon, do not prefix the name with `fa-`.
-   * @deprecated Font Awesome icons are deprecated and support will be removed in SKY UX 13. Use `iconName` instead.
+   * @deprecated Font Awesome support will be removed in SKY UX 13. Use iconName instead.
    */
   @Input()
   public icon: string | undefined;

diff --git a/libs/components/icon/testing/src/modules/icon/icon-harness.spec.ts b/libs/components/icon/testing/src/modules/icon/icon-harness.spec.ts
@@ -32,7 +32,7 @@ import { SkyIconHarness } from './icon-harness';
       [iconName]="svgIconName"
       [variant]="svgVariant"
       [iconSize]="svgIconSize"
-      [size]="svgIconResponsiveSize"
+      [size]="svgIconRelativeSize"
     />
   `,
   standalone: false,
@@ -46,7 +46,7 @@ class TestComponent {
   public svgIconName: string | undefined = 'filter';
   public svgVariant: string | undefined;
   public svgIconSize: string | undefined;
-  public svgIconResponsiveSize: string | undefined;
+  public svgIconRelativeSize: string | undefined;
 }
 //#endregion Test component
 
@@ -105,28 +105,28 @@ async function validateFixedWidth(
 async function validateIconSize(
   iconHarness: SkyIconHarness,
   fixture: ComponentFixture<TestComponent>,
-  responsiveSize: string | undefined,
+  relativeSize: string | undefined,
 ): Promise<void> {
-  fixture.componentInstance.size = responsiveSize;
+  fixture.componentInstance.size = relativeSize;
 
   fixture.detectChanges();
 
-  await expectAsync(iconHarness.getIconSize()).toBeResolvedTo(responsiveSize);
+  await expectAsync(iconHarness.getIconSize()).toBeResolvedTo(relativeSize);
 }
 
 async function validateSvgIconSize(
   iconHarness: SkyIconHarness,
   fixture: ComponentFixture<TestComponent>,
-  responsiveSize: string | undefined,
+  relativeSize: string | undefined,
   fixedSize: string | undefined,
 ): Promise<void> {
-  fixture.componentInstance.svgIconResponsiveSize = responsiveSize;
+  fixture.componentInstance.svgIconRelativeSize = relativeSize;
   fixture.componentInstance.svgIconSize = fixedSize;
 
   fixture.detectChanges();
 
   await expectAsync(iconHarness.getIconSize()).toBeResolvedTo(
-    responsiveSize || fixedSize,
+    relativeSize || fixedSize,
   );
 }
 
@@ -156,7 +156,7 @@ async function validateSvgVariant(
 
 const iconTypes = ['fa', 'skyux'];
 const variants = ['line', 'solid'];
-const responsiveSizes = ['lg', '2x', '3x', '4x', '5x'];
+const relativeSizes = ['lg', '2x', '3x', '4x', '5x'];
 const sizes = ['xxxs', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
 
 describe('Icon harness', () => {
@@ -237,7 +237,7 @@ describe('Icon harness', () => {
   it('should return the correct icon size', async () => {
     const { iconHarness, fixture } = await setupTest();
 
-    for (const size of responsiveSizes) {
+    for (const size of relativeSizes) {
       await validateIconSize(iconHarness, fixture, size);
     }
   });
@@ -343,7 +343,7 @@ describe('Icon harness', () => {
       const { iconHarness, fixture } = await setupTest({
         dataSkyId: 'svg-icon',
       });
-      for (const size of responsiveSizes) {
+      for (const size of relativeSizes) {
         await validateSvgIconSize(iconHarness, fixture, size, undefined);
       }
     });

diff --git a/libs/components/indicators/src/lib/modules/alert/alert.default.component.scss b/libs/components/indicators/src/lib/modules/alert/alert.default.component.scss
@@ -98,8 +98,8 @@
 
   .sky-alert-icon {
     color: white;
-    margin-left: -32px;
-    margin-right: 19px;
+    margin-left: -35px;
+    margin-right: 17px;
   }
 
   &.sky-alert-info .sky-alert-icon {

diff --git a/libs/components/theme/src/lib/styles/_theme.scss b/libs/components/theme/src/lib/styles/_theme.scss
@@ -128,3 +128,11 @@ mark.sky-highlight-mark {
 .sky-field-status-success {
   @include mixins.sky-field-status('success');
 }
+
+.sky-i-path-1 {
+  fill: var(--sky-icon-svg-color-input, currentColor);
+}
+
+.sky-i-path-2 {
+  fill: var(--sky-icon-svg-path-2-color-input, #fff);
+}
diff --git a/libs/components/toast/src/lib/modules/toast/toast.component.scss b/libs/components/toast/src/lib/modules/toast/toast.component.scss
@@ -237,8 +237,8 @@ sky-toast {
 
   .sky-toast-icon {
     color: $sky-color-white;
-    margin-left: -32px;
-    margin-right: 20px;
+    margin-left: -35px;
+    margin-right: 19px;
   }
 }