fix: (Core) add semantic icons to Message box and remove the close bu…

…tton
SAP · Dec 17, 2020 · 6b86a29 · 6b86a29
1 parent 356b3bb
commit 6b86a29
Show file tree

Hide file tree

Showing 18 changed files with 959 additions and 497 deletions.
diff --git a/apps/docs/src/app/core/api-files.ts b/apps/docs/src/app/core/api-files.ts
@@ -157,7 +157,7 @@ export const API_FILES = {
         'MessageBoxHeaderComponent',
         'MessageBoxFooterComponent',
         'MessageBoxDefaultComponent',
-        'MessageBoxCloseIconComponent',
+        'MessageBoxSemanticIconComponent',
         'MessageBoxContainerComponent',
         'MessageBoxFooterButtonComponent',
     ],

diff --git a/...core/component-docs/message-box/examples/component-based/message-box-example.component.ts b/...core/component-docs/message-box/examples/component-based/message-box-example.component.ts
@@ -6,8 +6,8 @@ import { TextData } from './component-based-message-box-example.component';
     template: `
         <fd-message-box>
             <fd-message-box-header>
+                <fd-message-box-semantic-icon></fd-message-box-semantic-icon>
                 <h1 fd-title>{{ messageBoxRef.data.title }}</h1>
-                <fd-message-box-close-icon (click)="messageBoxRef.dismiss('Close button')"></fd-message-box-close-icon>
             </fd-message-box-header>
             <fd-message-box-body>
                 {{ messageBoxRef.data.text }}

diff --git a/.../component-docs/message-box/examples/semantic-types/semantic-types-example.component.html b/.../component-docs/message-box/examples/semantic-types/semantic-types-example.component.html
@@ -4,4 +4,5 @@
     <button fd-button fdType="negative" label="Error type" (click)="open('error')"></button>
     <button fd-button fdType="attention" label="Warning type" (click)="open('warning')"></button>
     <button fd-button fdType="positive" label="Success type" (click)="open('success')"></button>
+    <button fd-button fdType="positive" label="Success type & custom icon" (click)="open('success', 'thumb-up')"></button>
 </div>
diff --git a/...re/component-docs/message-box/examples/semantic-types/semantic-types-example.component.ts b/...re/component-docs/message-box/examples/semantic-types/semantic-types-example.component.ts
@@ -9,7 +9,7 @@ export class SemanticTypesExampleComponent {
 
     constructor(private _messageBoxService: MessageBoxService) {}
 
-    open(type: MessageBoxType): void {
+    open(type: MessageBoxType, customSemanticIcon?: string): void {
         const messageBoxRef = this._messageBoxService.open(
             {
                 title: 'Fruit facts',
@@ -19,6 +19,6 @@ export class SemanticTypesExampleComponent {
                 approveButtonCallback: () => messageBoxRef.close('Approved'),
                 cancelButtonCallback: () => messageBoxRef.close('Canceled'),
                 closeButtonCallback: () => messageBoxRef.dismiss('Dismissed')
-            }, { type: type });
+            }, { type: type, showSemanticIcon: true, customSemanticIcon: customSemanticIcon });
     }
 }
diff --git a/...ocs/message-box/examples/template-based/template-based-message-box-example.component.html b/...ocs/message-box/examples/template-based/template-based-message-box-example.component.html
@@ -2,7 +2,6 @@
     <fd-message-box [messageBoxConfig]="messageBoxConfig" [messageBoxRef]="messageBox">
         <fd-message-box-header>
             <h1 fd-title>Fruit facts</h1>
-            <fd-message-box-close-icon (click)="messageBox.dismiss('Close button')"></fd-message-box-close-icon>
         </fd-message-box-header>
         <fd-message-box-body>
             The World's Most Popular Fruit is the tomato.

diff --git a/libs/core/src/lib/message-box/message-box-close-icon/message-box-close-icon.component.ts b/libs/core/src/lib/message-box/message-box-close-icon/message-box-close-icon.component.ts
diff --git a/libs/core/src/lib/message-box/message-box-default/message-box-default.component.html b/libs/core/src/lib/message-box/message-box-default/message-box-default.component.html
@@ -1,10 +1,7 @@
 <fd-message-box>
     <fd-message-box-header>
+        <fd-message-box-semantic-icon *ngIf="_showSemanticIcon"></fd-message-box-semantic-icon>
         <h1 fd-title>{{ _messageBoxContent.title }}</h1>
-        <fd-message-box-close-icon
-            *ngIf="_messageBoxContent.closeButtonCallback"
-            (click)="_onCloseButton()">
-        </fd-message-box-close-icon>
     </fd-message-box-header>
     <fd-message-box-body>
         <ng-container *ngTemplateOutlet="_contentTemplate"></ng-container>

diff --git a/libs/core/src/lib/message-box/message-box-default/message-box-default.component.ts b/libs/core/src/lib/message-box/message-box-default/message-box-default.component.ts
@@ -43,6 +43,11 @@ export class MessageBoxDefaultComponent implements OnInit, AfterViewInit {
         this._setContentTemplate();
     }
 
+    /** @hidden */
+    get _showSemanticIcon(): boolean {
+        return this._messageBoxConfig.showSemanticIcon;
+    }
+
     /** @hidden */
     _onCloseButton(): void {
         this._messageBoxContent.closeButtonCallback();

diff --git a/libs/core/src/lib/message-box/message-box-header/message-box-header.component.html b/libs/core/src/lib/message-box/message-box-header/message-box-header.component.html
@@ -8,13 +8,9 @@
 
     <ng-template #defaultTemplate>
         <div fd-bar-left>
-            <fd-bar-element [fullWidth]="true">
-                <ng-content select="[fd-title]"></ng-content>
-            </fd-bar-element>
-        </div>
-        <div fd-bar-right>
             <fd-bar-element>
-                <ng-content select="fd-message-box-close-icon"></ng-content>
+                <ng-content select="fd-message-box-semantic-icon"></ng-content>
+                <ng-content select="[fd-title]"></ng-content>
             </fd-bar-element>
         </div>
     </ng-template>

diff --git a/libs/core/src/lib/message-box/message-box-header/message-box-header.component.spec.ts b/libs/core/src/lib/message-box/message-box-header/message-box-header.component.spec.ts
@@ -36,7 +36,6 @@ class CustomHeaderTestComponent {
     template: `
         <fd-message-box-header>
             <h1 fd-title>Default Title</h1>
-            <fd-message-box-close-icon></fd-message-box-close-icon>
         </fd-message-box-header>
     `
 })
@@ -84,10 +83,8 @@ describe('MessageBoxHeaderComponent', () => {
         const { fixture } = setup<DefaultHeaderTestComponent>(DefaultHeaderTestComponent);
         await whenStable(fixture);
 
-        const buttonEl = fixture.nativeElement.querySelector('fd-message-box-close-icon');
         const headerEl = fixture.nativeElement.querySelector('.fd-bar--header');
 
-        expect(buttonEl).toBeTruthy();
         expect(headerEl).toBeTruthy();
     });
 

diff --git a/libs/core/src/lib/message-box/message-box-header/message-box-header.component.ts b/libs/core/src/lib/message-box/message-box-header/message-box-header.component.ts
@@ -11,8 +11,8 @@ import {
  *
  * ```html
  * <fd-message-box-header>
- *     <h1 fd-title><!-- Content --></h1>
- *     <fd-message-box-close-icon></fd-message-box-close-icon>
+ *     <fd-message-box-semantic-icon></fd-message-box-semantic-icon>
+ *     <h1 fd-title><!-- Content --></h1> 
  * </fd-message-box-header>
  *
  * Complex header:

diff --git a/.../message-box-close-icon.component.spec.ts → ...ssage-box-semantic-icon.component.spec.ts b/.../message-box-close-icon.component.spec.ts → ...ssage-box-semantic-icon.component.spec.ts
@@ -1,21 +1,21 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MessageBoxConfig } from '../utils/message-box-config.class';
-import { MessageBoxCloseIconComponent } from './message-box-close-icon.component';
+import { MessageBoxSemanticIconComponent } from './message-box-semantic-icon.component';
 
-describe('MessageBoxCloseIconComponent', () => {
-    let component: MessageBoxCloseIconComponent;
-    let fixture: ComponentFixture<MessageBoxCloseIconComponent>;
+describe('MessageBoxSemanticIconComponent', () => {
+    let component: MessageBoxSemanticIconComponent;
+    let fixture: ComponentFixture<MessageBoxSemanticIconComponent>;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [MessageBoxCloseIconComponent],
+            declarations: [MessageBoxSemanticIconComponent],
             providers: [MessageBoxConfig]
         }).compileComponents();
     });
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(MessageBoxCloseIconComponent);
+        fixture = TestBed.createComponent(MessageBoxSemanticIconComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

diff --git a/...core/src/lib/message-box/message-box-semantic-icon/message-box-semantic-icon.component.ts b/...core/src/lib/message-box/message-box-semantic-icon/message-box-semantic-icon.component.ts
@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, Component, Input, Optional } from '@angular/core';
+import {
+    MESSAGE_BOX_CONFIGURABLE_ELEMENT,
+    MessageBoxConfig,
+    MessageBoxConfigurableElement
+} from '../utils/message-box-config.class';
+
+/**
+ * Message box element representing the semantic icon in the message box header.
+ *
+ * ```html
+ * <fd-message-box-semantic-icon></fd-message-box-semantic-icon>
+ * ```
+ */
+@Component({
+    selector: 'fd-message-box-semantic-icon',
+    template: `<i [ngClass]="'sap-icon--' + this._semanticIcon" role="presentation"></i>`,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        { provide: MESSAGE_BOX_CONFIGURABLE_ELEMENT, useExisting: MessageBoxSemanticIconComponent, multi: true }
+    ]
+})
+export class MessageBoxSemanticIconComponent implements MessageBoxConfigurableElement {
+    /** Custom semantic icon */
+    @Input()
+    glyph: string;
+
+    /** @hidden */
+    constructor(@Optional() public messageBoxConfig: MessageBoxConfig) {
+        this.messageBoxConfig = this.messageBoxConfig || {};
+    }
+
+    /** @hidden */
+    get _showSemanticIcon(): boolean {
+        return this.messageBoxConfig.showSemanticIcon;
+    }
+
+    /** @hidden */
+    get _semanticIcon(): string {
+        if (this.glyph) {
+            return this.glyph;
+        }
+        if (this.messageBoxConfig.customSemanticIcon) {
+            return this.messageBoxConfig.customSemanticIcon;
+        }
+        switch (this.messageBoxConfig.type) {
+            case 'error':
+                return 'message-error';
+            case 'success':
+                return 'message-success';
+            case 'warning':
+                return 'message-warning';
+            case 'information':
+                return 'message-information';
+            case 'confirmation':
+                return 'question-mark';
+            default:
+                return '';
+        }
+    }
+}
diff --git a/libs/core/src/lib/message-box/message-box.module.ts b/libs/core/src/lib/message-box/message-box.module.ts
@@ -16,11 +16,11 @@ import { MessageBoxDefaultComponent } from './message-box-default/message-box-de
 import { TemplateModule } from '../utils/directives/template/template.module';
 import { InitialFocusModule } from '../utils/directives/initial-focus/initial-focus.module';
 import { MessageBoxFooterButtonComponent } from './message-box-footer-button/message-box-footer-button.component';
-import { MessageBoxCloseIconComponent } from './message-box-close-icon/message-box-close-icon.component';
+import { MessageBoxSemanticIconComponent } from './message-box-semantic-icon/message-box-semantic-icon.component';
 
 const declarations = [
     MessageBoxFooterButtonComponent,
-    MessageBoxCloseIconComponent,
+    MessageBoxSemanticIconComponent,
     MessageBoxContainerComponent,
     MessageBoxDefaultComponent,
     MessageBoxFooterComponent,

diff --git a/libs/core/src/lib/message-box/public_api.ts b/libs/core/src/lib/message-box/public_api.ts
@@ -5,7 +5,7 @@ export * from './message-box-footer/message-box-footer.component';
 export * from './message-box-header/message-box-header.component';
 export * from './message-box-default/message-box-default.component';
 export * from './message-box-container/message-box-container.component';
-export * from './message-box-close-icon/message-box-close-icon.component';
+export * from './message-box-semantic-icon/message-box-semantic-icon.component';
 export * from './message-box-footer-button/message-box-footer-button.component';
 
 export * from './services/message-box.service';

diff --git a/libs/core/src/lib/message-box/utils/message-box-config.class.ts b/libs/core/src/lib/message-box/utils/message-box-config.class.ts
@@ -17,4 +17,6 @@ export interface MessageBoxConfigurableElement {
 @Injectable()
 export class MessageBoxConfig<T = any> extends DialogConfigBase<T> {
     type?: MessageBoxType = 'confirmation';
+    showSemanticIcon?: boolean = false;
+    customSemanticIcon?: string;
 }