Full width custom RadioButtonGroup

[kkenna3]

Hi, We are migrating Call Insights to Console.Zen and it was recommended in office hours to use a custom RadioButtonGroup for an interaction we were trying to recreate. A user is able to switch between graphs within a card but also see the average value displayed on the button.

We were trying to make the RadioButtonGroup full width across the card, but the engineer is having difficulties achieving that as it takes the width of the content instead. Is there a way to override it to full width, or should we hug the content?
Figma - what we prefer
Figma - what we're seeing (and okay with if it's recommended)

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Tabbed graphs in Console (updated: 07/11/2024, similarity score: 86%)
• Tabbed graphs in Console - Answer (updated: 07/11/2024, similarity score: 84%)
• Button Groups and Disclosure Accessibility (updated: 10/11/2023, similarity score: 84%)

[dosubot[bot]]

Hey @kkenna3! 👋 I'm here to help you with any bugs, questions, or contributions. Let's tackle this together while we wait for a human maintainer.

To make the custom RadioButtonGroup full width across the card, you can set the width property of the Box component that contains the RadioButtonGroup to 100%. This will ensure that the RadioButtonGroup takes the full width of its parent container. Here's an example of how you can modify the code:

<Box
  display="flex"
  flexDirection="column"
  alignItems="center"
  rowGap="space130"
  width="100%"
  element="CARD_AND_BUTTONS"
>
  {/* Your existing theme logic here */}
  <Box width="100%">
    <RadioButtonGroup
      attached
      name="themeable-builder"
      value={theme}
      legend={<ScreenReaderOnly>Component preview theme</ScreenReaderOnly>}
      onChange={(newValue) => {
        setHasManuallyChangedTheme(true);
        selectTheme(newValue as ThemeType);
      }}
      orientation="horizontal"
    >
      <RadioButton id={useUID()} value="default">
        Default
      </RadioButton>
      <RadioButton id={useUID()} value="dark">
        Dark
      </RadioButton>
      <RadioButton id={useUID()} value="twilio">
        Twilio
      </RadioButton>
      <RadioButton id={useUID()} value="custom">
        Custom
      </RadioButton>
    </RadioButtonGroup>
  </Box>
</Box>

By wrapping the RadioButtonGroup in a Box with width="100%", it will stretch to fill the width of the card ^[1].

To continue talking to Dosu, mention @dosu.

[PabloFNK]

That is what I am already doing with no success

[nkrantz]

Hey @kkenna3 and @PabloFNK - sorry for the delayed response on this discussion. Taking a look now!

[nkrantz]

You're correct that there's not currently a way to make RadioButtonGroup take up the full width of the parent element (without doing some sketchy calculations). If you're comfortable with the 2nd option, that would be the most straightforward way to go. If you'd like to build something custom to span the full width of the Card, let me know and we can talk about next steps.

[PabloFNK]

What do you mean with the second option?

[nkrantz]

This Figma that Kara linked in the original post, which uses the Radio Button Group as it's currently designed (to hug the width of its contents).

[krisantrobus]

Just checking in with you @PabloFNK. Was @nkrantz suggestion above able to resolve your problem or would you like to continue this discussion?

[PabloFNK]

We have achieved something similar to the first design with CustomizationProvider and Flex. This is far from ideal but we are going with this solution for now.

But it would be lovely if Paste could provide an easy way to have that component take the whole width without the usage of CustomizationProvider.