textfield hotspot

[leibale]

Hi,

The hotspot for the "native elements" (input, textarea) is smaller than div.mdc-text-field (see the image below). I'm actually not sure if it caused by balm-ui or material-components-web..

[elf-mouse]

Yes, It's the default rendering by MDC.

And you can overwrite css by sass var $input-height

BalmUI 9.x Docs next-material.balmjs.com for Vue 3.0

[leibale]

In the interactive demo of the text fields in the official material design site, it renders the input on the whole space, and I assume that this should/is the default behavior... Correct me if I'm wrong...

[leibale]

Also, this code

@use '~balm-ui/components/textfield' as textfield-variables with (
  $input-height: 100%
);

throws "Can't find stylesheet to import." error.

(and prob there is no configuration error cause I have some variables set on form-field and it dose works, so...)

[elf-mouse]

In the interactive demo of the text fields in the official material design site, it renders the input on the whole space, and I assume that this should/is the default behavior... Correct me if I'm wrong...

Because material.io uses the material-components-web@5.x, and material.balmjs.com/next-material.balmjs.com uses the material-components-web@8.x (canary version)

[elf-mouse]

Also, this code

@use '~balm-ui/components/textfield' as textfield-variables with (
  $input-height: 100%
);

throws "Can't find stylesheet to import." error.

(and prob there is no configuration error cause I have some variables set on form-field and it dose works, so...)

See BalmUI Textfield Component Docs for details

Dark Sass Usage:

• for balm-ui >= 8

  @use '@material/textfield' as textfield-variables with (
  $input-height: 100%
  );

• for balm-ui >= 6 and balm-ui < 8

  @use '@material/textfield/variables' as textfield-variables with (
  $input-height: 100%
  );

balm-ui < 6: no $input-height variable