feat(toolbar): add titlePlacement property to determine how to align title

Author: brandyscarney

core/src/components.d.ts

@@ -4463,6 +4463,10 @@ export namespace Components {
           * The theme determines the visual appearance of the component.
          */
         "theme"?: "ios" | "md" | "ionic";
+        /**
+          * Where to place the title relative to the other toolbar content. `"start"`: The title will appear to the left of the toolbar content in LTR and to the right in RTL. `"center"`: The title will appear in the center of the toolbar. `"end"`: The title will appear to the right of the toolbar content in LTR and to the left in RTL.
+         */
+        "titlePlacement"?: 'start' | 'center' | 'end';
     }
 }
 export interface IonAccordionGroupCustomEvent<T> extends CustomEvent<T> {
@@ -10590,6 +10594,10 @@ declare namespace LocalJSX {
           * The theme determines the visual appearance of the component.
          */
         "theme"?: "ios" | "md" | "ionic";
+        /**
+          * Where to place the title relative to the other toolbar content. `"start"`: The title will appear to the left of the toolbar content in LTR and to the right in RTL. `"center"`: The title will appear in the center of the toolbar. `"end"`: The title will appear to the right of the toolbar content in LTR and to the left in RTL.
+         */
+        "titlePlacement"?: 'start' | 'center' | 'end';
     }
 
     interface IonAccordionAttributes {
@@ -11382,6 +11390,7 @@ declare namespace LocalJSX {
     }
     interface IonToolbarAttributes {
         "color": Color;
+        "titlePlacement": 'start' | 'center' | 'end';
     }
 
     interface IntrinsicElements {

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

@@ -59,10 +59,6 @@
   @include globals.padding-horizontal(globals.$ion-space-200);
 }
 
-:host(.toolbar-title-default) ::slotted(ion-title) {
-  text-align: center;
-}
-
 :host(.toolbar-title-large) ::slotted(ion-title) {
   @include globals.padding-horizontal(globals.$ion-space-400);
 }
@@ -116,3 +112,18 @@
 
   flex: 0 0 var(--primary-secondary-size, 0);
 }
+
+// Toolbar Title Placement
+// --------------------------------------------------
+
+:host(.toolbar-title-placement-start) {
+  text-align: start;
+}
+
+:host(.toolbar-title-placement-center) {
+  text-align: center;
+}
+
+:host(.toolbar-title-placement-end) {
+  text-align: end;
+}

core/src/components/toolbar/toolbar.tsx

@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, forceUpdate, h, Host, Listen, Prop } from '@stencil/core';
+import { Component, Element, forceUpdate, h, Host, Listen, Prop, Watch } from '@stencil/core';
 import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonTheme } from '../../global/ionic-global';
@@ -30,6 +30,14 @@ import type { Color, CssClassMap, StyleEventDetail } from '../../interface';
 })
 export class Toolbar implements ComponentInterface {
   private childrenStyles = new Map<string, CssClassMap>();
+  private readonly slotClasses = [
+    'has-start-content',
+    'has-end-content',
+    'has-primary-content',
+    'has-secondary-content',
+  ];
+  private readonly showClasses = ['show-start', 'show-end', 'show-primary', 'show-secondary'];
+  private readonly slotSizeVars = ['--start-end-size', '--primary-secondary-size'];
 
   @Element() el!: HTMLIonToolbarElement;
 
@@ -40,6 +48,14 @@ export class Toolbar implements ComponentInterface {
    */
   @Prop({ reflect: true }) color?: Color;
 
+  /**
+   * Where to place the title relative to the other toolbar content.
+   * `"start"`: The title will appear to the left of the toolbar content in LTR and to the right in RTL.
+   * `"center"`: The title will appear in the center of the toolbar.
+   * `"end"`: The title will appear to the right of the toolbar content in LTR and to the left in RTL.
+   */
+  @Prop() titlePlacement?: 'start' | 'center' | 'end';
+
   componentWillLoad() {
     const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
 
@@ -67,6 +83,24 @@ export class Toolbar implements ComponentInterface {
     this.updateSlotWidths();
   }
 
+  @Watch('titlePlacement')
+  titlePlacementChanged() {
+    this.updateSlotClasses();
+  }
+
+  /**
+   * Gets the title placement.
+   * Returns the title placement if it is set, otherwise returns `"center"`
+   * for `ionic` and `ios`, and `"start"` for `md`.
+   */
+  private getTitlePlacement(): 'start' | 'center' | 'end' {
+    if (this.titlePlacement !== undefined) {
+      return this.titlePlacement;
+    }
+
+    return getIonTheme(this) === 'ionic' || getIonTheme(this) === 'ios' ? 'center' : 'start';
+  }
+
   /**
    * Updates the CSS custom properties for slot widths
    * This ensures that slots shown by their met conditions
@@ -164,7 +198,21 @@ export class Toolbar implements ComponentInterface {
     return allMeasurementsSuccessful;
   }
 
+  /**
+   * Removes all slot visibility classes and slot width CSS variables.
+   */
+  private removeSlotClasses() {
+    this.el.classList.remove(...this.slotClasses, ...this.showClasses);
+    this.slotSizeVars.forEach((cssVar) => this.el.style.removeProperty(cssVar));
+  }
+
   private updateSlotClasses() {
+    const titlePlacement = this.getTitlePlacement();
+    if (titlePlacement !== 'center') {
+      this.removeSlotClasses();
+      return;
+    }
+
     // Check if slots have content
     const slots = ['start', 'end', 'primary', 'secondary'];
 
@@ -250,12 +298,15 @@ export class Toolbar implements ComponentInterface {
       Object.assign(childStyles, style);
     });
 
+    const titlePlacement = this.getTitlePlacement();
+
     return (
       <Host
         class={{
           ...createColorClasses(this.color, {
             [theme]: true,
             'in-toolbar': hostContext('ion-toolbar', this.el),
+            [`toolbar-title-placement-${titlePlacement}`]: true,
           }),
           ...childStyles,
         }}

packages/angular/src/directives/proxies.ts

@@ -2636,14 +2636,14 @@ This event will not emit when programmatically setting the `checked` property.
 
 
 @ProxyCmp({
-  inputs: ['color', 'mode', 'theme']
+  inputs: ['color', 'mode', 'theme', 'titlePlacement']
 })
 @Component({
   selector: 'ion-toolbar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'mode', 'theme'],
+  inputs: ['color', 'mode', 'theme', 'titlePlacement'],
 })
 export class IonToolbar {
   protected el: HTMLIonToolbarElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -2298,14 +2298,14 @@ Shorthand for ionToastDidDismiss.
 
 @ProxyCmp({
   defineCustomElementFn: defineIonToolbar,
-  inputs: ['color', 'mode', 'theme']
+  inputs: ['color', 'mode', 'theme', 'titlePlacement']
 })
 @Component({
   selector: 'ion-toolbar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'mode', 'theme'],
+  inputs: ['color', 'mode', 'theme', 'titlePlacement'],
   standalone: true
 })
 export class IonToolbar {

packages/vue/src/proxies.ts

@@ -1122,6 +1122,7 @@ export const IonToggle: StencilVueComponent<JSX.IonToggle, JSX.IonToggle["checke
 
 
 export const IonToolbar: StencilVueComponent<JSX.IonToolbar> = /*@__PURE__*/ defineContainer<JSX.IonToolbar>('ion-toolbar', defineIonToolbar, [
-  'color'
+  'color',
+  'titlePlacement'
 ]);