fix(button): update button components to pass down href

packages/core/src/components.d.ts

@@ -2470,6 +2470,7 @@ declare global {
       checked?: boolean;
       color?: string;
       disabled?: boolean;
+      href?: string;
       mode?: 'ios' | 'md';
       value?: string;
     }

packages/core/src/components/chip-button/chip-button.tsx

@@ -12,12 +12,6 @@ import { getElementClassObject } from '../../utils/theme';
 export class ChipButton {
   @Element() private el: HTMLElement;
 
-  /**
-   * Contains a URL or a URL fragment that the hyperlink points to.
-   * If this property is set, an anchor tag will be rendered.
-   */
-  @Prop() href: string;
-
   /**
    * The color to use.
    * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
@@ -30,15 +24,21 @@ export class ChipButton {
    */
   @Prop() mode: 'ios' | 'md';
 
+  /**
+   * If true, sets the button into a disabled state.
+   */
+  @Prop() disabled = false;
+
   /**
    * Set to `"clear"` for a transparent button style.
    */
   @Prop() fill: string;
 
   /**
-   * If true, sets the button into a disabled state.
+   * Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
    */
-  @Prop() disabled = false;
+  @Prop() href: string;
 
   /**
    * Get the classes based on the button type
@@ -97,11 +97,14 @@ export class ChipButton {
     };
 
     return (
-      <TagType class={buttonClasses} disabled={this.disabled}>
-        <span class='button-inner'>
-          <slot></slot>
-        </span>
-        { this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }
+      <TagType
+        class={buttonClasses}
+        disabled={this.disabled}
+        href={this.href}>
+          <span class='button-inner'>
+            <slot></slot>
+          </span>
+          { this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }
       </TagType>
     );
   }

packages/core/src/components/fab-button/fab-button.tsx

@@ -134,7 +134,11 @@ export class FabButton {
     };
 
     return (
-      <TagType class={fabClasses} onClick={this.clickedFab.bind(this)} disabled={this.disabled}>
+      <TagType
+        class={fabClasses}
+        disabled={this.disabled}
+        href={this.href}
+        onClick={this.clickedFab.bind(this)}>
         <ion-icon name='close' class='fab-button-close-icon'></ion-icon>
         <span class='button-inner'>
           <slot></slot>

packages/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx

@@ -12,7 +12,7 @@ export class InfiniteScrollContent {
   /**
    * @input {string} An animated SVG spinner that shows while loading.
    */
-  @Prop({mutable: true}) loadingSpinner: string;
+  @Prop({ mutable: true }) loadingSpinner: string;
 
   /**
    * @input {string} Optional text to display while loading.

packages/core/src/components/item-option/item-option.tsx

@@ -47,11 +47,17 @@ export class ItemOption {
   render() {
 
     const TagType = this.href ? 'a' : 'button';
+
+    // TODO TagType should wrap button-inner
     return [
-      <TagType class='item-option-button' onClick={this.clickedOptionButton.bind(this)} disabled={this.disabled}></TagType>,
+      <TagType
+        class='item-option-button'
+        disabled={this.disabled}
+        href={this.href}
+        onClick={this.clickedOptionButton.bind(this)}></TagType>,
       <span class='button-inner'>
         <slot></slot>
-       </span>
+      </span>
     ];
   }
 

packages/core/src/components/refresher-content/refresher-content.tsx

@@ -11,7 +11,7 @@ export class RefresherContent {
   /**
    * A static icon to display when you begin to pull down
    */
-  @Prop({mutable: true}) pullingIcon: string;
+  @Prop({ mutable: true }) pullingIcon: string;
 
   /**
    * The text you want to display when you begin to pull down
@@ -21,7 +21,7 @@ export class RefresherContent {
   /**
    * An animated SVG spinner that shows when refreshing begins
    */
-  @Prop({mutable: true}) refreshingSpinner: string;
+  @Prop({ mutable: true }) refreshingSpinner: string;
 
   /**
    * The text you want to display when performing a refresh