diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c230d49b..0f4418548 100644 --- a/CHANGELOG.md +++ b/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 + +### 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 diff --git a/demos/tabs.html b/demos/tabs.html index 7d543a38d..c818ce311 100644 --- a/demos/tabs.html +++ b/demos/tabs.html @@ -90,6 +90,41 @@ limitations under the License. +

Image Icons

+ + + + + + + + + + + + + + + + + + + + +

With Icons - Stacked

diff --git a/packages/tab/src/mwc-tab-base.ts b/packages/tab/src/mwc-tab-base.ts index e72b1cc18..ad4a0daf1 100644 --- a/packages/tab/src/mwc-tab-base.ts +++ b/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` + ${ + this.icon}`; + } + + let labelTemplate = html``; + if (this.label) { + labelTemplate = html` + ${this.label}`; + } + + const rippleDirective = ripple({ + interactionNode: this, + unbounded: false, + }); + return html` `; }