Merge pull request #671 from material-components:mwc-tab-styles

PiperOrigin-RevId: 283652556

CHANGELOG.md

@@ -4,7 +4,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Fixed
+
+- **BREAKING:VISUAL** `mwc-tab` will now automatically size slotted images. Also
+  slotted image will override icon font.
+
+### Changed
+
+- **BREAKING** `mwc-tab` can now only have slotted content via the
+  `hasImageIcon` flag.
+
 ## [0.11.1] - 2019-11-26
 
 ### Fixed

demos/tabs.html

@@ -90,6 +90,41 @@ limitations under the License.
       <mwc-tab icon="camera"></mwc-tab>
     </mwc-tab-bar>
 
+    <h3>Image Icons</h3>
+    <mwc-tab-bar activeIndex="2">
+      <mwc-tab hasImageIcon>
+        <svg width="10px" height="10px">
+          <circle
+              r="5px"
+              cx="5px"
+              cy="5px"
+              color="red">
+          </circle>
+        </svg>
+      </mwc-tab>
+      <mwc-tab hasImageIcon>
+        <svg width="10px" height="10px">
+          <rect
+              width="10px"
+              height="10px"
+              color="green">
+          </rect>
+        </svg>
+      </mwc-tab>
+      <mwc-tab hasImageIcon>
+        <svg width="14.143px" height="14.143px">
+          <rect
+              width="10px"
+              height="10px"
+              color="blue"
+              y="2.071px"
+              x="2.071px"
+              style="transform:rotate(45deg);transform-origin:center;">
+          </rect>
+        </svg>
+      </mwc-tab>
+    </mwc-tab-bar>
+
     <h3>With Icons - Stacked</h3>
     <mwc-tab-bar activeIndex="1">
       <mwc-tab label="one" icon="accessibility" stacked></mwc-tab>

packages/tab/src/mwc-tab-base.ts

@@ -43,6 +43,8 @@ export class TabBase extends BaseElement {
 
   @property() icon = '';
 
+  @property({type: Boolean}) hasImageIcon = false;
+
   @property({type: Boolean}) isFadingIndicator = false;
 
   @property({type: Boolean}) minWidth = false;
@@ -90,6 +92,27 @@ export class TabBase extends BaseElement {
       'mdc-tab--min-width': this.minWidth,
       'mdc-tab--stacked': this.stacked,
     };
+
+    let iconTemplate = html``;
+    if (this.hasImageIcon || this.icon) {
+      // NOTE: MUST be on same line as spaces will cause vert alignment issues
+      // in IE
+      iconTemplate = html`
+        <span class="mdc-tab__icon material-icons"><slot>${
+          this.icon}</slot></span>`;
+    }
+
+    let labelTemplate = html``;
+    if (this.label) {
+      labelTemplate = html`
+        <span class="mdc-tab__text-label">${this.label}</span>`;
+    }
+
+    const rippleDirective = ripple({
+      interactionNode: this,
+      unbounded: false,
+    });
+
     return html`
       <button
         @click="${this._handleClick}"
@@ -98,22 +121,12 @@ export class TabBase extends BaseElement {
         aria-selected="false"
         tabindex="-1">
         <span class="mdc-tab__content">
-          <slot></slot>
-          ${
-        this.icon ? html`
-          <span class="mdc-tab__icon material-icons">${this.icon}</span>` :
-                    ''}
-          ${
-        this.label ? html`
-          <span class="mdc-tab__text-label">${this.label}</span>` :
-                     ''}
+          ${iconTemplate}
+          ${labelTemplate}
           ${this.isMinWidthIndicator ? this.renderIndicator() : ''}
         </span>
         ${this.isMinWidthIndicator ? '' : this.renderIndicator()}
-        <span class="mdc-tab__ripple" .ripple="${ripple({
-      interactionNode: this,
-      unbounded: false
-    })}"></span>
+        <span class="mdc-tab__ripple" .ripple="${rippleDirective}"></span>
       </button>`;
   }