Merge remote-tracking branch 'origin/main' into chore/sync-7.0-with-main-12-05-22

core/src/components/segment/segment.tsx

@@ -97,6 +97,15 @@ export class Segment implements ComponentInterface {
         activeButton.scrollIntoView({
           behavior: 'smooth',
           inline: 'center',
+
+          /**
+           * Segment should scroll on the
+           * horizontal axis. `block: 'nearest'`
+           * ensures that the vertical axis
+           * does not scroll if the segment
+           * as a whole is already in view.
+           */
+          block: 'nearest',
         });
       }
     }

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

@@ -31,6 +31,27 @@ test.describe('segment: toolbar', () => {
               <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
             </ion-segment>
           </ion-toolbar>
+          <ion-toolbar color="light">
+            <ion-segment value="a">
+              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="b">Second</ion-segment-button>
+              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+            </ion-segment>
+          </ion-toolbar>
+          <ion-toolbar color="medium">
+            <ion-segment value="a">
+              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="b">Second</ion-segment-button>
+              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+            </ion-segment>
+          </ion-toolbar>
+          <ion-toolbar color="dark">
+            <ion-segment value="a">
+              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="b">Second</ion-segment-button>
+              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+            </ion-segment>
+          </ion-toolbar>
         </ion-header>
       `);