feat(tab): Add text transform mixin (#5144)

material-components · Oct 15, 2019 · 22d7ad2 · 22d7ad2
1 parent 996b091
commit 22d7ad2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/packages/mdc-tab/README.md b/packages/mdc-tab/README.md
@@ -143,6 +143,7 @@ Mixin | Description
 `mdc-tab-fixed-width($width)` | Sets the fixed width of the tab. The tab will never be smaller than the given width.
 `mdc-tab-horizontal-padding($padding)` | Sets the horizontal padding of the tab.
 `mdc-tab-height($height)` | Sets custom height to tab bar.
+`mdc-tab-text-transform($transform)` | Sets tab `text-transform` property
 
 ## `MDCTab` Properties and Methods
 

diff --git a/packages/mdc-tab/_mixins.scss b/packages/mdc-tab/_mixins.scss
@@ -204,6 +204,20 @@
   }
 }
 
+///
+/// Sets tab text transform
+///
+/// @param {String} $transform The text-transform property to apply.
+///
+@mixin mdc-tab-text-transform($transform, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    text-transform: $transform;
+  }
+}
+
+
 //
 // Private
 //

diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss
@@ -296,6 +296,7 @@
     @include mdc-tab-without-ripple($query: $query);
     @include mdc-tab-ripple($query: $query);
     @include mdc-tab-height(0, $query: $query);
+    @include mdc-tab-text-transform(uppercase, $query: $query);
     @include mdc-tab-bar-density(0, $query: $query);
     @include mdc-tab-bar-stacked-density(0, $query: $query);
     @include mdc-tab-bar-tab-scroller-transition(0, $query: $query);