feat(button): Add overflow ellipsis mixin (#5352)

* feat(button): Add overflow ellipsis mixin * WIP try to fix flaky tests * WIP json is dumb
material-components · Dec 18, 2019 · 47949b0 · 47949b0
1 parent a95be81
commit 47949b0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
@@ -381,6 +381,15 @@ $query: mdc-feature-all()) {
   }
 }
 
+///
+/// Sets the button label to overflow as ellipsis
+///
+@mixin mdc-button-label-overlow-ellipsis($query: mdc-feature-all()) {
+  .mdc-button__label {
+    @include mdc-typography-overflow-ellipsis($query: $query);
+  }
+}
+
 @mixin mdc-button-base_($query) {
   $feat-color: mdc-feature-create-target($query, color);
   $feat-structure: mdc-feature-create-target($query, structure);

diff --git a/test/screenshot/diffing.json b/test/screenshot/diffing.json
@@ -99,7 +99,8 @@
         ],
         "url_regex_patterns": [
           "mdc-menu/classes/menu-selection-group-only.html",
-          "mdc-menu/classes/menu-selection-group.html"
+          "mdc-menu/classes/menu-selection-group.html",
+          "mdc-menu/classes/multiple-menu-selection-group.html"
         ],
         "custom_config": {
           "fonts_loaded_reflow_delay_ms": 250

diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss
@@ -46,6 +46,7 @@
     @include mdc-button-theme-baseline($query: $query);
     @include mdc-button-density(-1, $query: $query);
     @include mdc-button-height(0, $query: $query);
+    @include mdc-button-label-overlow-ellipsis($query: $query);
 
     // Card
     @include mdc-card-core-styles($query: $query);