fix(Input): Added htmlSize prop to set native size attribute

[adamhock]

Changes

Added htmlSize prop to the Input component which handles the native size attribute in <input>.

Closes #973

Testing

Added new unit test

Docs

Updated documentation to explain new prop
Changeset added

[mayank99]

maybe we can leave size as-is and then add htmlSize for native attribute? we can explain the difference in the jsdoc and our documentation site.

reason: it is way more common to use the size prop to change height, than it is to use the native size attribute to constrain width.

[adamhock]

maybe we can leave size as-is and then add htmlSize for native attribute? we can explain the difference in the jsdoc and our documentation site.

reason: it is way more common to use the size prop to change height, than it is to use the native size attribute to constrain width.

Great idea! This has been updated.

[LostABike]

Everything looks fine, I just have a question. The native size attribute of <input> is to determine how many characters will be visible right? However, because we have inline-size = 100% within our <Input/> component styling, setting this size (or htmlSize) will not do anything unless user specifically override our component inline-size styling. Is this intended?

[gretanausedaite]

LGTM.

[mayank99]

The native size attribute of <input> is to determine how many characters will be visible right? However, because we have inline-size = 100% within our <Input/> component styling, setting this size (or htmlSize) will not do anything unless user specifically override our component inline-size styling. Is this intended?

It is intended that our input fills up the width of the container, because otherwise it would have some weird default width. So yeah, to make use of this size (htmlSize) attribute, the developer would need to use width: unset or inline-size: unset. We could mention this in the jsdoc comment for our prop.

[adamhock]

The native size attribute of <input> is to determine how many characters will be visible right? However, because we have inline-size = 100% within our <Input/> component styling, setting this size (or htmlSize) will not do anything unless user specifically override our component inline-size styling. Is this intended?

It is intended that our input fills up the width of the container, because otherwise it would have some weird default width. So yeah, to make use of this size (htmlSize) attribute, the developer would need to use width: unset or inline-size: unset. We could mention this in the jsdoc comment for our prop.

Could we apply width: unset or inline-size: unset stylings to <Input> if an htmlSize prop is passed?

[mayank99]

Could we apply width: unset or inline-size: unset stylings to <Input> if an htmlSize prop is passed?

Overengineering it imo. I do not expect this attribute to be used commonly enough to justify the extra code. If somebody finds the current behavior confusing, we can always revisit in the future.

Oh and slight typo in 6ef5d74 btw. Should say "properties" instead of "attributes".

[LostABike]

LGTM :D