Render *Element components with div instead of span

[indiesquidge]

This is based on the confusion I had when trying to apply a custom class to one of these components.

[cweiss-stripe]

Hi @indiesquidge, thanks for your PR. I am wondering why the span elements where confusing for you and if there are some specific difficulties in styling spans instead of divs?

The reason we went with them is, that spans are inline elements whereas divs are block elements. We decided to easily enable labels on the same line as the input elements by using span. In general inputs behave more like spans (inline) than divs, and we’re trying to mimic inputs a bit.

I’m closing this for now, but we can re-open if I am missing something crucial here.

[indiesquidge]

I am wondering why the span elements where [sic] confusing for you and if there are some specific difficulties in styling spans instead of divs?

@cweiss-stripe, the link I included in the PR description outlined my confusion. I was attempting to apply custom styles to the element, but noticing that many of the styles were not taking effect.

In retrospect, this was more of an issue with me not realizing that <*Element> components rendered a span, but the point I bring up about it now is that rendering a span is actually more confusing than rendering a div because <*Element> components appear to render as block elements.

We decided to easily enable labels on the same line as the input elements by using span

Could you help me understand how using spans in the render enables the elements to have inline labels in this case? AFAICT, when I use any <*Element> component with a label, the component is rendered to the UI on a new line. Example

[indiesquidge]

I believe this PR should be re-opened and reconsidered. Despite <Element> rendering a span, when the component is actually used, it is displayed in block format, which is more synonymous with the behavior of a div.

[cweiss-stripe]

(reopening this after looking into this further)

Thanks for the additional info!
Given the current behavior of Elements, which is indeed more synonymous with divs it seems more reasonable to use a div as a wrapper.
We'll change that and bump the react-stripe-elements version! 👍

[cweiss-stripe]

Merged, thanks for the PR @indiesquidge

[indiesquidge]

Awesome! Thank you, @cweiss-stripe