fix(tabbar): css variables assigned to the host

ionic-team · Oct 9, 2018 · 545db2e · 545db2e
1 parent e3bbfd0
commit 545db2e
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 55 deletions.
diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md
@@ -26,11 +26,13 @@ These can be controlled from the templates, or programmatically using the MenuCo
 
 ## Events
 
-| Event           | Description                             |
-| --------------- | --------------------------------------- |
-| `ionClose`      | Emitted when the menu is closed.        |
-| `ionMenuChange` | Emitted when the menu state is changed. |
-| `ionOpen`       | Emitted when the menu is open.          |
+| Event           | Description                                  |
+| --------------- | -------------------------------------------- |
+| `ionDidClose`   | Emitted when the menu is closed.             |
+| `ionDidOpen`    | Emitted when the menu is open.               |
+| `ionMenuChange` | Emitted when the menu state is changed.      |
+| `ionWillClose`  | Emitted when the menu is about to be closed. |
+| `ionWillOpen`   | Emitted when the menu is about to be opened. |
 
 
 ## Methods

diff --git a/core/src/components/tabbar/tab-button.ios.scss b/core/src/components/tabbar/tab-button.ios.scss
@@ -4,8 +4,6 @@
 .tab-btn {
   @include padding($tab-button-ios-padding-top, $tab-button-ios-padding-end, $tab-button-ios-padding-bottom, $tab-button-ios-padding-start);
   max-width: $tab-button-ios-max-width;
-
-  font-size: $tab-button-ios-font-size;
 }
 
 .tab-btn-text {

diff --git a/core/src/components/tabbar/tab-button.md.scss b/core/src/components/tabbar/tab-button.md.scss
@@ -8,8 +8,6 @@
   @include padding($tab-button-md-padding-top, $tab-button-md-padding-end, $tab-button-md-padding-bottom, $tab-button-md-padding-start);
 
   max-width: 168px;
-
-  font-weight: $tab-button-md-font-weight;
 }
 
 // Material Design Tab Button Text
@@ -23,13 +21,11 @@
 
   transition: $tab-button-md-text-transition;
 
-  font-size: $tab-button-md-font-size;
-
   text-transform: $tab-button-md-text-capitalization;
 }
 
 .tab-btn-selected .tab-btn-text {
-  --label-transform: #{$tab-button-md-text-transform-active};
+  transform: #{$tab-button-md-text-transform-active};
 
   transition: $tab-button-md-text-transition;
 }

diff --git a/core/src/components/tabbar/tab-button.scss b/core/src/components/tabbar/tab-button.scss
@@ -10,9 +10,9 @@
   position: relative;
 
   flex: 1;
-  flex-direction: var(--flex-direction, column);
+  flex-direction: column;
   align-items: center;
-  justify-content: var(--justify-content, flex-start);
+  justify-content: flex-start;
 
   width: 100%;
   height: 100%;
@@ -98,7 +98,7 @@
 
 .tab-btn-has-icon-only,
 .tab-btn-has-label-only {
-  --justify-content: center;
+  justify-content: center;
 }
 
 
@@ -107,7 +107,7 @@
 
 .tab-btn-badge {
   @include position(6%, 4%, null, null); // 4% fallback
-  @include position(null, var(--badge-end, calc(50% - 30px)), null, null);
+  @include position(null, calc(50% - 30px), null, null);
   @include padding(1px, 6px);
 
   box-sizing: border-box;
@@ -122,11 +122,11 @@
 }
 
 .tab-btn-has-label-only .tab-btn-badge {
-  --badge-end: #{calc(50% - 50px)};
+  @include position-horizontal(null, #{calc(50% - 50px)});
 }
 
 .tab-btn-has-icon-only .tab-btn-badge {
-  --badge-end: #{calc(50% - 30px)};
+  @include position-horizontal(null, #{calc(50% - 30px)});
 }
 
 .tab-btn-selected .tab-btn-icon {

diff --git a/core/src/components/tabbar/tabbar.ios.scss b/core/src/components/tabbar/tabbar.ios.scss
@@ -19,6 +19,8 @@
 
   border-top: $tabbar-ios-border;
 
+  font-size: $tab-button-ios-font-size;
+
   contain: strict;
 }
 
@@ -39,24 +41,24 @@
 // iOS Tabbar Layout
 // --------------------------------------------------
 
-:host(.layout-icon-end) .tab-btn,
-:host(.layout-icon-start) .tab-btn,
-:host(.layout-icon-hide) .tab-btn {
+:host(.layout-icon-end),
+:host(.layout-icon-start),
+:host(.layout-icon-hide) {
   --label-margin-top: 2px;
   --label-margin-bottom: 2px;
   --label-font-size: 14px;
   --label-line-height: 1.1;
 }
 
-:host(.layout-icon-end) .tab-btn,
-:host(.layout-icon-start) .tab-btn {
+:host(.layout-icon-end),
+:host(.layout-icon-start) {
   --icon-margin-top: 2px;
   --icon-margin-bottom: 1px;
   --icon-min-width: 24px;
   --icon-height: 26px;
   --icon-font-size: 24px;
 }
 
-:host(.layout-label-hide) .tab-btn {
+:host(.layout-label-hide) {
   --icon-margin: 0;
 }
diff --git a/core/src/components/tabbar/tabbar.md.scss b/core/src/components/tabbar/tabbar.md.scss
@@ -14,26 +14,29 @@
 
   border-top: $tabbar-md-border;
 
+  font-size: $tab-button-md-font-size;
+  font-weight: $tab-button-md-font-weight;
+
   contain: strict;
 }
 
 // Material Design Tabbar Layout
 // --------------------------------------------------
 
-:host(.layout-icon-top) .tab-btn {
+:host(.layout-icon-top) {
   --label-margin-bottom: -2px;
 }
 
-:host(.layout-icon-end) .tab-btn {
+:host(.layout-icon-end) {
   --icon-transform-selected: #{$tab-button-md-icon-right-transform-active};
 }
 
-:host(.layout-icon-bottom) .tab-btn {
+:host(.layout-icon-bottom) {
   --label-margin-top: -2px;
   --label-transform: transform-origin(center, top);
   --icon-transform-selected: #{$tab-button-md-icon-bottom-transform-active};
 }
 
-:host(.layout-icon-start) .tab-btn {
+:host(.layout-icon-start) {
   --icon-transform-selected: #{$tab-button-md-icon-left-transform-active};
 }
diff --git a/core/src/components/tabbar/tabbar.scss b/core/src/components/tabbar/tabbar.scss
@@ -81,29 +81,29 @@
 // --------------------------------------------------
 
 :host(.layout-icon-start) .tab-btn {
-  --flex-direction: row;
+  flex-direction: row;
 }
 
 :host(.layout-icon-end) .tab-btn {
-  --flex-direction: row-reverse;
+  flex-direction: row-reverse;
 }
 
 :host(.layout-icon-bottom) .tab-btn {
-  --flex-direction: column-reverse;
+  flex-direction: column-reverse;
 }
 
 :host(.layout-icon-start) .tab-btn,
 :host(.layout-icon-end) .tab-btn,
 :host(.layout-icon-hide) .tab-btn,
 :host(.layout-label-hide) .tab-btn {
-  --justify-content: center;
+  justify-content: center;
 }
 
-:host(.layout-icon-hide) .tab-btn {
+:host(.layout-icon-hide) {
   --icon-display: none;
 }
 
-:host(.layout-label-hide) .tab-btn {
+:host(.layout-label-hide) {
   --label-display: none;
 }
 

diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md
@@ -9,17 +9,11 @@ The component is a container of individual [Tab](../Tab/) components.
 
 ## Properties
 
-| 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`         |
-| `tabbarLayout`    | `tabbar-layout`    | Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`.                                                                                                      | `TabbarLayout`    |
-| `tabbarPlacement` | `tabbar-placement` | Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`.                                                                                                                                                                       | `TabbarPlacement` |
-| `translucent`     | `translucent`      | If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.                                                                                               | `boolean`         |
-| `useRouter`       | `use-router`       | If true, the tabs will use the router and `selectedTab` will not do anything.                                                                                                                                                                                          | `boolean`         |
+| Property       | Attribute       | Description                                                                   | Type      |
+| -------------- | --------------- | ----------------------------------------------------------------------------- | --------- |
+| `name`         | `name`          | A unique name for the tabs.                                                   | `string`  |
+| `tabbarHidden` | `tabbar-hidden` | If true, the tabbar will be hidden. Defaults to `false`.                      | `boolean` |
+| `useRouter`    | `use-router`    | If true, the tabs will use the router and `selectedTab` will not do anything. | `boolean` |
 
 
 ## Events

diff --git a/core/src/components/tabs/test/colors/index.html b/core/src/components/tabs/test/colors/index.html
@@ -22,66 +22,82 @@
 
 
     <!-- Icons -->
-    <ion-tabs selected-index="1" color="primary">
+    <ion-tabs selected-index="1">
       <ion-tab icon="call"></ion-tab>
       <ion-tab icon="heart"></ion-tab>
       <ion-tab icon="settings"></ion-tab>
+      <ion-tabbar color="primary"></ion-tabbar>
     </ion-tabs>
 
 
     <!-- Icons on top of text -->
-    <ion-tabs selected-index="2" color="secondary">
+    <ion-tabs selected-index="2">
       <ion-tab label="Location" icon="navigate"></ion-tab>
       <ion-tab label="Favorites" badge="6" icon="heart"></ion-tab>
       <ion-tab label="Radio" icon="musical-notes"></ion-tab>
+
+      <ion-tabbar color="secondary"></ion-tabbar>
     </ion-tabs>
 
 
     <!-- Icons below text -->
-    <ion-tabs tabbar-layout="icon-bottom" selected-index="1" color="dark">
+    <ion-tabs selected-index="1">
       <ion-tab label="Recents" icon="call"></ion-tab>
       <ion-tab label="Favorites" badge="6" icon="heart"></ion-tab>
       <ion-tab label="Settings" icon="settings"></ion-tab>
+
+      <ion-tabbar layout="icon-bottom" color="dark"></ion-tabbar>
     </ion-tabs>
 
 
     <!-- Icons right of text -->
-    <ion-tabs tabbar-layout="icon-end" selected-index="0" color="danger">
+    <ion-tabs selected-index="0">
       <ion-tab label="Recents" icon="call"></ion-tab>
       <ion-tab label="Favorites" badge="6" icon="heart"></ion-tab>
       <ion-tab label="Settings" icon="settings"></ion-tab>
+
+      <ion-tabbar layout="icon-end" color="danger"></ion-tabbar>
     </ion-tabs>
 
 
     <!-- Icons left of text -->
-    <ion-tabs tabbar-layout="icon-start" color="light">
+    <ion-tabs>
       <ion-tab label="Recents" icon="call"></ion-tab>
       <ion-tab label="Favorites" badge="6" badge-color="danger" icon="heart"></ion-tab>
       <ion-tab label="Settings" icon="settings"></ion-tab>
+
+      <ion-tabbar layout="icon-start" color="light"></ion-tabbar>
     </ion-tabs>
 
 
     <!-- No icons -->
-    <ion-tabs tabbar-layout="icon-hide" color="primary">
+    <ion-tabs>
       <ion-tab label="Recents" icon="call"></ion-tab>
       <ion-tab label="Favorites" badge="6" badge-color="danger" icon="heart"></ion-tab>
       <ion-tab label="Settings" icon="settings"></ion-tab>
+
+      <ion-tabbar layout="icon-hide" color="primary"></ion-tabbar>
     </ion-tabs>
 
 
     <!-- No label -->
-    <ion-tabs tabbar-layout="label-hide" color="secondary">
+    <ion-tabs>
       <ion-tab label="Recents" icon="call"></ion-tab>
       <ion-tab label="Favorites" badge="6" badge-color="danger" icon="heart"></ion-tab>
       <ion-tab label="Settings" icon="settings"></ion-tab>
+
+      <ion-tabbar layout="label-hide" color="secondary"></ion-tabbar>
     </ion-tabs>
 
 
     <!-- No overflow text -->
-    <ion-tabs color="danger">
+    <ion-tabs>
       <ion-tab label="Indiana Jones and the Raiders of the Lost Ark"></ion-tab>
       <ion-tab label="Indiana Jones and the Temple of Doom"></ion-tab>
       <ion-tab label="Indiana Jones and the Last Crusade"></ion-tab>
+
+      <ion-tabbar color="danger"></ion-tabbar>
+
     </ion-tabs>
 
   </ion-app>

diff --git a/core/src/components/tabs/test/placements/index.html b/core/src/components/tabs/test/placements/index.html
@@ -13,7 +13,7 @@
 <body>
 
   <ion-app>
-    <ion-tabs tabbar-placement="top">
+    <ion-tabs>
       <ion-tab icon="star">
 
         <ion-header>
@@ -54,6 +54,8 @@
       </ion-tab>
 
       <ion-tab disabled icon="chatboxes" component="page-one"></ion-tab>
+
+      <ion-tabbar placement="top"></ion-tabbar>
     </ion-tabs>
   </ion-app>
 </body>

diff --git a/core/src/components/tabs/test/translucent/index.html b/core/src/components/tabs/test/translucent/index.html
@@ -16,7 +16,7 @@
 <body>
 
   <ion-app>
-    <ion-tabs color="primary" translucent>
+    <ion-tabs>
       <ion-tab label="Today" icon="calendar" path="" root="translucent-page-tab">
         <ion-route path="" component="translucent-page-tab"></ion-route>
       </ion-tab>
@@ -38,6 +38,8 @@
       <ion-tab label="Search" icon="search">
         <ion-route path="" component="translucent-page-tab"></ion-route>
       </ion-tab>
+
+      <ion-tabbar color="primary" translucent></ion-tabbar>
     </ion-tabs>
 
     <ion-nav-controller></ion-nav-controller>