feat(tab-bar): add hideOnScroll for ionic theme

core/api.txt

@@ -2402,6 +2402,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,hideOnScroll,boolean,false,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

core/package.json

@@ -68,7 +68,7 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "outsystems-design-tokens": "^1.3.7",
+    "outsystems-design-tokens": "^1.3.8",
     "playwright-core": "^1.58.2",
     "prettier": "^2.8.8",
     "rollup": "^2.26.4",

core/src/components.d.ts

@@ -3980,6 +3980,11 @@ export namespace Components {
           * @default 'full'
          */
         "expand": 'compact' | 'full';
+        /**
+          * If `true`, the tab bar will be hidden when the user scrolls down and shown when the user scrolls up. Only applies when the theme is `"ionic"` and `expand` is `"compact"`.
+          * @default false
+         */
+        "hideOnScroll": boolean;
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -10077,6 +10082,11 @@ declare namespace LocalJSX {
           * @default 'full'
          */
         "expand"?: 'compact' | 'full';
+        /**
+          * If `true`, the tab bar will be hidden when the user scrolls down and shown when the user scrolls up. Only applies when the theme is `"ionic"` and `expand` is `"compact"`.
+          * @default false
+         */
+        "hideOnScroll"?: boolean;
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -11320,6 +11330,7 @@ declare namespace LocalJSX {
     interface IonTabBarAttributes {
         "color": Color;
         "selectedTab": string;
+        "hideOnScroll": boolean;
         "translucent": boolean;
         "expand": 'compact' | 'full';
         "shape": 'soft' | 'round' | 'rectangular';

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

@@ -1,4 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "../../themes/mixins" as mixins;
 @use "./tab-bar.common";
 
 :host {
@@ -67,13 +68,16 @@
 /* Compact */
 :host(.tab-bar-compact) {
   @include globals.padding(globals.$ion-space-100, globals.$ion-space-400);
+  @include mixins.position-horizontal(50%, null);
 
   position: absolute;
 
   align-self: center;
 
   width: fit-content;
 
+  transform: translateX(calc(-50%));
+
   contain: content;
 }
 
@@ -85,6 +89,23 @@
   bottom: calc(globals.$ion-space-400 + var(--ion-safe-area-bottom, 0));
 }
 
+// Tab Bar Hide on Scroll
+// --------------------------------------------------
+
+:host(.tab-bar-hide-on-scroll) {
+  transition: transform globals.$ion-transition-time-200 globals.$ion-transition-curve-spring;
+}
+
+:host(.tab-bar-scroll-hidden) {
+  transform: translateY(calc(100% + var(--ion-safe-area-bottom, 0) + globals.$ion-space-1000)) translateX(calc(-50%));
+
+  transition: transform globals.$ion-transition-time-350 globals.$ion-transition-curve-base;
+}
+
+:host([slot="top"].tab-bar-scroll-hidden) {
+  transform: translateY(-100%) translateX(calc(-50%));
+}
+
 // Tab Bar Translucent
 // --------------------------------------------------
 

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

@@ -1,5 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
+import { Component, Element, Event, Host, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
+import { findIonContent, getScrollElement } from '@utils/content';
 import type { KeyboardController } from '@utils/keyboard/keyboard-controller';
 import { createKeyboardController } from '@utils/keyboard/keyboard-controller';
 import { createColorClasses } from '@utils/theme';
@@ -26,11 +27,17 @@ export class TabBar implements ComponentInterface {
   private keyboardCtrl: KeyboardController | null = null;
   private keyboardCtrlPromise: Promise<KeyboardController> | null = null;
   private didLoad = false;
+  private scrollEl?: HTMLElement;
+  private contentScrollCallback?: () => void;
+  private lastScrollTop = 0;
+  private scrollDirectionChangeTop = 0;
 
   @Element() el!: HTMLElement;
 
   @State() keyboardVisible = false;
 
+  @State() scrollHidden = false;
+
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -57,6 +64,13 @@ export class TabBar implements ComponentInterface {
     }
   }
 
+  /**
+   * If `true`, the tab bar will be hidden when the user scrolls down
+   * and shown when the user scrolls up.
+   * Only applies when the theme is `"ionic"` and `expand` is `"compact"`.
+   */
+  @Prop() hideOnScroll = false;
+
   /**
    * If `true`, the tab bar will be translucent.
    * Only applies when the theme is `"ios"` and the device supports
@@ -108,6 +122,8 @@ export class TabBar implements ComponentInterface {
         tab: this.selectedTab,
       });
     }
+
+    this.setupHideOnScroll();
   }
 
   async connectedCallback() {
@@ -150,6 +166,80 @@ export class TabBar implements ComponentInterface {
       this.keyboardCtrl.destroy();
       this.keyboardCtrl = null;
     }
+
+    this.destroyHideOnScroll();
+  }
+
+  private setupHideOnScroll() {
+    const theme = getIonTheme(this);
+    if (theme !== 'ionic' || !this.hideOnScroll || this.expand !== 'compact') {
+      return;
+    }
+
+    const footerEl = this.el.closest('ion-footer');
+    const pageEl = footerEl?.closest('ion-page, .ion-page') ?? this.el.closest('ion-page, .ion-page');
+    const contentEl = pageEl ? findIonContent(pageEl) : null;
+
+    if (!contentEl) {
+      return;
+    }
+
+    this.initScrollListener(contentEl);
+  }
+
+  private async initScrollListener(contentEl: HTMLElement) {
+    const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+
+    this.contentScrollCallback = () => {
+      readTask(() => {
+        const scrollTop = scrollEl.scrollTop;
+        const shouldHide = this.checkScrollStatus(scrollTop);
+
+        if (shouldHide !== this.scrollHidden) {
+          writeTask(() => {
+            this.scrollHidden = shouldHide;
+          });
+        }
+
+        this.lastScrollTop = scrollTop;
+      });
+    };
+
+    scrollEl.addEventListener('scroll', this.contentScrollCallback, { passive: true });
+  }
+
+  private destroyHideOnScroll() {
+    if (this.scrollEl && this.contentScrollCallback) {
+      this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
+      this.contentScrollCallback = undefined;
+    }
+  }
+
+  private checkScrollStatus(scrollTop: number): boolean {
+    // Always visible within the first 80px of scroll
+    const visibleZone = 80;
+    // Hides after 60px of continuous downward scrolling only, when scrolling up threashold should be 0px
+    const scrollThresholdHide = 60;
+
+    if (scrollTop <= visibleZone) {
+      return false;
+    }
+
+    const isScrollingDown = scrollTop > this.lastScrollTop;
+    const wasScrollingDown = this.lastScrollTop > this.scrollDirectionChangeTop;
+
+    if (isScrollingDown !== wasScrollingDown) {
+      this.scrollDirectionChangeTop = this.lastScrollTop;
+    }
+
+    const delta = Math.abs(scrollTop - this.scrollDirectionChangeTop);
+    const threshold = isScrollingDown ? scrollThresholdHide : 0;
+
+    if (delta < threshold) {
+      return this.scrollHidden;
+    }
+
+    return isScrollingDown;
   }
 
   private getShape(): string | undefined {
@@ -169,7 +259,7 @@ export class TabBar implements ComponentInterface {
   }
 
   render() {
-    const { color, translucent, keyboardVisible, expand } = this;
+    const { color, translucent, keyboardVisible, scrollHidden, expand, hideOnScroll } = this;
     const theme = getIonTheme(this);
     const shape = this.getShape();
     const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
@@ -182,6 +272,8 @@ export class TabBar implements ComponentInterface {
           [theme]: true,
           'tab-bar-translucent': translucent,
           'tab-bar-hidden': shouldHide,
+          'tab-bar-hide-on-scroll': hideOnScroll,
+          'tab-bar-scroll-hidden': scrollHidden,
           [`tab-bar-${expand}`]: true,
           [`tab-bar-${shape}`]: shape !== undefined,
         })}

core/src/components/tab-bar/test/expand/tab-bar.e2e.ts

@@ -52,7 +52,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
             .container {
               padding: 20px 10px;
               /* Size is needed because tab bar compact has position absolute and will not capture correctly. */
-              width: 225px;
+              width: 100%;
               height: 96px;
             }
           </style>

core/src/components/tab-bar/test/hide-on-scroll/index.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" mode="ionic">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tab Bar - Hide on Scroll</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-tabs>
+        <div class="ion-page">
+          <ion-content>
+            <div class="spacer"></div>
+            <div class="info">
+              <p>Scroll down to hide the tab bar, scroll up to show it.</p>
+              <p><strong>Requirements:</strong></p>
+              <ul>
+                <li>Theme must be set to <code>ionic</code></li>
+                <li><code>expand</code> must be set to <code>compact</code></li>
+                <li>A sibling <code>ion-content</code> must exist for scroll detection</li>
+              </ul>
+            </div>
+          </ion-content>
+
+          <ion-footer>
+            <ion-tab-bar slot="bottom" hide-on-scroll="true" selected-tab="1" expand="compact">
+              <ion-tab-button tab="1">
+                <ion-icon name="home-outline"></ion-icon>
+                <ion-label>Home</ion-label>
+              </ion-tab-button>
+
+              <ion-tab-button tab="2">
+                <ion-icon name="heart-outline"></ion-icon>
+                <ion-label>Favorites</ion-label>
+              </ion-tab-button>
+
+              <ion-tab-button tab="3">
+                <ion-icon name="search-outline"></ion-icon>
+                <ion-label>Search</ion-label>
+              </ion-tab-button>
+
+              <ion-tab-button tab="4">
+                <ion-icon name="settings-outline"></ion-icon>
+                <ion-label>Settings</ion-label>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </ion-footer>
+        </div>
+      </ion-tabs>
+    </ion-app>
+
+    <style>
+      .spacer {
+        padding: 16px;
+        height: 2000px;
+        background: linear-gradient(to bottom, #e0f7fa, #80deea, #26c6da, #00acc1, #00838f);
+      }
+
+      .info {
+        position: fixed;
+        top: 30px;
+        left: 30px;
+      }
+
+      .info p {
+        margin-bottom: 12px;
+        font-size: 16px;
+        color: #333;
+      }
+    </style>
+  </body>
+</html>

core/src/css/ionic/core.ionic.scss

@@ -12,7 +12,7 @@
   @include globals.generate-color-variables();
 
   @each $color-name, $value in globals.$ionic-colors {
-    .ion-color-#{$color-name} {
+    .ion-color-#{"" + $color-name} {
       @include globals.generate-color($color-name);
     }
   }

core/src/foundations/ionic.vars.scss

@@ -937,6 +937,7 @@ $ion-elevation-4: var(--token-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12),
 // Transition
 $ion-transition-curve-linear: var(--token-transition-curve-linear, linear);
 $ion-transition-curve-quick: var(--token-transition-curve-quick, cubic-bezier(0, 0, 0.2, 1));
+$ion-transition-curve-spring: var(--token-transition-curve-spring, cubic-bezier(0.16, 1, 0.3, 1));
 $ion-transition-curve-base: var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));
 $ion-transition-curve-expressive: var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
 $ion-transition-curve-bounce: var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));
@@ -945,6 +946,7 @@ $ion-transition-time-100: var(--token-transition-time-100, 100ms);
 $ion-transition-time-150: var(--token-transition-time-150, 150ms);
 $ion-transition-time-200: var(--token-transition-time-200, 200ms);
 $ion-transition-time-300: var(--token-transition-time-300, 300ms);
+$ion-transition-time-350: var(--token-transition-time-350, 350ms);
 $ion-transition-time-500: var(--token-transition-time-500, 500ms);
 $ion-transition-time-1000: var(--token-transition-time-1000, 1000ms);
 $ion-transition-time-1500: var(--token-transition-time-1500, 1500ms);