[Switch] Support small size

[darkowic]

• I have followed (at least) the PR section of the contributing guide.

I have added support for switch small size (Closes #16152).

• Add docs and demo
• fix tests

This is how it looks like:

I need help with tests.

• How to run a single test with watch mode? yarn test:watch Switch is not working...
• Finding classes is not working as expected - see test should render the right class

What else should I do to merge this feature?

[mui-pr-bot]

Details of bundle changes.

Comparing: b6182ce...94422d1

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	+0.07% 🔺	+0.08% 🔺	327,251	327,488	90,345	90,419
@material-ui/core/Paper	0.00%	0.00%	68,477	68,477	20,410	20,410
@material-ui/core/Paper.esm	0.00%	0.00%	61,761	61,761	19,177	19,177
@material-ui/core/Popper	0.00%	0.00%	28,896	28,896	10,394	10,394
@material-ui/core/Textarea	0.00%	0.00%	5,534	5,534	2,369	2,369
@material-ui/core/TrapFocus	0.00%	0.00%	3,753	3,753	1,577	1,577
@material-ui/core/styles/createMuiTheme	0.00%	0.00%	16,156	16,156	5,816	5,816
@material-ui/core/useMediaQuery	0.00%	0.00%	3,098	3,098	1,310	1,310
@material-ui/lab	0.00%	0.00%	141,699	141,699	43,813	43,813
@material-ui/styles	0.00%	0.00%	51,886	51,886	15,380	15,380
@material-ui/system	0.00%	0.00%	15,576	15,576	4,445	4,445
Button	0.00%	0.00%	79,711	79,711	24,358	24,358
Modal	0.00%	0.00%	14,548	14,548	5,102	5,102
Portal	0.00%	0.00%	3,471	3,471	1,568	1,568
Rating	0.00%	0.00%	70,267	70,267	22,068	22,068
Slider	0.00%	0.00%	75,096	75,096	23,311	23,311
colorManipulator	0.00%	0.00%	3,904	3,904	1,543	1,543
docs.landing	0.00%	0.00%	54,357	54,357	13,915	13,915
docs.main	0.00%	0.00%	646,774	646,774	203,034	203,034
packages/material-ui/build/umd/material-ui.production.min.js	+0.08% 🔺	+0.08% 🔺	299,666	299,894	86,112	86,181

Generated by 🚫 dangerJS against 94422d1

[darkowic]

Fixed problems with prettier, lint etc

[oliviertassinari]

Regarding the UI of the small size. What did you use as inspiration for coming up with the final values / look? For instance, we could make it really small. cc @VMasap.

[darkowic]

@oliviertassinari I based the size (height) on size of the small version of the Button component - https://material-ui.com/components/buttons/#sizes (variant contained). Then the width is simply visually looking good ;) I am open to discussion about it. There is no specification about what is the 'small' size.

[oliviertassinari]

@darkowic Ok, thanks for sharing the reflection. I have tried to give it a try. Here is the result I came up with.

1. Benchmarking

I'm looking for any design system that has solved this small problem in the past. I have found:

• https://evergreen.segment.com/components/switch
• https://blueprintjs.com/docs/#core/components/switch
• https://ant.design/components/switch/#components-switch-demo-size
• https://atlaskit.atlassian.com/packages/core/toggle

2. Average size

We have the following size: 32x16, 28x16, 28x16, 32x16. So I would propose a thumb size of 16px. Once we have the thumb size, the track size can be defined conserving the same ratio than with the normal size: 16 / 20 -> x0.8. I also want the slider dimensions to align on the 4px grid.

3. Result

  sizeSmall: {
    width: 40,
    height: 24,
    padding: 7,
    '& $thumb': {
      width: 16,
      height: 16,
    },
    '& $switchBase': {
      padding: 4,
    },
  },

What do you think?

[oliviertassinari]

I have added the TypeScript definitions and apply some of the review. Any more feedback is welcomed! Otherwise, I hope it's good enough.

[oliviertassinari]

Rebased.

[darkowic]

@oliviertassinari Thanks for the research! Great job as always! I am totally ok with this size. Customizing the small size is easy if anyone needs something else. LGTM ;)