From 30a206867d5f4b19d9cdfcc540f0286405b6d984 Mon Sep 17 00:00:00 2001
From: Adam Tirella <adam@tirel.la>
Date: Thu, 29 Feb 2024 11:01:36 -0800
Subject: [PATCH] fix(card): Do not apply text color to slotted footer items
 (#8839)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Related Issue:** #8855

## Summary
This removes the styles set on footer elements, as it could
unintentionally style components slotted directly that themselves do not
ensure a text color is set. The workaround is to add a wrapping div that
itself is slotted in `footer-end` or `footer-start`.

<img width="439" alt="Screenshot 2024-02-27 at 12 01 36 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/eec057d9-b6ab-45b7-bc50-b283e1f4f9d8">


The `heading` and `description` (and deprecated `title` and `subtitle`)
should keep their default text styles as these are most often text
slotted directly. In the future it might be good to make these string
properties to incentivize consistency, keeping the option to slot in
rich content like links, icons, etc., when needed.
---
 .../src/components/card/card.scss             |  2 --
 .../src/components/card/card.stories.ts       | 22 +++++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss
index 6b80ccd8fe7..8b6b3fdfb9a 100644
--- a/packages/calcite-components/src/components/card/card.scss
+++ b/packages/calcite-components/src/components/card/card.scss
@@ -153,12 +153,10 @@
 @include slotted("footer-start", "*") {
   @apply text-n2-wrap self-center;
   margin-inline-end: auto;
-  color: var(--calcite-color-text-3);
 }
 
 @include slotted("footer-end", "*") {
   @apply text-n2-wrap self-center;
-  color: var(--calcite-color-text-3);
 }
 
 .checkbox-wrapper-deprecated {
diff --git a/packages/calcite-components/src/components/card/card.stories.ts b/packages/calcite-components/src/components/card/card.stories.ts
index d5436c665de..7bb6b24fcb1 100644
--- a/packages/calcite-components/src/components/card/card.stories.ts
+++ b/packages/calcite-components/src/components/card/card.stories.ts
@@ -231,6 +231,28 @@ export const deprecatedSlotsSelectable_TestOnly = (): string => html`
   </calcite-card>
 `;
 
+export const slottedFooterItems_TestOnly = (): string => html`
+  <div id="card-container" style="width:260px;">
+    <calcite-card>
+      ${thumbnailHtml}
+      <h3 slot="heading">Portland Businesses</h3>
+      <span slot="description"
+        >by
+        <calcite-link href="">example_user</calcite-link>
+      </span>
+      <div>
+        Created: Apr 22, 2019
+        <br />
+        Updated: Dec 9, 2019
+        <br />
+        View Count: 0
+      </div>
+      <calcite-chip slot="footer-start" value="calcite chip" kind="brand" icon="clock-forward">Recent</calcite-chip>
+      <calcite-chip slot="footer-end" value="calcite chip" icon="walking">Recreation</calcite-chip>
+    </calcite-card>
+  </div>
+`;
+
 export const darkModeRTL_TestOnly = (): string => html`
   <div dir="rtl" style="width:260px;">
     <calcite-card>${thumbnailHtml}${titleHtml}${footerStartTextHtml}${footerEndButtonsHtml}</calcite-card>