scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-30 04:12:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

FIx minor issue related to gap between checkbox & menu item label (#8220)

Browse Source 
## Summary
This pull request addresses a minor issue reported in the #8171 , which
was causing misalignment in the content and overall theme spacing.

Fixes #8171

## Fix

> Removed the 5px padding based on the check if its non hoverable, the
current gap between the checkbox and the icon is 8px as expected.

> For the small variant the total size of the non hoverable component is
14x14 as mentioned in the design, for hoverable its 24x24

> For the Large variant the total size of the non hoverable component is
20x20 as mentioned in the design, for hoverable
its 32x32 

> checked for the hoverable checkbox component as well working as
expected



## Screenshot for the fixes

<img width="345" alt="Screenshot 2024-10-30 at 10 49 39 PM"
src="https://github.com/user-attachments/assets/2b5cadb7-67d2-4c61-bd40-0d5a12ae48d0">


#### Thank you for considering this contribution! I look forward to your
feedback.

---------

Co-authored-by: Karan Parmar <karan.parmar@PE-HO-MAC-185.local>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
parmarKaran01
2024-11-18 22:20:34 +05:30
committed by GitHub
parent 9810c5b6f2
commit 316537a68a
1 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/twenty-ui/src/input/components/Checkbox.tsx
View File

@@ -43,8 +43,13 @@ type InputProps = {
}; };
const StyledInputContainer = styled.div<InputProps>` const StyledInputContainer = styled.div<InputProps>`
--size: ${({ checkboxSize }) => --size: ${({ checkboxSize, hoverable }) => {
checkboxSize === CheckboxSize.Large ? '32px' : '24px'}; if (hoverable === true) {
return checkboxSize === CheckboxSize.Large ? '32px' : '24px';
} else {
return checkboxSize === CheckboxSize.Large ? '20px' : '14px';
}
}};
align-items: center; align-items: center;
border-radius: ${({ theme, shape }) => border-radius: ${({ theme, shape }) =>
shape === CheckboxShape.Rounded shape === CheckboxShape.Rounded
@@ -53,10 +58,15 @@ const StyledInputContainer = styled.div<InputProps>`
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
display: flex; display: flex;
padding: ${({ theme, checkboxSize }) => padding: ${({ theme, checkboxSize, hoverable }) => {
checkboxSize === CheckboxSize.Large if (hoverable === true) {
return checkboxSize === CheckboxSize.Large
? theme.spacing(1.5) ? theme.spacing(1.5)
: theme.spacing(1.25)}; : theme.spacing(1.25);
} else {
return 0;
}
}};
position: relative; position: relative;
${({ hoverable, isChecked, theme, indeterminate, disabled }) => { ${({ hoverable, isChecked, theme, indeterminate, disabled }) => {
if (!hoverable || disabled === true) return ''; if (!hoverable || disabled === true) return '';