add center and stretch options to tabs

addon/components/paper-tab.js

@@ -33,11 +33,26 @@ export default Component.extend(ChildMixin, RippleMixin, FocusableMixin, {
     }
   },
 
-  didRender() {
+  didInsertElement() {
     this._super(...arguments);
     let { width } = this.element.getBoundingClientRect();
+    // this is the initial tab width
+    // it is used to calculate if we need pagination or not
+    this.set('width', width);
+  },
+
+  didRender() {
+    this._super(...arguments);
+    this.updateDimensions();
+  },
+
+  // this method is also called by the parent
+  updateDimensions() {
     let left = this.element.offsetLeft;
-    this.setProperties({ width, left });
+    // this is the true current width
+    // it is used to calculate the ink bar position
+    let currentWidth = this.element.offsetWidth;
+    this.setProperties({ left, currentWidth });
   },
 
   click() {

addon/components/paper-tabs.js

@@ -31,8 +31,8 @@ export default Component.extend(ParentMixin, ColorMixin, {
     return this.get('_selectedTab.left') || 0;
   }),
 
-  inkBarRight: computed('wrapperWidth', '_selectedTab.width', 'inkBarLeft', function() {
-    return this.get('wrapperWidth') - this.get('inkBarLeft') - (this.get('_selectedTab.width') || 0);
+  inkBarRight: computed('wrapperWidth', '_selectedTab.currentWidth', 'inkBarLeft', function() {
+    return this.get('wrapperWidth') - this.get('inkBarLeft') - (this.get('_selectedTab.currentWidth') || 0);
   }),
 
   tabsWidth: computed('childComponents.@each.width', function() {
@@ -43,6 +43,14 @@ export default Component.extend(ParentMixin, ColorMixin, {
     return this.get('tabsWidth') > this.get('canvasWidth');
   }),
 
+  shouldCenter: computed('shouldPaginate', 'center', function() {
+    return !this.get('shouldPaginate') && this.get('center');
+  }),
+
+  shouldStretch: computed('shouldPaginate', 'stretch', function() {
+    return !this.get('shouldPaginate') && this.get('stretch');
+  }),
+
   didReceiveAttrs() {
     this._super(...arguments);
     if (this.get('selected') !== this.get('previousSelected')) {
@@ -58,6 +66,7 @@ export default Component.extend(ParentMixin, ColorMixin, {
     let updateCanvasWidth = () => {
       let { width: canvasWidth } = this.element.querySelector('md-tabs-canvas').getBoundingClientRect();
       let { width: wrapperWidth } = this.element.querySelector('md-pagination-wrapper').getBoundingClientRect();
+      this.get('childComponents').invoke('updateDimensions');
       this.set('canvasWidth', canvasWidth);
       this.set('wrapperWidth', wrapperWidth);
     };
@@ -70,6 +79,7 @@ export default Component.extend(ParentMixin, ColorMixin, {
   didRender() {
     this._super(...arguments);
     this.updateCanvasWidth();
+
   },
 
   willDestroyElement() {

addon/templates/components/paper-tabs.hbs

@@ -1,4 +1,4 @@
-<md-tabs-wrapper>
+<md-tabs-wrapper class={{if shouldStretch "md-stretch-tabs"}}>
 
   {{#if shouldPaginate}}
     <md-prev-button role="button" class={{unless canPageBack "md-disabled"}} onclick={{action "previousPage"}}>
@@ -9,8 +9,8 @@
     </md-next-button>
   {{/if}}
 
-  <md-tabs-canvas class={{if shouldPaginate "md-paginated"}} tabindex="-1" role="tablist">
-    <md-pagination-wrapper style={{if shouldPaginate paginationStyle}}>
+  <md-tabs-canvas class="{{if shouldPaginate "md-paginated"}} {{if shouldCenter "md-center-tabs"}}" tabindex="-1" role="tablist">
+    <md-pagination-wrapper class={{if shouldCenter "md-center-tabs"}} style={{if shouldPaginate paginationStyle}}>
 
       {{yield (hash
         tab=(component "paper-tab"

tests/dummy/app/controllers/demo/tabs.js

@@ -9,6 +9,8 @@ const LOREM = `
 `;
 
 export default Controller.extend({
+  borderBottom: true,
+
   selectedBasicTab: 0,
 
   chapters: computed(function() {

tests/dummy/app/templates/demo/tabs.hbs

@@ -22,7 +22,9 @@
         {{#paper-content}}
           {{! BEGIN-SNIPPET basic-usage}}
           {{#paper-tabs
-            borderBottom=true
+            center=center
+            stretch=stretch
+            borderBottom=borderBottom
             selected=selectedBasicTab
             onChange=(action (mut selectedBasicTab)) as |tabs|}}
             {{#tabs.tab}}
@@ -53,6 +55,21 @@
           {{/liquid-bind}}
           {{! END-SNIPPET }}
         {{/paper-content}}
+        {{#paper-card-content}}
+
+          {{#paper-checkbox value=center onChange=(action (mut center))}}
+            Center tabs
+          {{/paper-checkbox}}
+
+          {{#paper-checkbox value=stretch onChange=(action (mut stretch))}}
+            Stretch tabs
+          {{/paper-checkbox}}
+
+          {{#paper-checkbox value=borderBottom onChange=(action (mut borderBottom))}}
+            Border bottom
+          {{/paper-checkbox}}
+
+        {{/paper-card-content}}
       </div>
       {{paper-divider}}
       {{#paper-card-content}}

tests/integration/components/paper-tabs-test.js

@@ -187,3 +187,14 @@ test('using href renders anchor tags', function(assert) {
     assert.ok(t.hasAttribute('href'));
   });
 });
+
+test('using href renders anchor tags', function(assert) {
+  this.render(hbs`
+    {{#paper-tabs center=true as |tabs|}}
+      {{tabs.tab}}
+    {{/paper-tabs}}
+  `);
+
+  assert.ok(find('md-tabs-canvas').classList.contains('md-center-tabs'));
+  assert.ok(find('md-pagination-wrapper').classList.contains('md-center-tabs'));
+});

yarn.lock

@@ -339,10 +339,6 @@ ast-types@0.8.12:
   version "0.8.12"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.8.12.tgz#a0d90e4351bb887716c83fd637ebf818af4adfcc"
 
-ast-types@0.8.15:
-  version "0.8.15"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.8.15.tgz#8eef0827f04dff0ec8857ba925abe3fea6194e52"
-
 ast-types@0.9.6:
   version "0.9.6"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.6.tgz#102c9e9e9005d3e7e3829bf0c4fa24ee862ee9b9"
@@ -3794,7 +3790,7 @@ glob-parent@^2.0.0:
   dependencies:
     is-glob "^2.0.0"
 
-glob@7.1.1:
+glob@7.1.1, glob@^7.0.4, glob@^7.0.5:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
   dependencies:
@@ -3824,7 +3820,7 @@ glob@^5.0.10, glob@^5.0.15:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.4, glob@^7.0.5, glob@^7.1.2, glob@~7.1.1:
+glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@~7.1.1:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
   dependencies:
@@ -4955,15 +4951,15 @@ minimatch@^2.0.1, minimatch@^2.0.3:
   dependencies:
     brace-expansion "^1.0.0"
 
-minimist@0.0.8:
+minimist@0.0.8, minimist@~0.0.1:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
 minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
-minimist@~0.0.1, minimist@~0.0.7, minimist@~0.0.9:
+minimist@~0.0.7, minimist@~0.0.9:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
 
@@ -5578,14 +5574,10 @@ q@^1.1.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
 
-qs@6.4.0, qs@~6.4.0:
+qs@6.4.0, qs@^6.2.0, qs@^6.4.0, qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
 
-qs@^6.2.0, qs@^6.4.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.0.tgz#8d04954d364def3efc55b5a0793e1e2c8b1e6e49"
-
 querystring-es3@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.0.tgz#c365a08a69c443accfeb3a9deab35e3f0abaa476"
@@ -5699,7 +5691,7 @@ readdirp@^2.0.0:
     readable-stream "^2.0.2"
     set-immediate-shim "^1.0.1"
 
-recast@0.10.33:
+recast@0.10.33, recast@^0.10.10:
   version "0.10.33"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.10.33.tgz#942808f7aa016f1fa7142c461d7e5704aaa8d697"
   dependencies:
@@ -5708,15 +5700,6 @@ recast@0.10.33:
     private "~0.1.5"
     source-map "~0.5.0"
 
-recast@^0.10.10:
-  version "0.10.43"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.10.43.tgz#b95d50f6d60761a5f6252e15d80678168491ce7f"
-  dependencies:
-    ast-types "0.8.15"
-    esprima-fb "~15001.1001.0-dev-harmony-fb"
-    private "~0.1.5"
-    source-map "~0.5.0"
-
 recast@^0.11.17, recast@^0.11.3:
   version "0.11.23"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
@@ -6219,13 +6202,13 @@ source-map-url@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.3.0.tgz#7ecaf13b57bcd09da8a40c5d269db33799d4aaf9"
 
-source-map@0.1.32:
+source-map@0.1.32, source-map@~0.1.31:
   version "0.1.32"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.32.tgz#c8b6c167797ba4740a8ea33252162ff08591b266"
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@0.1.34:
+source-map@0.1.34, source-map@~0.1.30, source-map@~0.1.7:
   version "0.1.34"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.34.tgz#a7cfe89aec7b1682c3b198d0acfb47d7d090566b"
   dependencies:
@@ -6241,12 +6224,6 @@ source-map@^0.5.0, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
-source-map@~0.1.30, source-map@~0.1.31, source-map@~0.1.7:
-  version "0.1.43"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
-  dependencies:
-    amdefine ">=0.0.4"
-
 source-map@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.3.0.tgz#8586fb9a5a005e5b501e21cd18b6f21b457ad1f9"
@@ -6278,11 +6255,7 @@ spdx-license-ids@^1.0.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
 
-sprintf-js@^1.0.3:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.1.tgz#36be78320afe5801f6cea3ee78b6e5aab940ea0c"
-
-sprintf-js@~1.0.2:
+sprintf-js@^1.0.3, sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"