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 all 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 mdc-icon-button__icon--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 @@ -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 mdc-icon-button__icon--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 mdc-icon-button__icon--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 mdc-icon-button__icon--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 mdc-icon-button__icon--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 mdc-icon-button__icon--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 mdc-icon-button__icon--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 mdc-icon-button__icon--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: 40 additions & 35 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,59 +70,64 @@ 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 `mdc-icon-button__icon--on` class on the icon that represents the on element.
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 mdc-icon-button__icon--on">favorite_border</i>
</button>
```

```js
var toggleButton = new mdc.iconButton.MDCIconButtonToggle(document.getElementById('add-to-favorites'));
```

#### Icon Button Toggle States
#### Icon Button Toggle with SVG

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-*`.
The icon button toggle can be used with 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.
```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">
<svg class="mdc-icon-button__icon">
...
</svg>
<svg class="mdc-icon-button__icon mdc-icon-button__icon--on">
...
</svg>
</button>
```

#### Icon Button Toggle with Font Awesome
#### Icon Button Toggle with an Image

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 `img` tags.

```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"
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 mdc-icon-button__icon--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 +145,9 @@ cannot be disabled. Disabled icon buttons cannot be interacted with and have no
CSS Class | Description
--- | ---
`mdc-icon-button` | Mandatory.
`mdc-icon-button--on` | This class is applied to the root element and is used to indicate if the icon button toggle is in the "on" state.
`mdc-icon-button__icon` | This class is applied to each icon element for the icon button toggle.
`mdc-icon-button__icon--on` | This class is applied to a icon element and is used to indicate the toggle button icon that is represents the "on" icon.

### Sass Mixins

Expand All @@ -150,7 +158,6 @@ Mixin | Description
`mdc-icon-button-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.
`mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.


## `MDCIconButtonToggle` Properties and Methods

Property | Value Type | Description
Expand All @@ -171,15 +178,13 @@ 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.
`getAttr(name: string) => string` | Returns the value of the attribute `name` on the root element. Can also return `null`, similar to `getAttribute()`.
`addClass(className: string) => void` | Adds a class to the root element.
`removeClass(className: string) => void` | Removes a class from the root element.
`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.

### Foundation: `MDCIconButtonToggleFoundation`

Method Signature | Description
--- | ---
`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.
`handleClick()` | Event handler triggered on the click event. It will toggle the icon from on/off and update aria attributes.
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
7 changes: 1 addition & 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,11 @@
/** @enum {string} */
const cssClasses = {
ROOT: 'mdc-icon-button',
ICON_BUTTON_ON: 'mdc-icon-button--on',
};

/** @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',
ARIA_PRESSED: 'aria-pressed',
ARIA_LABEL: 'aria-label',
CHANGE_EVENT: 'MDCIconButtonToggle:change',
Expand Down
Loading