fix(tab-bar): update tab-bar to set the color/background of tab-button (

#16641) similar to the PR for segment: #16590, this implements the color/background in the tab-bar and inherits it in tab-button closes #14853
ionic-team · Dec 10, 2018 · 2f63049 · 2f63049
1 parent 9167fb4
commit 2f63049
Show file tree

Hide file tree

Showing 12 changed files with 253 additions and 31 deletions.
diff --git a/core/api.txt b/core/api.txt
@@ -1040,7 +1040,7 @@ ion-tab-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-star
 ion-tab-button,prop,mode,"ios" | "md",undefined,false
 ion-tab-button,prop,tab,string,undefined,false
 ion-tab-button,css-prop,--background
-ion-tab-button,css-prop,--background-selected
+ion-tab-button,css-prop,--background-focused
 ion-tab-button,css-prop,--color
 ion-tab-button,css-prop,--color-selected
 ion-tab-button,css-prop,--padding-bottom

diff --git a/core/src/components/tab-bar/tab-bar.ios.scss b/core/src/components/tab-bar/tab-bar.ios.scss
@@ -1,21 +1,25 @@
 @import "./tab-bar";
 @import "../../themes/ionic.globals.ios";
+@import "../tab-button/tab-button.ios.vars";
 
 // iOS Tabs
 // --------------------------------------------------
 
 :host {
   // default color / background
   --background: #{$tabbar-ios-background};
+  --background-focused: #{$tabbar-ios-background-focused};
   --border: #{$hairlines-width solid $tabbar-ios-border-color};
+  --color: #{$tab-button-ios-text-color};
+  --color-selected: #{$tabbar-ios-color-activated};
 
   height: 50px;
 }
 
 // iOS Translucent Tab bar
 // --------------------------------------------------
 
-:host(.tabbar-translucent) {
+:host(.tab-bar-translucent) {
   background-color: #{current-color(base, .8)};
   backdrop-filter: saturate(210%) blur(20px);
 }
diff --git a/core/src/components/tab-bar/tab-bar.md.scss b/core/src/components/tab-bar/tab-bar.md.scss
@@ -1,10 +1,14 @@
 @import "./tab-bar";
 @import "../../themes/ionic.globals.md";
+@import "../tab-button/tab-button.md.vars";
 
 :host {
   // default color / background
   --background: #{$tabbar-md-background};
+  --background-focused: #{$tabbar-md-background-focused};
   --border: #{1px solid $tabbar-md-border-color};
+  --color: #{$tab-button-md-text-color};
+  --color-selected: #{$tabbar-md-color-activated};
 
   height: 56px;
 }
diff --git a/core/src/components/tab-bar/tab-bar.scss b/core/src/components/tab-bar/tab-bar.scss
@@ -33,15 +33,18 @@
   box-sizing: content-box !important;
 }
 
-:host(.ion-color) {
+:host(.ion-color),
+:host(.ion-color) ::slotted(ion-tab-button) {
   background: #{current-color(base)};
+  color: #{current-color(contrast, .7)};
 }
 
 :host(.ion-color) ::slotted(ion-tab-button) {
   --background-focused: #{current-color(shade)};
-  --color-selected: #{current-color(contrast)};;
+}
 
-  color: #{current-color(contrast, .7)};
+:host(.ion-color) ::slotted(.tab-selected) {
+  color: #{current-color(contrast)};;
 }
 
 :host([slot="top"]) {
@@ -51,7 +54,7 @@
   border-bottom: var(--border);
 }
 
-:host(.tabbar-hidden) {
+:host(.tab-bar-hidden) {
   /* stylelint-disable-next-line declaration-no-important */
   display: none !important;
 }
diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx
@@ -74,8 +74,8 @@ export class TabBar implements ComponentInterface {
       'aria-hidden': keyboardVisible ? 'true' : null,
       class: {
         ...createColorClasses(color),
-        'tabbar-translucent': translucent,
-        'tabbar-hidden': keyboardVisible,
+        'tab-bar-translucent': translucent,
+        'tab-bar-hidden': keyboardVisible,
       }
     };
   }

diff --git a/core/src/components/tab-bar/test/custom/e2e.ts b/core/src/components/tab-bar/test/custom/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('tab-bar: custom', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/tab-bar/test/custom?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/tab-bar/test/custom/index.html b/core/src/components/tab-bar/test/custom/index.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Tab Bar - Custom</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="../../../../../dist/ionic.js"></script>
+  <link rel="stylesheet" href="../../../../../css/ionic.bundle.css">
+  <link rel="stylesheet" href="../../../../../scripts/testing/styles.css">
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <!-- Default -->
+      <ion-tab-bar selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-icon name="clock"></ion-icon>
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2">
+          <ion-icon name="star"></ion-icon>
+          <ion-label>Favorites</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3">
+          <ion-icon name="cog"></ion-icon>
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+
+      <!-- Custom Class -->
+      <ion-tab-bar selected-tab="11" class="custom-tab-bar-color">
+        <ion-tab-button tab="11">
+          <ion-icon name="clock"></ion-icon>
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="22">
+          <ion-icon name="star"></ion-icon>
+          <ion-label>Favorites</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="33">
+          <ion-icon name="cog"></ion-icon>
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+
+      <!-- Color & Custom Class -->
+      <ion-tab-bar selected-tab="111" color="danger" class="custom-tab-bar-color">
+        <ion-tab-button tab="111">
+          <ion-icon name="clock"></ion-icon>
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="222">
+          <ion-icon name="star"></ion-icon>
+          <ion-label>Favorites</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="333">
+          <ion-icon name="cog"></ion-icon>
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+
+      <!-- Custom Background Buttons -->
+      <ion-tab-bar selected-tab="1111" class="custom-tab-button-bar">
+        <ion-tab-button tab="1111" class="custom-tab-button-background-red">
+          <ion-icon name="clock"></ion-icon>
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2222" class="custom-tab-button-background-yellow">
+          <ion-icon name="star"></ion-icon>
+          <ion-label>Favorites</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3333" class="custom-tab-button-background-green">
+          <ion-icon name="cog"></ion-icon>
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+
+      <!-- Custom Color Buttons -->
+      <ion-tab-bar selected-tab="1111">
+        <ion-tab-button tab="1111" class="custom-tab-button-color-red">
+          <ion-icon name="clock"></ion-icon>
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2222" class="custom-tab-button-color-yellow">
+          <ion-icon name="star"></ion-icon>
+          <ion-label>Favorites</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3333" class="custom-tab-button-color-green">
+          <ion-icon name="cog"></ion-icon>
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+
+      <!-- Custom All -->
+      <ion-tab-bar selected-tab="11111" class="custom-all">
+        <ion-tab-button tab="11111">
+          <ion-icon name="clock"></ion-icon>
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="22222">
+          <ion-icon name="star" class="custom-icon"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="33333">
+          <ion-icon name="cog"></ion-icon>
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-content>
+  </ion-app>
+
+  <style>
+    .custom-tab-bar-color {
+      --background: #7044ff;
+      --color: rgb(255, 0, 234, .6);
+      --color-selected: #ff00ea;
+    }
+
+    .custom-tab-bar-color ion-badge {
+      background: rgba(255, 255, 255, 0.8);
+      color: rgba(0, 0, 0, .5);
+    }
+
+    .custom-tab-button-bar {
+      --background: #178fb8;
+      --color: rgba(255, 255, 255, .6);
+      --color-selected: #ffffff;
+    }
+
+    .custom-tab-button-background-red {
+      --background: #a32b2b;
+    }
+
+    .custom-tab-button-background-yellow {
+      --background: #b7b915;
+    }
+
+    .custom-tab-button-background-green {
+      --background: #5a9b2e;
+    }
+
+    .custom-tab-button-color-red {
+      --color: rgba(163, 43, 43, .6);
+      --color-selected: #a32b2b;
+    }
+
+    .custom-tab-button-color-yellow {
+      --color: rgba(183, 185, 21, .6);
+      --color-selected: #b7b915;
+    }
+
+    .custom-tab-button-color-green {
+      --color: rgb(90, 155, 46, .6);
+      --color-selected: #5a9b2e;
+    }
+
+    .custom-all {
+      margin-top: 30px;
+      margin-bottom: 30px;
+      contain: none;
+
+      --background: #f6f6f6;
+      --color-selected: #1b8472;
+
+      --border: none;
+    }
+
+    .custom-all ion-tab-button:nth-child(2) {
+      --background: #1b8472;
+      --color: rgba(255, 255, 255, .6);
+      --color-selected: #ffffff;
+
+      border-radius: 50%;
+      max-width: 80px;
+      height: 80px;
+    }
+
+    .custom-icon {
+      font-size: 50px;
+    }
+  </style>
+</body>
+
+</html>
diff --git a/core/src/components/tab-bar/test/scenarios/index.html b/core/src/components/tab-bar/test/scenarios/index.html
@@ -193,7 +193,7 @@
     </ion-tab-button>
 
     <ion-tab-button tab="2" class="main-tab">
-      <ion-icon src="/src/components/tab-bar/test/scenarios/camera.svg"></ion-icon>
+      <ion-icon class="main-tab-icon" src="/src/components/tab-bar/test/scenarios/camera.svg"></ion-icon>
     </ion-tab-button>
 
     <ion-tab-button tab="3">
@@ -235,7 +235,10 @@
       height: 80px;
       background: #3880ff;
       color: white;
-      font-size: 16px;
+    }
+
+    .main-tab-icon {
+      font-size: 36px;
     }
 
     .custom-tabbar-color {

diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
@@ -71,17 +71,17 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
 
 ## CSS Custom Properties
 
-| Name                    | Description                           |
-| ----------------------- | ------------------------------------- |
-| `--background`          | Background of the tab button          |
-| `--background-selected` | Background of the selected tab button |
-| `--color`               | Color of the tab button               |
-| `--color-selected`      | Color of the selected tab button      |
-| `--padding-bottom`      | Bottom padding of the tab button      |
-| `--padding-end`         | End padding of the tab button         |
-| `--padding-start`       | Start padding of the tab button       |
-| `--padding-top`         | Top padding of the tab button         |
-| `--ripple-color`        | Color of the button ripple effect     |
+| Name                   | Description                          |
+| ---------------------- | ------------------------------------ |
+| `--background`         | Background of the tab button         |
+| `--background-focused` | Background of the focused tab button |
+| `--color`              | Color of the tab button              |
+| `--color-selected`     | Color of the selected tab button     |
+| `--padding-bottom`     | Bottom padding of the tab button     |
+| `--padding-end`        | End padding of the tab button        |
+| `--padding-start`      | Start padding of the tab button      |
+| `--padding-top`        | Top padding of the tab button        |
+| `--ripple-color`       | Color of the button ripple effect    |
 
 
 ----------------------------------------------

diff --git a/core/src/components/tab-button/tab-button.ios.scss b/core/src/components/tab-button/tab-button.ios.scss
@@ -6,10 +6,6 @@
   --padding-end: #{$tab-button-ios-padding-end};
   --padding-bottom: #{$tab-button-ios-padding-bottom};
   --padding-start: #{$tab-button-ios-padding-start};
-  --color: #{$tab-button-ios-text-color};
-  --color-selected: #{$tabbar-ios-color-activated};
-  --background: transparent;
-  --background-focused: #{$tabbar-ios-background-focused};
 
   max-width: $tab-button-ios-max-width;
 

diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss
@@ -9,10 +9,6 @@
   --padding-end: #{$tab-button-md-padding-end};
   --padding-bottom: #{$tab-button-md-padding-bottom};
   --padding-start: #{$tab-button-md-padding-start};
-  --color: #{$tab-button-md-text-color};
-  --color-selected: #{$tabbar-md-color-activated};
-  --background: transparent;
-  --background-focused: #{$tabbar-md-background-focused};
 
   max-width: 168px;