Remove Unstyled suffix

mui · Apr 28, 2023 · f4ee49c · f4ee49c
1 parent 8536acc
commit f4ee49c
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 67 deletions.
diff --git a/docs/data/base/getting-started/quickstart/BaseButton.js b/docs/data/base/getting-started/quickstart/BaseButton.js
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import ButtonUnstyled from '@mui/base/ButtonUnstyled';
+import Button from '@mui/base/Button';
 import useButton from '@mui/base/useButton';
 import Stack from '@mui/material/Stack';
 
 export default function App() {
   const { getRootProps } = useButton({});
   return (
     <Stack spacing={2} direction="row">
-      <ButtonUnstyled>ButtonUnstyled</ButtonUnstyled>
+      <Button>Button</Button>
 
       <button type="button" {...getRootProps()}>
         useButton

diff --git a/docs/data/base/getting-started/quickstart/BaseButton.tsx b/docs/data/base/getting-started/quickstart/BaseButton.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import ButtonUnstyled from '@mui/base/ButtonUnstyled';
+import Button from '@mui/base/Button';
 import useButton from '@mui/base/useButton';
 import Stack from '@mui/material/Stack';
 
 export default function App() {
   const { getRootProps } = useButton({});
   return (
     <Stack spacing={2} direction="row">
-      <ButtonUnstyled>ButtonUnstyled</ButtonUnstyled>
+      <Button>Button</Button>
 
       <button type="button" {...getRootProps()}>
         useButton

diff --git a/docs/data/base/getting-started/quickstart/BaseButton.tsx.preview b/docs/data/base/getting-started/quickstart/BaseButton.tsx.preview
@@ -1,4 +1,4 @@
-<ButtonUnstyled>ButtonUnstyled</ButtonUnstyled>
+<Button>Button</Button>
 
 <button type="button" {...getRootProps()}>
   useButton

diff --git a/docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.js b/docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
+import Button, { buttonClasses } from '@mui/base/Button';
 import useButton from '@mui/base/useButton';
 import { styled, alpha } from '@mui/system';
 import Stack from '@mui/material/Stack';
@@ -54,11 +54,11 @@ function getStyles({ theme }) {
       box-shadow: none;
     }
 
-    &:hover:not(.${buttonUnstyledClasses.disabled}) {
+    &:hover:not(.${buttonClasses.disabled}) {
       background-color: ${theme.palette.mode === 'dark' ? '#2ea043' : '#2c974b'};
     }
 
-    &:active:not(.${buttonUnstyledClasses.disabled}) {
+    &:active:not(.${buttonClasses.disabled}) {
       background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#298e46'};
       box-shadow: ${
         theme.palette.mode === 'dark'
@@ -67,7 +67,7 @@ function getStyles({ theme }) {
       }
     }
 
-    &.${buttonUnstyledClasses.disabled} {
+    &.${buttonClasses.disabled} {
       color: ${
         theme.palette.mode === 'dark' ? alpha('#fff', 0.5) : alpha('#fff', 0.5)
       };
@@ -84,7 +84,7 @@ function getStyles({ theme }) {
  * More about unstyled components vs hooks here: https://mui.com/base/getting-started/usage/#components-vs-hooks
  */
 
-const GithubButtonComponent = styled(ButtonUnstyled)(getStyles);
+const GithubButtonComponent = styled(Button)(getStyles);
 
 const GithubButtonHook = styled('button')(getStyles);
 

diff --git a/docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.tsx b/docs/data/base/getting-started/quickstart/BaseButtonMuiSystem.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
+import Button, { buttonClasses } from '@mui/base/Button';
 import useButton from '@mui/base/useButton';
 import { styled, alpha, Theme } from '@mui/system';
 import Stack from '@mui/material/Stack';
@@ -54,11 +54,11 @@ function getStyles({ theme }: { theme: Theme }) {
       box-shadow: none;
     }
 
-    &:hover:not(.${buttonUnstyledClasses.disabled}) {
+    &:hover:not(.${buttonClasses.disabled}) {
       background-color: ${theme.palette.mode === 'dark' ? '#2ea043' : '#2c974b'};
     }
 
-    &:active:not(.${buttonUnstyledClasses.disabled}) {
+    &:active:not(.${buttonClasses.disabled}) {
       background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#298e46'};
       box-shadow: ${
         theme.palette.mode === 'dark'
@@ -67,7 +67,7 @@ function getStyles({ theme }: { theme: Theme }) {
       }
     }
 
-    &.${buttonUnstyledClasses.disabled} {
+    &.${buttonClasses.disabled} {
       color: ${
         theme.palette.mode === 'dark' ? alpha('#fff', 0.5) : alpha('#fff', 0.5)
       };
@@ -84,7 +84,7 @@ function getStyles({ theme }: { theme: Theme }) {
  * More about unstyled components vs hooks here: https://mui.com/base/getting-started/usage/#components-vs-hooks
  */
 
-const GithubButtonComponent = styled(ButtonUnstyled)(getStyles);
+const GithubButtonComponent = styled(Button)(getStyles);
 
 const GithubButtonHook = styled('button')(getStyles);
 

diff --git a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.js b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
+import Button, { buttonClasses } from '@mui/base/Button';
 import useButton from '@mui/base/useButton';
 import Stack from '@mui/material/Stack';
 
@@ -61,17 +61,17 @@ const css = `
     transition: none;
   }
 
-  .github-button:hover:not(.${buttonUnstyledClasses.disabled}) {
+  .github-button:hover:not(.${buttonClasses.disabled}) {
     color: var(--btn-text);
     background-color: var(--btn-hover);
   }
 
-  .github-button:active:not(.${buttonUnstyledClasses.disabled}) {
+  .github-button:active:not(.${buttonClasses.disabled}) {
     background-color: var(--btn-active-bg);
     box-shadow: var(--btn-active-box-shadow);
   }
 
-  .github-button.${buttonUnstyledClasses.disabled} {
+  .github-button.${buttonClasses.disabled} {
     cursor: not-allowed;
     box-shadow: none;
     color: var(--btn-disabled);
@@ -85,7 +85,7 @@ export default function App() {
     <React.Fragment>
       <style type="text/css">{css}</style>
       <Stack spacing={2} direction="row" className="demo">
-        <ButtonUnstyled className="github-button">Create Repository</ButtonUnstyled>
+        <Button className="github-button">Create Repository</Button>
 
         <button type="button" {...getRootProps()} className="github-button">
           Create Repository

diff --git a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
+import Button, { buttonClasses } from '@mui/base/Button';
 import useButton from '@mui/base/useButton';
 import Stack from '@mui/material/Stack';
 
@@ -61,17 +61,17 @@ const css = `
     transition: none;
   }
 
-  .github-button:hover:not(.${buttonUnstyledClasses.disabled}) {
+  .github-button:hover:not(.${buttonClasses.disabled}) {
     color: var(--btn-text);
     background-color: var(--btn-hover);
   }
 
-  .github-button:active:not(.${buttonUnstyledClasses.disabled}) {
+  .github-button:active:not(.${buttonClasses.disabled}) {
     background-color: var(--btn-active-bg);
     box-shadow: var(--btn-active-box-shadow);
   }
 
-  .github-button.${buttonUnstyledClasses.disabled} {
+  .github-button.${buttonClasses.disabled} {
     cursor: not-allowed;
     box-shadow: none;
     color: var(--btn-disabled);
@@ -85,7 +85,7 @@ export default function App() {
     <React.Fragment>
       <style type="text/css">{css}</style>
       <Stack spacing={2} direction="row" className="demo">
-        <ButtonUnstyled className="github-button">Create Repository</ButtonUnstyled>
+        <Button className="github-button">Create Repository</Button>
 
         <button type="button" {...getRootProps()} className="github-button">
           Create Repository

diff --git a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx.preview b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx.preview
@@ -1,7 +1,7 @@
 <React.Fragment>
   <style type="text/css">{css}</style>
   <Stack spacing={2} direction="row" className="demo">
-    <ButtonUnstyled className="github-button">Create Repository</ButtonUnstyled>
+    <Button className="github-button">Create Repository</Button>
 
     <button type="button" {...getRootProps()} className="github-button">
       Create Repository

diff --git a/docs/data/base/getting-started/quickstart/Tutorial.js b/docs/data/base/getting-started/quickstart/Tutorial.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
+import Button, { buttonClasses } from '@mui/base/Button';
 import { styled, alpha } from '@mui/system';
 
-const CustomButton = styled(ButtonUnstyled)(
+const CustomButton = styled(Button)(
   ({ theme }) => `
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
         Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
@@ -52,11 +52,11 @@ const CustomButton = styled(ButtonUnstyled)(
       box-shadow: none;
     }
 
-    &:hover:not(.${buttonUnstyledClasses.disabled}) {
+    &:hover:not(.${buttonClasses.disabled}) {
       background-color: ${theme.palette.mode === 'dark' ? '#2ea043' : '#2c974b'};
     }
 
-    &:active:not(.${buttonUnstyledClasses.disabled}) {
+    &:active:not(.${buttonClasses.disabled}) {
       background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#298e46'};
       box-shadow: ${
         theme.palette.mode === 'dark'
@@ -65,7 +65,7 @@ const CustomButton = styled(ButtonUnstyled)(
       }
     }
 
-    &.${buttonUnstyledClasses.disabled} {
+    &.${buttonClasses.disabled} {
       color: ${
         theme.palette.mode === 'dark' ? alpha('#fff', 0.5) : alpha('#fff', 0.5)
       };

diff --git a/docs/data/base/getting-started/quickstart/Tutorial.tsx b/docs/data/base/getting-started/quickstart/Tutorial.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
+import Button, { buttonClasses } from '@mui/base/Button';
 import { styled, alpha } from '@mui/system';
 
-const CustomButton = styled(ButtonUnstyled)(
+const CustomButton = styled(Button)(
   ({ theme }) => `
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
         Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
@@ -52,11 +52,11 @@ const CustomButton = styled(ButtonUnstyled)(
       box-shadow: none;
     }
 
-    &:hover:not(.${buttonUnstyledClasses.disabled}) {
+    &:hover:not(.${buttonClasses.disabled}) {
       background-color: ${theme.palette.mode === 'dark' ? '#2ea043' : '#2c974b'};
     }
 
-    &:active:not(.${buttonUnstyledClasses.disabled}) {
+    &:active:not(.${buttonClasses.disabled}) {
       background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#298e46'};
       box-shadow: ${
         theme.palette.mode === 'dark'
@@ -65,7 +65,7 @@ const CustomButton = styled(ButtonUnstyled)(
       }
     }
 
-    &.${buttonUnstyledClasses.disabled} {
+    &.${buttonClasses.disabled} {
       color: ${
         theme.palette.mode === 'dark' ? alpha('#fff', 0.5) : alpha('#fff', 0.5)
       };