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

Refactor icons passed as props with the new way (#1492)

Browse Source 
* Refactor icons passed as props with the new way

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Update more files

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Fix according to review

* Fix according to review

* Fix according to review

* Fix chromatic regressions

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2023-09-10 19:39:17 +01:00
committed by GitHub
parent 89fed80537
commit fb737e2021
82 changed files with 341 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
front/src/modules/ui/layout/components/PageHeader.tsx
View File

@ -1,12 +1,13 @@
import { type ComponentProps, type ReactNode, useCallback } from 'react';
import { type ComponentProps, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconButton } from '@/ui/button/components/IconButton';
import { IconButton, IconButtonSize } from '@/ui/button/components/IconButton';
import { IconChevronLeft } from '@/ui/icon/index';
import { IconComponent } from '@/ui/icon/types/IconComponent';
import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
import { navbarIconSize } from '@/ui/navbar/constants';
import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@ -63,28 +64,27 @@ const StyledPageActionContainer = styled.div`
gap: ${({ theme }) => theme.spacing(2)};
`;
type OwnProps = ComponentProps<'div'> & {
type PageHeaderProps = ComponentProps<'div'> & {
title: string;
hasBackButton?: boolean;
icon: ReactNode;
Icon: IconComponent;
children?: JSX.Element | JSX.Element[];
};
export function PageHeader({
title,
hasBackButton,
icon,
Icon,
children,
...props
}: OwnProps) {
}: PageHeaderProps) {
const navigate = useNavigate();
const navigateBack = useCallback(() => navigate(-1), [navigate]);
const isNavbarOpened = useRecoilValue(isNavbarOpenedState);
const iconSize = useIsMobile()
? navbarIconSize.mobile
: navbarIconSize.desktop;
const iconSize: IconButtonSize = useIsMobile() ? 'small' : 'medium';
const theme = useTheme();
return (
<StyledTopBarContainer {...props}>
@ -97,14 +97,15 @@ export function PageHeader({
{hasBackButton && (
<StyledTopBarButtonContainer>
<StyledBackIconButton
icon={<IconChevronLeft size={iconSize} />}
Icon={IconChevronLeft}
size={iconSize}
onClick={navigateBack}
variant="tertiary"
/>
</StyledTopBarButtonContainer>
)}
<StyledTopBarIconStyledTitleContainer>
{icon}
{Icon && <Icon size={theme.icon.size.md} />}
<StyledTitleContainer data-testid="top-bar-title">
<OverflowingTextWithTooltip text={title} />
</StyledTitleContainer>