Implementing a Popover with a custom button

[synnottd]

Hi there,

I need to create a popover with a custom button (got a 👍 in a UX review) to open it. Unfortunately it looks like as well as using the Box primitive for the Button, I'll need to use Non Modal Dialog Primitive since the PopoverButton hardcodes to a Button and the PopoverContext isn't exported. I also tried importing it directly but that also didn't work e.g. import { PopoverContext } from '@twilio-paste/popover/dist/PopoverContext';

So my approach would be to essentially copy the Paste implementation for Popover but provide a custom Button (and possibly change the popover width).

I just wanted to double check I hadn't missed anything, as I really would prefer not to go down the Non Modal Dialog Primitive if at all possible.

Thanks!

[kate-porter]

Hey @synnottd - can you share the design so we can see what this custom button looks like? I'm wondering if the Reset Button could work for you instead of composing a custom button using Box. This should allow you to use Popover instead of the Non-modal Dialog Primitive.

[serifluous]

Here's an example that you could use as reference, though it's not the most perfect right now because of the kinda weird focus state: https://codesandbox.io/s/extend-a-popover-vbdkb?file=/src/index.tsx

Hopefully this helps point you in the right direction!

[eleifer-twilio]

Hi @serifluous and @katieporter ,

For some UX context, The regional team has gone through a series of reviews in DSYS office hours, crits, and UX Clinics etc for this component across the platform. We have a need to create cohesion quickly to support many teams that will need to adopt and develop it. We got sign off on this direction at DSYS office hours. The challenge for development is that we need to tweak the button and popover component.

To create alignment, @synnottd has taking on the responsibility of creating this for Regional. This component will be extended and be used by Phone numbers, Console, and Identity for the Regional Pilot and more teams for GA. I was hoping to use a paste component but we do not see one that fits to this badge/status need that we have. Is this something that DSYS can help all of these teams with by creating a new badge with popover for regional? If not, please advise how @synnottd can best move forward with the tools that he has to contribute this component.

My goal is to ensure that the experience is cohesive and to not duplicate effort. This Regional Information Affordance Badge will be implemented by more teams soon and I am hoping we streamline its implementation so that we can make edits quickly. Please advise how to tweak the popover component to fit this need.

Attached is a spec for reference. Please let me know if you have any questions or concerns.

[kate-porter]

@eleifer-twilio yep, we're familiar with the work. I didn't realize this was the project that @synnottd was asking about in the initial question. Thanks for providing the context here.

We've offered up an option that would allow y'all to use the Popover component rather than building it custom from the Non-Modal Dialog primitive, so the next step would be to see if that implementation will work for you.

[synnottd]

Sorry for not giving more context originally, I was a bit cautious about sharing internal Twilio docs I don't own 😄.

I clearly need a new brain, a Box inside a reset Button never occurred to me thanks!

Is there anyway to manage the width of the popover? Or is it just hardcoded?

[synnottd]

This is what I was able to come up with using the reset button.

https://166a9bfdda9a--twilio-console-storybook.netlify.app/?path=/story/utilities-regionalpopover--default
It differs from the designs slightly

• border radius on the button to open the popover
• The popover is not as wide as the designs
• The padding between the popover and it’s content is not exactly right
• And like @serifluous the boxshadow(?) on focus state isn't right

We can solve the last three using the Non Modal Dialog Primitive. I don’t see a way of solving the radius problem with a design token, it seems like the largest radius is 8px and this would need 12px.

[kate-porter]

Awesome! This looks great. Glad it worked out!

If I can make the tiniest nit pick, do you think you could use the regular font weight in the button instead of the light font weight? We are trying to steer folks away from the light font weight since it's hard to read.

Also, the Popover width will expand a bit more once there's more content in it, like so:

Might not match the design spec exactly, but I'd definitely recommend going with this so you inherit any popover updates in the future. The custom width and padding don't seem worth building something from scratch. I think what you've got here is great.