Popover has set width

[chleung-1]

Hi, I currently have an Anchor inside of a Popover. However, because the Anchor cannot fit in one line, the focus box has weird behavior. Changing the Popover width would allow the Anchor to be on one line and fix this problem, but the documentation shows that the Popover width is not modifiable.

Is there a way to change the width of a Popover? And if not, is there a reason for this behavior? Thank you!

[SiTaggart]

Hi @chleung-1

You have bumped into two known issues unfortunately.

We already have a story in the backlog to revisit external links in anchors, specifically when the text is long, and wraps on multiple lines. Generally that should work with out you needing to modify the container width.

With regards to the Popover, we have noted a few times now that the width might be a little on the small size for most use cases. I might tag in @twilio-labs/design-systems-pd to see if that's on the radar for an up coming design tweak?

Specifically on the why we don't allow changing the width, there are two considerations:

1. We'd like to facilitate cohesion across our products and believe that common UI controls should look very familiar across different pages and products.
2. We hadn't at the time of creating, seen many use cases outside of what was covered by the current design. We obviously reserve the right to wake up smarter and find more evidence to inform us of use cases that we hadn't considered. This might be one of them.

In the meantime I don't have the best answer for you. We will try and prioritize getting to at least one of these as soon as we can.

[kate-porter]

Hey @chleung-1 - thanks for bringing this up! We've definitely had a couple of use cases pop up recently (pun intended?) that might warrant us widening the Popover component. Popover is actually a Stage 1 component, meaning it hasn't gone through our design processes yet, so there's very likely room for improvement. We are aiming to take Popover through our design process for our October 5 release.

In the meantime, if you have any other examples in your product(s) where you've felt that the Popover was too small, please do share!

[chleung-1]

Sounds good! Thank you for the responses.

[PabloFNK]

In our team we also require width customisation in order to display inline some content. Do we have any update on this?

[TheSisb]

Just following up, Anchors are fixed so they wrap and focus correctly. Still no updates on adjustable width popovers yet.

[nkrantz]

A little more context on the Popover width: revisiting Popover and transitioning it to Stage 2 is on our Roadmap for Q1. It's not definite that we'll be allowing custom widths as part of that update, but we have been getting lots of requests for it, so it's something we'll be considering. What is your timeline looking like for this design? If you're not able to work with the current Popover width until that release, you can either create a custom Popover (less ideal) or visually Truncate the SID in the Popover, providing a copy button so that users can grab that value.