update(tabs): renamed md-tab-template to md-tab-body to be more c…

…lear

BREAKING CHANGE: When using `md-tab-label`, the content of your tab **must** be wrapped in `md-tab-body`

src/components/tabs/demoStaticTabs/index.html

@@ -3,24 +3,24 @@
     <md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}">
       <md-tab id="tab1">
         <md-tab-label>Item One</md-tab-label>
-        <md-tab-template>
+        <md-tab-body>
           View for Item #1 <br/>
           data.selectedIndex = 0;
-        </md-tab-template>
+        </md-tab-body>
       </md-tab>
       <md-tab id="tab2" ng-disabled="data.secondLocked">
         <md-tab-label>{{data.secondLabel}}</md-tab-label>
-        <md-tab-template>
+        <md-tab-body>
           View for Item #2 <br/>
           data.selectedIndex = 1;
-        </md-tab-template>
+        </md-tab-body>
       </md-tab>
       <md-tab id="tab3">
         <md-tab-label>Item Three</md-tab-label>
-        <md-tab-template>
+        <md-tab-body>
           View for Item #3 <br/>
           data.selectedIndex = 2;
-        </md-tab-template>
+        </md-tab-body>
       </md-tab>
     </md-tabs>
   </md-content>

src/components/tabs/js/tabDirective.js

@@ -12,6 +12,9 @@
  * complex tab header markup. If neither the **label** nor the **md-tab-label** are specified, then the nested
  * markup of the `<md-tab>` is used as the tab header markup.
  *
+ * Please note that if you use `<md-tab-label>`, your content **MUST** be wrapped in the `<md-tab-body>` tag.  This
+ * is to define a clear separation between the tab content and the tab label.
+ *
  * If a tab **label** has been identified, then any **non-**`<md-tab-label>` markup
  * will be considered tab content and will be transcluded to the internal `<div class="md-tabs-content">` container.
  *
@@ -36,12 +39,14 @@
  *   <md-tab-label>
  *     <h3>My Tab content</h3>
  *   </md-tab-label>
- *   <p>
- *     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
- *     totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
- *     dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
- *     sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
- *   </p>
+ *   <md-tab-body>
+ *     <p>
+ *       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
+ *       totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
+ *       dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+ *       sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+ *     </p>
+ *   </md-tab-body>
  * </md-tab>
  * </hljs>
  *
@@ -102,7 +107,7 @@
       }
 
       function getTemplate () {
-        var content = element.find('md-tab-template'),
+        var content = element.find('md-tab-body'),
             template = content.length ? content.html() : attr.label ? element.html() : null;
         if (content.length) content.remove();
         else if (attr.label) element.empty();

src/components/tabs/js/tabsDirective.js

@@ -73,9 +73,9 @@
  *       {{tab.title}}
  *       <img src="img/removeTab.png" ng-click="removeTab(tab)" class="delete">
  *     </md-tab-label>
- *     <md-tab-template>
+ *     <md-tab-body>
  *       {{tab.content}}
- *     </md-tab-template>
+ *     </md-tab-body>
  *   </md-tab>
  * </md-tabs>
  * </hljs>

src/components/tabs/tabs.spec.js

@@ -245,7 +245,7 @@ describe('<md-tabs>', function() {
       var tabs2 = setup('<md-tabs>\
         <md-tab>\
           <md-tab-label>label that!</md-tab-label>\
-          <md-tab-template><b>content</b> that!</md-tab-template>\
+          <md-tab-body><b>content</b> that!</md-tab-body>\
         </md-tab>\
       </md-tabs>');
       expect(tabs1.find('md-tab-item').text()).toBe('label that!');