feat(tab-bar): update to use new transition tokens

Author: joselrio

core/package-lock.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/package.json

@@ -94,13 +94,13 @@
 // --------------------------------------------------
 
 :host(.tab-bar-hide-on-scroll) {
-  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+  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 0.35s cubic-bezier(0.3, 1, 0.1, 1);
+  transition: transform globals.$ion-transition-time-350 globals.$ion-transition-curve-base;
 }
 
 :host([slot="top"].tab-bar-scroll-hidden) {

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

@@ -19,7 +19,8 @@
       <ion-tabs>
         <div class="ion-page">
           <ion-content>
-            <div class="spacer">
+            <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>
@@ -64,7 +65,14 @@
         background: linear-gradient(to bottom, #e0f7fa, #80deea, #26c6da, #00acc1, #00838f);
       }
 
-      .spacer p {
+      .info {
+        position: fixed;
+        top: 30px;
+        left: 30px;
+        right: 30px;
+      }
+
+      .info p {
         margin-bottom: 12px;
         font-size: 16px;
         color: #333;

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

@@ -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);