From 387f5259a7757a415f1758e121fc3cc4f7c0dc66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
<71827178+bosiraphael@users.noreply.github.com>
Date: Mon, 9 Dec 2024 10:55:33 +0100
Subject: [PATCH] 8928 refactor page header buttons (#8952)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Closes #8928
---
.../components/PageFavoriteButton.tsx | 27 +++++++-----
.../components/RecordIndexPageHeader.tsx | 2 +
.../RecordIndexPageKanbanAddButton.tsx | 13 +-----
.../components/SignInBackgroundMockPage.tsx | 2 +-
.../PageHeaderOpenCommandMenuButton.tsx} | 14 ++++---
.../layout/page/components/PageAddButton.tsx | 11 ++---
.../ui/layout/page/components/PageHeader.tsx | 41 ++++++++++---------
.../components/ShowPageAddButton.tsx | 21 ++++------
.../RecordShowPageBaseHeader.tsx | 4 +-
.../src/input/button/components/Button.tsx | 3 ++
10 files changed, 70 insertions(+), 68 deletions(-)
rename packages/twenty-front/src/modules/ui/layout/{show-page/components/ShowPageMoreButton.tsx => page-header/components/PageHeaderOpenCommandMenuButton.tsx} (50%)
diff --git a/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx b/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
index 2891c48f46..d5c739df00 100644
--- a/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
+++ b/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton, IconHeart } from 'twenty-ui';
+import { Button, IconHeart } from 'twenty-ui';
type PageFavoriteButtonProps = {
isFavorite: boolean;
@@ -8,13 +8,18 @@ type PageFavoriteButtonProps = {
export const PageFavoriteButton = ({
isFavorite,
onClick,
-}: PageFavoriteButtonProps) => (
-
-);
+}: PageFavoriteButtonProps) => {
+ const title = isFavorite ? 'Remove from favorites' : 'Add to favorites';
+ return (
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
index 3eeec0aead..41e832883e 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
@@ -3,6 +3,7 @@ import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetada
import { RecordIndexPageKanbanAddButton } from '@/object-record/record-index/components/RecordIndexPageKanbanAddButton';
import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
import { recordIndexViewTypeState } from '@/object-record/record-index/states/recordIndexViewTypeState';
+import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
import { PageAddButton } from '@/ui/layout/page/components/PageAddButton';
import { PageHeader } from '@/ui/layout/page/components/PageHeader';
import { PageHotkeysEffect } from '@/ui/layout/page/components/PageHotkeysEffect';
@@ -52,6 +53,7 @@ export const RecordIndexPageHeader = () => {
) : (
))}
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx
index ace9040aee..c86ef48d6a 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx
@@ -12,11 +12,11 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { PageAddButton } from '@/ui/layout/page/components/PageAddButton';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
import { useCallback, useContext } from 'react';
import { useRecoilValue } from 'recoil';
-import { IconButton, IconPlus } from 'twenty-ui';
const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
width: 100%;
@@ -92,16 +92,7 @@ export const RecordIndexPageKanbanAddButton = () => {
- }
+ clickableComponent={}
dropdownId={dropdownId}
dropdownComponents={
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx
index 9b36b1541a..c8ede31324 100644
--- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx
@@ -20,7 +20,7 @@ export const SignInBackgroundMockPage = () => {
{}} />
- {}} />
+
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
similarity index 50%
rename from packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
rename to packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
index 2bac20781d..6553fc5eb2 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
@@ -1,17 +1,19 @@
-import { IconButton, IconDotsVertical } from 'twenty-ui';
+import { Button, IconDotsVertical } from 'twenty-ui';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-export const ShowPageMoreButton = () => {
+export const PageHeaderOpenCommandMenuButton = () => {
const { openCommandMenu } = useCommandMenu();
return (
-
);
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
index 3c1478f862..12dd70926e 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
@@ -1,17 +1,18 @@
-import { IconButton, IconPlus } from 'twenty-ui';
+import { Button, IconPlus } from 'twenty-ui';
type PageAddButtonProps = {
- onClick: () => void;
+ onClick?: () => void;
};
export const PageAddButton = ({ onClick }: PageAddButtonProps) => (
-
);
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
index 9b9827b54e..92ad7d505b 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
@@ -129,24 +129,6 @@ export const PageHeader = ({
)}
- {hasPaginationButtons && (
- <>
- navigateToPreviousRecord?.()}
- />
- navigateToNextRecord?.()}
- />
- >
- )}
{Icon && }
{title && (
@@ -159,7 +141,28 @@ export const PageHeader = ({
)}
- {children}
+
+
+ {hasPaginationButtons && (
+ <>
+ navigateToPreviousRecord?.()}
+ />
+ navigateToNextRecord?.()}
+ />
+ >
+ )}
+ {children}
+
);
};
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
index 7eb9f8360d..c1123c9f1b 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
@@ -1,11 +1,5 @@
import styled from '@emotion/styled';
-import {
- IconButton,
- IconCheckbox,
- IconNotes,
- IconPlus,
- MenuItem,
-} from 'twenty-ui';
+import { Button, IconCheckbox, IconNotes, IconPlus, MenuItem } from 'twenty-ui';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
@@ -28,7 +22,7 @@ export const ShowPageAddButton = ({
}: {
activityTargetObject: ActivityTargetableObject;
}) => {
- const { closeDropdown, toggleDropdown } = useDropdown('add-show-page');
+ const { closeDropdown } = useDropdown('add-show-page');
const openNote = useOpenCreateActivityDrawer({
activityObjectNameSingular: CoreObjectNameSingular.Note,
});
@@ -66,13 +60,14 @@ export const ShowPageAddButton = ({
}
dropdownComponents={
diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
index 40f4424825..a1d3266019 100644
--- a/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
@@ -3,8 +3,8 @@ import { PageFavoriteFoldersDropdown } from '@/favorites/components/PageFavorite
import { FAVORITE_FOLDER_PICKER_DROPDOWN_ID } from '@/favorites/favorite-folder-picker/constants/FavoriteFolderPickerDropdownId';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton';
-import { ShowPageMoreButton } from '@/ui/layout/show-page/components/ShowPageMoreButton';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
type RecordShowPageBaseHeaderProps = {
@@ -49,7 +49,7 @@ export const RecordShowPageBaseHeader = ({
targetObjectNameSingular: objectMetadataItem.nameSingular,
}}
/>
-
+
>
);
};
diff --git a/packages/twenty-ui/src/input/button/components/Button.tsx b/packages/twenty-ui/src/input/button/components/Button.tsx
index d9fae551b5..241482a96b 100644
--- a/packages/twenty-ui/src/input/button/components/Button.tsx
+++ b/packages/twenty-ui/src/input/button/components/Button.tsx
@@ -30,6 +30,7 @@ export type ButtonProps = {
target?: string;
dataTestId?: string;
shortcut?: string;
+ ariaLabel?: string;
} & React.ComponentProps<'button'>;
const StyledButton = styled('button', {
@@ -391,6 +392,7 @@ export const Button = ({
target,
dataTestId,
shortcut,
+ ariaLabel,
}: ButtonProps) => {
const theme = useTheme();
@@ -411,6 +413,7 @@ export const Button = ({
as={to ? Link : 'button'}
target={target}
data-testid={dataTestId}
+ aria-label={ariaLabel}
>
{Icon && }
{title}