diff --git a/core/api.txt b/core/api.txt index f56840ae43..fa25ac3c32 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1165,11 +1165,13 @@ ion-toast,css-prop,--border-width ion-toast,css-prop,--box-shadow ion-toast,css-prop,--button-color ion-toast,css-prop,--color +ion-toast,css-prop,--end ion-toast,css-prop,--height ion-toast,css-prop,--max-height ion-toast,css-prop,--max-width ion-toast,css-prop,--min-height ion-toast,css-prop,--min-width +ion-toast,css-prop,--start ion-toast,css-prop,--width ion-toggle,shadow diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index 9b4fb44d0b..e36c7a1c94 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -271,11 +271,13 @@ Type: `Promise` | `--box-shadow` | Box shadow of the toast | | `--button-color` | Color of the button text | | `--color` | Color of the toast text | +| `--end` | Position from the end | | `--height` | Height of the toast | | `--max-height` | Maximum height of the toast | | `--max-width` | Maximum width of the toast | | `--min-height` | Minimum height of the toast | | `--min-width` | Minimum width of the toast | +| `--start` | Position from the start | | `--width` | Width of the toast | diff --git a/core/src/components/toast/test/basic/e2e.ts b/core/src/components/toast/test/basic/e2e.ts index 8b67841d08..247c84efec 100644 --- a/core/src/components/toast/test/basic/e2e.ts +++ b/core/src/components/toast/test/basic/e2e.ts @@ -42,6 +42,10 @@ test('toast: basic, custom class', async () => { await testToast(DIRECTORY, '#custom-class-toast'); }); +test('toast: start end position', async () => { + await testToast(DIRECTORY, '#toast-start-and-end'); +}); + /** * RTL Tests */ @@ -85,3 +89,7 @@ test('toast:rtl: basic, color', async () => { test('toast:rtl: basic, custom class', async () => { await testToast(DIRECTORY, '#custom-class-toast', true); }); + +test('toast:rtl: start end position', async () => { + await testToast(DIRECTORY, '#toast-start-and-end', true); +}); diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html index ce8183b234..4005f360d1 100644 --- a/core/src/components/toast/test/basic/index.html +++ b/core/src/components/toast/test/basic/index.html @@ -68,6 +68,10 @@ Custom Class + + Show Toast with start-end position + + @@ -210,6 +214,12 @@ .orange { background-color: #f69234; } + + .toast-start-and-end { + --start: 0; + --end: 0; + --max-width: 100%; + } diff --git a/core/src/components/toast/toast.ios.scss b/core/src/components/toast/toast.ios.scss index a7e90dd251..23df12363b 100644 --- a/core/src/components/toast/toast.ios.scss +++ b/core/src/components/toast/toast.ios.scss @@ -10,12 +10,13 @@ --button-color: #{$toast-ios-button-color}; --color: #{$toast-ios-title-color}; --max-width: #{$toast-max-width}; + --start: 10px; + --end: 10px; font-size: $toast-ios-content-font-size; } .toast-wrapper { - @include position-horizontal(10px, 10px); @include margin(auto); display: block; diff --git a/core/src/components/toast/toast.md.scss b/core/src/components/toast/toast.md.scss index 39693da381..b31e64432f 100644 --- a/core/src/components/toast/toast.md.scss +++ b/core/src/components/toast/toast.md.scss @@ -11,12 +11,13 @@ --button-color: #{ion-color(primary, base)}; --color: #{$toast-md-color}; --max-width: #{$toast-max-width}; + --start: 8px; + --end: 8px; font-size: #{$toast-md-font-size}; } .toast-wrapper { - @include position-horizontal(8px, 8px); @include margin(auto); display: block; diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss index 034cfc92ac..e947f0cb5b 100644 --- a/core/src/components/toast/toast.scss +++ b/core/src/components/toast/toast.scss @@ -24,6 +24,9 @@ * @prop --max-height: Maximum height of the toast * * @prop --button-color: Color of the button text + * + * @prop --start: Position from the start + * @prop --end: Position from the end */ --border-width: 0; --border-style: none; @@ -68,6 +71,7 @@ .toast-wrapper { @include border-radius(var(--border-radius)); + @include position-horizontal(var(--start), var(--end)); width: var(--width); min-width: var(--min-width);