From cd8320ec066361b7687423f1929283b27ecb3837 Mon Sep 17 00:00:00 2001 From: rug Date: Tue, 4 Nov 2025 15:48:07 +0100 Subject: [PATCH 1/6] Enabling scroll on tab-bar --- core/src/components/tab-bar/tab-bar.common.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/core/src/components/tab-bar/tab-bar.common.scss b/core/src/components/tab-bar/tab-bar.common.scss index 79bec564b43..7cb61a06a41 100644 --- a/core/src/components/tab-bar/tab-bar.common.scss +++ b/core/src/components/tab-bar/tab-bar.common.scss @@ -7,7 +7,6 @@ display: flex; align-items: center; - justify-content: center; border-top: var(--border); @@ -20,6 +19,8 @@ /* stylelint-disable-next-line declaration-no-important */ box-sizing: content-box !important; + + overflow: auto; } :host(.ion-color) ::slotted(ion-tab-button.ion-focused), From 845dac24f7754b27ed2cd971503dcfc86774a91c Mon Sep 17 00:00:00 2001 From: rug Date: Tue, 4 Nov 2025 15:48:55 +0100 Subject: [PATCH 2/6] Making tab-buttons to have the same size --- core/src/components/tab-button/tab-button.ionic.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss index d3751e58625..1c99f6f2133 100644 --- a/core/src/components/tab-button/tab-button.ionic.scss +++ b/core/src/components/tab-button/tab-button.ionic.scss @@ -13,9 +13,13 @@ position: relative; align-content: center; + + flex: 1; min-height: globals.$ion-scale-1200; max-height: globals.$ion-scale-1800; + + min-width: globals.$ion-scale-1200; } // Tab Button: Native From d7c0ad99b404ffd2ee4f7479956dc3261a01d8b6 Mon Sep 17 00:00:00 2001 From: rug Date: Wed, 5 Nov 2025 12:06:46 +0100 Subject: [PATCH 3/6] Resetting changes, to be only in ionic theme --- core/src/components/tab-bar/tab-bar.common.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/core/src/components/tab-bar/tab-bar.common.scss b/core/src/components/tab-bar/tab-bar.common.scss index 7cb61a06a41..79bec564b43 100644 --- a/core/src/components/tab-bar/tab-bar.common.scss +++ b/core/src/components/tab-bar/tab-bar.common.scss @@ -7,6 +7,7 @@ display: flex; align-items: center; + justify-content: center; border-top: var(--border); @@ -19,8 +20,6 @@ /* stylelint-disable-next-line declaration-no-important */ box-sizing: content-box !important; - - overflow: auto; } :host(.ion-color) ::slotted(ion-tab-button.ion-focused), From 8974caecb2e6c54f56b48d433b15b4e47354082b Mon Sep 17 00:00:00 2001 From: rug Date: Wed, 5 Nov 2025 12:07:40 +0100 Subject: [PATCH 4/6] Enabling scroll in tab-bar --- core/src/components/tab-bar/tab-bar.ionic.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/core/src/components/tab-bar/tab-bar.ionic.scss b/core/src/components/tab-bar/tab-bar.ionic.scss index 759b8847d78..965fb7e662c 100644 --- a/core/src/components/tab-bar/tab-bar.ionic.scss +++ b/core/src/components/tab-bar/tab-bar.ionic.scss @@ -25,6 +25,20 @@ // TODO(ROU-10853): replace this value with a layer token z-index: 10; + + /* + * In case there are more tab buttons than can fit in the tab bar, enable + * horizontal scrolling. + */ + overflow: auto hidden; + justify-content: unset; + + /* + * Ensure the tab bar does not grow larger than the viewport width. + * Useful for when the tab buttons have large labels, allowing the space + * to be evenly divided among the buttons. + */ + max-width: 100%; } // Tab Bar Expand From 558d09fad673cb038d451a2236381e6296b8f2d0 Mon Sep 17 00:00:00 2001 From: rug Date: Thu, 6 Nov 2025 12:06:17 +0100 Subject: [PATCH 5/6] Changing the bottom margin --- core/src/components/tab-bar/tab-bar.ionic.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/tab-bar/tab-bar.ionic.scss b/core/src/components/tab-bar/tab-bar.ionic.scss index 965fb7e662c..133cdab4f2d 100644 --- a/core/src/components/tab-bar/tab-bar.ionic.scss +++ b/core/src/components/tab-bar/tab-bar.ionic.scss @@ -78,7 +78,7 @@ } :host([slot="bottom"].tab-bar-compact) { - bottom: calc(globals.$ion-space-100 + var(--ion-safe-area-bottom, 0)); + bottom: calc(globals.$ion-space-400 + var(--ion-safe-area-bottom, 0)); } // Tab Bar Shapes From f7c3ca49ce76b3b0cf5bf95bd39d6fa04ceac59b Mon Sep 17 00:00:00 2001 From: rug Date: Fri, 7 Nov 2025 14:07:50 +0100 Subject: [PATCH 6/6] Stylelint fixes --- .../src/components/tab-bar/tab-bar.ionic.scss | 24 +++++++++++-------- .../tab-button/tab-button.ionic.scss | 8 +++---- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/core/src/components/tab-bar/tab-bar.ionic.scss b/core/src/components/tab-bar/tab-bar.ionic.scss index 133cdab4f2d..4fbece0a2d9 100644 --- a/core/src/components/tab-bar/tab-bar.ionic.scss +++ b/core/src/components/tab-bar/tab-bar.ionic.scss @@ -9,6 +9,18 @@ --color: #{globals.$tabbar-ionic-color}; --color-selected: #{globals.$tabbar-ionic-color-selected}; + /* + * In case there's scrolling, justify the content to the start. + */ + justify-content: unset; + + /* + * Ensure the tab bar does not grow larger than the viewport width. + * Useful for when the tab buttons have large labels, allowing the space + * to be evenly divided among the buttons. + */ + max-width: 100%; + /** * Tab bar has a box sizing of content-box to ensure the padding * is not included in the height. This is important for the @@ -23,22 +35,14 @@ box-shadow: #{globals.$ion-elevation-2}; - // TODO(ROU-10853): replace this value with a layer token - z-index: 10; - /* * In case there are more tab buttons than can fit in the tab bar, enable * horizontal scrolling. */ overflow: auto hidden; - justify-content: unset; - /* - * Ensure the tab bar does not grow larger than the viewport width. - * Useful for when the tab buttons have large labels, allowing the space - * to be evenly divided among the buttons. - */ - max-width: 100%; + // TODO(ROU-10853): replace this value with a layer token + z-index: 10; } // Tab Bar Expand diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss index 1c99f6f2133..6960de1b0d3 100644 --- a/core/src/components/tab-button/tab-button.ionic.scss +++ b/core/src/components/tab-button/tab-button.ionic.scss @@ -12,14 +12,14 @@ position: relative; - align-content: center; - flex: 1; - min-height: globals.$ion-scale-1200; - max-height: globals.$ion-scale-1800; + align-content: center; min-width: globals.$ion-scale-1200; + + min-height: globals.$ion-scale-1200; + max-height: globals.$ion-scale-1800; } // Tab Button: Native