refactor(tab-bar): add width prop

core/api.txt

@@ -2181,6 +2181,7 @@ ion-tab-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-tab-bar,prop,selectedTab,string | undefined,undefined,false,false
 ion-tab-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-tab-bar,prop,translucent,boolean,false,false,false
+ion-tab-bar,prop,width,"auto" | undefined,undefined,false,false
 ion-tab-bar,css-prop,--background,ionic
 ion-tab-bar,css-prop,--background,ios
 ion-tab-bar,css-prop,--background,md

core/src/components.d.ts

@@ -3427,6 +3427,10 @@ export namespace Components {
           * If `true`, the tab bar will be translucent. Only applies when the theme is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         "translucent": boolean;
+        /**
+          * The width of the tab bar. Defaults to full width. `auto` will display a size based on the items inside the tab bar. Only available for `"ionic"` theme.
+         */
+        "width"?: 'auto';
     }
     interface IonTabButton {
         /**
@@ -8783,6 +8787,10 @@ declare namespace LocalJSX {
           * If `true`, the tab bar will be translucent. Only applies when the theme is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         "translucent"?: boolean;
+        /**
+          * The width of the tab bar. Defaults to full width. `auto` will display a size based on the items inside the tab bar. Only available for `"ionic"` theme.
+         */
+        "width"?: 'auto';
     }
     interface IonTabButton {
         /**

core/src/components/tab-bar/tab-bar.common.scss

@@ -1,3 +1,5 @@
+@use "../../themes/mixins" as mixins;
+
 :host {
   /**
    * @prop --background: Background of the tab bar

core/src/components/tab-bar/tab-bar.ionic.scss

@@ -32,3 +32,32 @@
   // TODO(ROU-10853): replace this value with a layer token
   z-index: 10;
 }
+
+:host([slot="fixed"]) {
+  @include globals.margin(null, auto);
+
+  bottom: 16px;
+
+  width: fit-content;
+  height: fit-content;
+
+  box-shadow: #{globals.$ionic-elevation-200};
+}
+
+:host(.tab-bar-width-auto) {
+  position: absolute;
+
+  align-self: center;
+
+  width: fit-content;
+
+  contain: content;
+}
+
+:host([slot="top"].tab-bar-width-auto) {
+  top: 16px;
+}
+
+:host([slot="bottom"].tab-bar-width-auto) {
+  bottom: 16px;
+}

core/src/components/tab-bar/tab-bar.tsx

@@ -36,6 +36,13 @@ export class TabBar implements ComponentInterface {
    */
   @Prop({ reflect: true }) color?: Color;
 
+  /**
+   * The width of the tab bar. Defaults to full width.
+   * `auto` will display a size based on the items inside the tab bar.
+   * Only available for `"ionic"` theme.
+   */
+  @Prop() width?: 'auto';
+
   /**
    * The selected tab component
    */
@@ -97,9 +104,10 @@ export class TabBar implements ComponentInterface {
   }
 
   render() {
-    const { color, translucent, keyboardVisible } = this;
+    const { color, translucent, keyboardVisible, width } = this;
     const theme = getIonTheme(this);
     const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
+    console.log('width', width);
 
     return (
       <Host
@@ -109,6 +117,7 @@ export class TabBar implements ComponentInterface {
           [theme]: true,
           'tab-bar-translucent': translucent,
           'tab-bar-hidden': shouldHide,
+          [`tab-bar-width-${width}`]: width !== undefined,
         })}
       >
         <slot></slot>

packages/angular/src/directives/proxies.ts

@@ -2178,14 +2178,14 @@ export declare interface IonTab extends Components.IonTab {}
 
 
 @ProxyCmp({
-  inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent']
+  inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent', 'width']
 })
 @Component({
   selector: 'ion-tab-bar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent'],
+  inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent', 'width'],
 })
 export class IonTabBar {
   protected el: HTMLElement;

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

@@ -1972,14 +1972,14 @@ export declare interface IonTab extends Components.IonTab {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonTabBar,
-  inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent']
+  inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent', 'width']
 })
 @Component({
   selector: 'ion-tab-bar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent'],
+  inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent', 'width'],
   standalone: true
 })
 export class IonTabBar {