fix(tabs): badgeColor works again

fixes #15559
fixes #14840

angular/src/directives/proxies.ts

@@ -821,7 +821,7 @@ export class Tab {
 }
 
 export declare interface Tabs extends StencilComponents<'IonTabs'> {}
-@Component({ selector: 'ion-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'name', 'tabbarHidden', 'tabbarHighlight', 'tabbarLayout', 'tabbarPlacement', 'translucent', 'useRouter'] })
+@Component({ selector: 'ion-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'name', 'tabbarHidden', 'tabbarHighlight', 'tabbarLayout', 'tabbarPlacement', 'translucent', 'useRouter'] })
 export class Tabs {
   ionChange: EventEmitter<CustomEvent>;
   ionNavWillLoad: EventEmitter<CustomEvent>;
@@ -831,7 +831,7 @@ export class Tabs {
   constructor(r: ElementRef) {
     const el = r.nativeElement;
     proxyMethods(this, el, ['select', 'setRouteId', 'getRouteId', 'getTab', 'getSelected']);
-    proxyInputs(this, el, ['color', 'name', 'tabbarHidden', 'tabbarHighlight', 'tabbarLayout', 'tabbarPlacement', 'translucent', 'useRouter']);
+    proxyInputs(this, el, ['mode', 'color', 'name', 'tabbarHidden', 'tabbarHighlight', 'tabbarLayout', 'tabbarPlacement', 'translucent', 'useRouter']);
     proxyOutputs(this, el, ['ionChange', 'ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange']);
   }
 }

core/src/components.d.ts

@@ -4595,6 +4595,10 @@ export namespace Components {
     */
     'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>;
     /**
+    * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+    */
+    'mode': Mode;
+    /**
     * A unique name for the tabs.
     */
     'name'?: string;
@@ -4634,6 +4638,10 @@ export namespace Components {
     */
     'color'?: Color;
     /**
+    * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+    */
+    'mode'?: Mode;
+    /**
     * A unique name for the tabs.
     */
     'name'?: string;

core/src/components/tabbar/tabbar.tsx

@@ -9,7 +9,7 @@ import { createColorClasses } from '../../utils/theme';
     ios: 'tabbar.ios.scss',
     md: 'tabbar.md.scss'
   },
-  shadow: true
+  scoped: true
 })
 export class Tabbar implements ComponentInterface {
 

core/src/components/tabs/readme.md

@@ -12,6 +12,7 @@ The component is a container of individual [Tab](../Tab/) components.
 | Property          | Attribute          | Description                                                                                                                                                                                                                                                            | Type              |
 | ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
 | `color`           | `color`            | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color`           |
+| `mode`            | `mode`             | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                                                                                                              | `Mode`            |
 | `name`            | `name`             | A unique name for the tabs.                                                                                                                                                                                                                                            | `string`          |
 | `tabbarHidden`    | `tabbar-hidden`    | If true, the tabbar will be hidden. Defaults to `false`.                                                                                                                                                                                                               | `boolean`         |
 | `tabbarHighlight` | `tabbar-highlight` | If true, show the tab highlight bar under the selected tab.                                                                                                                                                                                                            | `boolean`         |

core/src/components/tabs/tabs.scss

@@ -15,10 +15,21 @@
   z-index: $z-index-page-container;
 }
 
-.tabs-inner {
-  position: relative;
+ion-tabbar {
+  @include position(null, 0, 0, 0);
 
-  flex: 1;
-
-  contain: layout size style;
+  display: none;
+  position: absolute;
+}
+
+:host(.tabbar-visible.tabs-md)::slotted(ion-tab) {
+  bottom: 56px; // tabbar height (it's fixed!)
+}
+
+:host(.tabbar-visible.tabs-ios)::slotted(ion-tab) {
+  bottom: 50px; // tabbar height (it's fixed!)
+}
+
+:host(.tabbar-visible) ion-tabbar {
+  display: flex;
 }

core/src/components/tabs/tabs.tsx

@@ -1,12 +1,12 @@
 import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
 
-import { Color, Config, IonicConfig, NavOutlet, RouteID, RouteWrite, TabbarLayout, TabbarPlacement } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
+import { Color, Config, IonicConfig, Mode, NavOutlet, RouteID, RouteWrite, TabbarLayout, TabbarPlacement } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-tabs',
   styleUrl: 'tabs.scss',
-  shadow: true
+  scoped: true
 })
 export class Tabs implements NavOutlet {
 
@@ -23,6 +23,12 @@ export class Tabs implements NavOutlet {
   @Prop({ context: 'config' }) config!: Config;
   @Prop({ context: 'document' }) doc!: Document;
 
+  /**
+   * The mode determines which platform styles to use.
+   * Possible values are: `"ios"` or `"md"`.
+   */
+  @Prop() mode!: Mode;
+
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -103,7 +109,7 @@ export class Tabs implements NavOutlet {
   }
 
   componentDidLoad() {
-    return this.initSelect();
+    this.initSelect();
   }
 
   componentDidUnload() {
@@ -293,18 +299,17 @@ export class Tabs implements NavOutlet {
 
   hostData() {
     return {
-      class: createColorClasses(this.color)
+      class: {
+        ...createThemedClasses(this.mode, 'tabs'),
+        'tabbar-visible': !this.tabbarHidden
+      }
     };
   }
 
   render() {
-    return [
-      <div class="tabs-inner">
-        <slot></slot>
-      </div>,
-
-      !this.tabbarHidden && (
+    return (
       <ion-tabbar
+        mode={this.mode}
         tabs={this.tabs.slice()}
         color={this.color}
         selectedTab={this.selectedTab}
@@ -314,8 +319,7 @@ export class Tabs implements NavOutlet {
         translucent={this.translucent}
       >
       </ion-tabbar>
-      )
-    ];
+    );
   }
 }
 

core/src/components/tabs/test/basic/index.html

@@ -27,7 +27,7 @@
         </ion-content>
       </ion-tab>
 
-      <ion-tab label="Schedule" icon="globe">
+      <ion-tab label="Schedule" icon="globe" badge="6" badge-color="danger">
         <ion-header>
           <ion-toolbar>
             <ion-title>Tab Two</ion-title>