[Alert] Fix square Paper prop

[ZeeshanTamboli]

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

Related to #28193, #29726 , #29288 and #30014

By default, we have square prop passed to Alert component. See:
https://github.com/mui-org/material-ui/blob/22c34014eeba310cefab4c93005ec9959dc51a96/packages/mui-material/src/Alert/Alert.js#L148-L150

But due to borderRadius styling in Alert component the rounded corners were still enabled. I am not sure whether we want or not want rounded corners by default in Alert.

I concluded by the code that rounded corners should be off. But then I guess it would be a breaking change now. (Argos may fail).

If developers want to enable rounded corners, now they will have to instead explicitly do:

<Alert square={false} />

Let me know if want to it the other way by keeping the rounded corners to avoid breaking change. Like we have it now.

Edit: Kept rounded corners by default.

[mui-pr-bot]

Details of bundle changes

@material-ui/core: parsed: +Infinity% , gzip: +Infinity%
@material-ui/lab: parsed: +Infinity% , gzip: +Infinity%
@material-ui/styles: parsed: +Infinity% , gzip: +Infinity%
@material-ui/private-theming: parsed: +Infinity% , gzip: +Infinity%
@material-ui/system: parsed: +Infinity% , gzip: +Infinity%
@material-ui/unstyled: parsed: +Infinity% , gzip: +Infinity%
@material-ui/utils: parsed: +Infinity% , gzip: +Infinity%

Generated by 🚫 dangerJS against 1cc60d7

[hbjORbj]

Thanks for your contribution. As you already mentioned, changing the default border radius to 0px is a breaking change, so I'd not go for it. I think the following change is sufficient.

diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js
index 436d710c26..a362390b69 100644
--- a/packages/mui-material/src/Alert/Alert.js
+++ b/packages/mui-material/src/Alert/Alert.js
@@ -47,7 +47,7 @@ const AlertRoot = styled(Paper, {
 
   return {
     ...theme.typography.body2,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: ownerState.square ? 0 : theme.shape.borderRadius,
     backgroundColor: 'transparent',
     display: 'flex',
     padding: '6px 16px',
@@ -147,7 +147,6 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
   return (
     <AlertRoot
       role={role}
-      square
       elevation={0}
       ownerState={ownerState}
       className={clsx(classes.root, className)}

[mnajdova]

The changes look clear to me, they are not breaking, so all is good from my side. Thanks!

[hbjORbj]

Thanks for your contribution!! :)