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

fixes #22468

.github/COMPONENT-GUIDE.md

@@ -141,7 +141,7 @@ Style the `ion-activated` class based on the spec for that element:
 }
 ```
 
-> Order is important! Activated should be before the focused & hover states.
+> Order is important! Activated should be after the focused & hover states.
 
 
 #### User Customization
@@ -307,7 +307,7 @@ Style the `:hover` based on the spec for that element:
 }
 ```
 
-> Order is important! Hover should be after the activated and focused states.
+> Order is important! Hover should be before the activated state.
 
 
 #### User Customization
@@ -729,7 +729,7 @@ For example, if you wanted `transform-origin` to be RTL-aware, you would use the
 @include transform-origin(start, center);
 ```
 
-This would output `transform-origin: left center` in LTR mode and `transform-origin: right center` in RTL mode. 
+This would output `transform-origin: left center` in LTR mode and `transform-origin: right center` in RTL mode.
 
 These mixins depend on the `:host-context` pseudo-class when used inside of shadow components, which is not supported in WebKit. As a result, these mixins will not work in Safari for macOS and iOS when applied to shadow components.
 
@@ -753,4 +753,4 @@ class={{
 :host(.my-cmp-rtl) {
   transform-origin: right center;
 }
-```
+```

core/src/components/button/button.ios.scss

@@ -72,6 +72,7 @@
 
 :host(.button-clear) {
   --background-activated: transparent;
+  --background-activated-opacity: 0;
   --background-focused: #{ion-color(primary, base)};
   --background-hover: transparent;
   --background-focused-opacity: .1;
@@ -131,25 +132,6 @@
 }
 
 
-// iOS Button Activated
-// --------------------------------------------------
-
-:host(.button-clear.ion-activated) {
-  opacity: #{$button-ios-clear-opacity-activated};
-}
-
-:host(.button-outline.ion-activated.ion-color) .button-native {
-  color: current-color(contrast);
-
-  &::after {
-    background: current-color(base);
-  }
-}
-
-:host(.button-solid.ion-color.ion-activated) .button-native::after {
-  background: #{current-color(shade)};
-}
-
 // iOS Button Focused
 // --------------------------------------------------
 
@@ -166,14 +148,16 @@
   background: #{current-color(shade)};
 }
 
+
 // iOS Button Hover
 // --------------------------------------------------
 
 @media (any-hover: hover) {
   // Clear and outline buttons use opacity so set
-  // background to transparent
-  :host(.button-clear:hover),
-  :host(.button-outline:hover) {
+  // background to transparent, but this shouldn't
+  // apply on top of activated
+  :host(.button-clear:not(.ion-activated):hover),
+  :host(.button-outline:not(.ion-activated):hover) {
     opacity: #{$button-ios-clear-opacity-hover};
   }
 
@@ -192,10 +176,31 @@
   }
 
   // Solid buttons inside of a toolbar should use a tint of the current
-  // background so use white to tint it
-  :host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native::after {
+  // background so use white to tint it, but this should not apply
+  // when activated
+  :host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) .button-native::after {
     background: #fff;
 
     opacity: 0.10;
   }
 }
+
+
+// iOS Button Activated
+// --------------------------------------------------
+
+:host(.button-clear.ion-activated) {
+  opacity: #{$button-ios-clear-opacity-activated};
+}
+
+:host(.button-outline.ion-activated.ion-color) .button-native {
+  color: current-color(contrast);
+
+  &::after {
+    background: current-color(base);
+  }
+}
+
+:host(.button-solid.ion-color.ion-activated) .button-native::after {
+  background: #{current-color(shade)};
+}

core/src/components/button/button.scss

@@ -246,17 +246,6 @@ ion-ripple-effect {
   @include button-state();
 }
 
-// Button Activated
-:host(.ion-activated) {
-  color: var(--color-activated);
-}
-
-:host(.ion-activated) .button-native::after {
-  background: var(--background-activated);
-
-  opacity: var(--background-activated-opacity);
-}
-
 // Button Focused
 :host(.ion-focused) {
   color: var(--color-focused);
@@ -281,6 +270,17 @@ ion-ripple-effect {
   }
 }
 
+// Button Activated
+:host(.ion-activated) {
+  color: var(--color-activated);
+}
+
+:host(.ion-activated) .button-native::after {
+  background: var(--background-activated);
+
+  opacity: var(--background-activated-opacity);
+}
+
 
 // Button Colors
 // --------------------------------------------------
@@ -305,6 +305,7 @@ ion-ripple-effect {
   color: current-color(base);
 }
 
+
 // Button in Toolbar
 // --------------------------------------------------
 
@@ -320,3 +321,11 @@ ion-ripple-effect {
   background: #{var(--ion-toolbar-color, var(--background))};
   color: #{var(--ion-toolbar-background, var(--color))};
 }
+
+// Activated Button in Toolbar
+// --------------------------------------------------
+
+:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: var(--ion-toolbar-color, var(--color));
+  color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
+}

core/src/components/buttons/buttons.ios.scss

@@ -48,6 +48,7 @@
 :host-context(.ion-color)::slotted(*) .button-outline {
   --color-activated: #{current-color(base)};
   --color-focused: #{current-color(contrast)};
+  --background-activated: #{current-color(contrast)};
 }
 
 

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`);
   });
 });

core/src/themes/test/css-variables/index.html

@@ -90,7 +90,7 @@
                 <ion-button fill="outline">Outline</ion-button>
               </ion-buttons>
 
-              <ion-title>Lists</ion-title>
+              <ion-title>Default Buttons</ion-title>
 
               <ion-buttons slot="primary">
                 <ion-back-button color="secondary" default-href="/"></ion-back-button>
@@ -101,6 +101,7 @@
                 <ion-button color="secondary" fill="outline">Outline</ion-button>
               </ion-buttons>
             </ion-toolbar>
+
             <ion-toolbar>
               <ion-buttons slot="start">
                 <ion-back-button class="ion-focused" default-href="/"></ion-back-button>
@@ -111,7 +112,7 @@
                 <ion-button class="ion-focused" fill="outline">Outline</ion-button>
               </ion-buttons>
 
-              <ion-title>Lists</ion-title>
+              <ion-title>Focused Buttons</ion-title>
 
               <ion-buttons slot="primary">
                 <ion-back-button color="secondary" class="ion-focused" default-href="/"></ion-back-button>
@@ -122,6 +123,29 @@
                 <ion-button color="secondary" class="ion-focused" fill="outline">Outline</ion-button>
               </ion-buttons>
             </ion-toolbar>
+
+            <ion-toolbar>
+              <ion-buttons slot="start">
+                <ion-back-button class="ion-activated" default-href="/"></ion-back-button>
+                <ion-menu-button class="ion-activated" auto-hide="false"></ion-menu-button>
+                <ion-button class="ion-activated">Default</ion-button>
+                <ion-button class="ion-activated" fill="solid">Solid</ion-button>
+                <ion-button class="ion-activated" fill="clear">Clear</ion-button>
+                <ion-button class="ion-activated" fill="outline">Outline</ion-button>
+              </ion-buttons>
+
+              <ion-title>Activated Buttons</ion-title>
+
+              <ion-buttons slot="primary">
+                <ion-back-button color="secondary" class="ion-activated" default-href="/"></ion-back-button>
+                <ion-menu-button color="secondary" class="ion-activated" auto-hide="false"></ion-menu-button>
+                <ion-button color="secondary" class="ion-activated">Default</ion-button>
+                <ion-button color="secondary" class="ion-activated" fill="solid">Solid</ion-button>
+                <ion-button color="secondary" class="ion-activated" fill="clear">Clear</ion-button>
+                <ion-button color="secondary" class="ion-activated" fill="outline">Outline</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+
             <ion-toolbar>
               <ion-segment value="default" class="theme-picker">
                 <ion-segment-button value="default">