Paste Component/Hook Idea: ToggleButtonGroup and useToggleButtonGroup

[alfredlucero]

Paste Component/Hook Idea: ToggleButtonGroup and useToggleButtonGroup

Hey Paste Team!

Throughout Twilio SendGrid, many of our pages use our legacy Sass styleguide .btn-group classes (see http://styleguide.sendgrid.com/buttons.html) and legacy React component library (ui-components) ButtonList (https://sendgrid.github.io/ui-components/?path=/story/button-list--button-list-on-a-light-background) and ToggleButtons (https://sendgrid.github.io/ui-components/?path=/story/togglebuttons--toggle-buttons) components to lay out a group of buttons together in a certain way or form a toggle/switch format.

Where is it used today?

• Mail Settings and Tracking Settings Enabled/Disabled Toggle Buttons (using ui-components)

• Stats Pages for Day/Week/Month and %/# Toggle Buttons (using legacy style-guide)

• Redesigned Stats Pages to be released - I won't say the project name to avoid spoilers for those outside of Twilio but I'll show one of the charts 😄 (using Paste Button/Box in our own workaround)

We would love to have a Paste version such as something called ToggleButtonGroup to handle these on/off or enabled/disabled toggle buttons like the ones in our settings pages or visualization and time toggles in our stats pages. Also a general ButtonGroup component may be useful similar to ButtonList to handle alignment as we've repeatedly had to wrap with Box around 2+ buttons and one/more of the buttons while adding proper marginRight/Left between the buttons like so

<Box display="flex" justifyContent="flex-end">
    <Box marginRight="space40">
      <Button
        variant="secondary"
        onClick={() => {}}
      >
        Cancel
      </Button>
    </Box>
    <Button
      variant="primary"
      onClick={() => {}}
    >
      Action
    </Button>
  </Box>

Kudos to Alex Thomsen (@GiantRobots) for building out our Paste workaround for visualization toggle buttons to match designs - I adjusted the naming and some of the logic in the sandbox provided below with some examples and context:

CodeSandbox: https://codesandbox.io/s/paste-component-idea-togglebuttongroup-e1qvz?file=/src/index.tsx

The workaround is mostly a wrapper to account for the button border styles when grouped together to make it look like a toggle switch and the custom hook is a nice helper to manage the state of each of the buttons to toggle between selected or not selected with the existing Button components. This keeps things composable to put in your own text/icons within the Button component and consolidates the same boilerplate state management someone would likely have to do if implementing it themselves.

Usage looks like this

 const visToggleButtonGroupState = useToggleButtonGroup(
    ["line", "bar", "table"],
    "line"
  );

return (
<ToggleButtonGroup>
    <Button
      variant={visToggleButtonGroupState.line.variant}
      onClick={visToggleButtonGroupState.line.updateState}
    >
      <DataLineChartIcon decorative={false} title="Line Chart" />
    </Button>
    <Button
      variant={visToggleButtonGroupState.bar.variant}
      onClick={visToggleButtonGroupState.bar.updateState}
    >
      <DataBarChartIcon decorative={false} title="Bar Chart" />
    </Button>
    <Button
      variant={visToggleButtonGroupState.table.variant}
      onClick={visToggleButtonGroupState.table.updateState}
    >
      <DataTableIcon decorative={false} title="Table" />
    </Button>
</ToggleButtonGroup>
);

Thanks! Curious to hear everyone's thoughts and if anyone has more projects that use a similar ToggleButtonGroup or ButtonGroup in general! 😄

[richbachman]

Hi @alfredlucero. Thanks for posting this. I'll share with the team for feedback.

[alfredlucero]

Thanks @richbachman, awesome looking forward to hear their thoughts on it!

[kate-porter]

Hey @alfredlucero - sorry for the delay on this! Just wanted to circle back on this and let you know that we are passing this around the team to give feedback this week. We're super excited about the work you've done here! We may be hitting you up to see if you have bandwidth for a Paste contribution. ;)

[alfredlucero]

Awesome thanks @katieporter for the updates! Cool that sounds great, definitely interested in contributing any way I can to Paste 😄

[TheSisb]

Hi @alfredlucero,

definitely interested in contributing any way I can to Paste 😄

❤️

1. Thank you so much for opening this discussion thread and sharing your work! This kind of contribution to Paste helps us more than you can imagine, seriously.
2. We are currently only one release away from working on this component, so our suggestion would be to turn this into an encapsulated component for your product and bear with us while we wrap up our current tasks. We will definitely circle back when we start working on this.

---

I wanted to leave you with some high levels thoughts we had for this component (not set in stone, we haven't had the kickoff yet):

The way we build this might end up complicating things a little. Mainly because we need a number of different types that look the same:

• Radio button group
• Checkbox button group
• Button group
• Menu button group

The tricky part is knowing where to start, as we may have a11y considerations for each variant. We don't yet know if these will all be part of the same component, or different components. The above is why we can't really provide much direct feedback right now.

Thanks!

[alfredlucero]

Thanks @TheSisb ! Appreciate the context and potential roadmap of group components. Yeah we have this all encapsulated in a component + custom hook for those pages so we can swap em over when we have an official version from Paste 😄 . Exciting to hear yall will be working on this soon