fix(snackbar): Drop mdc-button from snackbar's dependency

BREAKING CHANGE: Removed the dependency of mdc-button from DOM structure of snackbar.
material-components · Sep 12, 2017 · 95e9388 · 95e9388
1 parent 1923c01
commit 95e9388
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/demos/snackbar.html b/demos/snackbar.html
@@ -77,7 +77,7 @@
              aria-hidden="true">
           <div class="mdc-snackbar__text">Message sent</div>
           <div class="mdc-snackbar__action-wrapper">
-            <button type="button" class="mdc-button mdc-snackbar__action-button">Undo</button>
+            <button type="button" class="mdc-snackbar__action-button">Undo</button>
           </div>
         </div>
       </section>
@@ -130,7 +130,7 @@ <h2 class="mdc-typography--title">Basic Example</h2>
         </div>
         <br/>
 
-        <button type="button" class="mdc-button mdc-button--raised mdc-button--primary" id="toggle-dark-theme">Toggle Dark Theme</button>
+        <button type="button" class="mdc-button mdc-button--raised" id="toggle-dark-theme">Toggle Dark Theme</button>
         <br/>
 
         <div class="mdc-textfield">
@@ -157,7 +157,7 @@ <h2 class="mdc-typography--title">Basic Example</h2>
                aria-hidden="true">
             <div class="mdc-snackbar__text"></div>
             <div class="mdc-snackbar__action-wrapper">
-              <button type="button" class="mdc-button mdc-snackbar__action-button"></button>
+              <button type="button" class="mdc-snackbar__action-button"></button>
             </div>
           </div>
           <div dir="rtl">
@@ -168,7 +168,7 @@ <h2 class="mdc-typography--title">Basic Example</h2>
                  aria-hidden="true">
               <div class="mdc-snackbar__text"></div>
               <div class="mdc-snackbar__action-wrapper">
-                <button type="button" class="mdc-button mdc-snackbar__action-button"></button>
+                <button type="button" class="mdc-snackbar__action-button"></button>
               </div>
             </div>
           </div>
@@ -179,7 +179,7 @@ <h2 class="mdc-typography--title">Basic Example</h2>
                aria-hidden="true">
             <div class="mdc-snackbar__text"></div>
             <div class="mdc-snackbar__action-wrapper">
-              <button type="button" class="mdc-button mdc-snackbar__action-button"></button>
+              <button type="button" class="mdc-snackbar__action-button"></button>
             </div>
           </div>
           <div dir="rtl">
@@ -190,7 +190,7 @@ <h2 class="mdc-typography--title">Basic Example</h2>
                  aria-hidden="true">
               <div class="mdc-snackbar__text"></div>
               <div class="mdc-snackbar__action-wrapper">
-                <button type="button" class="mdc-button mdc-snackbar__action-button"></button>
+                <button type="button" class="mdc-snackbar__action-button"></button>
               </div>
             </div>
           </div>

diff --git a/packages/mdc-snackbar/README.md b/packages/mdc-snackbar/README.md
@@ -48,7 +48,7 @@ npm install --save @material/snackbar
      aria-hidden="true">
   <div class="mdc-snackbar__text"></div>
   <div class="mdc-snackbar__action-wrapper">
-    <button type="button" class="mdc-button mdc-snackbar__action-button"></button>
+    <button type="button" class="mdc-snackbar__action-button"></button>
   </div>
 </div>
 ```
@@ -65,7 +65,7 @@ snackbar, add the `mdc-snackbar--align-start` modifier class to the root element
      aria-hidden="true">
   <div class="mdc-snackbar__text"></div>
   <div class="mdc-snackbar__action-wrapper">
-    <button type="button" class="mdc-button mdc-snackbar__action-button"></button>
+    <button type="button" class="mdc-snackbar__action-button"></button>
   </div>
 </div>
 ```
@@ -153,7 +153,7 @@ To respond to a snackbar action, assign a function to the optional `actionHandle
      aria-hidden="true">
   <div class="mdc-snackbar__text"></div>
   <div class="mdc-snackbar__action-wrapper">
-    <button type="button" class="mdc-button mdc-snackbar__action-button"></button>
+    <button type="button" class="mdc-snackbar__action-button"></button>
   </div>
 </div>
 ```

diff --git a/packages/mdc-snackbar/mdc-snackbar.scss b/packages/mdc-snackbar/mdc-snackbar.scss
@@ -129,20 +129,26 @@
   /* stylelint-enable plugin/selector-bem-pattern */
 
   &__action-button {
+    @include mdc-typography(button);
     @include mdc-theme-prop(color, secondary);
 
     @include mdc-theme-dark(".mdc-snackbar") {
       @include mdc-theme-prop(color, primary);
     }
 
-    @include mdc-rtl-reflexive-box(margin, right, -16px, ".mdc-snackbar");
-
-    min-width: auto;
-    height: inherit;
     transition: mdc-animation-exit-permanent(opacity, .3s);
+    border: none;
+    outline: none;
+    background-color: transparent;
     opacity: 0;
+    user-select: none;
+    -webkit-appearance: none;
     visibility: hidden;
 
+    &:hover {
+      cursor: pointer;
+    }
+
     &::-moz-focus-inner {
       border: 0;
     }

diff --git a/packages/mdc-snackbar/package.json b/packages/mdc-snackbar/package.json
@@ -16,7 +16,6 @@
   "dependencies": {
     "@material/animation": "^0.3.1",
     "@material/base": "^0.2.5",
-    "@material/button": "^0.6.0",
     "@material/rtl": "^0.1.7",
     "@material/theme": "^0.3.0",
     "@material/typography": "^0.3.0"