feat(toast): add variables to change position start/end of toast (#17961)

closes #17854

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

core/src/components/toast/readme.md

@@ -271,11 +271,13 @@ Type: `Promise<void>`
 | `--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          |
 
 

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);
+});

core/src/components/toast/test/basic/index.html

@@ -68,6 +68,10 @@
         Custom Class
       </ion-button>
 
+      <ion-button expand="block" id="toast-start-and-end" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'toast-start-and-end'})">
+        Show Toast with start-end position
+      </ion-button>
+
       <ion-toast-controller></ion-toast-controller>
 
       <ion-grid>
@@ -210,6 +214,12 @@
     .orange {
       background-color: #f69234;
     }
+
+    .toast-start-and-end {
+      --start: 0;
+      --end: 0;
+      --max-width: 100%;
+    }
   </style>
 </body>
 

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;

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;

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);