admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Center InternalDatePicker Clear button (#3265)

Browse Source 
* Center InternalDatePicker Clear button

* Add back Clear button padding

* Center date picker clear button through props

* Refactor StyledButtonContainer padding

* Refactor StyledButtonContainer to extend MenuItem

* Use custom date picker Clear button implementation

* Undo MenuItem changes

* Refactor new date picker code

* Refactor datepicker solution

* Rename StyledButtonContent to StyledButton

* Remove unnecessary menu-item class
This commit is contained in:
Leo Alfred
2024-01-17 05:05:16 -06:00
committed by GitHub
parent 4316950cf9
commit 8864528d55
2 changed files with 15 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx
View File

@ -3,7 +3,8 @@ import ReactDatePicker from 'react-datepicker';
import styled from '@emotion/styled';
import { IconCalendarX } from '@/ui/display/icon';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
import { StyledHoverableMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase';
import { overlayBackground } from '@/ui/theme/constants/effects';
import 'react-datepicker/dist/react-datepicker.css';
@ -226,20 +227,15 @@ const StyledContainer = styled.div`
}
`;
const StyledButtonContainer = styled.div`
align-items: center;
align-self: stretch;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(2)};
const StyledButtonContainer = styled(StyledHoverableMenuItemBase)`
width: auto;
height: ${({ theme }) => theme.spacing(8)};
padding: 0 ${({ theme }) => theme.spacing(2)};
margin: ${({ theme }) => theme.spacing(2)};
`;
& .menu-item {
height: ${({ theme }) => theme.spacing(8)};
margin-bottom: ${({ theme }) => theme.spacing(1)};
margin-top: ${({ theme }) => theme.spacing(1)};
padding: 0 ${({ theme }) => theme.spacing(2)};
width: fit-content;
}
const StyledButton = styled(MenuItemLeftContent)`
justify-content: center;
`;
export type InternalDatePickerProps = {
@ -281,13 +277,8 @@ export const InternalDatePicker = ({
></ReactDatePicker>
</div>
{clearable && (
<StyledButtonContainer>
<MenuItem
text="Clear"
LeftIcon={IconCalendarX}
onClick={handleClear}
className="menu-item"
/>
<StyledButtonContainer onClick={handleClear} isMenuOpen={false}>
<StyledButton LeftIcon={IconCalendarX} text="Clear" />
</StyledButtonContainer>
)}
</StyledContainer>

4
packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
View File

@ -10,12 +10,14 @@ import {
} from './StyledMenuItemBase';
type MenuItemLeftContentProps = {
className?: string;
LeftIcon: IconComponent | null | undefined;
showGrip?: boolean;
text: string;
};
export const MenuItemLeftContent = ({
className,
LeftIcon,
text,
showGrip = false,
@ -23,7 +25,7 @@ export const MenuItemLeftContent = ({
const theme = useTheme();
return (
<StyledMenuItemLeftContent>
<StyledMenuItemLeftContent className={className}>
{showGrip && (
<IconGripVertical
size={theme.icon.size.md}