From 06e686b63e4717db9eb743cd5a262066d4083175 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 17 Sep 2024 17:02:34 -0700 Subject: [PATCH] refactor(tab-bar): add width prop --- core/api.txt | 1 + core/src/components.d.ts | 8 +++++ .../components/tab-bar/tab-bar.common.scss | 2 ++ .../src/components/tab-bar/tab-bar.ionic.scss | 29 +++++++++++++++++++ core/src/components/tab-bar/tab-bar.tsx | 11 ++++++- packages/angular/src/directives/proxies.ts | 4 +-- .../standalone/src/directives/proxies.ts | 4 +-- 7 files changed, 54 insertions(+), 5 deletions(-) diff --git a/core/api.txt b/core/api.txt index 7bdebea2a79..dbcc0a1a07d 100644 --- a/core/api.txt +++ b/core/api.txt @@ -2181,6 +2181,7 @@ 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 ion-tab-bar,prop,translucent,boolean,false,false,false +ion-tab-bar,prop,width,"auto" | undefined,undefined,false,false ion-tab-bar,css-prop,--background,ionic ion-tab-bar,css-prop,--background,ios ion-tab-bar,css-prop,--background,md diff --git a/core/src/components.d.ts b/core/src/components.d.ts index f0d3a0636fd..49774ac835b 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3427,6 +3427,10 @@ export namespace Components { * 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). */ "translucent": boolean; + /** + * The width of the tab bar. Defaults to full width. `auto` will display a size based on the items inside the tab bar. Only available for `"ionic"` theme. + */ + "width"?: 'auto'; } interface IonTabButton { /** @@ -8783,6 +8787,10 @@ declare namespace LocalJSX { * 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). */ "translucent"?: boolean; + /** + * The width of the tab bar. Defaults to full width. `auto` will display a size based on the items inside the tab bar. Only available for `"ionic"` theme. + */ + "width"?: 'auto'; } interface IonTabButton { /** diff --git a/core/src/components/tab-bar/tab-bar.common.scss b/core/src/components/tab-bar/tab-bar.common.scss index b78f8014dab..dc1d178680f 100644 --- a/core/src/components/tab-bar/tab-bar.common.scss +++ b/core/src/components/tab-bar/tab-bar.common.scss @@ -1,3 +1,5 @@ +@use "../../themes/mixins" as mixins; + :host { /** * @prop --background: Background of the tab bar diff --git a/core/src/components/tab-bar/tab-bar.ionic.scss b/core/src/components/tab-bar/tab-bar.ionic.scss index 0b7ab0cfce9..968f40c6a7a 100644 --- a/core/src/components/tab-bar/tab-bar.ionic.scss +++ b/core/src/components/tab-bar/tab-bar.ionic.scss @@ -32,3 +32,32 @@ // TODO(ROU-10853): replace this value with a layer token z-index: 10; } + +:host([slot="fixed"]) { + @include globals.margin(null, auto); + + bottom: 16px; + + width: fit-content; + height: fit-content; + + box-shadow: #{globals.$ionic-elevation-200}; +} + +:host(.tab-bar-width-auto) { + position: absolute; + + align-self: center; + + width: fit-content; + + contain: content; +} + +:host([slot="top"].tab-bar-width-auto) { + top: 16px; +} + +:host([slot="bottom"].tab-bar-width-auto) { + bottom: 16px; +} diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx index e0888b800c8..57ff3fbeae9 100644 --- a/core/src/components/tab-bar/tab-bar.tsx +++ b/core/src/components/tab-bar/tab-bar.tsx @@ -36,6 +36,13 @@ export class TabBar implements ComponentInterface { */ @Prop({ reflect: true }) color?: Color; + /** + * The width of the tab bar. Defaults to full width. + * `auto` will display a size based on the items inside the tab bar. + * Only available for `"ionic"` theme. + */ + @Prop() width?: 'auto'; + /** * The selected tab component */ @@ -97,9 +104,10 @@ export class TabBar implements ComponentInterface { } render() { - const { color, translucent, keyboardVisible } = this; + const { color, translucent, keyboardVisible, width } = this; const theme = getIonTheme(this); const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top'; + console.log('width', width); return ( diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 6f366b0487b..c8c96035b03 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -2178,14 +2178,14 @@ export declare interface IonTab extends Components.IonTab {} @ProxyCmp({ - inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent'] + inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent', 'width'] }) @Component({ selector: 'ion-tab-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent'], + inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent', 'width'], }) export class IonTabBar { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index d5361628388..407f75d3c60 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -1972,14 +1972,14 @@ export declare interface IonTab extends Components.IonTab {} @ProxyCmp({ defineCustomElementFn: defineIonTabBar, - inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent'] + inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent', 'width'] }) @Component({ selector: 'ion-tab-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent'], + inputs: ['color', 'mode', 'selectedTab', 'theme', 'translucent', 'width'], standalone: true }) export class IonTabBar {