Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changes [CHORE] 868 max height for toast #890

Merged
merged 3 commits into from
Mar 30, 2023
Merged

Changes [CHORE] 868 max height for toast #890

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6fadeaa
Changes [CHORE] 868 max height for toast
adhiyan-tangoe Oct 11, 2022
05c0fb6
Changes [CHORE] 868 max height for toast #890
adhiyan-tangoe Oct 12, 2022
5505e72
Changes [CHORE] 868 max height for toast #890
adhiyan-tangoe Oct 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion projects/go-lib/src/lib/components/go-toast/go-toast.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</div>
<div
class="go-toast__container"
[ngClass]="{ 'go-toast__container--max-height': enableMaxHeight }">
[ngClass]=" enableMaxHeight?'go-toast__container--max-height':'go-toast__container' ">
adhiyan-tangoe marked this conversation as resolved.
Show resolved Hide resolved
<div
class="go-toast-content"
[ngClass]="{ 'go-toast-content--no-title': !header }">
Expand Down
2 changes: 1 addition & 1 deletion projects/go-lib/src/lib/components/go-toast/go-toast.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export class GoToastComponent {
duration: number;

@Input() dismissable: boolean = false;
@Input() enableMaxHeight: boolean = true;
@Input() enableMaxHeight: boolean = false;
@Input() header: string;
@Input() icon: string;
@Input() message: string;
Expand Down
10 changes: 5 additions & 5 deletions ...ts/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ <h4 class="go-heading-4">dismissable</h4>
<div class="go-column go-column--100">
<h4 class="go-heading-4">enableMaxHeight</h4>
<p class="go-body-copy go-body-copy--no-margin">
By default this is true, but if set to false will allow the toast to expand to the size of its content.
By default this is false, but if set to true will allow the toast to have a max height that allows for vertical overflow scrolling.
</p>
</div>

Expand Down Expand Up @@ -320,11 +320,11 @@ <h2 class="go-heading-2 go-heading--no-wrap">Max Height Example</h2>
</ng-container>
<div class="go-container" go-card-content>
<div class="go-column go-column--100">
By default, the toasts have a max height that allows for vertical overflow scrolling. See below:
By default, the toasts allows to expand to the size of its content. See below:
</div>
<div class="go-column go-column--50">
<h4 class="go-heading-4 go-heading--underlined">View</h4>
<go-toast header="Something you should know...">
<go-toast header="Show me everything!">
<ng-template #messageContent>
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?
</ng-template>
Expand All @@ -339,11 +339,11 @@ <h4 class="go-heading-4 go-heading--underlined">Code</h4>
</div>

<div class="go-column go-column--100">
To disable the max height restriction on toasts, you can pass in a binding:
To enable the max height on toasts, you can pass in a binding:
</div>
<div class="go-column go-column--50">
<h4 class="go-heading-4 go-heading--underlined">View</h4>
<go-toast header="Show me everything!" [enableMaxHeight]="false">
<go-toast header="Something you should know..." [enableMaxHeight]="true">
<ng-template #messageContent>
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?
</ng-template>
Expand Down
4 changes: 2 additions & 2 deletions ...ects/go-style-guide/src/app/features/ui-kit/components/toast-docs/toast-docs.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export class ToastDocsComponent {

componentBindings: string = `
@Input() dismissable: boolean = false;
@Input() enableMaxHeight: boolean = true;
@Input() enableMaxHeight: boolean = false;
@Input() header: string;
@Input() icon: string;
@Input() message: string;
Expand Down Expand Up @@ -147,7 +147,7 @@ export class ToastDocsComponent {

toast_maxHeight_enable_html: string = `
<go-toast
[enableMaxHeight]="false"
[enableMaxHeight]="true"
header="Show me everything!"
message="Sed ut perspiciatis... *redacted for brevity* ...voluptas nulla pariatur?">
</go-toast>
Expand Down