feat(components/modals): add inline-help support for modals

apps/code-examples/src/app/app.component.html

@@ -263,6 +263,7 @@
     <ul>
       <li><a routerLink="modals/confirm">Confirm</a></li>
       <li><a routerLink="modals/modal">Modal</a></li>
+      <li><a routerLink="modals/inline-help">Modal (inline-help)</a></li>
     </ul>
   </li>
 

apps/code-examples/src/app/code-examples/modals/inline-help/modal-demo-modal.component.html

@@ -0,0 +1,23 @@
+<sky-modal>
+  <sky-modal-header>
+    Modal title
+    <sky-help-inline class="sky-control-help"></sky-help-inline>
+  </sky-modal-header>
+  <sky-modal-content></sky-modal-content>
+  <sky-modal-footer>
+    <button
+      class="sky-btn sky-btn-primary sky-margin-inline-sm"
+      type="button"
+      (click)="instance.save()"
+    >
+      Save
+    </button>
+    <button
+      class="sky-btn sky-btn-link"
+      type="button"
+      (click)="instance.close()"
+    >
+      Close
+    </button>
+  </sky-modal-footer>
+</sky-modal>

apps/code-examples/src/app/code-examples/modals/inline-help/modal-demo-modal.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { SkyModalInstance } from '@skyux/modals';
+
+@Component({
+  selector: 'app-modal-demo-modal',
+  templateUrl: './modal-demo-modal.component.html',
+})
+export class ModalDemoModalComponent {
+  constructor(public instance: SkyModalInstance) {}
+}

apps/code-examples/src/app/code-examples/modals/inline-help/modal-demo.component.html

@@ -0,0 +1,7 @@
+<button
+  class="sky-btn sky-btn-default"
+  type="button"
+  (click)="onOpenModalClick()"
+>
+  Open modal with inline help
+</button>

apps/code-examples/src/app/code-examples/modals/inline-help/modal-demo.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { SkyModalConfiguration, SkyModalService } from '@skyux/modals';
+
+import { ModalDemoModalComponent } from './modal-demo-modal.component';
+
+@Component({
+  selector: 'app-modal-demo',
+  templateUrl: './modal-demo.component.html',
+})
+export class ModalDemoComponent {
+  public modalSize = 'medium';
+
+  #modalSvc: SkyModalService;
+
+  constructor(modalSvc: SkyModalService) {
+    this.#modalSvc = modalSvc;
+  }
+
+  public onOpenModalClick(): void {
+    const options: SkyModalConfiguration = {
+      size: this.modalSize,
+    };
+
+    this.#modalSvc.open(ModalDemoModalComponent, options);
+  }
+}

apps/code-examples/src/app/code-examples/modals/inline-help/modal-demo.module.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { SkyIdModule } from '@skyux/core';
+import { SkyInputBoxModule } from '@skyux/forms';
+import { SkyHelpInlineModule } from '@skyux/indicators';
+import { SkyModalModule } from '@skyux/modals';
+
+import { ModalDemoModalComponent } from './modal-demo-modal.component';
+import { ModalDemoComponent } from './modal-demo.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    SkyIdModule,
+    SkyInputBoxModule,
+    SkyModalModule,
+    SkyHelpInlineModule,
+  ],
+  declarations: [ModalDemoComponent, ModalDemoModalComponent],
+  exports: [ModalDemoComponent],
+})
+export class ModalDemoModule {}

apps/code-examples/src/app/code-examples/modals/modal/modal-demo.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { SkyModalService } from '@skyux/modals';
+import { SkyModalConfiguration, SkyModalService } from '@skyux/modals';
 
 import { ModalDemoModalComponent } from './modal-demo-modal.component';
 
@@ -19,12 +19,11 @@ export class ModalDemoComponent {
   }
 
   public onOpenModalClick(): void {
-    const modalInstanceType: any = ModalDemoModalComponent;
-    const options: any = {
+    const options: SkyModalConfiguration = {
       helpKey: this.helpKey,
       size: this.modalSize,
     };
 
-    this.#modalSvc.open(modalInstanceType, options);
+    this.#modalSvc.open(ModalDemoModalComponent, options);
   }
 }

apps/code-examples/src/app/features/modals.module.ts

@@ -3,12 +3,15 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { ConfirmDemoComponent as ConfirmConfirmDemoComponent } from '../code-examples/modals/confirm/confirm-demo.component';
 import { ConfirmDemoModule as ConfirmConfirmDemoModule } from '../code-examples/modals/confirm/confirm-demo.module';
+import { ModalDemoComponent as ModalInlineHelpDemoComponent } from '../code-examples/modals/inline-help/modal-demo.component';
+import { ModalDemoModule as ModalInlineHelpModule } from '../code-examples/modals/inline-help/modal-demo.module';
 import { ModalDemoComponent as ModalModalDemoComponent } from '../code-examples/modals/modal/modal-demo.component';
 import { ModalDemoModule as ModalModalDemoModule } from '../code-examples/modals/modal/modal-demo.module';
 
 const routes: Routes = [
   { path: 'confirm', component: ConfirmConfirmDemoComponent },
   { path: 'modal', component: ModalModalDemoComponent },
+  { path: 'inline-help', component: ModalInlineHelpDemoComponent },
 ];
 
 @NgModule({
@@ -22,6 +25,7 @@ export class ModalsFeatureRoutingModule {}
     ConfirmConfirmDemoModule,
     ModalModalDemoModule,
     ModalsFeatureRoutingModule,
+    ModalInlineHelpModule,
   ],
 })
 export class ModalsFeatureModule {}

apps/playground/src/app/components/modal/modal-close-confirm.component.html

@@ -1,5 +1,11 @@
 <sky-modal>
-  <sky-modal-header> Title </sky-modal-header>
+  <sky-modal-header>
+    Title
+    <sky-help-inline
+      *ngIf="showHelp"
+      class="sky-control-help"
+    ></sky-help-inline>
+  </sky-modal-header>
   <sky-modal-content>
     <label for="unsaved-work-checkbox">
       Is there unsaved work?

apps/playground/src/app/components/modal/modal-close-confirm.component.ts

@@ -12,6 +12,7 @@ import {
   templateUrl: './modal-close-confirm.component.html',
 })
 export class ModalCloseConfirmComponent {
+  public showHelp = false;
   public hasUnsavedWork = true;
   public confirmationConfig = true;
 

apps/playground/src/app/components/modal/modal-demo.component.html

@@ -1,6 +1,10 @@
 <sky-modal>
   <sky-modal-header>
     {{ title }}
+    <sky-help-inline
+      *ngIf="showHelp"
+      class="sky-control-help"
+    ></sky-help-inline>
   </sky-modal-header>
   <sky-modal-content>
     <div>Content A</div>

apps/playground/src/app/components/modal/modal-demo.component.ts

@@ -7,5 +7,6 @@ import { SkyModalService } from '@skyux/modals';
   providers: [SkyModalService],
 })
 export class ModalDemoComponent {
+  public showHelp = false;
   public title = 'Hello world';
 }

apps/playground/src/app/components/modal/modal-form-demo.component.html

@@ -1,6 +1,10 @@
 <sky-modal>
   <sky-modal-header>
     {{ title }}
+    <sky-help-inline
+      *ngIf="showHelp"
+      class="sky-control-help"
+    ></sky-help-inline>
   </sky-modal-header>
   <sky-modal-content>
     <sky-input-box class="sky-margin-stacked-lg">

apps/playground/src/app/components/modal/modal-form-demo.component.ts

@@ -8,6 +8,7 @@ import { SkyModalInstance, SkyModalService } from '@skyux/modals';
 })
 export class ModalFormDemoComponent {
   public title = 'Modal form with scroll';
+  public showHelp = false;
 
   constructor(public instance: SkyModalInstance) {}
 }

apps/playground/src/app/components/modal/modal-fullpage-demo.component.html

@@ -1,6 +1,10 @@
 <sky-modal>
   <sky-modal-header>
     {{ title }}
+    <sky-help-inline
+      *ngIf="showHelp"
+      class="sky-control-help"
+    ></sky-help-inline>
   </sky-modal-header>
   <sky-modal-content> Content for Full Screen </sky-modal-content>
   <sky-modal-footer> Footer </sky-modal-footer>

apps/playground/src/app/components/modal/modal-fullpage-demo.component.ts

@@ -7,5 +7,6 @@ import { SkyModalService } from '@skyux/modals';
   providers: [SkyModalService],
 })
 export class ModalFullPageDemoComponent {
+  public showHelp = false;
   public title = 'Hello world';
 }

apps/playground/src/app/components/modal/modal-large-demo.component.html

@@ -1,6 +1,10 @@
 <sky-modal>
   <sky-modal-header>
     {{ title }}
+    <sky-help-inline
+      *ngIf="showHelp"
+      class="sky-control-help"
+    ></sky-help-inline>
   </sky-modal-header>
   <sky-modal-content> Content A </sky-modal-content>
   <sky-modal-footer> Footer </sky-modal-footer>

apps/playground/src/app/components/modal/modal-large-demo.component.ts

@@ -7,5 +7,6 @@ import { SkyModalService } from '@skyux/modals';
   providers: [SkyModalService],
 })
 export class ModalLargeDemoComponent {
+  public showHelp = false;
   public title = 'Hello world';
 }

apps/playground/src/app/components/modal/modal-tiled-demo.component.html

@@ -1,6 +1,10 @@
 <sky-modal [tiledBody]="true">
   <sky-modal-header>
     {{ title }}
+    <sky-help-inline
+      *ngIf="showHelp"
+      class="sky-control-help"
+    ></sky-help-inline>
   </sky-modal-header>
   <sky-modal-content>
     <sky-tile>

apps/playground/src/app/components/modal/modal-tiled-demo.component.ts

@@ -7,5 +7,6 @@ import { SkyModalService } from '@skyux/modals';
   providers: [SkyModalService],
 })
 export class ModalTiledDemoComponent {
+  public showHelp = false;
   public title = 'Hello world';
 }

apps/playground/src/app/components/modal/modal-visual.component.html

@@ -1,3 +1,10 @@
+<div>
+  <label>
+    <input type="checkbox" [(ngModel)]="showHelp" />
+    Show inline help
+  </label>
+</div>
+
 <div>
   <button class="sky-btn sky-btn-primary" type="button" (click)="openModal()">
     Open modal

apps/playground/src/app/components/modal/modal-visual.component.ts

@@ -20,6 +20,7 @@ import { ModalTiledDemoComponent } from './modal-tiled-demo.component';
   styleUrls: ['./modal-visual.component.scss'],
 })
 export class ModalVisualComponent {
+  public showHelp = false;
   public buttonsHidden: boolean;
 
   constructor(private modal: SkyModalService) {}
@@ -127,6 +128,8 @@ export class ModalVisualComponent {
       this.showButtons();
     });
 
+    instance.componentInstance.showHelp = this.showHelp;
+
     return instance;
   }
 }

apps/playground/src/app/components/modal/modal-visual.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { SkyInputBoxModule } from '@skyux/forms';
+import { SkyHelpInlineModule } from '@skyux/indicators';
 import { SkyModalModule } from '@skyux/modals';
 import { SkyTilesModule } from '@skyux/tiles';
 
@@ -35,6 +36,7 @@ import { ModalVisualComponent } from './modal-visual.component';
     SkyTilesModule,
     SkyModalModule,
     ModalVisualRoutingModule,
+    SkyHelpInlineModule,
   ],
 })
 export class ModalVisualModule {

libs/components/modals/src/lib/modules/modal/fixtures/modal-fixtures.module.ts

@@ -1,12 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MutationObserverService } from '@skyux/core';
 import { SkyThemeService } from '@skyux/theme';
 
 import { SkyModalModule } from '../modal.module';
 
-import { ModalMockMutationObserverService } from './mock-modal-mutation-observer';
 import { ModalMockThemeService } from './mock-theme.service';
 import { ModalAutofocusTestComponent } from './modal-autofocus.component.fixture';
 import { ModalFooterTestComponent } from './modal-footer.component.fixture';
@@ -34,10 +32,6 @@ import { ModalTestComponent } from './modal.component.fixture';
       provide: SkyThemeService,
       useClass: ModalMockThemeService,
     },
-    {
-      provide: MutationObserverService,
-      useClass: ModalMockMutationObserverService,
-    },
   ],
 })
 export class SkyModalFixturesModule {}

libs/components/modals/src/lib/modules/modal/modal-header.component.html

@@ -3,6 +3,10 @@
   [skyThemeClass]="{
     'sky-font-display-3': 'modern'
   }"
+  skyTrim
 >
   <ng-content></ng-content>
 </h1>
+<span class="sky-control-help-container" skyTrim
+  ><ng-content select=".sky-control-help"></ng-content
+></span>

libs/components/modals/src/lib/modules/modal/modal-header.component.scss

@@ -5,6 +5,7 @@
 h1 {
   margin: 0;
   line-height: 1.2;
+  display: inline;
 }
 
 @include sky-theme-modern-dark {

libs/components/modals/src/lib/modules/modal/modal.component.spec.ts

@@ -30,6 +30,7 @@ import { SkyModalBeforeCloseHandler } from './modal-before-close-handler';
 import { SkyModalComponentAdapterService } from './modal-component-adapter.service';
 import { SkyModalHostService } from './modal-host.service';
 import { SkyModalInstance } from './modal-instance';
+import { SkyModalScrollShadowDirective } from './modal-scroll-shadow.directive';
 import { SkyModalService } from './modal.service';
 
 describe('Modal component', () => {
@@ -106,10 +107,6 @@ describe('Modal component', () => {
     return TestBed.inject(Router);
   }
 
-  function getMockMutationObserverService(): ModalMockMutationObserverService {
-    return TestBed.inject<any>(MutationObserverService);
-  }
-
   function openModal<T>(modalType: T, config?: Record<string, any>) {
     const modalInstance = getModalService().open(modalType, config);
 
@@ -901,8 +898,21 @@ describe('Modal component', () => {
     }
 
     beforeEach(() => {
+      const modalMockMutationObserverService =
+        new ModalMockMutationObserverService();
+
+      TestBed.overrideDirective(SkyModalScrollShadowDirective, {
+        add: {
+          providers: [
+            {
+              provide: MutationObserverService,
+              useValue: modalMockMutationObserverService,
+            },
+          ],
+        },
+      });
       mutationObserverCreateSpy = spyOn(
-        getMockMutationObserverService(),
+        modalMockMutationObserverService,
         'create'
       ).and.callThrough();
 

libs/components/modals/src/lib/modules/modal/modal.interface.ts

@@ -62,6 +62,7 @@ export interface SkyModalConfigurationInterface {
   tiledBody?: boolean;
 
   /**
+   * @deprecated To display a help button in the modal header, include a help button element, such as `sky-help-inline`, in the `sky-modal-header` element and a `sky-control-help` CSS class on that help button element
    * Specifies a `helpKey` string. This property displays
    * the <i class="fa fa-question-circle" aria-hidden="true"></i> button in the modal header.
    * When users click this button, the `helpOpened` event broadcasts the `helpKey` parameter.