[material-ui][Button] Update the file upload demo (#38823)

mui · Sep 6, 2023 · 42005c6 · 42005c6
1 parent ca5ac14
commit 42005c6
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 43 deletions.
diff --git a/docs/data/material/components/buttons/InputFileUpload.js b/docs/data/material/components/buttons/InputFileUpload.js
@@ -3,27 +3,22 @@ import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 
-const VisuallyHiddenInput = styled('input')`
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  white-space: nowrap;
-  width: 1px;
-`;
+const VisuallyHiddenInput = styled('input')({
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
+  height: 1,
+  overflow: 'hidden',
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  whiteSpace: 'nowrap',
+  width: 1,
+});
 
 export default function InputFileUpload() {
   return (
-    <Button
-      component="label"
-      variant="contained"
-      startIcon={<CloudUploadIcon />}
-      href="#file-upload"
-    >
-      Upload a file
+    <Button component="label" variant="contained" startIcon={<CloudUploadIcon />}>
+      Upload file
       <VisuallyHiddenInput type="file" />
     </Button>
   );

diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx b/docs/data/material/components/buttons/InputFileUpload.tsx
@@ -3,27 +3,22 @@ import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 
-const VisuallyHiddenInput = styled('input')`
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  white-space: nowrap;
-  width: 1px;
-`;
+const VisuallyHiddenInput = styled('input')({
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
+  height: 1,
+  overflow: 'hidden',
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  whiteSpace: 'nowrap',
+  width: 1,
+});
 
 export default function InputFileUpload() {
   return (
-    <Button
-      component="label"
-      variant="contained"
-      startIcon={<CloudUploadIcon />}
-      href="#file-upload"
-    >
-      Upload a file
+    <Button component="label" variant="contained" startIcon={<CloudUploadIcon />}>
+      Upload file
       <VisuallyHiddenInput type="file" />
     </Button>
   );

diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx.preview b/docs/data/material/components/buttons/InputFileUpload.tsx.preview
@@ -1,9 +1,4 @@
-<Button
-  component="label"
-  variant="contained"
-  startIcon={<CloudUploadIcon />}
-  href="#file-upload"
->
-  Upload a file
+<Button component="label" variant="contained" startIcon={<CloudUploadIcon />}>
+  Upload file
   <VisuallyHiddenInput type="file" />
 </Button>