[RFC] Naming of <Label> and <label> relative to an Input component

[brianespinosa]

Feature Request

Problem description

Inside of an Input component we have the concept of a Label component which attaches to the front or back of an input. This is different than the native <label> which appears above an input (or to the left if the input is inline). This leads to confusion for the user, especially when using the shorthand API. When I set something as the label prop, am I setting the html lowercase <label> or am I passing attributes to a Label component.

Proposed solution

I think we should rename the Label component itself, relative to Inputs. This is going to reduce confusion in both discussion and semantics, but also simplify how be define these elements in the shorthand API.

Bootstrap calls these elements addons. That might be a good place to start. They also have the concept of prepend/append for positioning. I think we could just use addonPosition and "before"||"after"

Any other naming suggestions welcomed. I feel like it is early enough on that any challenges to be addressed in this name change can be handled fairly easily.

[kuzhelov]

My absolute support on this proposal - also, we should make it clear that provided Stardust Input component has one-to-one correspondence to input DOM element in general (so that any input attributes supplied to Input component should be reflected by its look and behavior) - and, at the same time we should provide these extensibility mechanism to enhance visual look of Input for certain scenarios (see #120 (comment)).

So, long story short, my proposal is to make Input component to be a strict superset over input element's functionality. As an additional benefit, with this change we will eliminate base ground for the issues like the following: #194, where type='number' is requested to be supported by Input.

---

In regards to naming - generally agree with addon proposal, but may suggest another couple of naming options:

• decorator
• adornment (this is used by Material)

[brianespinosa]

we should make it clear that provided Stardust Input component has one-to-one correspondence to input DOM element in general (so that any input attributes supplied to Input component should be reflected by its look and behavior)

I think this makes sense for any of our components that specifically target DOM elements and share names with them. Basically all of the Form components (TextArea, Input, etc).

Regarding names, I think any of these three are fine and have good semantics. If nobody has a pick for one over the others, I'd go with addon for brevity. Other than that, I don't have a preference.

[codepretty]

I think the Label component should be renamed. Label is confusing, even when not used inside of an Input. Most other companies call a Label a Badge or Tag.

• https://www.lightningdesignsystem.com/components/badges/
• https://blueprintjs.com/docs/#core/components/tag
• https://material-ui.com/demos/badges/

[levithomason]

Just noting, the Label name issue is discussed regularly among the team and we do want to solve it. We're working on an open source effort to find and standardize names. We'll announce that soon.

It is not here yet :/

[brianespinosa]

Whoa @levithomason! Yes, please. Honestly... I am surprised something like this does not yet exist.