[ToggleButton] Move from lab to core

docs/pages/api-docs/toggle-button-group.md

@@ -1,5 +1,5 @@
 ---
-filename: /packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
+filename: /packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
@@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
 ## Import
 
 ```js
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 // or
-import { ToggleButtonGroup } from '@material-ui/lab';
+import { ToggleButtonGroup } from '@material-ui/core';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
@@ -56,7 +56,7 @@ You can override the style of the component thanks to one of these customization
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js) for more detail.
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js) for more detail.
 
 ## Demos
 

docs/pages/api-docs/toggle-button.md

@@ -1,5 +1,5 @@
 ---
-filename: /packages/material-ui-lab/src/ToggleButton/ToggleButton.js
+filename: /packages/material-ui/src/ToggleButton/ToggleButton.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
@@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/ToggleButton/ToggleButton.js
 ## Import
 
 ```js
-import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButton from '@material-ui/core/ToggleButton';
 // or
-import { ToggleButton } from '@material-ui/lab';
+import { ToggleButton } from '@material-ui/core';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
@@ -58,7 +58,7 @@ You can override the style of the component thanks to one of these customization
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/ToggleButton/ToggleButton.js) for more detail.
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ToggleButton/ToggleButton.js) for more detail.
 
 ## Inheritance
 

docs/src/pages.js

@@ -39,12 +39,13 @@ const pages = [
           { pathname: '/components/floating-action-button' },
           { pathname: '/components/pickers', title: 'Date / Time' },
           { pathname: '/components/radio-buttons' },
+          { pathname: '/components/rating' },
           { pathname: '/components/selects' },
           { pathname: '/components/slider' },
-          { pathname: '/components/rating' },
           { pathname: '/components/switches' },
           { pathname: '/components/text-fields' },
           { pathname: '/components/transfer-list' },
+          { pathname: '/components/toggle-button' },
         ],
       },
       {
@@ -126,7 +127,6 @@ const pages = [
           { pathname: '/components/rating' },
           { pathname: '/components/slider-styled' },
           { pathname: '/components/timeline' },
-          { pathname: '/components/toggle-button' },
           { pathname: '/components/trap-focus' },
           { pathname: '/components/tree-view' },
         ],

docs/src/pages/components/toggle-button/CustomizedDividers.js

@@ -11,8 +11,8 @@ import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import Divider from '@material-ui/core/Divider';
 import Paper from '@material-ui/core/Paper';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 const useStyles = makeStyles((theme) => ({
   paper: {

docs/src/pages/components/toggle-button/CustomizedDividers.tsx

@@ -16,8 +16,8 @@ import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import Divider from '@material-ui/core/Divider';
 import Paper from '@material-ui/core/Paper';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

docs/src/pages/components/toggle-button/StandaloneToggleButton.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import CheckIcon from '@material-ui/icons/Check';
-import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButton from '@material-ui/core/ToggleButton';
 
 export default function StandaloneToggleButton() {
   const [selected, setSelected] = React.useState(false);

docs/src/pages/components/toggle-button/StandaloneToggleButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import CheckIcon from '@material-ui/icons/Check';
-import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButton from '@material-ui/core/ToggleButton';
 
 export default function StandaloneToggleButton() {
   const [selected, setSelected] = React.useState(false);

docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js

@@ -8,8 +8,8 @@ import LaptopIcon from '@material-ui/icons/Laptop';
 import TvIcon from '@material-ui/icons/Tv';
 import PhoneAndroidIcon from '@material-ui/icons/PhoneAndroid';
 import Grid from '@material-ui/core/Grid';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 const useStyles = makeStyles((theme) => ({
   toggleContainer: {

docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx

@@ -8,8 +8,8 @@ import LaptopIcon from '@material-ui/icons/Laptop';
 import TvIcon from '@material-ui/icons/Tv';
 import PhoneAndroidIcon from '@material-ui/icons/PhoneAndroid';
 import Grid from '@material-ui/core/Grid';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 const useStyles = makeStyles((theme) => ({
   toggleContainer: {

docs/src/pages/components/toggle-button/ToggleButtonSizes.js

@@ -4,8 +4,8 @@ import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
 import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
 import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
 import Grid from '@material-ui/core/Grid';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function ToggleButtonSizes() {
   const [alignment, setAlignment] = React.useState('left');

docs/src/pages/components/toggle-button/ToggleButtonSizes.tsx

@@ -4,8 +4,8 @@ import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
 import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
 import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
 import Grid from '@material-ui/core/Grid';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function ToggleButtonSizes() {
   const [alignment, setAlignment] = React.useState('left');

docs/src/pages/components/toggle-button/ToggleButtons.js

@@ -3,8 +3,8 @@ import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
 import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
 import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
 import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function ToggleButtons() {
   const [alignment, setAlignment] = React.useState('left');

docs/src/pages/components/toggle-button/ToggleButtons.tsx

@@ -3,8 +3,8 @@ import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
 import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
 import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
 import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function ToggleButtons() {
   const [alignment, setAlignment] = React.useState<string | null>('left');

docs/src/pages/components/toggle-button/ToggleButtonsMultiple.js

@@ -4,8 +4,8 @@ import FormatItalicIcon from '@material-ui/icons/FormatItalic';
 import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';
 import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function ToggleButtonsMultiple() {
   const [formats, setFormats] = React.useState(() => ['bold', 'italic']);

docs/src/pages/components/toggle-button/ToggleButtonsMultiple.tsx

@@ -4,8 +4,8 @@ import FormatItalicIcon from '@material-ui/icons/FormatItalic';
 import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';
 import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function ToggleButtonsMultiple() {
   const [formats, setFormats] = React.useState(() => ['bold', 'italic']);

docs/src/pages/components/toggle-button/VerticalToggleButtons.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import ViewListIcon from '@material-ui/icons/ViewList';
 import ViewModuleIcon from '@material-ui/icons/ViewModule';
 import ViewQuiltIcon from '@material-ui/icons/ViewQuilt';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function VerticalToggleButtons() {
   const [view, setView] = React.useState('list');

docs/src/pages/components/toggle-button/VerticalToggleButtons.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import ViewListIcon from '@material-ui/icons/ViewList';
 import ViewModuleIcon from '@material-ui/icons/ViewModule';
 import ViewQuiltIcon from '@material-ui/icons/ViewQuilt';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function VerticalToggleButtons() {
   const [view, setView] = React.useState('list');

docs/src/pages/components/toggle-button/toggle-button.md

@@ -3,7 +3,6 @@ title: Toggle Button React component
 components: ToggleButton, ToggleButtonGroup
 githubLabel: 'component: ToggleButton'
 materialDesign: https://material.io/components/buttons#toggle-button
-packageName: '@material-ui/lab'
 ---
 
 # Toggle Buttons
@@ -18,31 +17,33 @@ The `ToggleButtonGroup` controls the selected state of its child buttons when gi
 
 ## Exclusive selection
 
-Text justification toggle buttons present options for left, right, center, full, and justified text with only one item available for selection at a time.
-Selecting one option deselects any other.
+With exclusive selection, selecting one option deselects any other.
+
+In this example text justification toggle buttons present options for left, center, right, and fully justified text (disabled), with only one item available for selection at a time.
 
 {{"demo": "pages/components/toggle-button/ToggleButtons.js"}}
 
 ## Multiple selection
 
-Logically-grouped options, like bold, italic, and underline, allow multiple options to be selected.
+Multiple selection allows for logically-grouped options, like bold, italic, and underline, to have multiple options selected.
 
 {{"demo": "pages/components/toggle-button/ToggleButtonsMultiple.js"}}
 
 ## Sizes
 
-Fancy larger or smaller buttons? Use the `size` prop.
+For larger or smaller buttons use the `size` prop.
 
 {{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
 
 ## Vertical buttons
 
+The buttons can be stacked vertically with the `orientation` prop set to "vertical".
+
 {{"demo": "pages/components/toggle-button/VerticalToggleButtons.js"}}
 
 ## Enforce value set
 
-If you want to enforce at least one button to be active, you can adapt your handleChange
-function.
+If you want to enforce that at least one button must be active, you can adapt your handleChange function.
 
 ```jsx
 const handleFormat = (event, newFormats) => {
@@ -73,5 +74,11 @@ Here is an example of customizing the component. You can learn more about this i
 
 ## Accessibility
 
+### ARIA
+
 - ToggleButtonGroup has `role="group"`. You should provide an accessible label with `aria-label="label"`, `aria-labelledby="id"` or `<label>`.
 - ToggleButton sets `aria-pressed="<bool>"` according to the button state. You should label each button with `aria-label`.
+
+### Keyboard
+
+At present, toggle buttons are in DOM order. Navigate between them with the tab key. The button behavior follows standard keyboard semantics.

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -748,6 +748,17 @@ const theme = createMuitheme({
   +<TextareAutosize minRows={1}>
   ```
 
+### ToggleButton
+
+- Move the component from the lab to the core. The component is now stable.
+
+  ```diff
+  -import ToggleButton from '@material-ui/lab/ToggleButton';
+  -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+  +import ToggleButton from '@material-ui/core/ToggleButton';
+  +import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
+  ```
+
 ### Typography
 
 - Replace the `srOnly` prop so as to not duplicate the capabilities of [System](https://material-ui.com/system/basics/):

packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts

@@ -1,79 +1,2 @@
-import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '@material-ui/core/ButtonBase';
-import { OverrideProps } from '@material-ui/core/OverridableComponent';
-
-export type ToggleButtonTypeMap<
-  P = {},
-  D extends React.ElementType = 'button'
-> = ExtendButtonBaseTypeMap<{
-  props: P & {
-    /**
-     * The content of the button.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: {
-      /** Styles applied to the root element. */
-      root?: string;
-      /** Pseudo-class applied to the root element if `disabled={true}`. */
-      disabled?: string;
-      /** Pseudo-class applied to the root element if `selected={true}`. */
-      selected?: string;
-      /** Styles applied to the `label` wrapper element. */
-      label?: string;
-      /** Styles applied to the root element if `size="small"`. */
-      sizeSmall?: string;
-      /** Styles applied to the root element if `size="large"`. */
-      sizeLarge?: string;
-    };
-    /**
-     * If `true`, the button will be disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the  keyboard focus ripple will be disabled.
-     * @default false
-     */
-    disableFocusRipple?: boolean;
-    /**
-     * If `true`, the button will be rendered in an active state.
-     */
-    selected?: boolean;
-    /**
-     * The size of the button.
-     * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * The value to associate with the button when selected in a
-     * ToggleButtonGroup.
-     */
-    value: NonNullable<unknown>;
-  };
-  defaultComponent: D;
-}>;
-
-/**
- *
- * Demos:
- *
- * - [Toggle Button](https://material-ui.com/components/toggle-button/)
- *
- * API:
- *
- * - [ToggleButton API](https://material-ui.com/api/toggle-button/)
- * - inherits [ButtonBase API](https://material-ui.com/api/button-base/)
- */
-declare const ToggleButton: ExtendButtonBase<ToggleButtonTypeMap>;
-
-export type ToggleButtonProps<
-  D extends React.ElementType = ToggleButtonTypeMap['defaultComponent'],
-  P = {}
-> = OverrideProps<ToggleButtonTypeMap<P, D>, D>;
-
-export type ToggleButtonClassKey = keyof NonNullable<ToggleButtonTypeMap['props']['classes']>;
-
-export default ToggleButton;
+export { default } from '@material-ui/core/ToggleButton';
+export * from '@material-ui/core/ToggleButton';

packages/material-ui-lab/src/ToggleButton/ToggleButton.js

@@ -1,177 +1,24 @@
-// @inheritedComponent ButtonBase
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { fade, withStyles } from '@material-ui/core/styles';
-import ButtonBase from '@material-ui/core/ButtonBase';
-import { capitalize } from '@material-ui/core/utils';
-
-export const styles = (theme) => ({
-  /* Styles applied to the root element. */
-  root: {
-    ...theme.typography.button,
-    borderRadius: theme.shape.borderRadius,
-    padding: 11,
-    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
-    color: fade(theme.palette.action.active, 0.38),
-    '&$selected': {
-      color: theme.palette.action.active,
-      backgroundColor: fade(theme.palette.action.active, 0.12),
-      '&:hover': {
-        backgroundColor: fade(theme.palette.action.active, 0.15),
-      },
-      '& + &': {
-        borderLeft: 0,
-        marginLeft: 0,
-      },
-    },
-    '&$disabled': {
-      color: fade(theme.palette.action.disabled, 0.12),
-    },
-    '&:hover': {
-      textDecoration: 'none',
-      // Reset on mouse devices
-      backgroundColor: fade(theme.palette.text.primary, 0.05),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
-      },
-    },
-  },
-  /* Pseudo-class applied to the root element if `disabled={true}`. */
-  disabled: {},
-  /* Pseudo-class applied to the root element if `selected={true}`. */
-  selected: {},
-  /* Styles applied to the `label` wrapper element. */
-  label: {
-    width: '100%', // Ensure the correct width for iOS Safari
-    display: 'inherit',
-    alignItems: 'inherit',
-    justifyContent: 'inherit',
-  },
-  /* Styles applied to the root element if `size="small"`. */
-  sizeSmall: {
-    padding: 7,
-    fontSize: theme.typography.pxToRem(13),
-  },
-  /* Styles applied to the root element if `size="large"`. */
-  sizeLarge: {
-    padding: 15,
-    fontSize: theme.typography.pxToRem(15),
-  },
+import React from 'react';
+import ToggleButton from '@material-ui/core/ToggleButton';
+
+let warnedOnce = false;
+
+/**
+ * @ignore - do not document.
+ */
+export default React.forwardRef(function DeprecatedToggleButton(props, ref) {
+  if (!warnedOnce) {
+    console.warn(
+      [
+        'Material-UI: The ToggleButton component was moved from the lab to the core.',
+        '',
+        "You should use `import { ToggleButton } from '@material-ui/core'`",
+        "or `import ToggleButton from '@material-ui/core/ToggleButton'`",
+      ].join('\n'),
+    );
+
+    warnedOnce = true;
+  }
+
+  return <ToggleButton ref={ref} {...props} />;
 });
-
-const ToggleButton = React.forwardRef(function ToggleButton(props, ref) {
-  const {
-    children,
-    classes,
-    className,
-    disabled = false,
-    disableFocusRipple = false,
-    onChange,
-    onClick,
-    selected,
-    size = 'medium',
-    value,
-    ...other
-  } = props;
-
-  const handleChange = (event) => {
-    if (onClick) {
-      onClick(event, value);
-      if (event.isDefaultPrevented()) {
-        return;
-      }
-    }
-
-    if (onChange) {
-      onChange(event, value);
-    }
-  };
-
-  return (
-    <ButtonBase
-      className={clsx(
-        classes.root,
-        {
-          [classes.disabled]: disabled,
-          [classes.selected]: selected,
-          [classes[`size${capitalize(size)}`]]: size !== 'medium',
-        },
-        className,
-      )}
-      disabled={disabled}
-      focusRipple={!disableFocusRipple}
-      ref={ref}
-      onClick={handleChange}
-      onChange={onChange}
-      value={value}
-      aria-pressed={selected}
-      {...other}
-    >
-      <span className={classes.label}>{children}</span>
-    </ButtonBase>
-  );
-});
-
-ToggleButton.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * The content of the button.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * If `true`, the button will be disabled.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, the  keyboard focus ripple will be disabled.
-   * @default false
-   */
-  disableFocusRipple: PropTypes.bool,
-  /**
-   * If `true`, the ripple effect will be disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `focusVisibleClassName`.
-   * @default false
-   */
-  disableRipple: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * If `true`, the button will be rendered in an active state.
-   */
-  selected: PropTypes.bool,
-  /**
-   * The size of the button.
-   * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
-   * @default 'medium'
-   */
-  size: PropTypes.oneOf(['large', 'medium', 'small']),
-  /**
-   * The value to associate with the button when selected in a
-   * ToggleButtonGroup.
-   */
-  value: PropTypes.any.isRequired,
-};
-
-export default withStyles(styles, { name: 'MuiToggleButton' })(ToggleButton);

packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -1,70 +1,2 @@
-import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '@material-ui/core';
-
-export interface ToggleButtonGroupProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
-  /**
-   * The content of the button.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: {
-    /** Styles applied to the root element. */
-    root?: string;
-    /** Styles applied to the root element if `orientation="vertical"`. */
-    vertical?: string;
-    /** Styles applied to the children. */
-    grouped?: string;
-    /** Styles applied to the children if `orientation="horizontal"`. */
-    groupedHorizontal?: string;
-    /** Styles applied to the children if `orientation="vertical"`. */
-    groupedVertical?: string;
-  };
-  /**
-   * If `true`, only allow one of the child ToggleButton values to be selected.
-   * @default false
-   */
-  exclusive?: boolean;
-  /**
-   * Callback fired when the value changes.
-   *
-   * @param {object} event The event source of the callback.
-   * @param {any} value of the selected buttons. When `exclusive` is true
-   * this is a single value; when false an array of selected values. If no value
-   * is selected and `exclusive` is true the value is null; when false an empty array.
-   */
-  onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
-  /**
-   * The group orientation (layout flow direction).
-   * @default 'horizontal'
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /**
-   * The size of the buttons.
-   * @default 'medium'
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * The currently selected value within the group or an array of selected
-   * values when `exclusive` is false.
-   *
-   * The value must have reference equality with the option in order to be selected.
-   */
-  value?: any;
-}
-
-export type ToggleButtonGroupClassKey = keyof NonNullable<ToggleButtonGroupProps['classes']>;
-
-/**
- *
- * Demos:
- *
- * - [Toggle Button](https://material-ui.com/components/toggle-button/)
- *
- * API:
- *
- * - [ToggleButtonGroup API](https://material-ui.com/api/toggle-button-group/)
- */
-export default function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element;
+export { default } from '@material-ui/core/ToggleButtonGroup';
+export * from '@material-ui/core/ToggleButtonGroup';

packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js

@@ -1,185 +1,24 @@
-import * as React from 'react';
-import { isFragment } from 'react-is';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
-import { capitalize } from '@material-ui/core/utils';
-import isValueSelected from './isValueSelected';
-
-export const styles = (theme) => ({
-  /* Styles applied to the root element. */
-  root: {
-    display: 'inline-flex',
-    borderRadius: theme.shape.borderRadius,
-  },
-  /* Styles applied to the root element if `orientation="vertical"`. */
-  vertical: {
-    flexDirection: 'column',
-  },
-  /* Styles applied to the children. */
-  grouped: {},
-  /* Styles applied to the children if `orientation="horizontal"`. */
-  groupedHorizontal: {
-    '&:not(:first-child)': {
-      marginLeft: -1,
-      borderLeft: '1px solid transparent',
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0,
-    },
-    '&:not(:last-child)': {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0,
-    },
-  },
-  /* Styles applied to the children if `orientation="vertical"`. */
-  groupedVertical: {
-    '&:not(:first-child)': {
-      marginTop: -1,
-      borderTop: '1px solid transparent',
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: 0,
-    },
-    '&:not(:last-child)': {
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-    },
-  },
-});
-
-const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup(props, ref) {
-  const {
-    children,
-    classes,
-    className,
-    exclusive = false,
-    onChange,
-    orientation = 'horizontal',
-    size = 'medium',
-    value,
-    ...other
-  } = props;
-
-  const handleChange = (event, buttonValue) => {
-    if (!onChange) {
-      return;
-    }
-
-    const index = value && value.indexOf(buttonValue);
-    let newValue;
-
-    if (value && index >= 0) {
-      newValue = value.slice();
-      newValue.splice(index, 1);
-    } else {
-      newValue = value ? value.concat(buttonValue) : [buttonValue];
-    }
-
-    onChange(event, newValue);
-  };
-
-  const handleExclusiveChange = (event, buttonValue) => {
-    if (!onChange) {
-      return;
-    }
-
-    onChange(event, value === buttonValue ? null : buttonValue);
-  };
-
-  return (
-    <div
-      role="group"
-      className={clsx(
-        classes.root,
-        {
-          [classes.vertical]: orientation === 'vertical',
-        },
-        className,
-      )}
-      ref={ref}
-      {...other}
-    >
-      {React.Children.map(children, (child) => {
-        if (!React.isValidElement(child)) {
-          return null;
-        }
-
-        if (process.env.NODE_ENV !== 'production') {
-          if (isFragment(child)) {
-            console.error(
-              [
-                "Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.",
-                'Consider providing an array instead.',
-              ].join('\n'),
-            );
-          }
-        }
-
-        return React.cloneElement(child, {
-          className: clsx(
-            classes.grouped,
-            classes[`grouped${capitalize(orientation)}`],
-            child.props.className,
-          ),
-          onChange: exclusive ? handleExclusiveChange : handleChange,
-          selected:
-            child.props.selected === undefined
-              ? isValueSelected(child.props.value, value)
-              : child.props.selected,
-          size: child.props.size || size,
-        });
-      })}
-    </div>
-  );
+import React from 'react';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
+
+let warnedOnce = false;
+
+/**
+ * @ignore - do not document.
+ */
+export default React.forwardRef(function DeprecatedToggleButtonGroup(props, ref) {
+  if (!warnedOnce) {
+    console.warn(
+      [
+        'Material-UI: The ToggleButtonGroup component was moved from the lab to the core.',
+        '',
+        "You should use `import { ToggleButtonGroup } from '@material-ui/core'`",
+        "or `import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup'`",
+      ].join('\n'),
+    );
+
+    warnedOnce = true;
+  }
+
+  return <ToggleButtonGroup ref={ref} {...props} />;
 });
-
-ToggleButtonGroup.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * The content of the button.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * If `true`, only allow one of the child ToggleButton values to be selected.
-   * @default false
-   */
-  exclusive: PropTypes.bool,
-  /**
-   * Callback fired when the value changes.
-   *
-   * @param {object} event The event source of the callback.
-   * @param {any} value of the selected buttons. When `exclusive` is true
-   * this is a single value; when false an array of selected values. If no value
-   * is selected and `exclusive` is true the value is null; when false an empty array.
-   */
-  onChange: PropTypes.func,
-  /**
-   * The group orientation (layout flow direction).
-   * @default 'horizontal'
-   */
-  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * The size of the buttons.
-   * @default 'medium'
-   */
-  size: PropTypes.oneOf(['large', 'medium', 'small']),
-  /**
-   * The currently selected value within the group or an array of selected
-   * values when `exclusive` is false.
-   *
-   * The value must have reference equality with the option in order to be selected.
-   */
-  value: PropTypes.any,
-};
-
-export default withStyles(styles, { name: 'MuiToggleButtonGroup' })(ToggleButtonGroup);

packages/material-ui-lab/src/themeAugmentation/components.d.ts

@@ -56,14 +56,6 @@ export interface LabComponents {
     defaultProps?: ComponentsProps['MuiTimelineSeparator'];
     styleOverrides?: ComponentsOverrides['MuiTimelineSeparator'];
   };
-  MuiToggleButton?: {
-    defaultProps?: ComponentsProps['MuiToggleButton'];
-    styleOverrides?: ComponentsOverrides['MuiToggleButton'];
-  };
-  MuiToggleButtonGroup?: {
-    defaultProps?: ComponentsProps['MuiToggleButtonGroup'];
-    styleOverrides?: ComponentsOverrides['MuiToggleButtonGroup'];
-  };
   MuiTreeItem?: {
     defaultProps?: ComponentsProps['MuiTreeItem'];
     styleOverrides?: ComponentsOverrides['MuiTreeItem'];

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

@@ -0,0 +1,79 @@
+import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
+import { OverrideProps } from '../OverridableComponent';
+
+export type ToggleButtonTypeMap<
+  P = {},
+  D extends React.ElementType = 'button'
+> = ExtendButtonBaseTypeMap<{
+  props: P & {
+    /**
+     * The content of the button.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: {
+      /** Styles applied to the root element. */
+      root?: string;
+      /** Pseudo-class applied to the root element if `disabled={true}`. */
+      disabled?: string;
+      /** Pseudo-class applied to the root element if `selected={true}`. */
+      selected?: string;
+      /** Styles applied to the `label` wrapper element. */
+      label?: string;
+      /** Styles applied to the root element if `size="small"`. */
+      sizeSmall?: string;
+      /** Styles applied to the root element if `size="large"`. */
+      sizeLarge?: string;
+    };
+    /**
+     * If `true`, the button will be disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the  keyboard focus ripple will be disabled.
+     * @default false
+     */
+    disableFocusRipple?: boolean;
+    /**
+     * If `true`, the button will be rendered in an active state.
+     */
+    selected?: boolean;
+    /**
+     * The size of the button.
+     * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The value to associate with the button when selected in a
+     * ToggleButtonGroup.
+     */
+    value: NonNullable<unknown>;
+  };
+  defaultComponent: D;
+}>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Toggle Button](https://material-ui.com/components/toggle-button/)
+ *
+ * API:
+ *
+ * - [ToggleButton API](https://material-ui.com/api/toggle-button/)
+ * - inherits [ButtonBase API](https://material-ui.com/api/button-base/)
+ */
+declare const ToggleButton: ExtendButtonBase<ToggleButtonTypeMap>;
+
+export type ToggleButtonProps<
+  D extends React.ElementType = ToggleButtonTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<ToggleButtonTypeMap<P, D>, D>;
+
+export type ToggleButtonClassKey = keyof NonNullable<ToggleButtonTypeMap['props']['classes']>;
+
+export default ToggleButton;

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

@@ -0,0 +1,177 @@
+// @inheritedComponent ButtonBase
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { fade, withStyles } from '../styles';
+import ButtonBase from '../ButtonBase';
+import { capitalize } from '../utils';
+
+export const styles = (theme) => ({
+  /* Styles applied to the root element. */
+  root: {
+    ...theme.typography.button,
+    borderRadius: theme.shape.borderRadius,
+    padding: 11,
+    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
+    color: fade(theme.palette.action.active, 0.38),
+    '&$selected': {
+      color: theme.palette.action.active,
+      backgroundColor: fade(theme.palette.action.active, 0.12),
+      '&:hover': {
+        backgroundColor: fade(theme.palette.action.active, 0.15),
+      },
+      '& + &': {
+        borderLeft: 0,
+        marginLeft: 0,
+      },
+    },
+    '&$disabled': {
+      color: fade(theme.palette.action.disabled, 0.12),
+    },
+    '&:hover': {
+      textDecoration: 'none',
+      // Reset on mouse devices
+      backgroundColor: fade(theme.palette.text.primary, 0.05),
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+  /* Pseudo-class applied to the root element if `disabled={true}`. */
+  disabled: {},
+  /* Pseudo-class applied to the root element if `selected={true}`. */
+  selected: {},
+  /* Styles applied to the `label` wrapper element. */
+  label: {
+    width: '100%', // Ensure the correct width for iOS Safari
+    display: 'inherit',
+    alignItems: 'inherit',
+    justifyContent: 'inherit',
+  },
+  /* Styles applied to the root element if `size="small"`. */
+  sizeSmall: {
+    padding: 7,
+    fontSize: theme.typography.pxToRem(13),
+  },
+  /* Styles applied to the root element if `size="large"`. */
+  sizeLarge: {
+    padding: 15,
+    fontSize: theme.typography.pxToRem(15),
+  },
+});
+
+const ToggleButton = React.forwardRef(function ToggleButton(props, ref) {
+  const {
+    children,
+    classes,
+    className,
+    disabled = false,
+    disableFocusRipple = false,
+    onChange,
+    onClick,
+    selected,
+    size = 'medium',
+    value,
+    ...other
+  } = props;
+
+  const handleChange = (event) => {
+    if (onClick) {
+      onClick(event, value);
+      if (event.isDefaultPrevented()) {
+        return;
+      }
+    }
+
+    if (onChange) {
+      onChange(event, value);
+    }
+  };
+
+  return (
+    <ButtonBase
+      className={clsx(
+        classes.root,
+        {
+          [classes.disabled]: disabled,
+          [classes.selected]: selected,
+          [classes[`size${capitalize(size)}`]]: size !== 'medium',
+        },
+        className,
+      )}
+      disabled={disabled}
+      focusRipple={!disableFocusRipple}
+      ref={ref}
+      onClick={handleChange}
+      onChange={onChange}
+      value={value}
+      aria-pressed={selected}
+      {...other}
+    >
+      <span className={classes.label}>{children}</span>
+    </ButtonBase>
+  );
+});
+
+ToggleButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the button.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the button will be disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the  keyboard focus ripple will be disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect will be disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `focusVisibleClassName`.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
+  /**
+   * If `true`, the button will be rendered in an active state.
+   */
+  selected: PropTypes.bool,
+  /**
+   * The size of the button.
+   * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
+   * @default 'medium'
+   */
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  /**
+   * The value to associate with the button when selected in a
+   * ToggleButtonGroup.
+   */
+  value: PropTypes.any.isRequired,
+};
+
+export default withStyles(styles, { name: 'MuiToggleButton' })(ToggleButton);

packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js → packages/material-ui/src/ToggleButton/ToggleButton.test.js

@@ -8,7 +8,7 @@ import {
   describeConformance,
   createServerRender,
 } from 'test/utils';
-import ButtonBase from '@material-ui/core/ButtonBase';
+import ButtonBase from '../ButtonBase';
 import ToggleButton from './ToggleButton';
 
 describe('<ToggleButton />', () => {

packages/material-ui/src/ToggleButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ToggleButton';
+export * from './ToggleButton';

packages/material-ui/src/ToggleButton/index.js

@@ -0,0 +1 @@
+export { default } from './ToggleButton';

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

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { InternalStandardProps as StandardProps } from '..';
+
+export interface ToggleButtonGroupProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
+  /**
+   * The content of the button.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: {
+    /** Styles applied to the root element. */
+    root?: string;
+    /** Styles applied to the root element if `orientation="vertical"`. */
+    vertical?: string;
+    /** Styles applied to the children. */
+    grouped?: string;
+    /** Styles applied to the children if `orientation="horizontal"`. */
+    groupedHorizontal?: string;
+    /** Styles applied to the children if `orientation="vertical"`. */
+    groupedVertical?: string;
+  };
+  /**
+   * If `true`, only allow one of the child ToggleButton values to be selected.
+   * @default false
+   */
+  exclusive?: boolean;
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {any} value of the selected buttons. When `exclusive` is true
+   * this is a single value; when false an array of selected values. If no value
+   * is selected and `exclusive` is true the value is null; when false an empty array.
+   */
+  onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
+  /**
+   * The group orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * The size of the buttons.
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * The currently selected value within the group or an array of selected
+   * values when `exclusive` is false.
+   *
+   * The value must have reference equality with the option in order to be selected.
+   */
+  value?: any;
+}
+
+export type ToggleButtonGroupClassKey = keyof NonNullable<ToggleButtonGroupProps['classes']>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Toggle Button](https://material-ui.com/components/toggle-button/)
+ *
+ * API:
+ *
+ * - [ToggleButtonGroup API](https://material-ui.com/api/toggle-button-group/)
+ */
+export default function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element;

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

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import { isFragment } from 'react-is';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { withStyles } from '../styles';
+import { capitalize } from '../utils';
+import isValueSelected from './isValueSelected';
+
+export const styles = (theme) => ({
+  /* Styles applied to the root element. */
+  root: {
+    display: 'inline-flex',
+    borderRadius: theme.shape.borderRadius,
+  },
+  /* Styles applied to the root element if `orientation="vertical"`. */
+  vertical: {
+    flexDirection: 'column',
+  },
+  /* Styles applied to the children. */
+  grouped: {},
+  /* Styles applied to the children if `orientation="horizontal"`. */
+  groupedHorizontal: {
+    '&:not(:first-child)': {
+      marginLeft: -1,
+      borderLeft: '1px solid transparent',
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+    },
+    '&:not(:last-child)': {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+  },
+  /* Styles applied to the children if `orientation="vertical"`. */
+  groupedVertical: {
+    '&:not(:first-child)': {
+      marginTop: -1,
+      borderTop: '1px solid transparent',
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+    },
+    '&:not(:last-child)': {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+  },
+});
+
+const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup(props, ref) {
+  const {
+    children,
+    classes,
+    className,
+    exclusive = false,
+    onChange,
+    orientation = 'horizontal',
+    size = 'medium',
+    value,
+    ...other
+  } = props;
+
+  const handleChange = (event, buttonValue) => {
+    if (!onChange) {
+      return;
+    }
+
+    const index = value && value.indexOf(buttonValue);
+    let newValue;
+
+    if (value && index >= 0) {
+      newValue = value.slice();
+      newValue.splice(index, 1);
+    } else {
+      newValue = value ? value.concat(buttonValue) : [buttonValue];
+    }
+
+    onChange(event, newValue);
+  };
+
+  const handleExclusiveChange = (event, buttonValue) => {
+    if (!onChange) {
+      return;
+    }
+
+    onChange(event, value === buttonValue ? null : buttonValue);
+  };
+
+  return (
+    <div
+      role="group"
+      className={clsx(
+        classes.root,
+        {
+          [classes.vertical]: orientation === 'vertical',
+        },
+        className,
+      )}
+      ref={ref}
+      {...other}
+    >
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+
+        if (process.env.NODE_ENV !== 'production') {
+          if (isFragment(child)) {
+            console.error(
+              [
+                "Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.",
+                'Consider providing an array instead.',
+              ].join('\n'),
+            );
+          }
+        }
+
+        return React.cloneElement(child, {
+          className: clsx(
+            classes.grouped,
+            classes[`grouped${capitalize(orientation)}`],
+            child.props.className,
+          ),
+          onChange: exclusive ? handleExclusiveChange : handleChange,
+          selected:
+            child.props.selected === undefined
+              ? isValueSelected(child.props.value, value)
+              : child.props.selected,
+          size: child.props.size || size,
+        });
+      })}
+    </div>
+  );
+});
+
+ToggleButtonGroup.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the button.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, only allow one of the child ToggleButton values to be selected.
+   * @default false
+   */
+  exclusive: PropTypes.bool,
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {any} value of the selected buttons. When `exclusive` is true
+   * this is a single value; when false an array of selected values. If no value
+   * is selected and `exclusive` is true the value is null; when false an empty array.
+   */
+  onChange: PropTypes.func,
+  /**
+   * The group orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * The size of the buttons.
+   * @default 'medium'
+   */
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  /**
+   * The currently selected value within the group or an array of selected
+   * values when `exclusive` is false.
+   *
+   * The value must have reference equality with the option in order to be selected.
+   */
+  value: PropTypes.any,
+};
+
+export default withStyles(styles, { name: 'MuiToggleButtonGroup' })(ToggleButtonGroup);

packages/material-ui/src/ToggleButtonGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ToggleButtonGroup';
+export * from './ToggleButtonGroup';

packages/material-ui/src/ToggleButtonGroup/index.js

@@ -0,0 +1 @@
+export { default } from './ToggleButtonGroup';

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

@@ -413,6 +413,12 @@ export * from './TextField';
 export { default as TextareaAutosize } from './TextareaAutosize';
 export * from './TextareaAutosize';
 
+export { default as ToggleButton } from './ToggleButton';
+export * from './ToggleButton';
+
+export { default as ToggleButtonGroup } from './ToggleButtonGroup';
+export * from './ToggleButtonGroup';
+
 export { default as Toolbar } from './Toolbar';
 export * from './Toolbar';
 

packages/material-ui/src/index.js

@@ -339,6 +339,12 @@ export * from './TextField';
 export { default as TextareaAutosize } from './TextareaAutosize';
 export * from './TextareaAutosize';
 
+export { default as ToggleButton } from './ToggleButton';
+export * from './ToggleButton';
+
+export { default as ToggleButtonGroup } from './ToggleButtonGroup';
+export * from './ToggleButtonGroup';
+
 export { default as Toolbar } from './Toolbar';
 export * from './Toolbar';
 

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

@@ -98,6 +98,8 @@ import { TableRowClassKey } from '../TableRow';
 import { TableSortLabelClassKey } from '../TableSortLabel';
 import { TabsClassKey } from '../Tabs';
 import { TextFieldClassKey } from '../TextField';
+import { ToggleButtonClassKey } from '../ToggleButton';
+import { ToggleButtonGroupClassKey } from '../ToggleButtonGroup';
 import { ToolbarClassKey } from '../Toolbar';
 import { TooltipClassKey } from '../Tooltip';
 import { TouchRippleClassKey } from '../ButtonBase/TouchRipple';
@@ -217,6 +219,8 @@ export interface ComponentNameToClassKey {
   MuiTableSortLabel: TableSortLabelClassKey;
   MuiTabs: TabsClassKey;
   MuiTextField: TextFieldClassKey;
+  MuiToggleButton: ToggleButtonClassKey;
+  MuiToggleButtonGroup: ToggleButtonGroupClassKey;
   MuiToolbar: ToolbarClassKey;
   MuiTooltip: TooltipClassKey;
   MuiTouchRipple: TouchRippleClassKey;

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

@@ -103,6 +103,8 @@ import { TableFooterProps } from '../TableFooter';
 import { TabProps } from '../Tab';
 import { TabsProps } from '../Tabs';
 import { TextFieldProps } from '../TextField';
+import { ToggleButtonProps } from '../ToggleButton';
+import { ToggleButtonGroupProps } from '../ToggleButtonGroup';
 import { ToolbarProps } from '../Toolbar';
 import { TooltipProps } from '../Tooltip';
 import { TouchRippleProps } from '../ButtonBase/TouchRipple';
@@ -218,6 +220,8 @@ export interface ComponentsPropsList {
   MuiTableSortLabel: TableSortLabelProps;
   MuiTabs: TabsProps;
   MuiTextField: TextFieldProps;
+  MuiToggleButton: ToggleButtonProps;
+  MuiToggleButtonGroup: ToggleButtonGroupProps;
   MuiToolbar: ToolbarProps;
   MuiTooltip: TooltipProps;
   MuiTouchRipple: TouchRippleProps;