ionic-team · ShaneK · Apr 30, 2025 · Apr 23, 2025 · Apr 24, 2025 · Apr 24, 2025
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Segment - Toolbar</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body onload="listenForEvent()">
+    <ion-app>
+      <ion-toolbar>
+        <ion-segment value="a">
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-buttons slot="start">
+          <ion-button id="button" color="primary" fill="solid"> Start </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-segment value="a">
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-buttons slot="end">
+          <ion-button id="button" color="primary" fill="solid"> End </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-segment value="a">
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-buttons slot="start">
+          <ion-button id="button" color="primary" fill="solid"> Start </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-button id="button" color="primary" fill="solid"> End </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+
+      <ion-toolbar color="primary">
+        <ion-segment value="a">
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c" disabled="true">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-buttons slot="secondary">
+          <ion-button id="button" color="primary" fill="solid"> Secondary </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button id="button" color="primary" fill="solid"> Primary </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+
+      <ion-toolbar color="light">
+        <ion-segment value="a">
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c" disabled="true">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-buttons slot="start">
+          <ion-button id="button" color="primary" fill="solid"> Start </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button id="button" color="primary" fill="solid"> Secondary </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+
+      <ion-toolbar color="medium">
+        <ion-segment value="a">
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c" disabled="true">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-buttons slot="primary">
+          <ion-button id="button" color="primary" fill="solid"> Primary </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-button id="button" color="primary" fill="solid"> End </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+
+      <ion-toolbar color="dark">
+        <ion-segment value="a">
+          <ion-segment-button value="a">
+            <ion-label>First</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="b">
+            <ion-label>Second</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="c" disabled="true">
+            <ion-label>Third</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-buttons slot="start">
+          <ion-button id="button" color="primary" fill="solid"> Start </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button id="button" color="primary" fill="solid"> Secondary </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button id="button" color="primary" fill="solid"> Primary </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-button id="button" color="primary" fill="solid"> End </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-app>
+  </body>
+</html>
@@ -345,7 +345,7 @@
 
         var customModalSelect = document.getElementById('customModalSelect');
         var customModalSheetOptions = {
-          header: 'Pizza Toppings',
+          header: 'Pizza Toppings are really long',
           breakpoints: [0.5],
           initialBreakpoint: 0.5,
         };

@@ -6,24 +6,11 @@
 
 :host {
   @include globals.typography(globals.$ion-heading-h6-medium);
-  @include globals.padding(var(--padding-top), 0, var(--padding-bottom));
 
   box-sizing: border-box;
   pointer-events: none;
 }
 
-:host-context(ion-toolbar) {
-  @include globals.position(0, null, null, 0);
-  position: absolute;
-
-  width: 100%;
-  height: 100%;
-
-  transform: translateZ(0);
-
-  z-index: -1; // TODO(ROU-10853): replace this value with a layer token. This is here to prevent the title from blokcing interaction with buttons.
-}
-
 // Title: Large
 // --------------------------------------------------
 

@@ -42,6 +42,59 @@
           <ion-title> Toolbar </ion-title>
         </ion-toolbar>
 
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <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-title> Toolbar with just start button </ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="end">
+            <ion-button color="secondary">
+              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title> Toolbar with just end button </ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <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-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-text slot="end"> Small </ion-text>
+          <ion-title> Toolbar with start content that's long and end content that's short </ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-text slot="start"> Small </ion-text>
+          <ion-buttons slot="end">
+            <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-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title> Toolbar with start content that's long and end content that's short </ion-title>
+        </ion-toolbar>
+
         <ion-toolbar>
           <ion-buttons slot="secondary">
             <ion-button>
@@ -59,6 +112,23 @@
           <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="start">
+            <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="end">
+            <ion-button color="secondary">
+              <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 start and end buttons. It just goes on and on my friend. </ion-title>
+        </ion-toolbar>
+
         <ion-toolbar>
           <ion-buttons slot="secondary">
             <ion-button>

@@ -1,14 +1,6 @@
 @use "./toolbar.common";
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 
-$toolbar-order-ionic: (
-  slot-start: 1,
-  slot-secondary: 2,
-  content: 3,
-  slot-primary: 4,
-  slot-end: 5,
-);
-
 // Ionic Toolbar
 // --------------------------------------------------
 
@@ -31,8 +23,7 @@ $toolbar-order-ionic: (
 // --------------------------------------------------
 
 .toolbar-content {
-  flex: 2;
-  order: map-get($toolbar-order-ionic, content);
+  flex: 1 1 auto;
 
   min-width: 0;
 }
@@ -44,11 +35,18 @@ $toolbar-order-ionic: (
   @include globals.padding(0);
 }
 
+// Toolbar: Buttons
+// --------------------------------------------------
+
+::slotted(ion-buttons) {
+  gap: globals.$ion-space-200;
+}
+
 // Toolbar: Title
 // --------------------------------------------------
 
 ::slotted(ion-title) {
-  @include globals.padding-horizontal(var(--padding-top), var(--padding-end));
+  @include globals.padding-horizontal(globals.$ion-space-200);
 }
 
 :host(.toolbar-title-default) ::slotted(ion-title) {
@@ -61,32 +59,50 @@ $toolbar-order-ionic: (
 
 // Ionic Toolbar Slot Placement
 // --------------------------------------------------
+// We're using the slots to force the main toolbar content to be
+// cenetered in the toolbar. This is a bit of a hack but it works.
+// The main content is placed in the center and then JavaScript evaluates
+// the sizes of the different slots and sets what size the pairs should be
+// based on the larger one. We then use `flex-basis` to set the expected
+// size of the slots and disable `flex-shrink` so that the smaller slot cannot
+// shrink and throw off the center, we also diable flex-grow so that slots do
+// not grow more than they need. The slots are paired up so the mirroring slots
+// always have the same size. That is, start and end are paired and primary
+// and secondary are paired. All of this works together to force the main
+// content to maintain the center as best as CSS allows while also allowing
+// the slots and main content to have fairly dynamic widths.
+// --------------------------------------------------
 
-::slotted([slot="secondary"]) {
-  order: map-get($toolbar-order-ionic, slot-secondary);
-}
+:host(.has-end-content) slot[name="end"],
+:host(.show-end) slot[name="end"] {
+  display: flex;
 
-::slotted([slot="primary"]) {
-  order: map-get($toolbar-order-ionic, slot-primary);
+  flex: 0 0 var(--start-end-size, 0);
+  justify-content: flex-end;
 
   text-align: end;
 }
 
-::slotted([slot="start"]) {
-  order: map-get($toolbar-order-ionic, slot-start);
+:host(.has-start-content) slot[name="start"],
+:host(.show-start) slot[name="start"] {
+  display: flex;
+
+  flex: 0 0 var(--start-end-size, 0);
 }
 
-::slotted([slot="start"]),
-::slotted([slot="end"]) {
+:host(.has-primary-content) slot[name="primary"],
+:host(.show-primary) slot[name="primary"] {
   display: flex;
 
-  flex: 1;
-  gap: globals.$ion-space-200;
+  flex: 0 0 var(--primary-secondary-size, 0);
+  justify-content: flex-end;
+
+  text-align: end;
 }
 
-::slotted([slot="end"]) {
-  justify-content: end;
-  order: map-get($toolbar-order-ionic, slot-end);
+:host(.has-secondary-content) slot[name="secondary"],
+:host(.show-secondary) slot[name="secondary"] {
+  display: flex;
 
-  font-size: globals.$ion-font-size-600;
+  flex: 0 0 var(--primary-secondary-size, 0);
 }