From b46c3e203928d66ca5e85a874d8ac09c431003a6 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 10 Jul 2018 15:10:47 -0400 Subject: [PATCH] fix(tabs): correct alignment for label/icon only tabs --- .../components/tab-button/tab-button.ios.scss | 7 ++-- .../components/tab-button/tab-button.md.scss | 36 ++++--------------- .../tab-button/tab-button.md.vars.scss | 6 ++-- .../src/components/tab-button/tab-button.scss | 13 ++++--- core/src/components/tab-button/tab-button.tsx | 10 +++--- .../tabs/test/translucent/readme.md | 11 ------ 6 files changed, 26 insertions(+), 57 deletions(-) delete mode 100644 core/src/components/tabs/test/translucent/readme.md diff --git a/core/src/components/tab-button/tab-button.ios.scss b/core/src/components/tab-button/tab-button.ios.scss index 8f36398794..6544025e88 100644 --- a/core/src/components/tab-button/tab-button.ios.scss +++ b/core/src/components/tab-button/tab-button.ios.scss @@ -11,7 +11,6 @@ --background-focused: #{$tabbar-ios-background-color-focused}; } - .tab-button-native { @include padding( $tab-button-ios-padding-top, @@ -26,7 +25,7 @@ min-height: $tab-button-ios-font-size + 1; } -:host(.has-title-only) .tab-button-text { +:host(.has-label-only) .tab-button-text { @include margin(2px, 0); font-size: $tab-button-ios-font-size + 2; @@ -45,8 +44,6 @@ vertical-align: top; } - - .layout-icon-end .tab-button-ios .tab-button-text, .layout-icon-start .tab-button-ios .tab-button-text, .layout-icon-hide .tab-button-ios .tab-button-text { @@ -66,6 +63,6 @@ font-size: 24px; } -.layout-title-hide .tab-button-ios ion-icon { +.layout-label-hide .tab-button-ios ion-icon { @include margin(0); } diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss index 1c48a889f5..f5883aa5c1 100644 --- a/core/src/components/tab-button/tab-button.md.scss +++ b/core/src/components/tab-button/tab-button.md.scss @@ -16,11 +16,7 @@ } .tab-button-native { - @include padding( - $tab-button-md-padding-top, - $tab-button-md-padding-end, - $tab-button-md-padding-bottom, - $tab-button-md-padding-start); + @include padding($tab-button-md-padding-top, $tab-button-md-padding-end, $tab-button-md-padding-bottom, $tab-button-md-padding-start); display: flex; } @@ -58,46 +54,28 @@ transition: $tab-button-md-icon-transition; } -// Tab layout: icon-top, icon-only, title-only +// Tab layout: icon-top, icon-only, label-only :host(.tab-selected) .tab-button-icon { - @include transform(translate3d( - $tab-button-md-icon-transform-x-active, - $tab-button-md-icon-transform-y-active, - $tab-button-md-icon-transform-z-active)); + @include transform(translate3d($tab-button-md-icon-transform-x-active, $tab-button-md-icon-transform-y-active, $tab-button-md-icon-transform-z-active)); } // Material Design Tab with Icon or Title only // -------------------------------------------------- -:host(.icon-only), -:host(.has-title-only) { - justify-content: center; -} - - // Tab layout: icon-end .layout-icon-end .tab-button-md.tab-selected .tab-button-icon { - @include transform(translate3d( - $tab-button-md-icon-right-transform-x-active, - $tab-button-md-icon-right-transform-y-active, - $tab-button-md-icon-right-transform-z-active)); + @include transform(translate3d($tab-button-md-icon-right-transform-x-active, $tab-button-md-icon-right-transform-y-active, $tab-button-md-icon-right-transform-z-active)); } // Tab layout: icon-bottom .layout-icon-bottom .tab-button-md.tab-selected .tab-button-icon { - @include transform(translate3d( - $tab-button-md-icon-bottom-transform-x-active, - $tab-button-md-icon-bottom-transform-y-active, - $tab-button-md-icon-bottom-transform-z-active)); + @include transform(translate3d($tab-button-md-icon-bottom-transform-x-active, $tab-button-md-icon-bottom-transform-y-active, $tab-button-md-icon-bottom-transform-z-active)); } // Tab layout: icon-start .layout-icon-start .tab-button-md.tab-selected .tab-button-icon { - @include transform(translate3d( - $tab-button-md-icon-left-transform-x-active, - $tab-button-md-icon-left-transform-y-active, - $tab-button-md-icon-left-transform-z-active)); + @include transform(translate3d($tab-button-md-icon-left-transform-x-active, $tab-button-md-icon-left-transform-y-active, $tab-button-md-icon-left-transform-z-active)); } .layout-icon-top .tab-button-md .has-icon .tab-button-text { @@ -111,6 +89,6 @@ } .layout-icon-hide .tab-button-md, -.layout-title-hide .tab-button-md { +.layout-label-hide .tab-button-md { justify-content: center; } diff --git a/core/src/components/tab-button/tab-button.md.vars.scss b/core/src/components/tab-button/tab-button.md.vars.scss index 4e8e2cfd6b..d3cd9d2938 100644 --- a/core/src/components/tab-button/tab-button.md.vars.scss +++ b/core/src/components/tab-button/tab-button.md.vars.scss @@ -57,13 +57,13 @@ $tab-button-md-text-transform-active: scale3d($tab-button-md-font-size /// @prop - Text transition for the tab button text $tab-button-md-text-transition: transform .3s ease-in-out !default; -/// @prop - Transform x for the active tab button icon when the layout is icon-top, icon-only, or title-only +/// @prop - Transform x for the active tab button icon when the layout is icon-top, icon-only, or label-only $tab-button-md-icon-transform-x-active: 0 !default; -/// @prop - Transform y for the active tab button icon when the layout is icon-top, icon-only, or title-only +/// @prop - Transform y for the active tab button icon when the layout is icon-top, icon-only, or label-only $tab-button-md-icon-transform-y-active: -2px !default; -/// @prop - Transform z for the active tab button icon when the layout is icon-top, icon-only, or title-only +/// @prop - Transform z for the active tab button icon when the layout is icon-top, icon-only, or label-only $tab-button-md-icon-transform-z-active: 0 !default; /// @prop - Transform x for the active tab button icon when the layout is icon-right diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss index dfd23a7d6f..d267330e4d 100644 --- a/core/src/components/tab-button/tab-button.scss +++ b/core/src/components/tab-button/tab-button.scss @@ -96,14 +96,19 @@ a { } :host(.has-icon) .tab-button-icon, -:host(.has-title) .tab-button-text { +:host(.has-label) .tab-button-text { display: block; } -:host(.has-title-only) .tab-button-text { +:host(.has-label-only) .tab-button-text { white-space: normal; } +:host(.has-icon-only) .tab-button-native, +:host(.has-label-only) .tab-button-native { + justify-content: center; +} + // Tab Badges // -------------------------------------------------- @@ -146,12 +151,12 @@ a { .layout-icon-start .tab-button, .layout-icon-end .tab-button, .layout-icon-hide .tab-button, -.layout-title-hide .tab-button { +.layout-label-hide .tab-button { justify-content: center; } .layout-icon-hide .tab-button-icon, -.layout-title-hide .tab-button-text { +.layout-label-hide .tab-button-text { display: none; } diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx index f9186fb958..3531ad225b 100644 --- a/core/src/components/tab-button/tab-button.tsx +++ b/core/src/components/tab-button/tab-button.tsx @@ -65,10 +65,10 @@ export class TabButton { hostData() { const selected = this.selected; const tab = this.tab; - const hasTitle = !!tab.label; + const hasLabel = !!tab.label; const hasIcon = !!tab.icon; - const hasTitleOnly = (hasTitle && !hasIcon); - const hasIconOnly = (hasIcon && !hasTitle); + const hasLabelOnly = (hasLabel && !hasIcon); + const hasIconOnly = (hasIcon && !hasLabel); const hasBadge = !!tab.badge; return { 'role': 'tab', @@ -78,9 +78,9 @@ export class TabButton { class: { ...createColorClasses(this.color), 'tab-selected': selected, - 'has-title': hasTitle, + 'has-label': hasLabel, 'has-icon': hasIcon, - 'has-title-only': hasTitleOnly, + 'has-label-only': hasLabelOnly, 'has-icon-only': hasIconOnly, 'has-badge': hasBadge, 'tab-button-disabled': tab.disabled, diff --git a/core/src/components/tabs/test/translucent/readme.md b/core/src/components/tabs/test/translucent/readme.md deleted file mode 100644 index 4c4e3ca2ab..0000000000 --- a/core/src/components/tabs/test/translucent/readme.md +++ /dev/null @@ -1,11 +0,0 @@ -# translucent-page-tab - - - - - - - ----------------------------------------------- - -*Built by [StencilJS](https://stenciljs.com/)*