From 7ce115993aa2be4ba70881e5767e4ffd3fedfe21 Mon Sep 17 00:00:00 2001
From: Bernardo Cardoso <32780808+BenOsodrac@users.noreply.github.com>
Date: Mon, 8 Apr 2024 14:26:24 +0100
Subject: [PATCH] feat(Chip): Add styles for icons inside Chip Ionic Theme
 (#29295)

Issue number: resolves #ROU-4838

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added styles for icons inside Chip (Ionic Theme)
- Fixed an issue related to hover status, after tokens integration

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
---
 core/src/components/chip/chip.ionic.scss         | 16 ++++++++++++++--
 .../components/chip/test/theme-ionic/index.html  | 12 ++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss
index 1cad0a811e..6045a3cbfb 100644
--- a/core/src/components/chip/chip.ionic.scss
+++ b/core/src/components/chip/chip.ionic.scss
@@ -4,7 +4,9 @@
 // Chip
 // --------------------------------------------------
 
-$ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet for this one, but it should be created in the future, once UX team has figma tokens done
+// TODO(ROU-4870): there is no token yet for these ones, but it should be created in the future, once UX team has figma tokens done
+$ionic-states-focus-primary: #9ec4fd;
+$ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make this in the future, as we are setting scss variables with a var() and fallback, and it doesn't work inside a rgba().
 
 :host {
   --background: #{tokens.$ionic-color-neutral-10};
@@ -23,6 +25,8 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
 
   align-items: center;
 
+  gap: tokens.$ionic-space-xxxs;
+
   min-height: 32px;
 
   border-width: tokens.$ionic-border-size-small;
@@ -41,6 +45,8 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
   overflow: hidden;
 
   box-sizing: border-box;
+
+  vertical-align: middle;
 }
 
 // Outline Chip
@@ -64,7 +70,7 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --background: #{rgba(tokens.$ionic-color-neutral-900, 0.16)};
+    --background: #{$ionic-states-hover};
   }
 }
 
@@ -75,3 +81,9 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
   opacity: 0.6;
   pointer-events: none;
 }
+
+// Chip Icon
+// ---------------------------------------------
+::slotted(ion-icon) {
+  font-size: tokens.$ionic-font-size-l;
+}
diff --git a/core/src/components/chip/test/theme-ionic/index.html b/core/src/components/chip/test/theme-ionic/index.html
index 05f944345e..d5e6049702 100644
--- a/core/src/components/chip/test/theme-ionic/index.html
+++ b/core/src/components/chip/test/theme-ionic/index.html
@@ -50,6 +50,18 @@
             <ion-label>Focus</ion-label>
           </ion-chip>
         </p>
+
+        <h3>With Icon</h3>
+        <p>
+          <ion-chip>
+            <ion-icon icon="calendar"></ion-icon>
+            <ion-label>Icon</ion-label>
+          </ion-chip>
+          <ion-chip>
+            <ion-label>Icon</ion-label>
+            <ion-icon icon="calendar"></ion-icon>
+          </ion-chip>
+        </p>
       </ion-content>
     </ion-app>