From 08bb60dcbba3140bb2da64bb74217af8a36a266d Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@users.noreply.github.com>
Date: Thu, 10 Oct 2019 14:55:35 -0500
Subject: [PATCH] refactor(card): convert card to shadow (#19395)

references #18899
---
 core/api.txt                                  |  2 +-
 .../components/card-header/card-header.scss   |  8 +++-----
 .../components/card-header/card-header.tsx    |  1 +
 .../card-header/test/basic/index.html         | 16 ++++++++++++++-
 .../card-subtitle/card-subtitle.tsx           |  3 ++-
 core/src/components/card-title/card-title.tsx |  1 +
 core/src/components/card/card.scss            | 20 +------------------
 core/src/components/card/card.tsx             |  2 +-
 core/src/components/list/list.ios.scss        |  8 ++++++++
 core/src/components/list/list.md.scss         | 10 +++++++++-
 .../components/toolbar/test/basic/index.html  | 12 +++++++----
 core/src/css/core.scss                        | 11 +++++++++-
 12 files changed, 60 insertions(+), 34 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index dcb44b77d5..66a07148e2 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -174,7 +174,7 @@ ion-button,css-prop,--transition
 ion-buttons,scoped
 ion-buttons,prop,collapse,boolean,false,false,false
 
-ion-card,scoped
+ion-card,shadow
 ion-card,prop,button,boolean,false,false,false
 ion-card,prop,color,string | undefined,undefined,false,false
 ion-card,prop,disabled,boolean,false,false,false
diff --git a/core/src/components/card-header/card-header.scss b/core/src/components/card-header/card-header.scss
index 963f4620ae..633a46f92b 100644
--- a/core/src/components/card-header/card-header.scss
+++ b/core/src/components/card-header/card-header.scss
@@ -4,6 +4,9 @@
 // --------------------------------------------------
 
 :host {
+  --background: transparent;
+  --color: inherit;
+
   display: block;
   position: relative;
 
@@ -15,8 +18,3 @@
   background: current-color(base);
   color: current-color(contrast);
 }
-
-:host(.ion-color) ::slotted(ion-card-title),
-:host(.ion-color) ::slotted(ion-card-subtitle) {
-  color: currentColor;
-}
\ No newline at end of file
diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx
index c904f03256..e0ee569c5d 100644
--- a/core/src/components/card-header/card-header.tsx
+++ b/core/src/components/card-header/card-header.tsx
@@ -37,6 +37,7 @@ export class CardHeader implements ComponentInterface {
         class={{
           ...createColorClasses(this.color),
           'card-header-translucent': this.translucent,
+          'ion-inherit-color': true,
           [mode]: true
         }}
       >
diff --git a/core/src/components/card-header/test/basic/index.html b/core/src/components/card-header/test/basic/index.html
index 0e563586f5..773da7a159 100644
--- a/core/src/components/card-header/test/basic/index.html
+++ b/core/src/components/card-header/test/basic/index.html
@@ -46,7 +46,17 @@
           <ion-card-title>Card Title</ion-card-title>
         </ion-card-header>
         <ion-card-content>
-          This is Card Content
+          Custom background, color=secondary on ion-card-header
+        </ion-card-content>
+      </ion-card>
+
+      <ion-card color="danger">
+        <ion-card-header>
+          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          <ion-card-title>Card Title</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          color=danger on ion-card-header
         </ion-card-content>
       </ion-card>
 
@@ -67,6 +77,10 @@
       --color: hotpink;
     }
 
+    body {
+      --ion-item-background: #1a1b1e;
+    }
+
   </style>
 </body>
 
diff --git a/core/src/components/card-subtitle/card-subtitle.tsx b/core/src/components/card-subtitle/card-subtitle.tsx
index 3ea6e526db..0cd86afb17 100644
--- a/core/src/components/card-subtitle/card-subtitle.tsx
+++ b/core/src/components/card-subtitle/card-subtitle.tsx
@@ -31,7 +31,8 @@ export class CardSubtitle implements ComponentInterface {
         aria-level="3"
         class={{
           ...createColorClasses(this.color),
-          [mode]: true,
+          'ion-inherit-color': true,
+          [mode]: true
         }}
       >
         <slot></slot>
diff --git a/core/src/components/card-title/card-title.tsx b/core/src/components/card-title/card-title.tsx
index c7bf333ad6..88ef5e7cee 100644
--- a/core/src/components/card-title/card-title.tsx
+++ b/core/src/components/card-title/card-title.tsx
@@ -31,6 +31,7 @@ export class CardTitle implements ComponentInterface {
         aria-level="2"
         class={{
           ...createColorClasses(this.color),
+          'ion-inherit-color': true,
           [mode]: true
         }}
       >
diff --git a/core/src/components/card/card.scss b/core/src/components/card/card.scss
index 11fbd5c1bd..1533859cf3 100755
--- a/core/src/components/card/card.scss
+++ b/core/src/components/card/card.scss
@@ -24,6 +24,7 @@
   overflow: hidden;
 }
 
+
 // Card Colors
 // ---------------------------------------------
 
@@ -32,25 +33,6 @@
   color: current-color(contrast);
 }
 
-:host(.ion-color)::slotted(*) ion-card-header,
-:host(.ion-color)::slotted(*) ion-card-title,
-:host(.ion-color)::slotted(*) ion-card-subtitle {
-  color: current-color(contrast);
-}
-
-// Slotted Content
-// ---------------------------------------------
-
-::slotted(*) img {
-  display: block;
-
-  width: 100%;
-}
-
-::slotted(*) ion-list {
-  @include margin(0);
-}
-
 
 // Disabled Card
 // --------------------------------------------------
diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx
index 16d780f423..d25ec70b0c 100644
--- a/core/src/components/card/card.tsx
+++ b/core/src/components/card/card.tsx
@@ -14,7 +14,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
     ios: 'card.ios.scss',
     md: 'card.md.scss'
   },
-  scoped: true
+  shadow: true
 })
 export class Card implements ComponentInterface, AnchorInterface, ButtonInterface {
 
diff --git a/core/src/components/list/list.ios.scss b/core/src/components/list/list.ios.scss
index 5c08f09bb7..23006439d6 100644
--- a/core/src/components/list/list.ios.scss
+++ b/core/src/components/list/list.ios.scss
@@ -79,3 +79,11 @@
   --border-width: 0;
   --inner-border-width: 0;
 }
+
+
+// iOS List Inside A Card
+// --------------------------------------------------
+
+ion-card .list-ios {
+  @include margin(0);
+}
diff --git a/core/src/components/list/list.md.scss b/core/src/components/list/list.md.scss
index 3bcf965d5e..83a7b96457 100644
--- a/core/src/components/list/list.md.scss
+++ b/core/src/components/list/list.md.scss
@@ -87,4 +87,12 @@
 .list-md .item-lines-none {
   --border-width: 0;
   --inner-border-width: 0;
-}
\ No newline at end of file
+}
+
+
+// Material Design List Inside A Card
+// --------------------------------------------------
+
+ion-card .list-md {
+  @include margin(0);
+}
diff --git a/core/src/components/toolbar/test/basic/index.html b/core/src/components/toolbar/test/basic/index.html
index aab1deec80..1971e74c33 100644
--- a/core/src/components/toolbar/test/basic/index.html
+++ b/core/src/components/toolbar/test/basic/index.html
@@ -56,13 +56,13 @@
         </ion-card-content>
       </ion-card>
 
-      <ion-card color="primary" class="rainbow-content">
+      <ion-card class="rainbow-content">
         <ion-card-header>
-          Card Header
+          Custom CSS Card Header
         </ion-card-header>
         <ion-card-content>
           <ion-card-title>
-            Title
+            Custom CSS Title
           </ion-card-title>
           Some normal text in content.
           <h3>h3 in content</h3>
@@ -121,8 +121,12 @@
   <style>
     .rainbow-content {
       background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+      color: white;
+    }
+    .rainbow-content ion-card-header,
+    .rainbow-content ion-card-title {
+      color: white;
     }
-
   </style>
 
   <script>
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index e8d347429e..ef3773ec73 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -131,6 +131,16 @@ html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
   }
 }
 
+
+// Global Card Styles
+// --------------------------------------------------
+
+ion-card.ion-color .ion-inherit-color,
+ion-card-header.ion-color .ion-inherit-color {
+  color: inherit;
+}
+
+
 // Menu Styles
 // TODO: Find a better long term solution for this
 // --------------------------------------------------
@@ -167,4 +177,3 @@ html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
 .md .menu-content-push {
   box-shadow: $menu-md-box-shadow;
 }
-