Skip to content

fix Space in between buttons #3985

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AsmaaNabilBakr merged 3 commits into from
Sep 6, 2023
Merged

fix Space in between buttons #3985

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4db57c4
fix spaces
AsmaaNabilBakr Sep 4, 2023
fda12b2
update snaps
AsmaaNabilBakr Sep 4, 2023
eff0c6c
Merge branch 'main' into adjust-spacing
AsmaaNabilBakr Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/components/CheckboxActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ function CheckboxActions({ className, checked = [], rows = [] }: Props) {
}, [checked, rows]);

return (
<Flex start align className={className} gap="8">
<Flex start align className={className} gap="12">
<DefaultSync reqObjects={reqObjects} />
<DefaultSuspend reqObjects={reqObjects} suspend={true} />
<DefaultSuspend reqObjects={reqObjects} suspend={false} />
Expand Down
6 changes: 1 addition & 5 deletions ui/components/CustomActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
import * as React from "react";
import Spacer from "./Spacer";

function CustomActions({ actions }: { actions: JSX.Element[] }) {
return actions?.length > 0 ? (
<>
{actions?.map((action, index) => (
<React.Fragment key={index}>
<Spacer padding="xs" />
{action}
</React.Fragment>
<React.Fragment key={index}>{action}</React.Fragment>
))}
</>
) : null;
Expand Down
4 changes: 1 addition & 3 deletions ui/components/SyncActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { Kind } from "../lib/api/core/types.pb";
import Button from "./Button";
import CustomActions from "./CustomActions";
import Flex from "./Flex";
import Spacer from "./Spacer";
import SyncButton from "./SyncButton";

interface Props {
Expand Down Expand Up @@ -59,14 +58,13 @@ const SyncActions = ({
: (opts) => sync.mutateAsync(opts);

return (
<Flex start className={className}>
<Flex start className={className} gap="12">
<SyncButton
onClick={syncHandler}
loading={sync.isLoading}
disabled={suspended}
hideDropdown={hideDropdown}
/>
<Spacer padding="xs" />
<Button onClick={() => suspend.mutateAsync()} loading={suspend.isLoading}>
{suspended ? "Resume" : "Suspend"}
</Button>
Expand Down
7 changes: 3 additions & 4 deletions ui/components/SyncButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,9 @@ const Sync = styled(Button)<{ $hideDropdown: boolean }>`
&.MuiButton-outlined {
margin-right: 0;
${(props) =>
!props.$hideDropdown && `border-radius: 2px 0 0 2px; border-right: none`}
}
&.MuiButton-outlined.Mui-disabled {
border-right: none;
!props.$hideDropdown &&
`border-radius: 2px 0 0 2px; border-right: none; &.MuiButton-outlined.Mui-disabled {
border-right: none };`}
}
`;

Expand Down
32 changes: 5 additions & 27 deletions ui/components/__tests__/__snapshots__/SyncActions.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ exports[`SyncActions snapshots hideDropdown 1`] = `
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
gap: 12px;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
Expand All @@ -33,10 +34,6 @@ exports[`SyncActions snapshots hideDropdown 1`] = `
align-items: start;
}

.c6 {
padding: 8px;
}

.c3.MuiButton-root {
height: 32px;
font-size: 12px;
Expand All @@ -57,10 +54,6 @@ exports[`SyncActions snapshots hideDropdown 1`] = `
margin-right: 0;
}

.c4.MuiButton-outlined.Mui-disabled {
border-right: none;
}

.c5 {
position: absolute;
overflow: hidden;
Expand Down Expand Up @@ -153,9 +146,6 @@ exports[`SyncActions snapshots hideDropdown 1`] = `
</button>
</div>
</div>
<div
className="c6"
/>
<button
className="MuiButtonBase-root MuiButton-root MuiButton-outlined c3 MuiButton-outlinedPrimary MuiButton-disableElevation"
disabled={false}
Expand Down Expand Up @@ -196,6 +186,7 @@ exports[`SyncActions snapshots non-suspended 1`] = `
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
gap: 12px;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
Expand Down Expand Up @@ -278,10 +269,6 @@ exports[`SyncActions snapshots non-suspended 1`] = `
width: 16px;
}

.c10 {
padding: 8px;
}

.c3.MuiButton-root {
height: 32px;
font-size: 12px;
Expand Down Expand Up @@ -333,7 +320,7 @@ exports[`SyncActions snapshots non-suspended 1`] = `
border-right: none;
}

.c4.MuiButton-outlined.Mui-disabled {
.c4.MuiButton-outlined.MuiButton-outlined.Mui-disabled {
border-right: none;
}

Expand Down Expand Up @@ -466,9 +453,6 @@ exports[`SyncActions snapshots non-suspended 1`] = `
</button>
</div>
</div>
<div
className="c10"
/>
<button
className="MuiButtonBase-root MuiButton-root MuiButton-outlined c3 MuiButton-outlinedPrimary MuiButton-disableElevation"
disabled={false}
Expand Down Expand Up @@ -509,6 +493,7 @@ exports[`SyncActions snapshots suspended 1`] = `
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
gap: 12px;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
Expand Down Expand Up @@ -591,10 +576,6 @@ exports[`SyncActions snapshots suspended 1`] = `
width: 16px;
}

.c10 {
padding: 8px;
}

.c3.MuiButton-root {
height: 32px;
font-size: 12px;
Expand Down Expand Up @@ -646,7 +627,7 @@ exports[`SyncActions snapshots suspended 1`] = `
border-right: none;
}

.c4.MuiButton-outlined.Mui-disabled {
.c4.MuiButton-outlined.MuiButton-outlined.Mui-disabled {
border-right: none;
}

Expand Down Expand Up @@ -782,9 +763,6 @@ exports[`SyncActions snapshots suspended 1`] = `
</button>
</div>
</div>
<div
className="c10"
/>
<button
className="MuiButtonBase-root MuiButton-root MuiButton-outlined c3 MuiButton-outlinedPrimary MuiButton-disableElevation"
disabled={false}
Expand Down