Skip to content

Commit d1ca1f5

Browse files
GerardasBmayank99
GerardasB
and
mayank99
authored
Style standalone ToggleButton (#1393)
Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com>
1 parent a9d78d3 commit d1ca1f5

15 files changed

Lines changed: 271 additions & 25 deletions

‎.changeset/funny-readers-wear.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@stratakit/mui": patch
3+
---
4+
5+
Added ability to display text in the `ToggleButton` when rendered as a `Button`.

‎.changeset/loud-pigs-guess.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@stratakit/mui": patch
3+
---
4+
5+
Styled `ToggleButton` to visually match the `IconButton` component.

‎apps/test-app/app/mui.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,11 @@ import TextFieldError from "examples/mui/TextField.error.tsx";
115115
import TextFieldIcon from "examples/mui/TextField.icon.tsx";
116116
import TextFieldMultiline from "examples/mui/TextField.multiline.tsx";
117117
import TextFieldSizes from "examples/mui/TextField.sizes.tsx";
118+
import ToggleButtonDisabled_ from "examples/mui/ToggleButton._disabled.tsx";
118119
import ToggleButtonDefault from "examples/mui/ToggleButton.default.tsx";
120+
import ToggleButtonSizes from "examples/mui/ToggleButton.sizes.tsx";
121+
import ToggleButtonStandalone from "examples/mui/ToggleButton.standalone.tsx";
122+
import ToggleButtonText from "examples/mui/ToggleButton.text.tsx";
119123
import TooltipDefault from "examples/mui/Tooltip.default.tsx";
120124
import TooltipDirection from "examples/mui/Tooltip.direction.tsx";
121125
import TypographyDefault from "examples/mui/Typography.default.tsx";
@@ -379,7 +383,15 @@ const components: Record<string, React.ReactNode> = {
379383
<TextFieldSizes />
380384
</Stack>
381385
),
382-
ToggleButton: <ToggleButtonDefault />,
386+
ToggleButton: (
387+
<>
388+
<ToggleButtonDefault />
389+
<ToggleButtonStandalone />
390+
<ToggleButtonSizes />
391+
<ToggleButtonDisabled_ />
392+
<ToggleButtonText />
393+
</>
394+
),
383395
Tooltip: (
384396
<>
385397
<TooltipDefault />

‎apps/website/src/content/docs/components/mui/ToggleButton.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,44 @@ links:
1111
## StrataKit MUI modifications
1212

1313
- A `label` prop has been added. When specified, it is used as the **ToggleButton’s** accessible name and is also shown in a tooltip on hover and focus.
14+
- **ToggleButtons** are styled to match the visual appearance of the [**IconButton**](/components/iconbutton) component. Borders are displayed only when the buttons are wrapped in a `ToggleButtonGroup`. [Standalone](#standalone) **ToggleButtons** do not have borders.
15+
- **ToggleButtons** can now be rendered as regular [**Buttons**](/components/button) to [display text](#text).
16+
17+
## Examples
18+
19+
### Standalone
20+
21+
Use the [`selected`](https://mui.com/material-ui/api/toggle-button/#toggle-button-prop-selected) and [`onChange`](https://mui.com/material-ui/api/toggle-button/#toggle-button-prop-onChange) props to control the selected state of a standalone **ToggleButton** when it is not nested within a [`ToggleButtonGroup`](https://mui.com/material-ui/api/toggle-button-group/) component.
22+
23+
::example{src="mui/ToggleButton.standalone"}
24+
25+
### Sizes
26+
27+
- **Small:** Use in compact interfaces where space is limited.
28+
- **Medium:** Default size, suitable for most use cases.
29+
- **Large:** Use in spacious layouts where a more prominent button is needed.
30+
31+
::example{src="mui/ToggleButton.sizes"}
32+
33+
### Text
34+
35+
To display text within a **ToggleButton**, use the `render` prop to render a [**Button**](/components/button). Additionally, the `label` prop should be omitted, as the visible text already provides an accessible name.
36+
37+
::example{src="mui/ToggleButton.text"}
38+
39+
:::note[Exclusive selection]
40+
41+
In the example above, the [`exclusive`](https://mui.com/material-ui/api/toggle-button-group/#toggle-button-group-prop-exclusive) prop is set on the [`ToggleButtonGroup`](https://mui.com/material-ui/api/toggle-button-group/), which allows only one button to be selected at a time. Additionally, the handler used in the [`onChange`](https://mui.com/material-ui/api/toggle-button-group/#toggle-button-group-prop-onChange) prop enforces that at least one button is always selected.
42+
43+
:::
44+
45+
## ✅ Do
46+
47+
- Use **ToggleButton** for actions that have an on/off state.
48+
- Use the `label` prop in icon-only **ToggleButtons** to provide a descriptive, accessible name.
49+
- Use `ToggleButtonGroup` to group multiple related **ToggleButtons**.
50+
51+
## 🚫 Don’t
52+
53+
- Don’t use to replace buttons.
54+
- Don’t mix text and icon-only **ToggleButtons** in the same group.

‎examples/mui/ToggleButton._disabled.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*---------------------------------------------------------------------------------------------
2+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3+
* See LICENSE.md in the project root for license terms and full copyright notice.
4+
*--------------------------------------------------------------------------------------------*/
5+
6+
import ToggleButton from "@mui/material/ToggleButton";
7+
import { Icon } from "@stratakit/mui";
8+
9+
import svgPlaceholder from "@stratakit/icons/placeholder.svg";
10+
11+
export default () => {
12+
return (
13+
<ToggleButton value="disabled" label="Disabled" disabled>
14+
<Icon href={svgPlaceholder} />
15+
</ToggleButton>
16+
);
17+
};

‎examples/mui/ToggleButton.default.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* See LICENSE.md in the project root for license terms and full copyright notice.
44
*--------------------------------------------------------------------------------------------*/
55

6+
import * as React from "react";
67
import ToggleButton from "@mui/material/ToggleButton";
78
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
89
import { Icon } from "@stratakit/mui";
@@ -13,8 +14,13 @@ import svgTextAlignLeft from "@stratakit/icons/text-align-left.svg";
1314
import svgTextAlignRight from "@stratakit/icons/text-align-right.svg";
1415

1516
export default () => {
17+
const [alignment, setAlignment] = React.useState(["center"]);
1618
return (
17-
<ToggleButtonGroup value="center" aria-label="text alignment">
19+
<ToggleButtonGroup
20+
value={alignment}
21+
onChange={(_, newAlignment) => setAlignment(newAlignment)}
22+
aria-label="text alignment"
23+
>
1824
<ToggleButton value="left" label="Left aligned">
1925
<Icon href={svgTextAlignLeft} />
2026
</ToggleButton>

‎examples/mui/ToggleButton.sizes.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*---------------------------------------------------------------------------------------------
2+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3+
* See LICENSE.md in the project root for license terms and full copyright notice.
4+
*--------------------------------------------------------------------------------------------*/
5+
6+
import Stack from "@mui/material/Stack";
7+
import ToggleButton from "@mui/material/ToggleButton";
8+
import { Icon } from "@stratakit/mui";
9+
10+
import svgPlaceholder from "@stratakit/icons/placeholder.svg";
11+
12+
export default () => {
13+
return (
14+
<Stack spacing={1} direction="row" sx={{ alignItems: "center" }}>
15+
<ToggleButton value="small" size="small" label="Small">
16+
<Icon href={svgPlaceholder} />
17+
</ToggleButton>
18+
<ToggleButton value="medium" label="Medium">
19+
<Icon href={svgPlaceholder} />
20+
</ToggleButton>
21+
<ToggleButton value="large" size="large" label="Large">
22+
<Icon href={svgPlaceholder} />
23+
</ToggleButton>
24+
</Stack>
25+
);
26+
};

‎examples/mui/ToggleButton.standalone.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*---------------------------------------------------------------------------------------------
2+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3+
* See LICENSE.md in the project root for license terms and full copyright notice.
4+
*--------------------------------------------------------------------------------------------*/
5+
6+
import * as React from "react";
7+
import ToggleButton from "@mui/material/ToggleButton";
8+
import { Icon } from "@stratakit/mui";
9+
10+
import svgFontUnderline from "@stratakit/icons/font-underline.svg";
11+
12+
export default () => {
13+
const [selected, setSelected] = React.useState(false);
14+
return (
15+
<ToggleButton
16+
value="left"
17+
label="Underlined"
18+
selected={selected}
19+
onChange={() => {
20+
setSelected((prev) => !prev);
21+
}}
22+
>
23+
<Icon href={svgFontUnderline} />
24+
</ToggleButton>
25+
);
26+
};

‎examples/mui/ToggleButton.text.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/*---------------------------------------------------------------------------------------------
2+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3+
* See LICENSE.md in the project root for license terms and full copyright notice.
4+
*--------------------------------------------------------------------------------------------*/
5+
6+
import * as React from "react";
7+
import Button from "@mui/material/Button";
8+
import ToggleButton from "@mui/material/ToggleButton";
9+
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
10+
11+
export default () => {
12+
const [colorScheme, setColorScheme] = React.useState("auto");
13+
return (
14+
<ToggleButtonGroup
15+
value={colorScheme}
16+
onChange={(_, newColorScheme) => {
17+
if (newColorScheme === null) {
18+
setColorScheme("auto");
19+
return;
20+
}
21+
setColorScheme(newColorScheme);
22+
}}
23+
exclusive
24+
aria-label="color scheme"
25+
>
26+
<ToggleButton value="auto" render={<Button variant="outlined" />}>
27+
Auto
28+
</ToggleButton>
29+
<ToggleButton value="light" render={<Button variant="outlined" />}>
30+
Light
31+
</ToggleButton>
32+
<ToggleButton value="dark" render={<Button variant="outlined" />}>
33+
Dark
34+
</ToggleButton>
35+
</ToggleButtonGroup>
36+
);
37+
};

‎packages/mui/src/types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,11 @@ declare module "@mui/material/ToggleButton" {
330330
interface ToggleButtonOwnProps {
331331
LinkComponent?: never;
332332

333+
/**
334+
* The accessible name of the button, which is also shown as a tooltip on hover/focus.
335+
*
336+
* Should only be provided when the toggle button does not have visible text content that can serve as an accessible name.
337+
*/
333338
label?: IconButtonProps["label"];
334339
}
335340
}

0 commit comments

Comments
 (0)