SDS does not have button groups (for navigation controls)

[aganders3]

I just wanted a place to stash this code. The button groups for @clarsen-czi's designs are based on SDS segmented controls, but I'm not sure those can be adapted for momentary switches instead of stateful toggles. Here's what I came up with using the MUI ButtonGroup that looks pretty close to me. The colors here are hard-coded but there's probably a way to get them from the theme.

import styled from "@emotion/styled";
import { ButtonGroup } from "@mui/material";

const NavButtonGroup = styled(ButtonGroup)({
    "border": "1px solid #EAEAEA", // Add outline to ButtonGroup
    "& .MuiButtonBase-root": {
        "borderRadius": 0, // Remove rounded corners
        "borderRight": "1px solid #EAEAEA", // Add dividers between buttons
        "padding": "0.1em 0.2em", // Add padding to buttons
        "&:last-child": {
            borderRight: "none", // Remove borderRight on last button
        },
        "&:active": {
            color: "#3867FA", // Change text color when pressed
            backgroundColor: "#CCCCCC", // Change background color when pressed
        },
    },
});

Screenshot of the design (not the above code) for reference:

[ehoops-cz]

If we're using the default theme, we can use these css variables from sds in an sx prop. If it makes more sense to use a styled component, czgenepi has examples

import "@czi-sds/components/dist/variables.css";
sx={{
    borderRadius: "var(--sds-corner-m)",
}}