feat(design)!: rename notification's dismissable property to dismissi…

…ble (#2844)

BREAKING CHANGE: The `dismissable` property in DaffNotificationComponent has been renamed to `dismissible`

apps/design-land/src/app/notification/notification.component.html

@@ -7,8 +7,8 @@ <h2>Overview</h2>
 <h3>Default notification</h3>
 <design-land-example-viewer-container example="default-notification"></design-land-example-viewer-container>
 
-<h3>Dismissable notification</h3>
-<design-land-example-viewer-container example="dismissable-notification"></design-land-example-viewer-container>
+<h3>Dismissible notification</h3>
+<design-land-example-viewer-container example="dismissible-notification"></design-land-example-viewer-container>
 
 <h3>Notification Statuses</h3>
 <design-land-example-viewer-container example="notification-status"></design-land-example-viewer-container>

libs/design/notification/examples/src/dismissable-notification/dismissable-notification.component.html → libs/design/notification/examples/src/dismissible-notification/dismissible-notification.component.html

@@ -1,4 +1,4 @@
-<daff-notification dismissable="true">
+<daff-notification dismissible="true">
 	<fa-icon daffPrefix [icon]="faInfoCircle"></fa-icon>
 	<div daffNotificationTitle>Title</div>
 	<div daffNotificationSubtitle>This is the subtitle with information</div>

libs/design/notification/examples/src/dismissable-notification/dismissable-notification.component.ts → libs/design/notification/examples/src/dismissible-notification/dismissible-notification.component.ts

@@ -6,8 +6,8 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'dismissable-notification',
-  templateUrl: './dismissable-notification.component.html',
+  selector: 'dismissible-notification',
+  templateUrl: './dismissible-notification.component.html',
   styles: [`
     :host {
       display: flex;
@@ -16,6 +16,6 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DismissableNotificationComponent {
+export class DismissibleNotificationComponent {
   faInfoCircle = faInfoCircle;
 }

libs/design/notification/examples/src/dismissable-notification/dismissable-notification.module.ts → libs/design/notification/examples/src/dismissible-notification/dismissible-notification.module.ts

@@ -5,11 +5,11 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { DaffButtonModule } from '@daffodil/design/button';
 import { DaffNotificationModule } from '@daffodil/design/notification';
 
-import { DismissableNotificationComponent } from './dismissable-notification.component';
+import { DismissibleNotificationComponent } from './dismissible-notification.component';
 
 @NgModule({
   declarations: [
-    DismissableNotificationComponent,
+    DismissibleNotificationComponent,
   ],
   imports: [
     CommonModule,
@@ -18,7 +18,7 @@ import { DismissableNotificationComponent } from './dismissable-notification.com
     DaffButtonModule,
   ],
   exports: [
-    DismissableNotificationComponent,
+    DismissibleNotificationComponent,
   ],
 })
-export class DismissableNotificationModule { }
+export class DismissibleNotificationModule { }

libs/design/notification/examples/src/public_api.ts

@@ -2,8 +2,8 @@ import { ComponentExample } from '@daffodil/design';
 
 import { DefaultNotificationComponent } from './default-notification/default-notification.component';
 import { DefaultNotificationModule } from './default-notification/default-notification.module';
-import { DismissableNotificationComponent } from './dismissable-notification/dismissable-notification.component';
-import { DismissableNotificationModule } from './dismissable-notification/dismissable-notification.module';
+import { DismissibleNotificationComponent } from './dismissible-notification/dismissible-notification.component';
+import { DismissibleNotificationModule } from './dismissible-notification/dismissible-notification.module';
 import { NotificationOrientationsComponent } from './notification-orientations/notification-orientations.component';
 import { NotificationOrientationsModule } from './notification-orientations/notification-orientations.module';
 import { NotificationStatusComponent } from './notification-status/notification-status.component';
@@ -13,5 +13,5 @@ export const NOTIFICATION_EXAMPLES: ComponentExample[] = [
   { component: DefaultNotificationComponent, module: DefaultNotificationModule },
   { component: NotificationStatusComponent, module: NotificationStatusModule },
   { component: NotificationOrientationsComponent, module: NotificationOrientationsModule },
-  { component: DismissableNotificationComponent, module: DismissableNotificationModule },
+  { component: DismissibleNotificationComponent, module: DismissibleNotificationModule },
 ];

libs/design/notification/src/notification/notification.component.html

@@ -8,6 +8,6 @@
   </div>
   <ng-content select="[daffNotificationActions]"></ng-content>
 </div>
-<button class="daff-notification__close-icon" *ngIf="dismissable" (click)="onCloseNotification($event)">
+<button class="daff-notification__close-icon" *ngIf="dismissible" (click)="onCloseNotification($event)">
   <fa-icon [icon]="faTimes" [fixedWidth]="true"></fa-icon>
 </button>

libs/design/notification/src/notification/notification.component.scss

@@ -55,7 +55,7 @@
 		margin: 16px 0 0;
 	}
 
-	&.dismissable {
+	&.dismissible {
 		&.horizontal {
 			#{$root}__actions {
 				padding: 8px 0;

libs/design/notification/src/notification/notification.component.spec.ts

@@ -21,7 +21,7 @@ import {
     <daff-notification
       [status]="status"
       [orientation]="orientation"
-      [dismissable]="dismissable"
+      [dismissible]="dismissible"
       (closeNotification)="closeNotificationFunction()">
     </daff-notification>
   `,
@@ -30,7 +30,7 @@ import {
 class WrapperComponent {
   status: DaffStatus;
   orientation: DaffNotificationOrientation = 'vertical';
-  dismissable = false;
+  dismissible = false;
   closeNotificationFunction = () => {};
 }
 
@@ -70,19 +70,19 @@ describe('@daffodil/design/notification | DaffNotificationComponent', () => {
     });
   });
 
-  describe('the dismissable property', () => {
-    it('should take dismissable as an input', () => {
-      expect(component.dismissable).toEqual(wrapper.dismissable);
+  describe('the dismissible property', () => {
+    it('should take dismissible as an input', () => {
+      expect(component.dismissible).toEqual(wrapper.dismissible);
     });
 
-    describe('when dismissable is set to true', () => {
+    describe('when dismissible is set to true', () => {
       beforeEach(() => {
-        wrapper.dismissable = true;
+        wrapper.dismissible = true;
         fixture.detectChanges();
       });
 
-      it('should add a class of "dismissable" to the host element', () => {
-        expect(de.classes['dismissable']).toBeTrue();
+      it('should add a class of "dismissible" to the host element', () => {
+        expect(de.classes['dismissible']).toBeTrue();
       });
 
       it('should show the close icon button', () => {
@@ -142,7 +142,7 @@ describe('@daffodil/design/notification | DaffNotificationComponent', () => {
 
   describe('when the close icon button is clicked', () => {
     it('should emit closeNotification', () => {
-      wrapper.dismissable = true;
+      wrapper.dismissible = true;
       fixture.detectChanges();
 
       spyOn(component.closeNotification, 'emit');

libs/design/notification/src/notification/notification.component.ts

@@ -69,7 +69,7 @@ export class DaffNotificationComponent
   }
 
   /** Whether or not a notification is closable */
-  @Input() @HostBinding('class.dismissable') dismissable = false;
+  @Input() @HostBinding('class.dismissible') dismissible = false;
 
   @Output() closeNotification: EventEmitter<void> = new EventEmitter();