[theme] Add border-radius to the theme

[itelo]

Add to theme defaults borderRadius and use it internally. Then we can change globally the radius of components.

Since a lot of components are based in Paper, we just need to create borderRadius.paper and borderRadius.button, following that we apply the borderRadius to:

• Paper
• Drawer
• Card
• Popover
• Button
• Table
• Dialog

closes #11725

[oliviertassinari]

@itelo Thanks for the first iteration! I have reversed the approach. We try to keep the theme object as generic as possible by default (not tight to any component). For component related customization, people can use the theme.overrides.x a feature of the theme.
I have been browsing the specification, the Material Design Team seems to have simplified the border-radius story. I could only find 4px.

Following the Bootstrap approach and tailwind CSS, I think that we can expose different values by default to ease the process of building more component. Well, to be challenged:

const borderRadius = {
  small: 2,
  medium: 4,
  large: 6,
};

[mbrookes]

I'm not convinced of the benefit of having small, medium and large.

1. The border-radius should normally be consistent across components.
2. Changing "medium" in the theme to something other than 4 (for example 0 (see "Sharp components", means the name no longer makes sense.

[oliviertassinari]

The border-radius should normally be consistent across components.

Isn't what these properties are for: using consistent values?

Changing "medium" in the theme to something other than 4 (for example 0 (see "Sharp components", means the name no longer makes sense.

What's wrong with someone setting?:

const theme = createMuiTheme({
  borderRadius: {
    small: 0,
    medium: 0,
    large: 0,
  },
};

Ok, maybe we should be having a single value?

const borderRadius = {
  medium: 4,
};

or

const borderRadius = {
  default: 4,
};

[itelo]

I created this to give to everyone the option to use drawer/sidebars that should be square and use the same component with just square = false, to use sheets like the images below

[oliviertassinari]

@itelo Can we work on it in a different pull-request? Do you have a reference in the specification? I can't find it in https://material.io/design/components/sheets-side.html.

[itelo]

Yes, and we could also add it in docs. I didn't find either.

[Melancholism]

@oliviertassinari @itelo I think shape is not included in the docs yet.

Also, how can I set border-radius on different window sizes? Thanks.

[oliviertassinari]

@mbrookes I'm not sure how to handle this case. Maybe with a custom value?

[mbrookes]

const borderRadius = {
  default: 4,
};

Is better, although then I wonder if it needs the default key? Why not just borderRadius in that case?

Also, should it be a root key, or is there some broader category this should be grouped under?

[itelo]

@oliviertassinari there are some problems if we choose to use medium, large, small.

• if we use the medium by default, and we want big borderRadius like 25px, snackbars will have big borderRadius, and I'm pretty sure the snackbar cannot have it all on borderRadius.
• snackbar, paper and others component (in your PR) used to have 2px of borderRadius, now they have 4, is that ok?

[oliviertassinari]

Is better, although then I wonder if it needs the default key? Why not just borderRadius in that case?

@mbrookes So people can grow the list of possible border-radius value in their custom theme if they want?

snackbar, paper and others component (in your PR) used to have 2px of borderRadius, now they have 4, is that ok?

@itelo The change was made to follow the specification.

if we use the medium by default, and we want big borderRadius like 25px, snackbars will have big borderRadius, and I'm pretty sure the snackbar cannot have it all on borderRadius.

I'm not sure to follow the point. What do you suggest?

[mbrookes]

So people can grow the list of possible border-radius value in their custom theme if they want?

Okay, cool. Im still wondering whether it should be a root key (what if we want cornerStyle or some such at some point?), but I don't have any better suggestion.

[oliviertassinari]

Should we rename theme.borderRadius.default to theme.shape.borderRadius? It's more room to grow in the future.