Split icon button toggling into its own component

- This makes the non-togging case more lightweight - `<mwc-icon-button>` for non-toggling use cases remains the same - For toggling, use `<mwc-icon-button-toggle>` - `icon` is now `onIcon` Related to #348
material-components · Aug 15, 2019 · c580ebe · c580ebe
1 parent 4dd027b
commit c580ebe
Show file tree

Hide file tree

Showing 26 changed files with 538 additions and 226 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Remove CHANGELOG files in packages
 - Add section about CHANGELOG entries to CONTRIBUTING guide
 - Remove `as any` from `@customElement` decorators
+- Improve README for `<mwc-button>`
+- Improve README for `<mwc-icon-button>`
+- Split toggling icon button out into `@material/mwc-icon-button-toggle` with tag name `<mwc-icon-button-toggle>`
 
 ## [0.6.0] - 2019-06-05
 - Upgrade lerna to 3.x

diff --git a/demos/icon-button-toggle.html b/demos/icon-button-toggle.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<!--
+@license
+Copyright 2019 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<html>
+<head>
+  <title>icon-button-toggle demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <script type="module" src="../node_modules/@material/mwc-icon-button-toggle/mwc-icon-button-toggle.js"></script>
+  <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
+  <link rel="stylesheet" href="demo-component.css">
+  <style>
+    mwc-icon-button-toggle {
+      margin: 20px;
+    }
+    .color {
+      color: tomato;
+    }
+  </style>
+</head>
+<body class="unresolved">
+  <header>
+    <a href="index.html"><mwc-icon>arrow_back</mwc-icon>
+    <span>Icon Button Toggle</span></a>
+  </header>
+
+  <main>
+    <mwc-icon-button-toggle onIcon="sentiment_very_satisfied" offIcon="sentiment_very_dissatisfied"></mwc-icon-button-toggle>
+
+    <mwc-icon-button-toggle>
+      <svg slot="onIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+      <svg slot="offIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
+    </mwc-icon-button-toggle>
+
+    <mwc-icon-button-toggle>
+      <img slot="onIcon" src="https://picsum.photos/id/28/24/24">
+      <img slot="offIcon" src="https://picsum.photos/id/141/24/24?grayscale">
+    </mwc-icon-button-toggle>
+
+    <mwc-icon-button-toggle disabled onIcon="sentiment_very_satisfied" offIcon="sentiment_very_dissatisfied"></mwc-icon-button-toggle>
+
+    <mwc-icon-button-toggle class="color" onIcon="sentiment_very_satisfied" offIcon="sentiment_very_dissatisfied"></mwc-icon-button-toggle>
+  </main>
+
+  <script type="module">
+    Array.from(document.querySelectorAll('mwc-icon-button-toggle')).forEach((e) => {
+      e.addEventListener('MDCIconButtonToggle:change', (e) => console.log(e.type, e.target));
+    });
+    addEventListener('load', () => document.body.classList.remove('unresolved'));
+  </script>
+</body>
+</html>
diff --git a/demos/icon-button.html b/demos/icon-button.html
@@ -24,7 +24,9 @@
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
   <style>
-
+    mwc-icon-button {
+      padding: 20px;
+    }
     .color {
       color: tomato;
     }
@@ -37,42 +39,15 @@
   </header>
 
   <main>
-    <h4>No Toggle</h4>
-
-    <mwc-icon-button icon="error"></mwc-icon-button>
-
-    <h4>Toggle</h4>
-
-    <mwc-icon-button icon="sentiment_very_satisfied" offIcon="sentiment_very_dissatisfied"></mwc-icon-button>
-    <mwc-icon-button icon="alarm_on" offIcon="alarm_off" on></mwc-icon-button>
-
-    <h4>Disabled</h3>
-
-    <mwc-icon-button disabled icon="sentiment_very_satisfied" offIcon="sentiment_very_dissatisfied"></mwc-icon-button>
-
-    <h4>Color</h4>
-    <div class="color">
-      <mwc-icon-button icon="all_out" offIcon="accessibility"></mwc-icon-button>
-      <mwc-icon-button icon="exit_to_app" offIcon="camera"></mwc-icon-button>
-    </div>
-
-    <h4>SVG Icon, with Color</h4>
-    <mwc-icon-button class="color">
-      <svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
-      <svg slot="offIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
-    </mwc-icon-button>
-
-    <h4>Image Icon</h4>
+    <mwc-icon-button icon="code"></mwc-icon-button>
     <mwc-icon-button>
-      <img slot="icon" src="https://picsum.photos/id/28/24/24">
-      <img slot="offIcon" src="https://picsum.photos/id/141/24/24?grayscale">
+      <svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
     </mwc-icon-button>
+    <mwc-icon-button icon="code" disabled></mwc-icon-button>
+    <mwc-icon-button icon="code" class="color"></mwc-icon-button>
   </main>
 
   <script type="module">
-    Array.from(document.querySelectorAll('mwc-icon-button')).forEach((e) => {
-      e.addEventListener('MDCIconButtonToggle:change', (e) => console.log(e.type, e.target));
-    });
     addEventListener('load', () => document.body.classList.remove('unresolved'));
   </script>
 </body>

diff --git a/demos/index.html b/demos/index.html
@@ -137,6 +137,13 @@
                 <span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_component_24px.svg"></span>
                 <span class="mdc-list-item__text">
                   Icon Button
+                  <span class="mdc-list-item__secondary-text">Icon buttons allow users to take actions, and make choices, with a single tap.</span>
+                </span>
+              </a>
+              <a role="listitem" class="mdc-list-item" href="icon-button-toggle.html">
+                <span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="https://material-components-web.appspot.com/images/ic_component_24px.svg"></span>
+                <span class="mdc-list-item__text">
+                  Icon Button Toggle
                   <span class="mdc-list-item__secondary-text">Toggling icon states</span>
                 </span>
               </a>