Skip to content

Commit 8ce65bc

Browse files
bernardobelchiorbernardobelchior
committed
Revamp toolbar
1 parent 45b1379 commit 8ce65bc

File tree

2 files changed

+82
-66
lines changed

2 files changed

+82
-66
lines changed

‎docs/data/charts/toolbar/ChartsToolbarCustomToolbar.js‎

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -62,47 +62,55 @@ const ResetZoomButton = React.forwardRef(function ResetZoomButton(props, ref) {
6262

6363
function CustomToolbar() {
6464
return (
65-
<Toolbar>
65+
<Stack
66+
width="100%"
67+
direction="row"
68+
alignItems="center"
69+
justifyContent="space-between"
70+
gap={1}
71+
flexWrap="wrap"
72+
>
6673
<Typography
67-
flexGrow={1}
68-
flexShrink={0}
6974
justifyContent="center"
7075
sx={{ textAlign: { xs: 'center', sm: 'left' } }}
76+
variant="h6"
7177
>
7278
Chart with Custom Toolbar
7379
</Typography>
74-
<Stack direction="row" flex={1} justifyContent={{ xs: 'center', sm: 'end' }}>
75-
<Tooltip title="Zoom in">
76-
<ChartsToolbarZoomInTrigger render={<ToolbarButton />}>
77-
<ZoomInIcon />
78-
</ChartsToolbarZoomInTrigger>
79-
</Tooltip>
80-
<Tooltip title="Zoom out">
81-
<ChartsToolbarZoomOutTrigger render={<ToolbarButton />}>
82-
<ZoomOutIcon />
83-
</ChartsToolbarZoomOutTrigger>
84-
</Tooltip>
80+
<Stack>
81+
<Toolbar>
82+
<Tooltip title="Zoom in">
83+
<ChartsToolbarZoomInTrigger render={<ToolbarButton size="small" />}>
84+
<ZoomInIcon />
85+
</ChartsToolbarZoomInTrigger>
86+
</Tooltip>
87+
<Tooltip title="Zoom out">
88+
<ChartsToolbarZoomOutTrigger render={<ToolbarButton size="small" />}>
89+
<ZoomOutIcon />
90+
</ChartsToolbarZoomOutTrigger>
91+
</Tooltip>
8592

86-
<ResetZoomButton>Reset</ResetZoomButton>
87-
<VerticalDivider orientation="vertical" />
88-
<Tooltip title="Print">
89-
<ChartsToolbarPrintExportTrigger
90-
render={<ToolbarButton render={<IconButton />} />}
91-
options={{ fileName: 'ChartWithCustomToolbar' }}
92-
>
93-
<PrintIcon />
94-
</ChartsToolbarPrintExportTrigger>
95-
</Tooltip>
96-
<Tooltip title="Export as PNG">
97-
<ChartsToolbarImageExportTrigger
98-
render={<ToolbarButton render={<IconButton />} />}
99-
options={{ type: 'image/png', fileName: 'ChartWithCustomToolbar' }}
100-
>
101-
<PhotoIcon />
102-
</ChartsToolbarImageExportTrigger>
103-
</Tooltip>
93+
<ResetZoomButton>Reset</ResetZoomButton>
94+
<VerticalDivider orientation="vertical" />
95+
<Tooltip title="Print">
96+
<ChartsToolbarPrintExportTrigger
97+
render={<ToolbarButton render={<IconButton size="small" />} />}
98+
options={{ fileName: 'ChartWithCustomToolbar' }}
99+
>
100+
<PrintIcon />
101+
</ChartsToolbarPrintExportTrigger>
102+
</Tooltip>
103+
<Tooltip title="Export as PNG">
104+
<ChartsToolbarImageExportTrigger
105+
render={<ToolbarButton render={<IconButton size="small" />} />}
106+
options={{ type: 'image/png', fileName: 'ChartWithCustomToolbar' }}
107+
>
108+
<PhotoIcon />
109+
</ChartsToolbarImageExportTrigger>
110+
</Tooltip>
111+
</Toolbar>
104112
</Stack>
105-
</Toolbar>
113+
</Stack>
106114
);
107115
}
108116

‎docs/data/charts/toolbar/ChartsToolbarCustomToolbar.tsx‎

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -64,47 +64,55 @@ const ResetZoomButton = React.forwardRef<HTMLButtonElement, React.PropsWithChild
6464

6565
function CustomToolbar() {
6666
return (
67-
<Toolbar>
67+
<Stack
68+
width="100%"
69+
direction="row"
70+
alignItems="center"
71+
justifyContent="space-between"
72+
gap={1}
73+
flexWrap="wrap"
74+
>
6875
<Typography
69-
flexGrow={1}
70-
flexShrink={0}
7176
justifyContent="center"
7277
sx={{ textAlign: { xs: 'center', sm: 'left' } }}
78+
variant="h6"
7379
>
7480
Chart with Custom Toolbar
7581
</Typography>
76-
<Stack direction="row" flex={1} justifyContent={{ xs: 'center', sm: 'end' }}>
77-
<Tooltip title="Zoom in">
78-
<ChartsToolbarZoomInTrigger render={<ToolbarButton />}>
79-
<ZoomInIcon />
80-
</ChartsToolbarZoomInTrigger>
81-
</Tooltip>
82-
<Tooltip title="Zoom out">
83-
<ChartsToolbarZoomOutTrigger render={<ToolbarButton />}>
84-
<ZoomOutIcon />
85-
</ChartsToolbarZoomOutTrigger>
86-
</Tooltip>
82+
<Stack>
83+
<Toolbar>
84+
<Tooltip title="Zoom in">
85+
<ChartsToolbarZoomInTrigger render={<ToolbarButton size="small" />}>
86+
<ZoomInIcon />
87+
</ChartsToolbarZoomInTrigger>
88+
</Tooltip>
89+
<Tooltip title="Zoom out">
90+
<ChartsToolbarZoomOutTrigger render={<ToolbarButton size="small" />}>
91+
<ZoomOutIcon />
92+
</ChartsToolbarZoomOutTrigger>
93+
</Tooltip>
8794

88-
<ResetZoomButton>Reset</ResetZoomButton>
89-
<VerticalDivider orientation="vertical" />
90-
<Tooltip title="Print">
91-
<ChartsToolbarPrintExportTrigger
92-
render={<ToolbarButton render={<IconButton />} />}
93-
options={{ fileName: 'ChartWithCustomToolbar' }}
94-
>
95-
<PrintIcon />
96-
</ChartsToolbarPrintExportTrigger>
97-
</Tooltip>
98-
<Tooltip title="Export as PNG">
99-
<ChartsToolbarImageExportTrigger
100-
render={<ToolbarButton render={<IconButton />} />}
101-
options={{ type: 'image/png', fileName: 'ChartWithCustomToolbar' }}
102-
>
103-
<PhotoIcon />
104-
</ChartsToolbarImageExportTrigger>
105-
</Tooltip>
95+
<ResetZoomButton>Reset</ResetZoomButton>
96+
<VerticalDivider orientation="vertical" />
97+
<Tooltip title="Print">
98+
<ChartsToolbarPrintExportTrigger
99+
render={<ToolbarButton render={<IconButton size="small" />} />}
100+
options={{ fileName: 'ChartWithCustomToolbar' }}
101+
>
102+
<PrintIcon />
103+
</ChartsToolbarPrintExportTrigger>
104+
</Tooltip>
105+
<Tooltip title="Export as PNG">
106+
<ChartsToolbarImageExportTrigger
107+
render={<ToolbarButton render={<IconButton size="small" />} />}
108+
options={{ type: 'image/png', fileName: 'ChartWithCustomToolbar' }}
109+
>
110+
<PhotoIcon />
111+
</ChartsToolbarImageExportTrigger>
112+
</Tooltip>
113+
</Toolbar>
106114
</Stack>
107-
</Toolbar>
115+
</Stack>
108116
);
109117
}
110118

0 commit comments

Comments
 (0)