Toggletip: Add support to programmatically close it

[adela-almasan]

As part of the WIP DashGPT project, we needed to be able to close the Toggletip after clicking a button. I've added some changes to reflect that functionality, I'd appreciate feedback. Being optional, I don't believe the change should be disruptive of the current functionality.

Extracted from #75204

toggletip.mov

Special notes for your reviewer:

Please check that:

• It works as expected from a user's perspective.
• If this is a pre-GA feature, it is behind a feature toggle.
• The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

[nmarrs]

LGTM

[ashharrison90]

don't think we would want to do this via an effect. have started a discussion in slack to figure out the best way of handling this 👍

[ashharrison90]

so looking at the documentation for toggletip i think we'd recommend against putting this kind of stuff in a Toggletip altogether and probably recommend a Modal instead. one of the main don'ts for Toggletip is:

Do not use to surface actions to users

if we were to add something like this, which i think does have value, i think we'd want to do it in the form of a show prop similar to Tooltip whereby you manually handle the visible state outside of the Toggletip component.

[staton-hyse11]

This seems like a misuse of the toggletip component. The use case shows a user having a dialogue with the system, which would point to a modal being more appropriate. Toggletips should not be vehicles for users to configure, edit, or select data on a page. They are primarily used for providing contextual information and/or linking to documentation that will help users gain more information about their task at hand, not really for managing a task themself — if that makes sense. I'm happy to chat through this more if you want.

[ivanortegaalba]

The usage of toogletip here is to take references of leaders in generative AI in the market. Here is an example of Grammarly:

This "popover" appears to assist you in generating something on a specific input. Opening a modal completely removes the user from the context, and disturbs a lot of the experience. Actually, you create an experience itself about improving a text, where the main task for the user is to autogenerate and refine the result with some feedback.

Do you think, for this use case, the best UX is a modal? Can't we use a floating component that can be reused in any input field that can be auto-generated? Is here a modal a better experience? If it is, why?

[torkelo]

If we are to use this component with forms inside it's a popover and we should use the popover background (primary) like all our other popovers

[torkelo]

For popover reference, TimeRangePicker, ColorPickerPopover can't think of others right now.

[staton-hyse11]

After discussing with @ivanortegaalba, this use case makes sense for the toggletip.

We'll look to create a generic popover component in the future to help with use-cases like this and align with the proper background color and as the other popovers use.

[ashharrison90]

if we were to add something like this, which i think does have value, i think we'd want to do it in the form of a show prop similar to Tooltip whereby you manually handle the visible state outside of the Toggletip component.

this comment still applies ☝️

[ivanortegaalba]

if we were to add something like this, which i think does have value, i think we'd want to do it in the form of a show prop similar to Tooltip whereby you manually handle the visible state outside of the Toggletip component.

Agree! I can apply that feedback if that's ok @adela-almasan

[ivanortegaalba]

I pushed an update with the new prop @ashharrison90. It should be fine now

[nmarrs]

@ashharrison90 given recent changes / addressing the show prop feedback are you comfortable removing (or with us removing) your request for changes on this PR? Thanks!

[ashharrison90]

lgtm 👍

[torkelo]

are we changing the design (background) in a follow-up PR?

[adela-almasan]

@torkelo yes - first step here #76069. I've just added a "custom" theme with the styling we want (primary background) - I think it's less invasive than allowing custom styling and I'm not sure if that's something we want to support right now. cc @ashharrison90