Add ability to set the label position, fix #99

demo/index.html

@@ -46,6 +46,14 @@ <h3>Toggle buttons can be checked and disabled</h3>
         </template>
       </demo-snippet>
 
+      <h3>The label position of the label can be setted</h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <paper-toggle-button>Toggle</paper-toggle-button>
+          <paper-toggle-button label-position="left">Toggle</paper-toggle-button>
+        </template>
+      </demo-snippet>
+
       <h3>Toggle buttons can hide the ripple effect using the <i>noink</i> attribute</h3>
       <demo-snippet class="centered-demo">
         <template>

paper-toggle-button.html

@@ -172,6 +172,10 @@
         color: var(--paper-toggle-button-label-color, --primary-text-color);
       }
 
+      .toggle-label.left {
+        padding: 0 var(--paper-toggle-button-label-spacing, 8px) 0 0;
+      }
+
       /* invalid state */
       :host([invalid]) .toggle-bar {
         background-color: var(--paper-toggle-button-invalid-bar-color, --error-color);
@@ -186,12 +190,18 @@
       }
     </style>
 
+    <template is="dom-if" if="[[_testLabelPosition('left', labelPosition)]]">
+      <div class="toggle-label left"><content></content></div>
+    </template>
+
     <div class="toggle-container">
       <div id="toggleBar" class="toggle-bar"></div>
       <div id="toggleButton" class="toggle-button"></div>
     </div>
 
-    <div class="toggle-label"><content></content></div>
+    <template is="dom-if" if="[[_testLabelPosition('right', labelPosition)]]">
+      <div class="toggle-label"><content></content></div>
+    </template>
 
   </template>
 
@@ -210,6 +220,13 @@
       },
 
       properties: {
+        /**
+         * The position of the label.
+         */
+        labelPosition: {
+          type: String,
+          value: 'right',
+        },
         /**
          * Fired when the checked state changes due to user interaction.
          *
@@ -274,6 +291,10 @@
         ripple.setAttribute('recenters', '');
         ripple.classList.add('circle', 'toggle-ink');
         return ripple;
+      },
+
+      _testLabelPosition(position, labelPosition) {
+        return position === labelPosition;
       }
 
     });

test/basic.html

@@ -76,6 +76,15 @@
             done();
           }, 1);
         });
+
+        test('set the label position', function(done) {
+          assert.isTrue(b1._testLabelPosition('right', b1.labelPosition));
+          assert.isFalse(b1._testLabelPosition('left', b1.labelPosition));
+          b1.labelPosition = 'left';
+          assert.isFalse(b1._testLabelPosition('right', b1.labelPosition));
+          assert.isTrue(b1._testLabelPosition('left', b1.labelPosition));
+          done();
+        });
       });
 
       suite('a11y', function() {