Replace material like button with a plain HTML like button (dart-lang#9324)

Author: isoos

app/lib/frontend/dom/material.dart

@@ -94,36 +94,6 @@ d.Node raisedButton({
   );
 }
 
-/// Renders a two-state material icon button
-d.Node iconButton({
-  String? id,
-  required bool isOn,
-  Map<String, String>? attributes,
-  required d.Image onIcon,
-  required d.Image offIcon,
-  bool disabled = false,
-  String? title,
-  List<String>? classes,
-}) {
-  return d.element(
-    'button',
-    id: id,
-    classes: ['mdc-icon-button', if (isOn) 'mdc-icon-button--on', ...?classes],
-    attributes: {
-      ...?attributes,
-      if (disabled) 'disabled': 'disabled',
-      if (title != null) 'title': title,
-    },
-    children: [
-      d.img(classes: ['mdc-icon-button__icon'], image: offIcon),
-      d.img(
-        classes: ['mdc-icon-button__icon', 'mdc-icon-button__icon--on'],
-        image: onIcon,
-      ),
-    ],
-  );
-}
-
 /// Renders a material text field.
 d.Node textField({
   required String id,

app/lib/frontend/templates/views/pkg/liked_package_list.dart

@@ -5,7 +5,6 @@
 import 'package:_pub_shared/format/number_format.dart';
 
 import '../../../dom/dom.dart' as d;
-import '../../../dom/material.dart' as material;
 import '../../../static_files.dart' show staticUrls;
 
 d.Node renderLikeButtonAndLabel({
@@ -33,28 +32,39 @@ d.Node renderLikeButton(
   required int likeCount,
   required bool isLiked,
 }) {
-  return material.iconButton(
-    classes: ['like-button-and-label--button'],
-    isOn: isLiked,
-    onIcon: d.Image(
-      src: staticUrls.getAssetUrl('/static/img/like-active.svg'),
-      alt: 'liked status: active',
-      width: 18,
-      height: 18,
-    ),
-    offIcon: d.Image(
-      src: staticUrls.getAssetUrl('/static/img/like-inactive.svg'),
-      alt: 'liked status: inactive',
-      width: 18,
-      height: 18,
-    ),
-    title: isLiked ? 'Unlike this package' : 'Like this package',
+  return d.button(
+    classes: [
+      'like-button-and-label--button',
+      '-pub-icon-button',
+      if (isLiked) '-pub-icon-button--on',
+    ],
     attributes: {
       'data-ga-click-event': 'toggle-like',
       'aria-pressed': isLiked ? 'true' : 'false',
       'data-package': package,
       'data-value': likeCount.toString(),
+      'title': isLiked ? 'Unlike this package' : 'Like this package',
     },
+    children: [
+      d.img(
+        classes: ['-pub-icon-button-icon--on'],
+        image: d.Image(
+          src: staticUrls.getAssetUrl('/static/img/like-active.svg'),
+          alt: 'liked status: active',
+          width: 18,
+          height: 18,
+        ),
+      ),
+      d.img(
+        classes: ['-pub-icon-button-icon--off'],
+        image: d.Image(
+          src: staticUrls.getAssetUrl('/static/img/like-inactive.svg'),
+          alt: 'liked status: inactive',
+          width: 18,
+          height: 18,
+        ),
+      ),
+    ],
   );
 }
 

app/test/frontend/golden/my_liked_packages.html

@@ -209,9 +209,9 @@ <h1 class="title pub-monochrome-icon-hoverable">user</h1>
                       <div class="packages-header">
                         <h3 class="packages-title pub-monochrome-icon-hoverable">
                           <a href="/packages/oxygen">oxygen</a>
-                          <button class="mdc-icon-button mdc-icon-button--on like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="true" data-package="oxygen" data-value="0" title="Unlike this package">
-                            <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
-                            <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                          <button class="like-button-and-label--button -pub-icon-button -pub-icon-button--on" data-ga-click-event="toggle-like" aria-pressed="true" data-package="oxygen" data-value="0" title="Unlike this package">
+                            <img class="-pub-icon-button-icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                            <img class="-pub-icon-button-icon--off" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                           </button>
                           <span class="pkg-page-title-copy">
                             <img class="pub-monochrome-icon pkg-page-title-copy-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/content-copy-icon.svg" alt="copy &quot;oxygen: ^1.2.0&quot; to clipboard" width="18" height="18" title="Copy &quot;oxygen: ^1.2.0&quot; to clipboard" data-copy-content="oxygen: ^1.2.0" data-ga-click-event="copy-package-version"/>
@@ -279,9 +279,9 @@ <h3 class="packages-title pub-monochrome-icon-hoverable">
                       <div class="packages-header">
                         <h3 class="packages-title pub-monochrome-icon-hoverable">
                           <a href="/packages/neon">neon</a>
-                          <button class="mdc-icon-button mdc-icon-button--on like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="true" data-package="neon" data-value="0" title="Unlike this package">
-                            <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
-                            <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                          <button class="like-button-and-label--button -pub-icon-button -pub-icon-button--on" data-ga-click-event="toggle-like" aria-pressed="true" data-package="neon" data-value="0" title="Unlike this package">
+                            <img class="-pub-icon-button-icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                            <img class="-pub-icon-button-icon--off" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                           </button>
                           <span class="pkg-page-title-copy">
                             <img class="pub-monochrome-icon pkg-page-title-copy-icon filter-invert-on-dark" src="/static/hash-%%etag%%/img/content-copy-icon.svg" alt="copy &quot;neon: ^1.0.0&quot; to clipboard" width="18" height="18" title="Copy &quot;neon: ^1.0.0&quot; to clipboard" data-copy-content="neon: ^1.0.0" data-ga-click-event="copy-package-version"/>

app/test/frontend/golden/pkg_activity_log_page.html

@@ -186,9 +186,9 @@ <h1 class="title pub-monochrome-icon-hoverable">
                     </div>
                   </div>
                   <div class="like-button-and-label">
-                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
-                      <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
-                      <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                    <button class="like-button-and-label--button -pub-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
+                      <img class="-pub-icon-button-icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                      <img class="-pub-icon-button-icon--off" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                     </button>
                     <span class="like-button-and-label--count-wrapper">
                       <span class="like-button-and-label--count">0</span>

app/test/frontend/golden/pkg_admin_page.html

@@ -186,9 +186,9 @@ <h1 class="title pub-monochrome-icon-hoverable">
                     </div>
                   </div>
                   <div class="like-button-and-label">
-                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
-                      <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
-                      <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                    <button class="like-button-and-label--button -pub-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
+                      <img class="-pub-icon-button-icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                      <img class="-pub-icon-button-icon--off" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                     </button>
                     <span class="like-button-and-label--count-wrapper">
                       <span class="like-button-and-label--count">0</span>

app/test/frontend/golden/pkg_changelog_page.html

@@ -161,9 +161,9 @@ <h1 class="title pub-monochrome-icon-hoverable">
                     </div>
                   </div>
                   <div class="like-button-and-label">
-                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
-                      <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
-                      <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                    <button class="like-button-and-label--button -pub-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
+                      <img class="-pub-icon-button-icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                      <img class="-pub-icon-button-icon--off" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                     </button>
                     <span class="like-button-and-label--count-wrapper">
                       <span class="like-button-and-label--count">0</span>

app/test/frontend/golden/pkg_example_page.html

@@ -161,9 +161,9 @@ <h1 class="title pub-monochrome-icon-hoverable">
                     </div>
                   </div>
                   <div class="like-button-and-label">
-                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
-                      <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
-                      <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                    <button class="like-button-and-label--button -pub-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
+                      <img class="-pub-icon-button-icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                      <img class="-pub-icon-button-icon--off" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                     </button>
                     <span class="like-button-and-label--count-wrapper">
                       <span class="like-button-and-label--count">0</span>

app/test/frontend/golden/pkg_install_page.html

@@ -161,9 +161,9 @@ <h1 class="title pub-monochrome-icon-hoverable">
                     </div>
                   </div>
                   <div class="like-button-and-label">
-                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
-                      <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
-                      <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                    <button class="like-button-and-label--button -pub-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
+                      <img class="-pub-icon-button-icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                      <img class="-pub-icon-button-icon--off" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                     </button>
                     <span class="like-button-and-label--count-wrapper">
                       <span class="like-button-and-label--count">0</span>

app/test/frontend/golden/pkg_score_page.html

@@ -161,9 +161,9 @@ <h1 class="title pub-monochrome-icon-hoverable">
                     </div>
                   </div>
                   <div class="like-button-and-label">
-                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
-                      <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
-                      <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                    <button class="like-button-and-label--button -pub-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
+                      <img class="-pub-icon-button-icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                      <img class="-pub-icon-button-icon--off" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                     </button>
                     <span class="like-button-and-label--count-wrapper">
                       <span class="like-button-and-label--count">0</span>

app/test/frontend/golden/pkg_score_page_with_downloads_chart.html

@@ -161,9 +161,9 @@ <h1 class="title pub-monochrome-icon-hoverable">
                     </div>
                   </div>
                   <div class="like-button-and-label">
-                    <button class="mdc-icon-button like-button-and-label--button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
-                      <img class="mdc-icon-button__icon" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
-                      <img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                    <button class="like-button-and-label--button -pub-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" data-package="oxygen" data-value="0" title="Like this package">
+                      <img class="-pub-icon-button-icon--on" src="/static/hash-%%etag%%/img/like-active.svg" alt="liked status: active" width="18" height="18"/>
+                      <img class="-pub-icon-button-icon--off" src="/static/hash-%%etag%%/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/>
                     </button>
                     <span class="like-button-and-label--count-wrapper">
                       <span class="like-button-and-label--count">0</span>