[system] Introduce visuallyHidden style utility

docs/pages/api-docs/rating.md

@@ -59,7 +59,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">readOnly</span> | <span class="prop-name">.MuiRating-readOnly</span> | Styles applied to the root element if `readOnly={true}`.
 | <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
 | <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the root element if keyboard focused.
-| <span class="prop-name">visuallyhidden</span> | <span class="prop-name">.MuiRating-visuallyhidden</span> | Visually hide an element.
+| <span class="prop-name">visuallyHidden</span> | <span class="prop-name">.MuiRating-visuallyHidden</span> | Visually hide an element.
 | <span class="prop-name">pristine</span> | <span class="prop-name">.MuiRating-pristine</span> | Styles applied to the pristine label.
 | <span class="prop-name">label</span> | <span class="prop-name">.MuiRating-label</span> | Styles applied to the label elements.
 | <span class="prop-name">icon</span> | <span class="prop-name">.MuiRating-icon</span> | Styles applied to the icon wrapping elements.

docs/pages/api-docs/typography.md

@@ -37,7 +37,7 @@ The `MuiTypography` name can be used for providing [default props](/customizatio
 | <span class="prop-name">gutterBottom</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the text will have a bottom margin. |
 | <span class="prop-name">noWrap</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.<br>Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow). |
 | <span class="prop-name">paragraph</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the text will have a bottom margin. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'h1'<br>&#124;&nbsp;'h2'<br>&#124;&nbsp;'h3'<br>&#124;&nbsp;'h4'<br>&#124;&nbsp;'h5'<br>&#124;&nbsp;'h6'<br>&#124;&nbsp;'subtitle1'<br>&#124;&nbsp;'subtitle2'<br>&#124;&nbsp;'body1'<br>&#124;&nbsp;'body2'<br>&#124;&nbsp;'caption'<br>&#124;&nbsp;'button'<br>&#124;&nbsp;'overline'<br>&#124;&nbsp;'srOnly'<br>&#124;&nbsp;'inherit'</span> | <span class="prop-default">'body1'</span> | Applies the theme typography styles. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'h1'<br>&#124;&nbsp;'h2'<br>&#124;&nbsp;'h3'<br>&#124;&nbsp;'h4'<br>&#124;&nbsp;'h5'<br>&#124;&nbsp;'h6'<br>&#124;&nbsp;'subtitle1'<br>&#124;&nbsp;'subtitle2'<br>&#124;&nbsp;'body1'<br>&#124;&nbsp;'body2'<br>&#124;&nbsp;'caption'<br>&#124;&nbsp;'button'<br>&#124;&nbsp;'overline'<br>&#124;&nbsp;'inherit'</span> | <span class="prop-default">'body1'</span> | Applies the theme typography styles. |
 | <span class="prop-name">variantMapping</span> | <span class="prop-type">object</span> | <span class="prop-default">{  h1: 'h1',  h2: 'h2',  h3: 'h3',  h4: 'h4',  h5: 'h5',  h6: 'h6',  subtitle1: 'h6',  subtitle2: 'h6',  body1: 'p',  body2: 'p',}</span> | The component maps the variant prop to a range of different HTML element types. For instance, subtitle1 to `<h6>`. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `component` prop. |
 
 The `ref` is forwarded to the root element.
@@ -62,7 +62,6 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">subtitle1</span> | <span class="prop-name">.MuiTypography-subtitle1</span> | Styles applied to the root element if `variant="subtitle1"`.
 | <span class="prop-name">subtitle2</span> | <span class="prop-name">.MuiTypography-subtitle2</span> | Styles applied to the root element if `variant="subtitle2"`.
 | <span class="prop-name">overline</span> | <span class="prop-name">.MuiTypography-overline</span> | Styles applied to the root element if `variant="overline"`.
-| <span class="prop-name">srOnly</span> | <span class="prop-name">.MuiTypography-srOnly</span> | Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers.
 | <span class="prop-name">alignLeft</span> | <span class="prop-name">.MuiTypography-alignLeft</span> | Styles applied to the root element if `align="left"`.
 | <span class="prop-name">alignCenter</span> | <span class="prop-name">.MuiTypography-alignCenter</span> | Styles applied to the root element if `align="center"`.
 | <span class="prop-name">alignRight</span> | <span class="prop-name">.MuiTypography-alignRight</span> | Styles applied to the root element if `align="right"`.

docs/pages/components/visually-hidden.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'components/visually-hidden';
+const requireDemo = require.context(
+  'docs/src/pages/components/visually-hidden',
+  false,
+  /\.(js|tsx)$/,
+);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/visually-hidden',
+  false,
+  /\.(js|md|tsx)$/,
+);
+
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/system/visually-hidden.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'system/visually-hidden';
+const requireDemo = require.context('docs/src/pages/system/visually-hidden', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/system/visually-hidden',
+  false,
+  /\.(js|md|tsx)$/,
+);
+
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/src/pages.js

@@ -151,6 +151,7 @@ const pages = [
       { pathname: '/system/sizing' },
       { pathname: '/system/spacing' },
       { pathname: '/system/typography' },
+      { pathname: '/system/visually-hidden' },
       { pathname: '/system/api', title: 'API' },
     ],
   },

docs/src/pages/components/icons/icons-de.md

@@ -217,12 +217,15 @@ Wenn Ihre Symbole eine semantische Bedeutung haben, müssen Sie eine Textalterna
 
 ```jsx
 import Icon from '@material-ui/core/Icon';
-import Typography from '@material-ui/core/Typography';
+import { visuallyHidden } from '@material-ui/system';
+import { makeStyles } from '@material-ui/core/styles';
+
+const classes = makeStyles({ visuallyHidden })();
 
 // ...
 
 <Icon>add_circle</Icon>
-<Typography variant="srOnly">Erstellen Sie einen Benutzer</Typography>
+<span className={classes.visuallyHidden}>Erstellen Sie einen Benutzer</span>
 ```
 
 ### Referenz

docs/src/pages/components/icons/icons-es.md

@@ -217,12 +217,15 @@ Si los iconos tienen significado semántico, se necesita proporcionar una altern
 
 ```jsx
 import Icon from '@material-ui/core/Icon';
-import Typography from '@material-ui/core/Typography';
+import { visuallyHidden } from '@material-ui/system';
+import { makeStyles } from '@material-ui/core/styles';
+
+const classes = makeStyles({ visuallyHidden })();
 
 // ...
 
 <Icon>add_circle</Icon>
-<Typography variant="srOnly">Crear ususario</Typography>
+<span className={classes.visuallyHidden}>Crear ususario</span>
 ```
 
 ### Referencia

docs/src/pages/components/icons/icons-fr.md

@@ -217,12 +217,15 @@ Si vos icônes ont un sens sémantique, vous devez fournir une alternative textu
 
 ```jsx
 import Icon from '@material-ui/core/Icon';
-import Typography from '@material-ui/core/Typography';
+import { visuallyHidden } from '@material-ui/system';
+import { makeStyles } from '@material-ui/core/styles';
+
+const classes = makeStyles({ visuallyHidden })();
 
 // ...
 
 <Icon>add_circle</Icon>
-<Typography variant="srOnly">Créez un utilisateur</Typography>
+<span className={classes.visuallyHidden}>Créez un utilisateur</span>
 ```
 
 ### Référence

docs/src/pages/components/icons/icons-ja.md

@@ -217,12 +217,15 @@ import SvgIcon from '@material-ui/core/SvgIcon';
 
 ```jsx
 import Icon from '@material-ui/core/Icon';
-import Typography from '@material-ui/core/Typography';
+import { visuallyHidden } from '@material-ui/system';
+import { makeStyles } from '@material-ui/core/styles';
+
+const classes = makeStyles({ visuallyHidden })();
 
 // ...
 
 <Icon>add_circle</Icon>
-<Typography variant="srOnly">Create a user</Typography>
+<span className={classes.visuallyHidden}>Create a user</span>
 ```
 
 ### リファレンス

docs/src/pages/components/icons/icons-pt.md

@@ -217,12 +217,15 @@ Se os seus ícones tiverem significado semântico, você precisará fornecer uma
 
 ```jsx
 import Icon from '@material-ui/core/Icon';
-import Typography from '@material-ui/core/Typography';
+import { visuallyHidden } from '@material-ui/system';
+import { makeStyles } from '@material-ui/core/styles';
+
+const classes = makeStyles({ visuallyHidden })();
 
 // ...
 
 <Icon>add_circle</Icon>
-<Typography variant="srOnly">Crie um usuário</Typography>
+<span className={classes.visuallyHidden}>Crie um usuário</span>
 ```
 
 ### Referência

docs/src/pages/components/icons/icons-ru.md

@@ -217,12 +217,15 @@ If your icons are purely decorative, you’re already done! The `aria-hidden=tru
 
 ```jsx
 import Icon from '@material-ui/core/Icon';
-import Typography from '@material-ui/core/Typography';
+import { visuallyHidden } from '@material-ui/system';
+import { makeStyles } from '@material-ui/core/styles';
+
+const classes = makeStyles({ visuallyHidden })();
 
 // ...
 
 <Icon>add_circle</Icon>
-<Typography variant="srOnly">Создать пользователя</Typography>
+<span className={classes.visuallyHidden}>Создать пользователя</span>
 ```
 
 ### Справка

docs/src/pages/components/icons/icons-zh.md

@@ -217,12 +217,15 @@ import SvgIcon from '@material-ui/core/SvgIcon';
 
 ```jsx
 import Icon from '@material-ui/core/Icon';
-import Typography from '@material-ui/core/Typography';
+import { visuallyHidden } from '@material-ui/system';
+import { makeStyles } from '@material-ui/core/styles';
+
+const classes = makeStyles({ visuallyHidden })();
 
 // ...
 
 <Icon>add_circle</Icon>
-<Typography variant="srOnly">创建一个用户</Typography>
+<span className={classes.visuallyHidden}>创建一个用户</span>
 ```
 
 ### 参考

docs/src/pages/components/icons/icons.md

@@ -236,12 +236,15 @@ If your icons have semantic meaning, you need to provide a text alternative only
 
 ```jsx
 import Icon from '@material-ui/core/Icon';
-import Typography from '@material-ui/core/Typography';
+import { visuallyHidden } from '@material-ui/system';
+import { makeStyles } from '@material-ui/core/styles';
+
+const classes = makeStyles({ visuallyHidden })();
 
 // ...
 
 <Icon>add_circle</Icon>
-<Typography variant="srOnly">Create a user</Typography>
+<span className={classes.visuallyHidden}>Create a user</span>
 ```
 
 ### Reference

docs/src/pages/components/tables/EnhancedTable.js

@@ -20,6 +20,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import DeleteIcon from '@material-ui/icons/Delete';
 import FilterListIcon from '@material-ui/icons/FilterList';
+import { visuallyHidden } from '@material-ui/system';
 
 function createData(name, calories, fat, carbs, protein) {
   return { name, calories, fat, carbs, protein };
@@ -200,17 +201,7 @@ const useStyles = makeStyles((theme) => ({
   table: {
     minWidth: 750,
   },
-  visuallyHidden: {
-    border: 0,
-    clip: 'rect(0 0 0 0)',
-    height: 1,
-    margin: -1,
-    overflow: 'hidden',
-    padding: 0,
-    position: 'absolute',
-    top: 20,
-    width: 1,
-  },
+  visuallyHidden,
 }));
 
 export default function EnhancedTable() {

docs/src/pages/components/tables/EnhancedTable.tsx

@@ -19,6 +19,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import DeleteIcon from '@material-ui/icons/Delete';
 import FilterListIcon from '@material-ui/icons/FilterList';
+import { visuallyHidden } from '@material-ui/system';
 
 interface Data {
   calories: number;
@@ -227,17 +228,7 @@ const useStyles = makeStyles((theme: Theme) =>
     table: {
       minWidth: 750,
     },
-    visuallyHidden: {
-      border: 0,
-      clip: 'rect(0 0 0 0)',
-      height: 1,
-      margin: -1,
-      overflow: 'hidden',
-      padding: 0,
-      position: 'absolute',
-      top: 20,
-      width: 1,
-    },
+    visuallyHidden,
   }),
 );
 

docs/src/pages/system/visually-hidden/VisuallyHiddenUsage.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { visuallyHidden } from '@material-ui/system';
+import { makeStyles } from '@material-ui/core/styles';
+import ThumbUpIcon from '@material-ui/icons/ThumbUp';
+import EmojiEmotionsIcon from '@material-ui/icons/EmojiEmotions';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+
+const useStyles = makeStyles((theme) => ({
+  root: { 
+    border: 'none',
+    color: 'grey',
+    '& label': { marginRight: 10, cursor: 'pointer' }
+  },
+  selected: {
+    color: theme.palette.primary.main,
+  },
+  visuallyHidden,
+}));
+
+export default function VisuallyHiddenUsage() {
+  const classes = useStyles();
+  const [ selected, setSelected ] = React.useState('like');
+
+  return (
+    <fieldset className={classes.root}>
+      <label className={selected === 'like' ? classes.selected : ''}>
+        <ThumbUpIcon onClick={() => setSelected('like')}/>
+        <span className={classes.visuallyHidden}>Like</span>
+      </label>
+      <input type="radio" value="like" className={classes.visuallyHidden} checked={selected === 'like'} />
+      <label className={selected === 'smile' ? classes.selected : ''}>
+        <EmojiEmotionsIcon onClick={() => setSelected('smile')} />
+        <span className={classes.visuallyHidden}>Like</span>
+      </label>
+      <input type="radio" value="smile" className={classes.visuallyHidden} checked={selected === 'smile'} />
+      <label className={selected === 'love' ? classes.selected : ''}>
+        <FavoriteIcon onClick={() => setSelected('love')} />
+        <span className={classes.visuallyHidden}>Like</span>
+      </label>
+      <input type="radio" value="love" className={classes.visuallyHidden} checked={selected === 'love'} />
+    </fieldset>
+  );
+}

docs/src/pages/system/visually-hidden/VisuallyHiddenUsage.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { visuallyHidden } from '@material-ui/system';
+import { makeStyles } from '@material-ui/core/styles';
+import ThumbUpIcon from '@material-ui/icons/ThumbUp';
+import EmojiEmotionsIcon from '@material-ui/icons/EmojiEmotions';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+
+const useStyles = makeStyles((theme) => ({
+  root: { 
+    border: 'none',
+    color: 'grey',
+    '& label': { marginRight: 10 }
+  },
+  selected: {
+    color: theme.palette.primary.main,
+  },
+  visuallyHidden,
+}));
+
+export default function VisuallyHiddenUsage() {
+  const classes = useStyles();
+  const [ selected, setSelected ] = React.useState('like');
+
+  return (
+    <fieldset className={classes.root}>
+      <label className={selected === 'like' ? classes.selected : ''}>
+        <ThumbUpIcon onClick={() => setSelected('like')}/>
+        <span className={classes.visuallyHidden}>Like</span>
+      </label>
+      <input type="radio" value="like" className={classes.visuallyHidden} checked={selected === 'like'} />
+      <label className={selected === 'smile' ? classes.selected : ''}>
+        <EmojiEmotionsIcon onClick={() => setSelected('smile')} />
+        <span className={classes.visuallyHidden}>Like</span>
+      </label>
+      <input type="radio" value="smile" className={classes.visuallyHidden} checked={selected === 'smile'} />
+      <label className={selected === 'love' ? classes.selected : ''}>
+        <FavoriteIcon onClick={() => setSelected('love')} />
+        <span className={classes.visuallyHidden}>Like</span>
+      </label>
+      <input type="radio" value="love" className={classes.visuallyHidden} checked={selected === 'love'} />
+    </fieldset>
+  );
+}

docs/src/pages/system/visually-hidden/visually-hidden.md

@@ -0,0 +1,9 @@
+# Visually hidden elements
+
+<p class="description">The visually hidden style utility provides a common mechanism for hidings elements visually, but making them available for the assistive technology.</p>
+
+## Usage
+
+The inputs and the icons in the example are accompined with text which is available only to the screen readers.
+
+{{"demo": "pages/system/visually-hidden/VisuallyHiddenUsage.js"}}

framer/Material-UI.framerfx/code/Typography.tsx

@@ -29,7 +29,6 @@ interface Props {
     | 'caption'
     | 'button'
     | 'overline'
-    | 'srOnly'
     | 'inherit';
   label?: string;
   width?: number;
@@ -93,7 +92,6 @@ addPropertyControls(Typography, {
       'caption',
       'button',
       'overline',
-      'srOnly',
       'inherit',
     ],
   },