refactor(tab-bar): add expand prop for ionic theme

Author: thetaPC

core/api.txt

@@ -2177,6 +2177,7 @@ ion-tab,method,setActive,setActive() => Promise<void>
 
 ion-tab-bar,shadow
 ion-tab-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-tab-bar,prop,expand,"compact" | "full",'full',false,false
 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

core/src/components.d.ts

@@ -3411,6 +3411,10 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * Set to `"compact"` to display a width based on the items inside the tab bar. This value will only work for the `ionic` theme.  Set to `"full"` to display a full width tab bar.  Defaults to `"full"`.
+         */
+        "expand": 'compact' | 'full';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -8765,6 +8769,10 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * Set to `"compact"` to display a width based on the items inside the tab bar. This value will only work for the `ionic` theme.  Set to `"full"` to display a full width tab bar.  Defaults to `"full"`.
+         */
+        "expand"?: 'compact' | 'full';
         /**
           * The mode determines the platform behaviors of the component.
          */

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

@@ -36,7 +36,7 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-segment value="2" scrollable="true">
+          <ion-segment value="2" scrollable="true" mode="md">
             <ion-segment-button value="1">
               <ion-label>Button 1</ion-label>
             </ion-segment-button>

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

@@ -9,8 +9,6 @@
   align-items: center;
   justify-content: center;
 
-  width: auto;
-
   /* stylelint-disable */
   padding-right: var(--ion-safe-area-right);
   padding-bottom: var(--ion-safe-area-bottom, 0);
@@ -24,7 +22,6 @@
 
   text-align: center;
 
-  contain: strict;
   user-select: none;
 
   /* stylelint-disable-next-line declaration-no-important */
@@ -52,3 +49,11 @@
   /* stylelint-disable-next-line declaration-no-important */
   display: none !important;
 }
+
+// Expand: Full
+// --------------------------------------------------
+:host(.tab-bar-full) {
+  width: auto;
+
+  contain: strict;
+}

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

@@ -32,3 +32,25 @@
   // TODO(ROU-10853): replace this value with a layer token
   z-index: 10;
 }
+
+// Expand: Compact
+// --------------------------------------------------
+:host(.tab-bar-compact) {
+  position: absolute;
+
+  align-self: center;
+
+  width: fit-content;
+
+  box-shadow: #{globals.$ionic-elevation-200};
+
+  contain: content;
+}
+
+:host([slot="top"].tab-bar-expand-compact) {
+  top: globals.$ionic-space-400;
+}
+
+:host([slot="bottom"].tab-bar-expand-compact) {
+  bottom: globals.$ionic-space-400;
+}

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

@@ -49,6 +49,17 @@ export class TabBar implements ComponentInterface {
     }
   }
 
+  /**
+   * Set to `"compact"` to display a width based on the items
+   * inside the tab bar. This value will only work for the
+   * `ionic` theme.
+   *
+   * Set to `"full"` to display a full width tab bar.
+   *
+   * Defaults to `"full"`.
+   */
+  @Prop() expand: 'compact' | 'full' = 'full';
+
   /**
    * If `true`, the tab bar will be translucent.
    * Only applies when the theme is `"ios"` and the device supports
@@ -109,6 +120,7 @@ export class TabBar implements ComponentInterface {
           [theme]: true,
           'tab-bar-translucent': translucent,
           'tab-bar-hidden': shouldHide,
+          [`tab-bar-${this.expand}`]: true,
         })}
       >
         <slot></slot>

core/src/components/tab-bar/test/expand/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tab Bar - Preview</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <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>
+    <link rel="stylesheet" href="../../../../../css/ionic.bundle.css" />
+    <link rel="stylesheet" href="../../../../../scripts/testing/styles.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <ion-tab-bar selected-tab="1" expand="compact">
+          <ion-tab-button tab="1">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="2">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="3" class="ion-focused">
+            <ion-icon name="triangle-outline"></ion-icon>
+            <ion-label>Label</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-content>
+    </ion-app>
+
+    <style>
+      ion-content {
+        --background: #f6f6f6;
+      }
+    </style>
+  </body>
+</html>