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

Commit 39a4815

Browse files
williamernestwilliamernest
authored
feat(icon-button): Add new package (#2748)
1 parent 16a6890 commit 39a4815

31 files changed

+1299
-706
lines changed

‎demos/card.html

Lines changed: 25 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -58,26 +58,20 @@ <h3 class="demo-card__subtitle mdc-typography--subtitle2">by Kurt Wagner</h3>
5858
<button class="mdc-button mdc-card__action mdc-card__action--button">Bookmark</button>
5959
</div>
6060
<div class="mdc-card__action-icons">
61-
<i class="mdc-icon-toggle material-icons mdc-card__action mdc-card__action--icon"
62-
tabindex="0"
63-
role="button"
61+
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
6462
aria-pressed="false"
6563
aria-label="Add to favorites"
6664
title="Add to favorites"
67-
data-toggle-on='{"content": "favorite", "label": "Remove from favorites"}'
68-
data-toggle-off='{"content": "favorite_border", "label": "Add to favorites"}'>
69-
favorite_border
70-
</i>
71-
<i class="material-icons mdc-card__action mdc-card__action--icon mdc-ripple-surface"
72-
tabindex="0"
73-
role="button"
65+
data-toggle-on-content="favorite"
66+
data-toggle-on-label="Remove from favorites"
67+
data-toggle-off-content="favorite_border"
68+
data-toggle-off-label="Add to favorites">favorite_border</button>
69+
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
7470
data-mdc-ripple-is-unbounded
75-
title="Share">share</i>
76-
<i class="material-icons mdc-card__action mdc-card__action--icon mdc-ripple-surface"
77-
tabindex="0"
78-
role="button"
71+
title="Share">share</button>
72+
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
7973
data-mdc-ripple-is-unbounded
80-
title="More options">more_vert</i>
74+
title="More options">more_vert</button>
8175
</div>
8276
</div>
8377
</div>
@@ -152,31 +146,25 @@ <h2 class="demo-card-article__title mdc-typography--headline5">Asia's clean ener
152146
</div>
153147
</a>
154148
<div class="mdc-card__actions mdc-card__action-icons">
155-
<i class="mdc-icon-toggle material-icons mdc-card__action mdc-card__action--icon"
156-
tabindex="0"
157-
role="button"
149+
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
158150
aria-pressed="false"
159151
aria-label="Add to favorites"
160152
title="Add to favorites"
161-
data-toggle-on='{"content": "favorite", "label": "Remove from favorites"}'
162-
data-toggle-off='{"content": "favorite_border", "label": "Add to favorites"}'>
163-
favorite_border
164-
</i>
165-
<i class="mdc-icon-toggle material-icons mdc-card__action mdc-card__action--icon"
166-
tabindex="0"
167-
role="button"
153+
data-toggle-on-content="favorite"
154+
data-toggle-on-label="Remove from favorites"
155+
data-toggle-off-content="favorite_border"
156+
data-toggle-off-label="Add to favorites">favorite_border</button>
157+
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
168158
aria-pressed="false"
169159
aria-label="Add bookmark"
170160
title="Add bookmark"
171-
data-toggle-on='{"content": "bookmark", "label": "Remove bookmark"}'
172-
data-toggle-off='{"content": "bookmark_border", "label": "Add bookmark"}'>
173-
bookmark_border
174-
</i>
175-
<i class="material-icons mdc-card__action mdc-card__action--icon mdc-ripple-surface"
176-
tabindex="0"
177-
role="button"
161+
data-toggle-on-content="bookmark"
162+
data-toggle-on-label="Remove bookmark"
163+
data-toggle-off-content="bookmark_border"
164+
data-toggle-off-label="Add bookmark">bookmark_border</button>
165+
<button class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon"
178166
data-mdc-ripple-is-unbounded
179-
title="Share">share</i>
167+
title="Share">share</button>
180168
</div>
181169
</div>
182170

@@ -245,15 +233,15 @@ <h2 class="demo-card-article__title mdc-typography--headline5">Asia's clean ener
245233
mdc.ripple.MDCRipple.attachTo(surface);
246234
});
247235

248-
[].forEach.call(document.querySelectorAll('.mdc-icon-toggle'), function(iconToggle) {
249-
mdc.iconToggle.MDCIconToggle.attachTo(iconToggle);
236+
[].forEach.call(document.querySelectorAll('.mdc-icon-button[data-toggle-on-content]'), function(iconButtonToggle) {
237+
mdc.iconButton.MDCIconButtonToggle.attachTo(iconButtonToggle);
250238
});
251239

252-
document.addEventListener('MDCIconToggle:change', function(evt) {
240+
document.addEventListener('MDCIconButtonToggle:change', function(evt) {
253241
evt.target.setAttribute('title', evt.target.getAttribute('aria-label'));
254242
});
255243

256-
[].forEach.call(document.querySelectorAll('.mdc-ripple-surface'), function(surface) {
244+
[].forEach.call(document.querySelectorAll('.mdc-ripple-surface, [data-mdc-ripple-is-unbounded]'), function(surface) {
257245
mdc.ripple.MDCRipple.attachTo(surface);
258246
});
259247

‎demos/card.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
@import "../packages/mdc-card/mdc-card";
2020
@import "../packages/mdc-checkbox/mdc-checkbox";
2121
@import "../packages/mdc-form-field/mdc-form-field";
22-
@import "../packages/mdc-icon-toggle/mdc-icon-toggle";
22+
@import "../packages/mdc-icon-button/mdc-icon-button";
2323
@import "../packages/mdc-list/mdc-list";
2424
@import "../packages/mdc-ripple/mdc-ripple";
2525

‎demos/icon-button.html

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2018 Google Inc. All rights reserved.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
https://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License
16+
-->
17+
<html>
18+
<head>
19+
<meta charset="utf-8">
20+
<title>Icon Button - Material Components Demo</title>
21+
<meta name="viewport" content="width=device-width, initial-scale=1">
22+
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
23+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
24+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
25+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
26+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
27+
<link rel="stylesheet" href="/assets/icon-button.css">
28+
<script src="/ready.js"></script>
29+
</head>
30+
<body class="mdc-typography">
31+
<header class="mdc-toolbar mdc-toolbar--fixed">
32+
<div class="mdc-toolbar__row">
33+
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
34+
<a href="/" class="catalog-back mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
35+
<span class="mdc-toolbar__title catalog-title">Icon Buttons</span>
36+
</section>
37+
</div>
38+
</header>
39+
<main>
40+
<div class="mdc-toolbar-fixed-adjust"></div>
41+
<section class="hero">
42+
<div class="demo-wrapper">
43+
<button class="mdc-icon-button material-icons"
44+
aria-label="Add to favorites"
45+
aria-pressed="false"
46+
data-demo-toggle
47+
data-toggle-on-content="favorite"
48+
data-toggle-on-label="Remove From Favorites"
49+
data-toggle-off-content="favorite_border"
50+
data-toggle-off-label="Add to Favorites">favorite_border</button>
51+
</div>
52+
</section>
53+
54+
<section class="example">
55+
<div>
56+
<div>
57+
<h1 class="mdc-typography--headline5">Buttons</h1>
58+
</div>
59+
<div class="toggle-examples-container">
60+
<div class="toggle-example">
61+
<h2 class="mdc-typography--headline6">Material Icons</h2>
62+
<div class="demo-wrapper">
63+
<button class="mdc-icon-button material-icons"
64+
role="button"
65+
aria-label="Add to favorites"
66+
aria-pressed="false">favorite</button>
67+
<button class="mdc-icon-button material-icons"
68+
aria-label="Airplane Mode active"
69+
aria-pressed="false">airplanemode_active</button>
70+
<a href="#"
71+
class="mdc-icon-button material-icons"
72+
aria-label="Transit directions"
73+
aria-pressed="false">directions_transit</a>
74+
</div>
75+
</div>
76+
77+
<div class="toggle-example">
78+
<h2 class="mdc-typography--headline6">SVG Icon</h2>
79+
<div class="demo-wrapper">
80+
<button class="mdc-icon-button"
81+
aria-label="Add to favorites"
82+
aria-pressed="false">
83+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
84+
<path fill="none" d="M0 0h24v24H0z"/>
85+
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
86+
</svg>
87+
</button>
88+
</div>
89+
</div>
90+
91+
<div class="toggle-example">
92+
<h2 class="mdc-typography--headline6">Disabled Buttons</h2>
93+
<div class="demo-wrapper">
94+
<button class="mdc-icon-button material-icons"
95+
aria-label="Airplane Mode active"
96+
aria-pressed="false"
97+
disabled>airplanemode_active</button>
98+
<button class="mdc-icon-button"
99+
aria-label="Add to favorites"
100+
aria-pressed="false"
101+
disabled>
102+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
103+
<path fill="none" d="M0 0h24v24H0z"/>
104+
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
105+
</svg>
106+
</button>
107+
</div>
108+
</div>
109+
110+
<div class="toggle-example">
111+
<h2 class="mdc-typography--headline6">Larger Buttons</h2>
112+
<div class="demo-wrapper">
113+
<button class="mdc-icon-button material-icons demo-icon-button-large"
114+
aria-label="Airplane Mode active"
115+
aria-pressed="false">airplanemode_active</button>
116+
<button class="mdc-icon-button demo-icon-button-large"
117+
aria-label="Add to favorites"
118+
aria-pressed="false">
119+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
120+
<path fill="none" d="M0 0h24v24H0z"/>
121+
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
122+
</svg>
123+
</button>
124+
</div>
125+
</div>
126+
</div>
127+
</div>
128+
</section>
129+
130+
<section class="example">
131+
<div>
132+
<div>
133+
<h1 class="mdc-typography--headline5">Button Toggles</h1>
134+
</div>
135+
<div class="toggle-examples-container">
136+
<div class="toggle-example">
137+
<h2 class="mdc-typography--headline6">Using Material Icons</h2>
138+
<div class="demo-wrapper">
139+
<button
140+
id="add-to-favorites"
141+
class="mdc-icon-button material-icons"
142+
aria-label="Add to favorites"
143+
aria-pressed="false"
144+
data-demo-toggle
145+
data-toggle-on-content="favorite"
146+
data-toggle-on-label="Remove From Favorites"
147+
data-toggle-off-content="favorite_border"
148+
data-toggle-off-label="Add to Favorites">favorite_border</button>
149+
</div>
150+
<p>Favorited? <span id="favorited-status">no</span></p>
151+
</div>
152+
153+
<div class="toggle-example">
154+
<h2 class="mdc-typography--headline6">Using Font Awesome</h2>
155+
<div class="demo-wrapper">
156+
<button class="mdc-icon-button mdc-icon-button--on"
157+
aria-label="Unstar this item"
158+
aria-pressed="true" data-demo-toggle
159+
data-icon-inner-selector=".fa"
160+
data-toggle-on-class="fa-star"
161+
data-toggle-on-label="Unstar this item"
162+
data-toggle-off-class="fa-star-o"
163+
data-toggle-off-label="Star this item">
164+
<i class="fa fa-star" aria-hidden="true"></i>
165+
</button>
166+
</div>
167+
</div>
168+
169+
<div class="toggle-example">
170+
<h2 class="mdc-typography--headline6">Disabled Icons</h2>
171+
<div class="demo-wrapper">
172+
<button class="mdc-icon-button material-icons"
173+
aria-label="Add to favorites"
174+
aria-pressed="false"
175+
data-demo-toggle
176+
disabled
177+
data-toggle-on-content="favorite"
178+
data-toggle-on-label="Remove From Favorites"
179+
data-toggle-off-content="favorite_border"
180+
data-toggle-off-label="Add to Favorites">favorite_border</button>
181+
</div>
182+
</div>
183+
</div>
184+
185+
<div class="toggle-example">
186+
<h2 class="mdc-typography--headline6">Additional Color Combinations</h2>
187+
<div id="demo-color-combos">
188+
<div id="light-on-bg" class="demo-color-combo">
189+
<div>
190+
<button class="mdc-icon-button material-icons mdc-theme--on-primary"
191+
aria-label="Add to favorites"
192+
aria-pressed="false"
193+
data-demo-toggle
194+
data-toggle-on-content="favorite"
195+
data-toggle-on-label="Remove From Favorites"
196+
data-toggle-off-content="favorite_border"
197+
data-toggle-off-label="Add to Favorites">favorite_border</button>
198+
</div>
199+
<div class="mdc-theme--on-primary">Light icon on background</div>
200+
</div>
201+
<div id="dark-on-bg" class="demo-color-combo">
202+
<div class="mdc-theme--primary">
203+
<button class="mdc-icon-button material-icons"
204+
aria-label="Add to favorites"
205+
aria-pressed="false"
206+
data-demo-toggle
207+
data-toggle-on-content="favorite"
208+
data-toggle-on-label="Remove From Favorites"
209+
data-toggle-off-content="favorite_border"
210+
data-toggle-off-label="Add to Favorites">favorite_border</button>
211+
</div>
212+
<div>Dark icon on background</div>
213+
</div>
214+
<div id="custom-color-combo" class="demo-color-combo">
215+
<div>
216+
<button class="mdc-icon-button material-icons"
217+
aria-label="Add to favorites"
218+
aria-pressed="false"
219+
data-demo-toggle
220+
data-toggle-on-content="favorite"
221+
data-toggle-on-label="Remove From Favorites"
222+
data-toggle-off-content="favorite_border"
223+
data-toggle-off-label="Add to Favorites">favorite_border</button>
224+
</div>
225+
<div>Custom color</div>
226+
</div>
227+
</div>
228+
</div>
229+
</div>
230+
</section>
231+
</main>
232+
233+
<script src="/assets/material-components-web.js" async></script>
234+
<script src="/assets/common.js" async></script>
235+
<script>
236+
demoReady(function() {
237+
var nodes = document.querySelectorAll('[data-demo-toggle]');
238+
for (var i = 0, node; node = nodes[i]; i++) {
239+
mdc.iconButton.MDCIconButtonToggle.attachTo(node);
240+
}
241+
242+
var buttons = document.querySelectorAll('.mdc-icon-button:not([data-demo-toggle])');
243+
for (var x = 0, button; button = buttons[x]; x++) {
244+
mdc.ripple.MDCRipple.attachTo(button, {isUnbounded: true});
245+
}
246+
247+
var addToFavorites = document.getElementById('add-to-favorites');
248+
var favoritedStatus = document.getElementById('favorited-status');
249+
addToFavorites.addEventListener('MDCIconButtonToggle:change', function(evt) {
250+
var newStatus = evt.detail.isOn ? 'yes' : 'no';
251+
favoritedStatus.textContent = newStatus;
252+
});
253+
});
254+
</script>
255+
</body>
256+
</html>

0 commit comments

Comments
 (0)