fix: (core:Alert) Add new button classes to alert component (#1768)

* Add new button to alert component * Add fd-alert__text wrapper for content on alert component
SAP · Jan 3, 2020 · 15b9864 · 15b9864
1 parent 22541e3
commit 15b9864
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 5 deletions.
diff --git a/libs/core/src/lib/alert/alert-service/alert.service.spec.ts b/libs/core/src/lib/alert/alert-service/alert.service.spec.ts
@@ -7,6 +7,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AlertContainerComponent } from '../alert-utils/alert-container.component';
 import { DynamicComponentService } from '../../utils/dynamic-component/dynamic-component.service';
 import { AlertRef } from '../alert-utils/alert-ref';
+import { ButtonModule } from '@fundamental-ngx/core';
 
 @Component({
     template: `        
@@ -21,7 +22,7 @@ class TemplateTestComponent {
 
 @NgModule({
     declarations: [AlertComponent, AlertContainerComponent, TemplateTestComponent],
-    imports: [CommonModule, BrowserModule],
+    imports: [CommonModule, BrowserModule, ButtonModule],
     providers: [AlertService, DynamicComponentService],
     entryComponents: [AlertComponent, AlertContainerComponent, TemplateTestComponent]
 })

diff --git a/libs/core/src/lib/alert/alert.component.html b/libs/core/src/lib/alert/alert.component.html
@@ -1,8 +1,13 @@
 <button class="fd-alert__close"
+        fd-button
+        [compact]="true"
+        [options]="'light'"
         *ngIf="dismissible"
         (click)="dismiss(undefined, true)"
         [attr.aria-controls]="id"
         [attr.aria-label]="dismissLabel">
 </button>
-<ng-container #container>{{message}}</ng-container>
-<ng-content></ng-content>
+<p class="fd-alert__text">
+    <ng-container #container>{{message}}</ng-container>
+    <ng-content></ng-content>
+</p>
diff --git a/libs/core/src/lib/alert/alert.component.scss b/libs/core/src/lib/alert/alert.component.scss
@@ -12,3 +12,9 @@
 .fd-has-display-none {
     display: none;
 }
+
+.fd-alert__close {
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+}
diff --git a/libs/core/src/lib/alert/alert.component.spec.ts b/libs/core/src/lib/alert/alert.component.spec.ts
@@ -8,6 +8,7 @@ import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { DynamicComponentService } from '../utils/dynamic-component/dynamic-component.service';
+import { ButtonModule } from '@fundamental-ngx/core';
 
 @Component({
     template: `        
@@ -22,7 +23,7 @@ class TemplateTestComponent {
 
 @NgModule({
     declarations: [AlertComponent, AlertContainerComponent, TemplateTestComponent],
-    imports: [CommonModule, BrowserModule, NoopAnimationsModule],
+    imports: [CommonModule, BrowserModule, NoopAnimationsModule, ButtonModule],
     providers: [AlertService, DynamicComponentService],
     entryComponents: [AlertComponent, AlertContainerComponent, TemplateTestComponent]
 })

diff --git a/libs/core/src/lib/alert/alert.module.ts b/libs/core/src/lib/alert/alert.module.ts
@@ -6,10 +6,11 @@ import { AlertComponent } from './alert.component';
 import { AlertService } from './alert-service/alert.service';
 import { AlertContainerComponent } from './alert-utils/alert-container.component';
 import { DynamicComponentService } from '../utils/dynamic-component/dynamic-component.service';
+import { ButtonModule } from '../button/button.module';
 
 @NgModule({
     declarations: [AlertComponent, AlertContainerComponent],
-    imports: [CommonModule, IconModule],
+    imports: [CommonModule, IconModule, ButtonModule],
     exports: [AlertComponent, AlertContainerComponent],
     entryComponents: [AlertContainerComponent, AlertComponent],
     providers: [AlertService, DynamicComponentService]