Skip to content
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

Fix spaceing between buttons #3967

Closed
wants to merge 8 commits into from
Closed

Fix spaceing between buttons #3967

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a424441
fix spaces between btns
AsmaaNabilBakr Aug 27, 2023
9f90111
fix spacing in grouping btns
AsmaaNabilBakr Aug 27, 2023
a34fd8f
remove unused imports
AsmaaNabilBakr Aug 27, 2023
03c657a
make ui-prettify
AsmaaNabilBakr Aug 27, 2023
f679b50
update snaps
AsmaaNabilBakr Aug 27, 2023
b33e862
fix style
AsmaaNabilBakr Aug 30, 2023
0d33250
Merge branch 'main' into fix-buttons
AsmaaNabilBakr Aug 30, 2023
bc56b9c
Merge branch 'main' into fix-buttons
AsmaaNabilBakr Sep 1, 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: 2 additions & 0 deletions ui/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const Button = styled(UnstyledButton)`
line-height: 1;
border-radius: ${(props) => props.theme.borderRadius.soft};
font-weight: 600;
margin-right: ${(props) => props.theme.spacing.small};
}
&.MuiButton-outlined {
padding: 8px 12px;
Expand All @@ -60,6 +61,7 @@ export const IconButton = styled(UnstyledButton)`
min-width: 38px;
height: 38px;
padding: 0;
margin-right: 0;
}
&.MuiButton-text {
padding: 0;
Expand Down
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}>
<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
7 changes: 7 additions & 0 deletions ui/components/Page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,4 +103,11 @@ export default styled(Page)`
.MuiAlert-root {
width: 100%;
}
.MuiButtonGroup-root {
button {
&:first-child {
margin-right: 0;
}
}
}
`;
2 changes: 0 additions & 2 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 @@ -66,7 +65,6 @@ const SyncActions = ({
disabled={suspended}
hideDropdown={hideDropdown}
/>
<Spacer padding="xs" />
<Button onClick={() => suspend.mutateAsync()} loading={suspend.isLoading}>
{suspended ? "Resume" : "Suspend"}
</Button>
Expand Down
13 changes: 8 additions & 5 deletions ui/components/SyncButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const ArrowDropDown = styled(IconButton)`
&.MuiButton-outlined {
//2px = MUI radius
border-radius: 0 2px 2px 0;
margin-right: ${(props) => props.theme.spacing.small};
}
&.MuiButton-outlinedPrimary {
border-color: ${(props) => props.theme.colors.neutral20};
Expand All @@ -32,12 +33,14 @@ export const ArrowDropDown = styled(IconButton)`

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 ;
margin-right: 0 ;
&.MuiButton-outlined.Mui-disabled {
border-right: none };
}`};
}
`;

Expand Down
4 changes: 4 additions & 0 deletions ui/components/__tests__/__snapshots__/Page.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,10 @@ exports[`Page snapshots default 1`] = `
width: 100%;
}

.c14 .MuiButtonGroup-root button:first-child {
margin-right: 0;
}

<div
className="c0 c1"
>
Expand Down
50 changes: 14 additions & 36 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 @@ -33,10 +33,6 @@ exports[`SyncActions snapshots hideDropdown 1`] = `
align-items: start;
}

.c6 {
padding: 8px;
}

.c3.MuiButton-root {
height: 32px;
font-size: 12px;
Expand All @@ -47,21 +43,14 @@ exports[`SyncActions snapshots hideDropdown 1`] = `
line-height: 1;
border-radius: 2px;
font-weight: 600;
margin-right: 12px;
}

.c3.MuiButton-outlined {
padding: 8px 12px;
}

.c4.MuiButton-outlined {
margin-right: 0;
}

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

.c5 {
.c4 {
position: absolute;
overflow: hidden;
background: #fff;
Expand Down Expand Up @@ -95,7 +84,7 @@ exports[`SyncActions snapshots hideDropdown 1`] = `
className="c2"
>
<button
className="MuiButtonBase-root MuiButton-root MuiButton-outlined c3 c4 MuiButton-outlinedPrimary MuiButton-disableElevation"
className="MuiButtonBase-root MuiButton-root MuiButton-outlined c3 MuiButton-outlinedPrimary MuiButton-disableElevation"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -120,7 +109,7 @@ exports[`SyncActions snapshots hideDropdown 1`] = `
</button>
</div>
<div
className="c2 c5"
className="c2 c4"
>
<button
className="MuiButtonBase-root MuiButton-root MuiButton-outlined c3 MuiButton-outlinedPrimary MuiButton-disableElevation"
Expand Down Expand Up @@ -153,9 +142,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 @@ -278,10 +264,6 @@ exports[`SyncActions snapshots non-suspended 1`] = `
width: 16px;
}

.c10 {
padding: 8px;
}

.c3.MuiButton-root {
height: 32px;
font-size: 12px;
Expand All @@ -292,6 +274,7 @@ exports[`SyncActions snapshots non-suspended 1`] = `
line-height: 1;
border-radius: 2px;
font-weight: 600;
margin-right: 12px;
}

.c3.MuiButton-outlined {
Expand All @@ -303,6 +286,7 @@ exports[`SyncActions snapshots non-suspended 1`] = `
min-width: 38px;
height: 38px;
padding: 0;
margin-right: 0;
}

.c5.MuiButton-text {
Expand All @@ -311,6 +295,7 @@ exports[`SyncActions snapshots non-suspended 1`] = `

.c6.MuiButton-outlined {
border-radius: 0 2px 2px 0;
margin-right: 12px;
}

.c6.MuiButton-outlinedPrimary {
Expand All @@ -328,12 +313,12 @@ exports[`SyncActions snapshots non-suspended 1`] = `
}

.c4.MuiButton-outlined {
margin-right: 0;
border-radius: 2px 0 0 2px;
border-right: none;
margin-right: 0;
}

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

Expand Down Expand Up @@ -466,9 +451,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 @@ -591,10 +573,6 @@ exports[`SyncActions snapshots suspended 1`] = `
width: 16px;
}

.c10 {
padding: 8px;
}

.c3.MuiButton-root {
height: 32px;
font-size: 12px;
Expand All @@ -605,6 +583,7 @@ exports[`SyncActions snapshots suspended 1`] = `
line-height: 1;
border-radius: 2px;
font-weight: 600;
margin-right: 12px;
}

.c3.MuiButton-outlined {
Expand All @@ -616,6 +595,7 @@ exports[`SyncActions snapshots suspended 1`] = `
min-width: 38px;
height: 38px;
padding: 0;
margin-right: 0;
}

.c5.MuiButton-text {
Expand All @@ -624,6 +604,7 @@ exports[`SyncActions snapshots suspended 1`] = `

.c6.MuiButton-outlined {
border-radius: 0 2px 2px 0;
margin-right: 12px;
}

.c6.MuiButton-outlinedPrimary {
Expand All @@ -641,12 +622,12 @@ exports[`SyncActions snapshots suspended 1`] = `
}

.c4.MuiButton-outlined {
margin-right: 0;
border-radius: 2px 0 0 2px;
border-right: none;
margin-right: 0;
}

.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
1 change: 1 addition & 0 deletions ui/components/__tests__/__snapshots__/YamlView.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ exports[`YamlView snapshots renders 1`] = `
min-width: 38px;
height: 38px;
padding: 0;
margin-right: 0;
}

.c2.MuiButton-text {
Expand Down