I found out that you can set the height of a MDC Web's Filled Text Field using the SASS mixin @include height(20px). However, upon setting the height using said SASS mixin, the floating label that is displayed just disappears.
On further inspection, it seems like it is set to display: none. When I manually set it to display: block, it doesn't float correctly and is too near to the input text.
How can I make the text field to be smaller in height, but still show the floating label correctly?
This is not mentioned in docs, but height mixin actually has more than one argument:
@mixin height(
$height,
$minimum-height-for-filled-label: variables.$minimum-height-for-filled-label,
$query: feature-targeting.all()
) { ... }
The second parameter sets minimum height for showing floating label. If height is less than the minimum, the label will not be shown. Default value is 52px. So I think label hiding is done on purpose.
I tried setting $minimum-height-for-filled-label parameter to smaller value, but textfield behavior becomes broken. May be there is a way to fix behavior by overriding some other SCSS variables, or maybe it is not meant to be used with too small heights... or just buggy.
Alternatively you can try using density mixin. For density -1 it still shows floating label, but height is a little smaller than default. IMHO this way is more in align with Material Design guidelines.
Here is link with examples - https://codesandbox.io/s/mdc-textfield-height-test-yj6lm