From ae2cae635d81de2850718944ec883241be8dda32 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Tue, 3 Apr 2018 13:37:07 +0200 Subject: [PATCH] refactor(tabs): rename [tabTitle] -> [label] --- .../test/nav/src/app/lazy-load-tabs/tabs.html | 6 +- .../test/nav/src/app/simple-tabs/tabs.html | 6 +- core/src/components.d.ts | 68 +++++----- .../components/back-button/back-button.tsx | 6 +- core/src/components/back-button/readme.md | 4 +- core/src/components/tab-button/tab-button.tsx | 12 +- core/src/components/tab/readme.md | 120 +++++++++--------- core/src/components/tab/tab.tsx | 12 +- 8 files changed, 116 insertions(+), 118 deletions(-) diff --git a/angular/test/nav/src/app/lazy-load-tabs/tabs.html b/angular/test/nav/src/app/lazy-load-tabs/tabs.html index 6427a3e61c..4f8b64ff4e 100644 --- a/angular/test/nav/src/app/lazy-load-tabs/tabs.html +++ b/angular/test/nav/src/app/lazy-load-tabs/tabs.html @@ -2,15 +2,15 @@ - + - + - + diff --git a/angular/test/nav/src/app/simple-tabs/tabs.html b/angular/test/nav/src/app/simple-tabs/tabs.html index 6427a3e61c..4f8b64ff4e 100644 --- a/angular/test/nav/src/app/simple-tabs/tabs.html +++ b/angular/test/nav/src/app/simple-tabs/tabs.html @@ -2,15 +2,15 @@ - + - + - + diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 0253beea51..d32ffc7247 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -609,7 +609,7 @@ declare global { */ 'mode': 'ios' | 'md'; /** - * The text property is used to provide custom text for the back button while using the default look-and-feel + * The text property is used to provide custom text for the back button while using the default look-and-feel. */ 'text': string|undefined; } @@ -637,7 +637,7 @@ declare global { */ 'mode'?: 'ios' | 'md'; /** - * The text property is used to provide custom text for the back button while using the default look-and-feel + * The text property is used to provide custom text for the back button while using the default look-and-feel. */ 'text'?: string|undefined; } @@ -5757,6 +5757,14 @@ declare global { declare global { interface HTMLIonTabElement extends HTMLStencilElement { 'active': boolean; + /** + * The badge for the tab. + */ + 'badge': string; + /** + * The badge color for the tab button. + */ + 'badgeStyle': string; 'btnId': string; /** * The component to display inside of the tab. @@ -5772,6 +5780,14 @@ declare global { * The URL which will be used as the `href` within this tab's `` anchor. */ 'href': string; + /** + * The icon for the tab. + */ + 'icon': string; + /** + * The title of the tab. + */ + 'label': string; /** * The name of the tab. */ @@ -5785,22 +5801,6 @@ declare global { * If true, the tab button is visible within the tabbar. Defaults to `true`. */ 'show': boolean; - /** - * The badge for the tab. - */ - 'tabBadge': string; - /** - * The badge color for the tab button. - */ - 'tabBadgeStyle': string; - /** - * The icon for the tab. - */ - 'tabIcon': string; - /** - * The title of the tab. - */ - 'tabTitle': string; /** * If true, hide the tabs on child pages. */ @@ -5824,6 +5824,14 @@ declare global { namespace JSXElements { export interface IonTabAttributes extends HTMLAttributes { 'active'?: boolean; + /** + * The badge for the tab. + */ + 'badge'?: string; + /** + * The badge color for the tab button. + */ + 'badgeStyle'?: string; 'btnId'?: string; /** * The component to display inside of the tab. @@ -5838,6 +5846,14 @@ declare global { * The URL which will be used as the `href` within this tab's `` anchor. */ 'href'?: string; + /** + * The icon for the tab. + */ + 'icon'?: string; + /** + * The title of the tab. + */ + 'label'?: string; /** * The name of the tab. */ @@ -5854,22 +5870,6 @@ declare global { * If true, the tab button is visible within the tabbar. Defaults to `true`. */ 'show'?: boolean; - /** - * The badge for the tab. - */ - 'tabBadge'?: string; - /** - * The badge color for the tab button. - */ - 'tabBadgeStyle'?: string; - /** - * The icon for the tab. - */ - 'tabIcon'?: string; - /** - * The title of the tab. - */ - 'tabTitle'?: string; /** * If true, hide the tabs on child pages. */ diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 1ab7111d5c..4d023b650b 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -23,7 +23,7 @@ export class BackButton { /** * The text property is used to provide custom text for the back button while using the - * default look-and-feel + * default look-and-feel. */ @Prop() text: string|undefined; @@ -55,14 +55,14 @@ export class BackButton { render() { const backButtonIcon = this.icon || this.config.get('backButtonIcon', 'arrow-back'); - const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', this.mode === 'ios' ? 'Back' : ''); + const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', 'Back'); return ( ); diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md index 820eab165a..141c9191d5 100644 --- a/core/src/components/back-button/readme.md +++ b/core/src/components/back-button/readme.md @@ -71,7 +71,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl The text property is used to provide custom text for the back button while using the -default look-and-feel +default look-and-feel. ## Attributes @@ -100,7 +100,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl The text property is used to provide custom text for the back button while using the -default look-and-feel +default look-and-feel. diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx index e4d3e3fdf2..afba195ae0 100644 --- a/core/src/components/tab-button/tab-button.tsx +++ b/core/src/components/tab-button/tab-button.tsx @@ -51,11 +51,11 @@ export class TabButton { hostData() { const selected = this.selected; const tab = this.tab; - const hasTitle = !!tab.tabTitle; - const hasIcon = !!tab.tabIcon; + const hasTitle = !!tab.label; + const hasIcon = !!tab.icon; const hasTitleOnly = (hasTitle && !hasIcon); const hasIconOnly = (hasIcon && !hasTitle); - const hasBadge = !!tab.tabBadge; + const hasBadge = !!tab.badge; return { 'role': 'tab', 'id': tab.btnId, @@ -84,9 +84,9 @@ export class TabButton { class='tab-cover' onKeyUp={this.onKeyUp.bind(this)} onBlur={this.onBlur.bind(this)}> - { tab.tabIcon && } - { tab.tabTitle && {tab.tabTitle} } - { tab.tabBadge && {tab.tabBadge} } + { tab.icon && } + { tab.label && {tab.label} } + { tab.badge && {tab.badge} } { this.mode === 'md' && } ]; diff --git a/core/src/components/tab/readme.md b/core/src/components/tab/readme.md index 8dc2680d55..6a145e0b9b 100644 --- a/core/src/components/tab/readme.md +++ b/core/src/components/tab/readme.md @@ -10,12 +10,12 @@ navigation controllers take a look at the [NavController API Docs](../../../navi See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs. To add a basic tab, you can use the following markup where the `root` property -is the page you want to load for that tab, `tabTitle` is the optional text to -display on the tab, and `tabIcon` is the optional [icon](../../icon/Icon/). +is the page you want to load for that tab, `label` is the optional text to +display on the tab, and `icon` is the optional [icon](../../icon/Icon/). ```html - + ``` @@ -27,7 +27,7 @@ the tabs. ```html - + pop ``` @@ -55,6 +55,20 @@ export class Tabs { boolean +#### badge + +string + +The badge for the tab. + + +#### badgeStyle + +string + +The badge color for the tab button. + + #### btnId string @@ -86,6 +100,20 @@ string The URL which will be used as the `href` within this tab's `` anchor. +#### icon + +string + +The icon for the tab. + + +#### label + +string + +The title of the tab. + + #### name string @@ -107,34 +135,6 @@ boolean If true, the tab button is visible within the tabbar. Defaults to `true`. -#### tabBadge - -string - -The badge for the tab. - - -#### tabBadgeStyle - -string - -The badge color for the tab button. - - -#### tabIcon - -string - -The icon for the tab. - - -#### tabTitle - -string - -The title of the tab. - - #### tabsHideOnSubPages boolean @@ -149,6 +149,20 @@ If true, hide the tabs on child pages. boolean +#### badge + +string + +The badge for the tab. + + +#### badge-style + +string + +The badge color for the tab button. + + #### btn-id string @@ -180,6 +194,20 @@ string The URL which will be used as the `href` within this tab's `` anchor. +#### icon + +string + +The icon for the tab. + + +#### label + +string + +The title of the tab. + + #### name string @@ -201,34 +229,6 @@ boolean If true, the tab button is visible within the tabbar. Defaults to `true`. -#### tab-badge - -string - -The badge for the tab. - - -#### tab-badge-style - -string - -The badge color for the tab button. - - -#### tab-icon - -string - -The icon for the tab. - - -#### tab-title - -string - -The title of the tab. - - #### tabs-hide-on-sub-pages boolean diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx index 75eddae0af..74d92e95fc 100644 --- a/core/src/components/tab/tab.tsx +++ b/core/src/components/tab/tab.tsx @@ -1,4 +1,4 @@ -import { Build, Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; +import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core'; import { FrameworkDelegate, attachComponent } from '../../utils/framework-delegate'; import { ComponentRef } from '../..'; @@ -10,8 +10,6 @@ export class Tab { private loaded = false; @Element() el: HTMLIonTabElement; - @State() init = false; - @Prop({ mutable: true }) active = false; @Prop() btnId: string; @@ -20,7 +18,7 @@ export class Tab { /** * The title of the tab. */ - @Prop() tabTitle: string; + @Prop() label: string; /** * The URL which will be used as the `href` within this tab's `` anchor. @@ -30,17 +28,17 @@ export class Tab { /** * The icon for the tab. */ - @Prop() tabIcon: string; + @Prop() icon: string; /** * The badge for the tab. */ - @Prop() tabBadge: string; + @Prop() badge: string; /** * The badge color for the tab button. */ - @Prop() tabBadgeStyle = 'default'; + @Prop() badgeStyle = 'default'; /** * The component to display inside of the tab.