mpetuska/kmdc

MDCTextField attr classes are not applied to the outermost element

OliverO2 opened this issue · 6 comments

OliverO2 commented

Setting a grid cell span directly on a text field like this does not work:
MDCTextField(value, attrs = { classes("mdc-layout-grid__cell--span-2") })

A workaround is to enclose it in a Div, and apply classes there.

The text field is a composite and all attributes go to its internal text input element, which is often, but not always what's intended.
Ideally the component's user should not have to reason about the component's internal structure. Ideally, the component should know which attributes to apply on which of its elements. If that's not feasible, options might be to

  • provide an extra classes parameter which addresses the outermost element, or
  • provide separate attr parameters for the outermost and the input element.
mpetuska commented

Oh, nevermind. Integer there is dynamic.

Isn't this case covered by MDCLayoutGridCell ?

OliverO2 commented

Ah, yes, maybe, I'll check that and adapt my added sample code (soon coming to this screen).

I guess the underlying problem still remains: If I'd like to add some padding around the entire component via attr + style I'm probably in for a surprise, too, right?

mpetuska commented

Not sure. I guess we could take google's approach about components and keeping them closed, but exposing their individual pieces so that if people do need to adjust the guts, they can just recompose the component themselves

OliverO2 commented

Regarding MDCLayoutGridCell: Yes that works, and is better than setting the "span" class. I suppose I did not come across it because it was in a separate source file.

  • 👍1
mpetuska commented

Closing as outlined behaviour is not intended for this component.