Material-ui: [ToggleButton] Incorrect styling for adjacent, selected, vertical buttons

[ryancogswell]

ToggleButton modifies the styles of adjacent, selected ToggleButtons:

export const styles = (theme) => ({
  /* Styles applied to the root element. */
  root: {
    '&$selected': {
      '& + &': {
        borderLeft: 0,
        marginLeft: 0,
      },
    }
  }
}

This styling is intended for the horizontal orientation, but is also being applied to the vertical orientation. Also, the equivalent styling for vertical (i.e. for borderTop and marginTop) is missing.

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The net effect is that when there are adjacent, selected, vertical buttons, the selected buttons after the first selected button are missing their left borders and the top borders are slightly thicker/darker than they should be.

Expected Behavior 🤔

The borders for selected vertical buttons should have the same appearance as horizontal apart from the orientation change.

Steps to Reproduce 🕹

Here is a v4 sandbox based on one of the demos that reproduces the problem: https://codesandbox.io/s/togglebutton-selected-border-issue-j1m2c?file=/demo.js

Here is a similar sandbox but using current v5: https://codesandbox.io/s/togglebutton-selected-border-issue-v5-0kf3q?file=/demo.js

You can see that the left border of the second vertical button is missing and the top border of that same button is thicker/darker than the equivalent border between the first two horizontal buttons.

Context 🔦

This issue was brought to my attention by this StackOverflow question.

The workaround that I provided in my answer was the following:

const ToggleButtonGroup = withStyles((theme) => ({
  groupedVertical: {
    "&&.Mui-selected + &&.Mui-selected": {
      borderLeft: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
      borderTop: 0,
      marginTop: 0
    }
  }
}))(MuiToggleButtonGroup);

The real fix should probably remove the horizontal-specific styling from ToggleButton and instead control it in ToggleButtonGroup in an orientation-specific fashion. Alternatively, it could still be done in ToggleButton, but orientation would need to be passed from ToggleButtonGroup so that the styles can be orientation-specific.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v5.0.0-alpha.11 (also v4.11.0) |

[oliviertassinari]

The real fix should probably remove the horizontal-specific styling from ToggleButton and instead control it in ToggleButtonGroup in an orientation-specific fashion.

It sounds like a great solution.

[Avi98]

Hi @ryancogswell and @oliviertassinari , can I take this issue.