Refactor icon-button to accept SVG or image icons #358
Conversation
| @@ -27,28 +27,36 @@ export class IconButtonBase extends BaseElement { | |||
|
|
|||
| @query('.mdc-icon-button') protected mdcRoot!: HTMLElement; | |||
|
|
|||
| @query('slot[name="offIcon"]') protected offIconSlot!: HTMLSlotElement; | |||
There was a problem hiding this comment.
There's a very annoying bug that means we can't use the HTMLSlotElement type in this position, explained here: https://github.com/material-components/material-components-web-components/blob/c8e187b2f74a62902d418b6b5963052e49e19fa0/packages/formfield/src/mwc-formfield-base.ts#L75
It means that when you compile with emitDecoratorMetadata (which we do internally), then this code breaks in IE/Edge.
| this.on = !this.on; | ||
| this.mdcFoundation.handleClick(); | ||
| } | ||
| } | ||
|
|
||
| protected calculateShouldToggle() { | ||
| this.shouldToggle = | ||
| !(this.offIcon === '' && !this.offIconSlot.assignedNodes().length); |
There was a problem hiding this comment.
Mild nitty preference for this.offIcon !== '' || this.offIconSlot.assignedNodes().length > 0 -- but your call.
| this.icon}</i> | ||
| <span class="mdc-icon-button__icon"> | ||
| <slot name="offIcon" @slotchange="${ | ||
| this.calculateShouldToggle}"><i class="material-icons">${ |
There was a problem hiding this comment.
Maybe if you add a newline before the <i> then clang won't try and split on the expression
- Add tests with SVG, fix test checks for refactoring - Add svg and image examples in demo
|
Add CHANGELOG entry? (I've been adding them to the top-level one, not sure about the status of the per-package ones). |
I added a line to the top-level changelog. |
Refactor
<mwc-icon-button>to have slots, allowing SVG and image icons.Icon must have
slot="onIcon"attribute for non-toggling buttons, and an additional Icon withslot="offIcon"for toggling buttonsExample:
TODO for PR:
Fixes #156