refactor(button): Remove compact variant (#2361)

BREAKING CHANGE: The compact variant of MDC Button is removed.
material-components · Mar 8, 2018 · 77b15f4 · 77b15f4
1 parent 35a5cfc
commit 77b15f4
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 52 deletions.
diff --git a/demos/button.html b/demos/button.html
@@ -112,9 +112,6 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button">
               Baseline
             </button>
-            <button class="mdc-button mdc-button--compact">
-              Compact
-            </button>
             <button class="mdc-button mdc-button--dense">
               Dense
             </button>
@@ -137,9 +134,6 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button mdc-button--raised">
               Baseline
             </button>
-            <button class="mdc-button mdc-button--raised mdc-button--compact">
-              Compact
-            </button>
             <button class="mdc-button mdc-button--raised mdc-button--dense">
               Dense
             </button>
@@ -162,9 +156,6 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button mdc-button--unelevated">
               Baseline
             </button>
-            <button class="mdc-button mdc-button--unelevated mdc-button--compact">
-              Compact
-            </button>
             <button class="mdc-button mdc-button--unelevated mdc-button--dense">
               Dense
             </button>
@@ -187,9 +178,6 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button mdc-button--stroked">
               Baseline
             </button>
-            <button class="mdc-button mdc-button--stroked mdc-button--compact">
-              Compact
-            </button>
             <button class="mdc-button mdc-button--stroked mdc-button--dense">
               Dense
             </button>
@@ -225,9 +213,6 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button" data-demo-no-js>
               Baseline
             </button>
-            <button class="mdc-button mdc-button--compact" data-demo-no-js>
-              Compact
-            </button>
             <button class="mdc-button mdc-button--dense" data-demo-no-js>
               Dense
             </button>
@@ -250,9 +235,6 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button mdc-button--raised" data-demo-no-js>
               Baseline
             </button>
-            <button class="mdc-button mdc-button--raised mdc-button--compact" data-demo-no-js>
-              Compact
-            </button>
             <button class="mdc-button mdc-button--raised mdc-button--dense" data-demo-no-js>
               Dense
             </button>
@@ -275,9 +257,6 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button mdc-button--unelevated" data-demo-no-js>
               Baseline
             </button>
-            <button class="mdc-button mdc-button--unelevated mdc-button--compact" data-demo-no-js>
-              Compact
-            </button>
             <button class="mdc-button mdc-button--unelevated mdc-button--dense" data-demo-no-js>
               Dense
             </button>
@@ -300,9 +279,6 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button mdc-button--stroked" data-demo-no-js>
               Baseline
             </button>
-            <button class="mdc-button mdc-button--stroked mdc-button--compact" data-demo-no-js>
-              Compact
-            </button>
             <button class="mdc-button mdc-button--stroked mdc-button--dense" data-demo-no-js>
               Dense
             </button>

diff --git a/demos/checkbox.html b/demos/checkbox.html
@@ -98,8 +98,8 @@ <h2>CSS Only</h2>
             <label for="basic-checkbox">Default checkbox</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact" onclick="this.parentElement.parentElement.hasAttribute('dir') ? this.parentElement.parentElement.removeAttribute('dir') : this.parentElement.parentElement.setAttribute('dir', 'rtl');">Toggle RTL</button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact" onclick="document.querySelector('.mdc-form-field').classList.toggle('mdc-form-field--align-end');">Toggle <code>--align-end</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked" onclick="this.parentElement.parentElement.hasAttribute('dir') ? this.parentElement.parentElement.removeAttribute('dir') : this.parentElement.parentElement.setAttribute('dir', 'rtl');">Toggle RTL</button>
+            <button type="button" class="mdc-button mdc-button--stroked" onclick="document.querySelector('.mdc-form-field').classList.toggle('mdc-form-field--align-end');">Toggle <code>--align-end</code></button>
           </div>
         </div>
         <div>
@@ -210,8 +210,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox">Default checkbox</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-indeterminate">Toggle <code>indeterminate</code></button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-disabled">Toggle <code>disabled</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate">Toggle <code>indeterminate</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled">Toggle <code>disabled</code></button>
           </div>
         </div>
         <div>
@@ -235,8 +235,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox-indeterminate">Indeterminate checkbox</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-indeterminate">Toggle <code>indeterminate</code></button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-disabled">Toggle <code>disabled</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate">Toggle <code>indeterminate</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled">Toggle <code>disabled</code></button>
           </div>
           <script>
             document.getElementById('native-js-checkbox-indeterminate').indeterminate = true;
@@ -262,8 +262,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox-custom-all">Custom colored checkbox (stroke, fill, ripple, and focus)</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-indeterminate">Toggle <code>indeterminate</code></button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-disabled">Toggle <code>disabled</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate">Toggle <code>indeterminate</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled">Toggle <code>disabled</code></button>
           </div>
         </div>
         <div>
@@ -286,8 +286,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox-custom-stroke-and-fill">Custom colored checkbox (stroke and fill only)</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-indeterminate">Toggle <code>indeterminate</code></button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-disabled">Toggle <code>disabled</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate">Toggle <code>indeterminate</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled">Toggle <code>disabled</code></button>
           </div>
         </div>
       </section>

diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md
@@ -81,8 +81,6 @@ CSS Class | Description
 `mdc-button--unelevated` | Optional, a contained button that is flush with the surface
 `mdc-button--stroked` | Optional, a contained button that is flush with the surface and has a visible border
 `mdc-button--dense` | Optional, compresses the button text to make it slightly smaller
-`mdc-button--compact` | Optional, reduces the amount of horizontal padding in the button
-
 
 ### Disabled Button
 

diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
@@ -76,13 +76,6 @@
     // Minus extra 1 to accommodate odd font size of dense button
     line-height: $mdc-dense-button-height - $stroke-width * 2 - 1;
   }
-
-  &.mdc-button--compact {
-    $padding-compact-value: max($mdc-compact-button-horizontal-padding - $stroke-width, 0);
-
-    padding-right: $padding-compact-value;
-    padding-left: $padding-compact-value;
-  }
 }
 
 @mixin mdc-button-base_() {
@@ -172,10 +165,6 @@
   }
 }
 
-@mixin mdc-button--compact_() {
-  padding: 0 $mdc-compact-button-horizontal-padding;
-}
-
 @mixin mdc-button--dense_() {
   height: $mdc-dense-button-height;
   font-size: .8125rem; // 13sp

diff --git a/packages/mdc-button/_variables.scss b/packages/mdc-button/_variables.scss
@@ -17,4 +17,3 @@
 $mdc-button-height: 36px;
 $mdc-button-horizontal-padding: 16px;
 $mdc-dense-button-height: 32px;
-$mdc-compact-button-horizontal-padding: 8px;
diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
@@ -54,10 +54,6 @@
   @include mdc-button-stroke-color(primary);
 }
 
-.mdc-button--compact {
-  @include mdc-button--compact_;
-}
-
 .mdc-button--dense {
   @include mdc-button--dense_;
 }