javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
fixes #17042
This commit is contained in:
Liam DeBeasi
2019-05-14 12:04:41 -04:00
committed by GitHub
parent 3cad7787c2
commit d788a8eac6
9 changed files with 241 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/src/components/tab-bar/tab-bar.ios.scss
View File

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

4
core/src/components/tab-bar/tab-bar.md.scss
View File

@ -12,7 +12,3 @@
height: 56px;
}
:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
background: transparent;
}

25
core/src/components/tab-bar/tab-bar.scss
View File

@ -33,12 +33,6 @@
box-sizing: content-box !important;
}
: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)};
@ -48,6 +42,25 @@
color: #{current-color(contrast)};;
}
:host(.ion-color),
:host(.ion-color) ::slotted(ion-tab-button) {
color: #{current-color(contrast, .7)};
}
:host(.ion-color),
:host(.ion-color) ::slotted(ion-tab-button) {
background: #{current-color(base)};
}
: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"]) {
padding-bottom: 0;

16
core/src/components/tab-bar/test/custom/e2e.ts
View File

@ -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();
}
});

6
core/src/components/tab-bar/test/custom/index.html
View File

@ -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>

11
core/src/components/tab-bar/test/translucent/index.html
View File

@ -12,7 +12,8 @@
</head>
<body>
<!-- Default -->
<ion-app>
<ion-content>
<ion-tab-bar translucent selected-tab="1">
<ion-tab-button tab="1">
@ -184,10 +185,14 @@
<ion-icon name="calendar"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-content>
</ion-app>
<!-- Default -->
<style>
body {
background: linear-gradient(
ion-content {
--background: linear-gradient(
to right, orange , yellow, green, cyan, blue, violet
);
}

4
core/src/components/tab-button/tab-button.scss
View File

@ -25,6 +25,8 @@
height: 100%;
outline: none;
background: var(--background);
color: var(--color);
}
@ -61,7 +63,7 @@ a {
-webkit-user-drag: none;
}
a:focus-visible {
:host(.ion-focused) {
background: var(--background-focused);
}

19
core/src/components/tab-button/tab-button.tsx
View File

@ -89,9 +89,22 @@ export class TabButton implements ComponentInterface {
return !!this.el.querySelector('ion-icon');
}
private get tabIndex() {
if (this.disabled) { return -1; }
const hasTabIndex = this.el.hasAttribute('tabindex');
if (hasTabIndex) {
return this.el.getAttribute('tabindex');
}
return 0;
}
hostData() {
const { disabled, hasIcon, hasLabel, layout, selected, tab } = this;
const { disabled, hasIcon, hasLabel, tabIndex, layout, selected, tab } = this;
return {
'tabindex': tabIndex,
'role': 'tab',
'aria-selected': selected ? 'true' : null,
'id': tab !== undefined ? `tab-button-${tab}` : null,
@ -105,6 +118,8 @@ export class TabButton implements ComponentInterface {
'tab-has-icon-only': hasIcon && !hasLabel,
[`tab-layout-${layout}`]: true,
'ion-activatable': true,
'ion-selectable': true,
'ion-focusable': true
}
};
}
@ -112,7 +127,7 @@ export class TabButton implements ComponentInterface {
render() {
const { mode, href } = this;
return (
<a href={href}>
<a href={href} tabIndex={-1}>
<slot></slot>
{mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
</a>