Skip to content

fix(tabs): fix the tabbar layout so it works with shadow DOM #15113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 10, 2018
Merged

fix(tabs): fix the tabbar layout so it works with shadow DOM #15113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
18b1fe9
fix(tabs): fix the tabbar layout so it works with shadow DOM
brandyscarney Aug 9, 2018
2fdabd3
fix(tabs): update tab transforms for MD mode
brandyscarney Aug 9, 2018
8b35593
style(sass): lint fixes
brandyscarney Aug 9, 2018
00f2a97
fix(tabs): update badge position based on tabs layout
brandyscarney Aug 9, 2018
dbbff76
fix(tabs): rename --text vars to --label
brandyscarney Aug 10, 2018
4e55779
style(sass): fix lint errors
brandyscarney Aug 10, 2018
943475e
fix(tabs): fix the transforms for icon/text and change icon size
brandyscarney Aug 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 0 additions & 24 deletions core/src/components/tab-button/tab-button.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,27 +39,3 @@
.tab-button-icon::before {
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 {
@include margin(2px, 0);

font-size: 14px;

line-height: 1.1;
}

.layout-icon-end .tab-button-ios ion-icon,
.layout-icon-start .tab-button-ios ion-icon {
@include margin(2px, null, 1px, null);

min-width: 24px;
height: 26px;

font-size: 24px;
}

.layout-label-hide .tab-button-ios ion-icon {
@include margin(0);
}
44 changes: 6 additions & 38 deletions core/src/components/tab-button/tab-button.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
--color: #{$tab-button-md-text-color};
--color-selected: #{$tabbar-md-text-color-active};
--background-focused: #{$tabbar-md-background-color-focused};
--icon-transform-selected: #{$tab-button-md-icon-transform-active};

max-width: 168px;

Expand All @@ -27,6 +28,8 @@
@include margin($tab-button-md-text-margin-top, $tab-button-md-text-margin-end, $tab-button-md-text-margin-bottom, $tab-button-md-text-margin-start);
@include transform-origin(center, bottom);

transform: var(--label-transform);

transition: $tab-button-md-text-transition;

font-size: $tab-button-md-font-size;
Expand All @@ -35,7 +38,7 @@
}

:host(.tab-selected) .tab-button-text {
transform: $tab-button-md-text-transform-active;
--label-transform: #{$tab-button-md-text-transform-active};

transition: $tab-button-md-text-transition;
}
Expand All @@ -49,45 +52,10 @@
width: $tab-button-md-icon-size;
height: $tab-button-md-icon-size;

transform: var(--icon-transform);

transition: $tab-button-md-icon-transition;

font-size: $tab-button-md-icon-size;
}

// 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));
}


// Material Design Tab with Icon or Title only
// --------------------------------------------------

// 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));
}

// 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));
}

// 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));
}

.layout-icon-top .tab-button-md .has-icon .tab-button-text {
@include margin(null, null, -2px, null);
}

.layout-icon-bottom .tab-button-md .tab-button-text {
@include transform-origin(center, top);
@include margin(-2px, null, null, null);
}

.layout-icon-hide .tab-button-md,
.layout-label-hide .tab-button-md {
justify-content: center;
}
46 changes: 11 additions & 35 deletions core/src/components/tab-button/tab-button.md.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,49 +55,25 @@ $tab-button-md-text-capitalization: none !default;
$tab-button-md-text-transform-active: scale3d($tab-button-md-font-size-active / $tab-button-md-font-size, $tab-button-md-font-size-active / $tab-button-md-font-size, 1) !default;

/// @prop - Text transition for the tab button text
$tab-button-md-text-transition: transform .3s ease-in-out !default;
$tab-button-md-text-transition: transform .1s ease-in-out !default;

/// @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 for the active tab button icon when the layout is icon-top, icon-only, or label-only
$tab-button-md-icon-transform-active: translate3d(0, -2px, 0) !default;

/// @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 for the active tab button icon when the layout is icon-right
$tab-button-md-icon-right-transform-active: translate3d(6px, 0, 0) !default;

/// @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 for the active tab button icon when the layout is icon-bottom
$tab-button-md-icon-bottom-transform-active: translate3d(0, 2px, 0) !default;

/// @prop - Transform x for the active tab button icon when the layout is icon-right
$tab-button-md-icon-right-transform-x-active: 2px !default;

/// @prop - Transform y for the active tab button icon when the layout is icon-right
$tab-button-md-icon-right-transform-y-active: 0 !default;

/// @prop - Transform z for the active tab button icon when the layout is icon-right
$tab-button-md-icon-right-transform-z-active: 0 !default;

/// @prop - Transform x for the active tab button icon when the layout is icon-bottom
$tab-button-md-icon-bottom-transform-x-active: 0 !default;

/// @prop - Transform y for the active tab button icon when the layout is icon-bottom
$tab-button-md-icon-bottom-transform-y-active: 2px !default;

/// @prop - Transform z for the active tab button icon when the layout is icon-bottom
$tab-button-md-icon-bottom-transform-z-active: 0 !default;

/// @prop - Transform x for the active tab button icon when the layout is icon-left
$tab-button-md-icon-left-transform-x-active: -2px !default;

/// @prop - Transform y for the active tab button icon when the layout is icon-left
$tab-button-md-icon-left-transform-y-active: 0 !default;

/// @prop - Transform z for the active tab button icon when the layout is icon-left
$tab-button-md-icon-left-transform-z-active: 0 !default;
/// @prop - Transform for the active tab button icon when the layout is icon-left
$tab-button-md-icon-left-transform-active: translate3d(-6px, 0, 0) !default;

/// @prop - Text transition for the tab button icon
$tab-button-md-icon-transition: transform .3s ease-in-out !default;
$tab-button-md-icon-transition: transform .1s ease-in-out !default;

/// @prop - Size of the tab button icon
$tab-button-md-icon-size: 24px !default;
$tab-button-md-icon-size: 22px !default;

/// @prop - Opacity of the inactive tab button
$tab-button-md-opacity: .7 !default;
78 changes: 32 additions & 46 deletions core/src/components/tab-button/tab-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ a {

display: flex;

flex-direction: column;
flex-direction: var(--flex-direction, column);
align-items: center;
justify-content: flex-start;
justify-content: var(--justify-content, flex-start);

width: 100%;
height: 100%;
Expand All @@ -79,10 +79,29 @@ a {
opacity: .4;
}

.tab-button-text,
.tab-button-text {
@include margin(var(--label-margin-top), null, var(--label-margin-bottom), null);

display: var(--label-display, block);

font-size: var(--label-font-size);

line-height: var(--label-line-height);
}

.tab-button-icon {
display: none;
@include margin(var(--icon-margin-top), null, var(--icon-margin-bottom), null);

display: var(--icon-display, block);

min-width: var(--icon-min-width);
height: var(--icon-height, 1em);

font-size: var(--icon-font-size);
}

.tab-button-text,
.tab-button-icon {
align-self: center;

min-width: 26px;
Expand All @@ -96,18 +115,13 @@ a {
box-sizing: border-box;
}

:host(.has-icon) .tab-button-icon,
:host(.has-label) .tab-button-text {
display: block;
}

: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;
--justify-content: center;
}


Expand All @@ -116,7 +130,7 @@ a {

.tab-badge {
@include position(6%, 4%, null, null); // 4% fallback
@include position(null, calc(50% - 50px), null, null);
@include position(null, var(--badge-end, calc(50% - 30px)), null, null);
@include padding(1px, 6px);

box-sizing: border-box;
Expand All @@ -130,42 +144,14 @@ a {
line-height: 16px;
}

:host(.has-icon) .tab-badge {
@include position(null, calc(50% - 30px), null, null);
:host(.has-label-only) .tab-badge {
--badge-end: #{calc(50% - 50px)};
}



// Tab Badges
// --------------------------------------------------

.layout-icon-start .tab-button {
flex-direction: row;
}

.layout-icon-end .tab-button {
flex-direction: row-reverse;
:host(.has-icon-only) .tab-badge {
--badge-end: #{calc(50% - 30px)};
}

.layout-icon-bottom .tab-button {
flex-direction: column-reverse;
}

.layout-icon-start .tab-button,
.layout-icon-end .tab-button,
.layout-icon-hide .tab-button,
.layout-label-hide .tab-button {
justify-content: center;
}

.layout-icon-hide .tab-button-icon,
.layout-label-hide .tab-button-text {
display: none;
}


.layout-icon-bottom .tab-badge,
.layout-icon-start .tab-badge,
.layout-icon-end .tab-badge {
@include position(null, calc(50% - 50px), null, null);
}
:host(.tab-selected) .tab-button-icon {
transform: var(--icon-transform-selected);
}
2 changes: 1 addition & 1 deletion core/src/components/tab-button/tab-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export class TabButton {
{ icon && <ion-icon class="tab-button-icon" icon={icon} lazy={false}></ion-icon> }
{ label && <span class="tab-button-text">{label}</span> }
{ badge && <ion-badge class="tab-badge" color={badgeColor}>{badge}</ion-badge> }
{ mode === 'md' && <ion-ripple-effect tapClick={true}/> }
{ mode === 'md' && <ion-ripple-effect tapClick={true}></ion-ripple-effect> }
</a>
];
}
Expand Down
25 changes: 25 additions & 0 deletions core/src/components/tabbar/tabbar.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,28 @@
backdrop-filter: $tabbar-ios-translucent-filter;
}


// iOS Tabbar Layout
// --------------------------------------------------

:host(.layout-icon-end) ion-tab-button,
:host(.layout-icon-start) ion-tab-button,
:host(.layout-icon-hide) ion-tab-button {
--label-margin-top: 2px;
--label-margin-bottom: 2px;
--label-font-size: 14px;
--label-line-height: 1.1;
}

:host(.layout-icon-end) ion-tab-button,
:host(.layout-icon-start) ion-tab-button {
--icon-margin-top: 2px;
--icon-margin-bottom: 1px;
--icon-min-width: 24px;
--icon-height: 26px;
--icon-font-size: 24px;
}

:host(.layout-label-hide) ion-tab-button {
--icon-margin: 0;
}
22 changes: 18 additions & 4 deletions core/src/components/tabbar/tabbar.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,23 @@
contain: strict;
}

// Material Design Tabbar Layout
// --------------------------------------------------

// TODO: REVIEW
:host(.placement-top) .tab-button.tab-selected .tab-button-icon,
:host(.placement-top) .tab-button.tab-selected .tab-button-text {
transform: inherit;
:host(.layout-icon-top) ion-tab-button {
--label-margin-bottom: -2px;
}

:host(.layout-icon-end) ion-tab-button {
--icon-transform-selected: #{$tab-button-md-icon-right-transform-active};
}

:host(.layout-icon-bottom) ion-tab-button {
--label-margin-top: -2px;
--label-transform: transform-origin(center, top);
--icon-transform-selected: #{$tab-button-md-icon-bottom-transform-active};
}

:host(.layout-icon-start) ion-tab-button {
--icon-transform-selected: #{$tab-button-md-icon-left-transform-active};
}
1 change: 1 addition & 0 deletions core/src/components/tabbar/tabbar.md.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "../../themes/ionic.globals.md";
@import "../tab-button/tab-button.md.vars";

// Material Design Tabs
// --------------------------------------------------
Expand Down
Loading