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

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

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