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)}; background: #{current-color(base, $tab-bar-ios-translucent-background-color-alpha)};
} }
// iOS Translucent Tab bar button :host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
:host(.tab-bar-translucent) ::slotted(ion-tab-button) { background: rgba($background-color-rgb, .6);
background: transparent;
} }

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

@ -12,7 +12,3 @@
height: 56px; 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; 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) { :host(.ion-color) ::slotted(ion-tab-button) {
--background-focused: #{current-color(shade)}; --background-focused: #{current-color(shade)};
--color-selected: #{current-color(contrast)}; --color-selected: #{current-color(contrast)};
@ -48,6 +42,25 @@
color: #{current-color(contrast)};; 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"]) { :host([slot="top"]) {
padding-bottom: 0; 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' url: '/src/components/tab-bar/test/custom?ionic:_testing=true'
}); });
const compare = await page.compareScreenshot(); const screenshotCompares = [];
expect(compare).toMatchScreenshot();
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> <ion-content>
<!-- Default --> <!-- Default -->
<ion-tab-bar selected-tab="1"> <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-tab-button tab="1">
<ion-icon name="clock"></ion-icon> <ion-icon name="clock"></ion-icon>
<ion-label>Recents</ion-label> <ion-label>Recents</ion-label>

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

@ -12,7 +12,8 @@
</head> </head>
<body> <body>
<!-- Default --> <ion-app>
<ion-content>
<ion-tab-bar translucent selected-tab="1"> <ion-tab-bar translucent selected-tab="1">
<ion-tab-button tab="1"> <ion-tab-button tab="1">
@ -184,10 +185,14 @@
<ion-icon name="calendar"></ion-icon> <ion-icon name="calendar"></ion-icon>
</ion-tab-button> </ion-tab-button>
</ion-tab-bar> </ion-tab-bar>
</ion-content>
</ion-app>
<!-- Default -->
<style> <style>
body { ion-content {
background: linear-gradient( --background: linear-gradient(
to right, orange , yellow, green, cyan, blue, violet 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%; height: 100%;
outline: none;
background: var(--background); background: var(--background);
color: var(--color); color: var(--color);
} }
@ -61,7 +63,7 @@ a {
-webkit-user-drag: none; -webkit-user-drag: none;
} }
a:focus-visible { :host(.ion-focused) {
background: var(--background-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'); 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() { hostData() {
const { disabled, hasIcon, hasLabel, layout, selected, tab } = this; const { disabled, hasIcon, hasLabel, tabIndex, layout, selected, tab } = this;
return { return {
'tabindex': tabIndex,
'role': 'tab', 'role': 'tab',
'aria-selected': selected ? 'true' : null, 'aria-selected': selected ? 'true' : null,
'id': tab !== undefined ? `tab-button-${tab}` : null, 'id': tab !== undefined ? `tab-button-${tab}` : null,
@ -105,6 +118,8 @@ export class TabButton implements ComponentInterface {
'tab-has-icon-only': hasIcon && !hasLabel, 'tab-has-icon-only': hasIcon && !hasLabel,
[`tab-layout-${layout}`]: true, [`tab-layout-${layout}`]: true,
'ion-activatable': true, 'ion-activatable': true,
'ion-selectable': true,
'ion-focusable': true
} }
}; };
} }
@ -112,7 +127,7 @@ export class TabButton implements ComponentInterface {
render() { render() {
const { mode, href } = this; const { mode, href } = this;
return ( return (
<a href={href}> <a href={href} tabIndex={-1}>
<slot></slot> <slot></slot>
{mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>} {mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
</a> </a>