feat: (Core) add semantic icons to Message box and remove the close button

apps/docs/src/app/core/api-files.ts

@@ -157,7 +157,7 @@ export const API_FILES = {
         'MessageBoxHeaderComponent',
         'MessageBoxFooterComponent',
         'MessageBoxDefaultComponent',
-        'MessageBoxCloseIconComponent',
+        'MessageBoxSemanticIconComponent',
         'MessageBoxContainerComponent',
         'MessageBoxFooterButtonComponent',
     ],

apps/docs/src/app/core/component-docs/message-box/examples/complex-template/message-box-complex-example.component.ts

@@ -8,6 +8,7 @@ import { MessageBoxRef } from '@fundamental-ngx/core';
                 <ng-template fdTemplate="header">
                     <div fd-bar-left>
                         <fd-bar-element>
+                            <fd-message-box-semantic-icon glyph="activate"></fd-message-box-semantic-icon>
                             <h1 fd-title>Fruit facts</h1>
                         </fd-bar-element>
                     </div>

apps/docs/src/app/core/component-docs/message-box/examples/component-based/component-based-message-box-example.component.ts

@@ -25,6 +25,8 @@ export class ComponentBasedMessageBoxExampleComponent {
                 title: 'Fruit facts',
                 text: 'Coffee beans aren\'t beans. They are fruit pits.'
             },
+            showSemanticIcon: true,
+            customSemanticIcon: 'thumb-up',
             width: '400px'
         });
 

apps/docs/src/app/core/component-docs/message-box/examples/component-based/message-box-example.component.ts

@@ -7,7 +7,6 @@ import { TextData } from './component-based-message-box-example.component';
         <fd-message-box>
             <fd-message-box-header>
                 <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 }}

apps/docs/src/app/core/component-docs/message-box/examples/semantic-types/semantic-types-example.component.html

@@ -4,4 +4,6 @@
     <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', false, 'thumb-up')"></button>
+    <button fd-button fdType="positive" label="Success type & no icon" (click)="open('success', true)"></button>
 </div>

apps/docs/src/app/core/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, hideSemanticIcon: boolean = false, 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, hideSemanticIcon: hideSemanticIcon, customSemanticIcon: customSemanticIcon });
     }
 }

apps/docs/src/app/core/component-docs/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.

libs/core/src/lib/message-box/message-box-default/message-box-default.component.html

@@ -1,10 +1,6 @@
 <fd-message-box>
     <fd-message-box-header>
         <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>

libs/core/src/lib/message-box/message-box-header/message-box-header.component.html

@@ -8,13 +8,10 @@
 
     <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>
+                <fd-message-box-semantic-icon *ngIf="_showSemanticIcon"></fd-message-box-semantic-icon>
+                <ng-content select="[fd-title]"></ng-content>
             </fd-bar-element>
         </div>
     </ng-template>

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();
     });
 

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:
@@ -41,6 +41,14 @@ export class MessageBoxHeaderComponent extends DialogHeaderBase implements After
         this.messageBoxConfig = this.messageBoxConfig || {};
     }
 
+    /** @hidden */
+    get _showSemanticIcon(): boolean {
+        if (this.messageBoxConfig.type) {
+            return this.messageBoxConfig.hideSemanticIcon ? false : true;
+        }
+        return this.messageBoxConfig.showSemanticIcon;
+    }
+
     /** @hidden */
     ngAfterContentInit(): void {
         super.ngAfterContentInit();

libs/core/src/lib/message-box/message-box-close-icon/message-box-close-icon.component.spec.ts → libs/core/src/lib/message-box/message-box-semantic-icon/message-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();
     });

libs/core/src/lib/message-box/message-box-semantic-icon/message-box-semantic-icon.component.ts

@@ -0,0 +1,64 @@
+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--' + _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;
+        }
+        if (this.messageBoxConfig.type) {
+            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 '';
+            }
+        }
+        return '';
+    }
+}

libs/core/src/lib/message-box/message-box.component.scss

@@ -3,3 +3,17 @@
 .fd-message-box {
     z-index: 1000;
 }
+
+.fd-message-box__header {
+    [class*="sap-icon"] {
+        margin-right: 0.5rem;
+    }
+}
+
+.fd-message-box__header[dir=rtl],
+[dir=rtl] .fd-message-box__header {
+    [class*="sap-icon"] {
+        margin-right: 0;
+        margin-left: 0.5rem;
+    }
+}

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,

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';

libs/core/src/lib/message-box/utils/message-box-config.class.ts

@@ -16,5 +16,8 @@ export interface MessageBoxConfigurableElement {
 
 @Injectable()
 export class MessageBoxConfig<T = any> extends DialogConfigBase<T> {
-    type?: MessageBoxType = 'confirmation';
+    type?: MessageBoxType;
+    showSemanticIcon?: boolean = false;
+    hideSemanticIcon?: boolean = false;
+    customSemanticIcon?: string;
 }