InputControl: Add optional Tooltip for inner input field

[aaronrobertshaw]

Related:

• Components: label multiple / composed inputs correctly #42630
• BorderBoxControl: Add Tooltips around split border controls #42661

What?

Adds the ability to provide a tooltip for the InputControl's inner input field.

Why?

This helps avoid the possibility of nested tooltips when the InputControl has an interactive prefix or suffix which might have its own tooltip.

How?

• Adds new showTooltip & tooltipText props to the InputControl API
• If showTooltip is true along with tooltipText or a string label, the inner InputField is wrapped in its own Tooltip
• If rendering a Tooltip the InputField is wrapped in a div to avoid issues

Testing Instructions

1. Open up Storybook
2. Confirm the InputControl component displays the same on trunk as this PR (with or without showTooltip enabled)
3. Enable showTooltip in the story controls and confirm the tooltip displays both on hover and via keyboard focus
4. Provide a custom tooltipText value via story controls and confirm that text is used in the tooltip.
5. Take a look at the other Storybook examples for InputControl and confirm Tooltips
6. Check higher-level components that leverage InputControl still function/look correct e.g. UnitControl etc.

Screenshots or screencast

Screen.Recording.2022-08-01.at.5.21.34.pm.mp4

Original demo without custom tooltip text support

Screen.Recording.2022-07-27.at.5.19.01.pm.mp4

[aaronrobertshaw]

This PR was drafted to explore options raised in #42661. It was also suggested that it might be beneficial for more than just the BorderBoxControl.

[ciampo]

Code changes look nice and clean.

One aspect I also wanted to consider is that this approach goes a little bit against out general intentions of keeping low-level components modular and composable. I thought about exposing a renderInputWrapper prop that could be customised to include a Tooltip when needed, but if we think that the Tooltip functionality may be useful as a always-present feature of InputControl, then we should leave it as is.

Also, another thought: to avoid nested tooltips, we should find a way to only render this tooltip if there aren't any other parent Tooltips in the virtual DOM tree — which is being discussed in #42630

[aaronrobertshaw]

but if we think that the Tooltip functionality may be useful as a always-present feature of InputControl, then we should leave it as is.

I think this could be handy to have around.

Also, another thought: to avoid nested tooltips, we should find a way to only render this tooltip if there aren't any other parent Tooltips in the virtual DOM tree — which is being discussed in #42630

Agreed. I'd like to tackle that within a follow-up once we have mechanism to achieve it e.g. a disable flag via context etc.

[ciampo]

While reviewing this PR, I also considered, as an alternative to exposing showTooltip and tooltipText, a more generic tooltipProps prop which we would just forward to the Tooltip component, but then I came to the conclusion that it's not ideal in this scenario, since we may not want to expose all Tooltip's props to the consumer of InputControl.

[ciampo]

I don't have any further feedback on this PR at the moment — I guess the next step would be to understand in #42661 if this is the way to go.

If that's the case, I'd argue that we may want to add some unit tests for tooltip functionality and mark this PR as ready for review — at that point, I'll give it a final round of review & testing.

[aaronrobertshaw]

Closing this old PR. If we come back to this or a similar approach it can be reopened.