Skip to content

Commit

Permalink
Adjust the spacings inside Toolbar and DataGridToolbar (#3214)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesricky
jamesricky authored Jan 20, 2025
1 parent af350d0 commit 3ddc227
Show file tree
Hide file tree
Showing 7 changed files with 104 additions and 114 deletions.
5 changes: 5 additions & 0 deletions .changeset/rude-moons-help.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@comet/admin": patch
---

Adjust the spacings inside `Toolbar` and `DataGridToolbar` to match the Comet design
25 changes: 21 additions & 4 deletions packages/admin/admin/src/common/toolbar/Toolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,18 @@ const TopBar = createComponentSlot("div")<ToolbarClassKey>({
display: flex;
align-items: center;
gap: ${theme.spacing(2)};
padding-left: ${theme.spacing(4)};
padding-right: ${theme.spacing(4)};
padding-left: ${theme.spacing(2)};
padding-right: ${theme.spacing(2)};
${theme.breakpoints.up("sm")} {
padding-left: ${theme.spacing(2)};
padding-right: ${theme.spacing(2)};
}
${theme.breakpoints.up("md")} {
padding-left: ${theme.spacing(4)};
padding-right: ${theme.spacing(4)};
}
`,
);

Expand All @@ -73,11 +83,18 @@ const BottomBar = createComponentSlot(MuiToolbar)<ToolbarClassKey>({
border-top: solid 1px ${theme.palette.grey["50"]};
box-sizing: border-box;
min-height: 60px;
padding: 0 5px;
padding-left: ${theme.spacing(2)};
padding-right: ${theme.spacing(2)};
${theme.breakpoints.up("sm")} {
min-height: 60px;
padding: 0 10px;
padding-left: ${theme.spacing(2)};
padding-right: ${theme.spacing(2)};
}
${theme.breakpoints.up("md")} {
padding-left: ${theme.spacing(4)};
padding-right: ${theme.spacing(4)};
}
// necessary to override strange MUI default styling
Expand Down
4 changes: 0 additions & 4 deletions packages/admin/admin/src/common/toolbar/actions/ToolbarActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,6 @@ const Root = createComponentSlot("div")<ToolbarActionsClassKey>({
display: flex;
align-items: center;
gap: ${theme.spacing(2)};
${theme.breakpoints.up("md")} {
gap: ${theme.spacing(4)};
}
`,
);

Expand Down
6 changes: 1 addition & 5 deletions packages/admin/admin/src/common/toolbar/item/ToolbarItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,7 @@ const Root = createComponentSlot("div")<ToolbarItemClassKey>({
display: flex;
justify-items: center;
align-items: center;
padding: 0 ${theme.spacing(1)};
${theme.breakpoints.up("sm")} {
padding: 0 ${theme.spacing(1)};
}
padding-right: ${theme.spacing(2)};
`,
);

Expand Down
29 changes: 8 additions & 21 deletions packages/admin/cms-admin/src/pages/pageSearch/PageSearch.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { styled } from "@mui/material/styles";

import { SearchInput } from "../../common/SearchInput";
import { PageSearchApi } from "./usePageSearch";

Expand All @@ -11,24 +9,13 @@ interface PageSearchProps {

export function PageSearch({ query, onQueryChange, pageSearchApi }: PageSearchProps) {
return (
<Root>
<SearchInput
query={query}
onQueryChange={onQueryChange}
currentMatch={pageSearchApi.currentMatch}
totalMatches={pageSearchApi.totalMatches}
jumpToPreviousMatch={pageSearchApi.jumpToPreviousMatch}
jumpToNextMatch={pageSearchApi.jumpToNextMatch}
/>
</Root>
<SearchInput
query={query}
onQueryChange={onQueryChange}
currentMatch={pageSearchApi.currentMatch}
totalMatches={pageSearchApi.totalMatches}
jumpToPreviousMatch={pageSearchApi.jumpToPreviousMatch}
jumpToNextMatch={pageSearchApi.jumpToNextMatch}
/>
);
}

const Root = styled("div")`
display: flex;
flex: 1;
justify-content: center;
align-items: center;
margin-left: 10px;
margin-right: 10px;
`;
15 changes: 10 additions & 5 deletions packages/admin/cms-admin/src/pages/pagesPage/PagesPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
StackSwitch,
Toolbar,
ToolbarActions,
ToolbarItem,
useEditDialog,
useFocusAwarePolling,
useStoredState,
Expand Down Expand Up @@ -138,11 +139,15 @@ export function PagesPage({
<StackSwitch>
<StackPage name="table">
<Toolbar scopeIndicator={renderContentScopeIndicator(scope)}>
<PageSearch query={query} onQueryChange={setQuery} pageSearchApi={pageSearchApi} />
<FormControlLabel
control={<Switch checked={showArchive} color="primary" onChange={handleArchiveToggleClick} />}
label={<FormattedMessage id="comet.pages.pages.archivedItems" defaultMessage="Archived items" />}
/>
<ToolbarItem sx={{ flexGrow: 1 }}>
<PageSearch query={query} onQueryChange={setQuery} pageSearchApi={pageSearchApi} />
</ToolbarItem>
<ToolbarItem>
<FormControlLabel
control={<Switch checked={showArchive} color="primary" onChange={handleArchiveToggleClick} />}
label={<FormattedMessage id="comet.pages.pages.archivedItems" defaultMessage="Archived items" />}
/>
</ToolbarItem>
<ToolbarActions>
<Button
variant="contained"
Expand Down
134 changes: 59 additions & 75 deletions storybook/src/docs/components/Toolbar/Toolbar.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
useStackSwitchApi,
} from "@comet/admin";
import { ChevronLeft, CometColor, Search } from "@comet/admin-icons";
import { Autocomplete, Button, Grid, IconButton, InputAdornment, InputBase, Typography } from "@mui/material";
import { Autocomplete, Button, IconButton, InputAdornment, InputBase, Typography } from "@mui/material";
import { useState } from "react";
import { Form } from "react-final-form";
import { FormattedMessage } from "react-intl";
Expand Down Expand Up @@ -70,30 +70,26 @@ export const Breadcrumbs = () => {
<ToolbarActions>
<StackSwitchApiContext.Consumer>
{(stackSwitchApi) => (
<Grid container spacing={4}>
<Grid item>
<Button
color="primary"
variant="contained"
onClick={() => {
stackSwitchApi.activatePage("page-1", "details");
}}
>
1
</Button>
</Grid>
<Grid item>
<Button
color="primary"
variant="contained"
onClick={() => {
stackSwitchApi.activatePage("page-2", "details");
}}
>
2
</Button>
</Grid>
</Grid>
<>
<Button
color="primary"
variant="contained"
onClick={() => {
stackSwitchApi.activatePage("page-1", "details");
}}
>
1
</Button>
<Button
color="primary"
variant="contained"
onClick={() => {
stackSwitchApi.activatePage("page-2", "details");
}}
>
2
</Button>
</>
)}
</StackSwitchApiContext.Consumer>
</ToolbarActions>
Expand Down Expand Up @@ -131,9 +127,9 @@ export const FillSpaceLeft = {
return (
<Toolbar>
<FillSpace />
<ToolbarItem>
<ToolbarActions>
<Typography>Item</Typography>
</ToolbarItem>
</ToolbarActions>
</Toolbar>
);
},
Expand Down Expand Up @@ -184,30 +180,24 @@ export const FillSpaceMiddle2 = {
</ToolbarItem>
<FillSpace />
<ToolbarActions>
<Grid container spacing={4}>
<Grid item>
<Button
color="primary"
variant="contained"
onClick={() => {
alert("clicked Action 1");
}}
>
Action 1
</Button>
</Grid>
<Grid item>
<Button
color="secondary"
variant="contained"
onClick={() => {
alert("clicked Action 2");
}}
>
Action 2
</Button>
</Grid>
</Grid>
<Button
color="primary"
variant="contained"
onClick={() => {
alert("clicked Action 1");
}}
>
Action 1
</Button>
<Button
color="secondary"
variant="contained"
onClick={() => {
alert("clicked Action 2");
}}
>
Action 2
</Button>
</ToolbarActions>
<FillSpace />
<ToolbarItem>
Expand Down Expand Up @@ -288,30 +278,24 @@ export const ToolbarActionsTwoActions = {
<ToolbarAutomaticTitleItem />
<FillSpace />
<ToolbarActions>
<Grid container spacing={4}>
<Grid item>
<Button
color="primary"
variant="contained"
onClick={() => {
alert("clicked Action 1");
}}
>
Action 1
</Button>
</Grid>
<Grid item>
<Button
color="secondary"
variant="contained"
onClick={() => {
alert("clicked Action 2");
}}
>
Action 2
</Button>
</Grid>
</Grid>
<Button
color="primary"
variant="contained"
onClick={() => {
alert("clicked Action 1");
}}
>
Action 1
</Button>
<Button
color="secondary"
variant="contained"
onClick={() => {
alert("clicked Action 2");
}}
>
Action 2
</Button>
</ToolbarActions>
</Toolbar>
);
Expand Down

0 comments on commit 3ddc227

Please sign in to comment.