fix(tabs): badgeColor works again

fixes #15559
fixes #14840

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,29 +299,27 @@ 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 && (
-        <ion-tabbar
-          tabs={this.tabs.slice()}
-          color={this.color}
-          selectedTab={this.selectedTab}
-          highlight={this.tabbarHighlight}
-          placement={this.tabbarPlacement}
-          layout={this.tabbarLayout}
-          translucent={this.translucent}
-        >
-        </ion-tabbar>
-      )
-    ];
+    return (
+      <ion-tabbar
+        mode={this.mode}
+        tabs={this.tabs.slice()}
+        color={this.color}
+        selectedTab={this.selectedTab}
+        highlight={this.tabbarHighlight}
+        placement={this.tabbarPlacement}
+        layout={this.tabbarLayout}
+        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>