[SwipeableDrawer] Migrate SwipeArea to emotion

[mnajdova]

While trying to remove the dependency to withStyles, I noticed that this private component wasn't migrated to emotion.

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 288607b

[oliviertassinari]

Oh well, good catch.

[oliviertassinari]

What the use case for exposing it?

Suggested change

	name: 'PrivateSwipeArea',
	slot: 'Root',

I think that we should remove this as well as the global class names. This component is private. It's what we do in: https://github.com/mui-org/material-ui/blob/77e4e292e3efa46640c02e92c91beb76f1099bbf/packages/material-ui/src/OutlinedInput/NotchedOutline.js#L7

[mnajdova]

Fair enough see my next comment

[oliviertassinari]

If we need to customize it, I think that SwipeableDrawer could create a new slot for it and apply it as a class name. We have used this approach in the past.

For the pickers, we went in a different direction with @dmtrKovalenko. We made the classes API of the internal component's public to ease the customization. It's an oxymoron but I'm not sure we have better alternatives.

[mnajdova]

The reason why I added the utility classes is because the SwipeableDrawer is not styled at all. That’s why I thought I could add this as root and make it available for customization. I would even add the overrides resolver here, as there is no other point for injecting customization.

[oliviertassinari]

I forgot that SwipeableDrawer had no styles. If we want to make a customization slot for SwipeArea public in the future, I think that the approach used here will make sense.

[mnajdova]

Oh well, good catch.

There is another one for tomorrow 😂

[eps1lon]

Is this really the simplest possible approach for creating a styled component? Wasn't one of the goals to be able to leverage props in styles. And now we still have all these classes, we even need more boilerplate. And all that for a couple of lines of styles.

And let's not think about customizing this component yet. It's not an issue at the moment

[mnajdova]

Is this really the simplest possible approach for creating a styled component? Wasn't one of the goals to be able to leverage props in styles. And now we still have all these classes, we even need more boilerplate. And all that for a couple of lines of styles.

And let's not think about customizing this component yet. It's not an issue at the moment

Simplified, done just the minimal changes needed.

looks good

[mnajdova]

@oliviertassinari @eps1lon needed to add the PrivateSwipeArea-root class as otherwise tests were failing https://app.circleci.com/pipelines/github/mui-org/material-ui/41433/workflows/722928ac-f470-41f9-9174-fb6aefd7b915/jobs/247257. For simplicity I just hardcoded it in the implementaiton.