From 5d208e9daacad63294489e0b1bd6ec2b2645babd Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 10 Oct 2024 16:32:34 -0700
Subject: [PATCH 1/3] test(styles): update button styles for test pages

---
 core/scripts/testing/styles.css | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/core/scripts/testing/styles.css b/core/scripts/testing/styles.css
index 8d4865777ec..f0d2bcd2f30 100644
--- a/core/scripts/testing/styles.css
+++ b/core/scripts/testing/styles.css
@@ -49,8 +49,15 @@ html.ios.ios {
   font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
 }
 
-ion-content button,
-main button {
+/**
+ * Button styles should only be applied
+ * to native buttons that are not part of the
+ * Ionic framework.
+ * Otherwise, the styles may not appear correctly
+ * when comparing between testing and production.
+ */
+ion-content button:not([class*="sc-ion-"]),
+main button:not([class*="sc-ion-"]) {
   display: inline-block;
   width: auto;
   clear: both;
@@ -63,8 +70,15 @@ main button {
   margin: 8px 0;
 }
 
-ion-content button.expand,
-main button.expand {
+/**
+ * Button styles should only be applied
+ * to native buttons that are not part of the
+ * Ionic framework.
+ * Otherwise, the styles may not appear correctly
+ * when comparing between testing and production.
+ */
+ion-content button.expand:not([class*="sc-ion-"]),
+main button.expand:not([class*="sc-ion-"]) {
   display: block;
   width: 100%;
 }

From 4e8ec5691fafc761eddb6fe5d6336faae1203375 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Fri, 11 Oct 2024 14:15:29 -0700
Subject: [PATCH 2/3] test(popover): update size test page

---
 core/src/components/popover/test/size/index.html | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/core/src/components/popover/test/size/index.html b/core/src/components/popover/test/size/index.html
index 9d473b130cd..1ce48a75cb6 100644
--- a/core/src/components/popover/test/size/index.html
+++ b/core/src/components/popover/test/size/index.html
@@ -16,7 +16,7 @@
       ion-app > ion-content {
         --background: #dddddd;
       }
-      ion-content button {
+      ion-content button.trigger {
         padding: 12px 16px;
       }
       .grid {
@@ -57,26 +57,30 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Cover</h2>
-            <button id="cover-trigger">Trigger</button>
+            <button id="cover-trigger" class="trigger">Trigger</button>
             <ion-popover show-backdrop="false" class="cover-popover" trigger="cover-trigger" size="cover">
               <ion-content class="ion-padding"> My really really really really long content </ion-content>
             </ion-popover>
           </div>
           <div class="grid-item">
             <h2>With Event</h2>
-            <button id="event-trigger" onclick="openPopover('event-popover', event, 'false')">Trigger</button>
+            <button id="event-trigger" class="trigger" onclick="openPopover('event-popover', event, 'false')">
+              Trigger
+            </button>
           </div>
 
           <div class="grid-item">
             <h2>Auto</h2>
-            <button id="auto-trigger">Trigger</button>
+            <button id="auto-trigger" class="trigger">Trigger</button>
             <ion-popover show-backdrop="false" class="auto-popover" trigger="auto-trigger">
               <ion-content class="ion-padding"> My really really really really long content </ion-content>
             </ion-popover>
           </div>
           <div class="grid-item">
             <h2>No Event</h2>
-            <button id="no-event-trigger" onclick="openPopover('no-event-popover', null, 'true')">Trigger</button>
+            <button id="no-event-trigger" class="trigger" onclick="openPopover('no-event-popover', null, 'true')">
+              Trigger
+            </button>
           </div>
         </div>
       </ion-content>

From d2f63624740faaee9f4d164e96d738384d0672fe Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Mon, 14 Oct 2024 08:26:03 -0700
Subject: [PATCH 3/3] test(styles): update comments

---
 core/scripts/testing/styles.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/core/scripts/testing/styles.css b/core/scripts/testing/styles.css
index f0d2bcd2f30..d08fee4437c 100644
--- a/core/scripts/testing/styles.css
+++ b/core/scripts/testing/styles.css
@@ -55,6 +55,10 @@ html.ios.ios {
  * Ionic framework.
  * Otherwise, the styles may not appear correctly
  * when comparing between testing and production.
+ * This issue occurs only with `scoped` components,
+ * which is why `sc-ion-` is used as a filter,
+ * since this class is specifically added to `scoped`
+ * components.
  */
 ion-content button:not([class*="sc-ion-"]),
 main button:not([class*="sc-ion-"]) {
@@ -76,6 +80,10 @@ main button:not([class*="sc-ion-"]) {
  * Ionic framework.
  * Otherwise, the styles may not appear correctly
  * when comparing between testing and production.
+ * This issue occurs only with `scoped` components,
+ * which is why `sc-ion-` is used as a filter,
+ * since this class is specifically added to `scoped`
+ * components.
  */
 ion-content button.expand:not([class*="sc-ion-"]),
 main button.expand:not([class*="sc-ion-"]) {