fix(toolbar): fixing dynamic slot sizing to ensure better centered content

Author: ShaneK

core/src/components/select/test/basic/index.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,
         };

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

@@ -64,41 +64,39 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="secondary">
+          <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="primary">
-            <ion-button color="secondary">
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></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-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-buttons slot="start">
+          <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-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-icon slot="icon-only" name="search"></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-title> Toolbar with start content that's long and end content that's short </ion-title>
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button>
               <ion-icon slot="icon-only" name="person-circle"></ion-icon>
             </ion-button>
@@ -111,13 +109,11 @@
               <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 primary 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-buttons slot="start">
             <ion-button>
               <ion-icon slot="icon-only" name="person-circle"></ion-icon>
             </ion-button>
@@ -130,9 +126,7 @@
               <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 secondary and end buttons. It just goes on and on my friend.
-          </ion-title>
+          <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>

core/src/components/toolbar/toolbar.ionic.scss

@@ -39,7 +39,7 @@
 // --------------------------------------------------
 
 ::slotted(ion-title) {
-  @include globals.padding-horizontal(var(--padding-start), var(--padding-end));
+  @include globals.padding-horizontal(globals.$ion-space-200);
 }
 
 :host(.toolbar-title-default) ::slotted(ion-title) {
@@ -52,43 +52,53 @@
 
 // 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. 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.
+// --------------------------------------------------
 
 :host(.has-end-content) slot[name="end"],
 :host(.show-end) slot[name="end"] {
   display: flex;
 
-  flex: 1 1 0;
-  gap: globals.$ion-space-200;
-
+  flex: 1 0 var(--start-end-size, 0);
   justify-content: flex-end;
 
   text-align: end;
+  gap: globals.$ion-space-400;
 }
 
 :host(.has-start-content) slot[name="start"],
 :host(.show-start) slot[name="start"] {
   display: flex;
 
-  flex: 1 1 0;
-  gap: globals.$ion-space-200;
+  flex: 1 0 var(--start-end-size, 0);
+  gap: globals.$ion-space-400;
 }
 
 :host(.has-primary-content) slot[name="primary"],
 :host(.show-primary) slot[name="primary"] {
   display: flex;
 
-  flex: 1 1 0;
-  gap: globals.$ion-space-200;
-
+  flex: 1 0 var(--primary-secondary-size, 0);
   justify-content: flex-end;
 
   text-align: end;
+  gap: globals.$ion-space-400;
 }
 
 :host(.has-secondary-content) slot[name="secondary"],
 :host(.show-secondary) slot[name="secondary"] {
   display: flex;
 
-  flex: 1 1 0;
-  gap: globals.$ion-space-200;
+  flex: 1 0 var(--primary-secondary-size, 0);
+  gap: globals.$ion-space-400;
 }

core/src/components/toolbar/toolbar.tsx

@@ -64,6 +64,85 @@ export class Toolbar implements ComponentInterface {
 
   componentDidLoad() {
     this.updateSlotClasses();
+    this.updateSlotWidths();
+  }
+
+  /**
+   * Updates the CSS custom properties for slot widths
+   * This ensures that slots shown by their met conditions
+   * have a minimum width matching their required slot
+   */
+  private updateSlotWidths(tries: number = 0) {
+    // Set timeout to try to execute after everything is rendered
+    setTimeout(() => {
+      // Attempt to measure and update
+      const success = this.measureAndUpdateSlots();
+
+      // If not all measurements were successful, try again in 100 ms
+      // cap recursion at 5 tries for safety
+      if (!success && tries < 5) {
+        setTimeout(() => {
+          this.updateSlotWidths(tries + 1);
+        }, 100);
+      }
+    });
+  }
+
+  /**
+   * Measure the widths of the slots and update the CSS custom properties
+   * for the minimum width of each pair of slots based on the largest width in each pair.
+   * Returns whether we successfully measured all of the slots we expect to have content.
+   * If not, the content probably hasn't rendered yet and we need to try again.
+   */
+  private measureAndUpdateSlots(): boolean {
+    // Define the relationship between slots based on the conditions array
+    // Group slots that should have the same width
+    const slotPairs = [
+      { name: 'start-end', slots: ['start', 'end'] },
+      { name: 'primary-secondary', slots: ['primary', 'secondary'] },
+    ];
+
+    // First, measure all slot widths
+    const slotWidths = new Map<string, number>();
+    let allMeasurementsSuccessful = true;
+
+    // Measure all slots with content
+    const slots = ['start', 'end', 'primary', 'secondary'];
+    slots.forEach((slot) => {
+      if (this.el.classList.contains(`has-${slot}-content`)) {
+        const slotElement = this.el.shadowRoot?.querySelector(`slot[name="${slot}"]`) as HTMLElement | null;
+        if (slotElement) {
+          const width = slotElement.offsetWidth;
+          if (width > 0) {
+            slotWidths.set(slot, width);
+          } else {
+            allMeasurementsSuccessful = false;
+          }
+        }
+      }
+    });
+
+    // Then set the CSS custom properties based on the largest width in each pair
+    slotPairs.forEach(({ name, slots }) => {
+      // Find the maximum width among the slots in this pair
+      let maxWidth = 0;
+      let hasAnyContent = false;
+
+      slots.forEach((slot) => {
+        if (slotWidths.has(slot)) {
+          hasAnyContent = true;
+          maxWidth = Math.max(maxWidth, slotWidths.get(slot) ?? 0);
+        }
+      });
+
+      // If at least one slot in the pair has content, set the min-width for the pair
+      if (hasAnyContent && maxWidth > 0) {
+        // Set a single CSS variable for the pair
+        this.el.style.setProperty(`--${name}-size`, `${maxWidth}px`);
+      }
+    });
+
+    return allMeasurementsSuccessful;
   }
 
   private updateSlotClasses() {
@@ -108,6 +187,9 @@ export class Toolbar implements ComponentInterface {
     // Add classes to the toolbar element
     this.el.classList.add(...classesToAdd);
     this.el.classList.remove(...classesToRemove);
+
+    // Update slot widths after classes have been updated
+    this.updateSlotWidths();
   }
 
   private hasSlotContent(slotName: string): boolean {