From 0807e6b03730042c47eb01c0d118bc8eef11f32f Mon Sep 17 00:00:00 2001
From: rug <rmfgoncalves@gmail.com>
Date: Thu, 6 Jun 2024 19:12:53 +0200
Subject: [PATCH] feat(item): add styles for pressed state in ionic theme
 (#29586)

Issue number: internal

---------

## What is the new behavior?
- Added scss for the pressed state of `ion-item` for the Ionic theme
- Added item with class `ion-activatable` ([according to
docs](https://github.com/ionic-team/ionic-framework/blob/main/docs/component-guide.md#activated))
to test page

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

---------

Co-authored-by: Bernardo Cardoso <32780808+BenOsodrac@users.noreply.github.com>
---
 core/api.txt                                         |  1 +
 core/src/components/item/item.ionic.scss             |  9 +++++++++
 core/src/components/item/test/theme-ionic/index.html | 10 ++++++++++
 3 files changed, 20 insertions(+)

diff --git a/core/api.txt b/core/api.txt
index aace736a73..c2928a8988 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -985,6 +985,7 @@ ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-item,css-prop,--background,ionic
 ion-item,css-prop,--background,ios
 ion-item,css-prop,--background,md
+ion-item,css-prop,--background-activated,ionic
 ion-item,css-prop,--background-activated,ios
 ion-item,css-prop,--background-activated,md
 ion-item,css-prop,--background-activated-opacity,ios
diff --git a/core/src/components/item/item.ionic.scss b/core/src/components/item/item.ionic.scss
index 4a42946c41..711005b230 100644
--- a/core/src/components/item/item.ionic.scss
+++ b/core/src/components/item/item.ionic.scss
@@ -6,6 +6,7 @@
 :host {
   /**
     * @prop --background: Background of the item
+    * @prop --background-activated: Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.
     *
     * @prop --border-color: Color of the item border
     * @prop --border-style: Style of the item border
@@ -20,6 +21,7 @@
     *
     */
   --background: #{globals.$ionic-color-base-white};
+  --background-activated: #{globals.$ionic-color-neutral-200};
   --border-color: #{globals.$ionic-color-neutral-300};
   --border-style: #{globals.$ionic-border-style-solid};
   --border-width: #{globals.$ionic-border-size-025};
@@ -88,3 +90,10 @@
     box-sizing: border-box;
   }
 }
+
+// Item: Activated
+// --------------------------------------------------
+
+:host(.ion-activated) .item-native {
+  background: var(--background-activated);
+}
diff --git a/core/src/components/item/test/theme-ionic/index.html b/core/src/components/item/test/theme-ionic/index.html
index c5bb1d0a3b..e77375bcd3 100644
--- a/core/src/components/item/test/theme-ionic/index.html
+++ b/core/src/components/item/test/theme-ionic/index.html
@@ -158,6 +158,16 @@
           </ion-label>
           <ion-button slot="end" fill="outline">Outline</ion-button>
         </ion-item>
+        <ion-item-divider>
+          <ion-label>Item activatable</ion-label>
+        </ion-item-divider>
+        <ion-item class="ion-activatable">
+          <ion-label slot="start">Start</ion-label>
+          <ion-label>
+            <h1>Heading</h1>
+            <p>Normal paragraph</p>
+          </ion-label>
+        </ion-item>
       </ion-content>
 
       <ion-footer>