fix(toast): inherit color in cancel button for a toast with color (#2…

…0299) fixes #20139
ionic-team · Jan 27, 2020 · 7b44ae2 · 7b44ae2
1 parent 915f7f4
commit 7b44ae2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html
@@ -63,10 +63,14 @@
         Translucent Toast
       </ion-button>
 
-      <ion-button expand="block" id="color-toast" onclick="openToast({message: 'click to close', buttons: ['Close'], color: 'danger'})">
+      <ion-button expand="block" id="color-toast" onclick="openToast({message: 'click to close', buttons: [{text: 'Close'}, {icon: 'close', role: 'cancel'}], color: 'danger'})">
         Color Toast
       </ion-button>
 
+      <ion-button expand="block" id="light-color-toast" onclick="openToast({message: 'click to close', buttons: [{text: 'Close'}, {icon: 'close', role: 'cancel'}], color: 'light'})">
+        Light Color Toast
+      </ion-button>
+
       <ion-button expand="block" id="custom-class-toast" onclick="openToast({message: 'click to close', buttons: ['Close'], cssClass: 'my-custom-class'})">
         Custom Class
       </ion-button>

diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss
@@ -65,6 +65,10 @@
   color: #{current-color(contrast)};
 }
 
+:host(.ion-color) .toast-button-cancel {
+  color: inherit;
+}
+
 :host(.ion-color) .toast-wrapper {
   background: #{current-color(base)};
 }