Extra <div> wrapper around DateInput DOM prevents setting className, styles on outermost element

[amcclain]

The desktop DateInput component renders with an outer <div> element that does not take the className or style props passed to the component -

hoist-react/desktop/cmp/input/DateInput.js

Line 391 in d7a09df

return div({

Often classNames or styles are used for layout concerns like padding or margins, which can't be controlled here. Specifically, I might wish to use a class or style to override the padding applied to a dateInput within a toolbar - that's something that happens at the outermost layer.

I would vote for applying at least className to the outer div. If needed, could support inputClassName, but not sure we really need that.

[amcclain]

See example of nested DOM elements:

• 1 anonymous (no class specific) outer div
• 2x BP popover spans
• 1 anon div (again)
• 1 div with all of the expected classnames (including duped up xh-input, FWIW)
• 1 BP input-group div
• the actual text input + BP input-actions div for buttons

[amcclain]

Reviving this as I just ran into it again. How about having DateInput take a dedicated wrapperClassName prop?

[amcclain]

We should confirm if this is still an issue with latest BP library