fix(tab-button): allow standalone tab-button (#16905)

* fix(tab-button): allow standalone tab-button

fixes #16845

* fix lint issue

angular/src/directives/proxies.ts

@@ -893,7 +893,7 @@ export class IonTabBar {
 proxyInputs(IonTabBar, ['mode', 'color', 'selectedTab', 'translucent']);
 
 export declare interface IonTabButton extends StencilComponents<'IonTabButton'> {}
-@Component({ selector: 'ion-tab-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'layout', 'href', 'tab', 'disabled'] })
+@Component({ selector: 'ion-tab-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['selected', 'mode', 'layout', 'href', 'tab', 'disabled'] })
 export class IonTabButton {
   ionTabButtonClick!: EventEmitter<CustomEvent>;
   el: HTMLElement
@@ -903,7 +903,7 @@ export class IonTabButton {
     proxyOutputs(this, this.el, ['ionTabButtonClick']);
   }
 }
-proxyInputs(IonTabButton, ['mode', 'layout', 'href', 'tab', 'disabled']);
+proxyInputs(IonTabButton, ['selected', 'mode', 'layout', 'href', 'tab', 'disabled']);
 
 export declare interface IonText extends StencilComponents<'IonText'> {}
 @Component({ selector: 'ion-text', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })

core/api.txt

@@ -1053,7 +1053,8 @@ ion-tab-button,prop,disabled,boolean,false,false,false
 ion-tab-button,prop,href,string | undefined,undefined,false,false
 ion-tab-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,undefined,false,false
 ion-tab-button,prop,mode,"ios" | "md",undefined,false,false
-ion-tab-button,prop,tab,string,undefined,false,false
+ion-tab-button,prop,selected,boolean,false,false,false
+ion-tab-button,prop,tab,string | undefined,undefined,false,false
 ion-tab-button,css-prop,--background
 ion-tab-button,css-prop,--background-focused
 ion-tab-button,css-prop,--color

core/src/components.d.ts

@@ -4458,9 +4458,13 @@ export namespace Components {
     */
     'mode': Mode;
     /**
+    * The selected tab component
+    */
+    'selected': boolean;
+    /**
     * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
     */
-    'tab': string;
+    'tab'?: string;
   }
   interface IonTabButtonAttributes extends StencilHTMLAttributes {
     /**
@@ -4484,9 +4488,13 @@ export namespace Components {
     */
     'onIonTabButtonClick'?: (event: CustomEvent<TabButtonClickEventDetail>) => void;
     /**
+    * The selected tab component
+    */
+    'selected'?: boolean;
+    /**
     * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
     */
-    'tab': string;
+    'tab'?: string;
   }
 
   interface IonTab {

core/src/components/tab-button/readme.md

@@ -97,7 +97,8 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
 | `href`     | `href`     | The URL which will be used as the `href` within this tab's button anchor.                                                                 | `string \| undefined`                                                                                   | `undefined` |
 | `layout`   | `layout`   | Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.                                                          | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `undefined` |
 | `mode`     | `mode`     | The mode determines which platform styles to use.                                                                                         | `"ios" \| "md"`                                                                                         | `undefined` |
-| `tab`      | `tab`      | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. | `string`                                                                                                | `undefined` |
+| `selected` | `selected` | The selected tab component                                                                                                                | `boolean`                                                                                               | `false`     |
+| `tab`      | `tab`      | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. | `string \| undefined`                                                                                   | `undefined` |
 
 
 ## CSS Custom Properties

core/src/components/tab-button/tab-button.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi } from '@stencil/core';
 
 import { Config, Mode, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from '../../interface';
 
@@ -21,7 +21,7 @@ export class TabButton implements ComponentInterface {
   /**
    * The selected tab component
    */
-  @State() selected = false;
+  @Prop({ mutable: true }) selected = false;
 
   /**
    * The mode determines which platform styles to use.
@@ -43,7 +43,7 @@ export class TabButton implements ComponentInterface {
    * A tab id must be provided for each `ion-tab`. It's used internally to reference
    * the selected tab or by the router to switch between them.
    */
-  @Prop() tab!: string;
+  @Prop() tab?: string;
 
   /**
    * The selected tab component
@@ -63,23 +63,22 @@ export class TabButton implements ComponentInterface {
 
   @Listen('click')
   onClick(ev: Event) {
-    if (!this.disabled) {
+    if (this.tab !== undefined) {
-      this.ionTabButtonClick.emit({
+      if (!this.disabled) {
-        tab: this.tab,
+        this.ionTabButtonClick.emit({
-        href: this.href,
+          tab: this.tab,
-        selected: this.selected
+          href: this.href,
-      });
+          selected: this.selected
+        });
+      }
+      ev.preventDefault();
     }
-    ev.preventDefault();
   }
 
   componentWillLoad() {
     if (this.layout === undefined) {
       this.layout = this.config.get('tabButtonLayout', 'icon-top');
     }
-    if (isNotDefined(this.tab)) {
-      console.error('Missing "tab" property in <ion-tab-button>');
-    }
   }
 
   private get hasLabel() {
@@ -95,8 +94,7 @@ export class TabButton implements ComponentInterface {
     return {
       'role': 'tab',
       'aria-selected': selected ? 'true' : null,
-      'id': `tab-button-${tab}`,
+      'id': tab !== undefined ? `tab-button-${tab}` : null,
-      'aria-controls': `tab-view-${tab}`,
       class: {
         'tab-selected': selected,
         'tab-disabled': disabled,
@@ -113,14 +111,10 @@ export class TabButton implements ComponentInterface {
   render() {
     const { mode, href } = this;
     return (
-      <a href={href || '#'}>
+      <a href={href}>
         <slot></slot>
         {mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
       </a>
     );
   }
 }
-
-function isNotDefined(a: any) {
-  return a == null;
-}

core/src/components/tab/tab.tsx

@@ -63,7 +63,6 @@ export class Tab implements ComponentInterface {
       'role': 'tabpanel',
       'aria-hidden': !active ? 'true' : null,
       'aria-labelledby': `tab-button-${tab}`,
-      'id': `tab-view-${tab}`,
       'class': {
         'ion-page': component === undefined,
         'tab-hidden': !active