Inline context help for nimble-combobox

[mure]

😯 Problem to Solve

Hi all - I'm starting to look at ⁠this feature, part of the new routines UX that requires Nimble updates.

The goal of the feature is to be able to display inline help for the workspace selector field. The current wireframes show this UX:

Hovering the ℹ️ icon would display a tooltip. This would require changes to the nimble-combobox.

💁 Proposed Solution

I'm anticipating pushback on the UX above, mostly because it conflicts with the existing UX for displaying validation errors:

My proposal would be to move the tooltip hover icon into the component's label. This approach can apply to all form controls, so it's both easier to implement and less cognitive load for users.

Here's an example of how Grafana's design system does inline help:

My intent for this issue is to come to a consensus on the correct UX and implementation for the feature. Based on the outcome, I can create a spec if needed. My understanding is that we'll also need to create or update an IxD spec.

🙋‍♂️ Open issues

• Decide on UX of inline help for form controls
• I noticed in Storybook that the combobox doesn't seem to have a label attribute. Will we need to add this?
• Should we resurrect the nimble-tooltip for this feature?

[m-akinc]

@mure, please set up a meeting with @leslieab, @NIbokeefe, and @mollykreis to discuss direction.

[mollykreis]

This has come up again in SLE apps.

Draft PR of creating an Angular directive to work around this feature missing from nimble: https://dev.azure.com/ni/DevCentral/_git/Skyline/pullrequest/646253?_a=files&path=/Web/Workspaces/LabManagement/src/app/context-help.directive.ts

[jattasNI]

Visual design is available as nimble-toggle-tip.

There are open interaction questions like:

• what is the keyboard interaction? Does it capture focus on keyboard and mouse interactions?
• are there any touch interactions?
• what is the presentation in the accessibility tree?
• does this need different severity states like error and info?

We decided to allow SLE to build a shared version with some hacks to reach into the shadow DOM while we work on resolving these questions and building a Nimble version.

[fredvisser]

Closing in favor of #1876