Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][Button] Add demo for file upload #38786

Merged
merged 15 commits into from
Sep 4, 2023
Merged

[material-ui][Button] Add demo for file upload #38786

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
5aba304
[docs] Add upload button demo
anle9650 Sep 3, 2023
60938be
add labels
anle9650 Sep 3, 2023
5dd103c
Update UploadButtons.js
anle9650 Sep 3, 2023
1abb50b
renamed to UploadButton
anle9650 Sep 3, 2023
0c73219
Revert "renamed to UploadButton"
anle9650 Sep 3, 2023
e8cf42e
rename test labels
anle9650 Sep 3, 2023
840cabe
Update buttons.md
anle9650 Sep 3, 2023
a169bc1
Update buttons.md
anle9650 Sep 3, 2023
c02a2ad
use similar demo as Joy UI
anle9650 Sep 3, 2023
914d9ad
place icon at start
anle9650 Sep 3, 2023
0df33f0
use contained button variant
anle9650 Sep 3, 2023
2a7a207
Update buttons.md
anle9650 Sep 3, 2023
05f7e9d
remove tabIndex
anle9650 Sep 3, 2023
4d4b7b2
use icon from package
anle9650 Sep 4, 2023
5bbd11a
Create InputFileUpload.tsx.preview
anle9650 Sep 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions docs/data/material/components/buttons/InputFileUpload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';
import SvgIcon from '@mui/material/SvgIcon';

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;
`;

export default function InputFileUpload() {
return (
<Button
component="label"
variant="contained"
startIcon={
<SvgIcon>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"
/>
</svg>
</SvgIcon>
}
href="#file-upload"
>
Upload a file
<VisuallyHiddenInput type="file" />
</Button>
);
}
46 changes: 46 additions & 0 deletions docs/data/material/components/buttons/InputFileUpload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';
import SvgIcon from '@mui/material/SvgIcon';

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;
`;
Comment on lines +6 to +16
Copy link
Member

@oliviertassinari oliviertassinari Sep 4, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I know, the standard is for all the demos should use the JavaScript object syntax in Base UI, Joy UI,
Material UI. I imagine it's because 1. the source are written this way, so easier for developers to move between source and demos, and 2. it's more typesafe.

Can we update these?


export default function InputFileUpload() {
return (
<Button
component="label"
variant="contained"
startIcon={
<SvgIcon>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"
/>
</svg>
</SvgIcon>
}
href="#file-upload"
Copy link
Member

@oliviertassinari oliviertassinari Sep 4, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is wrong as far as I know:

Suggested change
href="#file-upload"
Screenshot 2023-09-05 at 00 09 21

https://validator.w3.org/nu/?doc=https%3A%2F%2Fdeploy-preview-38786--material-ui.netlify.app%2Fmaterial-ui%2Freact-button%2F

>
Upload a file
<VisuallyHiddenInput type="file" />
</Button>
);
}
6 changes: 6 additions & 0 deletions docs/data/material/components/buttons/buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,12 @@ Use `color` prop to apply theme color palette to component.

{{"demo": "IconButtonColors.js"}}

## File upload

To create a file upload button, turn the button into a label using `component="label"` and then create a visually-hidden input with type `file`.

{{"demo": "InputFileUpload.js"}}

## Customization

Here are some examples of customizing the component.
Expand Down