From dbf7911afe89ab8d53a00d334a51f1b671005d1e Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Thu, 12 Aug 2021 12:38:33 -0400 Subject: [PATCH 1/3] Add maxHeight feature and override binding --- .../go-toast/go-toast.component.html | 70 ++++++++++--------- .../go-toast/go-toast.component.scss | 16 ++++- .../components/go-toast/go-toast.component.ts | 3 +- .../toast-docs/toast-docs.component.html | 57 ++++++++++++++- .../toast-docs/toast-docs.component.ts | 18 +++++ 5 files changed, 126 insertions(+), 38 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-toast/go-toast.component.html b/projects/go-lib/src/lib/components/go-toast/go-toast.component.html index 26a222bb4..fc73e419c 100644 --- a/projects/go-lib/src/lib/components/go-toast/go-toast.component.html +++ b/projects/go-lib/src/lib/components/go-toast/go-toast.component.html @@ -8,40 +8,44 @@
-

- - + class="go-toast__container" + [ngClass]="{ 'go-toast__container--max-height': enableMaxHeight }"> +
+

+ + + + + {{ header }} + +

+ + +

+ +

- - {{ header }} + +

+

-

- - -

- -

- - -

-

- -
-
- - -
-
- +
+
+ + +
+
+ +
diff --git a/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss b/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss index 163f2b073..8f0bd018e 100644 --- a/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss +++ b/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss @@ -10,10 +10,22 @@ &__actions { align-items: center; + align-self: flex-start; display: flex; flex: 1; justify-content: flex-end; - padding: .875rem 1.25rem; + padding: 1.25rem; + } + + &__container { + align-items: baseline; + display: flex; + flex: 1 1 auto; + + &--max-height { + max-height: 9rem; + overflow-y: auto; + } } &--dark { @@ -69,7 +81,7 @@ flex: 1; flex-direction: column; justify-content: center; - padding: 1rem 1.25rem 1rem 0; + padding: 1.25rem 1.25rem 1.25rem 0; &__title { margin-bottom: .25rem; diff --git a/projects/go-lib/src/lib/components/go-toast/go-toast.component.ts b/projects/go-lib/src/lib/components/go-toast/go-toast.component.ts index 5d59241b9..6946484e3 100644 --- a/projects/go-lib/src/lib/components/go-toast/go-toast.component.ts +++ b/projects/go-lib/src/lib/components/go-toast/go-toast.component.ts @@ -19,11 +19,12 @@ export class GoToastComponent implements OnInit { duration: number; @Input() dismissable: boolean = false; + @Input() enableMaxHeight: boolean = true; @Input() header: string; @Input() message: string; - @Input() type: string; @Input() showToastActions: boolean = false; @Input() theme: 'light' | 'dark' = 'light'; + @Input() type: string; @Output() handleDismiss: EventEmitter = new EventEmitter(); diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.html index f6f6696a6..16d39f5c9 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.html @@ -38,6 +38,13 @@

dismissable

+
+

enableMaxHeight

+

+ By default this is true, but if set to false will allow the toast to expand to the size of its content. +

+
+

header

@@ -249,7 +256,7 @@

component.html

Theme

- +
@@ -270,6 +277,52 @@

component.html

header="Success!" message="The thing you did saved successfully." type="positive"> - + + + + +

Max Height Example

+ + +
+
+ By default, the toasts have a max height that allows for vertical overflow scrolling. See below: +
+
+

View

+ + + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? + + +
+
+

Code

+ + +
+ +
+ To disable the max height restriction on toasts, you can pass in a binding: +
+
+

View

+ + + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? + + +
+
+

Code

+ + +
+
+ diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.ts index e579dd21c..20a2be76f 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.ts @@ -13,8 +13,11 @@ export class ToastDocsComponent { componentBindings: string = ` @Input() dismissable: boolean = false; + @Input() enableMaxHeight: boolean = true; @Input() header: string; @Input() message: string; + @Input() showToastActions: boolean = false; + @Input() theme: 'light' | 'dark' = 'light'; @Input() type: string; @Output() handleDismiss = new EventEmitter(); @@ -134,6 +137,21 @@ export class ToastDocsComponent { `; + toast_maxHeight_html: string = ` + + + `; + + toast_maxHeight_enable_html: string = ` + + + `; + linkToSource: string = 'https://github.com/mobi/goponents/tree/dev/projects/go-lib/src/lib/components/go-toast'; constructor(private toasterService: GoToasterService) { } From 4c915539e8ec1239a990c6edaba1b1004167ebb5 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Thu, 12 Aug 2021 12:53:30 -0400 Subject: [PATCH 2/3] Add ability to pass in an icon to toasts --- .../go-toast/go-toast.component.html | 6 +-- .../go-toast/go-toast.component.spec.ts | 27 ++++++++---- .../components/go-toast/go-toast.component.ts | 43 ++++++++----------- .../toast-docs/toast-docs.component.html | 34 +++++++++++++++ .../toast-docs/toast-docs.component.ts | 9 ++++ 5 files changed, 82 insertions(+), 37 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-toast/go-toast.component.html b/projects/go-lib/src/lib/components/go-toast/go-toast.component.html index fc73e419c..0d9981405 100644 --- a/projects/go-lib/src/lib/components/go-toast/go-toast.component.html +++ b/projects/go-lib/src/lib/components/go-toast/go-toast.component.html @@ -1,10 +1,10 @@
-
+
+ [ngClass]="_status" + [icon]="_icon">
{ expect(component).toBeTruthy(); }); - describe('ngOnInit', () => { - it('sets a default statusClass if no type is passed in', () => { + describe('_status', () => { + it('returns a default status if no type is passed in', () => { fixture.detectChanges(); - expect(component.statusClass).toEqual('go-toast-status--neutral'); + expect(component._status).toEqual('go-toast-status--neutral'); }); - it('sets a statusClass if type is passed in', () => { + it('returns a type status if type is passed in', () => { component.type = 'positive'; fixture.detectChanges(); - expect(component.statusClass).toEqual('go-toast-status--positive'); + expect(component._status).toEqual('go-toast-status--positive'); }); + }); - it('sets a default icon if no type is passed in', () => { + describe('_icon', () => { + it('returns a default icon if no type is passed in', () => { fixture.detectChanges(); - expect(component.icon).toEqual('notifications_none'); + expect(component._icon).toEqual('notifications_none'); }); - it('should set an icon if type is passed in', () => { + it('returns an icon if type is passed in', () => { component.type = 'positive'; fixture.detectChanges(); - expect(component.icon).toEqual('done'); + expect(component._icon).toEqual('done'); + }); + + it('returns an icon if icon is passed in', () => { + component.icon = 'pets'; + fixture.detectChanges(); + + expect(component._icon).toEqual('pets'); }); }); diff --git a/projects/go-lib/src/lib/components/go-toast/go-toast.component.ts b/projects/go-lib/src/lib/components/go-toast/go-toast.component.ts index 6946484e3..2ed245ac1 100644 --- a/projects/go-lib/src/lib/components/go-toast/go-toast.component.ts +++ b/projects/go-lib/src/lib/components/go-toast/go-toast.component.ts @@ -3,7 +3,6 @@ import { ContentChild, EventEmitter, Input, - OnInit, Output, TemplateRef } from '@angular/core'; @@ -13,14 +12,13 @@ import { templateUrl: './go-toast.component.html', styleUrls: ['./go-toast.component.scss'] }) -export class GoToastComponent implements OnInit { - statusClass: string = 'go-toast-status--neutral'; - icon: string = 'notifications_none'; +export class GoToastComponent { duration: number; @Input() dismissable: boolean = false; @Input() enableMaxHeight: boolean = true; @Input() header: string; + @Input() icon: string; @Input() message: string; @Input() showToastActions: boolean = false; @Input() theme: 'light' | 'dark' = 'light'; @@ -40,18 +38,22 @@ export class GoToastComponent implements OnInit { */ @ContentChild('messageContent') messageContent: TemplateRef; - ngOnInit(): void { - this.statusClass = this.getStatus(); - this.icon = this.getIcon(); - } - - public dismiss(): void { - this.handleDismiss.emit(); + get _icon(): string { + if (this.icon) { + return this.icon; + } else { + switch (this.type) { + case 'positive': + return 'done'; + case 'negative': + return 'priority_high'; + default: + return 'notifications_none'; + } + } } - //#region Private Methods - - private getStatus(): string { + get _status(): string { switch (this.type) { case 'positive': return 'go-toast-status--positive'; @@ -62,16 +64,7 @@ export class GoToastComponent implements OnInit { } } - private getIcon(): string { - switch (this.type) { - case 'positive': - return 'done'; - case 'negative': - return 'priority_high'; - default: - return 'notifications_none'; - } + dismiss(): void { + this.handleDismiss.emit(); } - - //#endregion } diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.html index 16d39f5c9..e62de19d5 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.html @@ -53,6 +53,16 @@

header

+
+

icon

+

+ Changes the icon that is displayed within the toast. This is set automatically for each type, but if a value + is passed for this binding it will override all of those type icons. See the + Material Design System Icons + page for available icons. +

+
+

message

@@ -279,6 +289,30 @@

component.html

type="positive"> + + +

Icon Example

+ + + +
+

+ An icon may be specified with the @Input icon: string; + binding. If a value is passed to this binding, it will override all of the default icons for each type. +

+
+

component.html

+ + + + + + +

Max Height Example

diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.ts index 20a2be76f..7567962f2 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.ts @@ -15,6 +15,7 @@ export class ToastDocsComponent { @Input() dismissable: boolean = false; @Input() enableMaxHeight: boolean = true; @Input() header: string; + @Input() icon: string; @Input() message: string; @Input() showToastActions: boolean = false; @Input() theme: 'light' | 'dark' = 'light'; @@ -152,6 +153,14 @@ export class ToastDocsComponent { `; + toast_icon_template_html: string = ` + + + `; + linkToSource: string = 'https://github.com/mobi/goponents/tree/dev/projects/go-lib/src/lib/components/go-toast'; constructor(private toasterService: GoToasterService) { } From 6c7ea4e09788d6304c2088c8662d501d921fd1b1 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Thu, 12 Aug 2021 23:22:42 -0400 Subject: [PATCH 3/3] Extract toast padding to a variable --- .../src/lib/components/go-toast/go-toast.component.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss b/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss index 8f0bd018e..c96c15c5f 100644 --- a/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss +++ b/projects/go-lib/src/lib/components/go-toast/go-toast.component.scss @@ -1,6 +1,8 @@ @import '../../../../styles/variables'; @import '../../../../styles/mixins'; +$toast-padding: 1.25rem; + .go-toast { background: $theme-light-bg; border-radius: $global-radius; @@ -14,7 +16,7 @@ display: flex; flex: 1; justify-content: flex-end; - padding: 1.25rem; + padding: $toast-padding; } &__container { @@ -81,7 +83,7 @@ flex: 1; flex-direction: column; justify-content: center; - padding: 1.25rem 1.25rem 1.25rem 0; + padding: $toast-padding $toast-padding $toast-padding 0; &__title { margin-bottom: .25rem;