Is there a way to make a HelpDrawer toggle flow with surrounding content and wrap?

[Josh68]

This question is related to #2652

I've found a way to make Tooltip triggers flow with surrounding content and wrap correctly. To do this, I can set the component to include display: inline and render the trigger as an anchor element.

I think there isn't a way to do this same thing with HelpDrawerTrigger. I can pass inline, but it's still rendered as a button, and I don't seem to be able to make its content flow and wrap, along with other content (button text can wrap, but it doesn't seem to do so in relation to other content). Maybe I'm missing the right CSS to achieve this, but I wonder if there's a reason why the drawer trigger can't also optionally render as an anchor?

[pwolfert]

Hey @Josh68, maybe we can combine these discussions, because they're related and possibly have the same resolution. Here's what you said in your other discussion:

MCT has a custom implementation for Tooltips at the moment, for which I may file other issues or start a new discussion.

But I just realized that to get truly inline tooltip triggers (that flow with surrounding content and also wrap correctly), I need to add ds-c-tooltip__trigger-link to className and also pass component="a" as an additional prop.

Is there a good design reason why there can't just be an inline prop or similar that handles this completely?

We actually just discussed this at the end of last month in one of our meetings. The tooltip component needs a lot of love in general, but what we're proposing is a new component for the tooltip triggers. It's actually not good for accessibility to use links for these triggers, but that's historically how we have achieved that inline styling. We discussed a phased approach starting with documentation, but then we determined that we really need to have an alternative built before we officially tell teams not to use links. Notes on what we plan to do:

1. Research, design, and build a new tooltip trigger component that fits all the valid use cases and encapsulates a standard style
2. Make a documentation change to tell people not to use links, and remove our storybook story that uses a link 
3. Along with that new component’s release, we’d add a deprecation warning in the code for teams still specifying a component prop that is anything but a “button”
4. Remove that deprecated prop in the future

CC @SparrowSpit, @zarahzachz

[Josh68]

Thanks, @pwolfert. So, I'd agree that, semantically, using a for a trigger is semantically incorrect. Right off the bat, however, do you or anyone else on your team know how to achieve the same, truly inline layout with a button trigger? I'm just failing on that front with a HelpDrawerTrigger, and it's certainly possible I'm missing something obvious.

[Josh68]

I guess something entirely else, like a span, perhaps with a helpful button role, could also work?

[pwolfert]

@Josh68, unfortunately we don't have a CSS solution for this. I thought we did, but none of the solutions we've explored have panned out. We just had a meeting with the UX lead of your site, and it's a larger problem to unpack. I'll DM you with more details