Skip to content
Permalink
Browse files

fix(tab-button): apply background-focused when tabbing into tab button (

#17502)

fixes #17042
  • Loading branch information...
liamdebeasi committed May 14, 2019
1 parent 3cad778 commit d788a8eac6ea8e60b1147be3d6119cd448a845db
@@ -28,7 +28,6 @@
background: #{current-color(base, $tab-bar-ios-translucent-background-color-alpha)};
}

// iOS Translucent Tab bar button
:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
background: transparent;
:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
background: rgba($background-color-rgb, .6);
}
@@ -11,8 +11,4 @@
--color-selected: #{$tabbar-md-color-activated};

height: 56px;
}

:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
background: transparent;
}
@@ -33,19 +33,32 @@
box-sizing: content-box !important;
}

:host(.ion-color) ::slotted(ion-tab-button) {
--background-focused: #{current-color(shade)};
--color-selected: #{current-color(contrast)};
}

:host(.ion-color) ::slotted(.tab-selected) {
color: #{current-color(contrast)};;
}

:host(.ion-color),
:host(.ion-color) ::slotted(ion-tab-button) {
background: #{current-color(base)};
color: #{current-color(contrast, .7)};
}

:host(.ion-color),
:host(.ion-color) ::slotted(ion-tab-button) {
--background-focused: #{current-color(shade)};
--color-selected: #{current-color(contrast)};
background: #{current-color(base)};
}

:host(.ion-color) ::slotted(.tab-selected) {
color: #{current-color(contrast)};;
:host(.ion-color) ::slotted(ion-tab-button.ion-focused),
:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
background: var(--background-focused)
}

:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
background: transparent;
}

:host([slot="top"]) {
@@ -58,4 +71,4 @@
:host(.tab-bar-hidden) {
/* stylelint-disable-next-line declaration-no-important */
display: none !important;
}
}
@@ -5,6 +5,18 @@ test('tab-bar: custom', async () => {
url: '/src/components/tab-bar/test/custom?ionic:_testing=true'
});

const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
const screenshotCompares = [];

const tabBar = await page.find('ion-tab-bar');
await tabBar.waitForVisible();

screenshotCompares.push(await page.compareScreenshot('tab-bar: custom default'));

await page.keyboard.press('Tab');

screenshotCompares.push(await page.compareScreenshot('tab-bar: custom tabbed'));
await page.waitFor(10000);
for (const screenshotCompare of screenshotCompares) {
expect(screenshotCompare).toMatchScreenshot();
}
});
@@ -16,6 +16,12 @@
<ion-content>
<!-- Default -->
<ion-tab-bar selected-tab="1">

<ion-tab-button tab="1" disabled>
<ion-icon name="clock"></ion-icon>
<ion-label>Recents</ion-label>
</ion-tab-button>

<ion-tab-button tab="1">
<ion-icon name="clock"></ion-icon>
<ion-label>Recents</ion-label>

0 comments on commit d788a8e

Please sign in to comment.
You can’t perform that action at this time.