[Switch] ref attribute is not the root element

[williamscs]

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

Current Behavior 😯

When attempting to use the width of a Switch component, I don't get the width of the surrounding span.

Expected Behavior 🤔

When getting the offsetWidth of the Switch's ref, it should be the width of the entire component.

Steps to Reproduce 🕹

Attempt to use the ref component and retrieve the width. Set a component to marginLeft to share that width. (I've also reset the margin).

https://codesandbox.io/s/gifted-joliot-gxzni

Context 🔦

I would expect the helper text to align with the label of the switch (see codesandbox example)

I noticed that the ref was pointing to SpanBase: https://github.com/mui-org/material-ui/blob/7f4b81ffb7b76f73319b38f1b9f287f43c74e6d0/packages/material-ui/src/Switch/Switch.js#L162-L187

Perhaps the ref should be the span and an 'innerRef' would point to the SpanBase? I'm unsure of the right way forward. Maybe I'm misinterpreting what "root" should be, however I would like to get the width of the Switch itself, parent span CSS included.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.1
React	v16.12.0
Browser	Chrome

[oliviertassinari]

@williamscs Nice catch! I'm not sure it was done deliberately. 8a13bc294e0#diff-8d33bd694cc029cf64dd1749dfc57438R117.
@eps1lon What do you think of moving the ref to the root as a bug fix?

[eps1lon]

@eps1lon What do you think of moving the ref to the root as a bug fix?

And we need to fix our conformance test. The docs we generate from the test don't reflect the behavior correctly.

[captain-yossarian]

@williamscs @oliviertassinari @eps1lon if you don't mind I will pick it up

[oliviertassinari]

@michaldudak This one might be relevant to your exploration on the unstyled slider.

[michaldudak]

I actually fixed this unknowingly while implementing the Switch using unstyled primitives: #26688.