refactor(anchor): remove anchor in favor of router-link (#18935)

BREAKING CHANGES The deprecated `ion-anchor` component has been removed in favor using `ion-router-link`. It should still only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an `<a>` and `routerLink` with the Angular router.
ionic-team · Oct 9, 2019 · 0783803 · 0783803
1 parent 3b82946
commit 0783803
Show file tree

Hide file tree

Showing 10 changed files with 2 additions and 319 deletions.
diff --git a/core/api.txt b/core/api.txt
@@ -70,14 +70,6 @@ ion-alert-controller,method,create,create(options: AlertOptions) => Promise<HTML
 ion-alert-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-alert-controller,method,getTop,getTop() => Promise<HTMLIonAlertElement | undefined>
 
-ion-anchor,shadow
-ion-anchor,prop,color,string | undefined,undefined,false,false
-ion-anchor,prop,href,string | undefined,undefined,false,false
-ion-anchor,prop,rel,string | undefined,undefined,false,false
-ion-anchor,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
-ion-anchor,css-prop,--background
-ion-anchor,css-prop,--color
-
 ion-app,none
 
 ion-avatar,shadow

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -253,24 +253,6 @@ export namespace Components {
     */
     'getTop': () => Promise<HTMLIonAlertElement | undefined>;
   }
-  interface IonAnchor {
-    /**
-    * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
-    */
-    'color'?: Color;
-    /**
-    * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
-    */
-    'href': string | undefined;
-    /**
-    * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
-    */
-    'rel': string | undefined;
-    /**
-    * When using a router, it specifies the transition direction when navigating to another page using `href`.
-    */
-    'routerDirection': RouterDirection;
-  }
   interface IonApp {}
   interface IonAvatar {}
   interface IonBackButton {
@@ -2908,12 +2890,6 @@ declare global {
     new (): HTMLIonAlertControllerElement;
   };
 
-  interface HTMLIonAnchorElement extends Components.IonAnchor, HTMLStencilElement {}
-  var HTMLIonAnchorElement: {
-    prototype: HTMLIonAnchorElement;
-    new (): HTMLIonAnchorElement;
-  };
-
   interface HTMLIonAppElement extends Components.IonApp, HTMLStencilElement {}
   var HTMLIonAppElement: {
     prototype: HTMLIonAppElement;
@@ -3464,7 +3440,6 @@ declare global {
     'ion-action-sheet-controller': HTMLIonActionSheetControllerElement;
     'ion-alert': HTMLIonAlertElement;
     'ion-alert-controller': HTMLIonAlertControllerElement;
-    'ion-anchor': HTMLIonAnchorElement;
     'ion-app': HTMLIonAppElement;
     'ion-avatar': HTMLIonAvatarElement;
     'ion-back-button': HTMLIonBackButtonElement;
@@ -3694,24 +3669,6 @@ declare namespace LocalJSX {
     'translucent'?: boolean;
   }
   interface IonAlertController {}
-  interface IonAnchor {
-    /**
-    * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
-    */
-    'color'?: Color;
-    /**
-    * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
-    */
-    'href'?: string | undefined;
-    /**
-    * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
-    */
-    'rel'?: string | undefined;
-    /**
-    * When using a router, it specifies the transition direction when navigating to another page using `href`.
-    */
-    'routerDirection'?: RouterDirection;
-  }
   interface IonApp {}
   interface IonAvatar {}
   interface IonBackButton {
@@ -6135,7 +6092,6 @@ declare namespace LocalJSX {
     'ion-action-sheet-controller': IonActionSheetController;
     'ion-alert': IonAlert;
     'ion-alert-controller': IonAlertController;
-    'ion-anchor': IonAnchor;
     'ion-app': IonApp;
     'ion-avatar': IonAvatar;
     'ion-back-button': IonBackButton;
@@ -6240,7 +6196,6 @@ declare module "@stencil/core" {
       'ion-action-sheet-controller': LocalJSX.IonActionSheetController & JSXBase.HTMLAttributes<HTMLIonActionSheetControllerElement>;
       'ion-alert': LocalJSX.IonAlert & JSXBase.HTMLAttributes<HTMLIonAlertElement>;
       'ion-alert-controller': LocalJSX.IonAlertController & JSXBase.HTMLAttributes<HTMLIonAlertControllerElement>;
-      'ion-anchor': LocalJSX.IonAnchor & JSXBase.HTMLAttributes<HTMLIonAnchorElement>;
       'ion-app': LocalJSX.IonApp & JSXBase.HTMLAttributes<HTMLIonAppElement>;
       'ion-avatar': LocalJSX.IonAvatar & JSXBase.HTMLAttributes<HTMLIonAvatarElement>;
       'ion-back-button': LocalJSX.IonBackButton & JSXBase.HTMLAttributes<HTMLIonBackButtonElement>;

diff --git a/core/src/components/anchor/anchor.scss b/core/src/components/anchor/anchor.scss
diff --git a/core/src/components/anchor/anchor.tsx b/core/src/components/anchor/anchor.tsx
diff --git a/core/src/components/anchor/readme.md b/core/src/components/anchor/readme.md
diff --git a/core/src/components/anchor/test/basic/index.html b/core/src/components/anchor/test/basic/index.html
diff --git a/core/src/components/anchor/test/standalone/index.html b/core/src/components/anchor/test/standalone/index.html
diff --git a/core/src/utils/test/modes/e2e.ts b/core/src/utils/test/modes/e2e.ts
@@ -50,7 +50,7 @@ test('component: modes', async () => {
   // components that need to have the mode class
   // added for external / user styling
   // e.g. <ion-badge class="md">
-  tags = ['ion-action-sheet', 'ion-alert', 'ion-anchor', 'ion-app', 'ion-avatar', 'ion-back-button', 'ion-backdrop', 'ion-badge', 'ion-button', 'ion-buttons', 'ion-card-content', 'ion-card-header', 'ion-card-subtitle', 'ion-card-title', 'ion-card', 'ion-checkbox', 'ion-chip', 'ion-col', 'ion-content', 'ion-datetime', 'ion-fab', 'ion-fab-button', 'ion-fab-list', 'ion-footer', 'ion-grid', 'ion-header', 'ion-icon', 'ion-img', 'ion-infinite-scroll', 'ion-infinite-scroll-content', 'ion-input', 'ion-item', 'ion-item-divider', 'ion-item-group', 'ion-item-option', 'ion-item-options', 'ion-item-sliding', 'ion-label', 'ion-list', 'ion-list-header', 'ion-loading', 'ion-modal', 'ion-menu', 'ion-menu-button', 'ion-menu-toggle', 'ion-note', 'ion-picker', 'ion-picker-column', 'ion-popover', 'ion-progress-bar', 'ion-radio', 'ion-radio-group', 'ion-range', 'ion-refresher', 'ion-refresher-content', 'ion-reorder', 'ion-reorder-group', 'ion-ripple-effect', 'ion-row', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-select-option', 'ion-select-popover', 'ion-skeleton-text', 'ion-slide', 'ion-slides', 'ion-spinner', 'ion-split-pane', 'ion-tab-bar', 'ion-tab-button', 'ion-text', 'ion-textarea', 'ion-thumbnail', 'ion-title', 'ion-toast', 'ion-toggle', 'ion-toolbar'];
+  tags = ['ion-action-sheet', 'ion-alert', 'ion-app', 'ion-avatar', 'ion-back-button', 'ion-backdrop', 'ion-badge', 'ion-button', 'ion-buttons', 'ion-card-content', 'ion-card-header', 'ion-card-subtitle', 'ion-card-title', 'ion-card', 'ion-checkbox', 'ion-chip', 'ion-col', 'ion-content', 'ion-datetime', 'ion-fab', 'ion-fab-button', 'ion-fab-list', 'ion-footer', 'ion-grid', 'ion-header', 'ion-icon', 'ion-img', 'ion-infinite-scroll', 'ion-infinite-scroll-content', 'ion-input', 'ion-item', 'ion-item-divider', 'ion-item-group', 'ion-item-option', 'ion-item-options', 'ion-item-sliding', 'ion-label', 'ion-list', 'ion-list-header', 'ion-loading', 'ion-modal', 'ion-menu', 'ion-menu-button', 'ion-menu-toggle', 'ion-note', 'ion-picker', 'ion-picker-column', 'ion-popover', 'ion-progress-bar', 'ion-radio', 'ion-radio-group', 'ion-range', 'ion-refresher', 'ion-refresher-content', 'ion-reorder', 'ion-reorder-group', 'ion-ripple-effect', 'ion-router-link', 'ion-row', 'ion-searchbar', 'ion-segment', 'ion-segment-button', 'ion-select', 'ion-select-option', 'ion-select-popover', 'ion-skeleton-text', 'ion-slide', 'ion-slides', 'ion-spinner', 'ion-split-pane', 'ion-tab-bar', 'ion-tab-button', 'ion-text', 'ion-textarea', 'ion-thumbnail', 'ion-title', 'ion-toast', 'ion-toggle', 'ion-toolbar'];
 
   const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode'));
   for (const tag of tags) {

diff --git a/core/src/utils/test/modes/index.html b/core/src/utils/test/modes/index.html
@@ -33,7 +33,6 @@
         <ion-content>
           <ion-action-sheet></ion-action-sheet>
           <ion-alert></ion-alert>
-          <ion-anchor></ion-anchor>
           <ion-avatar></ion-avatar>
           <ion-backdrop></ion-backdrop>
           <ion-badge></ion-badge>
@@ -85,6 +84,7 @@
           <ion-reorder-group></ion-reorder-group>
           <ion-reorder></ion-reorder>
           <ion-ripple-effect></ion-ripple-effect>
+          <ion-router-link></ion-router-link>
           <ion-row></ion-row>
           <ion-searchbar></ion-searchbar>
           <ion-segment-button></ion-segment-button>