fix(button): show correct activated state for ios (#26900)

fixes #22468

core/src/components/toolbar/test/basic/index.html

@@ -18,7 +18,11 @@
     <ion-app>
       <ion-header>
         <ion-toolbar>
-          <ion-title>Toolbar</ion-title>
+          <ion-title> Toolbar </ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-title> This is the title that never ends. It just goes on and on my friend. </ion-title>
         </ion-toolbar>
 
         <ion-toolbar>
@@ -35,11 +39,7 @@
               <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
             </ion-button>
           </ion-buttons>
-          <ion-title>Subheader</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
+          <ion-title> Toolbar </ion-title>
         </ion-toolbar>
 
         <ion-toolbar>
@@ -56,11 +56,135 @@
               <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
             </ion-button>
           </ion-buttons>
-          <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
+          <ion-title> This is a long title with buttons. It just goes on and on my friend. </ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button>
+              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            </ion-button>
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button color="secondary">
+              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Defaults</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button class="ion-activated">
+              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            </ion-button>
+            <ion-button class="ion-activated">
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button color="secondary" class="ion-activated">
+              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Defaults.activated</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button fill="solid">
+              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            </ion-button>
+            <ion-button fill="solid">
+              <ion-icon slot="start" name="person-circle"></ion-icon>
+              Solid
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Solid</ion-title>
+          <ion-buttons slot="primary">
+            <ion-button fill="solid" color="secondary">
+              Help
+              <ion-icon slot="end" name="help-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button href="#" fill="solid" class="ion-activated">
+              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            </ion-button>
+            <ion-button fill="solid" class="ion-activated">
+              <ion-icon slot="start" name="person-circle"></ion-icon>
+              Solid
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Solid Activated</ion-title>
+          <ion-buttons slot="primary">
+            <ion-button fill="solid" color="secondary" class="ion-activated">
+              Help
+              <ion-icon slot="end" name="help-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button fill="outline">
+              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            </ion-button>
+            <ion-button fill="outline">
+              <ion-icon slot="start" name="star"></ion-icon>
+              Star
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button color="secondary" fill="outline">
+              Info
+              <ion-icon slot="end" name="information-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Outline</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button fill="outline" class="ion-activated">
+              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            </ion-button>
+            <ion-button fill="outline" class="ion-activated">
+              <ion-icon slot="start" name="star"></ion-icon>
+              Star
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button color="secondary" fill="outline" class="ion-activated">
+              Info
+              <ion-icon slot="end" name="information-circle"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Outline.activated</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="secondary">
+            <ion-button> Go Back </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button href="#"> Edit </ion-button>
+          </ion-buttons>
+          <ion-title>Text Only</ion-title>
         </ion-toolbar>
       </ion-header>
 
-      <ion-content id="content" fullscreen="true"> Content </ion-content>
+      <ion-content id="content" fullscreen="true" class="ion-padding">
+        <h1>Content</h1>
+
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
 
       <ion-footer>
         <ion-toolbar>

core/src/components/toolbar/test/colors/index.html

@@ -23,10 +23,8 @@
               <ion-button fill="solid" color="danger">
                 <ion-icon slot="icon-only" name="add"></ion-icon>
               </ion-button>
-              <ion-button fill="outline">Outline</ion-button>
             </ion-buttons>
             <ion-buttons slot="primary">
-              <ion-button fill="clear">Clear</ion-button>
               <ion-button>
                 <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
               </ion-button>
@@ -36,147 +34,140 @@
 
           <ion-toolbar color="secondary">
             <ion-buttons slot="start">
-              <ion-button fill="solid" color="danger">
-                <ion-icon slot="icon-only" name="add"></ion-icon>
-              </ion-button>
-              <ion-button fill="solid">Solid</ion-button>
+              <ion-button fill="clear">Clear</ion-button>
             </ion-buttons>
             <ion-buttons slot="primary">
-              <ion-button fill="clear">Clear</ion-button>
-              <ion-button>
-                <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-              </ion-button>
+              <ion-button fill="clear" class="ion-focused">Clear</ion-button>
+              <ion-button fill="clear" class="ion-activated">Clear</ion-button>
             </ion-buttons>
             <ion-title>Secondary</ion-title>
           </ion-toolbar>
 
           <ion-toolbar color="tertiary">
             <ion-buttons slot="start">
-              <ion-button fill="solid" color="danger">
-                <ion-icon slot="icon-only" name="add"></ion-icon>
-              </ion-button>
-              <ion-button fill="outline">Outline</ion-button>
+              <ion-button fill="solid">Solid</ion-button>
             </ion-buttons>
             <ion-buttons slot="primary">
-              <ion-button fill="clear">Clear</ion-button>
-              <ion-button>
-                <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-              </ion-button>
+              <ion-button fill="solid" class="ion-focused">Solid</ion-button>
+              <ion-button fill="solid" class="ion-activated">Solid</ion-button>
             </ion-buttons>
             <ion-title>Tertiary</ion-title>
           </ion-toolbar>
 
           <ion-toolbar color="success">
             <ion-buttons slot="start">
-              <ion-button fill="solid" color="danger">
-                <ion-icon slot="icon-only" name="add"></ion-icon>
-              </ion-button>
-              <ion-button fill="solid">Solid</ion-button>
+              <ion-button fill="outline">Outline</ion-button>
             </ion-buttons>
             <ion-buttons slot="primary">
-              <ion-button fill="clear">Clear</ion-button>
-              <ion-button>
-                <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-              </ion-button>
+              <ion-button fill="outline" class="ion-focused">Outline</ion-button>
+              <ion-button fill="outline" class="ion-activated">Outline</ion-button>
             </ion-buttons>
             <ion-title>Success</ion-title>
           </ion-toolbar>
 
           <ion-toolbar color="warning">
             <ion-buttons slot="start">
-              <ion-button fill="solid" color="danger">
-                <ion-icon slot="icon-only" name="add"></ion-icon>
-              </ion-button>
-              <ion-button fill="outline">Outline</ion-button>
+              <ion-button fill="clear">Clear</ion-button>
             </ion-buttons>
             <ion-buttons slot="primary">
-              <ion-button fill="clear">Clear</ion-button>
-              <ion-button>
-                <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-              </ion-button>
+              <ion-button fill="clear" class="ion-focused">Clear</ion-button>
+              <ion-button fill="clear" class="ion-activated">Clear</ion-button>
             </ion-buttons>
             <ion-title>Warning</ion-title>
           </ion-toolbar>
 
           <ion-toolbar color="danger">
             <ion-buttons slot="start">
-              <ion-button fill="solid" color="danger">
-                <ion-icon slot="icon-only" name="add"></ion-icon>
-              </ion-button>
               <ion-button fill="solid">Solid</ion-button>
             </ion-buttons>
             <ion-buttons slot="primary">
-              <ion-button fill="clear">Clear</ion-button>
-              <ion-button>
-                <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-              </ion-button>
+              <ion-button fill="solid" class="ion-focused">Solid</ion-button>
+              <ion-button fill="solid" class="ion-activated">Solid</ion-button>
             </ion-buttons>
             <ion-title>Danger</ion-title>
           </ion-toolbar>
 
           <ion-toolbar color="light">
             <ion-buttons slot="start">
-              <ion-button fill="solid" color="danger">
-                <ion-icon slot="icon-only" name="add"></ion-icon>
-              </ion-button>
-              <ion-button fill="solid">Solid</ion-button>
+              <ion-button fill="outline">Outline</ion-button>
             </ion-buttons>
             <ion-buttons slot="primary">
-              <ion-button fill="outline">Outline</ion-button>
-              <ion-button>
-                <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-              </ion-button>
+              <ion-button fill="outline" class="ion-focused">Outline</ion-button>
+              <ion-button fill="outline" class="ion-activated">Outline</ion-button>
             </ion-buttons>
             <ion-title>Light</ion-title>
           </ion-toolbar>
 
           <ion-toolbar color="medium">
             <ion-buttons slot="start">
-              <ion-button fill="solid" color="danger">
-                <ion-icon slot="icon-only" name="add"></ion-icon>
-              </ion-button>
-              <ion-button fill="solid">Solid</ion-button>
+              <ion-button fill="clear">Clear</ion-button>
             </ion-buttons>
             <ion-buttons slot="primary">
-              <ion-button fill="clear">Clear</ion-button>
-              <ion-button>
-                <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-              </ion-button>
+              <ion-button fill="clear" class="ion-focused">Clear</ion-button>
+              <ion-button fill="clear" class="ion-activated">Clear</ion-button>
             </ion-buttons>
             <ion-title>Medium</ion-title>
           </ion-toolbar>
 
           <ion-toolbar color="dark">
             <ion-buttons slot="start">
-              <ion-button fill="solid" color="danger">
-                <ion-icon slot="icon-only" name="add"></ion-icon>
-              </ion-button>
               <ion-button fill="solid">Solid</ion-button>
             </ion-buttons>
             <ion-buttons slot="primary">
-              <ion-button fill="clear">Clear</ion-button>
-              <ion-button>
-                <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-              </ion-button>
+              <ion-button fill="solid" class="ion-focused">Solid</ion-button>
+              <ion-button fill="solid" class="ion-activated">Solid</ion-button>
             </ion-buttons>
             <ion-title>Dark</ion-title>
           </ion-toolbar>
 
+          <hr />
+
           <ion-toolbar class="custom-toolbar">
             <ion-buttons slot="start">
               <ion-button fill="solid" color="danger">
                 <ion-icon slot="icon-only" name="add"></ion-icon>
               </ion-button>
-              <ion-button fill="solid">Solid</ion-button>
             </ion-buttons>
             <ion-buttons slot="primary">
-              <ion-button fill="clear">Clear</ion-button>
               <ion-button>
                 <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
               </ion-button>
             </ion-buttons>
             <ion-title>Custom</ion-title>
           </ion-toolbar>
+
+          <ion-toolbar class="custom-toolbar">
+            <ion-buttons slot="start">
+              <ion-button fill="clear">Clear</ion-button>
+            </ion-buttons>
+            <ion-buttons slot="primary">
+              <ion-button fill="clear" class="ion-focused">Clear</ion-button>
+              <ion-button fill="clear" class="ion-activated">Clear</ion-button>
+            </ion-buttons>
+            <ion-title>Custom</ion-title>
+          </ion-toolbar>
+
+          <ion-toolbar class="custom-toolbar">
+            <ion-buttons slot="start">
+              <ion-button fill="solid">Solid</ion-button>
+            </ion-buttons>
+            <ion-buttons slot="primary">
+              <ion-button fill="solid" class="ion-focused">Solid</ion-button>
+              <ion-button fill="solid" class="ion-activated">Solid</ion-button>
+            </ion-buttons>
+            <ion-title>Custom</ion-title>
+          </ion-toolbar>
+
+          <ion-toolbar class="custom-toolbar">
+            <ion-buttons slot="start">
+              <ion-button fill="outline">Outline</ion-button>
+            </ion-buttons>
+            <ion-buttons slot="primary">
+              <ion-button fill="outline" class="ion-focused">Outline</ion-button>
+              <ion-button fill="outline" class="ion-activated">Outline</ion-button>
+            </ion-buttons>
+            <ion-title>Custom</ion-title>
+          </ion-toolbar>
         </div>
       </ion-content>
     </ion-app>

core/src/components/toolbar/test/colors/toolbar.e2e.ts

@@ -5,8 +5,8 @@ test.describe('toolbar: colors', () => {
   test('should not have visual regressions', async ({ page }) => {
     await page.goto(`/src/components/toolbar/test/colors`);
 
-    // only capture the container to avoid extra white space
-    const container = page.locator('#toolbars');
-    await expect(container).toHaveScreenshot(`toolbar-colors-${page.getSnapshotSettings()}.png`);
+    await page.setIonViewport();
+
+    await expect(page).toHaveScreenshot(`toolbar-colors-${page.getSnapshotSettings()}.png`);
   });
 });