Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

feat(icon-button): Add SVG support #3310

Merged
merged 8 commits into from
Aug 9, 2018
Merged

feat(icon-button): Add SVG support #3310

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c4799bc
feat(icon-button): Add svg support
williamernest Aug 7, 2018
fe86346
Merge branch 'master' into feat/icon-button/svg-support
williamernest Aug 7, 2018
b18cfba
feat(icon-button): Add img demo to demo/readme. Update golden
williamernest Aug 7, 2018
ff8e432
feat(icon-button): Update golden
williamernest Aug 7, 2018
ceaa86a
feat(icon-button): Update for comments
williamernest Aug 8, 2018
49eba69
feat(icon-button): Update for comments
williamernest Aug 9, 2018
4cb157c
feat(icon-button): Update tests
williamernest Aug 9, 2018
0d1146c
Merge branch 'master' into feat/icon-button/svg-support
williamernest Aug 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 16 additions & 19 deletions demos/card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,13 @@ <h3 class="demo-card__subtitle mdc-typography--subtitle2">by Kurt Wagner</h3>
<button class="mdc-button mdc-card__action mdc-card__action--button">Bookmark</button>
</div>
<div class="mdc-card__action-icons">
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
<button class="mdc-icon-button mdc-card__action mdc-card__action--icon"
aria-pressed="false"
aria-label="Add to favorites"
title="Add to favorites"
data-toggle-on-content="favorite"
data-toggle-on-label="Remove from favorites"
data-toggle-off-content="favorite_border"
data-toggle-off-label="Add to favorites">favorite_border</button>
title="Add to favorites" data-demo-toggle>
<i class="material-icons mdc-icon-button__icon" data-toggle-on>favorite</i>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that we need to select on this data attribute in CSS, it might make sense to make it a class instead (e.g. mdc-icon-button__icon--on?) - attribute selectors perform a lot slower in IE and Edge.

<i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
data-mdc-ripple-is-unbounded
title="Share">share</button>
Expand Down Expand Up @@ -146,22 +145,20 @@ <h2 class="demo-card-article__title mdc-typography--headline5">Asia's clean ener
</div>
</a>
<div class="mdc-card__actions mdc-card__action-icons">
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
<button class="mdc-icon-button mdc-card__action mdc-card__action--icon"
aria-pressed="false"
aria-label="Add to favorites"
title="Add to favorites"
data-toggle-on-content="favorite"
data-toggle-on-label="Remove from favorites"
data-toggle-off-content="favorite_border"
data-toggle-off-label="Add to favorites">favorite_border</button>
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
title="Add to favorites" data-demo-toggle>
<i class="material-icons mdc-icon-button__icon" data-toggle-on>favorite</i>
<i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>
<button class="mdc-icon-button mdc-card__action mdc-card__action--icon"
aria-pressed="false"
aria-label="Add bookmark"
title="Add bookmark"
data-toggle-on-content="bookmark"
data-toggle-on-label="Remove bookmark"
data-toggle-off-content="bookmark_border"
data-toggle-off-label="Add bookmark">bookmark_border</button>
title="Add bookmark" data-demo-toggle>
<i class="material-icons mdc-icon-button__icon" data-toggle-on>bookmark</i>
<i class="material-icons mdc-icon-button__icon">bookmark_border</i>
</button>
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
data-mdc-ripple-is-unbounded
title="Share">share</button>
Expand Down Expand Up @@ -233,7 +230,7 @@ <h2 class="demo-card-article__title mdc-typography--headline5">Asia's clean ener
mdc.ripple.MDCRipple.attachTo(surface);
});

[].forEach.call(document.querySelectorAll('.mdc-icon-button[data-toggle-on-content]'), function(iconButtonToggle) {
[].forEach.call(document.querySelectorAll('.mdc-icon-button[data-demo-toggle]'), function(iconButtonToggle) {
mdc.iconButton.MDCIconButtonToggle.attachTo(iconButtonToggle);
});

Expand Down
447 changes: 235 additions & 212 deletions demos/icon-button.html
View file
Open in desktop

Large diffs are not rendered by default.

34 changes: 15 additions & 19 deletions demos/theme/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,14 +327,13 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
<button class="mdc-button mdc-card__action mdc-card__action--button">Bookmark</button>
</div>
<div class="mdc-card__action-icons">
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
<button class="mdc-icon-button mdc-card__action mdc-card__action--icon"
aria-pressed="false"
aria-label="Add to favorites"
title="Add to favorites"
data-toggle-on-content="favorite"
data-toggle-on-label="Remove from favorites"
data-toggle-off-content="favorite_border"
data-toggle-off-label="Add to favorites">favorite_border</button>
title="Add to favorites" data-demo-toggle>
<i class="material-icons mdc-icon-button__icon" data-toggle-on>favorite</i>
<i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
data-mdc-ripple-is-unbounded
title="Share">share</button>
Expand Down Expand Up @@ -496,26 +495,23 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
<div class="mdc-elevation--z2 demo-icon-toggle-tile">
<h4 class="mdc-typography--subtitle1">Enabled</h4>

<button class="mdc-icon-button material-icons"
<button class="mdc-icon-button"
aria-label="Add to favorites"
aria-pressed="false"
data-toggle-on-content="favorite"
data-toggle-on-label="Remove from favorites"
data-toggle-off-content="favorite_border"
data-toggle-off-label="Add to favorites">favorite_border</button>
aria-pressed="false" data-demo-toggle>
<i class="material-icons mdc-icon-button__icon" data-toggle-on>favorite</i>
<i class="material-icons mdc-icon-button__icon">favorite_border</i></button>
</div>

<div class="mdc-elevation--z2 demo-icon-toggle-tile">
<h4 class="mdc-typography--subtitle1">Disabled</h4>

<button class="mdc-icon-button material-icons"
<button class="mdc-icon-button"
aria-label="Add to favorites"
aria-pressed="false"
disabled
data-toggle-on-content="favorite"
data-toggle-on-label="Remove from favorites"
data-toggle-off-content="favorite_border"
data-toggle-off-label="Add to favorites">favorite_border</button>
disabled data-demo-toggle>
<i class="material-icons mdc-icon-button__icon" data-toggle-on>favorite</i>
<i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>
</div>
</div>
</section>
Expand Down Expand Up @@ -893,7 +889,7 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
* Icon Toggle
*/

[].forEach.call(document.querySelectorAll('.mdc-icon-button[data-toggle-on-content]'), function(iconButtonToggleEl) {
[].forEach.call(document.querySelectorAll('.mdc-icon-button[data-demo-toggle]'), function(iconButtonToggleEl) {
mdc.iconButton.MDCIconButtonToggle.attachTo(iconButtonToggleEl);
});

Expand Down
12 changes: 6 additions & 6 deletions packages/material-components-web/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,13 @@ For example, say you want to use an [icon button toogle](../mdc-icon-button). Si
DOM, and attach the `data-mdc-auto-init="MDCIconButtonToggle"` attribute.

```html
<button class="mdc-icon-button material-icons"
<button class="mdc-icon-button"
aria-label="Add to favorites"
data-toggle-on-content="favorite"
data-toggle-on-label="Remove from favorites"
data-toggle-off-content="favorite_border"
data-toggle-off-label="Add to favorites"
data-mdc-auto-init="MDCIconButtonToggle">favorite_border</i>
aria-pressed="false"
data-mdc-auto-init="MDCIconButtonToggle">
<i class="material-icons mdc-icon-button__icon" data-toggle-on>favorite</i>
<i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>
```

Then at the bottom of your html, insert this one-line script tag:
Expand Down
11 changes: 5 additions & 6 deletions packages/mdc-card/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,14 +121,13 @@ above, or with icon buttons, as below:

```html
<div class="mdc-card__actions">
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
<button class="mdc-icon-button mdc-card__action mdc-card__action--icon"
aria-pressed="false"
aria-label="Add to favorites"
title="Add to favorites"
data-toggle-on-content="favorite"
data-toggle-on-label="Remove from favorites"
data-toggle-off-content="favorite_border"
data-toggle-off-label="Add to favorites">favorite_border</button>
title="Add to favorites">
<i class="material-icons mdc-icon-button__icon" data-toggle-on>favorite</i>
<i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>
<button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="Share">share</button>
<button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="More options">more_vert</button>
</div>
Expand Down
75 changes: 46 additions & 29 deletions packages/mdc-icon-button/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,19 +70,20 @@ iconButtonRipple.unbounded = true;

### Icon Button Toggle

The icon button can be used to toggle between an on and off icon. To style an icon button as an icon button toggle, add the
`data-toggle-on` and `data-toggle-off` attributes to the `mdc-icon-button` element. Then instantiate an `MDCIconButtonToggle` on the root element.
The icon button can be used to toggle between an on and off icon. To style an icon button as an icon button toggle, add
both icons as child elements and place the `data-toggle-on` attribute on the icon that should be on. If the button
should be initialized in the "on" state, then add the `mdc-icon-button--on` class to the parent `button`. Then
instantiate an `MDCIconButtonToggle` on the root element.

```html
<button id="add-to-favorites"
class="mdc-icon-button material-icons"
class="mdc-icon-button"
aria-label="Add to favorites"
aria-hidden="true"
aria-pressed="false"
data-toggle-on-content="favorite"
data-toggle-on-label="Remove from favorites"
data-toggle-off-content="favorite_border"
data-toggle-off-label="Add to favorites">favorite_border</button>
aria-pressed="false">
<i class="material-icons mdc-icon-button__icon">favorite</i>
<i class="material-icons mdc-icon-button__icon" data-toggle-on>favorite_border</i>
</button>
```

```js
Expand All @@ -91,38 +92,54 @@ var toggleButton = new mdc.iconButton.MDCIconButtonToggle(document.getElementByI

#### Icon Button Toggle States

Note the use of `data-toggle-*` properties in the above examples. When an MDCIconButtonToggle
instance is toggled, it looks at these data attributes to determine how to update the element. This is what
allows MDCIconButtonToggle to be so flexible. The `data-toggle-on-*` properties will be used when the is
MDCIconButtonToggle is toggled on, and vice versa for `data-toggle-off-*`.
Note the use of `data-toggle-on` attribute in the above examples. This attribute indicates which element is the
on element. When the `mdc-icon-button--on` class is present, the element with the `data-toggle-on` attribute
will be shown and the other element will be hidden. When the `mdc-icon-button--on` class is not present, the element
with the `data-toggle-on` attribute will be hidden and the other element will beshown. This is what allows
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

beshown -> be shown

MDCIconButtonToggle to be so flexible.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"This is what allows MDCIconButtonToggle to be so flexible." -> "This structure allows MDCIconButton to be flexible enough to support both icon fonts and images/SVGs."


Attribute | Description
--- | ---
`data-toggle-<TOGGLE STATE>-label` | The value to apply to the element's "aria-label" attribute.
`data-toggle-<TOGGLE STATE>-content` | The text content to set on the element. Note that if an inner icon is used, the text content will be set on that element instead.
`data-toggle-<TOGGLE STATE>-class` | A CSS class to apply to the icon element. The same rules regarding inner icon elements described for `content` apply here as well.
`data-toggle-on` | Used to indicate which element in an icon button toggle is the `on` value.

#### Icon Button Toggle with Font Awesome
#### Icon Button Toggle with SVG

The icon button toggle can be used with other font libraries such as Font Awesome that use an inner icon element.
The icon button toggle can be used with SVGs.

```html
<button id="star-this-item"
class="mdc-icon-button"
class="mdc-icon-button mdc-icon-button--on"
aria-label="Unstar this item"
aria-hidden="true"
aria-pressed="true">
<svg class="mdc-icon-button__icon">
...
</svg>
<svg class="mdc-icon-button__icon" data-toggle-on>
...
</svg>
</button>
```

#### Icon Button Toggle with an Image

The icon button toggle can be used with `img` tags.

```html
<button id="star-this-item"
class="mdc-icon-button mdc-icon-button--on"
aria-label="Unstar this item"
aria-hidden="true"
aria-pressed="true"
data-toggle-on-class="fa-star"
data-toggle-on-label="Unstar this item"
data-toggle-off-class="fa-star-o"
data-toggle-off-label="Star this item"><i class="fa fa-2x fa-star"></i></button>
aria-pressed="true">
<img src="" class="mdc-icon-button__icon"/>
<img src="" class="mdc-icon-button__icon" data-toggle-on/>
</button>
```

### Icons

The icon button can be used with a standard icon library such as Material Icons or Font Awesome, or with an `svg`.
The icon button toggle should only be used with an standard icon library. We recommend you use
[Material Icons](https://material.io/tools/icons) from Google Fonts.
The icon button can be used with a standard icon library such as Material Icons, or with an `svg`.
We recommend you use [Material Icons](https://material.io/tools/icons) from Google Fonts.

### Disabled

Expand All @@ -140,6 +157,7 @@ cannot be disabled. Disabled icon buttons cannot be interacted with and have no
CSS Class | Description
--- | ---
`mdc-icon-button` | Mandatory.
`mdc-icon-button--on` | Used to indicate the toggle button icon that is the not-selected option.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't sound right... This class is applied to the root element when the toggle should be in the "on" state, right?


### Sass Mixins

Expand Down Expand Up @@ -171,9 +189,8 @@ If you are using a JavaScript framework, such as React or Angular, you can creat

Method Signature | Description
--- | ---
`addClass(className: string) => void` | Adds a class to the root element, or the inner icon element.
`removeClass(className: string) => void` | Removes a class from the root element, or the inner icon element.
`setText(text: string) => void` | Sets the text content of the root element, or the inner icon element.
`addClass(className: string) => void` | Adds a class to a icon element.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why were these docs changed? Doesn't this still apply to the root element?

`removeClass(className: string) => void` | Removes a class from a icon element.
`getAttr(name: string) => string` | Returns the value of the attribute `name` on the root element. Can also return `null`, similar to `getAttribute()`.
`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.
`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.
Expand Down
29 changes: 7 additions & 22 deletions packages/mdc-icon-button/adapter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,31 +44,16 @@ class MDCIconButtonToggleAdapter {
removeClass(className) {}

/**
* @param {string} type
* @param {!EventListener} handler
*/
registerInteractionHandler(type, handler) {}

/**
* @param {string} type
* @param {!EventListener} handler
*/
deregisterInteractionHandler(type, handler) {}

/** @param {string} text */
setText(text) {}

/**
* @param {string} name
* @return {string}
*/
getAttr(name) {}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You removed getAttr but it's still in the docs

* @param {string} className
* @return {boolean}
* */
hasClass(className) {}

/**
* @param {string} name
* @param {string} value
* @param {string} attrName
* @param {string} attrValue
*/
setAttr(name, value) {}
setAttr(attrName, attrValue) {}

/** @param {!IconButtonToggleEvent} evtData */
notifyChange(evtData) {}
Expand Down
8 changes: 2 additions & 6 deletions packages/mdc-icon-button/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,12 @@
/** @enum {string} */
const cssClasses = {
ROOT: 'mdc-icon-button',
ICON_BUTTON_ON_CLASS: 'mdc-icon-button--on',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

_CLASS seems redundant within the cssClasses hash... we could potentially even shorten this to just ON since it's a modifier class for the root element?

};

/** @enum {string} */
const strings = {
DATA_TOGGLE_ON_LABEL: 'data-toggle-on-label',
DATA_TOGGLE_ON_CONTENT: 'data-toggle-on-content',
DATA_TOGGLE_ON_CLASS: 'data-toggle-on-class',
DATA_TOGGLE_OFF_LABEL: 'data-toggle-off-label',
DATA_TOGGLE_OFF_CONTENT: 'data-toggle-off-content',
DATA_TOGGLE_OFF_CLASS: 'data-toggle-off-class',
DATA_TOGGLE_ON_ATTR: 'data-toggle-on',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is no longer used since it's now a class

ARIA_PRESSED: 'aria-pressed',
ARIA_LABEL: 'aria-label',
CHANGE_EVENT: 'MDCIconButtonToggle:change',
Expand Down
Loading