From e3260334b2adbead0eb04dcc73676a7abe23e797 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 7 Feb 2023 19:23:40 +0000 Subject: [PATCH 01/16] feat(toast): add layout prop, add template test --- core/src/components.d.ts | 10 +- .../components/toast/test/layout/index.html | 40 +++++ .../components/toast/test/layout/toast.e2e.ts | 164 ++++++++++++++++++ core/src/components/toast/toast-interface.ts | 3 + core/src/components/toast/toast.tsx | 12 +- 5 files changed, 227 insertions(+), 2 deletions(-) create mode 100644 core/src/components/toast/test/layout/index.html create mode 100644 core/src/components/toast/test/layout/toast.e2e.ts diff --git a/core/src/components.d.ts b/core/src/components.d.ts index f5f68679914..2dfc5de2a5a 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -14,7 +14,7 @@ import { PickerInternalChangeEventDetail } from "./components/picker-internal/pi import { PinFormatter } from "./components/range/range-interface"; import { NavigationHookCallback } from "./components/route/route-interface"; import { SelectCompareFn } from "./components/select/select-interface"; -import { ToastAttributes, ToastPosition } from "./components/toast/toast-interface"; +import { ToastAttributes, ToastLayout, ToastPosition } from "./components/toast/toast-interface"; export namespace Components { interface IonAccordion { /** @@ -2976,6 +2976,10 @@ export namespace Components { * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ "keyboardClose": boolean; + /** + * Defines how the message and buttons are laid out in the toast. 'inline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons. + */ + "layout": ToastLayout; /** * Animation to use when the toast is dismissed. */ @@ -6977,6 +6981,10 @@ declare namespace LocalJSX { * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ "keyboardClose"?: boolean; + /** + * Defines how the message and buttons are laid out in the toast. 'inline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons. + */ + "layout"?: ToastLayout; /** * Animation to use when the toast is dismissed. */ diff --git a/core/src/components/toast/test/layout/index.html b/core/src/components/toast/test/layout/index.html new file mode 100644 index 00000000000..d9b7057fcec --- /dev/null +++ b/core/src/components/toast/test/layout/index.html @@ -0,0 +1,40 @@ + + + + + Toast - Layout + + + + + + + + + + + + + Toast - Layout + + + + + Open Inline Layout Toast + Open Stacked Layout Toast + + + + + diff --git a/core/src/components/toast/test/layout/toast.e2e.ts b/core/src/components/toast/test/layout/toast.e2e.ts new file mode 100644 index 00000000000..c9161328d92 --- /dev/null +++ b/core/src/components/toast/test/layout/toast.e2e.ts @@ -0,0 +1,164 @@ +import type { Locator, TestInfo } from '@playwright/test'; +import { expect } from '@playwright/test'; +import type { E2EPage, EventSpy } from '@utils/test/playwright'; +import { test } from '@utils/test/playwright'; + +class ToastFixture { + readonly page: E2EPage; + readonly testInfo: TestInfo; + + private ionToastDidPresent!: EventSpy; + + constructor(page: E2EPage, testInfo: TestInfo) { + this.page = page; + this.testInfo = testInfo; + } + + async goto() { + const { page } = this; + await page.goto(`/src/components/toast/test/basic`); + this.ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent'); + } + + async openToast(selector: string) { + const { page, ionToastDidPresent } = this; + const button = page.locator(selector); + await button.click(); + + await ionToastDidPresent.next(); + + return { + toast: page.locator('ion-toast'), + container: page.locator('ion-toast .toast-container'), + }; + } + + async screenshot(screenshotModifier: string, el?: Locator) { + const { page } = this; + + const reference = el !== undefined ? el : page; + expect(await reference.screenshot()).toMatchSnapshot( + `toast-${screenshotModifier}-${page.getSnapshotSettings()}.png` + ); + } + + skipRTL(testRef: typeof test, reason = 'This functionality does not have RTL-specific behaviors.') { + const { testInfo } = this; + testRef.skip(testInfo.project.metadata.rtl === true, reason); + } + + skipMode(testRef: typeof test, mode: string, reason: string) { + const { testInfo } = this; + testRef.skip(testInfo.project.metadata.mode === mode, reason); + } +} + +test.describe('toast: rendering', () => { + let toastFixture: ToastFixture; + test.beforeEach(async ({ page }, testInfo) => { + toastFixture = new ToastFixture(page, testInfo); + await toastFixture.goto(); + }); + + test.describe('toast: position', () => { + test.beforeEach(() => { + toastFixture.skipRTL(test); + }); + test('should render toast at the top', async () => { + await toastFixture.openToast('#show-top-toast'); + await toastFixture.screenshot('top'); + }); + test('should render toast at the middle', async () => { + await toastFixture.openToast('#show-middle-toast'); + await toastFixture.screenshot('middle'); + }); + test('should render toast at the bottom', async () => { + await toastFixture.openToast('#show-bottom-toast'); + await toastFixture.screenshot('bottom'); + }); + }); + + test('should set buttons correctly', async () => { + const { container } = await toastFixture.openToast('#custom-action-buttons-toast'); + await toastFixture.screenshot('buttons', container); + }); + + test('should set start/end positioning correctly', async () => { + const { container } = await toastFixture.openToast('#toast-start-and-end'); + await toastFixture.screenshot('start-end', container); + }); + + test('should wrap text correctly', async () => { + toastFixture.skipRTL(test); + const { container } = await toastFixture.openToast('#two-line-toast'); + await toastFixture.screenshot('text', container); + }); + + test('should set color correctly', async () => { + toastFixture.skipRTL(test); + const { container } = await toastFixture.openToast('#color-toast'); + await toastFixture.screenshot('color', container); + }); + + test('should set translucency correctly', async () => { + toastFixture.skipRTL(test); + toastFixture.skipMode(test, 'md', 'Translucency only works on iOS'); + + const { container } = await toastFixture.openToast('#translucent-toast'); + await toastFixture.screenshot('translucent', container); + }); +}); + +test.describe('toast: properties', () => { + let toastFixture: ToastFixture; + test.beforeEach(async ({ page }, testInfo) => { + toastFixture = new ToastFixture(page, testInfo); + + toastFixture.skipMode(test, 'md', 'This functionality has no mode specific logic.'); + toastFixture.skipRTL(test); + + await toastFixture.goto(); + }); + test('should correctly set htmlAttributes', async () => { + const { toast } = await toastFixture.openToast('#show-bottom-toast'); + await expect(toast).toHaveAttribute('data-testid', 'basic-toast'); + }); + + test('should correctly set custom html', async () => { + const { toast } = await toastFixture.openToast('#toast-html'); + await expect(toast.locator('ion-button')).toBeVisible(); + }); + + test('should correctly set custom class', async () => { + const { toast } = await toastFixture.openToast('#custom-class-toast'); + await expect(toast).toHaveClass(/my-custom-class/); + }); +}); + +test.describe('toast: duration config', () => { + test.beforeEach(({ skip }) => { + skip.rtl(); + skip.mode('ios'); + }); + test('should have duration set to 0', async ({ page }) => { + await page.setContent(` + + `); + const toast = page.locator('ion-toast'); + await expect(toast).toHaveJSProperty('duration', 0); + }); + + test('should have duration set to 5000', async ({ page }) => { + await page.setContent(` + + + `); + + const toast = page.locator('ion-toast'); + await expect(toast).toHaveJSProperty('duration', 5000); + }); +}); diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index 9b417e37414..ded753c0e27 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -12,6 +12,7 @@ export interface ToastOptions { animated?: boolean; icon?: string; htmlAttributes?: ToastAttributes; + layout: ToastLayout; color?: Color; mode?: Mode; @@ -27,6 +28,8 @@ export interface ToastOptions { */ export type ToastAttributes = { [key: string]: any }; +export type ToastLayout = 'inline' | 'stacked'; + export interface ToastButton { text?: string; icon?: string; diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index cc941008e7a..d48ed164dfd 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -20,7 +20,7 @@ import { iosEnterAnimation } from './animations/ios.enter'; import { iosLeaveAnimation } from './animations/ios.leave'; import { mdEnterAnimation } from './animations/md.enter'; import { mdLeaveAnimation } from './animations/md.leave'; -import type { ToastAttributes, ToastPosition } from './toast-interface'; +import type { ToastAttributes, ToastPosition, ToastLayout } from './toast-interface'; // TODO(FW-2832): types @@ -87,6 +87,15 @@ export class Toast implements ComponentInterface, OverlayInterface { */ @Prop() header?: string; + /** + * Defines how the message and buttons are laid out in the toast. + * 'inline': The message and the buttons will appear on the same line. + * Message text may wrap within the message container. + * 'stacked': The buttons containers and message will stack on top + * of each other. Use this if you have long text in your buttons. + */ + @Prop() layout: ToastLayout = 'inline'; + /** * Message to be shown in the toast. */ @@ -297,6 +306,7 @@ export class Toast implements ComponentInterface, OverlayInterface { const wrapperClass = { 'toast-wrapper': true, [`toast-${this.position}`]: true, + [`toast-layout-${this.layout}`]: true, }; const role = allButtons.length > 0 ? 'dialog' : 'status'; From e48b970068ccbd26fb0443b60634ec938e2297ec Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 7 Feb 2023 19:30:51 +0000 Subject: [PATCH 02/16] chore(): update template --- .../components/toast/test/layout/index.html | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/core/src/components/toast/test/layout/index.html b/core/src/components/toast/test/layout/index.html index d9b7057fcec..5ae26f31ce3 100644 --- a/core/src/components/toast/test/layout/index.html +++ b/core/src/components/toast/test/layout/index.html @@ -26,8 +26,8 @@ - Open Inline Layout Toast - Open Stacked Layout Toast + Open Inline Layout Toast + Open Stacked Layout Toast From a2d1fcae7032d2bd1573f0e0d5004a69549ed2b2 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 7 Feb 2023 19:31:05 +0000 Subject: [PATCH 03/16] fix(toast): container wraps, buttons aligned to end --- core/src/components/toast/toast.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss index 0a44e698084..8532016fabc 100644 --- a/core/src/components/toast/toast.scss +++ b/core/src/components/toast/toast.scss @@ -112,7 +112,11 @@ contain: content; } -.toast-content { +.toast-layout-stacked .toast-container { + flex-wrap: wrap; +} + +.toast-layout-inline .toast-content { display: flex; flex: 1; @@ -134,6 +138,12 @@ display: flex; } +.toast-layout-stacked .toast-button-group { + width: 100%; + + justify-content: end; +} + .toast-button { border: 0; From 0cf9d0c8120a4473c8cab1a82deff7e1b4778dc4 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 7 Feb 2023 19:41:37 +0000 Subject: [PATCH 04/16] fix(toast): correct padding on md --- core/src/components/toast/toast.md.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/core/src/components/toast/toast.md.scss b/core/src/components/toast/toast.md.scss index 7581c4b8af1..2ae3bf6a377 100644 --- a/core/src/components/toast/toast.md.scss +++ b/core/src/components/toast/toast.md.scss @@ -49,14 +49,22 @@ // -------------------------------------------------- -.toast-button-group-start { +.toast-layout-inline .toast-button-group-start { @include margin(null, null, null, 8px); } -.toast-button-group-end { +.toast-layout-stacked .toast-button-group-start { + @include margin(8px, null, null, 8px); +} + +.toast-layout-inline .toast-button-group-end { @include margin(null, 8px, null, null); } +.toast-layout-stacked .toast-button-group-end { + @include margin(null, 8px, 8px, null); +} + .toast-button { @include padding($toast-md-button-padding-top, $toast-md-button-padding-end, $toast-md-button-padding-bottom, $toast-md-button-padding-start); From e03c6beaa84deaead9bf577ca8aae14e96bee9e4 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 13 Feb 2023 09:06:40 -0500 Subject: [PATCH 05/16] fixt(toast): start buttons have correct margin --- core/src/components/toast/toast.md.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/toast/toast.md.scss b/core/src/components/toast/toast.md.scss index 2ae3bf6a377..1c6755a2337 100644 --- a/core/src/components/toast/toast.md.scss +++ b/core/src/components/toast/toast.md.scss @@ -54,7 +54,7 @@ } .toast-layout-stacked .toast-button-group-start { - @include margin(8px, null, null, 8px); + @include margin(8px, 8px, null, null); } .toast-layout-inline .toast-button-group-end { From dcf4b28eb881562c78f5375fca21d1adad8995ee Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 13 Feb 2023 09:07:30 -0500 Subject: [PATCH 06/16] remove old test --- .../components/toast/test/layout/toast.e2e.ts | 164 ------------------ 1 file changed, 164 deletions(-) delete mode 100644 core/src/components/toast/test/layout/toast.e2e.ts diff --git a/core/src/components/toast/test/layout/toast.e2e.ts b/core/src/components/toast/test/layout/toast.e2e.ts deleted file mode 100644 index c9161328d92..00000000000 --- a/core/src/components/toast/test/layout/toast.e2e.ts +++ /dev/null @@ -1,164 +0,0 @@ -import type { Locator, TestInfo } from '@playwright/test'; -import { expect } from '@playwright/test'; -import type { E2EPage, EventSpy } from '@utils/test/playwright'; -import { test } from '@utils/test/playwright'; - -class ToastFixture { - readonly page: E2EPage; - readonly testInfo: TestInfo; - - private ionToastDidPresent!: EventSpy; - - constructor(page: E2EPage, testInfo: TestInfo) { - this.page = page; - this.testInfo = testInfo; - } - - async goto() { - const { page } = this; - await page.goto(`/src/components/toast/test/basic`); - this.ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent'); - } - - async openToast(selector: string) { - const { page, ionToastDidPresent } = this; - const button = page.locator(selector); - await button.click(); - - await ionToastDidPresent.next(); - - return { - toast: page.locator('ion-toast'), - container: page.locator('ion-toast .toast-container'), - }; - } - - async screenshot(screenshotModifier: string, el?: Locator) { - const { page } = this; - - const reference = el !== undefined ? el : page; - expect(await reference.screenshot()).toMatchSnapshot( - `toast-${screenshotModifier}-${page.getSnapshotSettings()}.png` - ); - } - - skipRTL(testRef: typeof test, reason = 'This functionality does not have RTL-specific behaviors.') { - const { testInfo } = this; - testRef.skip(testInfo.project.metadata.rtl === true, reason); - } - - skipMode(testRef: typeof test, mode: string, reason: string) { - const { testInfo } = this; - testRef.skip(testInfo.project.metadata.mode === mode, reason); - } -} - -test.describe('toast: rendering', () => { - let toastFixture: ToastFixture; - test.beforeEach(async ({ page }, testInfo) => { - toastFixture = new ToastFixture(page, testInfo); - await toastFixture.goto(); - }); - - test.describe('toast: position', () => { - test.beforeEach(() => { - toastFixture.skipRTL(test); - }); - test('should render toast at the top', async () => { - await toastFixture.openToast('#show-top-toast'); - await toastFixture.screenshot('top'); - }); - test('should render toast at the middle', async () => { - await toastFixture.openToast('#show-middle-toast'); - await toastFixture.screenshot('middle'); - }); - test('should render toast at the bottom', async () => { - await toastFixture.openToast('#show-bottom-toast'); - await toastFixture.screenshot('bottom'); - }); - }); - - test('should set buttons correctly', async () => { - const { container } = await toastFixture.openToast('#custom-action-buttons-toast'); - await toastFixture.screenshot('buttons', container); - }); - - test('should set start/end positioning correctly', async () => { - const { container } = await toastFixture.openToast('#toast-start-and-end'); - await toastFixture.screenshot('start-end', container); - }); - - test('should wrap text correctly', async () => { - toastFixture.skipRTL(test); - const { container } = await toastFixture.openToast('#two-line-toast'); - await toastFixture.screenshot('text', container); - }); - - test('should set color correctly', async () => { - toastFixture.skipRTL(test); - const { container } = await toastFixture.openToast('#color-toast'); - await toastFixture.screenshot('color', container); - }); - - test('should set translucency correctly', async () => { - toastFixture.skipRTL(test); - toastFixture.skipMode(test, 'md', 'Translucency only works on iOS'); - - const { container } = await toastFixture.openToast('#translucent-toast'); - await toastFixture.screenshot('translucent', container); - }); -}); - -test.describe('toast: properties', () => { - let toastFixture: ToastFixture; - test.beforeEach(async ({ page }, testInfo) => { - toastFixture = new ToastFixture(page, testInfo); - - toastFixture.skipMode(test, 'md', 'This functionality has no mode specific logic.'); - toastFixture.skipRTL(test); - - await toastFixture.goto(); - }); - test('should correctly set htmlAttributes', async () => { - const { toast } = await toastFixture.openToast('#show-bottom-toast'); - await expect(toast).toHaveAttribute('data-testid', 'basic-toast'); - }); - - test('should correctly set custom html', async () => { - const { toast } = await toastFixture.openToast('#toast-html'); - await expect(toast.locator('ion-button')).toBeVisible(); - }); - - test('should correctly set custom class', async () => { - const { toast } = await toastFixture.openToast('#custom-class-toast'); - await expect(toast).toHaveClass(/my-custom-class/); - }); -}); - -test.describe('toast: duration config', () => { - test.beforeEach(({ skip }) => { - skip.rtl(); - skip.mode('ios'); - }); - test('should have duration set to 0', async ({ page }) => { - await page.setContent(` - - `); - const toast = page.locator('ion-toast'); - await expect(toast).toHaveJSProperty('duration', 0); - }); - - test('should have duration set to 5000', async ({ page }) => { - await page.setContent(` - - - `); - - const toast = page.locator('ion-toast'); - await expect(toast).toHaveJSProperty('duration', 5000); - }); -}); From fa4a6a6ce104e0a21f4e9ce21da4464f2bd0c612 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 13 Feb 2023 14:12:07 +0000 Subject: [PATCH 07/16] lint --- core/src/components/toast/test/layout/index.html | 9 +++++---- core/src/components/toast/toast.scss | 4 ++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/core/src/components/toast/test/layout/index.html b/core/src/components/toast/test/layout/index.html index 5ae26f31ce3..8d6b616f606 100644 --- a/core/src/components/toast/test/layout/index.html +++ b/core/src/components/toast/test/layout/index.html @@ -26,8 +26,8 @@ - Open Inline Layout Toast - Open Stacked Layout Toast + Open Inline Layout Toast + Open Stacked Layout Toast + From cb7533bc478a5b1ed63d9d18363a420cf1b8e117 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 13 Feb 2023 10:41:20 -0500 Subject: [PATCH 13/16] run build --- core/api.txt | 1 + packages/vue/src/components/Overlays.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/core/api.txt b/core/api.txt index c22df0bde25..4f5e0724469 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1386,6 +1386,7 @@ ion-toast,prop,header,string | undefined,undefined,false,false ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-toast,prop,icon,string | undefined,undefined,false,false ion-toast,prop,keyboardClose,boolean,false,false,false +ion-toast,prop,layout,"inline" | "stacked",'inline',false,false ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,false ion-toast,prop,mode,"ios" | "md",undefined,false,false diff --git a/packages/vue/src/components/Overlays.ts b/packages/vue/src/components/Overlays.ts index 1f02542841f..7d5e5d93927 100644 --- a/packages/vue/src/components/Overlays.ts +++ b/packages/vue/src/components/Overlays.ts @@ -27,7 +27,7 @@ export const IonLoading = /*@__PURE__*/ defineOverlayContainer(' export const IonPicker = /*@__PURE__*/ defineOverlayContainer('ion-picker', defineIonPickerCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop'], pickerController); -export const IonToast = /*@__PURE__*/ defineOverlayContainer('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent'], toastController); +export const IonToast = /*@__PURE__*/ defineOverlayContainer('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'translucent'], toastController); export const IonModal = /*@__PURE__*/ defineOverlayContainer('ion-modal', defineIonModalCustomElement, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'swipeToClose', 'trigger']); From 14a8ff31ddb9b88db6270779a92bea84f485c730 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 13 Feb 2023 15:42:46 +0000 Subject: [PATCH 14/16] layout is optional --- core/src/components/toast/toast-interface.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index ded753c0e27..ac038e7d443 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -12,7 +12,7 @@ export interface ToastOptions { animated?: boolean; icon?: string; htmlAttributes?: ToastAttributes; - layout: ToastLayout; + layout?: ToastLayout; color?: Color; mode?: Mode; From 05877d7b82bf9f66eeea90b0674700e63efdded8 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 13 Feb 2023 12:15:01 -0500 Subject: [PATCH 15/16] refactor(toast): rename inline to baseline --- core/api.txt | 2 +- core/src/components.d.ts | 4 ++-- core/src/components/toast/test/layout/index.html | 6 +++--- core/src/components/toast/toast-interface.ts | 2 +- core/src/components/toast/toast.md.scss | 4 ++-- core/src/components/toast/toast.scss | 2 +- core/src/components/toast/toast.tsx | 4 ++-- 7 files changed, 12 insertions(+), 12 deletions(-) diff --git a/core/api.txt b/core/api.txt index 4f5e0724469..8eb31c06047 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1386,7 +1386,7 @@ ion-toast,prop,header,string | undefined,undefined,false,false ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false ion-toast,prop,icon,string | undefined,undefined,false,false ion-toast,prop,keyboardClose,boolean,false,false,false -ion-toast,prop,layout,"inline" | "stacked",'inline',false,false +ion-toast,prop,layout,"baseline" | "stacked",'baseline',false,false ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,false ion-toast,prop,mode,"ios" | "md",undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 2dfc5de2a5a..1164b07ad0a 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2977,7 +2977,7 @@ export namespace Components { */ "keyboardClose": boolean; /** - * Defines how the message and buttons are laid out in the toast. 'inline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons. + * Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons. */ "layout": ToastLayout; /** @@ -6982,7 +6982,7 @@ declare namespace LocalJSX { */ "keyboardClose"?: boolean; /** - * Defines how the message and buttons are laid out in the toast. 'inline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons. + * Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons. */ "layout"?: ToastLayout; /** diff --git a/core/src/components/toast/test/layout/index.html b/core/src/components/toast/test/layout/index.html index b495582e0aa..3562accab74 100644 --- a/core/src/components/toast/test/layout/index.html +++ b/core/src/components/toast/test/layout/index.html @@ -26,7 +26,7 @@ - Open Inline Layout Toast + Open Baseline Layout Toast Open Stacked Layout Toast @@ -36,7 +36,7 @@ await toast.present(); } - const inlineConfig = { + const baselineConfig = { icon: 'globe', header: 'Toast Header', message: 'This is an inline layout toast.', @@ -47,7 +47,7 @@ }; const stackedConfig = { - ...inlineConfig, + ...baselineConfig, message: 'This is a stacked layout toast.', layout: 'stacked', }; diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index ac038e7d443..364ee9f2cd0 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -28,7 +28,7 @@ export interface ToastOptions { */ export type ToastAttributes = { [key: string]: any }; -export type ToastLayout = 'inline' | 'stacked'; +export type ToastLayout = 'baseline' | 'stacked'; export interface ToastButton { text?: string; diff --git a/core/src/components/toast/toast.md.scss b/core/src/components/toast/toast.md.scss index 1c6755a2337..968afe913ab 100644 --- a/core/src/components/toast/toast.md.scss +++ b/core/src/components/toast/toast.md.scss @@ -49,7 +49,7 @@ // -------------------------------------------------- -.toast-layout-inline .toast-button-group-start { +.toast-layout-baseline .toast-button-group-start { @include margin(null, null, null, 8px); } @@ -57,7 +57,7 @@ @include margin(8px, 8px, null, null); } -.toast-layout-inline .toast-button-group-end { +.toast-layout-baseline .toast-button-group-end { @include margin(null, 8px, null, null); } diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss index d49eb60f299..0418e86c7c2 100644 --- a/core/src/components/toast/toast.scss +++ b/core/src/components/toast/toast.scss @@ -116,7 +116,7 @@ flex-wrap: wrap; } -.toast-layout-inline .toast-content { +.toast-layout-baseline .toast-content { display: flex; flex: 1; diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index d23d5307811..50812b7a066 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -90,12 +90,12 @@ export class Toast implements ComponentInterface, OverlayInterface { /** * Defines how the message and buttons are laid out in the toast. - * 'inline': The message and the buttons will appear on the same line. + * 'baseline': The message and the buttons will appear on the same line. * Message text may wrap within the message container. * 'stacked': The buttons containers and message will stack on top * of each other. Use this if you have long text in your buttons. */ - @Prop() layout: ToastLayout = 'inline'; + @Prop() layout: ToastLayout = 'baseline'; /** * Message to be shown in the toast. From 7fcaa8e24e2651d660597307d3abc52719938004 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 14 Feb 2023 16:04:49 +0000 Subject: [PATCH 16/16] export ToastLayout from framework packages --- angular/src/index.ts | 1 + packages/react/src/components/index.ts | 1 + packages/vue/src/index.ts | 1 + 3 files changed, 3 insertions(+) diff --git a/angular/src/index.ts b/angular/src/index.ts index a28a12dfefe..38d2130b7bb 100644 --- a/angular/src/index.ts +++ b/angular/src/index.ts @@ -130,6 +130,7 @@ export { TextareaCustomEvent, ToastOptions, ToastButton, + ToastLayout, ToggleChangeEventDetail, ToggleCustomEvent, } from '@ionic/core'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 67e0f319cda..870e61c5de5 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -81,6 +81,7 @@ export { TextareaCustomEvent, ToastOptions, ToastButton, + ToastLayout, ToggleChangeEventDetail, ToggleCustomEvent, } from '@ionic/core/components'; diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index 4a7bab011f0..b3af281c146 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -121,6 +121,7 @@ export { TextareaCustomEvent, ToastOptions, ToastButton, + ToastLayout, ToggleChangeEventDetail, ToggleCustomEvent, } from "@ionic/core/components";