[base] Remove unstyled suffix from Base components + Codemod script (#…

…36873)
mui · Apr 24, 2023 · e555828 · e555828
1 parent 4618307
commit e555828
Show file tree

Hide file tree

Showing 545 changed files with 5,036 additions and 6,105 deletions.
diff --git a/docs/data/base/components/badge/AccessibleBadges.js b/docs/data/base/components/badge/AccessibleBadges.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 function notificationsLabel(count) {
@@ -31,7 +31,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -43,7 +43,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;

diff --git a/docs/data/base/components/badge/AccessibleBadges.tsx b/docs/data/base/components/badge/AccessibleBadges.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 function notificationsLabel(count: number) {
@@ -31,7 +31,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -43,7 +43,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;

diff --git a/docs/data/base/components/badge/BadgeMax.js b/docs/data/base/components/badge/BadgeMax.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function BadgeMax() {
@@ -28,7 +28,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -40,7 +40,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;

diff --git a/docs/data/base/components/badge/BadgeMax.tsx b/docs/data/base/components/badge/BadgeMax.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function BadgeMax() {
@@ -28,7 +28,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -40,7 +40,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;

diff --git a/docs/data/base/components/badge/BadgeVisibility.js b/docs/data/base/components/badge/BadgeVisibility.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
 import AddIcon from '@mui/icons-material/Add';
@@ -27,7 +27,7 @@ export default function BadgeVisibility() {
         '& > *': {
           marginBottom: 2,
         },
-        [`& .${badgeUnstyledClasses.root}`]: {
+        [`& .${badgeClasses.root}`]: {
           marginRight: 4,
         },
       }}
@@ -77,7 +77,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -89,7 +89,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;
@@ -110,7 +110,7 @@ const StyledBadge = styled(BadgeUnstyled)(
     transform-origin: 100% 0; 
   }
 
-  & .${badgeUnstyledClasses.invisible} {
+  & .${badgeClasses.invisible} {
     opacity: 0;
     pointer-events: none;
   }

diff --git a/docs/data/base/components/badge/BadgeVisibility.tsx b/docs/data/base/components/badge/BadgeVisibility.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
 import AddIcon from '@mui/icons-material/Add';
@@ -27,7 +27,7 @@ export default function BadgeVisibility() {
         '& > *': {
           marginBottom: 2,
         },
-        [`& .${badgeUnstyledClasses.root}`]: {
+        [`& .${badgeClasses.root}`]: {
           marginRight: 4,
         },
       }}
@@ -77,7 +77,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -89,7 +89,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;
@@ -110,7 +110,7 @@ const StyledBadge = styled(BadgeUnstyled)(
     transform-origin: 100% 0; 
   }
 
-  & .${badgeUnstyledClasses.invisible} {
+  & .${badgeClasses.invisible} {
     opacity: 0;
     pointer-events: none;
   }

diff --git a/docs/data/base/components/badge/ShowZeroBadge.js b/docs/data/base/components/badge/ShowZeroBadge.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function ShowZeroBadge() {
@@ -26,7 +26,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -38,7 +38,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;
@@ -59,7 +59,7 @@ const StyledBadge = styled(BadgeUnstyled)(
     transform-origin: 100% 0;
   }
 
-  & .${badgeUnstyledClasses.invisible} {
+  & .${badgeClasses.invisible} {
     display: none;
   }
   `,

diff --git a/docs/data/base/components/badge/ShowZeroBadge.tsx b/docs/data/base/components/badge/ShowZeroBadge.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function ShowZeroBadge() {
@@ -26,7 +26,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -38,7 +38,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;
@@ -59,7 +59,7 @@ const StyledBadge = styled(BadgeUnstyled)(
     transform-origin: 100% 0;
   }
 
-  & .${badgeUnstyledClasses.invisible} {
+  & .${badgeClasses.invisible} {
     display: none;
   }
   `,

diff --git a/docs/data/base/components/badge/UnstyledBadge.js b/docs/data/base/components/badge/UnstyledBadge.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 
 function BadgeContent() {
   return (
@@ -37,7 +37,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -50,7 +50,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;

diff --git a/docs/data/base/components/badge/UnstyledBadge.tsx b/docs/data/base/components/badge/UnstyledBadge.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 
 function BadgeContent() {
   return (
@@ -37,7 +37,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -50,7 +50,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;

diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction.js b/docs/data/base/components/badge/UnstyledBadgeIntroduction.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 
 function BadgeContent() {
   return (
@@ -37,7 +37,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -50,7 +50,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;

diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction.tsx b/docs/data/base/components/badge/UnstyledBadgeIntroduction.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
+import Badge, { badgeClasses } from '@mui/base/Badge';
 
 function BadgeContent() {
   return (
@@ -37,7 +37,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(BadgeUnstyled)(
+const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
@@ -50,7 +50,7 @@ const StyledBadge = styled(BadgeUnstyled)(
   display: inline-block;
   line-height: 1;
 
-  & .${badgeUnstyledClasses.badge} {
+  & .${badgeClasses.badge} {
     z-index: auto;
     position: absolute;
     top: 0;