[Typography] Add inherit and screen reader only

docs/src/pages/style/icons/icons.md

@@ -159,22 +159,14 @@ We add the `aria-hidden=true` attribute so that your icons are properly accessib
 
 If your icons have semantic meaning, you need to provide a text alternative only visible to assisitive technologies.
 
-```css
-.sr-only {
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-}
-```
-
 ```jsx
-import Icon from '@material-ui/core/IconButton';
+import Icon from '@material-ui/core/Icon';
+import Typography from '@material-ui/core/Typography';
 
 // ...
 
 <Icon>add_circle</Icon>
-<span className="sr-only">Create a user</span>
+<Typography variant="srOnly">Create a user</Typography>
 ```
 
 ### Reference

packages/material-ui/src/Backdrop/Backdrop.js

@@ -29,7 +29,7 @@ function Backdrop(props) {
   const { classes, className, invisible, open, transitionDuration, ...other } = props;
 
   return (
-    <Fade appear in={open} timeout={transitionDuration} {...other}>
+    <Fade in={open} timeout={transitionDuration} {...other}>
       <div
         data-mui-test="Backdrop"
         className={classNames(

packages/material-ui/src/Modal/isOverflowing.js

@@ -6,7 +6,7 @@ export function isBody(node) {
   return node && node.tagName.toLowerCase() === 'body';
 }
 
-// Do we have a scroll bar?
+// Do we have a veritcal scroll bar?
 export default function isOverflowing(container) {
   const doc = ownerDocument(container);
   const win = ownerWindow(doc);

packages/material-ui/src/Typography/Typography.d.ts

@@ -1,17 +1,19 @@
 import * as React from 'react';
 import { StandardProps, PropTypes } from '..';
-import { Style, TextStyle } from '../styles/createTypography';
+import { ThemeStyle } from '../styles/createTypography';
+
+type Style = ThemeStyle | 'srOnly';
 
 export interface TypographyProps
   extends StandardProps<React.HTMLAttributes<HTMLElement>, TypographyClassKey> {
   align?: PropTypes.Alignment;
   color?: PropTypes.Color | 'textPrimary' | 'textSecondary' | 'error';
   component?: React.ReactType<TypographyProps>;
   gutterBottom?: boolean;
-  headlineMapping?: { [type in TextStyle]: string };
+  headlineMapping?: { [type in Style]: string };
   noWrap?: boolean;
   paragraph?: boolean;
-  variant?: Style | 'caption' | 'button';
+  variant?: Style | 'inherit';
 }
 
 export type TypographyClassKey =
@@ -27,6 +29,7 @@ export type TypographyClassKey =
   | 'body1'
   | 'caption'
   | 'button'
+  | 'srOnly'
   | 'alignLeft'
   | 'alignCenter'
   | 'alignRight'

packages/material-ui/src/Typography/Typography.js

@@ -32,6 +32,13 @@ export const styles = theme => ({
   caption: theme.typography.caption,
   /* Styles applied to the root element if `variant="button"`. */
   button: theme.typography.button,
+  /* Styles applied to the root element if `variant="srOnly"`. Only targets the screen readers. */
+  srOnly: {
+    position: 'absolute',
+    height: 1,
+    width: 1,
+    overflow: 'hidden',
+  },
   /* Styles applied to the root element if `align="left"`. */
   alignLeft: {
     textAlign: 'left',
@@ -105,8 +112,8 @@ function Typography(props) {
 
   const className = classNames(
     classes.root,
-    classes[variant],
     {
+      [classes[variant]]: variant !== 'inherit',
       [classes[`color${capitalize(color)}`]]: color !== 'default',
       [classes.noWrap]: noWrap,
       [classes.gutterBottom]: gutterBottom,
@@ -190,6 +197,8 @@ Typography.propTypes = {
     'body1',
     'caption',
     'button',
+    'srOnly',
+    'inherit',
   ]),
 };
 

packages/material-ui/src/styles/createTypography.d.ts

@@ -2,7 +2,7 @@ import { Palette } from './createPalette';
 import { Overwrite, Omit } from '..';
 import { CSSProperties } from './withStyles';
 
-export type TextStyle =
+export type ThemeStyle =
   | 'display1'
   | 'display2'
   | 'display3'
@@ -12,9 +12,8 @@ export type TextStyle =
   | 'subheading'
   | 'body1'
   | 'body2'
-  | 'caption';
-
-export type Style = TextStyle | 'button';
+  | 'caption'
+  | 'button';
 
 export interface FontStyle
   extends Required<{
@@ -41,10 +40,13 @@ export interface TypographyUtils {
   pxToRem: (px: number) => string;
 }
 
-export interface Typography extends Record<Style, TypographyStyle>, FontStyle, TypographyUtils {}
+export interface Typography
+  extends Record<ThemeStyle, TypographyStyle>,
+    FontStyle,
+    TypographyUtils {}
 
 export interface TypographyOptions
-  extends Partial<Record<Style, TypographyStyleOptions> & FontStyleOptions> {}
+  extends Partial<Record<ThemeStyle, TypographyStyleOptions> & FontStyleOptions> {}
 
 export default function createTypography(
   palette: Palette,

pages/api/typography.md

@@ -28,7 +28,7 @@ import Typography from '@material-ui/core/Typography';
 | <span class="prop-name">headlineMapping</span> | <span class="prop-type">object | <span class="prop-default">{  display4: 'h1',  display3: 'h1',  display2: 'h1',  display1: 'h1',  headline: 'h1',  title: 'h2',  subheading: 'h3',  body2: 'aside',  body1: 'p',}</span> | We are empirically mapping the variant property to a range of different DOM element types. For instance, h1 to h6. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `component` property. |
 | <span class="prop-name">noWrap</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the text will not wrap, but instead will truncate with an ellipsis. |
 | <span class="prop-name">paragraph</span> | <span class="prop-type">bool | <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">enum:&nbsp;'display4', 'display3', 'display2', 'display1', 'headline', 'title', 'subheading', 'body2', 'body1', 'caption', 'button'<br> | <span class="prop-default">'body1'</span> | Applies the theme typography styles. |
+| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'display4', 'display3', 'display2', 'display1', 'headline', 'title', 'subheading', 'body2', 'body1', 'caption', 'button', 'srOnly', 'inherit'<br> | <span class="prop-default">'body1'</span> | Applies the theme typography styles. |
 
 Any other properties supplied will be spread to the root element (native element).
 
@@ -52,6 +52,7 @@ This property accepts the following keys:
 | <span class="prop-name">body1</span> | Styles applied to the root element if `variant="body1"`.
 | <span class="prop-name">caption</span> | Styles applied to the root element if `variant="caption"`.
 | <span class="prop-name">button</span> | Styles applied to the root element if `variant="button"`.
+| <span class="prop-name">srOnly</span> | Styles applied to the root element if `variant="srOnly"`. Only targets the screen readers.
 | <span class="prop-name">alignLeft</span> | Styles applied to the root element if `align="left"`.
 | <span class="prop-name">alignCenter</span> | Styles applied to the root element if `align="center"`.
 | <span class="prop-name">alignRight</span> | Styles applied to the root element if `align="right"`.