Skip to content

Commit

Permalink
[ToggleButton] Move from lab to core (#22784)
Browse files Browse the repository at this point in the history
  • Loading branch information
mbrookes authored Oct 3, 2020
1 parent 1c4cb41 commit 0c32aa0
Show file tree
Hide file tree
Showing 40 changed files with 649 additions and 561 deletions.
8 changes: 4 additions & 4 deletions docs/pages/api-docs/toggle-button-group.md
Original file line number Diff line number Diff line change
@@ -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. -->
Expand All @@ -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/).
Expand Down Expand Up @@ -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

Expand Down
8 changes: 4 additions & 4 deletions docs/pages/api-docs/toggle-button.md
Original file line number Diff line number Diff line change
@@ -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. -->
Expand All @@ -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/).
Expand Down Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,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' },
],
},
{
Expand Down Expand Up @@ -124,7 +125,6 @@ const pages = [
{ pathname: '/components/about-the-lab' },
{ pathname: '/components/slider-styled' },
{ pathname: '/components/timeline' },
{ pathname: '/components/toggle-button' },
{ pathname: '/components/trap-focus' },
{ pathname: '/components/tree-view' },
],
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/toggle-button/CustomizedDividers.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/toggle-button/ToggleButtonSizes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/toggle-button/ToggleButtonSizes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/toggle-button/ToggleButtons.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/toggle-button/ToggleButtons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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']);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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']);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
21 changes: 14 additions & 7 deletions docs/src/pages/components/toggle-button/toggle-button.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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) => {
Expand Down Expand Up @@ -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.
11 changes: 11 additions & 0 deletions docs/src/pages/guides/migration-v4/migration-v4.md
Original file line number Diff line number Diff line change
Expand Up @@ -765,6 +765,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/):
Expand Down
81 changes: 2 additions & 79 deletions packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts
Original file line number Diff line number Diff line change
@@ -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';
Loading

0 comments on commit 0c32aa0

Please sign in to comment.