+ {children}
+
+ -
+ {messages.map(({ id, primary, secondary, person }) => (
+
+
+
+
+
+
+ News
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|app-bar|ButtonAppBar.stories"
+};
diff --git a/examples/storybook/stories/material-ui/app-bar/DenseAppBar.stories.tsx b/examples/storybook/stories/material-ui/app-bar/DenseAppBar.stories.tsx
new file mode 100644
index 00000000000000..ded9806f61b06a
--- /dev/null
+++ b/examples/storybook/stories/material-ui/app-bar/DenseAppBar.stories.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ flexGrow: 1,
+ },
+ menuButton: {
+ marginRight: theme.spacing(2),
+ },
+ }),
+);
+
+export function DenseAppBar() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+ Photos
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|app-bar|DenseAppBar.stories"
+};
diff --git a/examples/storybook/stories/material-ui/app-bar/ElevateAppBar.stories.tsx b/examples/storybook/stories/material-ui/app-bar/ElevateAppBar.stories.tsx
new file mode 100644
index 00000000000000..e5d00f597ab846
--- /dev/null
+++ b/examples/storybook/stories/material-ui/app-bar/ElevateAppBar.stories.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import useScrollTrigger from '@material-ui/core/useScrollTrigger';
+import Box from '@material-ui/core/Box';
+import Container from '@material-ui/core/Container';
+
+interface Props {
+ /**
+ * Injected by the documentation to work in an iframe.
+ * You won't need it on your project.
+ */
+ window?: () => Window;
+ children: React.ReactElement;
+}
+
+function ElevationScroll(props: Props) {
+ const { children, window } = props;
+ // Note that you normally won't need to set the window ref as useScrollTrigger
+ // will default to window.
+ // This is only being set here because the demo is in an iframe.
+ const trigger = useScrollTrigger({
+ disableHysteresis: true,
+ threshold: 0,
+ target: window ? window() : undefined,
+ });
+
+ return React.cloneElement(children, {
+ elevation: trigger ? 4 : 0,
+ });
+}
+
+export function ElevateAppBar(props: Props) {
+ return (
+
+
+
+
+
+
+
+
+ Photos
+
+ {auth && (
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|app-bar|MenuAppBar.stories"
+};
diff --git a/examples/storybook/stories/material-ui/app-bar/PrimarySearchAppBar.stories.tsx b/examples/storybook/stories/material-ui/app-bar/PrimarySearchAppBar.stories.tsx
new file mode 100644
index 00000000000000..e3cf6968e6ac14
--- /dev/null
+++ b/examples/storybook/stories/material-ui/app-bar/PrimarySearchAppBar.stories.tsx
@@ -0,0 +1,238 @@
+import React from 'react';
+import { fade, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import InputBase from '@material-ui/core/InputBase';
+import Badge from '@material-ui/core/Badge';
+import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@material-ui/core/Menu';
+import MenuIcon from '@material-ui/icons/Menu';
+import SearchIcon from '@material-ui/icons/Search';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import MailIcon from '@material-ui/icons/Mail';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import MoreIcon from '@material-ui/icons/MoreVert';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ grow: {
+ flexGrow: 1,
+ },
+ menuButton: {
+ marginRight: theme.spacing(2),
+ },
+ title: {
+ display: 'none',
+ [theme.breakpoints.up('sm')]: {
+ display: 'block',
+ },
+ },
+ search: {
+ position: 'relative',
+ borderRadius: theme.shape.borderRadius,
+ backgroundColor: fade(theme.palette.common.white, 0.15),
+ '&:hover': {
+ backgroundColor: fade(theme.palette.common.white, 0.25),
+ },
+ marginRight: theme.spacing(2),
+ marginLeft: 0,
+ width: '100%',
+ [theme.breakpoints.up('sm')]: {
+ marginLeft: theme.spacing(3),
+ width: 'auto',
+ },
+ },
+ searchIcon: {
+ padding: theme.spacing(0, 2),
+ height: '100%',
+ position: 'absolute',
+ pointerEvents: 'none',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ inputRoot: {
+ color: 'inherit',
+ },
+ inputInput: {
+ padding: theme.spacing(1, 1, 1, 0),
+ // vertical padding + font size from searchIcon
+ paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+ transition: theme.transitions.create('width'),
+ width: '100%',
+ [theme.breakpoints.up('md')]: {
+ width: '20ch',
+ },
+ },
+ sectionDesktop: {
+ display: 'none',
+ [theme.breakpoints.up('md')]: {
+ display: 'flex',
+ },
+ },
+ sectionMobile: {
+ display: 'flex',
+ [theme.breakpoints.up('md')]: {
+ display: 'none',
+ },
+ },
+ }),
+);
+
+export function PrimarySearchAppBar() {
+ const classes = useStyles();
+ const [anchorEl, setAnchorEl] = React.useState
+
+
+
+
+ )}
+
+
+
+
+
+
+ Material-UI
+
+
+
+ {renderMobileMenu}
+ {renderMenu}
+
+ );
+}
+
+export default {
+ title: "Material-ui|app-bar|PrimarySearchAppBar.stories"
+};
diff --git a/examples/storybook/stories/material-ui/app-bar/ProminentAppBar.stories.tsx b/examples/storybook/stories/material-ui/app-bar/ProminentAppBar.stories.tsx
new file mode 100644
index 00000000000000..7e6cf900ab8daa
--- /dev/null
+++ b/examples/storybook/stories/material-ui/app-bar/ProminentAppBar.stories.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import MenuIcon from '@material-ui/icons/Menu';
+import SearchIcon from '@material-ui/icons/Search';
+import MoreIcon from '@material-ui/icons/MoreVert';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ flexGrow: 1,
+ },
+ menuButton: {
+ marginRight: theme.spacing(2),
+ },
+ toolbar: {
+ minHeight: 128,
+ alignItems: 'flex-start',
+ paddingTop: theme.spacing(1),
+ paddingBottom: theme.spacing(2),
+ },
+ title: {
+ flexGrow: 1,
+ alignSelf: 'flex-end',
+ },
+}));
+
+export function ProminentAppBar() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Material-UI
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|app-bar|ProminentAppBar.stories"
+};
diff --git a/examples/storybook/stories/material-ui/app-bar/SearchAppBar.stories.tsx b/examples/storybook/stories/material-ui/app-bar/SearchAppBar.stories.tsx
new file mode 100644
index 00000000000000..6c5b22a52451d7
--- /dev/null
+++ b/examples/storybook/stories/material-ui/app-bar/SearchAppBar.stories.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import InputBase from '@material-ui/core/InputBase';
+import { createStyles, fade, Theme, makeStyles } from '@material-ui/core/styles';
+import MenuIcon from '@material-ui/icons/Menu';
+import SearchIcon from '@material-ui/icons/Search';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ flexGrow: 1,
+ },
+ menuButton: {
+ marginRight: theme.spacing(2),
+ },
+ title: {
+ flexGrow: 1,
+ display: 'none',
+ [theme.breakpoints.up('sm')]: {
+ display: 'block',
+ },
+ },
+ search: {
+ position: 'relative',
+ borderRadius: theme.shape.borderRadius,
+ backgroundColor: fade(theme.palette.common.white, 0.15),
+ '&:hover': {
+ backgroundColor: fade(theme.palette.common.white, 0.25),
+ },
+ marginLeft: 0,
+ width: '100%',
+ [theme.breakpoints.up('sm')]: {
+ marginLeft: theme.spacing(1),
+ width: 'auto',
+ },
+ },
+ searchIcon: {
+ padding: theme.spacing(0, 2),
+ height: '100%',
+ position: 'absolute',
+ pointerEvents: 'none',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ inputRoot: {
+ color: 'inherit',
+ },
+ inputInput: {
+ padding: theme.spacing(1, 1, 1, 0),
+ // vertical padding + font size from searchIcon
+ paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+ transition: theme.transitions.create('width'),
+ width: '100%',
+ [theme.breakpoints.up('sm')]: {
+ width: '12ch',
+ '&:focus': {
+ width: '20ch',
+ },
+ },
+ },
+ }),
+);
+
+export function SearchAppBar() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+ Material-UI
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|app-bar|SearchAppBar.stories"
+};
diff --git a/examples/storybook/stories/material-ui/autocomplete/Asynchronous.stories.tsx b/examples/storybook/stories/material-ui/autocomplete/Asynchronous.stories.tsx
new file mode 100644
index 00000000000000..1c2d8dffb6e5f8
--- /dev/null
+++ b/examples/storybook/stories/material-ui/autocomplete/Asynchronous.stories.tsx
@@ -0,0 +1,88 @@
+// *https://www.registers.service.gov.uk/registers/country/use-the-api*
+import fetch from 'cross-fetch';
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+interface CountryType {
+ name: string;
+}
+
+function sleep(delay = 0) {
+ return new Promise((resolve) => {
+ setTimeout(resolve, delay);
+ });
+}
+
+export function Asynchronous() {
+ const [open, setOpen] = React.useState(false);
+ const [options, setOptions] = React.useState
+
+
+
+
+
+ {
+ setValue(newValue);
+ }}
+ inputValue={inputValue}
+ onInputChange={(event, newInputValue) => {
+ setInputValue(newInputValue);
+ }}
+ id="controllable-states-demo"
+ options={options}
+ style={{ width: 300 }}
+ renderInput={(params) =>
+ );
+}
+
+export default {
+ title: "Material-ui|autocomplete|ControllableStates.stories"
+};
diff --git a/examples/storybook/stories/material-ui/autocomplete/CountrySelect.stories.tsx b/examples/storybook/stories/material-ui/autocomplete/CountrySelect.stories.tsx
new file mode 100644
index 00000000000000..5ba47b93fbfd80
--- /dev/null
+++ b/examples/storybook/stories/material-ui/autocomplete/CountrySelect.stories.tsx
@@ -0,0 +1,321 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import { makeStyles } from '@material-ui/core/styles';
+
+// ISO 3166-1 alpha-2
+// ⚠️ No support for IE 11
+function countryToFlag(isoCode: string) {
+ return typeof String.fromCodePoint !== 'undefined'
+ ? isoCode
+ .toUpperCase()
+ .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397))
+ : isoCode;
+}
+
+const useStyles = makeStyles({
+ option: {
+ fontSize: 15,
+ '& > span': {
+ marginRight: 10,
+ fontSize: 18,
+ },
+ },
+});
+
+export function CountrySelect() {
+ const classes = useStyles();
+
+ return (
+ {`value: ${value !== null ? `'${value}'` : 'null'}`}
+ {`inputValue: '${inputValue}'`}
+ +
+ {label}
+
+))`
+ display: flex;
+ align-items: center;
+ height: 24px;
+ margin: 2px;
+ line-height: 22px;
+ background-color: #fafafa;
+ border: 1px solid #e8e8e8;
+ border-radius: 2px;
+ box-sizing: content-box;
+ padding: 0 4px 0 10px;
+ outline: 0;
+ overflow: hidden;
+
+ &:focus {
+ border-color: #40a9ff;
+ background-color: #e6f7ff;
+ }
+
+ & span {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ & svg {
+ font-size: 12px;
+ cursor: pointer;
+ padding: 4px;
+ }
+`;
+
+const Listbox = styled('ul')`
+ width: 300px;
+ margin: 2px 0 0;
+ padding: 0;
+ position: absolute;
+ list-style: none;
+ background-color: #fff;
+ overflow: auto;
+ max-height: 250px;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ z-index: 1;
+
+ & li {
+ padding: 5px 12px;
+ display: flex;
+
+ & span {
+ flex-grow: 1;
+ }
+
+ & svg {
+ color: transparent;
+ }
+ }
+
+ & li[aria-selected='true'] {
+ background-color: #fafafa;
+ font-weight: 600;
+
+ & svg {
+ color: #1890ff;
+ }
+ }
+
+ & li[data-focus='true'] {
+ background-color: #e6f7ff;
+ cursor: pointer;
+
+ & svg {
+ color: #000;
+ }
+ }
+`;
+
+export function CustomizedHook() {
+ const {
+ getRootProps,
+ getInputLabelProps,
+ getInputProps,
+ getTagProps,
+ getListboxProps,
+ getOptionProps,
+ groupedOptions,
+ value,
+ focused,
+ setAnchorEl,
+ } = useAutocomplete({
+ id: 'customized-hook-demo',
+ defaultValue: [top100Films[1]],
+ multiple: true,
+ options: top100Films,
+ getOptionLabel: (option) => option.title,
+ });
+
+ return (
+
+
+ {groupedOptions.map((option, index) => (
+
+ {option.title}
+
+ ))}
+
+ ) : null}
+
+
+
+
+ {value.map((option: FilmOptionType, index: number) => (
+
+
+ {groupedOptions.length > 0 ? (
+
+ option.title)}
+ renderInput={(params) => (
+ option.title)}
+ renderInput={(params) => (
+
+ );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+ { title: 'The Shawshank Redemption', year: 1994 },
+ { title: 'The Godfather', year: 1972 },
+ { title: 'The Godfather: Part II', year: 1974 },
+ { title: 'The Dark Knight', year: 2008 },
+ { title: '12 Angry Men', year: 1957 },
+ { title: "Schindler's List", year: 1993 },
+ { title: 'Pulp Fiction', year: 1994 },
+ { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
+ { title: 'The Good, the Bad and the Ugly', year: 1966 },
+ { title: 'Fight Club', year: 1999 },
+ { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
+ { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
+ { title: 'Forrest Gump', year: 1994 },
+ { title: 'Inception', year: 2010 },
+ { title: 'The Lord of the Rings: The Two Towers', year: 2002 },
+ { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+ { title: 'Goodfellas', year: 1990 },
+ { title: 'The Matrix', year: 1999 },
+ { title: 'Seven Samurai', year: 1954 },
+ { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },
+ { title: 'City of God', year: 2002 },
+ { title: 'Se7en', year: 1995 },
+ { title: 'The Silence of the Lambs', year: 1991 },
+ { title: "It's a Wonderful Life", year: 1946 },
+ { title: 'Life Is Beautiful', year: 1997 },
+ { title: 'The Usual Suspects', year: 1995 },
+ { title: 'Léon: The Professional', year: 1994 },
+ { title: 'Spirited Away', year: 2001 },
+ { title: 'Saving Private Ryan', year: 1998 },
+ { title: 'Once Upon a Time in the West', year: 1968 },
+ { title: 'American History X', year: 1998 },
+ { title: 'Interstellar', year: 2014 },
+ { title: 'Casablanca', year: 1942 },
+ { title: 'City Lights', year: 1931 },
+ { title: 'Psycho', year: 1960 },
+ { title: 'The Green Mile', year: 1999 },
+ { title: 'The Intouchables', year: 2011 },
+ { title: 'Modern Times', year: 1936 },
+ { title: 'Raiders of the Lost Ark', year: 1981 },
+ { title: 'Rear Window', year: 1954 },
+ { title: 'The Pianist', year: 2002 },
+ { title: 'The Departed', year: 2006 },
+ { title: 'Terminator 2: Judgment Day', year: 1991 },
+ { title: 'Back to the Future', year: 1985 },
+ { title: 'Whiplash', year: 2014 },
+ { title: 'Gladiator', year: 2000 },
+ { title: 'Memento', year: 2000 },
+ { title: 'The Prestige', year: 2006 },
+ { title: 'The Lion King', year: 1994 },
+ { title: 'Apocalypse Now', year: 1979 },
+ { title: 'Alien', year: 1979 },
+ { title: 'Sunset Boulevard', year: 1950 },
+ { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },
+ { title: 'The Great Dictator', year: 1940 },
+ { title: 'Cinema Paradiso', year: 1988 },
+ { title: 'The Lives of Others', year: 2006 },
+ { title: 'Grave of the Fireflies', year: 1988 },
+ { title: 'Paths of Glory', year: 1957 },
+ { title: 'Django Unchained', year: 2012 },
+ { title: 'The Shining', year: 1980 },
+ { title: 'WALL·E', year: 2008 },
+ { title: 'American Beauty', year: 1999 },
+ { title: 'The Dark Knight Rises', year: 2012 },
+ { title: 'Princess Mononoke', year: 1997 },
+ { title: 'Aliens', year: 1986 },
+ { title: 'Oldboy', year: 2003 },
+ { title: 'Once Upon a Time in America', year: 1984 },
+ { title: 'Witness for the Prosecution', year: 1957 },
+ { title: 'Das Boot', year: 1981 },
+ { title: 'Citizen Kane', year: 1941 },
+ { title: 'North by Northwest', year: 1959 },
+ { title: 'Vertigo', year: 1958 },
+ { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },
+ { title: 'Reservoir Dogs', year: 1992 },
+ { title: 'Braveheart', year: 1995 },
+ { title: 'M', year: 1931 },
+ { title: 'Requiem for a Dream', year: 2000 },
+ { title: 'Amélie', year: 2001 },
+ { title: 'A Clockwork Orange', year: 1971 },
+ { title: 'Like Stars on Earth', year: 2007 },
+ { title: 'Taxi Driver', year: 1976 },
+ { title: 'Lawrence of Arabia', year: 1962 },
+ { title: 'Double Indemnity', year: 1944 },
+ { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },
+ { title: 'Amadeus', year: 1984 },
+ { title: 'To Kill a Mockingbird', year: 1962 },
+ { title: 'Toy Story 3', year: 2010 },
+ { title: 'Logan', year: 2017 },
+ { title: 'Full Metal Jacket', year: 1987 },
+ { title: 'Dangal', year: 2016 },
+ { title: 'The Sting', year: 1973 },
+ { title: '2001: A Space Odyssey', year: 1968 },
+ { title: "Singin' in the Rain", year: 1952 },
+ { title: 'Toy Story', year: 1995 },
+ { title: 'Bicycle Thieves', year: 1948 },
+ { title: 'The Kid', year: 1921 },
+ { title: 'Inglourious Basterds', year: 2009 },
+ { title: 'Snatch', year: 2000 },
+ { title: '3 Idiots', year: 2009 },
+ { title: 'Monty Python and the Holy Grail', year: 1975 },
+];
+
+export default {
+ title: "Material-ui|autocomplete|FreeSolo.stories"
+};
diff --git a/examples/storybook/stories/material-ui/autocomplete/FreeSoloCreateOption.stories.tsx b/examples/storybook/stories/material-ui/autocomplete/FreeSoloCreateOption.stories.tsx
new file mode 100644
index 00000000000000..6daedca5ea2684
--- /dev/null
+++ b/examples/storybook/stories/material-ui/autocomplete/FreeSoloCreateOption.stories.tsx
@@ -0,0 +1,183 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
+
+const filter = createFilterOptions
+
+ Labels
+
+ {value.map((label) => (
+
+
+ {label.name}
+
+ ))}
+ Apply labels to this pull request
+
+ {option.name}
+
+ {option.description} +
+ + {option.description} +
+ {parts.map((part, index) => (
+
+ {part.text}
+
+ ))}
+
+ );
+ }}
+ />
+ );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+ { title: 'The Shawshank Redemption', year: 1994 },
+ { title: 'The Godfather', year: 1972 },
+ { title: 'The Godfather: Part II', year: 1974 },
+ { title: 'The Dark Knight', year: 2008 },
+ { title: '12 Angry Men', year: 1957 },
+ { title: "Schindler's List", year: 1993 },
+ { title: 'Pulp Fiction', year: 1994 },
+ { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
+ { title: 'The Good, the Bad and the Ugly', year: 1966 },
+ { title: 'Fight Club', year: 1999 },
+ { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
+ { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
+ { title: 'Forrest Gump', year: 1994 },
+ { title: 'Inception', year: 2010 },
+ { title: 'The Lord of the Rings: The Two Towers', year: 2002 },
+ { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+ { title: 'Goodfellas', year: 1990 },
+ { title: 'The Matrix', year: 1999 },
+ { title: 'Seven Samurai', year: 1954 },
+ { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },
+ { title: 'City of God', year: 2002 },
+ { title: 'Se7en', year: 1995 },
+ { title: 'The Silence of the Lambs', year: 1991 },
+ { title: "It's a Wonderful Life", year: 1946 },
+ { title: 'Life Is Beautiful', year: 1997 },
+ { title: 'The Usual Suspects', year: 1995 },
+ { title: 'Léon: The Professional', year: 1994 },
+ { title: 'Spirited Away', year: 2001 },
+ { title: 'Saving Private Ryan', year: 1998 },
+ { title: 'Once Upon a Time in the West', year: 1968 },
+ { title: 'American History X', year: 1998 },
+ { title: 'Interstellar', year: 2014 },
+ { title: 'Casablanca', year: 1942 },
+ { title: 'City Lights', year: 1931 },
+ { title: 'Psycho', year: 1960 },
+ { title: 'The Green Mile', year: 1999 },
+ { title: 'The Intouchables', year: 2011 },
+ { title: 'Modern Times', year: 1936 },
+ { title: 'Raiders of the Lost Ark', year: 1981 },
+ { title: 'Rear Window', year: 1954 },
+ { title: 'The Pianist', year: 2002 },
+ { title: 'The Departed', year: 2006 },
+ { title: 'Terminator 2: Judgment Day', year: 1991 },
+ { title: 'Back to the Future', year: 1985 },
+ { title: 'Whiplash', year: 2014 },
+ { title: 'Gladiator', year: 2000 },
+ { title: 'Memento', year: 2000 },
+ { title: 'The Prestige', year: 2006 },
+ { title: 'The Lion King', year: 1994 },
+ { title: 'Apocalypse Now', year: 1979 },
+ { title: 'Alien', year: 1979 },
+ { title: 'Sunset Boulevard', year: 1950 },
+ { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },
+ { title: 'The Great Dictator', year: 1940 },
+ { title: 'Cinema Paradiso', year: 1988 },
+ { title: 'The Lives of Others', year: 2006 },
+ { title: 'Grave of the Fireflies', year: 1988 },
+ { title: 'Paths of Glory', year: 1957 },
+ { title: 'Django Unchained', year: 2012 },
+ { title: 'The Shining', year: 1980 },
+ { title: 'WALL·E', year: 2008 },
+ { title: 'American Beauty', year: 1999 },
+ { title: 'The Dark Knight Rises', year: 2012 },
+ { title: 'Princess Mononoke', year: 1997 },
+ { title: 'Aliens', year: 1986 },
+ { title: 'Oldboy', year: 2003 },
+ { title: 'Once Upon a Time in America', year: 1984 },
+ { title: 'Witness for the Prosecution', year: 1957 },
+ { title: 'Das Boot', year: 1981 },
+ { title: 'Citizen Kane', year: 1941 },
+ { title: 'North by Northwest', year: 1959 },
+ { title: 'Vertigo', year: 1958 },
+ { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },
+ { title: 'Reservoir Dogs', year: 1992 },
+ { title: 'Braveheart', year: 1995 },
+ { title: 'M', year: 1931 },
+ { title: 'Requiem for a Dream', year: 2000 },
+ { title: 'Amélie', year: 2001 },
+ { title: 'A Clockwork Orange', year: 1971 },
+ { title: 'Like Stars on Earth', year: 2007 },
+ { title: 'Taxi Driver', year: 1976 },
+ { title: 'Lawrence of Arabia', year: 1962 },
+ { title: 'Double Indemnity', year: 1944 },
+ { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },
+ { title: 'Amadeus', year: 1984 },
+ { title: 'To Kill a Mockingbird', year: 1962 },
+ { title: 'Toy Story 3', year: 2010 },
+ { title: 'Logan', year: 2017 },
+ { title: 'Full Metal Jacket', year: 1987 },
+ { title: 'Dangal', year: 2016 },
+ { title: 'The Sting', year: 1973 },
+ { title: '2001: A Space Odyssey', year: 1968 },
+ { title: "Singin' in the Rain", year: 1952 },
+ { title: 'Toy Story', year: 1995 },
+ { title: 'Bicycle Thieves', year: 1948 },
+ { title: 'The Kid', year: 1921 },
+ { title: 'Inglourious Basterds', year: 2009 },
+ { title: 'Snatch', year: 2000 },
+ { title: '3 Idiots', year: 2009 },
+ { title: 'Monty Python and the Holy Grail', year: 1975 },
+];
+
+export default {
+ title: "Material-ui|autocomplete|Highlights.stories"
+};
diff --git a/examples/storybook/stories/material-ui/autocomplete/LimitTags.stories.tsx b/examples/storybook/stories/material-ui/autocomplete/LimitTags.stories.tsx
new file mode 100644
index 00000000000000..65ff975fd6a054
--- /dev/null
+++ b/examples/storybook/stories/material-ui/autocomplete/LimitTags.stories.tsx
@@ -0,0 +1,144 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: 500,
+ '& > * + *': {
+ marginTop: theme.spacing(3),
+ },
+ },
+ }),
+);
+
+export function LimitTags() {
+ const classes = useStyles();
+
+ return (
+
+ option.title}
+ defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
+ renderInput={(params) => (
+
+ );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+ { title: 'The Shawshank Redemption', year: 1994 },
+ { title: 'The Godfather', year: 1972 },
+ { title: 'The Godfather: Part II', year: 1974 },
+ { title: 'The Dark Knight', year: 2008 },
+ { title: '12 Angry Men', year: 1957 },
+ { title: "Schindler's List", year: 1993 },
+ { title: 'Pulp Fiction', year: 1994 },
+ { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
+ { title: 'The Good, the Bad and the Ugly', year: 1966 },
+ { title: 'Fight Club', year: 1999 },
+ { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
+ { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
+ { title: 'Forrest Gump', year: 1994 },
+ { title: 'Inception', year: 2010 },
+ { title: 'The Lord of the Rings: The Two Towers', year: 2002 },
+ { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+ { title: 'Goodfellas', year: 1990 },
+ { title: 'The Matrix', year: 1999 },
+ { title: 'Seven Samurai', year: 1954 },
+ { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },
+ { title: 'City of God', year: 2002 },
+ { title: 'Se7en', year: 1995 },
+ { title: 'The Silence of the Lambs', year: 1991 },
+ { title: "It's a Wonderful Life", year: 1946 },
+ { title: 'Life Is Beautiful', year: 1997 },
+ { title: 'The Usual Suspects', year: 1995 },
+ { title: 'Léon: The Professional', year: 1994 },
+ { title: 'Spirited Away', year: 2001 },
+ { title: 'Saving Private Ryan', year: 1998 },
+ { title: 'Once Upon a Time in the West', year: 1968 },
+ { title: 'American History X', year: 1998 },
+ { title: 'Interstellar', year: 2014 },
+ { title: 'Casablanca', year: 1942 },
+ { title: 'City Lights', year: 1931 },
+ { title: 'Psycho', year: 1960 },
+ { title: 'The Green Mile', year: 1999 },
+ { title: 'The Intouchables', year: 2011 },
+ { title: 'Modern Times', year: 1936 },
+ { title: 'Raiders of the Lost Ark', year: 1981 },
+ { title: 'Rear Window', year: 1954 },
+ { title: 'The Pianist', year: 2002 },
+ { title: 'The Departed', year: 2006 },
+ { title: 'Terminator 2: Judgment Day', year: 1991 },
+ { title: 'Back to the Future', year: 1985 },
+ { title: 'Whiplash', year: 2014 },
+ { title: 'Gladiator', year: 2000 },
+ { title: 'Memento', year: 2000 },
+ { title: 'The Prestige', year: 2006 },
+ { title: 'The Lion King', year: 1994 },
+ { title: 'Apocalypse Now', year: 1979 },
+ { title: 'Alien', year: 1979 },
+ { title: 'Sunset Boulevard', year: 1950 },
+ { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },
+ { title: 'The Great Dictator', year: 1940 },
+ { title: 'Cinema Paradiso', year: 1988 },
+ { title: 'The Lives of Others', year: 2006 },
+ { title: 'Grave of the Fireflies', year: 1988 },
+ { title: 'Paths of Glory', year: 1957 },
+ { title: 'Django Unchained', year: 2012 },
+ { title: 'The Shining', year: 1980 },
+ { title: 'WALL·E', year: 2008 },
+ { title: 'American Beauty', year: 1999 },
+ { title: 'The Dark Knight Rises', year: 2012 },
+ { title: 'Princess Mononoke', year: 1997 },
+ { title: 'Aliens', year: 1986 },
+ { title: 'Oldboy', year: 2003 },
+ { title: 'Once Upon a Time in America', year: 1984 },
+ { title: 'Witness for the Prosecution', year: 1957 },
+ { title: 'Das Boot', year: 1981 },
+ { title: 'Citizen Kane', year: 1941 },
+ { title: 'North by Northwest', year: 1959 },
+ { title: 'Vertigo', year: 1958 },
+ { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },
+ { title: 'Reservoir Dogs', year: 1992 },
+ { title: 'Braveheart', year: 1995 },
+ { title: 'M', year: 1931 },
+ { title: 'Requiem for a Dream', year: 2000 },
+ { title: 'Amélie', year: 2001 },
+ { title: 'A Clockwork Orange', year: 1971 },
+ { title: 'Like Stars on Earth', year: 2007 },
+ { title: 'Taxi Driver', year: 1976 },
+ { title: 'Lawrence of Arabia', year: 1962 },
+ { title: 'Double Indemnity', year: 1944 },
+ { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },
+ { title: 'Amadeus', year: 1984 },
+ { title: 'To Kill a Mockingbird', year: 1962 },
+ { title: 'Toy Story 3', year: 2010 },
+ { title: 'Logan', year: 2017 },
+ { title: 'Full Metal Jacket', year: 1987 },
+ { title: 'Dangal', year: 2016 },
+ { title: 'The Sting', year: 1973 },
+ { title: '2001: A Space Odyssey', year: 1968 },
+ { title: "Singin' in the Rain", year: 1952 },
+ { title: 'Toy Story', year: 1995 },
+ { title: 'Bicycle Thieves', year: 1948 },
+ { title: 'The Kid', year: 1921 },
+ { title: 'Inglourious Basterds', year: 2009 },
+ { title: 'Snatch', year: 2000 },
+ { title: '3 Idiots', year: 2009 },
+ { title: 'Monty Python and the Holy Grail', year: 1975 },
+];
+
+export default {
+ title: "Material-ui|autocomplete|LimitTags.stories"
+};
diff --git a/examples/storybook/stories/material-ui/autocomplete/Playground.stories.tsx b/examples/storybook/stories/material-ui/autocomplete/Playground.stories.tsx
new file mode 100644
index 00000000000000..5a7fd9f316cccf
--- /dev/null
+++ b/examples/storybook/stories/material-ui/autocomplete/Playground.stories.tsx
@@ -0,0 +1,242 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+
+export function Playground() {
+ const defaultProps = {
+ options: top100Films,
+ getOptionLabel: (option: FilmOptionType) => option.title,
+ };
+ const flatProps = {
+ options: top100Films.map((option) => option.title),
+ };
+ const [value, setValue] = React.useState
+ (
+ (
+ {
+ setValue(newValue);
+ }}
+ renderInput={(params) =>
+ );
+}
+
+interface FilmOptionType {
+ title: string;
+ year: number;
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+ { title: 'The Shawshank Redemption', year: 1994 },
+ { title: 'The Godfather', year: 1972 },
+ { title: 'The Godfather: Part II', year: 1974 },
+ { title: 'The Dark Knight', year: 2008 },
+ { title: '12 Angry Men', year: 1957 },
+ { title: "Schindler's List", year: 1993 },
+ { title: 'Pulp Fiction', year: 1994 },
+ { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
+ { title: 'The Good, the Bad and the Ugly', year: 1966 },
+ { title: 'Fight Club', year: 1999 },
+ { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
+ { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
+ { title: 'Forrest Gump', year: 1994 },
+ { title: 'Inception', year: 2010 },
+ { title: 'The Lord of the Rings: The Two Towers', year: 2002 },
+ { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+ { title: 'Goodfellas', year: 1990 },
+ { title: 'The Matrix', year: 1999 },
+ { title: 'Seven Samurai', year: 1954 },
+ { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },
+ { title: 'City of God', year: 2002 },
+ { title: 'Se7en', year: 1995 },
+ { title: 'The Silence of the Lambs', year: 1991 },
+ { title: "It's a Wonderful Life", year: 1946 },
+ { title: 'Life Is Beautiful', year: 1997 },
+ { title: 'The Usual Suspects', year: 1995 },
+ { title: 'Léon: The Professional', year: 1994 },
+ { title: 'Spirited Away', year: 2001 },
+ { title: 'Saving Private Ryan', year: 1998 },
+ { title: 'Once Upon a Time in the West', year: 1968 },
+ { title: 'American History X', year: 1998 },
+ { title: 'Interstellar', year: 2014 },
+ { title: 'Casablanca', year: 1942 },
+ { title: 'City Lights', year: 1931 },
+ { title: 'Psycho', year: 1960 },
+ { title: 'The Green Mile', year: 1999 },
+ { title: 'The Intouchables', year: 2011 },
+ { title: 'Modern Times', year: 1936 },
+ { title: 'Raiders of the Lost Ark', year: 1981 },
+ { title: 'Rear Window', year: 1954 },
+ { title: 'The Pianist', year: 2002 },
+ { title: 'The Departed', year: 2006 },
+ { title: 'Terminator 2: Judgment Day', year: 1991 },
+ { title: 'Back to the Future', year: 1985 },
+ { title: 'Whiplash', year: 2014 },
+ { title: 'Gladiator', year: 2000 },
+ { title: 'Memento', year: 2000 },
+ { title: 'The Prestige', year: 2006 },
+ { title: 'The Lion King', year: 1994 },
+ { title: 'Apocalypse Now', year: 1979 },
+ { title: 'Alien', year: 1979 },
+ { title: 'Sunset Boulevard', year: 1950 },
+ { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },
+ { title: 'The Great Dictator', year: 1940 },
+ { title: 'Cinema Paradiso', year: 1988 },
+ { title: 'The Lives of Others', year: 2006 },
+ { title: 'Grave of the Fireflies', year: 1988 },
+ { title: 'Paths of Glory', year: 1957 },
+ { title: 'Django Unchained', year: 2012 },
+ { title: 'The Shining', year: 1980 },
+ { title: 'WALL·E', year: 2008 },
+ { title: 'American Beauty', year: 1999 },
+ { title: 'The Dark Knight Rises', year: 2012 },
+ { title: 'Princess Mononoke', year: 1997 },
+ { title: 'Aliens', year: 1986 },
+ { title: 'Oldboy', year: 2003 },
+ { title: 'Once Upon a Time in America', year: 1984 },
+ { title: 'Witness for the Prosecution', year: 1957 },
+ { title: 'Das Boot', year: 1981 },
+ { title: 'Citizen Kane', year: 1941 },
+ { title: 'North by Northwest', year: 1959 },
+ { title: 'Vertigo', year: 1958 },
+ { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },
+ { title: 'Reservoir Dogs', year: 1992 },
+ { title: 'Braveheart', year: 1995 },
+ { title: 'M', year: 1931 },
+ { title: 'Requiem for a Dream', year: 2000 },
+ { title: 'Amélie', year: 2001 },
+ { title: 'A Clockwork Orange', year: 1971 },
+ { title: 'Like Stars on Earth', year: 2007 },
+ { title: 'Taxi Driver', year: 1976 },
+ { title: 'Lawrence of Arabia', year: 1962 },
+ { title: 'Double Indemnity', year: 1944 },
+ { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },
+ { title: 'Amadeus', year: 1984 },
+ { title: 'To Kill a Mockingbird', year: 1962 },
+ { title: 'Toy Story 3', year: 2010 },
+ { title: 'Logan', year: 2017 },
+ { title: 'Full Metal Jacket', year: 1987 },
+ { title: 'Dangal', year: 2016 },
+ { title: 'The Sting', year: 1973 },
+ { title: '2001: A Space Odyssey', year: 1968 },
+ { title: "Singin' in the Rain", year: 1952 },
+ { title: 'Toy Story', year: 1995 },
+ { title: 'Bicycle Thieves', year: 1948 },
+ { title: 'The Kid', year: 1921 },
+ { title: 'Inglourious Basterds', year: 2009 },
+ { title: 'Snatch', year: 2000 },
+ { title: '3 Idiots', year: 2009 },
+ { title: 'Monty Python and the Holy Grail', year: 1975 },
+];
+
+export default {
+ title: "Material-ui|autocomplete|Playground.stories"
+};
diff --git a/examples/storybook/stories/material-ui/autocomplete/Sizes.stories.tsx b/examples/storybook/stories/material-ui/autocomplete/Sizes.stories.tsx
new file mode 100644
index 00000000000000..83e51401bffc87
--- /dev/null
+++ b/examples/storybook/stories/material-ui/autocomplete/Sizes.stories.tsx
@@ -0,0 +1,217 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import Chip from '@material-ui/core/Chip';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: 500,
+ '& > * + *': {
+ marginTop: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function Sizes() {
+ const classes = useStyles();
+
+ return (
+
+ option.title}
+ defaultValue={top100Films[13]}
+ renderInput={(params) => (
+ option.title}
+ defaultValue={[top100Films[13]]}
+ renderInput={(params) => (
+ option.title}
+ defaultValue={top100Films[13]}
+ renderInput={(params) => (
+ option.title}
+ defaultValue={[top100Films[13]]}
+ renderInput={(params) => (
+ option.title}
+ defaultValue={top100Films[13]}
+ renderTags={(value, getTagProps) =>
+ value.map((option, index) => (
+ option.title}
+ defaultValue={[top100Films[13]]}
+ renderTags={(value, getTagProps) =>
+ value.map((option, index) => (
+
+ );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+ { title: 'The Shawshank Redemption', year: 1994 },
+ { title: 'The Godfather', year: 1972 },
+ { title: 'The Godfather: Part II', year: 1974 },
+ { title: 'The Dark Knight', year: 2008 },
+ { title: '12 Angry Men', year: 1957 },
+ { title: "Schindler's List", year: 1993 },
+ { title: 'Pulp Fiction', year: 1994 },
+ { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
+ { title: 'The Good, the Bad and the Ugly', year: 1966 },
+ { title: 'Fight Club', year: 1999 },
+ { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
+ { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
+ { title: 'Forrest Gump', year: 1994 },
+ { title: 'Inception', year: 2010 },
+ { title: 'The Lord of the Rings: The Two Towers', year: 2002 },
+ { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+ { title: 'Goodfellas', year: 1990 },
+ { title: 'The Matrix', year: 1999 },
+ { title: 'Seven Samurai', year: 1954 },
+ { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },
+ { title: 'City of God', year: 2002 },
+ { title: 'Se7en', year: 1995 },
+ { title: 'The Silence of the Lambs', year: 1991 },
+ { title: "It's a Wonderful Life", year: 1946 },
+ { title: 'Life Is Beautiful', year: 1997 },
+ { title: 'The Usual Suspects', year: 1995 },
+ { title: 'Léon: The Professional', year: 1994 },
+ { title: 'Spirited Away', year: 2001 },
+ { title: 'Saving Private Ryan', year: 1998 },
+ { title: 'Once Upon a Time in the West', year: 1968 },
+ { title: 'American History X', year: 1998 },
+ { title: 'Interstellar', year: 2014 },
+ { title: 'Casablanca', year: 1942 },
+ { title: 'City Lights', year: 1931 },
+ { title: 'Psycho', year: 1960 },
+ { title: 'The Green Mile', year: 1999 },
+ { title: 'The Intouchables', year: 2011 },
+ { title: 'Modern Times', year: 1936 },
+ { title: 'Raiders of the Lost Ark', year: 1981 },
+ { title: 'Rear Window', year: 1954 },
+ { title: 'The Pianist', year: 2002 },
+ { title: 'The Departed', year: 2006 },
+ { title: 'Terminator 2: Judgment Day', year: 1991 },
+ { title: 'Back to the Future', year: 1985 },
+ { title: 'Whiplash', year: 2014 },
+ { title: 'Gladiator', year: 2000 },
+ { title: 'Memento', year: 2000 },
+ { title: 'The Prestige', year: 2006 },
+ { title: 'The Lion King', year: 1994 },
+ { title: 'Apocalypse Now', year: 1979 },
+ { title: 'Alien', year: 1979 },
+ { title: 'Sunset Boulevard', year: 1950 },
+ { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },
+ { title: 'The Great Dictator', year: 1940 },
+ { title: 'Cinema Paradiso', year: 1988 },
+ { title: 'The Lives of Others', year: 2006 },
+ { title: 'Grave of the Fireflies', year: 1988 },
+ { title: 'Paths of Glory', year: 1957 },
+ { title: 'Django Unchained', year: 2012 },
+ { title: 'The Shining', year: 1980 },
+ { title: 'WALL·E', year: 2008 },
+ { title: 'American Beauty', year: 1999 },
+ { title: 'The Dark Knight Rises', year: 2012 },
+ { title: 'Princess Mononoke', year: 1997 },
+ { title: 'Aliens', year: 1986 },
+ { title: 'Oldboy', year: 2003 },
+ { title: 'Once Upon a Time in America', year: 1984 },
+ { title: 'Witness for the Prosecution', year: 1957 },
+ { title: 'Das Boot', year: 1981 },
+ { title: 'Citizen Kane', year: 1941 },
+ { title: 'North by Northwest', year: 1959 },
+ { title: 'Vertigo', year: 1958 },
+ { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },
+ { title: 'Reservoir Dogs', year: 1992 },
+ { title: 'Braveheart', year: 1995 },
+ { title: 'M', year: 1931 },
+ { title: 'Requiem for a Dream', year: 2000 },
+ { title: 'Amélie', year: 2001 },
+ { title: 'A Clockwork Orange', year: 1971 },
+ { title: 'Like Stars on Earth', year: 2007 },
+ { title: 'Taxi Driver', year: 1976 },
+ { title: 'Lawrence of Arabia', year: 1962 },
+ { title: 'Double Indemnity', year: 1944 },
+ { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },
+ { title: 'Amadeus', year: 1984 },
+ { title: 'To Kill a Mockingbird', year: 1962 },
+ { title: 'Toy Story 3', year: 2010 },
+ { title: 'Logan', year: 2017 },
+ { title: 'Full Metal Jacket', year: 1987 },
+ { title: 'Dangal', year: 2016 },
+ { title: 'The Sting', year: 1973 },
+ { title: '2001: A Space Odyssey', year: 1968 },
+ { title: "Singin' in the Rain", year: 1952 },
+ { title: 'Toy Story', year: 1995 },
+ { title: 'Bicycle Thieves', year: 1948 },
+ { title: 'The Kid', year: 1921 },
+ { title: 'Inglourious Basterds', year: 2009 },
+ { title: 'Snatch', year: 2000 },
+ { title: '3 Idiots', year: 2009 },
+ { title: 'Monty Python and the Holy Grail', year: 1975 },
+];
+
+export default {
+ title: "Material-ui|autocomplete|Sizes.stories"
+};
diff --git a/examples/storybook/stories/material-ui/autocomplete/Tags.stories.tsx b/examples/storybook/stories/material-ui/autocomplete/Tags.stories.tsx
new file mode 100644
index 00000000000000..8b50466de3abbf
--- /dev/null
+++ b/examples/storybook/stories/material-ui/autocomplete/Tags.stories.tsx
@@ -0,0 +1,180 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import Chip from '@material-ui/core/Chip';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: 500,
+ '& > * + *': {
+ marginTop: theme.spacing(3),
+ },
+ },
+ }),
+);
+
+export function Tags() {
+ const classes = useStyles();
+
+ return (
+
+ option.title}
+ defaultValue={[top100Films[13]]}
+ renderInput={(params) => (
+ option.title}
+ defaultValue={[top100Films[13]]}
+ filterSelectedOptions
+ renderInput={(params) => (
+ option.title)}
+ defaultValue={[top100Films[13].title]}
+ freeSolo
+ renderTags={(value: string[], getTagProps) =>
+ value.map((option: string, index: number) => (
+
+ );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+ { title: 'The Shawshank Redemption', year: 1994 },
+ { title: 'The Godfather', year: 1972 },
+ { title: 'The Godfather: Part II', year: 1974 },
+ { title: 'The Dark Knight', year: 2008 },
+ { title: '12 Angry Men', year: 1957 },
+ { title: "Schindler's List", year: 1993 },
+ { title: 'Pulp Fiction', year: 1994 },
+ { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
+ { title: 'The Good, the Bad and the Ugly', year: 1966 },
+ { title: 'Fight Club', year: 1999 },
+ { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
+ { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
+ { title: 'Forrest Gump', year: 1994 },
+ { title: 'Inception', year: 2010 },
+ { title: 'The Lord of the Rings: The Two Towers', year: 2002 },
+ { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+ { title: 'Goodfellas', year: 1990 },
+ { title: 'The Matrix', year: 1999 },
+ { title: 'Seven Samurai', year: 1954 },
+ { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },
+ { title: 'City of God', year: 2002 },
+ { title: 'Se7en', year: 1995 },
+ { title: 'The Silence of the Lambs', year: 1991 },
+ { title: "It's a Wonderful Life", year: 1946 },
+ { title: 'Life Is Beautiful', year: 1997 },
+ { title: 'The Usual Suspects', year: 1995 },
+ { title: 'Léon: The Professional', year: 1994 },
+ { title: 'Spirited Away', year: 2001 },
+ { title: 'Saving Private Ryan', year: 1998 },
+ { title: 'Once Upon a Time in the West', year: 1968 },
+ { title: 'American History X', year: 1998 },
+ { title: 'Interstellar', year: 2014 },
+ { title: 'Casablanca', year: 1942 },
+ { title: 'City Lights', year: 1931 },
+ { title: 'Psycho', year: 1960 },
+ { title: 'The Green Mile', year: 1999 },
+ { title: 'The Intouchables', year: 2011 },
+ { title: 'Modern Times', year: 1936 },
+ { title: 'Raiders of the Lost Ark', year: 1981 },
+ { title: 'Rear Window', year: 1954 },
+ { title: 'The Pianist', year: 2002 },
+ { title: 'The Departed', year: 2006 },
+ { title: 'Terminator 2: Judgment Day', year: 1991 },
+ { title: 'Back to the Future', year: 1985 },
+ { title: 'Whiplash', year: 2014 },
+ { title: 'Gladiator', year: 2000 },
+ { title: 'Memento', year: 2000 },
+ { title: 'The Prestige', year: 2006 },
+ { title: 'The Lion King', year: 1994 },
+ { title: 'Apocalypse Now', year: 1979 },
+ { title: 'Alien', year: 1979 },
+ { title: 'Sunset Boulevard', year: 1950 },
+ { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },
+ { title: 'The Great Dictator', year: 1940 },
+ { title: 'Cinema Paradiso', year: 1988 },
+ { title: 'The Lives of Others', year: 2006 },
+ { title: 'Grave of the Fireflies', year: 1988 },
+ { title: 'Paths of Glory', year: 1957 },
+ { title: 'Django Unchained', year: 2012 },
+ { title: 'The Shining', year: 1980 },
+ { title: 'WALL·E', year: 2008 },
+ { title: 'American Beauty', year: 1999 },
+ { title: 'The Dark Knight Rises', year: 2012 },
+ { title: 'Princess Mononoke', year: 1997 },
+ { title: 'Aliens', year: 1986 },
+ { title: 'Oldboy', year: 2003 },
+ { title: 'Once Upon a Time in America', year: 1984 },
+ { title: 'Witness for the Prosecution', year: 1957 },
+ { title: 'Das Boot', year: 1981 },
+ { title: 'Citizen Kane', year: 1941 },
+ { title: 'North by Northwest', year: 1959 },
+ { title: 'Vertigo', year: 1958 },
+ { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },
+ { title: 'Reservoir Dogs', year: 1992 },
+ { title: 'Braveheart', year: 1995 },
+ { title: 'M', year: 1931 },
+ { title: 'Requiem for a Dream', year: 2000 },
+ { title: 'Amélie', year: 2001 },
+ { title: 'A Clockwork Orange', year: 1971 },
+ { title: 'Like Stars on Earth', year: 2007 },
+ { title: 'Taxi Driver', year: 1976 },
+ { title: 'Lawrence of Arabia', year: 1962 },
+ { title: 'Double Indemnity', year: 1944 },
+ { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },
+ { title: 'Amadeus', year: 1984 },
+ { title: 'To Kill a Mockingbird', year: 1962 },
+ { title: 'Toy Story 3', year: 2010 },
+ { title: 'Logan', year: 2017 },
+ { title: 'Full Metal Jacket', year: 1987 },
+ { title: 'Dangal', year: 2016 },
+ { title: 'The Sting', year: 1973 },
+ { title: '2001: A Space Odyssey', year: 1968 },
+ { title: "Singin' in the Rain", year: 1952 },
+ { title: 'Toy Story', year: 1995 },
+ { title: 'Bicycle Thieves', year: 1948 },
+ { title: 'The Kid', year: 1921 },
+ { title: 'Inglourious Basterds', year: 2009 },
+ { title: 'Snatch', year: 2000 },
+ { title: '3 Idiots', year: 2009 },
+ { title: 'Monty Python and the Holy Grail', year: 1975 },
+];
+
+export default {
+ title: "Material-ui|autocomplete|Tags.stories"
+};
diff --git a/examples/storybook/stories/material-ui/autocomplete/UseAutocomplete.stories.tsx b/examples/storybook/stories/material-ui/autocomplete/UseAutocomplete.stories.tsx
new file mode 100644
index 00000000000000..3a483ee6850c80
--- /dev/null
+++ b/examples/storybook/stories/material-ui/autocomplete/UseAutocomplete.stories.tsx
@@ -0,0 +1,178 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import useAutocomplete from '@material-ui/lab/useAutocomplete';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ label: {
+ display: 'block',
+ },
+ input: {
+ width: 200,
+ },
+ listbox: {
+ width: 200,
+ margin: 0,
+ padding: 0,
+ zIndex: 1,
+ position: 'absolute',
+ listStyle: 'none',
+ backgroundColor: theme.palette.background.paper,
+ overflow: 'auto',
+ maxHeight: 200,
+ border: '1px solid rgba(0,0,0,.25)',
+ '& li[data-focus="true"]': {
+ backgroundColor: '#4a8df6',
+ color: 'white',
+ cursor: 'pointer',
+ },
+ '& li:active': {
+ backgroundColor: '#2977f5',
+ color: 'white',
+ },
+ },
+ }),
+);
+
+export function UseAutocomplete() {
+ const classes = useStyles();
+ const {
+ getRootProps,
+ getInputLabelProps,
+ getInputProps,
+ getListboxProps,
+ getOptionProps,
+ groupedOptions,
+ } = useAutocomplete({
+ id: 'use-autocomplete-demo',
+ options: top100Films,
+ getOptionLabel: (option) => option.title,
+ });
+
+ return (
+
+
+ );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+ { title: 'The Shawshank Redemption', year: 1994 },
+ { title: 'The Godfather', year: 1972 },
+ { title: 'The Godfather: Part II', year: 1974 },
+ { title: 'The Dark Knight', year: 2008 },
+ { title: '12 Angry Men', year: 1957 },
+ { title: "Schindler's List", year: 1993 },
+ { title: 'Pulp Fiction', year: 1994 },
+ { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
+ { title: 'The Good, the Bad and the Ugly', year: 1966 },
+ { title: 'Fight Club', year: 1999 },
+ { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
+ { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
+ { title: 'Forrest Gump', year: 1994 },
+ { title: 'Inception', year: 2010 },
+ { title: 'The Lord of the Rings: The Two Towers', year: 2002 },
+ { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+ { title: 'Goodfellas', year: 1990 },
+ { title: 'The Matrix', year: 1999 },
+ { title: 'Seven Samurai', year: 1954 },
+ { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },
+ { title: 'City of God', year: 2002 },
+ { title: 'Se7en', year: 1995 },
+ { title: 'The Silence of the Lambs', year: 1991 },
+ { title: "It's a Wonderful Life", year: 1946 },
+ { title: 'Life Is Beautiful', year: 1997 },
+ { title: 'The Usual Suspects', year: 1995 },
+ { title: 'Léon: The Professional', year: 1994 },
+ { title: 'Spirited Away', year: 2001 },
+ { title: 'Saving Private Ryan', year: 1998 },
+ { title: 'Once Upon a Time in the West', year: 1968 },
+ { title: 'American History X', year: 1998 },
+ { title: 'Interstellar', year: 2014 },
+ { title: 'Casablanca', year: 1942 },
+ { title: 'City Lights', year: 1931 },
+ { title: 'Psycho', year: 1960 },
+ { title: 'The Green Mile', year: 1999 },
+ { title: 'The Intouchables', year: 2011 },
+ { title: 'Modern Times', year: 1936 },
+ { title: 'Raiders of the Lost Ark', year: 1981 },
+ { title: 'Rear Window', year: 1954 },
+ { title: 'The Pianist', year: 2002 },
+ { title: 'The Departed', year: 2006 },
+ { title: 'Terminator 2: Judgment Day', year: 1991 },
+ { title: 'Back to the Future', year: 1985 },
+ { title: 'Whiplash', year: 2014 },
+ { title: 'Gladiator', year: 2000 },
+ { title: 'Memento', year: 2000 },
+ { title: 'The Prestige', year: 2006 },
+ { title: 'The Lion King', year: 1994 },
+ { title: 'Apocalypse Now', year: 1979 },
+ { title: 'Alien', year: 1979 },
+ { title: 'Sunset Boulevard', year: 1950 },
+ { title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', year: 1964 },
+ { title: 'The Great Dictator', year: 1940 },
+ { title: 'Cinema Paradiso', year: 1988 },
+ { title: 'The Lives of Others', year: 2006 },
+ { title: 'Grave of the Fireflies', year: 1988 },
+ { title: 'Paths of Glory', year: 1957 },
+ { title: 'Django Unchained', year: 2012 },
+ { title: 'The Shining', year: 1980 },
+ { title: 'WALL·E', year: 2008 },
+ { title: 'American Beauty', year: 1999 },
+ { title: 'The Dark Knight Rises', year: 2012 },
+ { title: 'Princess Mononoke', year: 1997 },
+ { title: 'Aliens', year: 1986 },
+ { title: 'Oldboy', year: 2003 },
+ { title: 'Once Upon a Time in America', year: 1984 },
+ { title: 'Witness for the Prosecution', year: 1957 },
+ { title: 'Das Boot', year: 1981 },
+ { title: 'Citizen Kane', year: 1941 },
+ { title: 'North by Northwest', year: 1959 },
+ { title: 'Vertigo', year: 1958 },
+ { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },
+ { title: 'Reservoir Dogs', year: 1992 },
+ { title: 'Braveheart', year: 1995 },
+ { title: 'M', year: 1931 },
+ { title: 'Requiem for a Dream', year: 2000 },
+ { title: 'Amélie', year: 2001 },
+ { title: 'A Clockwork Orange', year: 1971 },
+ { title: 'Like Stars on Earth', year: 2007 },
+ { title: 'Taxi Driver', year: 1976 },
+ { title: 'Lawrence of Arabia', year: 1962 },
+ { title: 'Double Indemnity', year: 1944 },
+ { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },
+ { title: 'Amadeus', year: 1984 },
+ { title: 'To Kill a Mockingbird', year: 1962 },
+ { title: 'Toy Story 3', year: 2010 },
+ { title: 'Logan', year: 2017 },
+ { title: 'Full Metal Jacket', year: 1987 },
+ { title: 'Dangal', year: 2016 },
+ { title: 'The Sting', year: 1973 },
+ { title: '2001: A Space Odyssey', year: 1968 },
+ { title: "Singin' in the Rain", year: 1952 },
+ { title: 'Toy Story', year: 1995 },
+ { title: 'Bicycle Thieves', year: 1948 },
+ { title: 'The Kid', year: 1921 },
+ { title: 'Inglourious Basterds', year: 2009 },
+ { title: 'Snatch', year: 2000 },
+ { title: '3 Idiots', year: 2009 },
+ { title: 'Monty Python and the Holy Grail', year: 1975 },
+];
+
+export default {
+ title: "Material-ui|autocomplete|UseAutocomplete.stories"
+};
diff --git a/examples/storybook/stories/material-ui/autocomplete/Virtualize.stories.tsx b/examples/storybook/stories/material-ui/autocomplete/Virtualize.stories.tsx
new file mode 100644
index 00000000000000..8da972f1af6335
--- /dev/null
+++ b/examples/storybook/stories/material-ui/autocomplete/Virtualize.stories.tsx
@@ -0,0 +1,139 @@
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete, { AutocompleteRenderGroupParams } from '@material-ui/lab/Autocomplete';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import { useTheme, makeStyles } from '@material-ui/core/styles';
+import { VariableSizeList, ListChildComponentProps } from 'react-window';
+import { Typography } from '@material-ui/core';
+
+const LISTBOX_PADDING = 8; // px
+
+function renderRow(props: ListChildComponentProps) {
+ const { data, index, style } = props;
+ return React.cloneElement(data[index], {
+ style: {
+ ...style,
+ top: (style.top as number) + LISTBOX_PADDING,
+ },
+ });
+}
+
+const OuterElementContext = React.createContext({});
+
+const OuterElementType = React.forwardRef
+
+
+
+ {groupedOptions.length > 0 ? (
+ -
+ {groupedOptions.map((option, index) => (
+
- {option.title} + ))} +
+
+ getChildSize(itemData[index])}
+ overscanCount={5}
+ itemCount={itemCount}
+ >
+ {renderRow}
+
+
+
+ );
+});
+
+function random(length: number) {
+ const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+ let result = '';
+
+ for (let i = 0; i < length; i += 1) {
+ result += characters.charAt(Math.floor(Math.random() * characters.length));
+ }
+
+ return result;
+}
+
+const useStyles = makeStyles({
+ listbox: {
+ boxSizing: 'border-box',
+ '& ul': {
+ padding: 0,
+ margin: 0,
+ },
+ },
+});
+
+const OPTIONS = Array.from(new Array(10000))
+ .map(() => random(10 + Math.ceil(Math.random() * 20)))
+ .sort((a: string, b: string) => a.toUpperCase().localeCompare(b.toUpperCase()));
+
+const renderGroup = (params: AutocompleteRenderGroupParams) => [
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|avatars|BadgeAvatars.stories"
+};
diff --git a/examples/storybook/stories/material-ui/avatars/FallbackAvatars.stories.tsx b/examples/storybook/stories/material-ui/avatars/FallbackAvatars.stories.tsx
new file mode 100644
index 00000000000000..80699f72c11704
--- /dev/null
+++ b/examples/storybook/stories/material-ui/avatars/FallbackAvatars.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import { deepOrange } from '@material-ui/core/colors';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ orange: {
+ color: theme.palette.getContrastText(deepOrange[500]),
+ backgroundColor: deepOrange[500],
+ },
+ }),
+);
+
+export function FallbackAvatars() {
+ const classes = useStyles();
+
+ return (
+
+
+ B
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|avatars|FallbackAvatars.stories"
+};
diff --git a/examples/storybook/stories/material-ui/avatars/GroupAvatars.stories.tsx b/examples/storybook/stories/material-ui/avatars/GroupAvatars.stories.tsx
new file mode 100644
index 00000000000000..df1085aa03f7c5
--- /dev/null
+++ b/examples/storybook/stories/material-ui/avatars/GroupAvatars.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import AvatarGroup from '@material-ui/lab/AvatarGroup';
+
+export function GroupAvatars() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|avatars|IconAvatars.stories"
+};
diff --git a/examples/storybook/stories/material-ui/avatars/ImageAvatars.stories.tsx b/examples/storybook/stories/material-ui/avatars/ImageAvatars.stories.tsx
new file mode 100644
index 00000000000000..9184f39cf5d96a
--- /dev/null
+++ b/examples/storybook/stories/material-ui/avatars/ImageAvatars.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ }),
+);
+
+export function ImageAvatars() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|avatars|ImageAvatars.stories"
+};
diff --git a/examples/storybook/stories/material-ui/avatars/LetterAvatars.stories.tsx b/examples/storybook/stories/material-ui/avatars/LetterAvatars.stories.tsx
new file mode 100644
index 00000000000000..7fb3b9ffc24848
--- /dev/null
+++ b/examples/storybook/stories/material-ui/avatars/LetterAvatars.stories.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import { deepOrange, deepPurple } from '@material-ui/core/colors';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ orange: {
+ color: theme.palette.getContrastText(deepOrange[500]),
+ backgroundColor: deepOrange[500],
+ },
+ purple: {
+ color: theme.palette.getContrastText(deepPurple[500]),
+ backgroundColor: deepPurple[500],
+ },
+ }),
+);
+
+export function LetterAvatars() {
+ const classes = useStyles();
+
+ return (
+
+ H
+ N
+ OP
+
+ );
+}
+
+export default {
+ title: "Material-ui|avatars|LetterAvatars.stories"
+};
diff --git a/examples/storybook/stories/material-ui/avatars/SizeAvatars.stories.tsx b/examples/storybook/stories/material-ui/avatars/SizeAvatars.stories.tsx
new file mode 100644
index 00000000000000..e933fbe6037f96
--- /dev/null
+++ b/examples/storybook/stories/material-ui/avatars/SizeAvatars.stories.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ small: {
+ width: theme.spacing(3),
+ height: theme.spacing(3),
+ },
+ large: {
+ width: theme.spacing(7),
+ height: theme.spacing(7),
+ },
+ }),
+);
+
+export function ImageAvatars() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|avatars|SizeAvatars.stories"
+};
diff --git a/examples/storybook/stories/material-ui/avatars/VariantAvatars.stories.tsx b/examples/storybook/stories/material-ui/avatars/VariantAvatars.stories.tsx
new file mode 100644
index 00000000000000..f3d9c4cfac3d16
--- /dev/null
+++ b/examples/storybook/stories/material-ui/avatars/VariantAvatars.stories.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import { deepOrange, green } from '@material-ui/core/colors';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ square: {
+ color: theme.palette.getContrastText(deepOrange[500]),
+ backgroundColor: deepOrange[500],
+ },
+ rounded: {
+ color: '#fff',
+ backgroundColor: green[500],
+ },
+ }),
+);
+
+export function VariantAvatars() {
+ const classes = useStyles();
+
+ return (
+
+
+ N
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|avatars|VariantAvatars.stories"
+};
diff --git a/examples/storybook/stories/material-ui/backdrop/SimpleBackdrop.stories.tsx b/examples/storybook/stories/material-ui/backdrop/SimpleBackdrop.stories.tsx
new file mode 100644
index 00000000000000..849e55655fc056
--- /dev/null
+++ b/examples/storybook/stories/material-ui/backdrop/SimpleBackdrop.stories.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import Backdrop from '@material-ui/core/Backdrop';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Button from '@material-ui/core/Button';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ backdrop: {
+ zIndex: theme.zIndex.drawer + 1,
+ color: '#fff',
+ },
+ }),
+);
+
+export function SimpleBackdrop() {
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+ const handleClose = () => {
+ setOpen(false);
+ };
+ const handleToggle = () => {
+ setOpen(!open);
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|backdrop|SimpleBackdrop.stories"
+};
diff --git a/examples/storybook/stories/material-ui/badges/BadgeMax.stories.tsx b/examples/storybook/stories/material-ui/badges/BadgeMax.stories.tsx
new file mode 100644
index 00000000000000..f5d13310789d49
--- /dev/null
+++ b/examples/storybook/stories/material-ui/badges/BadgeMax.stories.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Badge from '@material-ui/core/Badge';
+import MailIcon from '@material-ui/icons/Mail';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+const defaultProps = {
+ color: 'secondary' as 'secondary',
+ children:
+
+ );
+}
+
+export default {
+ title: "Material-ui|badges|BadgeMax.stories"
+};
diff --git a/examples/storybook/stories/material-ui/badges/BadgeOverlap.stories.tsx b/examples/storybook/stories/material-ui/badges/BadgeOverlap.stories.tsx
new file mode 100644
index 00000000000000..f824f26e5ad124
--- /dev/null
+++ b/examples/storybook/stories/material-ui/badges/BadgeOverlap.stories.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
+import Badge from '@material-ui/core/Badge';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ shape: {
+ backgroundColor: theme.palette.primary.main,
+ width: 40,
+ height: 40,
+ },
+ shapeCircle: {
+ borderRadius: '50%',
+ },
+ }),
+);
+
+export function BadgeOverlap() {
+ const classes = useStyles();
+
+ const rectangle = ;
+ const circle = ;
+
+ return (
+
+
+ {rectangle}
+
+
+ {rectangle}
+
+
+ {circle}
+
+
+ {circle}
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|badges|BadgeOverlap.stories"
+};
diff --git a/examples/storybook/stories/material-ui/badges/BadgeVisibility.stories.tsx b/examples/storybook/stories/material-ui/badges/BadgeVisibility.stories.tsx
new file mode 100644
index 00000000000000..d53bf663b3189c
--- /dev/null
+++ b/examples/storybook/stories/material-ui/badges/BadgeVisibility.stories.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
+import Badge from '@material-ui/core/Badge';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import Button from '@material-ui/core/Button';
+import AddIcon from '@material-ui/icons/Add';
+import RemoveIcon from '@material-ui/icons/Remove';
+import MailIcon from '@material-ui/icons/Mail';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ '& > *': {
+ marginBottom: theme.spacing(2),
+ },
+ '& .MuiBadge-root': {
+ marginRight: theme.spacing(4),
+ },
+ },
+ }),
+);
+
+export function BadgeVisibility() {
+ const classes = useStyles();
+ const [count, setCount] = React.useState(1);
+ const [invisible, setInvisible] = React.useState(false);
+
+ const handleBadgeVisibility = () => {
+ setInvisible(!invisible);
+ };
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|badges|BadgeVisibility.stories"
+};
diff --git a/examples/storybook/stories/material-ui/badges/CustomizedBadges.stories.tsx b/examples/storybook/stories/material-ui/badges/CustomizedBadges.stories.tsx
new file mode 100644
index 00000000000000..3da227af128a0e
--- /dev/null
+++ b/examples/storybook/stories/material-ui/badges/CustomizedBadges.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import Badge from '@material-ui/core/Badge';
+import { Theme, withStyles, createStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
+
+const StyledBadge = withStyles((theme: Theme) =>
+ createStyles({
+ badge: {
+ right: -3,
+ top: 13,
+ border: `2px solid ${theme.palette.background.paper}`,
+ padding: '0 4px',
+ },
+ }),
+)(Badge);
+
+export function CustomizedBadges() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Typography
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|badges|DotBadge.stories"
+};
diff --git a/examples/storybook/stories/material-ui/badges/ShowZeroBadge.stories.tsx b/examples/storybook/stories/material-ui/badges/ShowZeroBadge.stories.tsx
new file mode 100644
index 00000000000000..736f1ddbd19b2c
--- /dev/null
+++ b/examples/storybook/stories/material-ui/badges/ShowZeroBadge.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
+import Badge from '@material-ui/core/Badge';
+import MailIcon from '@material-ui/icons/Mail';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ }),
+);
+
+export function ShowZeroBadge() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|badges|ShowZeroBadge.stories"
+};
diff --git a/examples/storybook/stories/material-ui/badges/SimpleBadge.stories.tsx b/examples/storybook/stories/material-ui/badges/SimpleBadge.stories.tsx
new file mode 100644
index 00000000000000..22f254969b9aee
--- /dev/null
+++ b/examples/storybook/stories/material-ui/badges/SimpleBadge.stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Badge from '@material-ui/core/Badge';
+import MailIcon from '@material-ui/icons/Mail';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ }),
+);
+
+export function SimpleBadge() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|badges|SimpleBadge.stories"
+};
diff --git a/examples/storybook/stories/material-ui/bottom-navigation/LabelBottomNavigation.stories.tsx b/examples/storybook/stories/material-ui/bottom-navigation/LabelBottomNavigation.stories.tsx
new file mode 100644
index 00000000000000..8c9986881339b8
--- /dev/null
+++ b/examples/storybook/stories/material-ui/bottom-navigation/LabelBottomNavigation.stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import BottomNavigation from '@material-ui/core/BottomNavigation';
+import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
+import FolderIcon from '@material-ui/icons/Folder';
+import RestoreIcon from '@material-ui/icons/Restore';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+
+const useStyles = makeStyles({
+ root: {
+ width: 500,
+ },
+});
+
+export function LabelBottomNavigation() {
+ const classes = useStyles();
+ const [value, setValue] = React.useState('recents');
+
+ const handleChange = (event: React.ChangeEvent<{}>, newValue: string) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+
+ Material-UI
+
+
+ Core
+
+ Breadcrumb
+
+
+
+ Material-UI
+
+
+ Core
+
+ Breadcrumb
+
+ Breadcrumb
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|breadcrumbs|CustomSeparator.stories"
+};
diff --git a/examples/storybook/stories/material-ui/breadcrumbs/CustomizedBreadcrumbs.stories.tsx b/examples/storybook/stories/material-ui/breadcrumbs/CustomizedBreadcrumbs.stories.tsx
new file mode 100644
index 00000000000000..1dcc651249cac5
--- /dev/null
+++ b/examples/storybook/stories/material-ui/breadcrumbs/CustomizedBreadcrumbs.stories.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { emphasize, withStyles, Theme } from '@material-ui/core/styles';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Chip from '@material-ui/core/Chip';
+import HomeIcon from '@material-ui/icons/Home';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+const StyledBreadcrumb = withStyles((theme: Theme) => ({
+ root: {
+ backgroundColor: theme.palette.grey[100],
+ height: theme.spacing(3),
+ color: theme.palette.grey[800],
+ fontWeight: theme.typography.fontWeightRegular,
+ '&:hover, &:focus': {
+ backgroundColor: theme.palette.grey[300],
+ },
+ '&:active': {
+ boxShadow: theme.shadows[1],
+ backgroundColor: emphasize(theme.palette.grey[300], 0.12),
+ },
+ },
+}))(Chip) as typeof Chip; // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591
+
+function handleClick(event: React.MouseEvent
+
+ {({ location }) => {
+ const pathnames = location.pathname.split('/').filter((x) => x);
+
+ return (
+
+
+ Home
+
+ {pathnames.map((value, index) => {
+ const last = index === pathnames.length - 1;
+ const to = `/${pathnames.slice(0, index + 1).join('/')}`;
+
+ return last ? (
+
+ {breadcrumbNameMap[to]}
+
+ ) : (
+
+ {breadcrumbNameMap[to]}
+
+ );
+ })}
+
+ );
+ }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|button-group|BasicButtonGroup.stories"
+};
diff --git a/examples/storybook/stories/material-ui/button-group/DisableElevation.stories.tsx b/examples/storybook/stories/material-ui/button-group/DisableElevation.stories.tsx
new file mode 100644
index 00000000000000..7331c719bb8396
--- /dev/null
+++ b/examples/storybook/stories/material-ui/button-group/DisableElevation.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import Button from '@material-ui/core/Button';
+
+export function DisableElevation() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|button-group|GroupOrientation.stories"
+};
diff --git a/examples/storybook/stories/material-ui/button-group/GroupSizesColors.stories.tsx b/examples/storybook/stories/material-ui/button-group/GroupSizesColors.stories.tsx
new file mode 100644
index 00000000000000..3bb1e17545fead
--- /dev/null
+++ b/examples/storybook/stories/material-ui/button-group/GroupSizesColors.stories.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ }),
+);
+
+export function GroupSizesColors() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|button-group|GroupSizesColors.stories"
+};
diff --git a/examples/storybook/stories/material-ui/button-group/SplitButton.stories.tsx b/examples/storybook/stories/material-ui/button-group/SplitButton.stories.tsx
new file mode 100644
index 00000000000000..6acdd65fe98ac3
--- /dev/null
+++ b/examples/storybook/stories/material-ui/button-group/SplitButton.stories.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import Button from '@material-ui/core/Button';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Grow from '@material-ui/core/Grow';
+import Paper from '@material-ui/core/Paper';
+import Popper from '@material-ui/core/Popper';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+
+const options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge'];
+
+export function SplitButton() {
+ const [open, setOpen] = React.useState(false);
+ const anchorRef = React.useRef
+ {images.map((image) => (
+
+
+
+
+
+ {image.title}
+
+
+
+
+ ))}
+
+ );
+}
+
+export default {
+ title: "Material-ui|buttons|ButtonBase.stories"
+};
diff --git a/examples/storybook/stories/material-ui/buttons/ButtonSizes.stories.tsx b/examples/storybook/stories/material-ui/buttons/ButtonSizes.stories.tsx
new file mode 100644
index 00000000000000..c10ec601adc5d3
--- /dev/null
+++ b/examples/storybook/stories/material-ui/buttons/ButtonSizes.stories.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import DeleteIcon from '@material-ui/icons/Delete';
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ margin: {
+ margin: theme.spacing(1),
+ },
+ extendedIcon: {
+ marginRight: theme.spacing(1),
+ },
+ }),
+);
+
+export function ButtonSizes() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|buttons|ButtonSizes.stories"
+};
diff --git a/examples/storybook/stories/material-ui/buttons/ContainedButtons.stories.tsx b/examples/storybook/stories/material-ui/buttons/ContainedButtons.stories.tsx
new file mode 100644
index 00000000000000..f06e0b935002b6
--- /dev/null
+++ b/examples/storybook/stories/material-ui/buttons/ContainedButtons.stories.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ }),
+);
+
+export function ContainedButtons() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|buttons|ContainedButtons.stories"
+};
diff --git a/examples/storybook/stories/material-ui/buttons/CustomizedButtons.stories.tsx b/examples/storybook/stories/material-ui/buttons/CustomizedButtons.stories.tsx
new file mode 100644
index 00000000000000..60e28019238cd2
--- /dev/null
+++ b/examples/storybook/stories/material-ui/buttons/CustomizedButtons.stories.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import {
+ createMuiTheme,
+ createStyles,
+ withStyles,
+ makeStyles,
+ Theme,
+ ThemeProvider,
+} from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import { green, purple } from '@material-ui/core/colors';
+
+const BootstrapButton = withStyles({
+ root: {
+ boxShadow: 'none',
+ textTransform: 'none',
+ fontSize: 16,
+ padding: '6px 12px',
+ border: '1px solid',
+ lineHeight: 1.5,
+ backgroundColor: '#0063cc',
+ borderColor: '#0063cc',
+ fontFamily: [
+ '-apple-system',
+ 'BlinkMacSystemFont',
+ '"Segoe UI"',
+ 'Roboto',
+ '"Helvetica Neue"',
+ 'Arial',
+ 'sans-serif',
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"',
+ ].join(','),
+ '&:hover': {
+ backgroundColor: '#0069d9',
+ borderColor: '#0062cc',
+ boxShadow: 'none',
+ },
+ '&:active': {
+ boxShadow: 'none',
+ backgroundColor: '#0062cc',
+ borderColor: '#005cbf',
+ },
+ '&:focus': {
+ boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)',
+ },
+ },
+})(Button);
+
+const ColorButton = withStyles((theme: Theme) => ({
+ root: {
+ color: theme.palette.getContrastText(purple[500]),
+ backgroundColor: purple[500],
+ '&:hover': {
+ backgroundColor: purple[700],
+ },
+ },
+}))(Button);
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ margin: {
+ margin: theme.spacing(1),
+ },
+ }),
+);
+
+const theme = createMuiTheme({
+ palette: {
+ primary: green,
+ },
+});
+
+export function CustomizedButtons() {
+ const classes = useStyles();
+
+ return (
+
+
+ Custom CSS
+
+
+
+
+
+ Bootstrap
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|buttons|CustomizedButtons.stories"
+};
diff --git a/examples/storybook/stories/material-ui/buttons/DisableElevation.stories.tsx b/examples/storybook/stories/material-ui/buttons/DisableElevation.stories.tsx
new file mode 100644
index 00000000000000..bc78b123ea2528
--- /dev/null
+++ b/examples/storybook/stories/material-ui/buttons/DisableElevation.stories.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+
+export function DisableElevation() {
+ return (
+
+ );
+}
+
+export default {
+ title: "Material-ui|buttons|DisableElevation.stories"
+};
diff --git a/examples/storybook/stories/material-ui/buttons/IconButtons.stories.tsx b/examples/storybook/stories/material-ui/buttons/IconButtons.stories.tsx
new file mode 100644
index 00000000000000..9c655703705989
--- /dev/null
+++ b/examples/storybook/stories/material-ui/buttons/IconButtons.stories.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import DeleteIcon from '@material-ui/icons/Delete';
+import AlarmIcon from '@material-ui/icons/Alarm';
+import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ }),
+);
+
+export function IconButtons() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|buttons|IconButtons.stories"
+};
diff --git a/examples/storybook/stories/material-ui/buttons/IconLabelButtons.stories.tsx b/examples/storybook/stories/material-ui/buttons/IconLabelButtons.stories.tsx
new file mode 100644
index 00000000000000..c2f706b8ff3336
--- /dev/null
+++ b/examples/storybook/stories/material-ui/buttons/IconLabelButtons.stories.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import DeleteIcon from '@material-ui/icons/Delete';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import KeyboardVoiceIcon from '@material-ui/icons/KeyboardVoice';
+import Icon from '@material-ui/core/Icon';
+import SaveIcon from '@material-ui/icons/Save';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ button: {
+ margin: theme.spacing(1),
+ },
+ }),
+);
+
+export function IconLabelButtons() {
+ const classes = useStyles();
+
+ return (
+
+ }
+ >
+ Delete
+
+ {/* This Button uses a Font Icon, see the installation instructions in the Icon component docs. */}
+
+ }
+ >
+ Upload
+
+ }
+ >
+ Talk
+
+ }
+ >
+ Save
+
+ }
+ >
+ Save
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|buttons|IconLabelButtons.stories"
+};
diff --git a/examples/storybook/stories/material-ui/buttons/OutlinedButtons.stories.tsx b/examples/storybook/stories/material-ui/buttons/OutlinedButtons.stories.tsx
new file mode 100644
index 00000000000000..ae970540d9df04
--- /dev/null
+++ b/examples/storybook/stories/material-ui/buttons/OutlinedButtons.stories.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ }),
+);
+
+export function OutlinedButtons() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|buttons|OutlinedButtons.stories"
+};
diff --git a/examples/storybook/stories/material-ui/buttons/TextButtons.stories.tsx b/examples/storybook/stories/material-ui/buttons/TextButtons.stories.tsx
new file mode 100644
index 00000000000000..1c2d54d9acfe54
--- /dev/null
+++ b/examples/storybook/stories/material-ui/buttons/TextButtons.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ }),
+);
+
+export function TextButtons() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|buttons|TextButtons.stories"
+};
diff --git a/examples/storybook/stories/material-ui/buttons/UploadButtons.stories.tsx b/examples/storybook/stories/material-ui/buttons/UploadButtons.stories.tsx
new file mode 100644
index 00000000000000..a78570958437e2
--- /dev/null
+++ b/examples/storybook/stories/material-ui/buttons/UploadButtons.stories.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import PhotoCamera from '@material-ui/icons/PhotoCamera';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ input: {
+ display: 'none',
+ },
+ }),
+);
+
+export function UploadButtons() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|buttons|UploadButtons.stories"
+};
diff --git a/examples/storybook/stories/material-ui/cards/ImgMediaCard.stories.tsx b/examples/storybook/stories/material-ui/cards/ImgMediaCard.stories.tsx
new file mode 100644
index 00000000000000..42928bb6a5dc1e
--- /dev/null
+++ b/examples/storybook/stories/material-ui/cards/ImgMediaCard.stories.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles({
+ root: {
+ maxWidth: 345,
+ },
+});
+
+export function ImgMediaCard() {
+ const classes = useStyles();
+
+ return (
+
+
+
+ Live From Space
+
+
+ Mac Miller
+
+
+
+
+
+ {theme.direction === 'rtl' ?
+
+
+
+ {theme.direction === 'rtl' ?
+
+ + {'"a benevolent smile"'} +
+ {'"a benevolent smile"'} +
+
+ );
+}
+
+export default {
+ title: "Material-ui|checkboxes|Checkboxes.stories"
+};
diff --git a/examples/storybook/stories/material-ui/checkboxes/CheckboxesGroup.stories.tsx b/examples/storybook/stories/material-ui/checkboxes/CheckboxesGroup.stories.tsx
new file mode 100644
index 00000000000000..f5f09aabd4976d
--- /dev/null
+++ b/examples/storybook/stories/material-ui/checkboxes/CheckboxesGroup.stories.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Checkbox from '@material-ui/core/Checkbox';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ },
+ formControl: {
+ margin: theme.spacing(3),
+ },
+ }),
+);
+
+export function CheckboxesGroup() {
+ const classes = useStyles();
+ const [state, setState] = React.useState({
+ gilad: true,
+ jason: false,
+ antoine: false,
+ });
+
+ const handleChange = (event: React.ChangeEvent
+
+ Assign responsibility
+
+
+ Be careful
+
+
+ Pick two
+
+
+ You can display an error
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|checkboxes|CheckboxesGroup.stories"
+};
diff --git a/examples/storybook/stories/material-ui/checkboxes/CustomizedCheckbox.stories.tsx b/examples/storybook/stories/material-ui/checkboxes/CustomizedCheckbox.stories.tsx
new file mode 100644
index 00000000000000..0c17fa0488c4f5
--- /dev/null
+++ b/examples/storybook/stories/material-ui/checkboxes/CustomizedCheckbox.stories.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
+
+const useStyles = makeStyles({
+ root: {
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+ },
+ icon: {
+ borderRadius: 3,
+ width: 16,
+ height: 16,
+ boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
+ backgroundColor: '#f5f8fa',
+ backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
+ '$root.Mui-focusVisible &': {
+ outline: '2px auto rgba(19,124,189,.6)',
+ outlineOffset: 2,
+ },
+ 'input:hover ~ &': {
+ backgroundColor: '#ebf1f5',
+ },
+ 'input:disabled ~ &': {
+ boxShadow: 'none',
+ background: 'rgba(206,217,224,.5)',
+ },
+ },
+ checkedIcon: {
+ backgroundColor: '#137cbd',
+ backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+ '&:before': {
+ display: 'block',
+ width: 16,
+ height: 16,
+ backgroundImage:
+ "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
+ " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
+ "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
+ content: '""',
+ },
+ 'input:hover ~ &': {
+ backgroundColor: '#106ba3',
+ },
+ },
+});
+
+// Inspired by blueprintjs
+function StyledCheckbox(props: CheckboxProps) {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|checkboxes|CustomizedCheckbox.stories"
+};
diff --git a/examples/storybook/stories/material-ui/checkboxes/FormControlLabelPosition.stories.tsx b/examples/storybook/stories/material-ui/checkboxes/FormControlLabelPosition.stories.tsx
new file mode 100644
index 00000000000000..cdf97320e83f51
--- /dev/null
+++ b/examples/storybook/stories/material-ui/checkboxes/FormControlLabelPosition.stories.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+
+export function FormControlLabelPosition() {
+ return (
+
+ M} label="Clickable" onClick={handleClick} />
+ M}
+ label="Primary clickable"
+ clickable
+ color="primary"
+ onDelete={handleDelete}
+ deleteIcon={
+ );
+}
+
+export default {
+ title: "Material-ui|chips|Chips.stories"
+};
diff --git a/examples/storybook/stories/material-ui/chips/ChipsArray.stories.tsx b/examples/storybook/stories/material-ui/chips/ChipsArray.stories.tsx
new file mode 100644
index 00000000000000..011e642cc2424a
--- /dev/null
+++ b/examples/storybook/stories/material-ui/chips/ChipsArray.stories.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Chip from '@material-ui/core/Chip';
+import Paper from '@material-ui/core/Paper';
+import TagFacesIcon from '@material-ui/icons/TagFaces';
+
+interface ChipData {
+ key: number;
+ label: string;
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ justifyContent: 'center',
+ flexWrap: 'wrap',
+ listStyle: 'none',
+ padding: theme.spacing(0.5),
+ margin: 0,
+ },
+ chip: {
+ margin: theme.spacing(0.5),
+ },
+ }),
+);
+
+export function ChipsArray() {
+ const classes = useStyles();
+ const [chipData, setChipData] = React.useState
+ M}
+ label="Clickable"
+ onClick={handleClick}
+ variant="outlined"
+ />
+ M}
+ label="Primary clickable"
+ clickable
+ color="primary"
+ onDelete={handleDelete}
+ deleteIcon={
+ );
+}
+
+export default {
+ title: "Material-ui|chips|OutlinedChips.stories"
+};
diff --git a/examples/storybook/stories/material-ui/chips/SmallChips.stories.tsx b/examples/storybook/stories/material-ui/chips/SmallChips.stories.tsx
new file mode 100644
index 00000000000000..639eefc90a34bf
--- /dev/null
+++ b/examples/storybook/stories/material-ui/chips/SmallChips.stories.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import Chip from '@material-ui/core/Chip';
+import FaceIcon from '@material-ui/icons/Face';
+import DoneIcon from '@material-ui/icons/Done';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ justifyContent: 'center',
+ flexWrap: 'wrap',
+ '& > *': {
+ margin: theme.spacing(0.5),
+ },
+ },
+ }),
+);
+
+export function SmallChips() {
+ const classes = useStyles();
+
+ const handleDelete = () => {
+ console.info('You clicked the delete icon.');
+ };
+
+ const handleClick = () => {
+ console.info('You clicked the Chip.');
+ };
+
+ return (
+
+ M} label="Clickable" onClick={handleClick} />
+ M}
+ label="Primary Clickable"
+ clickable
+ color="primary"
+ onDelete={handleDelete}
+ deleteIcon={
+ );
+}
+
+export default {
+ title: "Material-ui|chips|SmallChips.stories"
+};
diff --git a/examples/storybook/stories/material-ui/chips/SmallOutlinedChips.stories.tsx b/examples/storybook/stories/material-ui/chips/SmallOutlinedChips.stories.tsx
new file mode 100644
index 00000000000000..adf8e8e4a8fe5b
--- /dev/null
+++ b/examples/storybook/stories/material-ui/chips/SmallOutlinedChips.stories.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import Chip from '@material-ui/core/Chip';
+import FaceIcon from '@material-ui/icons/Face';
+import DoneIcon from '@material-ui/icons/Done';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ justifyContent: 'center',
+ flexWrap: 'wrap',
+ '& > *': {
+ margin: theme.spacing(0.5),
+ },
+ },
+ }),
+);
+
+export function SmallOutlinedChips() {
+ const classes = useStyles();
+
+ const handleDelete = () => {
+ console.info('You clicked the delete icon.');
+ };
+
+ const handleClick = () => {
+ console.info('You clicked the Chip.');
+ };
+
+ return (
+
+ M}
+ label="Clickable"
+ onClick={handleClick}
+ />
+ M}
+ label="Primary clickable"
+ clickable
+ color="primary"
+ onDelete={handleDelete}
+ deleteIcon={
+ );
+}
+
+export default {
+ title: "Material-ui|chips|SmallOutlinedChips.stories"
+};
diff --git a/examples/storybook/stories/material-ui/click-away-listener/ClickAway.stories.tsx b/examples/storybook/stories/material-ui/click-away-listener/ClickAway.stories.tsx
new file mode 100644
index 00000000000000..f22099a5c60e89
--- /dev/null
+++ b/examples/storybook/stories/material-ui/click-away-listener/ClickAway.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ position: 'relative',
+ },
+ dropdown: {
+ position: 'absolute',
+ top: 28,
+ right: 0,
+ left: 0,
+ zIndex: 1,
+ border: '1px solid',
+ padding: theme.spacing(1),
+ backgroundColor: theme.palette.background.paper,
+ },
+ }),
+);
+
+export function ClickAway() {
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+
+ const handleClick = () => {
+ setOpen((prev) => !prev);
+ };
+
+ const handleClickAway = () => {
+ setOpen(false);
+ };
+
+ return (
+
+
+ {open ? (
+
+
+ Click me, I will stay visible until you click outside.
+
+ ) : null}
+
+
+ {open ? (
+
+
+ Click me, I will stay visible until you click outside.
+
+ ) : null}
+
+
+ {open ? (
+
+
+ ) : null}
+
+
+ Click me, I will stay visible until you click outside.
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|dialogs|AlertDialog.stories"
+};
diff --git a/examples/storybook/stories/material-ui/dialogs/AlertDialogSlide.stories.tsx b/examples/storybook/stories/material-ui/dialogs/AlertDialogSlide.stories.tsx
new file mode 100644
index 00000000000000..2a339c175a01ac
--- /dev/null
+++ b/examples/storybook/stories/material-ui/dialogs/AlertDialogSlide.stories.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Slide from '@material-ui/core/Slide';
+import { TransitionProps } from '@material-ui/core/transitions';
+
+const Transition = React.forwardRef(function Transition(
+ props: TransitionProps & { children?: React.ReactElement
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|dialogs|AlertDialogSlide.stories"
+};
diff --git a/examples/storybook/stories/material-ui/dialogs/ConfirmationDialog.stories.tsx b/examples/storybook/stories/material-ui/dialogs/ConfirmationDialog.stories.tsx
new file mode 100644
index 00000000000000..b38ba0e6da6e93
--- /dev/null
+++ b/examples/storybook/stories/material-ui/dialogs/ConfirmationDialog.stories.tsx
@@ -0,0 +1,174 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import Dialog from '@material-ui/core/Dialog';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+const options = [
+ 'None',
+ 'Atria',
+ 'Callisto',
+ 'Dione',
+ 'Ganymede',
+ 'Hangouts Call',
+ 'Luna',
+ 'Oberon',
+ 'Phobos',
+ 'Pyxis',
+ 'Sedna',
+ 'Titania',
+ 'Triton',
+ 'Umbriel',
+];
+
+export interface ConfirmationDialogRawProps {
+ classes: Record<'paper', string>;
+ id: string;
+ keepMounted: boolean;
+ value: string;
+ open: boolean;
+ onClose: (value?: string) => void;
+}
+
+function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) {
+ const { onClose, value: valueProp, open, ...other } = props;
+ const [value, setValue] = React.useState(valueProp);
+ const radioGroupRef = React.useRef
+
+ );
+}
+
+export default {
+ title: "Material-ui|dialogs|ConfirmationDialog.stories"
+};
diff --git a/examples/storybook/stories/material-ui/dialogs/CustomizedDialogs.stories.tsx b/examples/storybook/stories/material-ui/dialogs/CustomizedDialogs.stories.tsx
new file mode 100644
index 00000000000000..c1cf0a60d84bb7
--- /dev/null
+++ b/examples/storybook/stories/material-ui/dialogs/CustomizedDialogs.stories.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import MuiDialogTitle from '@material-ui/core/DialogTitle';
+import MuiDialogContent from '@material-ui/core/DialogContent';
+import MuiDialogActions from '@material-ui/core/DialogActions';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import Typography from '@material-ui/core/Typography';
+
+const styles = (theme: Theme) =>
+ createStyles({
+ root: {
+ margin: 0,
+ padding: theme.spacing(2),
+ },
+ closeButton: {
+ position: 'absolute',
+ right: theme.spacing(1),
+ top: theme.spacing(1),
+ color: theme.palette.grey[500],
+ },
+ });
+
+export interface DialogTitleProps extends WithStyles-
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|dialogs|CustomizedDialogs.stories"
+};
diff --git a/examples/storybook/stories/material-ui/dialogs/DraggableDialog.stories.tsx b/examples/storybook/stories/material-ui/dialogs/DraggableDialog.stories.tsx
new file mode 100644
index 00000000000000..178cca1001ff10
--- /dev/null
+++ b/examples/storybook/stories/material-ui/dialogs/DraggableDialog.stories.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Paper, { PaperProps } from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+
+function PaperComponent(props: PaperProps) {
+ return (
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|dialogs|DraggableDialog.stories"
+};
diff --git a/examples/storybook/stories/material-ui/dialogs/FormDialog.stories.tsx b/examples/storybook/stories/material-ui/dialogs/FormDialog.stories.tsx
new file mode 100644
index 00000000000000..70db77392a734f
--- /dev/null
+++ b/examples/storybook/stories/material-ui/dialogs/FormDialog.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
+export function FormDialog() {
+ const [open, setOpen] = React.useState(false);
+
+ const handleClickOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|dialogs|FormDialog.stories"
+};
diff --git a/examples/storybook/stories/material-ui/dialogs/FullScreenDialog.stories.tsx b/examples/storybook/stories/material-ui/dialogs/FullScreenDialog.stories.tsx
new file mode 100644
index 00000000000000..b995eab6ba2f8b
--- /dev/null
+++ b/examples/storybook/stories/material-ui/dialogs/FullScreenDialog.stories.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItem from '@material-ui/core/ListItem';
+import List from '@material-ui/core/List';
+import Divider from '@material-ui/core/Divider';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import CloseIcon from '@material-ui/icons/Close';
+import Slide from '@material-ui/core/Slide';
+import { TransitionProps } from '@material-ui/core/transitions';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ appBar: {
+ position: 'relative',
+ },
+ title: {
+ marginLeft: theme.spacing(2),
+ flex: 1,
+ },
+ }),
+);
+
+const Transition = React.forwardRef(function Transition(
+ props: TransitionProps & { children?: React.ReactElement },
+ ref: React.Ref
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|dialogs|FullScreenDialog.stories"
+};
diff --git a/examples/storybook/stories/material-ui/dialogs/MaxWidthDialog.stories.tsx b/examples/storybook/stories/material-ui/dialogs/MaxWidthDialog.stories.tsx
new file mode 100644
index 00000000000000..614db215d8284c
--- /dev/null
+++ b/examples/storybook/stories/material-ui/dialogs/MaxWidthDialog.stories.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Dialog, { DialogProps } from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import Switch from '@material-ui/core/Switch';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ form: {
+ display: 'flex',
+ flexDirection: 'column',
+ margin: 'auto',
+ width: 'fit-content',
+ },
+ formControl: {
+ marginTop: theme.spacing(2),
+ minWidth: 120,
+ },
+ formControlLabel: {
+ marginTop: theme.spacing(1),
+ },
+ }),
+);
+
+export function MaxWidthDialog() {
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+ const [fullWidth, setFullWidth] = React.useState(true);
+ const [maxWidth, setMaxWidth] = React.useState
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|dialogs|ResponsiveDialog.stories"
+};
diff --git a/examples/storybook/stories/material-ui/dialogs/ScrollDialog.stories.tsx b/examples/storybook/stories/material-ui/dialogs/ScrollDialog.stories.tsx
new file mode 100644
index 00000000000000..dca9af145069cc
--- /dev/null
+++ b/examples/storybook/stories/material-ui/dialogs/ScrollDialog.stories.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog, { DialogProps } from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
+export function ScrollDialog() {
+ const [open, setOpen] = React.useState(false);
+ const [scroll, setScroll] = React.useState
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|dialogs|ScrollDialog.stories"
+};
diff --git a/examples/storybook/stories/material-ui/dialogs/SimpleDialog.stories.tsx b/examples/storybook/stories/material-ui/dialogs/SimpleDialog.stories.tsx
new file mode 100644
index 00000000000000..70aa66c31189da
--- /dev/null
+++ b/examples/storybook/stories/material-ui/dialogs/SimpleDialog.stories.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Avatar from '@material-ui/core/Avatar';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemText from '@material-ui/core/ListItemText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Dialog from '@material-ui/core/Dialog';
+import PersonIcon from '@material-ui/icons/Person';
+import AddIcon from '@material-ui/icons/Add';
+import Typography from '@material-ui/core/Typography';
+import { blue } from '@material-ui/core/colors';
+
+const emails = ['username@gmail.com', 'user02@gmail.com'];
+const useStyles = makeStyles({
+ avatar: {
+ backgroundColor: blue[100],
+ color: blue[600],
+ },
+});
+
+export interface SimpleDialogProps {
+ open: boolean;
+ selectedValue: string;
+ onClose: (value: string) => void;
+}
+
+function SimpleDialog(props: SimpleDialogProps) {
+ const classes = useStyles();
+ const { onClose, selectedValue, open } = props;
+
+ const handleClose = () => {
+ onClose(selectedValue);
+ };
+
+ const handleListItemClick = (value: string) => {
+ onClose(value);
+ };
+
+ return (
+
+ );
+}
+
+export function SimpleDialogDemo() {
+ const [open, setOpen] = React.useState(false);
+ const [selectedValue, setSelectedValue] = React.useState(emails[1]);
+
+ const handleClickOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = (value: string) => {
+ setOpen(false);
+ setSelectedValue(value);
+ };
+
+ return (
+
+ Selected: {selectedValue}
+
+ +
+ );
+}
+
+export default {
+ title: "Material-ui|dialogs|SimpleDialog.stories"
+};
diff --git a/examples/storybook/stories/material-ui/dividers/InsetDividers.stories.tsx b/examples/storybook/stories/material-ui/dividers/InsetDividers.stories.tsx
new file mode 100644
index 00000000000000..2f78f50e57364d
--- /dev/null
+++ b/examples/storybook/stories/material-ui/dividers/InsetDividers.stories.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import Avatar from '@material-ui/core/Avatar';
+import ImageIcon from '@material-ui/icons/Image';
+import WorkIcon from '@material-ui/icons/Work';
+import BeachAccessIcon from '@material-ui/icons/BeachAccess';
+import Divider from '@material-ui/core/Divider';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ },
+ }),
+);
+
+export function InsetDividers() {
+ const classes = useStyles();
+
+ return (
+ + +
-
+
-
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|dividers|MiddleDividers.stories"
+};
diff --git a/examples/storybook/stories/material-ui/dividers/SubheaderDividers.stories.tsx b/examples/storybook/stories/material-ui/dividers/SubheaderDividers.stories.tsx
new file mode 100644
index 00000000000000..63d6ab30d63652
--- /dev/null
+++ b/examples/storybook/stories/material-ui/dividers/SubheaderDividers.stories.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemText from '@material-ui/core/ListItemText';
+import Avatar from '@material-ui/core/Avatar';
+import BeachAccessIcon from '@material-ui/icons/BeachAccess';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ },
+ dividerFullWidth: {
+ margin: `5px 0 0 ${theme.spacing(2)}px`,
+ },
+ dividerInset: {
+ margin: `5px 0 0 ${theme.spacing(9)}px`,
+ },
+ }),
+);
+
+export function SubheaderDividers() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+ Toothbrush
+
+
+
+
+ $4.50
+
+
+
+
+ Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the
+ hall.
+
+
+
+
+ Select type
+
+
+
+
+
+
+
+ -
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|dividers|VerticalDividers.stories"
+};
diff --git a/examples/storybook/stories/material-ui/drawers/ClippedDrawer.stories.tsx b/examples/storybook/stories/material-ui/drawers/ClippedDrawer.stories.tsx
new file mode 100644
index 00000000000000..6e919dc43fda28
--- /dev/null
+++ b/examples/storybook/stories/material-ui/drawers/ClippedDrawer.stories.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import AppBar from '@material-ui/core/AppBar';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Toolbar from '@material-ui/core/Toolbar';
+import List from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import MailIcon from '@material-ui/icons/Mail';
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ },
+ appBar: {
+ zIndex: theme.zIndex.drawer + 1,
+ },
+ drawer: {
+ width: drawerWidth,
+ flexShrink: 0,
+ },
+ drawerPaper: {
+ width: drawerWidth,
+ },
+ drawerContainer: {
+ overflow: 'auto',
+ },
+ content: {
+ flexGrow: 1,
+ padding: theme.spacing(3),
+ },
+ }),
+);
+
+export function ClippedDrawer() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+ Clipped drawer
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
+ facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
+ gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
+ donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
+ adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
+ Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
+ imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
+ arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
+ donec massa sapien faucibus et molestie ac.
+
+
+ Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
+ facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
+ tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
+ consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
+ vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
+ hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
+ tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
+ nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
+ accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|drawers|ClippedDrawer.stories"
+};
diff --git a/examples/storybook/stories/material-ui/drawers/MiniDrawer.stories.tsx b/examples/storybook/stories/material-ui/drawers/MiniDrawer.stories.tsx
new file mode 100644
index 00000000000000..8cc8a861305570
--- /dev/null
+++ b/examples/storybook/stories/material-ui/drawers/MiniDrawer.stories.tsx
@@ -0,0 +1,195 @@
+import React from 'react';
+import clsx from 'clsx';
+import { createStyles, makeStyles, useTheme, Theme } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import List from '@material-ui/core/List';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import MailIcon from '@material-ui/icons/Mail';
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ },
+ appBar: {
+ zIndex: theme.zIndex.drawer + 1,
+ transition: theme.transitions.create(['width', 'margin'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ },
+ appBarShift: {
+ marginLeft: drawerWidth,
+ width: `calc(100% - ${drawerWidth}px)`,
+ transition: theme.transitions.create(['width', 'margin'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ },
+ menuButton: {
+ marginRight: 36,
+ },
+ hide: {
+ display: 'none',
+ },
+ drawer: {
+ width: drawerWidth,
+ flexShrink: 0,
+ whiteSpace: 'nowrap',
+ },
+ drawerOpen: {
+ width: drawerWidth,
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ },
+ drawerClose: {
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ overflowX: 'hidden',
+ width: theme.spacing(7) + 1,
+ [theme.breakpoints.up('sm')]: {
+ width: theme.spacing(9) + 1,
+ },
+ },
+ toolbar: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-end',
+ padding: theme.spacing(0, 1),
+ // necessary for content to be below app bar
+ ...theme.mixins.toolbar,
+ },
+ content: {
+ flexGrow: 1,
+ padding: theme.spacing(3),
+ },
+ }),
+);
+
+export function MiniDrawer() {
+ const classes = useStyles();
+ const theme = useTheme();
+ const [open, setOpen] = React.useState(false);
+
+ const handleDrawerOpen = () => {
+ setOpen(true);
+ };
+
+ const handleDrawerClose = () => {
+ setOpen(false);
+ };
+
+ return (
+
+
+ -
+ {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+
-
+ {['All mail', 'Trash', 'Spam'].map((text, index) => (
+
+
+
+
+
+
+ Mini variant drawer
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
+ facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
+ gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
+ donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
+ adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
+ Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
+ imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
+ arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
+ donec massa sapien faucibus et molestie ac.
+
+
+ Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
+ facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
+ tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
+ consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
+ vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
+ hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
+ tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
+ nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
+ accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|drawers|MiniDrawer.stories"
+};
diff --git a/examples/storybook/stories/material-ui/drawers/PermanentDrawerLeft.stories.tsx b/examples/storybook/stories/material-ui/drawers/PermanentDrawerLeft.stories.tsx
new file mode 100644
index 00000000000000..6d9f0e446931b4
--- /dev/null
+++ b/examples/storybook/stories/material-ui/drawers/PermanentDrawerLeft.stories.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import List from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import MailIcon from '@material-ui/icons/Mail';
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ },
+ appBar: {
+ width: `calc(100% - ${drawerWidth}px)`,
+ marginLeft: drawerWidth,
+ },
+ drawer: {
+ width: drawerWidth,
+ flexShrink: 0,
+ },
+ drawerPaper: {
+ width: drawerWidth,
+ },
+ // necessary for content to be below app bar
+ toolbar: theme.mixins.toolbar,
+ content: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.default,
+ padding: theme.spacing(3),
+ },
+ }),
+);
+
+export function PermanentDrawerLeft() {
+ const classes = useStyles();
+
+ return (
+
+
+ {theme.direction === 'rtl' ?
+
+ -
+ {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+
-
+ {['All mail', 'Trash', 'Spam'].map((text, index) => (
+
+
+
+
+ Permanent drawer
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
+ facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
+ gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
+ donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
+ adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
+ Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
+ imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
+ arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
+ donec massa sapien faucibus et molestie ac.
+
+
+ Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
+ facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
+ tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
+ consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
+ vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
+ hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
+ tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
+ nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
+ accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|drawers|PermanentDrawerLeft.stories"
+};
diff --git a/examples/storybook/stories/material-ui/drawers/PermanentDrawerRight.stories.tsx b/examples/storybook/stories/material-ui/drawers/PermanentDrawerRight.stories.tsx
new file mode 100644
index 00000000000000..1cf232ed1b4dd5
--- /dev/null
+++ b/examples/storybook/stories/material-ui/drawers/PermanentDrawerRight.stories.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import List from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import MailIcon from '@material-ui/icons/Mail';
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ },
+ appBar: {
+ width: `calc(100% - ${drawerWidth}px)`,
+ marginRight: drawerWidth,
+ },
+ drawer: {
+ width: drawerWidth,
+ flexShrink: 0,
+ },
+ drawerPaper: {
+ width: drawerWidth,
+ },
+ // necessary for content to be below app bar
+ toolbar: theme.mixins.toolbar,
+ content: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.default,
+ padding: theme.spacing(3),
+ },
+ }),
+);
+
+export function PermanentDrawerRight() {
+ const classes = useStyles();
+
+ return (
+ -
+ {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+
-
+ {['All mail', 'Trash', 'Spam'].map((text, index) => (
+
+
+
+
+ Permanent drawer
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
+ facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
+ gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
+ donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
+ adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
+ Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
+ imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
+ arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
+ donec massa sapien faucibus et molestie ac.
+
+
+ Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
+ facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
+ tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
+ consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
+ vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
+ hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
+ tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
+ nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
+ accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|drawers|PermanentDrawerRight.stories"
+};
diff --git a/examples/storybook/stories/material-ui/drawers/PersistentDrawerLeft.stories.tsx b/examples/storybook/stories/material-ui/drawers/PersistentDrawerLeft.stories.tsx
new file mode 100644
index 00000000000000..e49f8a3d074004
--- /dev/null
+++ b/examples/storybook/stories/material-ui/drawers/PersistentDrawerLeft.stories.tsx
@@ -0,0 +1,188 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import List from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import MailIcon from '@material-ui/icons/Mail';
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ },
+ appBar: {
+ transition: theme.transitions.create(['margin', 'width'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ },
+ appBarShift: {
+ width: `calc(100% - ${drawerWidth}px)`,
+ marginLeft: drawerWidth,
+ transition: theme.transitions.create(['margin', 'width'], {
+ easing: theme.transitions.easing.easeOut,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ },
+ menuButton: {
+ marginRight: theme.spacing(2),
+ },
+ hide: {
+ display: 'none',
+ },
+ drawer: {
+ width: drawerWidth,
+ flexShrink: 0,
+ },
+ drawerPaper: {
+ width: drawerWidth,
+ },
+ drawerHeader: {
+ display: 'flex',
+ alignItems: 'center',
+ padding: theme.spacing(0, 1),
+ // necessary for content to be below app bar
+ ...theme.mixins.toolbar,
+ justifyContent: 'flex-end',
+ },
+ content: {
+ flexGrow: 1,
+ padding: theme.spacing(3),
+ transition: theme.transitions.create('margin', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ marginLeft: -drawerWidth,
+ },
+ contentShift: {
+ transition: theme.transitions.create('margin', {
+ easing: theme.transitions.easing.easeOut,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ marginLeft: 0,
+ },
+ }),
+);
+
+export function PersistentDrawerLeft() {
+ const classes = useStyles();
+ const theme = useTheme();
+ const [open, setOpen] = React.useState(false);
+
+ const handleDrawerOpen = () => {
+ setOpen(true);
+ };
+
+ const handleDrawerClose = () => {
+ setOpen(false);
+ };
+
+ return (
+ -
+ {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+
-
+ {['All mail', 'Trash', 'Spam'].map((text, index) => (
+
+
+
+
+
+
+ Persistent drawer
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
+ facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
+ gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
+ donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
+ adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
+ Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
+ imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
+ arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
+ donec massa sapien faucibus et molestie ac.
+
+
+ Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
+ facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
+ tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
+ consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
+ vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
+ hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
+ tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
+ nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
+ accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|drawers|PersistentDrawerLeft.stories"
+};
diff --git a/examples/storybook/stories/material-ui/drawers/PersistentDrawerRight.stories.tsx b/examples/storybook/stories/material-ui/drawers/PersistentDrawerRight.stories.tsx
new file mode 100644
index 00000000000000..1de46a33ac3533
--- /dev/null
+++ b/examples/storybook/stories/material-ui/drawers/PersistentDrawerRight.stories.tsx
@@ -0,0 +1,188 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import List from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import MailIcon from '@material-ui/icons/Mail';
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ },
+ appBar: {
+ transition: theme.transitions.create(['margin', 'width'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ },
+ appBarShift: {
+ width: `calc(100% - ${drawerWidth}px)`,
+ transition: theme.transitions.create(['margin', 'width'], {
+ easing: theme.transitions.easing.easeOut,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ marginRight: drawerWidth,
+ },
+ title: {
+ flexGrow: 1,
+ },
+ hide: {
+ display: 'none',
+ },
+ drawer: {
+ width: drawerWidth,
+ flexShrink: 0,
+ },
+ drawerPaper: {
+ width: drawerWidth,
+ },
+ drawerHeader: {
+ display: 'flex',
+ alignItems: 'center',
+ padding: theme.spacing(0, 1),
+ // necessary for content to be below app bar
+ ...theme.mixins.toolbar,
+ justifyContent: 'flex-start',
+ },
+ content: {
+ flexGrow: 1,
+ padding: theme.spacing(3),
+ transition: theme.transitions.create('margin', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ marginRight: -drawerWidth,
+ },
+ contentShift: {
+ transition: theme.transitions.create('margin', {
+ easing: theme.transitions.easing.easeOut,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ marginRight: 0,
+ },
+ }),
+);
+
+export function PersistentDrawerRight() {
+ const classes = useStyles();
+ const theme = useTheme();
+ const [open, setOpen] = React.useState(false);
+
+ const handleDrawerOpen = () => {
+ setOpen(true);
+ };
+
+ const handleDrawerClose = () => {
+ setOpen(false);
+ };
+
+ return (
+
+
+ {theme.direction === 'ltr' ?
+
+ -
+ {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+
-
+ {['All mail', 'Trash', 'Spam'].map((text, index) => (
+
+
+
+
+ Persistent drawer
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
+ facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
+ gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
+ donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
+ adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
+ Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
+ imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
+ arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
+ donec massa sapien faucibus et molestie ac.
+
+
+ Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
+ facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
+ tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
+ consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
+ vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
+ hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
+ tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
+ nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
+ accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|drawers|PersistentDrawerRight.stories"
+};
diff --git a/examples/storybook/stories/material-ui/drawers/ResponsiveDrawer.stories.tsx b/examples/storybook/stories/material-ui/drawers/ResponsiveDrawer.stories.tsx
new file mode 100644
index 00000000000000..605607024ac420
--- /dev/null
+++ b/examples/storybook/stories/material-ui/drawers/ResponsiveDrawer.stories.tsx
@@ -0,0 +1,182 @@
+import React from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Divider from '@material-ui/core/Divider';
+import Drawer from '@material-ui/core/Drawer';
+import Hidden from '@material-ui/core/Hidden';
+import IconButton from '@material-ui/core/IconButton';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import MailIcon from '@material-ui/icons/Mail';
+import MenuIcon from '@material-ui/icons/Menu';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ },
+ drawer: {
+ [theme.breakpoints.up('sm')]: {
+ width: drawerWidth,
+ flexShrink: 0,
+ },
+ },
+ appBar: {
+ [theme.breakpoints.up('sm')]: {
+ width: `calc(100% - ${drawerWidth}px)`,
+ marginLeft: drawerWidth,
+ },
+ },
+ menuButton: {
+ marginRight: theme.spacing(2),
+ [theme.breakpoints.up('sm')]: {
+ display: 'none',
+ },
+ },
+ // necessary for content to be below app bar
+ toolbar: theme.mixins.toolbar,
+ drawerPaper: {
+ width: drawerWidth,
+ },
+ content: {
+ flexGrow: 1,
+ padding: theme.spacing(3),
+ },
+ }),
+);
+
+interface Props {
+ /**
+ * Injected by the documentation to work in an iframe.
+ * You won't need it on your project.
+ */
+ window?: () => Window;
+}
+
+export function ResponsiveDrawer(props: Props) {
+ const { window } = props;
+ const classes = useStyles();
+ const theme = useTheme();
+ const [mobileOpen, setMobileOpen] = React.useState(false);
+
+ const handleDrawerToggle = () => {
+ setMobileOpen(!mobileOpen);
+ };
+
+ const drawer = (
+
+
+ {theme.direction === 'rtl' ?
+
+ -
+ {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+
-
+ {['All mail', 'Trash', 'Spam'].map((text, index) => (
+
+
+
+ );
+
+ const container = window !== undefined ? () => window().document.body : undefined;
+
+ return (
+ -
+ {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+
-
+ {['All mail', 'Trash', 'Spam'].map((text, index) => (
+
+
+
+
+
+
+ Responsive drawer
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
+ facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
+ gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
+ donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
+ adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
+ Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
+ imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
+ arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
+ donec massa sapien faucibus et molestie ac.
+
+
+ Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
+ facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
+ tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
+ consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
+ vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
+ hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
+ tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
+ nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
+ accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|drawers|ResponsiveDrawer.stories"
+};
diff --git a/examples/storybook/stories/material-ui/drawers/SwipeableTemporaryDrawer.stories.tsx b/examples/storybook/stories/material-ui/drawers/SwipeableTemporaryDrawer.stories.tsx
new file mode 100644
index 00000000000000..9faa9b344ed7fe
--- /dev/null
+++ b/examples/storybook/stories/material-ui/drawers/SwipeableTemporaryDrawer.stories.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
+import Button from '@material-ui/core/Button';
+import List from '@material-ui/core/List';
+import Divider from '@material-ui/core/Divider';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import MailIcon from '@material-ui/icons/Mail';
+
+const useStyles = makeStyles({
+ list: {
+ width: 250,
+ },
+ fullList: {
+ width: 'auto',
+ },
+});
+
+type Anchor = 'top' | 'left' | 'bottom' | 'right';
+
+export function SwipeableTemporaryDrawer() {
+ const classes = useStyles();
+ const [state, setState] = React.useState({
+ top: false,
+ left: false,
+ bottom: false,
+ right: false,
+ });
+
+ const toggleDrawer = (anchor: Anchor, open: boolean) => (
+ event: React.KeyboardEvent | React.MouseEvent,
+ ) => {
+ if (
+ event &&
+ event.type === 'keydown' &&
+ ((event as React.KeyboardEvent).key === 'Tab' ||
+ (event as React.KeyboardEvent).key === 'Shift')
+ ) {
+ return;
+ }
+
+ setState({ ...state, [anchor]: open });
+ };
+
+ const list = (anchor: Anchor) => (
+
+
+ );
+
+ return (
+ -
+ {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+
-
+ {['All mail', 'Trash', 'Spam'].map((text, index) => (
+
+ {(['left', 'right', 'top', 'bottom'] as Anchor[]).map((anchor) => (
+
+
+
+ {list(anchor)}
+
+
+ ))}
+
+ );
+}
+
+export default {
+ title: "Material-ui|drawers|SwipeableTemporaryDrawer.stories"
+};
diff --git a/examples/storybook/stories/material-ui/drawers/TemporaryDrawer.stories.tsx b/examples/storybook/stories/material-ui/drawers/TemporaryDrawer.stories.tsx
new file mode 100644
index 00000000000000..9e24bad14ccc6d
--- /dev/null
+++ b/examples/storybook/stories/material-ui/drawers/TemporaryDrawer.stories.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import Button from '@material-ui/core/Button';
+import List from '@material-ui/core/List';
+import Divider from '@material-ui/core/Divider';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import MailIcon from '@material-ui/icons/Mail';
+
+const useStyles = makeStyles({
+ list: {
+ width: 250,
+ },
+ fullList: {
+ width: 'auto',
+ },
+});
+
+type Anchor = 'top' | 'left' | 'bottom' | 'right';
+
+export function TemporaryDrawer() {
+ const classes = useStyles();
+ const [state, setState] = React.useState({
+ top: false,
+ left: false,
+ bottom: false,
+ right: false,
+ });
+
+ const toggleDrawer = (anchor: Anchor, open: boolean) => (
+ event: React.KeyboardEvent | React.MouseEvent,
+ ) => {
+ if (
+ event.type === 'keydown' &&
+ ((event as React.KeyboardEvent).key === 'Tab' ||
+ (event as React.KeyboardEvent).key === 'Shift')
+ ) {
+ return;
+ }
+
+ setState({ ...state, [anchor]: open });
+ };
+
+ const list = (anchor: Anchor) => (
+
+
+ );
+
+ return (
+ -
+ {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+
-
+ {['All mail', 'Trash', 'Spam'].map((text, index) => (
+
+ {(['left', 'right', 'top', 'bottom'] as Anchor[]).map((anchor) => (
+
+
+
+ {list(anchor)}
+
+
+ ))}
+
+ );
+}
+
+export default {
+ title: "Material-ui|drawers|TemporaryDrawer.stories"
+};
diff --git a/examples/storybook/stories/material-ui/expansion-panels/ActionsInExpansionPanelSummary.stories.tsx b/examples/storybook/stories/material-ui/expansion-panels/ActionsInExpansionPanelSummary.stories.tsx
new file mode 100644
index 00000000000000..e255172ba6d5cf
--- /dev/null
+++ b/examples/storybook/stories/material-ui/expansion-panels/ActionsInExpansionPanelSummary.stories.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+const useStyles = makeStyles({
+ root: {
+ width: '100%',
+ },
+});
+
+export function ActionsInExpansionPanelSummary() {
+ const classes = useStyles();
+
+ return (
+
+
+ event.stopPropagation()}
+ onFocus={(event) => event.stopPropagation()}
+ control={
+
+ The click event of the nested action will propagate up and expand the panel unless you
+ explicitly stop it.
+
+
+
+
+ event.stopPropagation()}
+ onFocus={(event) => event.stopPropagation()}
+ control={
+
+ The focus event of the nested action will propagate up and also focus the expansion
+ panel unless you explicitly stop it.
+
+
+
+
+ event.stopPropagation()}
+ onFocus={(event) => event.stopPropagation()}
+ control={
+
+ If you forget to put an aria-label on the nested action, the label of the action will
+ also be included in the label of the parent button that controls the panel expansion.
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|expansion-panels|ActionsInExpansionPanelSummary.stories"
+};
diff --git a/examples/storybook/stories/material-ui/expansion-panels/ControlledExpansionPanels.stories.tsx b/examples/storybook/stories/material-ui/expansion-panels/ControlledExpansionPanels.stories.tsx
new file mode 100644
index 00000000000000..cac3bd4d092223
--- /dev/null
+++ b/examples/storybook/stories/material-ui/expansion-panels/ControlledExpansionPanels.stories.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ },
+ heading: {
+ fontSize: theme.typography.pxToRem(15),
+ flexBasis: '33.33%',
+ flexShrink: 0,
+ },
+ secondaryHeading: {
+ fontSize: theme.typography.pxToRem(15),
+ color: theme.palette.text.secondary,
+ },
+ }),
+);
+
+export function ControlledExpansionPanels() {
+ const classes = useStyles();
+ const [expanded, setExpanded] = React.useState
+
+ General settings
+ I am an expansion panel
+
+
+
+ Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget
+ maximus est, id dignissim quam.
+
+
+
+
+ Users
+
+ You are currently not an owner
+
+
+
+
+ Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar
+ diam eros in elit. Pellentesque convallis laoreet laoreet.
+
+
+
+
+ Advanced settings
+
+ Filtering has been entirely disabled for whole web server
+
+
+
+
+ Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros,
+ vitae egestas augue. Duis vel est augue.
+
+
+
+
+ Personal data
+
+
+
+ Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas eros,
+ vitae egestas augue. Duis vel est augue.
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|expansion-panels|ControlledExpansionPanels.stories"
+};
diff --git a/examples/storybook/stories/material-ui/expansion-panels/CustomizedExpansionPanels.stories.tsx b/examples/storybook/stories/material-ui/expansion-panels/CustomizedExpansionPanels.stories.tsx
new file mode 100644
index 00000000000000..478674d58855e0
--- /dev/null
+++ b/examples/storybook/stories/material-ui/expansion-panels/CustomizedExpansionPanels.stories.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import MuiExpansionPanel from '@material-ui/core/ExpansionPanel';
+import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import Typography from '@material-ui/core/Typography';
+
+const ExpansionPanel = withStyles({
+ root: {
+ border: '1px solid rgba(0, 0, 0, .125)',
+ boxShadow: 'none',
+ '&:not(:last-child)': {
+ borderBottom: 0,
+ },
+ '&:before': {
+ display: 'none',
+ },
+ '&$expanded': {
+ margin: 'auto',
+ },
+ },
+ expanded: {},
+})(MuiExpansionPanel);
+
+const ExpansionPanelSummary = withStyles({
+ root: {
+ backgroundColor: 'rgba(0, 0, 0, .03)',
+ borderBottom: '1px solid rgba(0, 0, 0, .125)',
+ marginBottom: -1,
+ minHeight: 56,
+ '&$expanded': {
+ minHeight: 56,
+ },
+ },
+ content: {
+ '&$expanded': {
+ margin: '12px 0',
+ },
+ },
+ expanded: {},
+})(MuiExpansionPanelSummary);
+
+const ExpansionPanelDetails = withStyles((theme) => ({
+ root: {
+ padding: theme.spacing(2),
+ },
+}))(MuiExpansionPanelDetails);
+
+export function CustomizedExpansionPanels() {
+ const [expanded, setExpanded] = React.useState
+
+
+ Collapsible Group Item #1
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+ sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+
+
+
+
+
+ Collapsible Group Item #2
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+ sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+
+
+
+
+
+ Collapsible Group Item #3
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+ sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|expansion-panels|CustomizedExpansionPanels.stories"
+};
diff --git a/examples/storybook/stories/material-ui/expansion-panels/DetailedExpansionPanel.stories.tsx b/examples/storybook/stories/material-ui/expansion-panels/DetailedExpansionPanel.stories.tsx
new file mode 100644
index 00000000000000..516c11556bf8c5
--- /dev/null
+++ b/examples/storybook/stories/material-ui/expansion-panels/DetailedExpansionPanel.stories.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
+import clsx from 'clsx';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Chip from '@material-ui/core/Chip';
+import Button from '@material-ui/core/Button';
+import Divider from '@material-ui/core/Divider';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ },
+ heading: {
+ fontSize: theme.typography.pxToRem(15),
+ },
+ secondaryHeading: {
+ fontSize: theme.typography.pxToRem(15),
+ color: theme.palette.text.secondary,
+ },
+ icon: {
+ verticalAlign: 'bottom',
+ height: 20,
+ width: 20,
+ },
+ details: {
+ alignItems: 'center',
+ },
+ column: {
+ flexBasis: '33.33%',
+ },
+ helper: {
+ borderLeft: `2px solid ${theme.palette.divider}`,
+ padding: theme.spacing(1, 2),
+ },
+ link: {
+ color: theme.palette.primary.main,
+ textDecoration: 'none',
+ '&:hover': {
+ textDecoration: 'underline',
+ },
+ },
+ }),
+);
+
+export function DetailedExpansionPanel() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|expansion-panels|DetailedExpansionPanel.stories"
+};
diff --git a/examples/storybook/stories/material-ui/expansion-panels/SimpleExpansionPanel.stories.tsx b/examples/storybook/stories/material-ui/expansion-panels/SimpleExpansionPanel.stories.tsx
new file mode 100644
index 00000000000000..f565e87943a146
--- /dev/null
+++ b/examples/storybook/stories/material-ui/expansion-panels/SimpleExpansionPanel.stories.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ },
+ heading: {
+ fontSize: theme.typography.pxToRem(15),
+ fontWeight: theme.typography.fontWeightRegular,
+ },
+ }),
+);
+
+export function SimpleExpansionPanel() {
+ const classes = useStyles();
+
+ return (
+
+ Location
+
+
+ Select trip destination
+
+
+
+ {}} />
+
+
+
+ Select your destination of choice
+
+ + Learn more + +
+
+ + + Learn more + +
+
+ Expansion Panel 1
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+ sit amet blandit leo lobortis eget.
+
+
+
+
+ Expansion Panel 2
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+ sit amet blandit leo lobortis eget.
+
+
+
+
+ Disabled Expansion Panel
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|expansion-panels|SimpleExpansionPanel.stories"
+};
diff --git a/examples/storybook/stories/material-ui/floating-action-button/FloatingActionButtonSize.stories.tsx b/examples/storybook/stories/material-ui/floating-action-button/FloatingActionButtonSize.stories.tsx
new file mode 100644
index 00000000000000..719972f1937bde
--- /dev/null
+++ b/examples/storybook/stories/material-ui/floating-action-button/FloatingActionButtonSize.stories.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Fab from '@material-ui/core/Fab';
+import AddIcon from '@material-ui/icons/Add';
+import NavigationIcon from '@material-ui/icons/Navigation';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ margin: {
+ margin: theme.spacing(1),
+ },
+ extendedIcon: {
+ marginRight: theme.spacing(1),
+ },
+ }),
+);
+
+export function FloatingActionButtonSize() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|floating-action-button|FloatingActionButtonSize.stories"
+};
diff --git a/examples/storybook/stories/material-ui/floating-action-button/FloatingActionButtonZoom.stories.tsx b/examples/storybook/stories/material-ui/floating-action-button/FloatingActionButtonZoom.stories.tsx
new file mode 100644
index 00000000000000..916e4877017af9
--- /dev/null
+++ b/examples/storybook/stories/material-ui/floating-action-button/FloatingActionButtonZoom.stories.tsx
@@ -0,0 +1,162 @@
+import React from 'react';
+import clsx from 'clsx';
+import SwipeableViews from 'react-swipeable-views';
+import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography from '@material-ui/core/Typography';
+import Zoom from '@material-ui/core/Zoom';
+import Fab from '@material-ui/core/Fab';
+import AddIcon from '@material-ui/icons/Add';
+import EditIcon from '@material-ui/icons/Edit';
+import UpIcon from '@material-ui/icons/KeyboardArrowUp';
+import { green } from '@material-ui/core/colors';
+import Box from '@material-ui/core/Box';
+
+interface TabPanelProps {
+ children?: React.ReactNode;
+ dir?: string;
+ index: any;
+ value: any;
+}
+
+function TabPanel(props: TabPanelProps) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+ {fabs.map((fab, index) => (
+
+
+ {fab.icon}
+
+
+ ))}
+
+ );
+}
+
+export default {
+ title: "Material-ui|floating-action-button|FloatingActionButtonZoom.stories"
+};
diff --git a/examples/storybook/stories/material-ui/floating-action-button/FloatingActionButtons.stories.tsx b/examples/storybook/stories/material-ui/floating-action-button/FloatingActionButtons.stories.tsx
new file mode 100644
index 00000000000000..b1d562d30b2006
--- /dev/null
+++ b/examples/storybook/stories/material-ui/floating-action-button/FloatingActionButtons.stories.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Fab from '@material-ui/core/Fab';
+import AddIcon from '@material-ui/icons/Add';
+import EditIcon from '@material-ui/icons/Edit';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import NavigationIcon from '@material-ui/icons/Navigation';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ extendedIcon: {
+ marginRight: theme.spacing(1),
+ },
+ }),
+);
+
+export function FloatingActionButtons() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|floating-action-button|FloatingActionButtons.stories"
+};
diff --git a/examples/storybook/stories/material-ui/grid/AutoGrid.stories.tsx b/examples/storybook/stories/material-ui/grid/AutoGrid.stories.tsx
new file mode 100644
index 00000000000000..473f3420194e9a
--- /dev/null
+++ b/examples/storybook/stories/material-ui/grid/AutoGrid.stories.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ flexGrow: 1,
+ },
+ paper: {
+ padding: theme.spacing(2),
+ textAlign: 'center',
+ color: theme.palette.text.secondary,
+ },
+ }),
+);
+
+export function AutoGrid() {
+ const classes = useStyles();
+
+ return (
+
+
+
+ xs
+
+
+ xs
+
+
+ xs
+
+
+
+
+ xs
+
+
+ xs=6
+
+
+ xs
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|grid|AutoGrid.stories"
+};
diff --git a/examples/storybook/stories/material-ui/grid/AutoGridNoWrap.stories.tsx b/examples/storybook/stories/material-ui/grid/AutoGridNoWrap.stories.tsx
new file mode 100644
index 00000000000000..01524492e8a4a4
--- /dev/null
+++ b/examples/storybook/stories/material-ui/grid/AutoGridNoWrap.stories.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import Paper from '@material-ui/core/Paper';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Avatar from '@material-ui/core/Avatar';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ flexGrow: 1,
+ overflow: 'hidden',
+ padding: theme.spacing(0, 3),
+ },
+ paper: {
+ maxWidth: 400,
+ margin: `${theme.spacing(1)}px auto`,
+ padding: theme.spacing(2),
+ },
+ }),
+);
+
+const message = `Truncation should be conditionally applicable on this long line of text
+ as this is a much longer line than what the container can support. `;
+
+export function AutoGridNoWrap() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+ W
+
+
+ {message}
+
+
+
+
+
+
+ W
+
+
+ {message}
+
+
+
+
+
+
+ W
+
+
+ {message}
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|grid|AutoGridNoWrap.stories"
+};
diff --git a/examples/storybook/stories/material-ui/grid/CSSGrid.stories.tsx b/examples/storybook/stories/material-ui/grid/CSSGrid.stories.tsx
new file mode 100644
index 00000000000000..8d63737a7365b3
--- /dev/null
+++ b/examples/storybook/stories/material-ui/grid/CSSGrid.stories.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import Divider from '@material-ui/core/Divider';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ container: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(12, 1fr)',
+ gridGap: theme.spacing(3),
+ },
+ paper: {
+ padding: theme.spacing(1),
+ textAlign: 'center',
+ color: theme.palette.text.secondary,
+ whiteSpace: 'nowrap',
+ marginBottom: theme.spacing(1),
+ },
+ divider: {
+ margin: theme.spacing(2, 0),
+ },
+ }),
+);
+
+export function CSSGrid() {
+ const classes = useStyles();
+
+ return (
+
+
+ Material-UI Grid:
+
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=8
+
+
+ xs=4
+
+
+
+ CSS Grid Layout:
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|grid|CSSGrid.stories"
+};
diff --git a/examples/storybook/stories/material-ui/grid/CenteredGrid.stories.tsx b/examples/storybook/stories/material-ui/grid/CenteredGrid.stories.tsx
new file mode 100644
index 00000000000000..727addfa16fde2
--- /dev/null
+++ b/examples/storybook/stories/material-ui/grid/CenteredGrid.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ flexGrow: 1,
+ },
+ paper: {
+ padding: theme.spacing(2),
+ textAlign: 'center',
+ color: theme.palette.text.secondary,
+ },
+ }),
+);
+
+export function CenteredGrid() {
+ const classes = useStyles();
+
+ return (
+
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=8
+
+
+ xs=4
+
+
+
+
+ xs=12
+
+
+ xs=6
+
+
+ xs=6
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|grid|CenteredGrid.stories"
+};
diff --git a/examples/storybook/stories/material-ui/grid/ComplexGrid.stories.tsx b/examples/storybook/stories/material-ui/grid/ComplexGrid.stories.tsx
new file mode 100644
index 00000000000000..448f5db6e2ff9c
--- /dev/null
+++ b/examples/storybook/stories/material-ui/grid/ComplexGrid.stories.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import ButtonBase from '@material-ui/core/ButtonBase';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ flexGrow: 1,
+ },
+ paper: {
+ padding: theme.spacing(2),
+ margin: 'auto',
+ maxWidth: 500,
+ },
+ image: {
+ width: 128,
+ height: 128,
+ },
+ img: {
+ margin: 'auto',
+ display: 'block',
+ maxWidth: '100%',
+ maxHeight: '100%',
+ },
+ }),
+);
+
+export function ComplexGrid() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+ 
+
+
+
+
+
+
+ Standard license
+
+
+ Full resolution 1920x1080 • JPEG
+
+
+ ID: 1030114
+
+
+
+
+ Remove
+
+
+
+
+ $19.00
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|grid|ComplexGrid.stories"
+};
diff --git a/examples/storybook/stories/material-ui/grid/FullWidthGrid.stories.tsx b/examples/storybook/stories/material-ui/grid/FullWidthGrid.stories.tsx
new file mode 100644
index 00000000000000..28851bc8b3a7af
--- /dev/null
+++ b/examples/storybook/stories/material-ui/grid/FullWidthGrid.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ flexGrow: 1,
+ },
+ paper: {
+ padding: theme.spacing(2),
+ textAlign: 'center',
+ color: theme.palette.text.secondary,
+ },
+ }),
+);
+
+export function FullWidthGrid() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+ xs=12
+
+
+ xs=12 sm=6
+
+
+ xs=12 sm=6
+
+
+ xs=6 sm=3
+
+
+ xs=6 sm=3
+
+
+ xs=6 sm=3
+
+
+ xs=6 sm=3
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|grid|FullWidthGrid.stories"
+};
diff --git a/examples/storybook/stories/material-ui/grid/NestedGrid.stories.tsx b/examples/storybook/stories/material-ui/grid/NestedGrid.stories.tsx
new file mode 100644
index 00000000000000..d30a03bca1b9e1
--- /dev/null
+++ b/examples/storybook/stories/material-ui/grid/NestedGrid.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ flexGrow: 1,
+ },
+ paper: {
+ padding: theme.spacing(1),
+ textAlign: 'center',
+ color: theme.palette.text.secondary,
+ },
+ }),
+);
+
+export function NestedGrid() {
+ const classes = useStyles();
+
+ function FormRow() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|grid|NestedGrid.stories"
+};
diff --git a/examples/storybook/stories/material-ui/grid/SpacingGrid.stories.tsx b/examples/storybook/stories/material-ui/grid/SpacingGrid.stories.tsx
new file mode 100644
index 00000000000000..d3a4bbaffa76c4
--- /dev/null
+++ b/examples/storybook/stories/material-ui/grid/SpacingGrid.stories.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Grid, { GridSpacing } from '@material-ui/core/Grid';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ flexGrow: 1,
+ },
+ paper: {
+ height: 140,
+ width: 100,
+ },
+ control: {
+ padding: theme.spacing(2),
+ },
+ }),
+);
+
+export function SpacingGrid() {
+ const [spacing, setSpacing] = React.useState
+
+ );
+}
+
+export default {
+ title: "Material-ui|icons|FontAwesome.stories"
+};
diff --git a/examples/storybook/stories/material-ui/icons/Icons.stories.tsx b/examples/storybook/stories/material-ui/icons/Icons.stories.tsx
new file mode 100644
index 00000000000000..d8da931cb70578
--- /dev/null
+++ b/examples/storybook/stories/material-ui/icons/Icons.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { green } from '@material-ui/core/colors';
+import Icon from '@material-ui/core/Icon';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > span': {
+ margin: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function Icons() {
+ const classes = useStyles();
+
+ return (
+
+ add_circle
+ add_circle
+ add_circle
+ add_circle
+ add_circle
+ add_circle
+
+ );
+}
+
+export default {
+ title: "Material-ui|icons|Icons.stories"
+};
diff --git a/examples/storybook/stories/material-ui/icons/SvgIconsColor.stories.tsx b/examples/storybook/stories/material-ui/icons/SvgIconsColor.stories.tsx
new file mode 100644
index 00000000000000..a7d5ffc620e5c0
--- /dev/null
+++ b/examples/storybook/stories/material-ui/icons/SvgIconsColor.stories.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { green } from '@material-ui/core/colors';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > svg': {
+ margin: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+function HomeIcon(props: SvgIconProps) {
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|icons|SvgIconsColor.stories"
+};
diff --git a/examples/storybook/stories/material-ui/icons/SvgIconsSize.stories.tsx b/examples/storybook/stories/material-ui/icons/SvgIconsSize.stories.tsx
new file mode 100644
index 00000000000000..f52c7e9bf1e28d
--- /dev/null
+++ b/examples/storybook/stories/material-ui/icons/SvgIconsSize.stories.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > svg': {
+ margin: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+function HomeIcon(props: SvgIconProps) {
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|icons|SvgIconsSize.stories"
+};
diff --git a/examples/storybook/stories/material-ui/icons/SvgMaterialIcons.stories.tsx b/examples/storybook/stories/material-ui/icons/SvgMaterialIcons.stories.tsx
new file mode 100644
index 00000000000000..f36734b05615a6
--- /dev/null
+++ b/examples/storybook/stories/material-ui/icons/SvgMaterialIcons.stories.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import DeleteIcon from '@material-ui/icons/Delete';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import DeleteTwoToneIcon from '@material-ui/icons/DeleteTwoTone';
+import DeleteSharpIcon from '@material-ui/icons/DeleteSharp';
+import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
+import DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';
+import DeleteForeverRoundedIcon from '@material-ui/icons/DeleteForeverRounded';
+import DeleteForeverTwoToneIcon from '@material-ui/icons/DeleteForeverTwoTone';
+import DeleteForeverSharpIcon from '@material-ui/icons/DeleteForeverSharp';
+import ThreeDRotationIcon from '@material-ui/icons/ThreeDRotation';
+import FourKIcon from '@material-ui/icons/FourK';
+import ThreeSixtyIcon from '@material-ui/icons/ThreeSixty';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ color: theme.palette.text.primary,
+ },
+ }),
+);
+
+export function SvgMaterialIcons() {
+ const classes = useStyles();
+
+ return (
+ -
+
-
+ {[0, 1, 2, 3].map((value) => {
+ const labelId = `checkbox-list-label-${value}`;
+
+ return (
+
-
+ {[0, 1, 2, 3].map((value) => {
+ const labelId = `checkbox-list-secondary-label-${value}`;
+ return (
+
-
+
-
+
+
+ setDense(event.target.checked)} />
+ }
+ label="Enable dense"
+ />
+ setSecondary(event.target.checked)}
+ />
+ }
+ label="Enable secondary text"
+ />
+
+
+
+
+ Text only
+
+
+
+
+ Icon with text
+
+
+
+
+
+
+ Avatar with text
+
+
+
+
+ Avatar with text and icon
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|lists|InteractiveList.stories"
+};
diff --git a/examples/storybook/stories/material-ui/lists/NestedList.stories.tsx b/examples/storybook/stories/material-ui/lists/NestedList.stories.tsx
new file mode 100644
index 00000000000000..4cd0a67829338c
--- /dev/null
+++ b/examples/storybook/stories/material-ui/lists/NestedList.stories.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Collapse from '@material-ui/core/Collapse';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import DraftsIcon from '@material-ui/icons/Drafts';
+import SendIcon from '@material-ui/icons/Send';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import StarBorder from '@material-ui/icons/StarBorder';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ },
+ nested: {
+ paddingLeft: theme.spacing(4),
+ },
+ }),
+);
+
+export function NestedList() {
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(true);
+
+ const handleClick = () => {
+ setOpen(!open);
+ };
+
+ return (
+
+
+ -
+ {generate(
+
+
+ -
+ {generate(
+
+
+ -
+ {generate(
+
+
+ -
+ {generate(
+
-
+ Nested List Items
+
+ }
+ className={classes.root}
+ >
+
-
+
-
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|lists|SelectedListItem.stories"
+};
diff --git a/examples/storybook/stories/material-ui/lists/SimpleList.stories.tsx b/examples/storybook/stories/material-ui/lists/SimpleList.stories.tsx
new file mode 100644
index 00000000000000..7c7527c877d10e
--- /dev/null
+++ b/examples/storybook/stories/material-ui/lists/SimpleList.stories.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem, { ListItemProps } from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Divider from '@material-ui/core/Divider';
+import InboxIcon from '@material-ui/icons/Inbox';
+import DraftsIcon from '@material-ui/icons/Drafts';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ },
+ }),
+);
+
+function ListItemLink(props: ListItemProps<'a', { button?: true }>) {
+ return -
+
-
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|lists|SimpleList.stories"
+};
diff --git a/examples/storybook/stories/material-ui/lists/SwitchListSecondary.stories.tsx b/examples/storybook/stories/material-ui/lists/SwitchListSecondary.stories.tsx
new file mode 100644
index 00000000000000..efa41772e68315
--- /dev/null
+++ b/examples/storybook/stories/material-ui/lists/SwitchListSecondary.stories.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import Switch from '@material-ui/core/Switch';
+import WifiIcon from '@material-ui/icons/Wifi';
+import BluetoothIcon from '@material-ui/icons/Bluetooth';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ },
+ }),
+);
+
+export function SwitchListSecondary() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState(['wifi']);
+
+ const handleToggle = (value: string) => () => {
+ const currentIndex = checked.indexOf(value);
+ const newChecked = [...checked];
+
+ if (currentIndex === -1) {
+ newChecked.push(value);
+ } else {
+ newChecked.splice(currentIndex, 1);
+ }
+
+ setChecked(newChecked);
+ };
+
+ return (
+ -
+
-
+
- Settings} className={classes.root}>
+
+
+ {renderRow}
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|lists|VirtualizedList.stories"
+};
diff --git a/examples/storybook/stories/material-ui/menus/ContextMenu.stories.tsx b/examples/storybook/stories/material-ui/menus/ContextMenu.stories.tsx
new file mode 100644
index 00000000000000..9ebd4c392fa12b
--- /dev/null
+++ b/examples/storybook/stories/material-ui/menus/ContextMenu.stories.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@material-ui/core/Typography';
+
+const initialState = {
+ mouseX: null,
+ mouseY: null,
+};
+
+export function ContextMenu() {
+ const [state, setState] = React.useState<{
+ mouseX: null | number;
+ mouseY: null | number;
+ }>(initialState);
+
+ const handleClick = (event: React.MouseEvent
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit
+ amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi
+ finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada
+ ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis
+ finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet
+ facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse
+ lacinia tellus a libero volutpat maximus.
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|menus|ContextMenu.stories"
+};
diff --git a/examples/storybook/stories/material-ui/menus/CustomizedMenus.stories.tsx b/examples/storybook/stories/material-ui/menus/CustomizedMenus.stories.tsx
new file mode 100644
index 00000000000000..344a0ada5b656c
--- /dev/null
+++ b/examples/storybook/stories/material-ui/menus/CustomizedMenus.stories.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Menu, { MenuProps } from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import DraftsIcon from '@material-ui/icons/Drafts';
+import SendIcon from '@material-ui/icons/Send';
+
+const StyledMenu = withStyles({
+ paper: {
+ border: '1px solid #d3d4d5',
+ },
+})((props: MenuProps) => (
+
+));
+
+const StyledMenuItem = withStyles((theme) => ({
+ root: {
+ '&:focus': {
+ backgroundColor: theme.palette.primary.main,
+ '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
+ color: theme.palette.common.white,
+ },
+ },
+ },
+}))(MenuItem);
+
+export function CustomizedMenus() {
+ const [anchorEl, setAnchorEl] = React.useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|menus|CustomizedMenus.stories"
+};
diff --git a/examples/storybook/stories/material-ui/menus/FadeMenu.stories.tsx b/examples/storybook/stories/material-ui/menus/FadeMenu.stories.tsx
new file mode 100644
index 00000000000000..71ab4cb3347728
--- /dev/null
+++ b/examples/storybook/stories/material-ui/menus/FadeMenu.stories.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import Fade from '@material-ui/core/Fade';
+
+export function FadeMenu() {
+ const [anchorEl, setAnchorEl] = React.useState
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|menus|FadeMenu.stories"
+};
diff --git a/examples/storybook/stories/material-ui/menus/LongMenu.stories.tsx b/examples/storybook/stories/material-ui/menus/LongMenu.stories.tsx
new file mode 100644
index 00000000000000..0514cb9b9b6f59
--- /dev/null
+++ b/examples/storybook/stories/material-ui/menus/LongMenu.stories.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import IconButton from '@material-ui/core/IconButton';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+
+const options = [
+ 'None',
+ 'Atria',
+ 'Callisto',
+ 'Dione',
+ 'Ganymede',
+ 'Hangouts Call',
+ 'Luna',
+ 'Oberon',
+ 'Phobos',
+ 'Pyxis',
+ 'Sedna',
+ 'Titania',
+ 'Triton',
+ 'Umbriel',
+];
+
+const ITEM_HEIGHT = 48;
+
+export function LongMenu() {
+ const [anchorEl, setAnchorEl] = React.useState
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|menus|LongMenu.stories"
+};
diff --git a/examples/storybook/stories/material-ui/menus/MenuListComposition.stories.tsx b/examples/storybook/stories/material-ui/menus/MenuListComposition.stories.tsx
new file mode 100644
index 00000000000000..bc9993e932e38f
--- /dev/null
+++ b/examples/storybook/stories/material-ui/menus/MenuListComposition.stories.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Grow from '@material-ui/core/Grow';
+import Paper from '@material-ui/core/Paper';
+import Popper from '@material-ui/core/Popper';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ },
+ paper: {
+ marginRight: theme.spacing(2),
+ },
+ }),
+);
+
+export function MenuListComposition() {
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+ const anchorRef = React.useRef
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|menus|MenuListComposition.stories"
+};
diff --git a/examples/storybook/stories/material-ui/menus/MenuPopupState.stories.tsx b/examples/storybook/stories/material-ui/menus/MenuPopupState.stories.tsx
new file mode 100644
index 00000000000000..a3691304d22fd9
--- /dev/null
+++ b/examples/storybook/stories/material-ui/menus/MenuPopupState.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state';
+
+export function MenuPopupState() {
+ return (
+
+
+
+ {({ TransitionProps, placement }) => (
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|menus|SimpleListMenu.stories"
+};
diff --git a/examples/storybook/stories/material-ui/menus/SimpleMenu.stories.tsx b/examples/storybook/stories/material-ui/menus/SimpleMenu.stories.tsx
new file mode 100644
index 00000000000000..7a340f041d0cb0
--- /dev/null
+++ b/examples/storybook/stories/material-ui/menus/SimpleMenu.stories.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
+export function SimpleMenu() {
+ const [anchorEl, setAnchorEl] = React.useState-
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|menus|SimpleMenu.stories"
+};
diff --git a/examples/storybook/stories/material-ui/menus/TypographyMenu.stories.tsx b/examples/storybook/stories/material-ui/menus/TypographyMenu.stories.tsx
new file mode 100644
index 00000000000000..8b2422c80a1a7a
--- /dev/null
+++ b/examples/storybook/stories/material-ui/menus/TypographyMenu.stories.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import MenuList from '@material-ui/core/MenuList';
+import MenuItem from '@material-ui/core/MenuItem';
+import Paper from '@material-ui/core/Paper';
+import { makeStyles } from '@material-ui/core/styles';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import Typography from '@material-ui/core/Typography';
+import DraftsIcon from '@material-ui/icons/Drafts';
+import SendIcon from '@material-ui/icons/Send';
+import PriorityHighIcon from '@material-ui/icons/PriorityHigh';
+
+const useStyles = makeStyles({
+ root: {
+ width: 230,
+ },
+});
+
+export function TypographyMenu() {
+ const classes = useStyles();
+
+ return (
+
+ rootRef.current}
+ >
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|modal|ServerModal.stories"
+};
diff --git a/examples/storybook/stories/material-ui/modal/SimpleModal.stories.tsx b/examples/storybook/stories/material-ui/modal/SimpleModal.stories.tsx
new file mode 100644
index 00000000000000..1a4645cf0d81f1
--- /dev/null
+++ b/examples/storybook/stories/material-ui/modal/SimpleModal.stories.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Modal from '@material-ui/core/Modal';
+
+function rand() {
+ return Math.round(Math.random() * 20) - 10;
+}
+
+function getModalStyle() {
+ const top = 50 + rand();
+ const left = 50 + rand();
+
+ return {
+ top: `${top}%`,
+ left: `${left}%`,
+ transform: `translate(-${top}%, -${left}%)`,
+ };
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ paper: {
+ position: 'absolute',
+ width: 400,
+ backgroundColor: theme.palette.background.paper,
+ border: '2px solid #000',
+ boxShadow: theme.shadows[5],
+ padding: theme.spacing(2, 4, 3),
+ },
+ }),
+);
+
+export function SimpleModal() {
+ const classes = useStyles();
+ // getModalStyle is not a pure function, we roll the style only on the first render
+ const [modalStyle] = React.useState(getModalStyle);
+ const [open, setOpen] = React.useState(false);
+
+ const handleOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ const body = (
+
+
+ Server-side modal
+If you disable JavaScript, you will still see me.
+
+
+ );
+
+ return (
+ Text in a modal
++ Duis mollis, est non commodo luctus, nisi erat porttitor ligula. +
+
+
+
+ {body}
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|modal|SimpleModal.stories"
+};
diff --git a/examples/storybook/stories/material-ui/modal/SpringModal.stories.tsx b/examples/storybook/stories/material-ui/modal/SpringModal.stories.tsx
new file mode 100644
index 00000000000000..66e9fa9cfbea41
--- /dev/null
+++ b/examples/storybook/stories/material-ui/modal/SpringModal.stories.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import { useSpring, animated } from 'react-spring/web.cjs'; // web.cjs is required for IE 11 support
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ modal: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ paper: {
+ backgroundColor: theme.palette.background.paper,
+ border: '2px solid #000',
+ boxShadow: theme.shadows[5],
+ padding: theme.spacing(2, 4, 3),
+ },
+ }),
+);
+
+interface FadeProps {
+ children?: React.ReactElement;
+ in: boolean;
+ onEnter?: () => {};
+ onExited?: () => {};
+}
+
+const Fade = React.forwardRef
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|modal|SpringModal.stories"
+};
diff --git a/examples/storybook/stories/material-ui/modal/TransitionsModal.stories.tsx b/examples/storybook/stories/material-ui/modal/TransitionsModal.stories.tsx
new file mode 100644
index 00000000000000..3798375ac53cb3
--- /dev/null
+++ b/examples/storybook/stories/material-ui/modal/TransitionsModal.stories.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ modal: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ paper: {
+ backgroundColor: theme.palette.background.paper,
+ border: '2px solid #000',
+ boxShadow: theme.shadows[5],
+ padding: theme.spacing(2, 4, 3),
+ },
+ }),
+);
+
+export function TransitionsModal() {
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+
+ const handleOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+
+
+ Spring modal
+react-spring animates me.
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|modal|TransitionsModal.stories"
+};
diff --git a/examples/storybook/stories/material-ui/no-ssr/FrameDeferring.stories.tsx b/examples/storybook/stories/material-ui/no-ssr/FrameDeferring.stories.tsx
new file mode 100644
index 00000000000000..3bdd9449549b74
--- /dev/null
+++ b/examples/storybook/stories/material-ui/no-ssr/FrameDeferring.stories.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import NoSsr from '@material-ui/core/NoSsr';
+
+const useStyles = makeStyles({
+ container: {
+ width: 300,
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+});
+
+function LargeTree(): any {
+ return Array.from(new Array(5000)).map((_, index) => .);
+}
+
+export function FrameDeferring() {
+ const classes = useStyles();
+ const [state, setState] = React.useState({ open: false, defer: false });
+
+ return (
+
+
+ Transition modal
+react-transition-group animates me.
+
+
+
+ +
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|no-ssr|FrameDeferring.stories"
+};
diff --git a/examples/storybook/stories/material-ui/no-ssr/SimpleNoSsr.stories.tsx b/examples/storybook/stories/material-ui/no-ssr/SimpleNoSsr.stories.tsx
new file mode 100644
index 00000000000000..c94993db13d1b2
--- /dev/null
+++ b/examples/storybook/stories/material-ui/no-ssr/SimpleNoSsr.stories.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import NoSsr from '@material-ui/core/NoSsr';
+import Box from '@material-ui/core/Box';
+
+export function SimpleNoSsr() {
+ return (
+ + +
+
+
+ {state.open ? (
+
+
+ .....Inside NoSsr
+
+
+ ) : null}
+
+ Outside NoSsr
+
+
+ Server and Client
+
+
+
+ Client only
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|no-ssr|SimpleNoSsr.stories"
+};
diff --git a/examples/storybook/stories/material-ui/pagination/BasicPagination.stories.tsx b/examples/storybook/stories/material-ui/pagination/BasicPagination.stories.tsx
new file mode 100644
index 00000000000000..66af4694755ff5
--- /dev/null
+++ b/examples/storybook/stories/material-ui/pagination/BasicPagination.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Pagination from '@material-ui/lab/Pagination';
+
+const useStyles = makeStyles((theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ marginTop: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function BasicPagination() {
+ const classes = useStyles();
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|pagination|BasicPagination.stories"
+};
diff --git a/examples/storybook/stories/material-ui/pagination/PaginationButtons.stories.tsx b/examples/storybook/stories/material-ui/pagination/PaginationButtons.stories.tsx
new file mode 100644
index 00000000000000..0048ff54acec95
--- /dev/null
+++ b/examples/storybook/stories/material-ui/pagination/PaginationButtons.stories.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Pagination from '@material-ui/lab/Pagination';
+
+const useStyles = makeStyles((theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ marginTop: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function PaginationButtons() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|pagination|PaginationButtons.stories"
+};
diff --git a/examples/storybook/stories/material-ui/pagination/PaginationControlled.stories.tsx b/examples/storybook/stories/material-ui/pagination/PaginationControlled.stories.tsx
new file mode 100644
index 00000000000000..a0f439e0d99220
--- /dev/null
+++ b/examples/storybook/stories/material-ui/pagination/PaginationControlled.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Pagination from '@material-ui/lab/Pagination';
+
+const useStyles = makeStyles((theme) =>
+ createStyles({
+ root: {
+ '& > * + *': {
+ marginTop: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function PaginationControlled() {
+ const classes = useStyles();
+ const [page, setPage] = React.useState(1);
+ const handleChange = (event: React.ChangeEvent
+ Page: {page}
+
+ );
+}
+
+export default {
+ title: "Material-ui|pagination|PaginationControlled.stories"
+};
diff --git a/examples/storybook/stories/material-ui/pagination/PaginationLink.stories.tsx b/examples/storybook/stories/material-ui/pagination/PaginationLink.stories.tsx
new file mode 100644
index 00000000000000..821b3e54752738
--- /dev/null
+++ b/examples/storybook/stories/material-ui/pagination/PaginationLink.stories.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router';
+import { Link } from 'react-router-dom';
+import Pagination from '@material-ui/lab/Pagination';
+import PaginationItem from '@material-ui/lab/PaginationItem';
+
+export function PaginationLink() {
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|pagination|PaginationOutlined.stories"
+};
diff --git a/examples/storybook/stories/material-ui/pagination/PaginationRanges.stories.tsx b/examples/storybook/stories/material-ui/pagination/PaginationRanges.stories.tsx
new file mode 100644
index 00000000000000..c0a5ebc2321347
--- /dev/null
+++ b/examples/storybook/stories/material-ui/pagination/PaginationRanges.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Pagination from '@material-ui/lab/Pagination';
+
+const useStyles = makeStyles((theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ marginTop: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function PaginationRanges() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|pagination|PaginationRanges.stories"
+};
diff --git a/examples/storybook/stories/material-ui/pagination/PaginationRounded.stories.tsx b/examples/storybook/stories/material-ui/pagination/PaginationRounded.stories.tsx
new file mode 100644
index 00000000000000..3538dbae4de9c8
--- /dev/null
+++ b/examples/storybook/stories/material-ui/pagination/PaginationRounded.stories.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Pagination from '@material-ui/lab/Pagination';
+
+const useStyles = makeStyles((theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ marginTop: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function PaginationRounded() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|pagination|PaginationRounded.stories"
+};
diff --git a/examples/storybook/stories/material-ui/pagination/PaginationSize.stories.tsx b/examples/storybook/stories/material-ui/pagination/PaginationSize.stories.tsx
new file mode 100644
index 00000000000000..e62b7276e01aba
--- /dev/null
+++ b/examples/storybook/stories/material-ui/pagination/PaginationSize.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Pagination from '@material-ui/lab/Pagination';
+
+const useStyles = makeStyles((theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ marginTop: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function PaginationSize() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|pagination|PaginationSize.stories"
+};
diff --git a/examples/storybook/stories/material-ui/pagination/TablePagination.stories.tsx b/examples/storybook/stories/material-ui/pagination/TablePagination.stories.tsx
new file mode 100644
index 00000000000000..098f8cfe6b0764
--- /dev/null
+++ b/examples/storybook/stories/material-ui/pagination/TablePagination.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import TablePagination from '@material-ui/core/TablePagination';
+
+export function TablePaginationDemo() {
+ const [page, setPage] = React.useState(2);
+ const [rowsPerPage, setRowsPerPage] = React.useState(10);
+
+ const handleChangePage = (event: React.MouseEvent
+
+ );
+}
+
+export default {
+ title: "Material-ui|paper|SimplePaper.stories"
+};
diff --git a/examples/storybook/stories/material-ui/paper/Variants.stories.tsx b/examples/storybook/stories/material-ui/paper/Variants.stories.tsx
new file mode 100644
index 00000000000000..0c31fc4a320127
--- /dev/null
+++ b/examples/storybook/stories/material-ui/paper/Variants.stories.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ '& > *': {
+ margin: theme.spacing(1),
+ width: theme.spacing(16),
+ height: theme.spacing(16),
+ },
+ },
+ }),
+);
+
+export function Variants() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|paper|Variants.stories"
+};
diff --git a/examples/storybook/stories/material-ui/pickers/DateAndTimePickers.stories.tsx b/examples/storybook/stories/material-ui/pickers/DateAndTimePickers.stories.tsx
new file mode 100644
index 00000000000000..2811346df8351b
--- /dev/null
+++ b/examples/storybook/stories/material-ui/pickers/DateAndTimePickers.stories.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ container: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+ textField: {
+ marginLeft: theme.spacing(1),
+ marginRight: theme.spacing(1),
+ width: 200,
+ },
+ }),
+);
+
+export function DateAndTimePickers() {
+ const classes = useStyles();
+
+ return (
+
+ );
+}
+
+export default {
+ title: "Material-ui|pickers|DateAndTimePickers.stories"
+};
diff --git a/examples/storybook/stories/material-ui/pickers/DatePickers.stories.tsx b/examples/storybook/stories/material-ui/pickers/DatePickers.stories.tsx
new file mode 100644
index 00000000000000..5af875ac77fa5d
--- /dev/null
+++ b/examples/storybook/stories/material-ui/pickers/DatePickers.stories.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ container: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+ textField: {
+ marginLeft: theme.spacing(1),
+ marginRight: theme.spacing(1),
+ width: 200,
+ },
+ }),
+);
+
+export function DatePickers() {
+ const classes = useStyles();
+
+ return (
+
+ );
+}
+
+export default {
+ title: "Material-ui|pickers|DatePickers.stories"
+};
diff --git a/examples/storybook/stories/material-ui/pickers/MaterialUIPickers.stories.tsx b/examples/storybook/stories/material-ui/pickers/MaterialUIPickers.stories.tsx
new file mode 100644
index 00000000000000..0620807d55d228
--- /dev/null
+++ b/examples/storybook/stories/material-ui/pickers/MaterialUIPickers.stories.tsx
@@ -0,0 +1,65 @@
+import 'date-fns';
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import DateFnsUtils from '@date-io/date-fns';
+import {
+ MuiPickersUtilsProvider,
+ KeyboardTimePicker,
+ KeyboardDatePicker,
+} from '@material-ui/pickers';
+
+export function MaterialUIPickers() {
+ // The first commit of Material-UI
+ const [selectedDate, setSelectedDate] = React.useState
+
+ Hover with a Popover.
+
+
+ I use Popover.
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|popover|MouseOverPopover.stories"
+};
diff --git a/examples/storybook/stories/material-ui/popover/PopoverPopupState.stories.tsx b/examples/storybook/stories/material-ui/popover/PopoverPopupState.stories.tsx
new file mode 100644
index 00000000000000..41887e3ba3a1c0
--- /dev/null
+++ b/examples/storybook/stories/material-ui/popover/PopoverPopupState.stories.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Popover from '@material-ui/core/Popover';
+import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
+
+export function PopoverPopupState() {
+ return (
+
+
+
+
+ The content of the Popover.
+
+
+
+ )}
+
+
+
+ The content of the Popover.
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|popover|SimplePopover.stories"
+};
diff --git a/examples/storybook/stories/material-ui/popper/FakedReferencePopper.stories.tsx b/examples/storybook/stories/material-ui/popper/FakedReferencePopper.stories.tsx
new file mode 100644
index 00000000000000..1c411fef23c5ae
--- /dev/null
+++ b/examples/storybook/stories/material-ui/popper/FakedReferencePopper.stories.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Popper, { PopperProps } from '@material-ui/core/Popper';
+import Typography from '@material-ui/core/Typography';
+import Fade from '@material-ui/core/Fade';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ typography: {
+ padding: theme.spacing(2),
+ },
+ }),
+);
+
+export function FakedReferencePopper() {
+ const [open, setOpen] = React.useState(false);
+ const [anchorEl, setAnchorEl] = React.useState
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit
+ amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi
+ finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada
+ ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis
+ finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet
+ facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse
+ lacinia tellus a libero volutpat maximus.
+
+
+ {({ TransitionProps }) => (
+
+
+ The content of the Popper.
+
+
+ )}
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|popper|FakedReferencePopper.stories"
+};
diff --git a/examples/storybook/stories/material-ui/popper/PopperPopupState.stories.tsx b/examples/storybook/stories/material-ui/popper/PopperPopupState.stories.tsx
new file mode 100644
index 00000000000000..e71b2b29d3ab08
--- /dev/null
+++ b/examples/storybook/stories/material-ui/popper/PopperPopupState.stories.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import Popper from '@material-ui/core/Popper';
+import PopupState, { bindToggle, bindPopper } from 'material-ui-popup-state';
+import Fade from '@material-ui/core/Fade';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles((theme) =>
+ createStyles({
+ typography: {
+ padding: theme.spacing(2),
+ },
+ }),
+);
+
+export function PopperPopupState() {
+ const classes = useStyles();
+
+ return (
+
+
+
+ {({ TransitionProps }) => (
+
+
+ The content of the Popper.
+
+
+ )}
+
+
+ )}
+
+
+ {({ TransitionProps }) => (
+
+
+ The content of the Popper.
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|popper|PositionedPopper.stories"
+};
diff --git a/examples/storybook/stories/material-ui/popper/SimplePopper.stories.tsx b/examples/storybook/stories/material-ui/popper/SimplePopper.stories.tsx
new file mode 100644
index 00000000000000..84777e0dd87341
--- /dev/null
+++ b/examples/storybook/stories/material-ui/popper/SimplePopper.stories.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ paper: {
+ border: '1px solid',
+ padding: theme.spacing(1),
+ backgroundColor: theme.palette.background.paper,
+ },
+ }),
+);
+
+export function SimplePopper() {
+ const classes = useStyles();
+ const [anchorEl, setAnchorEl] = React.useState+ +
+ +
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|popper|SimplePopper.stories"
+};
diff --git a/examples/storybook/stories/material-ui/popper/SpringPopper.stories.tsx b/examples/storybook/stories/material-ui/popper/SpringPopper.stories.tsx
new file mode 100644
index 00000000000000..4cac5b8bf87137
--- /dev/null
+++ b/examples/storybook/stories/material-ui/popper/SpringPopper.stories.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+import { useSpring, animated } from 'react-spring/web.cjs'; // web.cjs is required for IE 11 support
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ paper: {
+ border: '1px solid',
+ padding: theme.spacing(1),
+ backgroundColor: theme.palette.background.paper,
+ },
+ }),
+);
+
+interface FadeProps {
+ children?: React.ReactElement;
+ in?: boolean;
+ onEnter?: () => {};
+ onExited?: () => {};
+}
+
+const Fade = React.forwardRefThe content of the Popper.
+
+
+
+ {({ TransitionProps }) => (
+
+
+ )}
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|popper|SpringPopper.stories"
+};
diff --git a/examples/storybook/stories/material-ui/popper/TransitionsPopper.stories.tsx b/examples/storybook/stories/material-ui/popper/TransitionsPopper.stories.tsx
new file mode 100644
index 00000000000000..1c6ba809e74cde
--- /dev/null
+++ b/examples/storybook/stories/material-ui/popper/TransitionsPopper.stories.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+import Fade from '@material-ui/core/Fade';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ paper: {
+ border: '1px solid',
+ padding: theme.spacing(1),
+ backgroundColor: theme.palette.background.paper,
+ },
+ }),
+);
+
+export function TransitionsPopper() {
+ const classes = useStyles();
+ const [anchorEl, setAnchorEl] = React.useStateThe content of the Popper.
+
+
+
+ {({ TransitionProps }) => (
+
+
+ )}
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|popper|TransitionsPopper.stories"
+};
diff --git a/examples/storybook/stories/material-ui/portal/SimplePortal.stories.tsx b/examples/storybook/stories/material-ui/portal/SimplePortal.stories.tsx
new file mode 100644
index 00000000000000..392c45235c40a5
--- /dev/null
+++ b/examples/storybook/stories/material-ui/portal/SimplePortal.stories.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import Portal from '@material-ui/core/Portal';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ alert: {
+ padding: theme.spacing(1),
+ margin: theme.spacing(1, 0),
+ border: '1px solid',
+ },
+ }),
+);
+
+export function SimplePortal() {
+ const classes = useStyles();
+ const [show, setShow] = React.useState(false);
+ const container = React.useRef(null);
+
+ const handleClick = () => {
+ setShow(!show);
+ };
+
+ return (
+ The content of the Popper.
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|portal|SimplePortal.stories"
+};
diff --git a/examples/storybook/stories/material-ui/progress/CircularDeterminate.stories.tsx b/examples/storybook/stories/material-ui/progress/CircularDeterminate.stories.tsx
new file mode 100644
index 00000000000000..e290cbca142c02
--- /dev/null
+++ b/examples/storybook/stories/material-ui/progress/CircularDeterminate.stories.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ '& > * + *': {
+ marginLeft: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function CircularDeterminate() {
+ const classes = useStyles();
+ const [progress, setProgress] = React.useState(0);
+
+ React.useEffect(() => {
+ function tick() {
+ // reset when reaching 100%
+ setProgress((oldProgress) => (oldProgress >= 100 ? 0 : oldProgress + 1));
+ }
+
+ const timer = setInterval(tick, 20);
+ return () => {
+ clearInterval(timer);
+ };
+ }, []);
+
+ return (
+
+ It looks like I will render here.
+ {show ? (
+
+ But I actually render here!
+
+ ) : null}
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|progress|CircularDeterminate.stories"
+};
diff --git a/examples/storybook/stories/material-ui/progress/CircularIndeterminate.stories.tsx b/examples/storybook/stories/material-ui/progress/CircularIndeterminate.stories.tsx
new file mode 100644
index 00000000000000..d5a326f4abb7df
--- /dev/null
+++ b/examples/storybook/stories/material-ui/progress/CircularIndeterminate.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ '& > * + *': {
+ marginLeft: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function CircularIndeterminate() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|progress|CircularIndeterminate.stories"
+};
diff --git a/examples/storybook/stories/material-ui/progress/CircularIntegration.stories.tsx b/examples/storybook/stories/material-ui/progress/CircularIntegration.stories.tsx
new file mode 100644
index 00000000000000..c3f85a333b4078
--- /dev/null
+++ b/examples/storybook/stories/material-ui/progress/CircularIntegration.stories.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import clsx from 'clsx';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { green } from '@material-ui/core/colors';
+import Button from '@material-ui/core/Button';
+import Fab from '@material-ui/core/Fab';
+import CheckIcon from '@material-ui/icons/Check';
+import SaveIcon from '@material-ui/icons/Save';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ alignItems: 'center',
+ },
+ wrapper: {
+ margin: theme.spacing(1),
+ position: 'relative',
+ },
+ buttonSuccess: {
+ backgroundColor: green[500],
+ '&:hover': {
+ backgroundColor: green[700],
+ },
+ },
+ fabProgress: {
+ color: green[500],
+ position: 'absolute',
+ top: -6,
+ left: -6,
+ zIndex: 1,
+ },
+ buttonProgress: {
+ color: green[500],
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ marginTop: -12,
+ marginLeft: -12,
+ },
+ }),
+);
+
+export function CircularIntegration() {
+ const classes = useStyles();
+ const [loading, setLoading] = React.useState(false);
+ const [success, setSuccess] = React.useState(false);
+ const timer = React.useRef
+
+ );
+}
+
+export default {
+ title: "Material-ui|progress|CircularIntegration.stories"
+};
diff --git a/examples/storybook/stories/material-ui/progress/CircularStatic.stories.tsx b/examples/storybook/stories/material-ui/progress/CircularStatic.stories.tsx
new file mode 100644
index 00000000000000..27922e9997e652
--- /dev/null
+++ b/examples/storybook/stories/material-ui/progress/CircularStatic.stories.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ '& > * + *': {
+ marginLeft: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function CircularStatic() {
+ const classes = useStyles();
+ const [completed, setCompleted] = React.useState(0);
+
+ React.useEffect(() => {
+ function progress() {
+ setCompleted((prevCompleted) => (prevCompleted >= 100 ? 0 : prevCompleted + 10));
+ }
+
+ const timer = setInterval(progress, 1000);
+ return () => {
+ clearInterval(timer);
+ };
+ }, []);
+
+ return (
+
+
+ {success ?
+ {loading &&
+
+
+ {loading &&
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|progress|CircularStatic.stories"
+};
diff --git a/examples/storybook/stories/material-ui/progress/CircularUnderLoad.stories.tsx b/examples/storybook/stories/material-ui/progress/CircularUnderLoad.stories.tsx
new file mode 100644
index 00000000000000..7e3d07d440463b
--- /dev/null
+++ b/examples/storybook/stories/material-ui/progress/CircularUnderLoad.stories.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+export function CircularUnderLoad() {
+ return
+
+ );
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ flexGrow: 1,
+ },
+ margin: {
+ margin: theme.spacing(1),
+ },
+ }),
+);
+
+export function CustomizedProgressBars() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|progress|CustomizedProgressBars.stories"
+};
diff --git a/examples/storybook/stories/material-ui/progress/DelayingAppearance.stories.tsx b/examples/storybook/stories/material-ui/progress/DelayingAppearance.stories.tsx
new file mode 100644
index 00000000000000..700f5ebe289b48
--- /dev/null
+++ b/examples/storybook/stories/material-ui/progress/DelayingAppearance.stories.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Fade from '@material-ui/core/Fade';
+import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ },
+ button: {
+ margin: theme.spacing(2),
+ },
+ placeholder: {
+ height: 40,
+ },
+ }),
+);
+
+export function DelayingAppearance() {
+ const classes = useStyles();
+ const [loading, setLoading] = React.useState(false);
+ const [query, setQuery] = React.useState('idle');
+ const timerRef = React.useRef
+
+ );
+}
+
+export default {
+ title: "Material-ui|progress|DelayingAppearance.stories"
+};
diff --git a/examples/storybook/stories/material-ui/progress/LinearBuffer.stories.tsx b/examples/storybook/stories/material-ui/progress/LinearBuffer.stories.tsx
new file mode 100644
index 00000000000000..492df968bec7f5
--- /dev/null
+++ b/examples/storybook/stories/material-ui/progress/LinearBuffer.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import LinearProgress from '@material-ui/core/LinearProgress';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ '& > * + *': {
+ marginTop: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function LinearBuffer() {
+ const classes = useStyles();
+ const [completed, setCompleted] = React.useState(0);
+ const [buffer, setBuffer] = React.useState(10);
+
+ const progress = React.useRef(() => {});
+ React.useEffect(() => {
+ progress.current = () => {
+ if (completed > 100) {
+ setCompleted(0);
+ setBuffer(10);
+ } else {
+ const diff = Math.random() * 10;
+ const diff2 = Math.random() * 10;
+ setCompleted(completed + diff);
+ setBuffer(completed + diff + diff2);
+ }
+ };
+ });
+
+ React.useEffect(() => {
+ function tick() {
+ progress.current();
+ }
+ const timer = setInterval(tick, 500);
+
+ return () => {
+ clearInterval(timer);
+ };
+ }, []);
+
+ return (
+
+
+
+
+
+
+ {query === 'success' ? (
+ Success!
+ ) : (
+
+
+ )}
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|progress|LinearBuffer.stories"
+};
diff --git a/examples/storybook/stories/material-ui/progress/LinearDeterminate.stories.tsx b/examples/storybook/stories/material-ui/progress/LinearDeterminate.stories.tsx
new file mode 100644
index 00000000000000..485d3ef9b1b1f4
--- /dev/null
+++ b/examples/storybook/stories/material-ui/progress/LinearDeterminate.stories.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import LinearProgress from '@material-ui/core/LinearProgress';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ '& > * + *': {
+ marginTop: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function LinearDeterminate() {
+ const classes = useStyles();
+ const [completed, setCompleted] = React.useState(0);
+
+ React.useEffect(() => {
+ function progress() {
+ setCompleted((oldCompleted) => {
+ if (oldCompleted === 100) {
+ return 0;
+ }
+ const diff = Math.random() * 10;
+ return Math.min(oldCompleted + diff, 100);
+ });
+ }
+
+ const timer = setInterval(progress, 500);
+ return () => {
+ clearInterval(timer);
+ };
+ }, []);
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|progress|LinearDeterminate.stories"
+};
diff --git a/examples/storybook/stories/material-ui/progress/LinearIndeterminate.stories.tsx b/examples/storybook/stories/material-ui/progress/LinearIndeterminate.stories.tsx
new file mode 100644
index 00000000000000..6be9e350655906
--- /dev/null
+++ b/examples/storybook/stories/material-ui/progress/LinearIndeterminate.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import LinearProgress from '@material-ui/core/LinearProgress';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ '& > * + *': {
+ marginTop: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function LinearIndeterminate() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|progress|LinearIndeterminate.stories"
+};
diff --git a/examples/storybook/stories/material-ui/progress/LinearQuery.stories.tsx b/examples/storybook/stories/material-ui/progress/LinearQuery.stories.tsx
new file mode 100644
index 00000000000000..0db4a9d963c205
--- /dev/null
+++ b/examples/storybook/stories/material-ui/progress/LinearQuery.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import LinearProgress from '@material-ui/core/LinearProgress';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ '& > * + *': {
+ marginTop: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+export function LinearQuery() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|progress|LinearQuery.stories"
+};
diff --git a/examples/storybook/stories/material-ui/radio-buttons/CustomizedRadios.stories.tsx b/examples/storybook/stories/material-ui/radio-buttons/CustomizedRadios.stories.tsx
new file mode 100644
index 00000000000000..76f08ff910bcf8
--- /dev/null
+++ b/examples/storybook/stories/material-ui/radio-buttons/CustomizedRadios.stories.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import Radio, { RadioProps } from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+
+const useStyles = makeStyles({
+ root: {
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+ },
+ icon: {
+ borderRadius: '50%',
+ width: 16,
+ height: 16,
+ boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
+ backgroundColor: '#f5f8fa',
+ backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
+ '$root.Mui-focusVisible &': {
+ outline: '2px auto rgba(19,124,189,.6)',
+ outlineOffset: 2,
+ },
+ 'input:hover ~ &': {
+ backgroundColor: '#ebf1f5',
+ },
+ 'input:disabled ~ &': {
+ boxShadow: 'none',
+ background: 'rgba(206,217,224,.5)',
+ },
+ },
+ checkedIcon: {
+ backgroundColor: '#137cbd',
+ backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+ '&:before': {
+ display: 'block',
+ width: 16,
+ height: 16,
+ backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
+ content: '""',
+ },
+ 'input:hover ~ &': {
+ backgroundColor: '#106ba3',
+ },
+ },
+});
+
+// Inspired by blueprintjs
+function StyledRadio(props: RadioProps) {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|radio-buttons|RadioButtons.stories"
+};
diff --git a/examples/storybook/stories/material-ui/radio-buttons/RadioButtonsGroup.stories.tsx b/examples/storybook/stories/material-ui/radio-buttons/RadioButtonsGroup.stories.tsx
new file mode 100644
index 00000000000000..b5429d32c66f67
--- /dev/null
+++ b/examples/storybook/stories/material-ui/radio-buttons/RadioButtonsGroup.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+
+export function RadioButtonsGroup() {
+ const [value, setValue] = React.useState('female');
+
+ const handleChange = (event: React.ChangeEvent
+
+ Custom empty icon
+
+
+ Custom icon and color
+ `${value} Heart${value !== 1 ? 's' : ''}`}
+ precision={0.5}
+ icon={
+
+ 10 stars
+
+
+ Custom icon set
+ customIcons[value].label}
+ IconContainerComponent={IconContainer}
+ />
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|rating|CustomizedRatings.stories"
+};
diff --git a/examples/storybook/stories/material-ui/rating/HalfRating.stories.tsx b/examples/storybook/stories/material-ui/rating/HalfRating.stories.tsx
new file mode 100644
index 00000000000000..b632e53fd9479e
--- /dev/null
+++ b/examples/storybook/stories/material-ui/rating/HalfRating.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import Rating from '@material-ui/lab/Rating';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ '& > * + *': {
+ marginTop: theme.spacing(1),
+ },
+ },
+ }),
+);
+
+export function HalfRating() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|rating|HalfRating.stories"
+};
diff --git a/examples/storybook/stories/material-ui/rating/HoverRating.stories.tsx b/examples/storybook/stories/material-ui/rating/HoverRating.stories.tsx
new file mode 100644
index 00000000000000..42f977088a3122
--- /dev/null
+++ b/examples/storybook/stories/material-ui/rating/HoverRating.stories.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Rating from '@material-ui/lab/Rating';
+import Box from '@material-ui/core/Box';
+
+const labels: { [index: string]: string } = {
+ 0.5: 'Useless',
+ 1: 'Useless+',
+ 1.5: 'Poor',
+ 2: 'Poor+',
+ 2.5: 'Ok',
+ 3: 'Ok+',
+ 3.5: 'Good',
+ 4: 'Good+',
+ 4.5: 'Excellent',
+ 5: 'Excellent+',
+};
+
+const useStyles = makeStyles({
+ root: {
+ width: 200,
+ display: 'flex',
+ alignItems: 'center',
+ },
+});
+
+export function HoverRating() {
+ const [value, setValue] = React.useState
+ {
+ setValue(newValue);
+ }}
+ onChangeActive={(event, newHover) => {
+ setHover(newHover);
+ }}
+ />
+ {value !== null && {labels[hover !== -1 ? hover : value]} }
+
+ );
+}
+
+export default {
+ title: "Material-ui|rating|HoverRating.stories"
+};
diff --git a/examples/storybook/stories/material-ui/rating/RatingSize.stories.tsx b/examples/storybook/stories/material-ui/rating/RatingSize.stories.tsx
new file mode 100644
index 00000000000000..b7d1f2e0ea96fb
--- /dev/null
+++ b/examples/storybook/stories/material-ui/rating/RatingSize.stories.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import Rating from '@material-ui/lab/Rating';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ '& > * + *': {
+ marginTop: theme.spacing(1),
+ },
+ },
+ }),
+);
+
+export function HalfRating() {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|rating|RatingSize.stories"
+};
diff --git a/examples/storybook/stories/material-ui/rating/SimpleRating.stories.tsx b/examples/storybook/stories/material-ui/rating/SimpleRating.stories.tsx
new file mode 100644
index 00000000000000..439529c47aa548
--- /dev/null
+++ b/examples/storybook/stories/material-ui/rating/SimpleRating.stories.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Rating from '@material-ui/lab/Rating';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+export function SimpleRating() {
+ const [value, setValue] = React.useState
+
+ Controlled
+ {
+ setValue(newValue);
+ }}
+ />
+
+
+ Read only
+
+
+ Disabled
+
+
+ Pristine
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|rating|SimpleRating.stories"
+};
diff --git a/examples/storybook/stories/material-ui/selects/ControlledOpenSelect.stories.tsx b/examples/storybook/stories/material-ui/selects/ControlledOpenSelect.stories.tsx
new file mode 100644
index 00000000000000..e7dd6d70ebee66
--- /dev/null
+++ b/examples/storybook/stories/material-ui/selects/ControlledOpenSelect.stories.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ button: {
+ display: 'block',
+ marginTop: theme.spacing(2),
+ },
+ formControl: {
+ margin: theme.spacing(1),
+ minWidth: 120,
+ },
+ }),
+);
+
+export function ControlledOpenSelect() {
+ const classes = useStyles();
+ const [age, setAge] = React.useState
+
+
+ Age
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|selects|ControlledOpenSelect.stories"
+};
diff --git a/examples/storybook/stories/material-ui/selects/CustomizedSelects.stories.tsx b/examples/storybook/stories/material-ui/selects/CustomizedSelects.stories.tsx
new file mode 100644
index 00000000000000..652802ae4358f0
--- /dev/null
+++ b/examples/storybook/stories/material-ui/selects/CustomizedSelects.stories.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { createStyles, makeStyles, withStyles, Theme } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import NativeSelect from '@material-ui/core/NativeSelect';
+import InputBase from '@material-ui/core/InputBase';
+
+const BootstrapInput = withStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ 'label + &': {
+ marginTop: theme.spacing(3),
+ },
+ },
+ input: {
+ borderRadius: 4,
+ position: 'relative',
+ backgroundColor: theme.palette.background.paper,
+ border: '1px solid #ced4da',
+ fontSize: 16,
+ padding: '10px 26px 10px 12px',
+ transition: theme.transitions.create(['border-color', 'box-shadow']),
+ // Use the system font instead of the default Roboto font.
+ fontFamily: [
+ '-apple-system',
+ 'BlinkMacSystemFont',
+ '"Segoe UI"',
+ 'Roboto',
+ '"Helvetica Neue"',
+ 'Arial',
+ 'sans-serif',
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"',
+ ].join(','),
+ '&:focus': {
+ borderRadius: 4,
+ borderColor: '#80bdff',
+ boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+ },
+ },
+ }),
+)(InputBase);
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ margin: {
+ margin: theme.spacing(1),
+ },
+ }),
+);
+
+export function CustomizedSelects() {
+ const classes = useStyles();
+ const [age, setAge] = React.useState('');
+ const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+ setAge(event.target.value as string);
+ };
+ return (
+
+
+ Age
+
+
+ Age
+ }
+ >
+
+
+
+
+
+
+
+ Age
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|selects|CustomizedSelects.stories"
+};
diff --git a/examples/storybook/stories/material-ui/selects/DialogSelect.stories.tsx b/examples/storybook/stories/material-ui/selects/DialogSelect.stories.tsx
new file mode 100644
index 00000000000000..77fdd67f637e89
--- /dev/null
+++ b/examples/storybook/stories/material-ui/selects/DialogSelect.stories.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import InputLabel from '@material-ui/core/InputLabel';
+import Input from '@material-ui/core/Input';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ container: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+ formControl: {
+ margin: theme.spacing(1),
+ minWidth: 120,
+ },
+ }),
+);
+
+export function DialogSelect() {
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+ const [age, setAge] = React.useState
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|selects|DialogSelect.stories"
+};
diff --git a/examples/storybook/stories/material-ui/selects/GroupedSelect.stories.tsx b/examples/storybook/stories/material-ui/selects/GroupedSelect.stories.tsx
new file mode 100644
index 00000000000000..01ae8d01bb6715
--- /dev/null
+++ b/examples/storybook/stories/material-ui/selects/GroupedSelect.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ formControl: {
+ margin: theme.spacing(1),
+ minWidth: 120,
+ },
+ }),
+);
+
+export function GroupedSelect() {
+ const classes = useStyles();
+
+ return (
+
+
+ Grouping
+
+
+
+ Grouping
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|selects|GroupedSelect.stories"
+};
diff --git a/examples/storybook/stories/material-ui/selects/MultipleSelect.stories.tsx b/examples/storybook/stories/material-ui/selects/MultipleSelect.stories.tsx
new file mode 100644
index 00000000000000..8e8ace5179287d
--- /dev/null
+++ b/examples/storybook/stories/material-ui/selects/MultipleSelect.stories.tsx
@@ -0,0 +1,204 @@
+import React from 'react';
+import clsx from 'clsx';
+import { createStyles, makeStyles, useTheme, Theme } from '@material-ui/core/styles';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import ListItemText from '@material-ui/core/ListItemText';
+import Select from '@material-ui/core/Select';
+import Checkbox from '@material-ui/core/Checkbox';
+import Chip from '@material-ui/core/Chip';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ formControl: {
+ margin: theme.spacing(1),
+ minWidth: 120,
+ maxWidth: 300,
+ },
+ chips: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+ chip: {
+ margin: 2,
+ },
+ noLabel: {
+ marginTop: theme.spacing(3),
+ },
+ }),
+);
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+ PaperProps: {
+ style: {
+ maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+ width: 250,
+ },
+ },
+};
+
+const names = [
+ 'Oliver Hansen',
+ 'Van Henry',
+ 'April Tucker',
+ 'Ralph Hubbard',
+ 'Omar Alexander',
+ 'Carlos Abbott',
+ 'Miriam Wagner',
+ 'Bradley Wilkerson',
+ 'Virginia Andrews',
+ 'Kelly Snyder',
+];
+
+function getStyles(name: string, personName: string[], theme: Theme) {
+ return {
+ fontWeight:
+ personName.indexOf(name) === -1
+ ? theme.typography.fontWeightRegular
+ : theme.typography.fontWeightMedium,
+ };
+}
+
+export function MultipleSelect() {
+ const classes = useStyles();
+ const theme = useTheme();
+ const [personName, setPersonName] = React.useState
+
+ Name
+ }
+ MenuProps={MenuProps}
+ >
+ {names.map((name) => (
+
+ ))}
+
+
+
+ Tag
+ }
+ renderValue={(selected) => (selected as string[]).join(', ')}
+ MenuProps={MenuProps}
+ >
+ {names.map((name) => (
+
+ ))}
+
+
+
+ Chip
+ }
+ renderValue={(selected) => (
+
+
+ }
+ renderValue={(selected) => {
+ if ((selected as string[]).length === 0) {
+ return Placeholder;
+ }
+
+ return (selected as string[]).join(', ');
+ }}
+ MenuProps={MenuProps}
+ inputProps={{ 'aria-label': 'Without label' }}
+ >
+
+ {names.map((name) => (
+
+ ))}
+
+
+
+
+ Native
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|selects|MultipleSelect.stories"
+};
diff --git a/examples/storybook/stories/material-ui/selects/NativeSelects.stories.tsx b/examples/storybook/stories/material-ui/selects/NativeSelects.stories.tsx
new file mode 100644
index 00000000000000..0334dff51dfb0e
--- /dev/null
+++ b/examples/storybook/stories/material-ui/selects/NativeSelects.stories.tsx
@@ -0,0 +1,238 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import NativeSelect from '@material-ui/core/NativeSelect';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ formControl: {
+ margin: theme.spacing(1),
+ minWidth: 120,
+ },
+ selectEmpty: {
+ marginTop: theme.spacing(2),
+ },
+ }),
+);
+
+export function NativeSelects() {
+ const classes = useStyles();
+ const [state, setState] = React.useState<{ age: string | number; name: string }>({
+ age: '',
+ name: 'hai',
+ });
+
+ const handleChange = (event: React.ChangeEvent<{ name?: string; value: unknown }>) => {
+ const name = event.target.name as keyof typeof state;
+ setState({
+ ...state,
+ [name]: event.target.value,
+ });
+ };
+
+ return (
+
+ {(selected as string[]).map((value) => (
+
+ )}
+ MenuProps={MenuProps}
+ >
+ {names.map((name) => (
+
+ ))}
+
+
+
+ Age
+
+
+
+ Age
+
+
+
+
+
+
+ Some important helper text
+
+
+
+
+
+
+
+
+ With visually hidden label
+
+
+
+ Age
+
+
+
+
+
+
+
+ Label + placeholder
+
+
+ Name
+
+
+
+
+
+ Disabled
+
+
+ Name
+
+
+
+
+ Error
+
+
+ Name
+
+
+
+
+
+ Uncontrolled
+
+
+
+
+
+
+
+
+ Placeholder
+
+
+ Age
+
+ Required
+
+
+ Age
+
+
+
+ Age
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|selects|NativeSelects.stories"
+};
diff --git a/examples/storybook/stories/material-ui/selects/SimpleSelect.stories.tsx b/examples/storybook/stories/material-ui/selects/SimpleSelect.stories.tsx
new file mode 100644
index 00000000000000..fd38d0e0a87d1f
--- /dev/null
+++ b/examples/storybook/stories/material-ui/selects/SimpleSelect.stories.tsx
@@ -0,0 +1,244 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ formControl: {
+ margin: theme.spacing(1),
+ minWidth: 120,
+ },
+ selectEmpty: {
+ marginTop: theme.spacing(2),
+ },
+ }),
+);
+
+export function SimpleSelect() {
+ const classes = useStyles();
+ const [age, setAge] = React.useState('');
+
+ const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+ setAge(event.target.value as string);
+ };
+
+ return (
+
+
+ Age
+
+
+
+ Age
+
+ Some important helper text
+
+
+
+ Without label
+
+
+
+ Age
+
+
+ Label + placeholder
+
+
+ Name
+
+ Disabled
+
+
+ Name
+
+ Error
+
+
+ Name
+
+ Read only
+
+
+ Age
+
+ Auto width
+
+
+
+ Placeholder
+
+
+ Age
+
+ Required
+
+
+ Age
+
+
+
+ Age
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|selects|SimpleSelect.stories"
+};
diff --git a/examples/storybook/stories/material-ui/skeleton/Animations.stories.tsx b/examples/storybook/stories/material-ui/skeleton/Animations.stories.tsx
new file mode 100644
index 00000000000000..fab6f904101dcd
--- /dev/null
+++ b/examples/storybook/stories/material-ui/skeleton/Animations.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import Skeleton from '@material-ui/lab/Skeleton';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+ root: {
+ width: 300,
+ },
+});
+
+export function Animations() {
+ const classes = useStyles();
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|skeleton|Animations.stories"
+};
diff --git a/examples/storybook/stories/material-ui/skeleton/Facebook.stories.tsx b/examples/storybook/stories/material-ui/skeleton/Facebook.stories.tsx
new file mode 100644
index 00000000000000..da8c271bc43898
--- /dev/null
+++ b/examples/storybook/stories/material-ui/skeleton/Facebook.stories.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Avatar from '@material-ui/core/Avatar';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import Skeleton from '@material-ui/lab/Skeleton';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ card: {
+ maxWidth: 345,
+ margin: theme.spacing(2),
+ },
+ media: {
+ height: 190,
+ },
+ }),
+);
+
+interface MediaProps {
+ loading?: boolean;
+}
+
+function Media(props: MediaProps) {
+ const { loading = false } = props;
+ const classes = useStyles();
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|skeleton|Facebook.stories"
+};
diff --git a/examples/storybook/stories/material-ui/skeleton/SkeletonChildren.stories.tsx b/examples/storybook/stories/material-ui/skeleton/SkeletonChildren.stories.tsx
new file mode 100644
index 00000000000000..16319ca86f698b
--- /dev/null
+++ b/examples/storybook/stories/material-ui/skeleton/SkeletonChildren.stories.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import Avatar from '@material-ui/core/Avatar';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+import Skeleton from '@material-ui/lab/Skeleton';
+
+const useStyles = makeStyles(() => ({
+ image: {
+ width: '100%',
+ },
+}));
+
+function SkeletonChildrenDemo(props: { loading?: boolean }) {
+ const { loading = false } = props;
+ const classes = useStyles();
+
+ return (
+
+
+
+ {loading ? (
+
+
+ ) : (
+
+
+ {loading ? (
+
+ .
+
+ ) : (
+ Ted
+ )}
+
+
+ {loading ? (
+
+ 
+
+ ) : (
+ 
+ )}
+
+ );
+}
+
+export function SkeletonChildren() {
+ return (
+
+
+ )}
+
+ {variants.map((variant) => (
+
+ {loading ?
+ ))}
+
+ );
+}
+
+export function SkeletonTypography() {
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|skeleton|Variants.stories"
+};
diff --git a/examples/storybook/stories/material-ui/skeleton/YouTube.stories.tsx b/examples/storybook/stories/material-ui/skeleton/YouTube.stories.tsx
new file mode 100644
index 00000000000000..cca64254abe73e
--- /dev/null
+++ b/examples/storybook/stories/material-ui/skeleton/YouTube.stories.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import Skeleton from '@material-ui/lab/Skeleton';
+
+const data = [
+ {
+ src:
+ 'https://i.ytimg.com/vi/pLqipJNItIo/hqdefault.jpg?sqp=-oaymwEYCNIBEHZIVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLBkklsyaw9FxDmMKapyBYCn9tbPNQ',
+ title: 'Don Diablo @ Tomorrowland Main Stage 2019 | Official…',
+ channel: 'Don Diablo',
+ views: '396 k views',
+ createdAt: 'a week ago',
+ },
+ {
+ src:
+ 'https://i.ytimg.com/vi/_Uu12zY01ts/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCpX6Jan2rxrCAZxJYDXppTP4MoQA',
+ title: 'Queen - Greatest Hits',
+ channel: 'Queen Official',
+ views: '40 M views',
+ createdAt: '3 years ago',
+ },
+ {
+ src:
+ 'https://i.ytimg.com/vi/kkLk2XWMBf8/hqdefault.jpg?sqp=-oaymwEYCNIBEHZIVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLB4GZTFu1Ju2EPPPXnhMZtFVvYBaw',
+ title: 'Calvin Harris, Sam Smith - Promises (Official Video)',
+ channel: 'Calvin Harris',
+ views: '130 M views',
+ createdAt: '10 months ago',
+ },
+];
+
+interface MediaProps {
+ loading?: boolean;
+}
+
+function Media(props: MediaProps) {
+ const { loading = false } = props;
+
+ return (
+
+
+ Volume
+
+
+
+
+
+
+
+
+
+
+ Disabled slider
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|slider|ContinuousSlider.stories"
+};
diff --git a/examples/storybook/stories/material-ui/slider/CustomizedSlider.stories.tsx b/examples/storybook/stories/material-ui/slider/CustomizedSlider.stories.tsx
new file mode 100644
index 00000000000000..d88b0405434bca
--- /dev/null
+++ b/examples/storybook/stories/material-ui/slider/CustomizedSlider.stories.tsx
@@ -0,0 +1,209 @@
+import React from 'react';
+import { withStyles, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Slider from '@material-ui/core/Slider';
+import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: 300 + theme.spacing(3) * 2,
+ },
+ margin: {
+ height: theme.spacing(3),
+ },
+ }),
+);
+
+interface Props {
+ children: React.ReactElement;
+ open: boolean;
+ value: number;
+}
+
+function ValueLabelComponent(props: Props) {
+ const { children, open, value } = props;
+
+ return (
+
+ iOS
+ pretto.fr
+ Tooltip value label
+ Airbnb
+ (index === 0 ? 'Minimum price' : 'Maximum price')}
+ defaultValue={[20, 40]}
+ />
+
+ );
+}
+
+export default {
+ title: "Material-ui|slider|CustomizedSlider.stories"
+};
diff --git a/examples/storybook/stories/material-ui/slider/DiscreteSlider.stories.tsx b/examples/storybook/stories/material-ui/slider/DiscreteSlider.stories.tsx
new file mode 100644
index 00000000000000..afbb0d2284333c
--- /dev/null
+++ b/examples/storybook/stories/material-ui/slider/DiscreteSlider.stories.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+
+const useStyles = makeStyles({
+ root: {
+ width: 300,
+ },
+});
+
+function valuetext(value: number) {
+ return `${value}°C`;
+}
+
+export function DiscreteSlider() {
+ const classes = useStyles();
+
+ return (
+
+
+ Temperature
+
+
+ Disabled
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|slider|DiscreteSlider.stories"
+};
diff --git a/examples/storybook/stories/material-ui/slider/DiscreteSliderLabel.stories.tsx b/examples/storybook/stories/material-ui/slider/DiscreteSliderLabel.stories.tsx
new file mode 100644
index 00000000000000..75160c6ee4f625
--- /dev/null
+++ b/examples/storybook/stories/material-ui/slider/DiscreteSliderLabel.stories.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: 300,
+ },
+ margin: {
+ height: theme.spacing(3),
+ },
+ }),
+);
+
+const marks = [
+ {
+ value: 0,
+ label: '0°C',
+ },
+ {
+ value: 20,
+ label: '20°C',
+ },
+ {
+ value: 37,
+ label: '37°C',
+ },
+ {
+ value: 100,
+ label: '100°C',
+ },
+];
+
+function valuetext(value: number) {
+ return `${value}°C`;
+}
+
+export function DiscreteSlider() {
+ const classes = useStyles();
+
+ return (
+
+
+ Always visible
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|slider|DiscreteSliderLabel.stories"
+};
diff --git a/examples/storybook/stories/material-ui/slider/DiscreteSliderMarks.stories.tsx b/examples/storybook/stories/material-ui/slider/DiscreteSliderMarks.stories.tsx
new file mode 100644
index 00000000000000..881c592bab293f
--- /dev/null
+++ b/examples/storybook/stories/material-ui/slider/DiscreteSliderMarks.stories.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: 300,
+ },
+ margin: {
+ height: theme.spacing(3),
+ },
+ }),
+);
+
+const marks = [
+ {
+ value: 0,
+ label: '0°C',
+ },
+ {
+ value: 20,
+ label: '20°C',
+ },
+ {
+ value: 37,
+ label: '37°C',
+ },
+ {
+ value: 100,
+ label: '100°C',
+ },
+];
+
+function valuetext(value: number) {
+ return `${value}°C`;
+}
+
+export function DiscreteSlider() {
+ const classes = useStyles();
+
+ return (
+
+
+ Custom marks
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|slider|DiscreteSliderMarks.stories"
+};
diff --git a/examples/storybook/stories/material-ui/slider/DiscreteSliderSteps.stories.tsx b/examples/storybook/stories/material-ui/slider/DiscreteSliderSteps.stories.tsx
new file mode 100644
index 00000000000000..09ede983c55575
--- /dev/null
+++ b/examples/storybook/stories/material-ui/slider/DiscreteSliderSteps.stories.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+
+const useStyles = makeStyles({
+ root: {
+ width: 300,
+ },
+});
+
+function valuetext(value: number) {
+ return `${value}°C`;
+}
+
+export function DiscreteSlider() {
+ const classes = useStyles();
+
+ return (
+
+
+ Small steps
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|slider|DiscreteSliderSteps.stories"
+};
diff --git a/examples/storybook/stories/material-ui/slider/DiscreteSliderValues.stories.tsx b/examples/storybook/stories/material-ui/slider/DiscreteSliderValues.stories.tsx
new file mode 100644
index 00000000000000..9853281ec20a53
--- /dev/null
+++ b/examples/storybook/stories/material-ui/slider/DiscreteSliderValues.stories.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+
+const useStyles = makeStyles({
+ root: {
+ width: 300,
+ },
+});
+
+const marks = [
+ {
+ value: 0,
+ label: '0°C',
+ },
+ {
+ value: 20,
+ label: '20°C',
+ },
+ {
+ value: 37,
+ label: '37°C',
+ },
+ {
+ value: 100,
+ label: '100°C',
+ },
+];
+
+function valuetext(value: number) {
+ return `${value}°C`;
+}
+
+function valueLabelFormat(value: number) {
+ return marks.findIndex((mark) => mark.value === value) + 1;
+}
+
+export function DiscreteSlider() {
+ const classes = useStyles();
+
+ return (
+
+
+ Restricted values
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|slider|DiscreteSliderValues.stories"
+};
diff --git a/examples/storybook/stories/material-ui/slider/InputSlider.stories.tsx b/examples/storybook/stories/material-ui/slider/InputSlider.stories.tsx
new file mode 100644
index 00000000000000..77739cd6953a5f
--- /dev/null
+++ b/examples/storybook/stories/material-ui/slider/InputSlider.stories.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+import Input from '@material-ui/core/Input';
+import VolumeUp from '@material-ui/icons/VolumeUp';
+
+const useStyles = makeStyles({
+ root: {
+ width: 250,
+ },
+ input: {
+ width: 42,
+ },
+});
+
+export function InputSlider() {
+ const classes = useStyles();
+ const [value, setValue] = React.useState
+
+ Volume
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|slider|InputSlider.stories"
+};
diff --git a/examples/storybook/stories/material-ui/slider/NonLinearSlider.stories.tsx b/examples/storybook/stories/material-ui/slider/NonLinearSlider.stories.tsx
new file mode 100644
index 00000000000000..9778675d87d9bc
--- /dev/null
+++ b/examples/storybook/stories/material-ui/slider/NonLinearSlider.stories.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+
+function valueLabelFormat(value: number) {
+ const [coefficient, exponent] = value
+ .toExponential()
+ .split('e')
+ .map((item) => Number(item));
+ return `${Math.round(coefficient)}e^${exponent}`;
+}
+
+export function NonLinearSlider() {
+ const [value, setValue] = React.useState
+
+ Temperature range
+
+ x ** 10}
+ getAriaValueText={valueLabelFormat}
+ valueLabelFormat={valueLabelFormat}
+ onChange={handleChange}
+ valueLabelDisplay="auto"
+ aria-labelledby="non-linear-slider"
+ />
+
+ );
+}
+
+export default {
+ title: "Material-ui|slider|NonLinearSlider.stories"
+};
diff --git a/examples/storybook/stories/material-ui/slider/RangeSlider.stories.tsx b/examples/storybook/stories/material-ui/slider/RangeSlider.stories.tsx
new file mode 100644
index 00000000000000..c350cc68895009
--- /dev/null
+++ b/examples/storybook/stories/material-ui/slider/RangeSlider.stories.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+
+const useStyles = makeStyles({
+ root: {
+ width: 300,
+ },
+});
+
+function valuetext(value: number) {
+ return `${value}°C`;
+}
+
+export function RangeSlider() {
+ const classes = useStyles();
+ const [value, setValue] = React.useState
+
+ Temperature range
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|slider|RangeSlider.stories"
+};
diff --git a/examples/storybook/stories/material-ui/slider/TrackFalseSlider.stories.tsx b/examples/storybook/stories/material-ui/slider/TrackFalseSlider.stories.tsx
new file mode 100644
index 00000000000000..49a87a56218764
--- /dev/null
+++ b/examples/storybook/stories/material-ui/slider/TrackFalseSlider.stories.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: 250,
+ },
+ margin: {
+ height: theme.spacing(3),
+ },
+ }),
+);
+
+const marks = [
+ {
+ value: 0,
+ label: '0°C',
+ },
+ {
+ value: 20,
+ label: '20°C',
+ },
+ {
+ value: 37,
+ label: '37°C',
+ },
+ {
+ value: 100,
+ label: '100°C',
+ },
+];
+
+function valuetext(value: number) {
+ return `${value}°C`;
+}
+
+export function TrackFalseSlider() {
+ const classes = useStyles();
+
+ return (
+
+
+ Removed track
+
+
+ Removed track range slider
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|slider|TrackFalseSlider.stories"
+};
diff --git a/examples/storybook/stories/material-ui/slider/TrackInvertedSlider.stories.tsx b/examples/storybook/stories/material-ui/slider/TrackInvertedSlider.stories.tsx
new file mode 100644
index 00000000000000..bb9b6bbf54ee61
--- /dev/null
+++ b/examples/storybook/stories/material-ui/slider/TrackInvertedSlider.stories.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: 250,
+ },
+ margin: {
+ height: theme.spacing(3),
+ },
+ }),
+);
+
+const marks = [
+ {
+ value: 0,
+ label: '0°C',
+ },
+ {
+ value: 20,
+ label: '20°C',
+ },
+ {
+ value: 37,
+ label: '37°C',
+ },
+ {
+ value: 100,
+ label: '100°C',
+ },
+];
+
+function valuetext(value: number) {
+ return `${value}°C`;
+}
+
+export function TrackInvertedSlider() {
+ const classes = useStyles();
+
+ return (
+
+
+ Inverted track
+
+
+ Inverted track range
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|slider|TrackInvertedSlider.stories"
+};
diff --git a/examples/storybook/stories/material-ui/slider/VerticalSlider.stories.tsx b/examples/storybook/stories/material-ui/slider/VerticalSlider.stories.tsx
new file mode 100644
index 00000000000000..589baadf84146b
--- /dev/null
+++ b/examples/storybook/stories/material-ui/slider/VerticalSlider.stories.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+
+const useStyles = makeStyles({
+ root: {
+ height: 300,
+ },
+});
+
+function valuetext(value: number) {
+ return `${value}°C`;
+}
+
+const marks = [
+ {
+ value: 0,
+ label: '0°C',
+ },
+ {
+ value: 20,
+ label: '20°C',
+ },
+ {
+ value: 37,
+ label: '37°C',
+ },
+ {
+ value: 100,
+ label: '100°C',
+ },
+];
+
+export function VerticalSlider() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+ );
+}
+
+export default {
+ title: "Material-ui|snackbars|ConsecutiveSnackbars.stories"
+};
diff --git a/examples/storybook/stories/material-ui/snackbars/CustomizedSnackbars.stories.tsx b/examples/storybook/stories/material-ui/snackbars/CustomizedSnackbars.stories.tsx
new file mode 100644
index 00000000000000..49bd3cf494cf7b
--- /dev/null
+++ b/examples/storybook/stories/material-ui/snackbars/CustomizedSnackbars.stories.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+
+function Alert(props: AlertProps) {
+ return
+
+
+
+ This is a success message!
+
+
+ This is an error message!
+ This is a warning message!
+ This is an information message!
+ This is a success message!
+
+ );
+}
+
+export default {
+ title: "Material-ui|snackbars|CustomizedSnackbars.stories"
+};
diff --git a/examples/storybook/stories/material-ui/snackbars/DirectionSnackbar.stories.tsx b/examples/storybook/stories/material-ui/snackbars/DirectionSnackbar.stories.tsx
new file mode 100644
index 00000000000000..0d6ab8cdb93724
--- /dev/null
+++ b/examples/storybook/stories/material-ui/snackbars/DirectionSnackbar.stories.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import Slide, { SlideProps } from '@material-ui/core/Slide';
+
+type TransitionProps = Omit
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|snackbars|DirectionSnackbar.stories"
+};
diff --git a/examples/storybook/stories/material-ui/snackbars/FabIntegrationSnackbar.stories.tsx b/examples/storybook/stories/material-ui/snackbars/FabIntegrationSnackbar.stories.tsx
new file mode 100644
index 00000000000000..84132f1dbcc900
--- /dev/null
+++ b/examples/storybook/stories/material-ui/snackbars/FabIntegrationSnackbar.stories.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import Fab from '@material-ui/core/Fab';
+import AddIcon from '@material-ui/icons/Add';
+import Snackbar from '@material-ui/core/Snackbar';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ '@global': {
+ body: {
+ backgroundColor: theme.palette.background.paper,
+ },
+ },
+ menuButton: {
+ marginRight: theme.spacing(2),
+ },
+ fab: {
+ position: 'absolute',
+ bottom: theme.spacing(2),
+ right: theme.spacing(2),
+ },
+ snackbar: {
+ [theme.breakpoints.down('xs')]: {
+ bottom: 90,
+ },
+ },
+ }),
+);
+
+export function FabIntegrationSnackbar() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+ App Bar
+
+
+
+
+
+
+ Undo
+
+ }
+ className={classes.snackbar}
+ />
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|snackbars|LongTextSnackbar.stories"
+};
diff --git a/examples/storybook/stories/material-ui/snackbars/PositionedSnackbar.stories.tsx b/examples/storybook/stories/material-ui/snackbars/PositionedSnackbar.stories.tsx
new file mode 100644
index 00000000000000..fef1c2a9306b97
--- /dev/null
+++ b/examples/storybook/stories/material-ui/snackbars/PositionedSnackbar.stories.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Snackbar, { SnackbarOrigin } from '@material-ui/core/Snackbar';
+
+export interface State extends SnackbarOrigin {
+ open: boolean;
+}
+
+export function PositionedSnackbar() {
+ const [state, setState] = React.useState
+ {buttons}
+
+ );
+}
+
+export default {
+ title: "Material-ui|snackbars|PositionedSnackbar.stories"
+};
diff --git a/examples/storybook/stories/material-ui/snackbars/SimpleSnackbar.stories.tsx b/examples/storybook/stories/material-ui/snackbars/SimpleSnackbar.stories.tsx
new file mode 100644
index 00000000000000..387ac0fcd82f3f
--- /dev/null
+++ b/examples/storybook/stories/material-ui/snackbars/SimpleSnackbar.stories.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+
+export function SimpleSnackbar() {
+ const [open, setOpen] = React.useState(false);
+
+ const handleClick = () => {
+ setOpen(true);
+ };
+
+ const handleClose = (event: React.SyntheticEvent | React.MouseEvent, reason?: string) => {
+ if (reason === 'clickaway') {
+ return;
+ }
+
+ setOpen(false);
+ };
+
+ return (
+
+
+
+
+
+
+
+ }
+ />
+
+ );
+}
+
+export default {
+ title: "Material-ui|snackbars|SimpleSnackbar.stories"
+};
diff --git a/examples/storybook/stories/material-ui/snackbars/TransitionsSnackbar.stories.tsx b/examples/storybook/stories/material-ui/snackbars/TransitionsSnackbar.stories.tsx
new file mode 100644
index 00000000000000..a322afc30f04cb
--- /dev/null
+++ b/examples/storybook/stories/material-ui/snackbars/TransitionsSnackbar.stories.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import Fade from '@material-ui/core/Fade';
+import Slide from '@material-ui/core/Slide';
+import Grow from '@material-ui/core/Grow';
+import { TransitionProps } from '@material-ui/core/transitions';
+
+function SlideTransition(props: TransitionProps) {
+ return
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|snackbars|TransitionsSnackbar.stories"
+};
diff --git a/examples/storybook/stories/material-ui/speed-dial/OpenIconSpeedDial.stories.tsx b/examples/storybook/stories/material-ui/speed-dial/OpenIconSpeedDial.stories.tsx
new file mode 100644
index 00000000000000..72859db5fe7a9e
--- /dev/null
+++ b/examples/storybook/stories/material-ui/speed-dial/OpenIconSpeedDial.stories.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import SpeedDial from '@material-ui/lab/SpeedDial';
+import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
+import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
+import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
+import SaveIcon from '@material-ui/icons/Save';
+import PrintIcon from '@material-ui/icons/Print';
+import ShareIcon from '@material-ui/icons/Share';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import EditIcon from '@material-ui/icons/Edit';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ height: 380,
+ transform: 'translateZ(0px)',
+ flexGrow: 1,
+ },
+ speedDial: {
+ position: 'absolute',
+ bottom: theme.spacing(2),
+ right: theme.spacing(2),
+ },
+ }),
+);
+
+const actions = [
+ { icon:
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|speed-dial|OpenIconSpeedDial.stories"
+};
diff --git a/examples/storybook/stories/material-ui/speed-dial/SpeedDialTooltipOpen.stories.tsx b/examples/storybook/stories/material-ui/speed-dial/SpeedDialTooltipOpen.stories.tsx
new file mode 100644
index 00000000000000..bc4f964ca58c56
--- /dev/null
+++ b/examples/storybook/stories/material-ui/speed-dial/SpeedDialTooltipOpen.stories.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Backdrop from '@material-ui/core/Backdrop';
+import SpeedDial from '@material-ui/lab/SpeedDial';
+import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
+import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
+import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
+import SaveIcon from '@material-ui/icons/Save';
+import PrintIcon from '@material-ui/icons/Print';
+import ShareIcon from '@material-ui/icons/Share';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ height: 380,
+ transform: 'translateZ(0px)',
+ flexGrow: 1,
+ },
+ speedDial: {
+ position: 'absolute',
+ bottom: theme.spacing(2),
+ right: theme.spacing(2),
+ },
+ }),
+);
+
+const actions = [
+ { icon:
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|speed-dial|SpeedDialTooltipOpen.stories"
+};
diff --git a/examples/storybook/stories/material-ui/speed-dial/SpeedDials.stories.tsx b/examples/storybook/stories/material-ui/speed-dial/SpeedDials.stories.tsx
new file mode 100644
index 00000000000000..fcd1fffb6b3ff2
--- /dev/null
+++ b/examples/storybook/stories/material-ui/speed-dial/SpeedDials.stories.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormLabel from '@material-ui/core/FormLabel';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Switch from '@material-ui/core/Switch';
+import SpeedDial, { SpeedDialProps } from '@material-ui/lab/SpeedDial';
+import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
+import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
+import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
+import SaveIcon from '@material-ui/icons/Save';
+import PrintIcon from '@material-ui/icons/Print';
+import ShareIcon from '@material-ui/icons/Share';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ transform: 'translateZ(0px)',
+ flexGrow: 1,
+ },
+ exampleWrapper: {
+ position: 'relative',
+ marginTop: theme.spacing(3),
+ height: 380,
+ },
+ radioGroup: {
+ margin: theme.spacing(1, 0),
+ },
+ speedDial: {
+ position: 'absolute',
+ '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': {
+ bottom: theme.spacing(2),
+ right: theme.spacing(2),
+ },
+ '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': {
+ top: theme.spacing(2),
+ left: theme.spacing(2),
+ },
+ },
+ }),
+);
+
+const actions = [
+ { icon:
+
+ Direction
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|speed-dial|SpeedDials.stories"
+};
diff --git a/examples/storybook/stories/material-ui/steppers/CustomizedSteppers.stories.tsx b/examples/storybook/stories/material-ui/steppers/CustomizedSteppers.stories.tsx
new file mode 100644
index 00000000000000..19d7090086d9fb
--- /dev/null
+++ b/examples/storybook/stories/material-ui/steppers/CustomizedSteppers.stories.tsx
@@ -0,0 +1,253 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles, withStyles } from '@material-ui/core/styles';
+import clsx from 'clsx';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
+import Check from '@material-ui/icons/Check';
+import SettingsIcon from '@material-ui/icons/Settings';
+import GroupAddIcon from '@material-ui/icons/GroupAdd';
+import VideoLabelIcon from '@material-ui/icons/VideoLabel';
+import StepConnector from '@material-ui/core/StepConnector';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import { StepIconProps } from '@material-ui/core/StepIcon';
+
+const QontoConnector = withStyles({
+ alternativeLabel: {
+ top: 10,
+ left: 'calc(-50% + 16px)',
+ right: 'calc(50% + 16px)',
+ },
+ active: {
+ '& $line': {
+ borderColor: '#784af4',
+ },
+ },
+ completed: {
+ '& $line': {
+ borderColor: '#784af4',
+ },
+ },
+ line: {
+ borderColor: '#eaeaf0',
+ borderTopWidth: 3,
+ borderRadius: 1,
+ },
+})(StepConnector);
+
+const useQontoStepIconStyles = makeStyles({
+ root: {
+ color: '#eaeaf0',
+ display: 'flex',
+ height: 22,
+ alignItems: 'center',
+ },
+ active: {
+ color: '#784af4',
+ },
+ circle: {
+ width: 8,
+ height: 8,
+ borderRadius: '50%',
+ backgroundColor: 'currentColor',
+ },
+ completed: {
+ color: '#784af4',
+ zIndex: 1,
+ fontSize: 18,
+ },
+});
+
+function QontoStepIcon(props: StepIconProps) {
+ const classes = useQontoStepIconStyles();
+ const { active, completed } = props;
+
+ return (
+
+
+
+ {completed ?
+ );
+}
+
+const ColorlibConnector = withStyles({
+ alternativeLabel: {
+ top: 22,
+ },
+ active: {
+ '& $line': {
+ backgroundImage:
+ 'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
+ },
+ },
+ completed: {
+ '& $line': {
+ backgroundImage:
+ 'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
+ },
+ },
+ line: {
+ height: 3,
+ border: 0,
+ backgroundColor: '#eaeaf0',
+ borderRadius: 1,
+ },
+})(StepConnector);
+
+const useColorlibStepIconStyles = makeStyles({
+ root: {
+ backgroundColor: '#ccc',
+ zIndex: 1,
+ color: '#fff',
+ width: 50,
+ height: 50,
+ display: 'flex',
+ borderRadius: '50%',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ active: {
+ backgroundImage:
+ 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
+ boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
+ },
+ completed: {
+ backgroundImage:
+ 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
+ },
+});
+
+function ColorlibStepIcon(props: StepIconProps) {
+ const classes = useColorlibStepIconStyles();
+ const { active, completed } = props;
+
+ const icons: { [index: string]: React.ReactElement } = {
+ 1:
+ {icons[String(props.icon)]}
+
+ );
+}
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ },
+ button: {
+ marginRight: theme.spacing(1),
+ },
+ instructions: {
+ marginTop: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ },
+ }),
+);
+
+function getSteps() {
+ return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
+}
+
+function getStepContent(step: number) {
+ switch (step) {
+ case 0:
+ return 'Select campaign settings...';
+ case 1:
+ return 'What is an ad group anyways?';
+ case 2:
+ return 'This is the bit I really care about!';
+ default:
+ return 'Unknown step';
+ }
+}
+
+export function CustomizedSteppers() {
+ const classes = useStyles();
+ const [activeStep, setActiveStep] = React.useState(1);
+ const steps = getSteps();
+
+ const handleNext = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
+ };
+
+ const handleBack = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep - 1);
+ };
+
+ const handleReset = () => {
+ setActiveStep(0);
+ };
+
+ return (
+
+
+ {steps.map((label) => (
+
+ {label}
+
+ ))}
+
+
+ {label}
+
+ ))}
+
+
+ {label}
+
+ ))}
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|steppers|CustomizedSteppers.stories"
+};
diff --git a/examples/storybook/stories/material-ui/steppers/DotsMobileStepper.stories.tsx b/examples/storybook/stories/material-ui/steppers/DotsMobileStepper.stories.tsx
new file mode 100644
index 00000000000000..a57c02df8a6c64
--- /dev/null
+++ b/examples/storybook/stories/material-ui/steppers/DotsMobileStepper.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import MobileStepper from '@material-ui/core/MobileStepper';
+import Button from '@material-ui/core/Button';
+import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
+import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
+
+const useStyles = makeStyles({
+ root: {
+ maxWidth: 400,
+ flexGrow: 1,
+ },
+});
+
+export function DotsMobileStepper() {
+ const classes = useStyles();
+ const theme = useTheme();
+ const [activeStep, setActiveStep] = React.useState(0);
+
+ const handleNext = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
+ };
+
+ const handleBack = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep - 1);
+ };
+
+ return (
+
+ {activeStep === steps.length ? (
+
+
+
+ All steps completed - you're finished
+
+
+
+ ) : (
+
+ {getStepContent(activeStep)}
+
+ )}
+
+
+
+
+
+
+ {steps.map((label) => (
+
+ {label}
+
+ ))}
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|steppers|HorizontalLinearAlternativeLabelStepper.stories"
+};
diff --git a/examples/storybook/stories/material-ui/steppers/HorizontalLinearStepper.stories.tsx b/examples/storybook/stories/material-ui/steppers/HorizontalLinearStepper.stories.tsx
new file mode 100644
index 00000000000000..753bae73d0d32d
--- /dev/null
+++ b/examples/storybook/stories/material-ui/steppers/HorizontalLinearStepper.stories.tsx
@@ -0,0 +1,153 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ },
+ button: {
+ marginRight: theme.spacing(1),
+ },
+ instructions: {
+ marginTop: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ },
+ }),
+);
+
+function getSteps() {
+ return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
+}
+
+function getStepContent(step: number) {
+ switch (step) {
+ case 0:
+ return 'Select campaign settings...';
+ case 1:
+ return 'What is an ad group anyways?';
+ case 2:
+ return 'This is the bit I really care about!';
+ default:
+ return 'Unknown step';
+ }
+}
+
+export function HorizontalLinearStepper() {
+ const classes = useStyles();
+ const [activeStep, setActiveStep] = React.useState(0);
+ const [skipped, setSkipped] = React.useState(new Set
+ {activeStep === steps.length ? (
+
+
+ All steps completed
+
+
+ ) : (
+
+ {getStepContent(activeStep)}
+
+ )}
+
+
+
+
+
+
+ {steps.map((label, index) => {
+ const stepProps: { completed?: boolean } = {};
+ const labelProps: { optional?: React.ReactNode } = {};
+ if (isStepOptional(index)) {
+ labelProps.optional = Optional ;
+ }
+ if (isStepSkipped(index)) {
+ stepProps.completed = false;
+ }
+ return (
+
+ {label}
+
+ );
+ })}
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|steppers|HorizontalLinearStepper.stories"
+};
diff --git a/examples/storybook/stories/material-ui/steppers/HorizontalNonLinearAlternativeLabelStepper.stories.tsx b/examples/storybook/stories/material-ui/steppers/HorizontalNonLinearAlternativeLabelStepper.stories.tsx
new file mode 100644
index 00000000000000..077a0bfb2cfea9
--- /dev/null
+++ b/examples/storybook/stories/material-ui/steppers/HorizontalNonLinearAlternativeLabelStepper.stories.tsx
@@ -0,0 +1,219 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepButton from '@material-ui/core/StepButton';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ },
+ button: {
+ marginRight: theme.spacing(1),
+ },
+ backButton: {
+ marginRight: theme.spacing(1),
+ },
+ completed: {
+ display: 'inline-block',
+ },
+ instructions: {
+ marginTop: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ },
+ }),
+);
+
+function getSteps() {
+ return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
+}
+
+function getStepContent(step: number) {
+ switch (step) {
+ case 0:
+ return 'Step 1: Select campaign settings...';
+ case 1:
+ return 'Step 2: What is an ad group anyways?';
+ case 2:
+ return 'Step 3: This is the bit I really care about!';
+ default:
+ return 'Unknown step';
+ }
+}
+
+export function HorizontalNonLinearAlternativeLabelStepper() {
+ const classes = useStyles();
+ const [activeStep, setActiveStep] = React.useState(0);
+ const [completed, setCompleted] = React.useState(new Set
+ {activeStep === steps.length ? (
+
+
+
+ All steps completed - you're finished
+
+
+
+ ) : (
+
+ {getStepContent(activeStep)}
+
+ )}
+
+
+ {isStepOptional(activeStep) && (
+
+ )}
+
+
+
+
+ {steps.map((label, index) => {
+ const stepProps: { completed?: boolean } = {};
+ const buttonProps: { optional?: React.ReactNode } = {};
+ if (isStepOptional(index)) {
+ buttonProps.optional = Optional ;
+ }
+ if (isStepSkipped(index)) {
+ stepProps.completed = false;
+ }
+ return (
+
+
+ {label}
+
+
+ );
+ })}
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|steppers|HorizontalNonLinearAlternativeLabelStepper.stories"
+};
diff --git a/examples/storybook/stories/material-ui/steppers/HorizontalNonLinearStepper.stories.tsx b/examples/storybook/stories/material-ui/steppers/HorizontalNonLinearStepper.stories.tsx
new file mode 100644
index 00000000000000..dbafee45b885a6
--- /dev/null
+++ b/examples/storybook/stories/material-ui/steppers/HorizontalNonLinearStepper.stories.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepButton from '@material-ui/core/StepButton';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ },
+ button: {
+ marginRight: theme.spacing(1),
+ },
+ completed: {
+ display: 'inline-block',
+ },
+ instructions: {
+ marginTop: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ },
+ }),
+);
+
+function getSteps() {
+ return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
+}
+
+function getStepContent(step: number) {
+ switch (step) {
+ case 0:
+ return 'Step 1: Select campaign settings...';
+ case 1:
+ return 'Step 2: What is an ad group anyways?';
+ case 2:
+ return 'Step 3: This is the bit I really care about!';
+ default:
+ return 'Unknown step';
+ }
+}
+
+export function HorizontalNonLinearStepper() {
+ const classes = useStyles();
+ const [activeStep, setActiveStep] = React.useState(0);
+ const [completed, setCompleted] = React.useState<{ [k: number]: boolean }>({});
+ const steps = getSteps();
+
+ const totalSteps = () => {
+ return steps.length;
+ };
+
+ const completedSteps = () => {
+ return Object.keys(completed).length;
+ };
+
+ const isLastStep = () => {
+ return activeStep === totalSteps() - 1;
+ };
+
+ const allStepsCompleted = () => {
+ return completedSteps() === totalSteps();
+ };
+
+ const handleNext = () => {
+ const newActiveStep =
+ isLastStep() && !allStepsCompleted()
+ ? // It's the last step, but not all steps have been completed,
+ // find the first step that has been completed
+ steps.findIndex((step, i) => !(i in completed))
+ : activeStep + 1;
+ setActiveStep(newActiveStep);
+ };
+
+ const handleBack = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep - 1);
+ };
+
+ const handleStep = (step: number) => () => {
+ setActiveStep(step);
+ };
+
+ const handleComplete = () => {
+ const newCompleted = completed;
+ newCompleted[activeStep] = true;
+ setCompleted(newCompleted);
+ handleNext();
+ };
+
+ const handleReset = () => {
+ setActiveStep(0);
+ setCompleted({});
+ };
+
+ return (
+
+ {allStepsCompleted() ? (
+
+
+
+ All steps completed - you're finished
+
+
+
+ ) : (
+
+ {getStepContent(activeStep)}
+
+ )}
+
+
+
+ {isStepOptional(activeStep) && !completed.has(activeStep) && (
+
+ )}
+ {activeStep !== steps.length &&
+ (completed.has(activeStep) ? (
+
+ Step {activeStep + 1} already completed
+
+ ) : (
+
+ ))}
+
+
+
+ {steps.map((label, index) => (
+
+
+ {label}
+
+
+ ))}
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|steppers|HorizontalNonLinearStepper.stories"
+};
diff --git a/examples/storybook/stories/material-ui/steppers/HorizontalNonLinearStepperWithError.stories.tsx b/examples/storybook/stories/material-ui/steppers/HorizontalNonLinearStepperWithError.stories.tsx
new file mode 100644
index 00000000000000..d8a28416203664
--- /dev/null
+++ b/examples/storybook/stories/material-ui/steppers/HorizontalNonLinearStepperWithError.stories.tsx
@@ -0,0 +1,164 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ },
+ button: {
+ marginRight: theme.spacing(1),
+ },
+ instructions: {
+ marginTop: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ },
+ }),
+);
+
+function getSteps() {
+ return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
+}
+
+function getStepContent(step: number) {
+ switch (step) {
+ case 0:
+ return 'Select campaign settings...';
+ case 1:
+ return 'What is an ad group anyways?';
+ case 2:
+ return 'This is the bit I really care about!';
+ default:
+ return 'Unknown step';
+ }
+}
+
+export function HorizontalNonLinearStepperWithError() {
+ const classes = useStyles();
+ const [activeStep, setActiveStep] = React.useState(0);
+ const [skipped, setSkipped] = React.useState(new Set
+ {allStepsCompleted() ? (
+
+
+
+ All steps completed - you're finished
+
+
+
+ ) : (
+
+ {getStepContent(activeStep)}
+
+ )}
+
+
+
+ {activeStep !== steps.length &&
+ (completed[activeStep] ? (
+
+ Step {activeStep + 1} already completed
+
+ ) : (
+
+ ))}
+
+
+
+ {steps.map((label, index) => {
+ const stepProps: { completed?: boolean } = {};
+ const labelProps: { optional?: React.ReactNode; error?: boolean } = {};
+ if (isStepOptional(index)) {
+ labelProps.optional = (
+
+ Alert message
+
+ );
+ }
+ if (isStepFailed(index)) {
+ labelProps.error = true;
+ }
+ if (isStepSkipped(index)) {
+ stepProps.completed = false;
+ }
+ return (
+
+ {label}
+
+ );
+ })}
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|steppers|HorizontalNonLinearStepperWithError.stories"
+};
diff --git a/examples/storybook/stories/material-ui/steppers/ProgressMobileStepper.stories.tsx b/examples/storybook/stories/material-ui/steppers/ProgressMobileStepper.stories.tsx
new file mode 100644
index 00000000000000..fd8dcb2c8492c2
--- /dev/null
+++ b/examples/storybook/stories/material-ui/steppers/ProgressMobileStepper.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import MobileStepper from '@material-ui/core/MobileStepper';
+import Button from '@material-ui/core/Button';
+import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
+import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
+
+const useStyles = makeStyles({
+ root: {
+ maxWidth: 400,
+ flexGrow: 1,
+ },
+});
+
+export function ProgressMobileStepper() {
+ const classes = useStyles();
+ const theme = useTheme();
+ const [activeStep, setActiveStep] = React.useState(0);
+
+ const handleNext = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
+ };
+
+ const handleBack = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep - 1);
+ };
+
+ return (
+
+ {activeStep === steps.length ? (
+
+
+
+ All steps completed - you're finished
+
+
+
+ ) : (
+
+ {getStepContent(activeStep)}
+
+ )}
+
+
+ {isStepOptional(activeStep) && (
+
+ )}
+
+
+
+
+ {tutorialSteps[activeStep].label}
+
+ ![{tutorialSteps[activeStep].label}]({tutorialSteps[activeStep].imgPath})
+
+ Next
+ {theme.direction === 'rtl' ?
+ );
+}
+
+export default {
+ title: "Material-ui|steppers|TextMobileStepper.stories"
+};
diff --git a/examples/storybook/stories/material-ui/steppers/VerticalLinearStepper.stories.tsx b/examples/storybook/stories/material-ui/steppers/VerticalLinearStepper.stories.tsx
new file mode 100644
index 00000000000000..d06b901bf89b17
--- /dev/null
+++ b/examples/storybook/stories/material-ui/steppers/VerticalLinearStepper.stories.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
+import StepContent from '@material-ui/core/StepContent';
+import Button from '@material-ui/core/Button';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ width: '100%',
+ },
+ button: {
+ marginTop: theme.spacing(1),
+ marginRight: theme.spacing(1),
+ },
+ actionsContainer: {
+ marginBottom: theme.spacing(2),
+ },
+ resetContainer: {
+ padding: theme.spacing(3),
+ },
+ }),
+);
+
+function getSteps() {
+ return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
+}
+
+function getStepContent(step: number) {
+ switch (step) {
+ case 0:
+ return `For each ad campaign that you create, you can control how much
+ you're willing to spend on clicks and conversions, which networks
+ and geographical locations you want your ads to show on, and more.`;
+ case 1:
+ return 'An ad group contains one or more ads which target a shared set of keywords.';
+ case 2:
+ return `Try out different ad text to see what brings in the most customers,
+ and learn how to enhance your ads using features like ad extensions.
+ If you run into any problems with your ads, find out how to tell if
+ they're running and how to resolve approval issues.`;
+ default:
+ return 'Unknown step';
+ }
+}
+
+export function VerticalLinearStepper() {
+ const classes = useStyles();
+ const [activeStep, setActiveStep] = React.useState(0);
+ const steps = getSteps();
+
+ const handleNext = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
+ };
+
+ const handleBack = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep - 1);
+ };
+
+ const handleReset = () => {
+ setActiveStep(0);
+ };
+
+ return (
+
+
+ {steps.map((label, index) => (
+
+ {label}
+
+ {getStepContent(index)}
+
+
+ ))}
+
+ {activeStep === steps.length && (
+
+ All steps completed - you're finished
+
+
+ )}
+
+ );
+}
+
+export default {
+ title: "Material-ui|steppers|VerticalLinearStepper.stories"
+};
diff --git a/examples/storybook/stories/material-ui/switches/CustomizedSwitches.stories.tsx b/examples/storybook/stories/material-ui/switches/CustomizedSwitches.stories.tsx
new file mode 100644
index 00000000000000..850a4c35de03f7
--- /dev/null
+++ b/examples/storybook/stories/material-ui/switches/CustomizedSwitches.stories.tsx
@@ -0,0 +1,159 @@
+import React from 'react';
+import { withStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { purple } from '@material-ui/core/colors';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch, { SwitchClassKey, SwitchProps } from '@material-ui/core/Switch';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+
+interface Styles extends Partial
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|switches|Switches.stories"
+};
diff --git a/examples/storybook/stories/material-ui/switches/SwitchesGroup.stories.tsx b/examples/storybook/stories/material-ui/switches/SwitchesGroup.stories.tsx
new file mode 100644
index 00000000000000..7a813340bfd1a5
--- /dev/null
+++ b/examples/storybook/stories/material-ui/switches/SwitchesGroup.stories.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Switch from '@material-ui/core/Switch';
+
+export function SwitchesGroup() {
+ const [state, setState] = React.useState({
+ gilad: true,
+ jason: false,
+ antoine: true,
+ });
+
+ const handleChange = (event: React.ChangeEvent
+
+ {theme.direction === 'rtl' ?
+
+ {theme.direction === 'rtl' ?
+ = Math.ceil(count / rowsPerPage) - 1}
+ aria-label="next page"
+ >
+ {theme.direction === 'rtl' ?
+ = Math.ceil(count / rowsPerPage) - 1}
+ aria-label="last page"
+ >
+ {theme.direction === 'rtl' ?
+
+ );
+}
+
+function createData(name: string, calories: number, fat: number) {
+ return { name, calories, fat };
+}
+
+const rows = [
+ createData('Cupcake', 305, 3.7),
+ createData('Donut', 452, 25.0),
+ createData('Eclair', 262, 16.0),
+ createData('Frozen yoghurt', 159, 6.0),
+ createData('Gingerbread', 356, 16.0),
+ createData('Honeycomb', 408, 3.2),
+ createData('Ice cream sandwich', 237, 9.0),
+ createData('Jelly Bean', 375, 0.0),
+ createData('KitKat', 518, 26.0),
+ createData('Lollipop', 392, 0.2),
+ createData('Marshmallow', 318, 0),
+ createData('Nougat', 360, 19.0),
+ createData('Oreo', 437, 18.0),
+].sort((a, b) => (a.calories < b.calories ? -1 : 1));
+
+const useStyles2 = makeStyles({
+ table: {
+ minWidth: 500,
+ },
+});
+
+export function CustomPaginationActionsTable() {
+ const classes = useStyles2();
+ const [page, setPage] = React.useState(0);
+ const [rowsPerPage, setRowsPerPage] = React.useState(5);
+
+ const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
+
+ const handleChangePage = (event: React.MouseEvent
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tables|EnhancedTable.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tables/MaterialTableDemo.stories.tsx b/examples/storybook/stories/material-ui/tables/MaterialTableDemo.stories.tsx
new file mode 100644
index 00000000000000..d5c4811891b829
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tables/MaterialTableDemo.stories.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import MaterialTable, { Column } from 'material-table';
+
+interface Row {
+ name: string;
+ surname: string;
+ birthYear: number;
+ birthCity: number;
+}
+
+interface TableState {
+ columns: Array
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+}
+
+interface DemoTabsProps {
+ labelId: string;
+ onChange: (event: unknown, value: number) => void;
+ selectionFollowsFocus?: boolean;
+ value: number;
+}
+function DemoTabs(props: DemoTabsProps) {
+ const { labelId, onChange, selectionFollowsFocus, value } = props;
+
+ return (
+
+
+ Tabs where selection follows focus
+
+
+ Tabs where each tab needs to be selected manually
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tabs|AccessibleTabs.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tabs/CenteredTabs.stories.tsx b/examples/storybook/stories/material-ui/tabs/CenteredTabs.stories.tsx
new file mode 100644
index 00000000000000..a457352c5e34e7
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tabs/CenteredTabs.stories.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+
+const useStyles = makeStyles({
+ root: {
+ flexGrow: 1,
+ },
+});
+
+export function CenteredTabs() {
+ const classes = useStyles();
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tabs|CustomizedTabs.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tabs/DisabledTabs.stories.tsx b/examples/storybook/stories/material-ui/tabs/DisabledTabs.stories.tsx
new file mode 100644
index 00000000000000..a8b944e368a61f
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tabs/DisabledTabs.stories.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import Paper from '@material-ui/core/Paper';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+
+export function DisabledTabs() {
+ const [value, setValue] = React.useState(2);
+
+ const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+}
+
+function a11yProps(index: any) {
+ return {
+ id: `full-width-tab-${index}`,
+ 'aria-controls': `full-width-tabpanel-${index}`,
+ };
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+ root: {
+ backgroundColor: theme.palette.background.paper,
+ width: 500,
+ },
+}));
+
+export function FullWidthTabs() {
+ const classes = useStyles();
+ const theme = useTheme();
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+ setValue(newValue);
+ };
+
+ const handleChangeIndex = (index: number) => {
+ setValue(index);
+ };
+
+ return (
+
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tabs|FullWidthTabs.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tabs/IconLabelTabs.stories.tsx b/examples/storybook/stories/material-ui/tabs/IconLabelTabs.stories.tsx
new file mode 100644
index 00000000000000..b541b36c0c0dd6
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tabs/IconLabelTabs.stories.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import Paper from '@material-ui/core/Paper';
+import { makeStyles } from '@material-ui/core/styles';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import PhoneIcon from '@material-ui/icons/Phone';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import PersonPinIcon from '@material-ui/icons/PersonPin';
+
+const useStyles = makeStyles({
+ root: {
+ flexGrow: 1,
+ maxWidth: 500,
+ },
+});
+
+export function IconLabelTabs() {
+ const classes = useStyles();
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+
+
+
+
+ Item One
+ Item Two
+ Item Three
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tabs|LabTabs.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tabs/NavTabs.stories.tsx b/examples/storybook/stories/material-ui/tabs/NavTabs.stories.tsx
new file mode 100644
index 00000000000000..0e5a90f914bc8a
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tabs/NavTabs.stories.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+interface TabPanelProps {
+ children?: React.ReactNode;
+ index: any;
+ value: any;
+}
+
+function TabPanel(props: TabPanelProps) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ );
+}
+
+function a11yProps(index: any) {
+ return {
+ id: `nav-tab-${index}`,
+ 'aria-controls': `nav-tabpanel-${index}`,
+ };
+}
+
+interface LinkTabProps {
+ label?: string;
+ href?: string;
+}
+
+function LinkTab(props: LinkTabProps) {
+ return (
+
+
+
+
+
+
+ Page One
+
+
+ Page Two
+
+
+ Page Three
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tabs|NavTabs.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tabs/ScrollableTabsButtonAuto.stories.tsx b/examples/storybook/stories/material-ui/tabs/ScrollableTabsButtonAuto.stories.tsx
new file mode 100644
index 00000000000000..9d020f21111083
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tabs/ScrollableTabsButtonAuto.stories.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+interface TabPanelProps {
+ children?: React.ReactNode;
+ index: any;
+ value: any;
+}
+
+function TabPanel(props: TabPanelProps) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+}
+
+function a11yProps(index: any) {
+ return {
+ id: `scrollable-auto-tab-${index}`,
+ 'aria-controls': `scrollable-auto-tabpanel-${index}`,
+ };
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+ root: {
+ flexGrow: 1,
+ width: '100%',
+ backgroundColor: theme.palette.background.paper,
+ },
+}));
+
+export function ScrollableTabsButtonAuto() {
+ const classes = useStyles();
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+ Item Four
+
+
+ Item Five
+
+
+ Item Six
+
+
+ Item Seven
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tabs|ScrollableTabsButtonAuto.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tabs/ScrollableTabsButtonForce.stories.tsx b/examples/storybook/stories/material-ui/tabs/ScrollableTabsButtonForce.stories.tsx
new file mode 100644
index 00000000000000..4525a82b0473e0
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tabs/ScrollableTabsButtonForce.stories.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import PhoneIcon from '@material-ui/icons/Phone';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import PersonPinIcon from '@material-ui/icons/PersonPin';
+import HelpIcon from '@material-ui/icons/Help';
+import ShoppingBasket from '@material-ui/icons/ShoppingBasket';
+import ThumbDown from '@material-ui/icons/ThumbDown';
+import ThumbUp from '@material-ui/icons/ThumbUp';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+interface TabPanelProps {
+ children?: React.ReactNode;
+ index: any;
+ value: any;
+}
+
+function TabPanel(props: TabPanelProps) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+}
+
+function a11yProps(index: any) {
+ return {
+ id: `scrollable-force-tab-${index}`,
+ 'aria-controls': `scrollable-force-tabpanel-${index}`,
+ };
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+ root: {
+ flexGrow: 1,
+ width: '100%',
+ backgroundColor: theme.palette.background.paper,
+ },
+}));
+
+export function ScrollableTabsButtonForce() {
+ const classes = useStyles();
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+ Item Four
+
+
+ Item Five
+
+
+ Item Six
+
+
+ Item Seven
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tabs|ScrollableTabsButtonForce.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tabs/ScrollableTabsButtonPrevent.stories.tsx b/examples/storybook/stories/material-ui/tabs/ScrollableTabsButtonPrevent.stories.tsx
new file mode 100644
index 00000000000000..eabd1443794ffc
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tabs/ScrollableTabsButtonPrevent.stories.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import PhoneIcon from '@material-ui/icons/Phone';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import PersonPinIcon from '@material-ui/icons/PersonPin';
+import HelpIcon from '@material-ui/icons/Help';
+import ShoppingBasket from '@material-ui/icons/ShoppingBasket';
+import ThumbDown from '@material-ui/icons/ThumbDown';
+import ThumbUp from '@material-ui/icons/ThumbUp';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+interface TabPanelProps {
+ children?: React.ReactNode;
+ index: any;
+ value: any;
+}
+
+function TabPanel(props: TabPanelProps) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+}
+
+function a11yProps(index: any) {
+ return {
+ id: `scrollable-prevent-tab-${index}`,
+ 'aria-controls': `scrollable-prevent-tabpanel-${index}`,
+ };
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+ root: {
+ flexGrow: 1,
+ width: '100%',
+ backgroundColor: theme.palette.background.paper,
+ },
+}));
+
+export function ScrollableTabsButtonPrevent() {
+ const classes = useStyles();
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+ Item Four
+
+
+ Item Five
+
+
+ Item Six
+
+
+ Item Seven
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tabs|ScrollableTabsButtonPrevent.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tabs/SimpleTabs.stories.tsx b/examples/storybook/stories/material-ui/tabs/SimpleTabs.stories.tsx
new file mode 100644
index 00000000000000..0e0477edd130ba
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tabs/SimpleTabs.stories.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+interface TabPanelProps {
+ children?: React.ReactNode;
+ index: any;
+ value: any;
+}
+
+function TabPanel(props: TabPanelProps) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+}
+
+function a11yProps(index: any) {
+ return {
+ id: `simple-tab-${index}`,
+ 'aria-controls': `simple-tabpanel-${index}`,
+ };
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+ root: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.paper,
+ },
+}));
+
+export function SimpleTabs() {
+ const classes = useStyles();
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tabs|SimpleTabs.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tabs/TabsWrappedLabel.stories.tsx b/examples/storybook/stories/material-ui/tabs/TabsWrappedLabel.stories.tsx
new file mode 100644
index 00000000000000..09432ab0b5b2ad
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tabs/TabsWrappedLabel.stories.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+interface TabPanelProps {
+ children?: React.ReactNode;
+ index: any;
+ value: any;
+}
+
+function TabPanel(props: TabPanelProps) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+}
+
+function a11yProps(index: any) {
+ return {
+ id: `wrapped-tab-${index}`,
+ 'aria-controls': `wrapped-tabpanel-${index}`,
+ };
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+ root: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.paper,
+ },
+}));
+
+export function TabsWrappedLabel() {
+ const classes = useStyles();
+ const [value, setValue] = React.useState('one');
+
+ const handleChange = (event: React.ChangeEvent<{}>, newValue: string) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tabs|TabsWrappedLabel.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tabs/VerticalTabs.stories.tsx b/examples/storybook/stories/material-ui/tabs/VerticalTabs.stories.tsx
new file mode 100644
index 00000000000000..a96be0baf55bff
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tabs/VerticalTabs.stories.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+interface TabPanelProps {
+ children?: React.ReactNode;
+ index: any;
+ value: any;
+}
+
+function TabPanel(props: TabPanelProps) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+}
+
+function a11yProps(index: any) {
+ return {
+ id: `vertical-tab-${index}`,
+ 'aria-controls': `vertical-tabpanel-${index}`,
+ };
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+ root: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.paper,
+ display: 'flex',
+ height: 224,
+ },
+ tabs: {
+ borderRight: `1px solid ${theme.palette.divider}`,
+ },
+}));
+
+export function VerticalTabs() {
+ const classes = useStyles();
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
+
+ Item Four
+
+
+ Item Five
+
+
+ Item Six
+
+
+ Item Seven
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tabs|VerticalTabs.stories"
+};
diff --git a/examples/storybook/stories/material-ui/text-fields/BasicTextFields.stories.tsx b/examples/storybook/stories/material-ui/text-fields/BasicTextFields.stories.tsx
new file mode 100644
index 00000000000000..40c252b2830c42
--- /dev/null
+++ b/examples/storybook/stories/material-ui/text-fields/BasicTextFields.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ width: '25ch',
+ },
+ },
+ }),
+);
+
+export function BasicTextFields() {
+ const classes = useStyles();
+
+ return (
+
+ );
+}
+
+export default {
+ title: "Material-ui|text-fields|BasicTextFields.stories"
+};
diff --git a/examples/storybook/stories/material-ui/text-fields/ColorTextFields.stories.tsx b/examples/storybook/stories/material-ui/text-fields/ColorTextFields.stories.tsx
new file mode 100644
index 00000000000000..76c968d057fc6a
--- /dev/null
+++ b/examples/storybook/stories/material-ui/text-fields/ColorTextFields.stories.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ width: '25ch',
+ },
+ },
+ }),
+);
+
+export function ColorTextFields() {
+ const classes = useStyles();
+
+ return (
+
+ );
+}
+
+export default {
+ title: "Material-ui|text-fields|ColorTextFields.stories"
+};
diff --git a/examples/storybook/stories/material-ui/text-fields/ComposedTextField.stories.tsx b/examples/storybook/stories/material-ui/text-fields/ComposedTextField.stories.tsx
new file mode 100644
index 00000000000000..d91af0b93bacb0
--- /dev/null
+++ b/examples/storybook/stories/material-ui/text-fields/ComposedTextField.stories.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import FilledInput from '@material-ui/core/FilledInput';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ }),
+);
+
+export function ComposedTextField() {
+ const [name, setName] = React.useState('Composed TextField');
+ const classes = useStyles();
+
+ const handleChange = (event: React.ChangeEvent
+
+ react-text-mask
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|text-fields|FormattedInputs.stories"
+};
diff --git a/examples/storybook/stories/material-ui/text-fields/InputAdornments.stories.tsx b/examples/storybook/stories/material-ui/text-fields/InputAdornments.stories.tsx
new file mode 100644
index 00000000000000..40b911eec22898
--- /dev/null
+++ b/examples/storybook/stories/material-ui/text-fields/InputAdornments.stories.tsx
@@ -0,0 +1,235 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import Input from '@material-ui/core/Input';
+import FilledInput from '@material-ui/core/FilledInput';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import InputLabel from '@material-ui/core/InputLabel';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@material-ui/core/FormControl';
+import TextField from '@material-ui/core/TextField';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+ margin: {
+ margin: theme.spacing(1),
+ },
+ withoutLabel: {
+ marginTop: theme.spacing(3),
+ },
+ textField: {
+ width: '25ch',
+ },
+ }),
+);
+
+interface State {
+ amount: string;
+ password: string;
+ weight: string;
+ weightRange: string;
+ showPassword: boolean;
+}
+
+export function InputAdornments() {
+ const classes = useStyles();
+ const [values, setValues] = React.useState
+
+ );
+}
+
+export default {
+ title: "Material-ui|text-fields|InputAdornments.stories"
+};
diff --git a/examples/storybook/stories/material-ui/text-fields/InputWithIcon.stories.tsx b/examples/storybook/stories/material-ui/text-fields/InputWithIcon.stories.tsx
new file mode 100644
index 00000000000000..e6ab56aa6b8cb9
--- /dev/null
+++ b/examples/storybook/stories/material-ui/text-fields/InputWithIcon.stories.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import FormControl from '@material-ui/core/FormControl';
+import TextField from '@material-ui/core/TextField';
+import Grid from '@material-ui/core/Grid';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ margin: {
+ margin: theme.spacing(1),
+ },
+ }),
+);
+
+export function InputWithIcon() {
+ const classes = useStyles();
+
+ return (
+
+ Kg,
+ }}
+ />
+
+ Kg}
+ aria-describedby="standard-weight-helper-text"
+ inputProps={{
+ 'aria-label': 'weight',
+ }}
+ />
+ Weight
+
+
+ Password
+
+
+ {values.showPassword ?
+
+ }
+ />
+
+
+ Amount
+ $}
+ />
+
+
+
+ Kg,
+ }}
+ variant="filled"
+ />
+
+ Kg}
+ aria-describedby="filled-weight-helper-text"
+ inputProps={{
+ 'aria-label': 'weight',
+ }}
+ />
+ Weight
+
+
+ Password
+
+
+ {values.showPassword ?
+
+ }
+ />
+
+
+ Amount
+ $}
+ />
+
+
+
+ Kg,
+ }}
+ variant="outlined"
+ />
+
+ Kg}
+ aria-describedby="outlined-weight-helper-text"
+ inputProps={{
+ 'aria-label': 'weight',
+ }}
+ labelWidth={0}
+ />
+ Weight
+
+
+ Password
+
+
+ {values.showPassword ?
+
+ }
+ labelWidth={70}
+ />
+
+
+ Amount
+ $}
+ labelWidth={60}
+ />
+
+
+
+
+ With a start adornment
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|text-fields|InputWithIcon.stories"
+};
diff --git a/examples/storybook/stories/material-ui/text-fields/Inputs.stories.tsx b/examples/storybook/stories/material-ui/text-fields/Inputs.stories.tsx
new file mode 100644
index 00000000000000..9032a8979b239f
--- /dev/null
+++ b/examples/storybook/stories/material-ui/text-fields/Inputs.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Input from '@material-ui/core/Input';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ },
+ },
+ }),
+);
+
+export function Inputs() {
+ const classes = useStyles();
+
+ return (
+
+ );
+}
+
+export default {
+ title: "Material-ui|text-fields|Inputs.stories"
+};
diff --git a/examples/storybook/stories/material-ui/text-fields/LayoutTextFields.stories.tsx b/examples/storybook/stories/material-ui/text-fields/LayoutTextFields.stories.tsx
new file mode 100644
index 00000000000000..f3ff3231c08e4f
--- /dev/null
+++ b/examples/storybook/stories/material-ui/text-fields/LayoutTextFields.stories.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+ textField: {
+ marginLeft: theme.spacing(1),
+ marginRight: theme.spacing(1),
+ width: '25ch',
+ },
+ }),
+);
+
+export function LayoutTextFields() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|text-fields|LayoutTextFields.stories"
+};
diff --git a/examples/storybook/stories/material-ui/text-fields/MultilineTextFields.stories.tsx b/examples/storybook/stories/material-ui/text-fields/MultilineTextFields.stories.tsx
new file mode 100644
index 00000000000000..3d9c1abb7d5192
--- /dev/null
+++ b/examples/storybook/stories/material-ui/text-fields/MultilineTextFields.stories.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& .MuiTextField-root': {
+ margin: theme.spacing(1),
+ width: '25ch',
+ },
+ },
+ }),
+);
+
+export function MultilineTextFields() {
+ const classes = useStyles();
+ const [value, setValue] = React.useState('Controlled');
+
+ const handleChange = (event: React.ChangeEvent
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|toggle-button|CustomizedDividers.stories"
+};
diff --git a/examples/storybook/stories/material-ui/toggle-button/StandaloneToggleButton.stories.tsx b/examples/storybook/stories/material-ui/toggle-button/StandaloneToggleButton.stories.tsx
new file mode 100644
index 00000000000000..dfc9414a5f208d
--- /dev/null
+++ b/examples/storybook/stories/material-ui/toggle-button/StandaloneToggleButton.stories.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import CheckIcon from '@material-ui/icons/Check';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+
+export function StandaloneToggleButton() {
+ const [selected, setSelected] = React.useState(false);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tooltip with HTML
+ {"And here's"} {'some'} {'amazing content'}.{' '}
+ {"It's very engaging. Right?"}
+
+ }
+ >
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tooltips|CustomizedTooltips.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tooltips/DelayTooltips.stories.tsx b/examples/storybook/stories/material-ui/tooltips/DelayTooltips.stories.tsx
new file mode 100644
index 00000000000000..601d12c5dae71f
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tooltips/DelayTooltips.stories.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+
+export function DelayTooltips() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tooltips|PositionedTooltips.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tooltips/SimpleTooltips.stories.tsx b/examples/storybook/stories/material-ui/tooltips/SimpleTooltips.stories.tsx
new file mode 100644
index 00000000000000..a065bdd1d57221
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tooltips/SimpleTooltips.stories.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import AddIcon from '@material-ui/icons/Add';
+import Fab from '@material-ui/core/Fab';
+import DeleteIcon from '@material-ui/icons/Delete';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ fab: {
+ margin: theme.spacing(2),
+ },
+ absolute: {
+ position: 'absolute',
+ bottom: theme.spacing(2),
+ right: theme.spacing(3),
+ },
+ }),
+);
+
+export function SimpleTooltips() {
+ const classes = useStyles();
+
+ return (
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tooltips|SimpleTooltips.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tooltips/TransitionsTooltips.stories.tsx b/examples/storybook/stories/material-ui/tooltips/TransitionsTooltips.stories.tsx
new file mode 100644
index 00000000000000..224dc493d93f79
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tooltips/TransitionsTooltips.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+import Fade from '@material-ui/core/Fade';
+import Zoom from '@material-ui/core/Zoom';
+
+export function TransitionsTooltips() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tooltips|TransitionsTooltips.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tooltips/TriggersTooltips.stories.tsx b/examples/storybook/stories/material-ui/tooltips/TriggersTooltips.stories.tsx
new file mode 100644
index 00000000000000..7500837cc8cdc4
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tooltips/TriggersTooltips.stories.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+
+export function TriggersTooltips() {
+ const [open, setOpen] = React.useState(false);
+
+ const handleTooltipClose = () => {
+ setOpen(false);
+ };
+
+ const handleTooltipOpen = () => {
+ setOpen(true);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tooltips|TriggersTooltips.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tooltips/VariableWidth.stories.tsx b/examples/storybook/stories/material-ui/tooltips/VariableWidth.stories.tsx
new file mode 100644
index 00000000000000..b696e9f525eb9e
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tooltips/VariableWidth.stories.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ button: {
+ margin: theme.spacing(1),
+ },
+ customWidth: {
+ maxWidth: 500,
+ },
+ noMaxWidth: {
+ maxWidth: 'none',
+ },
+ }),
+);
+
+const longText = `
+Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus.
+Praesent non nunc mollis, fermentum neque at, semper arcu.
+Nullam eget est sed sem iaculis gravida eget vitae justo.
+`;
+
+export function VariableWidth() {
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|tooltips|VariableWidth.stories"
+};
diff --git a/examples/storybook/stories/material-ui/transfer-list/SelectAllTransferList.stories.tsx b/examples/storybook/stories/material-ui/transfer-list/SelectAllTransferList.stories.tsx
new file mode 100644
index 00000000000000..1b89c6ddd4832e
--- /dev/null
+++ b/examples/storybook/stories/material-ui/transfer-list/SelectAllTransferList.stories.tsx
@@ -0,0 +1,164 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import List from '@material-ui/core/List';
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import Checkbox from '@material-ui/core/Checkbox';
+import Button from '@material-ui/core/Button';
+import Divider from '@material-ui/core/Divider';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ margin: 'auto',
+ },
+ cardHeader: {
+ padding: theme.spacing(1, 2),
+ },
+ list: {
+ width: 200,
+ height: 230,
+ backgroundColor: theme.palette.background.paper,
+ overflow: 'auto',
+ },
+ button: {
+ margin: theme.spacing(0.5, 0),
+ },
+ }),
+);
+
+function not(a: number[], b: number[]) {
+ return a.filter((value) => b.indexOf(value) === -1);
+}
+
+function intersection(a: number[], b: number[]) {
+ return a.filter((value) => b.indexOf(value) !== -1);
+}
+
+function union(a: number[], b: number[]) {
+ return [...a, ...not(b, a)];
+}
+
+export function TransferList() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState-
+ {items.map((value: number) => {
+ const labelId = `transfer-list-all-item-${value}-label`;
+
+ return (
+
-
+ {items.map((value: number) => {
+ const labelId = `transfer-list-item-${value}-label`;
+
+ return (
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|transitions|SimpleCollapse.stories"
+};
diff --git a/examples/storybook/stories/material-ui/transitions/SimpleFade.stories.tsx b/examples/storybook/stories/material-ui/transitions/SimpleFade.stories.tsx
new file mode 100644
index 00000000000000..6be08438f735e9
--- /dev/null
+++ b/examples/storybook/stories/material-ui/transitions/SimpleFade.stories.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import Paper from '@material-ui/core/Paper';
+import Fade from '@material-ui/core/Fade';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ height: 180,
+ },
+ container: {
+ display: 'flex',
+ },
+ paper: {
+ margin: theme.spacing(1),
+ },
+ svg: {
+ width: 100,
+ height: 100,
+ },
+ polygon: {
+ fill: theme.palette.common.white,
+ stroke: theme.palette.divider,
+ strokeWidth: 1,
+ },
+ }),
+);
+
+export function SimpleFade() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState(false);
+
+ const handleChange = () => {
+ setChecked((prev) => !prev);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|transitions|SimpleFade.stories"
+};
diff --git a/examples/storybook/stories/material-ui/transitions/SimpleGrow.stories.tsx b/examples/storybook/stories/material-ui/transitions/SimpleGrow.stories.tsx
new file mode 100644
index 00000000000000..253a0e78ff8950
--- /dev/null
+++ b/examples/storybook/stories/material-ui/transitions/SimpleGrow.stories.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import Paper from '@material-ui/core/Paper';
+import Grow from '@material-ui/core/Grow';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ height: 180,
+ },
+ container: {
+ display: 'flex',
+ },
+ paper: {
+ margin: theme.spacing(1),
+ },
+ svg: {
+ width: 100,
+ height: 100,
+ },
+ polygon: {
+ fill: theme.palette.common.white,
+ stroke: theme.palette.divider,
+ strokeWidth: 1,
+ },
+ }),
+);
+
+export function SimpleGrow() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState(false);
+
+ const handleChange = () => {
+ setChecked((prev) => !prev);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|transitions|SimpleGrow.stories"
+};
diff --git a/examples/storybook/stories/material-ui/transitions/SimpleSlide.stories.tsx b/examples/storybook/stories/material-ui/transitions/SimpleSlide.stories.tsx
new file mode 100644
index 00000000000000..12fab8b51c24e3
--- /dev/null
+++ b/examples/storybook/stories/material-ui/transitions/SimpleSlide.stories.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import Switch from '@material-ui/core/Switch';
+import Paper from '@material-ui/core/Paper';
+import Slide from '@material-ui/core/Slide';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ height: 180,
+ },
+ wrapper: {
+ width: 100 + theme.spacing(2),
+ },
+ paper: {
+ zIndex: 1,
+ position: 'relative',
+ margin: theme.spacing(1),
+ },
+ svg: {
+ width: 100,
+ height: 100,
+ },
+ polygon: {
+ fill: theme.palette.common.white,
+ stroke: theme.palette.divider,
+ strokeWidth: 1,
+ },
+ }),
+);
+
+export function SimpleSlide() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState(false);
+
+ const handleChange = () => {
+ setChecked((prev) => !prev);
+ };
+
+ return (
+
+
+
+
+
+
+ {/* Conditionally applies the timeout prop to change the entry speed. */}
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|transitions|SimpleSlide.stories"
+};
diff --git a/examples/storybook/stories/material-ui/transitions/SimpleZoom.stories.tsx b/examples/storybook/stories/material-ui/transitions/SimpleZoom.stories.tsx
new file mode 100644
index 00000000000000..085da280fc0675
--- /dev/null
+++ b/examples/storybook/stories/material-ui/transitions/SimpleZoom.stories.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import Switch from '@material-ui/core/Switch';
+import Paper from '@material-ui/core/Paper';
+import Zoom from '@material-ui/core/Zoom';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ height: 180,
+ },
+ container: {
+ display: 'flex',
+ },
+ paper: {
+ margin: theme.spacing(1),
+ },
+ svg: {
+ width: 100,
+ height: 100,
+ },
+ polygon: {
+ fill: theme.palette.common.white,
+ stroke: theme.palette.divider,
+ strokeWidth: 1,
+ },
+ }),
+);
+
+export function SimpleZoom() {
+ const classes = useStyles();
+ const [checked, setChecked] = React.useState(false);
+
+ const handleChange = () => {
+ setChecked((prev) => !prev);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|transitions|SimpleZoom.stories"
+};
diff --git a/examples/storybook/stories/material-ui/tree-view/ControlledTreeView.stories.tsx b/examples/storybook/stories/material-ui/tree-view/ControlledTreeView.stories.tsx
new file mode 100644
index 00000000000000..6d57e0e76e49c0
--- /dev/null
+++ b/examples/storybook/stories/material-ui/tree-view/ControlledTreeView.stories.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TreeView from '@material-ui/lab/TreeView';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeItem from '@material-ui/lab/TreeItem';
+
+const useStyles = makeStyles({
+ root: {
+ height: 216,
+ flexGrow: 1,
+ maxWidth: 400,
+ },
+});
+
+export function ControlledTreeView() {
+ const classes = useStyles();
+ const [expanded, setExpanded] = React.useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+ h1. Heading
+
+
+ h2. Heading
+
+
+ h3. Heading
+
+
+ h4. Heading
+
+
+ h5. Heading
+
+
+ h6. Heading
+
+
+ subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
+
+
+ subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
+
+
+ body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
+ unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam
+ dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
+
+
+ body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
+ unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam
+ dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
+
+
+ button text
+
+
+ caption text
+
+
+ overline text
+
+
+ );
+}
+
+export default {
+ title: "Material-ui|typography|Types.stories"
+};
diff --git a/examples/storybook/stories/material-ui/typography/TypographyTheme.stories.tsx b/examples/storybook/stories/material-ui/typography/TypographyTheme.stories.tsx
new file mode 100644
index 00000000000000..e404836c4a28bd
--- /dev/null
+++ b/examples/storybook/stories/material-ui/typography/TypographyTheme.stories.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ ...theme.typography.button,
+ backgroundColor: theme.palette.background.paper,
+ padding: theme.spacing(1),
+ },
+ }),
+);
+
+export function TypographyTheme() {
+ const classes = useStyles();
+
+ return {"This div's text looks like that of a button."}
;
+}
+
+export default {
+ title: "Material-ui|typography|TypographyTheme.stories"
+};
diff --git a/examples/storybook/stories/material-ui/use-media-query/JavaScriptMedia.stories.tsx b/examples/storybook/stories/material-ui/use-media-query/JavaScriptMedia.stories.tsx
new file mode 100644
index 00000000000000..4a8a5ef1729c9a
--- /dev/null
+++ b/examples/storybook/stories/material-ui/use-media-query/JavaScriptMedia.stories.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import json2mq from 'json2mq';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+export function JavaScriptMedia() {
+ const matches = useMediaQuery(
+ json2mq({
+ minWidth: 600,
+ }),
+ );
+
+ return {`{ minWidth: 600 } matches: ${matches}`};
+}
+
+export default {
+ title: "Material-ui|use-media-query|JavaScriptMedia.stories"
+};
diff --git a/examples/storybook/stories/material-ui/use-media-query/ServerSide.stories.tsx b/examples/storybook/stories/material-ui/use-media-query/ServerSide.stories.tsx
new file mode 100644
index 00000000000000..1e89e108d33622
--- /dev/null
+++ b/examples/storybook/stories/material-ui/use-media-query/ServerSide.stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import mediaQuery from 'css-mediaquery';
+import { ThemeProvider, Theme } from '@material-ui/core/styles';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+function MyComponent() {
+ const matches = useMediaQuery('(min-width:600px)');
+
+ return {`(min-width:600px) matches: ${matches}`};
+}
+
+export function ServerSide() {
+ const ssrMatchMedia = (query: string) => ({
+ matches: mediaQuery.match(query, {
+ // The estimated CSS width of the browser.
+ width: 800,
+ }),
+ });
+
+ return (
+