fix(components/help-inline): implement @skyux/icon instead of FontA…

…wesome (#2399)
blackbaud · Jun 26, 2024 · 366e9c0 · 366e9c0
1 parent 1499c19
commit 366e9c0
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 33 deletions.
diff --git a/libs/components/help-inline/ng-package.json b/libs/components/help-inline/ng-package.json
@@ -5,5 +5,6 @@
  "entryFile": "src/index.ts",
  "styleIncludePaths": ["../../.."]
  },
+ "allowedNonPeerDependencies": ["@skyux/icon"],
  "inlineStyleLanguage": "scss"
 }
diff --git a/libs/components/help-inline/package.json b/libs/components/help-inline/package.json
@@ -25,6 +25,7 @@
  "@skyux/theme": "0.0.0-PLACEHOLDER"
  },
  "dependencies": {
+ "@skyux/icon": "0.0.0-PLACEHOLDER",
  "tslib": "^2.6.2"
  }
 }
diff --git a/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.html b/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.html
@@ -21,14 +21,19 @@
  [skyPopover]="popoverContent ? popover : undefined"
  (click)="onClick()"
 >
- <i *skyThemeIf="'default'" class="sky-icon fa fa-info-circle"></i>
- <span *skyThemeIf="'modern'" aria-hidden="true" class="help-inline-icon"
- ><span class="sky-icon-stack fa-stack fa-xs sky-icon-stack-size-xs"
- ><i class="sky-icon fa-stack-2x sky-i-circle-solid"></i
- ><i
- class="sky-icon fa-stack-1x fa-inverse sky-icon-inverse sky-i-help-i"
- ></i></span
- ></span>
+ <sky-icon *skyThemeIf="'default'" icon="info-circle" />
+ <sky-icon-stack
+ *skyThemeIf="'modern'"
+ size="xs"
+ [baseIcon]="{
+ icon: 'circle-solid',
+ iconType: 'skyux'
+ }"
+ [topIcon]="{
+ icon: 'help-i',
+ iconType: 'skyux'
+ }"
+ />
 </button>
 
 <sky-popover

diff --git a/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.scss b/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.scss
@@ -22,28 +22,18 @@
 }
 
 @include mixins.sky-theme-modern {
+ sky-icon-stack {
+ display: inline-flex;
+ }
  .sky-help-inline {
  // The button mixin sets the border radius to 6px but we only want 3px on help inline buttons.
  border-radius: 3px;
+ ::ng-deep .fa-stack-2x {
+ font-size: 16px;
+ }
 
- .help-inline-icon {
- display: inline-flex;
- vertical-align: top;
-
- .sky-icon-stack {
- display: inline-flex;
- width: 1.25em;
- height: 1.25em;
- line-height: 1.25em;
-
- .fa-stack-2x {
- font-size: 16px;
- }
-
- .fa-stack-1x {
- font-size: 10px;
- }
- }
+ ::ng-deep .fa-stack-1x {
+ font-size: 10px;
  }
 
  // The 0px and 5px padding is because we want 1px top/bottom and 6px left/right but the mixin

diff --git a/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.spec.ts b/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.spec.ts
@@ -228,6 +228,27 @@ describe('Help inline component', () => {
  );
  });
 
+ it('should use sky-icon in default theme', async () => {
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.querySelector('sky-icon')).toExist();
+ expect(fixture.nativeElement.querySelector('sky-icon-stack')).toBe(null);
+ });
+
+ it('should use sky-icon-stack in modern', async () => {
+ mockThemeSvc.settingsChange.next({
+ currentSettings: new SkyThemeSettings(
+ SkyTheme.presets.modern,
+ SkyThemeMode.presets.light,
+ ),
+ previousSettings: mockThemeSvc.settingsChange.value.currentSettings,
+ });
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.querySelector('sky-icon')).toBeNull();
+ expect(fixture.nativeElement.querySelector('sky-icon-stack')).toExist();
+ });
+
  it('should set aria label with labelText', async () => {
  component.labelText = 'test component';
 

diff --git a/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.ts b/libs/components/help-inline/src/lib/modules/help-inline/help-inline.component.ts
@@ -7,12 +7,8 @@ import {
  TemplateRef,
  inject,
 } from '@angular/core';
-import {
- SkyHelpService,
- SkyIdModule,
- SkyIdService,
- SkyTrimModule,
-} from '@skyux/core';
+import { SkyHelpService, SkyIdModule, SkyIdService } from '@skyux/core';
+import { SkyIconModule } from '@skyux/icon';
 import { SkyPopoverModule } from '@skyux/popovers';
 import { SkyThemeModule } from '@skyux/theme';
 
@@ -37,10 +33,10 @@ import { SkyHelpInlineAriaHaspopupPipe } from './help-inline-aria-haspopup.pipe'
  SkyHelpInlineAriaExpandedPipe,
  SkyHelpInlineAriaHaspopupPipe,
  SkyHelpInlineResourcesModule,
+ SkyIconModule,
  SkyIdModule,
  SkyPopoverModule,
  SkyThemeModule,
- SkyTrimModule,
  ],
 })
 export class SkyHelpInlineComponent {