Help Text as span

[rmcruzv]

Currently, we are working on an initiative to create a Toggle switch component and for that, we want to re-use as much paste components as we can.

Currently, the proposed design shows the help text on the right side of the component (using a Text component), but we would like to use a HelpText component instead. However that is not possible right now because the current implementation of HelpText component draw it as a div and the given text appears below instead of on the desired side.

So, the question here is: would be possible to add some property allowing show this type of components as a span?

[kate-porter]

Hey @rmcruzv - thanks for asking about this. I'll share with the broader team for discussion and will report back soon!

[kate-porter]

@rmcruzv one quick question for you: can you share more about why you'd like the HelpText to appear beside the Toggle rather than below it?

[rmcruzv]

Hi, sure, that is we want to achieve:

[andioneto]

Hi @rmcruzv Thank you for your patience!

I think @shleewhite followed up with you separately, so I will summarize that information here. 👇

Hi, sure, that is we want to achieve:

Specifically for the layout of this UI, you will need to use a layout component to achieve this presentation. Our components are meant to be composed with layout components to achieve a final layout pattern. By explicitly creating and using components limited to controlling layout, essentially separating the stateful/app concerns of the component from the layout, we are able to reuse combinations of components more broadly.

Check out this CodeSandbox where we use a Box with display="flex" to position the box and the help text visually inline with one another. While it is true that a div by default is has a display property of block and a span has a display property of inline, we do not need to rely on the HTML elements' default styling, to achieve this.

Since we are in the process of planning this component, we do not have a definitive answer here regarding placement of help text inline or not, but likely we will pursue consistency with the rest of our form elements (in which the help text is below the form element control).

Please let us know if you have further questions!