feat(components/popovers): implement disclosure pattern for popovers

.eslintrc-overrides.json

@@ -47,9 +47,11 @@
         "@angular-eslint/template/interactive-supports-focus": ["warn"],
         "@angular-eslint/template/label-has-associated-control": ["warn"],
         "@angular-eslint/template/no-any": ["error"],
-        "@angular-eslint/template/no-call-expression": ["warn"],
         "@angular-eslint/template/no-distracting-elements": ["warn"],
-        "@angular-eslint/template/no-inline-styles": ["warn"],
+        "@angular-eslint/template/no-inline-styles": [
+          "warn",
+          { "allowBindToStyle": true, "allowNgStyle": true }
+        ],
         "@angular-eslint/template/no-interpolation-in-attributes": ["warn"],
         "@angular-eslint/template/no-positive-tabindex": ["warn"],
         "@angular-eslint/template/prefer-control-flow": ["warn"],

apps/code-examples/src/app/code-examples/popovers/popover/basic/demo.component.html

@@ -1,27 +1,14 @@
 <button
   class="sky-btn sky-btn-default sky-margin-inline-sm"
+  data-sky-id="popover-demo"
   type="button"
   [skyPopover]="myPopover"
   [skyPopoverAlignment]="popoverAlignment"
   [skyPopoverPlacement]="popoverPlacement"
-  data-sky-id="popover-demo"
 >
-  Open popover on click
+  Open popover
 </button>
 
-<button
-  class="sky-btn sky-btn-link"
-  type="button"
-  [skyPopover]="myPopover"
-  skyPopoverTrigger="mouseenter"
->
-  Open popover on hover
-</button>
-
-<sky-popover
-  [dismissOnBlur]="dismissOnBlur"
-  [popoverTitle]="popoverTitle"
-  #myPopover
->
+<sky-popover #myPopover [popoverTitle]="popoverTitle">
   {{ popoverBody }}
 </sky-popover>

libs/components/ag-grid/src/lib/modules/ag-grid/cell-validator/ag-grid-cell-validator-tooltip.component.html

@@ -1,4 +1,5 @@
 <div
+  skyPopoverTrigger="mouseenter"
   [skyPopover]="validatorPopover"
   [skyPopoverMessageStream]="popoverMessageStream"
   class="sky-validator-cell"

libs/components/forms/testing/src/checkbox/checkbox-harness.spec.ts

@@ -259,6 +259,7 @@ describe('Checkbox harness', () => {
     });
     const helpSvc = TestBed.inject(SkyHelpService);
     const helpSpy = spyOn(helpSvc, 'openHelp');
+    fixture.componentInstance.helpKey = 'helpKey.html';
     fixture.componentInstance.helpPopoverContent = undefined;
     fixture.detectChanges();
 

libs/components/forms/testing/src/checkbox/fixtures/checkbox-harness-test.component.html

@@ -29,7 +29,7 @@
       [labelHidden]="hidePhoneLabel"
       data-sky-id="my-phone-checkbox"
       formControlName="phone"
-      helpKey="helpKey.html"
+      [helpKey]="helpKey"
       helpPopoverContent="(xxx)xxx-xxxx"
       helpPopoverTitle="Format"
       labelText="Phone"

libs/components/forms/testing/src/field-group/field-group-harness.spec.ts

@@ -155,6 +155,8 @@ describe('Field group harness', () => {
     const helpSvc = TestBed.inject(SkyHelpService);
     const helpSpy = spyOn(helpSvc, 'openHelp');
 
+    fixture.componentInstance.helpKey = 'helpKey.html';
+
     await fieldGroupHarness.clickHelpInline();
     fixture.detectChanges();
     await fixture.whenStable();

libs/components/forms/testing/src/field-group/fixtures/field-group.component.fixture.ts

@@ -32,7 +32,7 @@ export class FieldGroupComponent {
   public headingHidden = false;
   public headingLevel: SkyFieldGroupHeadingLevel = 3;
   public headingStyle: SkyFieldGroupHeadingStyle = 3;
-  public helpKey: string | undefined = 'helpKey.html';
+  public helpKey: string | undefined;
   public helpPopoverContent: string | undefined = 'Popover content';
   public helpPopoverTitle = 'Popover title';
 

libs/components/forms/testing/src/input-box/fixtures/input-box-harness-test.component.ts

@@ -21,7 +21,7 @@ export class InputBoxHarnessTestComponent {
   public easyModeDisabled = false;
   public easyModeHelpContent: string | TemplateRef<unknown> | undefined =
     'Help content';
-  public easyModeHelpKey: string | undefined = 'helpKey.html';
+  public easyModeHelpKey: string | undefined;
   public easyModeHelpTitle = 'Help title';
   public easyModeLabel: string | undefined = 'Last name (easy mode)';
   public easyModeStacked = false;

libs/components/forms/testing/src/input-box/input-box-harness.spec.ts

@@ -144,19 +144,20 @@ describe('Input box harness', () => {
     );
   });
 
-  it('should open help popover and widget when clicked', async () => {
+  it('should open widget when clicked', async () => {
     const { fixture, inputBoxHarness } = await setupTest({
       dataSkyId: DATA_SKY_ID_EASY_MODE,
     });
 
+    fixture.componentInstance.easyModeHelpKey = 'helpKey.html';
+
     const helpSvc = TestBed.inject(SkyHelpService);
     const helpSpy = spyOn(helpSvc, 'openHelp');
 
     await inputBoxHarness.clickHelpInline();
     fixture.detectChanges();
     await fixture.whenStable();
 
-    await expectAsync(inputBoxHarness.getHelpPopoverContent()).toBeResolved();
     expect(helpSpy).toHaveBeenCalledWith({ helpKey: 'helpKey.html' });
   });
 

libs/components/help-inline/src/lib/modules/help-inline/aria-label.pipe.ts

@@ -0,0 +1,32 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ * Sets the value of `aria-label` for inline help buttons.
+ * @internal
+ */
+@Pipe({
+  name: 'skyHelpInlineAriaLabel',
+  standalone: true,
+})
+export class SkyHelpInlineAriaLabelPipe implements PipeTransform {
+  public transform(
+    ariaLabel: string | undefined,
+    labelText: string | undefined,
+    labelledBy: string | undefined,
+    defaultAriaLabel: string | undefined,
+  ): string | undefined {
+    if (labelledBy) {
+      return;
+    }
+
+    if (labelText) {
+      return labelText;
+    }
+
+    if (ariaLabel) {
+      return ariaLabel;
+    }
+
+    return defaultAriaLabel;
+  }
+}

libs/components/help-inline/src/lib/modules/help-inline/button-help-key.component.ts

@@ -0,0 +1,63 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+  output,
+} from '@angular/core';
+import { SKY_HELP_GLOBAL_OPTIONS, SkyHelpService } from '@skyux/core';
+
+/**
+ * @internal
+ */
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule],
+  selector: 'sky-help-inline-help-key-button',
+  standalone: true,
+  styleUrls: [
+    './help-inline.default.component.scss',
+    './help-inline.modern.component.scss',
+  ],
+  template: `
+    <button
+      class="sky-help-inline"
+      type="button"
+      [attr.aria-controls]="
+        (helpSvc?.widgetReadyStateChange | async)
+          ? globalOptions?.ariaControls
+          : null
+      "
+      [attr.aria-haspopup]="globalOptions?.ariaHaspopup"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-labelledby]="ariaLabelledby()"
+      [ngClass]="{
+        'sky-help-inline-hidden': !helpSvc
+      }"
+      (click)="openHelpKey()"
+    >
+      <ng-content />
+    </button>
+  `,
+})
+export class SkyHelpInlineHelpKeyButtonComponent {
+  public actionClick = output<void>();
+  public ariaLabel = input<string | undefined>();
+  public ariaLabelledby = input<string | undefined>();
+  public helpKey = input.required<string>();
+
+  protected readonly globalOptions = inject(SKY_HELP_GLOBAL_OPTIONS, {
+    optional: true,
+  });
+
+  protected readonly helpSvc = inject(SkyHelpService, { optional: true });
+
+  protected openHelpKey(): void {
+    this.actionClick.emit();
+
+    this.helpSvc?.openHelp({
+      helpKey: this.helpKey(),
+    });
+  }
+}

libs/components/help-inline/src/lib/modules/help-inline/button-popover.component.ts

@@ -0,0 +1,61 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  TemplateRef,
+  computed,
+  input,
+  output,
+} from '@angular/core';
+import { SkyPopoverModule } from '@skyux/popovers';
+
+/**
+ * @internal
+ */
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, SkyPopoverModule],
+  selector: 'sky-help-inline-popover-button',
+  standalone: true,
+  styleUrls: [
+    './help-inline.default.component.scss',
+    './help-inline.modern.component.scss',
+  ],
+  template: `
+    <button
+      class="sky-help-inline"
+      type="button"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-labelledby]="ariaLabelledby()"
+      [skyPopover]="popoverRef"
+      (click)="actionClick.emit()"
+    >
+      <ng-content />
+    </button>
+    <sky-popover #popoverRef [popoverTitle]="popoverTitle()">
+      @if (popoverTemplate(); as template) {
+        <ng-container *ngTemplateOutlet="template" />
+      } @else {
+        <p class="sky-help-inline-popover-text">{{ popoverContent() }}</p>
+      }
+    </sky-popover>
+  `,
+})
+export class SkyHelpInlinePopoverButtonComponent {
+  public actionClick = output<void>();
+  public ariaControls = input<string | undefined>();
+  public ariaLabel = input<string | undefined>();
+  public ariaLabelledby = input<string | undefined>();
+  public popoverContent = input.required<string | TemplateRef<unknown>>();
+  public popoverTitle = input<string | undefined>();
+
+  protected popoverTemplate = computed(() => {
+    const value = this.popoverContent();
+
+    if (value instanceof TemplateRef) {
+      return value;
+    }
+
+    return undefined;
+  });
+}