refactor(tab-bar): add shape prop

ionic-team · Sep 23, 2024 · f555a14 · f555a14
1 parent a589deb
commit f555a14
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 12 deletions.
diff --git a/core/api.txt b/core/api.txt
@@ -2180,6 +2180,7 @@ ion-tab-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "sec
 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,shape,"rectangular" | "round" | "soft" | 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,css-prop,--background,ionic

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -3423,6 +3423,10 @@ export namespace Components {
           * The selected tab component
          */
         "selectedTab"?: string;
+        /**
+          * Set to `"soft"` for a tab bar with slightly rounded corners, `"round"` for a tab bar with fully rounded corners, or `"rectangular"` for a tab bar without rounded corners.  Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -8783,6 +8787,10 @@ declare namespace LocalJSX {
           * The selected tab component
          */
         "selectedTab"?: string;
+        /**
+          * Set to `"soft"` for a tab bar with slightly rounded corners, `"round"` for a tab bar with fully rounded corners, or `"rectangular"` for a tab bar without rounded corners.  Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */

diff --git a/core/src/components/tab-bar/tab-bar.common.scss b/core/src/components/tab-bar/tab-bar.common.scss
@@ -50,8 +50,10 @@
   display: none !important;
 }
 
-// Expand: Full
+// Tab Bar Expand
 // --------------------------------------------------
+
+/* Full */
 :host(.tab-bar-full) {
   width: auto;
 

diff --git a/core/src/components/tab-bar/tab-bar.ionic.scss b/core/src/components/tab-bar/tab-bar.ionic.scss
@@ -33,8 +33,10 @@
   z-index: 10;
 }
 
-// Expand: Compact
+// Tab Bar Expand
 // --------------------------------------------------
+
+/* Compact */
 :host(.tab-bar-compact) {
   position: absolute;
 
@@ -47,10 +49,28 @@
   contain: content;
 }
 
-:host([slot="top"].tab-bar-expand-compact) {
+:host([slot="top"].tab-bar-compact) {
   top: globals.$ionic-space-400;
 }
 
-:host([slot="bottom"].tab-bar-expand-compact) {
+:host([slot="bottom"].tab-bar-compact) {
   bottom: globals.$ionic-space-400;
 }
+
+// Tab Bar Shapes
+// --------------------------------------------------
+
+/* Soft */
+:host(.tab-bar-soft) {
+  @include globals.border-radius(globals.$ionic-border-radius-400);
+}
+
+/* Round */
+:host(.tab-bar-round) {
+  @include globals.border-radius(globals.$ionic-border-radius-full);
+}
+
+/* Rectangular */
+:host(.tab-bar-rectangular) {
+  @include globals.border-radius(globals.$ionic-border-radius-0);
+}
diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx
@@ -49,6 +49,13 @@ export class TabBar implements ComponentInterface {
     }
   }
 
+  /**
+   * 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).
+   */
+  @Prop() translucent = false;
+
   /**
    * Set to `"compact"` to display a width based on the items
    * inside the tab bar. This value will only work for the
@@ -61,11 +68,13 @@ export class TabBar implements ComponentInterface {
   @Prop() expand: 'compact' | 'full' = 'full';
 
   /**
-   * 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).
+   * Set to `"soft"` for a tab bar with slightly rounded corners,
+   * `"round"` for a tab bar with fully rounded corners, or
+   * `"rectangular"` for a tab bar without rounded corners.
+   *
+   * Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
    */
-  @Prop() translucent = false;
+  @Prop() shape?: 'soft' | 'round' | 'rectangular';
 
   /** @internal */
   @Event() ionTabBarChanged!: EventEmitter<TabBarChangedEventDetail>;
@@ -108,7 +117,7 @@ export class TabBar implements ComponentInterface {
   }
 
   render() {
-    const { color, translucent, keyboardVisible } = this;
+    const { color, translucent, keyboardVisible, expand, shape } = this;
     const theme = getIonTheme(this);
     const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
 
@@ -120,7 +129,8 @@ export class TabBar implements ComponentInterface {
           [theme]: true,
           'tab-bar-translucent': translucent,
           'tab-bar-hidden': shouldHide,
-          [`tab-bar-${this.expand}`]: true,
+          [`tab-bar-${expand}`]: true,
+          [`tab-bar-${shape}`]: shape !== undefined,
         })}
       >
         <slot></slot>

diff --git a/core/src/components/tab-bar/test/expand/index.html b/core/src/components/tab-bar/test/expand/index.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Tab Bar - Preview</title>
+    <title>Tab Bar - Expand</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"

diff --git a/core/src/components/tab-bar/test/shape/index.html b/core/src/components/tab-bar/test/shape/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tab Bar - Shape</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>
+        <h2>Default</h2>
+        <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>
+
+        <h2>Soft</h2>
+        <ion-tab-bar selected-tab="1" expand="compact" shape="soft">
+          <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>
+
+        <h2>Round</h2>
+        <ion-tab-bar selected-tab="1" expand="compact" shape="round">
+          <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>
+
+        <h2>Rectangular</h2>
+        <ion-tab-bar selected-tab="1" expand="compact" shape="rectangular">
+          <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;
+      }
+
+      .ionic ion-tab-bar {
+        position: static;
+      }
+    </style>
+  </body>
+</html>
diff --git a/core/src/components/tabs/test/basic/index.html b/core/src/components/tabs/test/basic/index.html
@@ -88,7 +88,7 @@ <h1>Hidden Tab</h1>
 
         <ion-tab tab="tab-four" component="page-one"></ion-tab>
 
-        <ion-tab-bar slot="bottom">
+        <ion-tab-bar slot="bottom" expand="compact">
           <ion-tab-button href="" tab="tab-one" class="e2eTabOneButton">
             <ion-label>Tab One</ion-label>
             <ion-icon name="star"></ion-icon>