[Form Field] mod-undefined is added whenever a size isn't provided

[klediouron]

trafficstars

When using the <lu-form-field>, if a size isn't provided with its @Input, the [mod-${this.size}] class is actually a mod-undefined.

A way to avoid this might be to set a defaultValue to the size input, such as 'M', or make it required.

[Supamiu]

mod-undefined is the "least bad" approach, definitely not perfect but it's the less intrusive one that won't require additional logic to be handled properly.

Making the size required or making it default to M would cause an issue of parent-styling approach.

For instance, the icon component can take a size parameter. Inside lu-dialog-header, we've got a button[luButton] with no size, which then contains an icon, with no size specified neither. This makes it easy for UI devs to just change the size of child components inside organisms without having to touch the HTML part of the component, and possibly be able to change the size based on classes being applied to the parent component (in the case of organism components like lu-dialog-header).

That being said, we should make a pass on components at some point to just set [mod-${this.size}]: Boolean(this.size), making it only show if the value evaluates to true.