Radio Button Group - figma error

[dreamealist]

Hi team,
I'm using the new Radio Button Group component for the Conversations API console feature design.
(Super helpful that we have this component btw!)

When i turn on "selected" for one of the buttons in the group - there is an error that the border-right doesn't show. Please see the attached image. If this is an error, would you please fix the component? Thank you!

Jiyeon

[loreina]

Hi Jiyeon,

The border design, though strange, is intentional and the same in code. We use shadow borders here instead of color borders so as to not affect the actual width/height of the button, and because of the stack order of elements in code, the borders end up overlapping. Hope this helps!

[dreamealist]

Oh, interesting. It definitely looks like an error to me, considering that it's the same selected state of the original button component. Do you have any similar examples outside of Twilio?
If it's mainly by the technical limit, Is it possible to resolve the issue by setting the z-index value to set the z-order of the selected element as a priority?

[loreina]

That could be a possible resolution so hover and selected elements are stacked above the other buttons.

Since the component has already gone through design systems committee, feel free to submit a dependency request if you feel strongly that the team should consider updating the design. Thanks!