Skip to content

Commit 22d7ad2

Browse files
authored
feat(tab): Add text transform mixin (material-components#5144)
1 parent 996b091 commit 22d7ad2

File tree

3 files changed

+16
-0
lines changed

3 files changed

+16
-0
lines changed

packages/mdc-tab/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ Mixin | Description
143143
`mdc-tab-fixed-width($width)` | Sets the fixed width of the tab. The tab will never be smaller than the given width.
144144
`mdc-tab-horizontal-padding($padding)` | Sets the horizontal padding of the tab.
145145
`mdc-tab-height($height)` | Sets custom height to tab bar.
146+
`mdc-tab-text-transform($transform)` | Sets tab `text-transform` property
146147

147148
## `MDCTab` Properties and Methods
148149

packages/mdc-tab/_mixins.scss

+14
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,20 @@
204204
}
205205
}
206206

207+
///
208+
/// Sets tab text transform
209+
///
210+
/// @param {String} $transform The text-transform property to apply.
211+
///
212+
@mixin mdc-tab-text-transform($transform, $query: mdc-feature-all()) {
213+
$feat-structure: mdc-feature-create-target($query, structure);
214+
215+
@include mdc-feature-targets($feat-structure) {
216+
text-transform: $transform;
217+
}
218+
}
219+
220+
207221
//
208222
// Private
209223
//

test/scss/_feature-targeting-test.scss

+1
Original file line numberDiff line numberDiff line change
@@ -296,6 +296,7 @@
296296
@include mdc-tab-without-ripple($query: $query);
297297
@include mdc-tab-ripple($query: $query);
298298
@include mdc-tab-height(0, $query: $query);
299+
@include mdc-tab-text-transform(uppercase, $query: $query);
299300
@include mdc-tab-bar-density(0, $query: $query);
300301
@include mdc-tab-bar-stacked-density(0, $query: $query);
301302
@include mdc-tab-bar-tab-scroller-transition(0, $query: $query);

0 commit comments

Comments
 (0)