Skip to content

Commit 1f1fffb

Browse files
FlyersPh9FlyersPh9
committed
Merge remote-tracking branch 'origin/main' into jon/size-demos-and-docs
2 parents c6988b5 + 952a988 commit 1f1fffb

22 files changed

Lines changed: 355 additions & 92 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/humble-gifts-appear.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 a new `labelPlacement` prop to `IconButton` and `ToggleButton` components to control the placement of a tooltip that is shown when the `label` prop is specified.

‎.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: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ import DividerVertical from "examples/mui/Divider.vertical.tsx";
6868
import DrawerDefault from "examples/mui/Drawer.default.tsx";
6969
import FabDefault from "examples/mui/Fab.default.tsx";
7070
import IconButtonColors_ from "examples/mui/IconButton._colors.tsx";
71+
import IconButtonPlacements_ from "examples/mui/IconButton._placements.tsx";
7172
import IconButtonDefault from "examples/mui/IconButton.default.tsx";
7273
import IconButtonSizes from "examples/mui/IconButton.sizes.tsx";
7374
import LinearProgressColors_ from "examples/mui/LinearProgress._colors.tsx";
@@ -120,8 +121,12 @@ import TextFieldError from "examples/mui/TextField.error.tsx";
120121
import TextFieldIcon from "examples/mui/TextField.icon.tsx";
121122
import TextFieldMultiline from "examples/mui/TextField.multiline.tsx";
122123
import TextFieldSizes from "examples/mui/TextField.sizes.tsx";
124+
import ToggleButtonDisabled_ from "examples/mui/ToggleButton._disabled.tsx";
125+
import ToggleButtonPlacements_ from "examples/mui/ToggleButton._placements.tsx";
123126
import ToggleButtonDefault from "examples/mui/ToggleButton.default.tsx";
124127
import ToggleButtonSizes from "examples/mui/ToggleButton.sizes.tsx";
128+
import ToggleButtonStandalone from "examples/mui/ToggleButton.standalone.tsx";
129+
import ToggleButtonText from "examples/mui/ToggleButton.text.tsx";
125130
import TooltipDefault from "examples/mui/Tooltip.default.tsx";
126131
import TooltipDirection from "examples/mui/Tooltip.direction.tsx";
127132
import TypographyDefault from "examples/mui/Typography.default.tsx";
@@ -282,6 +287,11 @@ const components: Record<string, React.ReactNode> = {
282287
<IconButtonColors_ />
283288
</Stack>
284289
)}
290+
{!isProduction && (
291+
<Stack spacing={1} direction="row">
292+
<IconButtonPlacements_ />
293+
</Stack>
294+
)}
285295
</>
286296
),
287297
LinearProgress: (
@@ -397,7 +407,15 @@ const components: Record<string, React.ReactNode> = {
397407
ToggleButton: (
398408
<>
399409
<ToggleButtonDefault />
410+
<ToggleButtonStandalone />
400411
<ToggleButtonSizes />
412+
<ToggleButtonDisabled_ />
413+
<ToggleButtonText />
414+
{!isProduction && (
415+
<Stack spacing={1} direction="row">
416+
<ToggleButtonPlacements_ />
417+
</Stack>
418+
)}
401419
</>
402420
),
403421
Tooltip: (

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ Make sure the **IconButton** is suitable for your use case. There may be other,
2525
- The `"default"`, `"info"`, `"success"`, `"warning"`, `"inherit"` colors have been removed. The default color is now `"secondary"`.
2626
- The `size` options (`"small"`, `"medium"`, `"large"`) have all been decreased in height.
2727
- A `label` prop has been added. When specified, it is used as the **IconButton’s** accessible name and is also shown in a tooltip on hover and focus.
28+
- A `labelPlacement` prop has been added to control the placement of a tooltip that is shown when the `label` prop is specified.
2829

2930
## Examples
3031

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,45 @@ 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+
- A `labelPlacement` prop has been added to control the placement of a tooltip that is shown when the `label` prop is specified.
15+
- **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.
16+
- **ToggleButtons** can now be rendered as regular [**Buttons**](/components/button) to [display text](#text).
1417

1518
## Examples
1619

20+
### Standalone
21+
22+
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.
23+
24+
::example{src="mui/ToggleButton.standalone"}
25+
1726
### Sizes
1827

1928
- **Small:** Use in compact interfaces where space is limited.
2029
- **Medium:** Default size, suitable for most use cases.
2130
- **Large:** Use in spacious layouts where a more prominent button is needed.
2231

2332
::example{src="mui/ToggleButton.sizes"}
33+
34+
### Text
35+
36+
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.
37+
38+
::example{src="mui/ToggleButton.text"}
39+
40+
:::note[Exclusive selection]
41+
42+
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.
43+
44+
:::
45+
46+
## ✅ Do
47+
48+
- Use **ToggleButton** for actions that have an on/off state.
49+
- Use the `label` prop in icon-only **ToggleButtons** to provide a descriptive, accessible name.
50+
- Use `ToggleButtonGroup` to group multiple related **ToggleButtons**.
51+
52+
## 🚫 Don’t
53+
54+
- Don’t use to replace buttons.
55+
- Don’t mix text and icon-only **ToggleButtons** in the same group.

‎examples/mui/IconButton._placements.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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 IconButton from "@mui/material/IconButton";
7+
import { Icon } from "@stratakit/mui";
8+
9+
import svgPlaceholder from "@stratakit/icons/placeholder.svg";
10+
11+
type IconButtonProps = React.ComponentProps<typeof IconButton>;
12+
const placements = [
13+
"top",
14+
"right",
15+
"bottom",
16+
"left",
17+
] as const satisfies IconButtonProps["labelPlacement"][];
18+
19+
export default () => {
20+
return placements.map((placement) => (
21+
<IconButton
22+
key={placement}
23+
label={`${placement.charAt(0).toUpperCase()}${placement.slice(1)}`}
24+
labelPlacement={placement}
25+
>
26+
<Icon href={svgPlaceholder} />
27+
</IconButton>
28+
));
29+
};

‎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._placements.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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 svgPlaceholder from "@stratakit/icons/placeholder.svg";
11+
12+
type ToggleButtonProps = React.ComponentProps<typeof ToggleButton>;
13+
const placements = [
14+
"top",
15+
"right",
16+
"bottom",
17+
"left",
18+
] as const satisfies ToggleButtonProps["labelPlacement"][];
19+
20+
export default () => {
21+
const [selected, setSelected] = React.useState<string[]>([]);
22+
return placements.map((placement) => (
23+
<ToggleButton
24+
key={placement}
25+
value={placement}
26+
label={`${placement.charAt(0).toUpperCase()}${placement.slice(1)}`}
27+
labelPlacement={placement}
28+
selected={selected.includes(placement)}
29+
onChange={() =>
30+
setSelected((prev) =>
31+
prev.includes(placement)
32+
? prev.filter((p) => p !== placement)
33+
: [...prev, placement],
34+
)
35+
}
36+
>
37+
<Icon href={svgPlaceholder} />
38+
</ToggleButton>
39+
));
40+
};

‎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>

0 commit comments

Comments
 (0)