mui · mbrookes · Oct 3, 2020 · Sep 27, 2020 · Sep 27, 2020 · Sep 27, 2020
diff --git a/docs/pages/api-docs/toggle-button-group.md b/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
 

diff --git a/docs/pages/api-docs/toggle-button.md b/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
 

diff --git a/docs/src/pages.js b/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' },
         ],

diff --git a/docs/src/pages/components/toggle-button/CustomizedDividers.js b/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: {

diff --git a/docs/src/pages/components/toggle-button/CustomizedDividers.tsx b/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({

diff --git a/docs/src/pages/components/toggle-button/StandaloneToggleButton.js b/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);

diff --git a/docs/src/pages/components/toggle-button/StandaloneToggleButton.tsx b/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);

diff --git a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js b/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: {

diff --git a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx b/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: {

diff --git a/docs/src/pages/components/toggle-button/ToggleButtonSizes.js b/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');

diff --git a/docs/src/pages/components/toggle-button/ToggleButtonSizes.tsx b/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');

diff --git a/docs/src/pages/components/toggle-button/ToggleButtons.js b/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');

diff --git a/docs/src/pages/components/toggle-button/ToggleButtons.tsx b/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');

diff --git a/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.js b/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']);

diff --git a/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.tsx b/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']);

diff --git a/docs/src/pages/components/toggle-button/VerticalToggleButtons.js b/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');

diff --git a/docs/src/pages/components/toggle-button/VerticalToggleButtons.tsx b/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');

diff --git a/docs/src/pages/components/toggle-button/toggle-button.md b/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.
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/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/):

diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts b/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';