refactor(button): add ion-button attribute and icon attributes to sty…

…le buttons BREAKING CHANGES: - `<button>` becomes `<button ion-button>` - `<a button>` becomes `<a ion-button>` - `<button ion-item>` does not get the `ion-button` attribute - Buttons inside of `<ion-item-options>` do get the `ion-button` attribute - Removed the `category` attribute, this should be passed in `ion-button` instead. - Button attributes added for icons in buttons: `icon-only`, `icon-left`, and `icon-right` closes #7466
ionic-team · Aug 16, 2016 · 938864e · 938864e
1 parent 90929d0
commit 938864e
Show file tree

Hide file tree

Showing 179 changed files with 1,394 additions and 1,082 deletions.
diff --git a/demos/action-sheet/main.html b/demos/action-sheet/main.html
@@ -9,6 +9,6 @@
 
 <ion-content padding>
 
-  <button block (click)="present()">Basic Action Sheet</button>
+  <button ion-button block (click)="present()">Basic Action Sheet</button>
 
 </ion-content>
diff --git a/demos/alert/main.html b/demos/alert/main.html
@@ -9,10 +9,10 @@
 
 <ion-content padding>
 
-  <button block (click)="doAlert()">Basic Alert</button>
-  <button light block (click)="doConfirm()">Confirm Alert</button>
-  <button secondary block (click)="doPrompt()">Prompt Alert</button>
-  <button danger block (click)="doRadio()">Radio Alert</button>
-  <button dark block (click)="doCheckbox()">Checkbox Alert</button>
+  <button ion-button block (click)="doAlert()">Basic Alert</button>
+  <button ion-button light block (click)="doConfirm()">Confirm Alert</button>
+  <button ion-button secondary block (click)="doPrompt()">Prompt Alert</button>
+  <button ion-button danger block (click)="doRadio()">Radio Alert</button>
+  <button ion-button dark block (click)="doCheckbox()">Checkbox Alert</button>
 
 </ion-content>
diff --git a/demos/button/main.html b/demos/button/main.html
@@ -11,58 +11,58 @@
 
   <h4>Colors</h4>
 
-  <button>Default</button>
+  <button ion-button>Default</button>
 
-  <button secondary>Secondary</button>
+  <button ion-button secondary>Secondary</button>
 
-  <button danger>Danger</button>
+  <button ion-button danger>Danger</button>
 
-  <button light>Light</button>
+  <button ion-button light>Light</button>
 
-  <button dark>Dark</button>
+  <button ion-button dark>Dark</button>
 
   <h4>Shapes</h4>
 
-  <button full>Full Button</button>
+  <button ion-button full>Full Button</button>
 
-  <button block>Block Button</button>
+  <button ion-button block>Block Button</button>
 
-  <button round>Round Button</button>
+  <button ion-button round>Round Button</button>
 
-  <button fab style="position: relative;">FAB</button>
+  <button ion-button fab style="position: relative;">FAB</button>
 
   <h4>Outlines</h4>
 
-  <button secondary full outline>Outline + Full</button>
+  <button ion-button secondary full outline>Outline + Full</button>
 
-  <button secondary block outline>Outline + Block</button>
+  <button ion-button secondary block outline>Outline + Block</button>
 
-  <button secondary round outline>Outline + Round</button>
+  <button ion-button secondary round outline>Outline + Round</button>
 
-  <button secondary fab outline style="position: relative;">FAB</button>
+  <button ion-button secondary fab outline style="position: relative;">FAB</button>
 
   <h4>Icons</h4>
 
-  <button dark>
+  <button ion-button icon-left dark>
     <ion-icon name="star"></ion-icon>
     Left Icon
   </button>
 
-  <button dark>
+  <button ion-button icon-right dark>
     Right Icon
     <ion-icon name="star"></ion-icon>
   </button>
 
-  <button dark>
+  <button ion-button icon-only dark>
     <ion-icon name="star"></ion-icon>
   </button>
 
   <h4>Sizes</h4>
 
-  <button light large>Large</button>
+  <button ion-button light large>Large</button>
 
-  <button light>Default</button>
+  <button ion-button light>Default</button>
 
-  <button light small>Small</button>
+  <button ion-button light small>Small</button>
 
 </ion-content>
diff --git a/demos/config/index.ts b/demos/config/index.ts
@@ -89,18 +89,23 @@ export class ApiDemoPage {
 
     if (window.localStorage.getItem('configDemo') !== null) {
       this.config = JSON.parse(window.localStorage.getItem('configDemo'));
-    }
-    else if (platform.is('ios')) {
+    } else if (platform.is('ios')) {
       this.config = {
         'backButtonIcon': 'ios-arrow-back',
         'iconMode': 'ios',
         'tabsPlacement': 'bottom'
       };
+    } else if(platform.is('windows')) {
+      this.config = {
+        'backButtonIcon': 'ios-arrow-back',
+        'iconMode': 'ios',
+        'tabsPlacement': 'top'
+      };
     } else {
       this.config = {
         'backButtonIcon': 'md-arrow-back',
         'iconMode': 'md',
-        'tabsPlacement': 'top'
+        'tabsPlacement': 'bottom'
       };
     }
 

diff --git a/demos/config/main.html b/demos/config/main.html
@@ -41,7 +41,7 @@
   <p class="note">Note: the config will not be updated until you click the button below.</p>
 
   <div padding>
-    <button block (click)="load()">
+    <button ion-button block (click)="load()">
       Update Config
     </button>
   </div>
@@ -57,7 +57,7 @@
 });</pre>
 
   <div padding>
-    <button block secondary (click)="push()">
+    <button ion-button block secondary (click)="push()">
       Go to Another Page
     </button>
   </div>

diff --git a/demos/config/page.html b/demos/config/page.html
@@ -6,6 +6,6 @@
 
 <ion-content>
   <div padding>
-    <button block (click)="pop()">Go Back to Config</button>
+    <button ion-button block (click)="pop()">Go Back to Config</button>
   </div>
 </ion-content>
diff --git a/demos/events/login.html b/demos/events/login.html
@@ -1,7 +1,7 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
 
@@ -30,8 +30,8 @@ <h3 margin-left>Login</h3>
   </ion-list>
 
   <div padding>
-    <button block (click)="login()">Login</button>
-    <button block secondary menuToggle>Toggle Menu</button>
+    <button ion-button block (click)="login()">Login</button>
+    <button ion-button block secondary menuToggle>Toggle Menu</button>
   </div>
 
 </ion-content>
diff --git a/demos/events/logout.html b/demos/events/logout.html
@@ -1,7 +1,7 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
 
@@ -17,7 +17,7 @@ <h3 margin-left>Logout</h3>
   <p margin>Click the logout button to logout. Then, toggle the menu to see the menu items change.</p>
 
   <div padding>
-    <button block (click)="logout()">Logout</button>
-    <button block secondary menuToggle>Toggle Menu</button>
+    <button ion-button block (click)="logout()">Logout</button>
+    <button ion-button block secondary menuToggle>Toggle Menu</button>
   </div>
 </ion-content>
diff --git a/demos/item-reorder/main.html b/demos/item-reorder/main.html
@@ -3,7 +3,7 @@
   <ion-navbar>
     <ion-title>Item Reorder</ion-title>
     <ion-buttons end>
-      <button (click)="toggleEdit()">{{editButton}}</button>
+      <button ion-button (click)="toggleEdit()">{{editButton}}</button>
     </ion-buttons>
   </ion-navbar>
 

diff --git a/demos/item-sliding/main.html b/demos/item-sliding/main.html
@@ -27,22 +27,22 @@ <h2>{{chat.name}}</h2>
       </ion-item>
 
       <ion-item-options>
-        <button secondary (click)="more(item)">
+        <button ion-button secondary (click)="more(item)">
           <ion-icon name="menu"></ion-icon>
           More
         </button>
-        <button dark (click)="mute(item)">
+        <button ion-button dark (click)="mute(item)">
           <ion-icon name="volume-off"></ion-icon>
           Mute
         </button>
-        <button danger (click)="delete(item)">
+        <button ion-button danger (click)="delete(item)">
           <ion-icon name="trash"></ion-icon>
           Delete
         </button>
       </ion-item-options>
 
       <ion-item-options side="left" (ionSwipe)="archive(item)">
-        <button primary expandable (click)="archive(item)">
+        <button ion-button primary expandable (click)="archive(item)">
           <ion-icon name="archive" class="expand-hide"></ion-icon>
           <div class="expand-hide">Archive</div>
           <ion-spinner id="archive-spinner"></ion-spinner>
@@ -63,16 +63,16 @@ <h2>{{login.name}}</h2>
         <p>{{login.username}}</p>
       </ion-item>
       <ion-item-options side="left">
-        <button danger>
+        <button ion-button danger>
           <ion-icon name="trash"></ion-icon>
         </button>
       </ion-item-options>
-      <ion-item-options (ionSwipe)="download(item)">
-        <button dark (click)="more(item)">
+      <ion-item-options (ionSwipe)="download(item)" icon-left>
+        <button ion-button dark (click)="more(item)">
           <ion-icon name="volume-off"></ion-icon>
           Mute
         </button>
-        <button light expandable (click)="download(item)">
+        <button ion-button light expandable (click)="download(item)">
           <ion-icon name="download" class="expand-hide"></ion-icon>
           <div class="expand-hide">Download</div>
           <ion-spinner id="download-spinner"></ion-spinner>

diff --git a/demos/item/main.html b/demos/item/main.html
@@ -12,7 +12,7 @@
   <ion-list>
     <ion-list-header>
       Settings
-      <button item-right clear>
+      <button ion-button icon-only item-right clear>
         <ion-icon name="cog"></ion-icon>
       </button>
     </ion-list-header>
@@ -39,7 +39,7 @@
 
     <ion-item-divider primary>
       Other Settings
-      <button item-right outline light>Clear</button>
+      <button ion-button item-right outline light>Clear</button>
     </ion-item-divider>
 
     <button ion-item>
@@ -78,22 +78,22 @@
     <ion-item>
       <ion-icon name="ionic" item-left primary></ion-icon>
       <ion-label>Ionic View</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
     <ion-item>
       <ion-icon name="brush" item-left primary></ion-icon>
       <ion-label>Ionic Creator</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
     <ion-item>
       <ion-icon name="logo-octocat" item-left dark></ion-icon>
       <ion-label>Hubstruck</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
     <ion-item>
       <ion-icon name="paw" item-left danger></ion-icon>
       <ion-label>Barkpark</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
   </ion-list>
 

diff --git a/demos/list/main.html b/demos/list/main.html
@@ -67,22 +67,22 @@
     <ion-item>
       <ion-icon name="ionic" item-left primary></ion-icon>
       <ion-label>Ionic View</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
     <ion-item>
       <ion-icon name="brush" item-left primary></ion-icon>
       <ion-label>Ionic Creator</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
     <ion-item>
       <ion-icon name="logo-octocat" item-left dark></ion-icon>
       <ion-label>Hubstruck</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
     <ion-item>
       <ion-icon name="paw" item-left danger></ion-icon>
       <ion-label>Barkpark</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
   </ion-list>
 

diff --git a/demos/loading/main.html b/demos/loading/main.html
@@ -58,7 +58,7 @@
 
   <ion-toolbar>
     <ion-buttons end>
-      <button (click)="goToPage2()">
+      <button ion-button icon-right (click)="goToPage2()">
         Show Loading and Navigate
         <ion-icon name="arrow-forward"></ion-icon>
       </button>

diff --git a/demos/local-storage/main.html b/demos/local-storage/main.html
@@ -33,7 +33,7 @@
   </ion-list>
 
   <div padding>
-    <button block secondary (click)="set()">
+    <button ion-button icon-left block secondary (click)="set()">
       <ion-icon name="add"></ion-icon>
       Add
     </button>
@@ -54,7 +54,7 @@
   </ion-list>
 
   <div padding>
-    <button block danger (click)="remove()">
+    <button ion-button icon-left block danger (click)="remove()">
       <ion-icon name="remove"></ion-icon>
       Delete
     </button>

diff --git a/demos/menu/main.html b/demos/menu/main.html
@@ -1,7 +1,7 @@
 <ion-header>
 
   <ion-navbar>
-    <button [menuToggle]="activeMenu">
+    <button ion-button [menuToggle]="activeMenu">
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>
@@ -18,10 +18,10 @@ <h4>Active Menu: <b primary>{{ (activeMenu == 'menu1') ? 'Menu 1' : 'Menu 2' }}<
 
   <p>This page has two menus with different id's, but only one is active at a time.</p>
 
-  <button block secondary (click)="menu1Active()">Make Menu 1 Active</button>
+  <button ion-button block secondary (click)="menu1Active()">Make Menu 1 Active</button>
 
-  <button block danger (click)="menu2Active()">Make Menu 2 Active</button>
+  <button ion-button block danger (click)="menu2Active()">Make Menu 2 Active</button>
 
-  <button block [menuToggle]="activeMenu">Toggle Menu</button>
+  <button ion-button block [menuToggle]="activeMenu">Toggle Menu</button>
 
 </ion-content>
diff --git a/demos/modal/main.html b/demos/modal/main.html
@@ -10,7 +10,7 @@
 <ion-content>
 
   <div padding>
-    <button block (click)="openBasicModal()">Open Basic Modal</button>
+    <button ion-button block (click)="openBasicModal()">Open Basic Modal</button>
   </div>
 
   <ion-list no-margin>
@@ -31,7 +31,7 @@
   </ion-list>
 
   <div padding>
-    <button block danger (click)="openModalWithParams()">Open with Parameters</button>
+    <button ion-button block danger (click)="openModalWithParams()">Open with Parameters</button>
   </div>
 
 </ion-content>