[carbon-react] Input className prop inconsistencies

[janhassel]

What package(s) are you using?

• carbon-components
• carbon-components-react

Summary

The elements which receive extra classnames one can provide to carbon components vary for the different inputs. This makes it really hard to apply some custom styling to individual input components consistently.

• For text inputs and textareas, the className gets added to the actual input (or textarea) element
• In number inputs and the select component, it is added to the outer-most element (.bx--number / .bx--select), where .bx--form-requirement is a child.
• For Dropdown, ComboBox and MultiSelect the className is added to a wrapper element adjacent to .bx--form-requirement.

Is it planned to make this behaviour consistent and therefore more predictable in v11?

[emyarod]

yes this is on our radar (related #5208 #4356 (comment) #4321 #2529)

[janhassel]

Thank you for the references, @emyarod!

Is there already a rough timeline of when v11 will be released? I'm not looking for a specific date but something like this year / next year / beyond that, would already help.

[emyarod]

@janhassel nothing is finalized at the moment but I would say at the very least in 6 months or further down the road

[vpicone]

We should compare and normalize all the props between inputs as part of this effort. For example, titleText (Dropdown) and labelText (TextInput).

[vpicone]

If we want to broaden the scope to include events, that might be helpful as well (for ex. should Dropdown pass an event like the other form inputs do)