Skip to content

Commit 15a0992

Browse files
ZeeshanTamboliZeeshanTamboli
committed
revert
1 parent 341bbf6 commit 15a0992

File tree

4 files changed

+133
-196
lines changed

4 files changed

+133
-196
lines changed

‎docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.js

Lines changed: 46 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,59 @@
11
import * as React from 'react';
2-
import ToggleButton from '@mui/material/ToggleButton';
3-
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
2+
import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
3+
import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
4+
import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
5+
import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
6+
import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
7+
import ToggleButtonGroup, {
8+
toggleButtonGroupClasses,
9+
} from '@mui/material/ToggleButtonGroup';
10+
import { styled } from '@mui/material/styles';
11+
12+
const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
13+
gap: '2rem',
14+
[`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]:
15+
{
16+
borderTopRightRadius: theme.vars.shape.borderRadius,
17+
borderBottomRightRadius: theme.vars.shape.borderRadius,
18+
},
19+
[`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
20+
{
21+
borderTopLeftRadius: theme.vars.shape.borderRadius,
22+
borderBottomLeftRadius: theme.vars.shape.borderRadius,
23+
borderLeft: `1px solid ${theme.vars.palette.divider}`,
24+
},
25+
[`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
26+
{
27+
borderLeft: `1px solid ${theme.vars.palette.action.disabledBackground}`,
28+
},
29+
}));
430

531
export default function HorizontalSpacingToggleButton() {
6-
const [alignment, setAlignment] = React.useState('web');
32+
const [alignment, setAlignment] = React.useState('left');
733

8-
const handleChange = (event, newAlignment) => {
34+
const handleAlignment = (event, newAlignment) => {
935
setAlignment(newAlignment);
1036
};
1137

1238
return (
13-
<ToggleButtonGroup
14-
color="primary"
39+
<StyledToggleButtonGroup
1540
value={alignment}
1641
exclusive
17-
onChange={handleChange}
18-
aria-label="Platform"
42+
onChange={handleAlignment}
43+
aria-label="text alignment"
1944
>
20-
<ToggleButton value="web">Web</ToggleButton>
21-
<ToggleButton value="android">Android</ToggleButton>
22-
<ToggleButton value="ios">iOS</ToggleButton>
23-
</ToggleButtonGroup>
45+
<ToggleButton value="left" aria-label="left aligned">
46+
<FormatAlignLeftIcon />
47+
</ToggleButton>
48+
<ToggleButton value="center" aria-label="centered">
49+
<FormatAlignCenterIcon />
50+
</ToggleButton>
51+
<ToggleButton value="right" aria-label="right aligned">
52+
<FormatAlignRightIcon />
53+
</ToggleButton>
54+
<ToggleButton value="justify" aria-label="justified" disabled>
55+
<FormatAlignJustifyIcon />
56+
</ToggleButton>
57+
</StyledToggleButtonGroup>
2458
);
2559
}
26-
27-
// import * as React from 'react';
28-
// import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
29-
// import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
30-
// import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
31-
// import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
32-
// import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
33-
// import ToggleButtonGroup, {
34-
// toggleButtonGroupClasses,
35-
// } from '@mui/material/ToggleButtonGroup';
36-
// import { styled } from '@mui/material/styles';
37-
38-
// const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
39-
// gap: '2rem',
40-
// [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]:
41-
// {
42-
// borderTopRightRadius: theme.vars.shape.borderRadius,
43-
// borderBottomRightRadius: theme.vars.shape.borderRadius,
44-
// },
45-
// [`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
46-
// {
47-
// borderTopLeftRadius: theme.vars.shape.borderRadius,
48-
// borderBottomLeftRadius: theme.vars.shape.borderRadius,
49-
// borderLeft: `1px solid ${theme.vars.palette.divider}`,
50-
// },
51-
// [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
52-
// {
53-
// borderLeft: `1px solid ${theme.vars.palette.action.disabledBackground}`,
54-
// },
55-
// }));
56-
57-
// export default function HorizontalSpacingToggleButton() {
58-
// const [alignment, setAlignment] = React.useState('left');
59-
60-
// const handleAlignment = (event, newAlignment) => {
61-
// setAlignment(newAlignment);
62-
// };
63-
64-
// return (
65-
// <div>
66-
// <StyledToggleButtonGroup
67-
// value={alignment}
68-
// exclusive
69-
// onChange={handleAlignment}
70-
// aria-label="text alignment"
71-
// >
72-
// <ToggleButton value="left" aria-label="left aligned">
73-
// <FormatAlignLeftIcon />
74-
// </ToggleButton>
75-
// <ToggleButton value="center" aria-label="centered">
76-
// <FormatAlignCenterIcon />
77-
// </ToggleButton>
78-
// <ToggleButton value="right" aria-label="right aligned">
79-
// <FormatAlignRightIcon />
80-
// </ToggleButton>
81-
// <ToggleButton value="justify" aria-label="justified" disabled>
82-
// <FormatAlignJustifyIcon />
83-
// </ToggleButton>
84-
// </StyledToggleButtonGroup>
85-
// </div>
86-
// );
87-
// }

‎docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.tsx

Lines changed: 47 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,62 @@
11
import * as React from 'react';
2-
import ToggleButton from '@mui/material/ToggleButton';
3-
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
2+
import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
3+
import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
4+
import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
5+
import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
6+
import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
7+
import ToggleButtonGroup, {
8+
toggleButtonGroupClasses,
9+
} from '@mui/material/ToggleButtonGroup';
10+
import { styled } from '@mui/material/styles';
11+
12+
const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
13+
gap: '2rem',
14+
[`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]:
15+
{
16+
borderTopRightRadius: theme.vars.shape.borderRadius,
17+
borderBottomRightRadius: theme.vars.shape.borderRadius,
18+
},
19+
[`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
20+
{
21+
borderTopLeftRadius: theme.vars.shape.borderRadius,
22+
borderBottomLeftRadius: theme.vars.shape.borderRadius,
23+
borderLeft: `1px solid ${theme.vars.palette.divider}`,
24+
},
25+
[`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
26+
{
27+
borderLeft: `1px solid ${theme.vars.palette.action.disabledBackground}`,
28+
},
29+
}));
430

531
export default function HorizontalSpacingToggleButton() {
6-
const [alignment, setAlignment] = React.useState('web');
32+
const [alignment, setAlignment] = React.useState<string | null>('left');
733

8-
const handleChange = (
34+
const handleAlignment = (
935
event: React.MouseEvent<HTMLElement>,
10-
newAlignment: string,
36+
newAlignment: string | null,
1137
) => {
1238
setAlignment(newAlignment);
1339
};
1440

1541
return (
16-
<ToggleButtonGroup
17-
color="primary"
42+
<StyledToggleButtonGroup
1843
value={alignment}
1944
exclusive
20-
onChange={handleChange}
21-
aria-label="Platform"
45+
onChange={handleAlignment}
46+
aria-label="text alignment"
2247
>
23-
<ToggleButton value="web">Web</ToggleButton>
24-
<ToggleButton value="android">Android</ToggleButton>
25-
<ToggleButton value="ios">iOS</ToggleButton>
26-
</ToggleButtonGroup>
48+
<ToggleButton value="left" aria-label="left aligned">
49+
<FormatAlignLeftIcon />
50+
</ToggleButton>
51+
<ToggleButton value="center" aria-label="centered">
52+
<FormatAlignCenterIcon />
53+
</ToggleButton>
54+
<ToggleButton value="right" aria-label="right aligned">
55+
<FormatAlignRightIcon />
56+
</ToggleButton>
57+
<ToggleButton value="justify" aria-label="justified" disabled>
58+
<FormatAlignJustifyIcon />
59+
</ToggleButton>
60+
</StyledToggleButtonGroup>
2761
);
2862
}
29-
30-
// import * as React from 'react';
31-
// import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
32-
// import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
33-
// import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
34-
// import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
35-
// import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
36-
// import ToggleButtonGroup, {
37-
// toggleButtonGroupClasses,
38-
// } from '@mui/material/ToggleButtonGroup';
39-
// import { styled } from '@mui/material/styles';
40-
41-
// const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
42-
// gap: '2rem',
43-
// [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]:
44-
// {
45-
// borderTopRightRadius: theme.vars.shape.borderRadius,
46-
// borderBottomRightRadius: theme.vars.shape.borderRadius,
47-
// },
48-
// [`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
49-
// {
50-
// borderTopLeftRadius: theme.vars.shape.borderRadius,
51-
// borderBottomLeftRadius: theme.vars.shape.borderRadius,
52-
// borderLeft: `1px solid ${theme.vars.palette.divider}`,
53-
// },
54-
// [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
55-
// {
56-
// borderLeft: `1px solid ${theme.vars.palette.action.disabledBackground}`,
57-
// },
58-
// }));
59-
60-
// export default function HorizontalSpacingToggleButton() {
61-
// const [alignment, setAlignment] = React.useState<string | null>('left');
62-
63-
// const handleAlignment = (
64-
// event: React.MouseEvent<HTMLElement>,
65-
// newAlignment: string | null,
66-
// ) => {
67-
// setAlignment(newAlignment);
68-
// };
69-
70-
// return (
71-
// <div>
72-
// <StyledToggleButtonGroup
73-
// value={alignment}
74-
// exclusive
75-
// onChange={handleAlignment}
76-
// aria-label="text alignment"
77-
// >
78-
// <ToggleButton value="left" aria-label="left aligned">
79-
// <FormatAlignLeftIcon />
80-
// </ToggleButton>
81-
// <ToggleButton value="center" aria-label="centered">
82-
// <FormatAlignCenterIcon />
83-
// </ToggleButton>
84-
// <ToggleButton value="right" aria-label="right aligned">
85-
// <FormatAlignRightIcon />
86-
// </ToggleButton>
87-
// <ToggleButton value="justify" aria-label="justified" disabled>
88-
// <FormatAlignJustifyIcon />
89-
// </ToggleButton>
90-
// </StyledToggleButtonGroup>
91-
// </div>
92-
// );
93-
// }

‎docs/data/material/components/toggle-button/VerticalSpacingToggleButton.js

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -36,27 +36,25 @@ export default function VerticalSpacingToggleButton() {
3636
};
3737

3838
return (
39-
<div>
40-
<StyledToggleButtonGroup
41-
value={alignment}
42-
exclusive
43-
onChange={handleAlignment}
44-
aria-label="text alignment"
45-
orientation="vertical"
46-
>
47-
<ToggleButton value="left" aria-label="left aligned">
48-
<FormatAlignLeftIcon />
49-
</ToggleButton>
50-
<ToggleButton value="center" aria-label="centered">
51-
<FormatAlignCenterIcon />
52-
</ToggleButton>
53-
<ToggleButton value="right" aria-label="right aligned">
54-
<FormatAlignRightIcon />
55-
</ToggleButton>
56-
<ToggleButton value="justify" aria-label="justified" disabled>
57-
<FormatAlignJustifyIcon />
58-
</ToggleButton>
59-
</StyledToggleButtonGroup>
60-
</div>
39+
<StyledToggleButtonGroup
40+
value={alignment}
41+
exclusive
42+
onChange={handleAlignment}
43+
aria-label="text alignment"
44+
orientation="vertical"
45+
>
46+
<ToggleButton value="left" aria-label="left aligned">
47+
<FormatAlignLeftIcon />
48+
</ToggleButton>
49+
<ToggleButton value="center" aria-label="centered">
50+
<FormatAlignCenterIcon />
51+
</ToggleButton>
52+
<ToggleButton value="right" aria-label="right aligned">
53+
<FormatAlignRightIcon />
54+
</ToggleButton>
55+
<ToggleButton value="justify" aria-label="justified" disabled>
56+
<FormatAlignJustifyIcon />
57+
</ToggleButton>
58+
</StyledToggleButtonGroup>
6159
);
6260
}

‎docs/data/material/components/toggle-button/VerticalSpacingToggleButton.tsx

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -39,27 +39,25 @@ export default function VerticalSpacingToggleButton() {
3939
};
4040

4141
return (
42-
<div>
43-
<StyledToggleButtonGroup
44-
value={alignment}
45-
exclusive
46-
onChange={handleAlignment}
47-
aria-label="text alignment"
48-
orientation="vertical"
49-
>
50-
<ToggleButton value="left" aria-label="left aligned">
51-
<FormatAlignLeftIcon />
52-
</ToggleButton>
53-
<ToggleButton value="center" aria-label="centered">
54-
<FormatAlignCenterIcon />
55-
</ToggleButton>
56-
<ToggleButton value="right" aria-label="right aligned">
57-
<FormatAlignRightIcon />
58-
</ToggleButton>
59-
<ToggleButton value="justify" aria-label="justified" disabled>
60-
<FormatAlignJustifyIcon />
61-
</ToggleButton>
62-
</StyledToggleButtonGroup>
63-
</div>
42+
<StyledToggleButtonGroup
43+
value={alignment}
44+
exclusive
45+
onChange={handleAlignment}
46+
aria-label="text alignment"
47+
orientation="vertical"
48+
>
49+
<ToggleButton value="left" aria-label="left aligned">
50+
<FormatAlignLeftIcon />
51+
</ToggleButton>
52+
<ToggleButton value="center" aria-label="centered">
53+
<FormatAlignCenterIcon />
54+
</ToggleButton>
55+
<ToggleButton value="right" aria-label="right aligned">
56+
<FormatAlignRightIcon />
57+
</ToggleButton>
58+
<ToggleButton value="justify" aria-label="justified" disabled>
59+
<FormatAlignJustifyIcon />
60+
</ToggleButton>
61+
</StyledToggleButtonGroup>
6462
);
6563
}

0 commit comments

Comments
 (0)