8928 refactor page header buttons (#8952)

Closes #8928 <img width="1296" alt="Capture d’écran 2024-12-09 à 10 26 37" src="https://github.com/user-attachments/assets/f33202b0-9c11-48da-8daa-e867d62a1803"> <img width="1296" alt="Capture d’écran 2024-12-09 à 10 26 54" src="https://github.com/user-attachments/assets/a94f89d4-ca12-403f-bfcb-12168a82f77c">
twentyhq · Dec 9, 2024 · 387f525 · 387f525
1 parent ef0ae25
commit 387f525
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 68 deletions.
diff --git 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) => (
-  <IconButton
-    Icon={IconHeart}
-    size="medium"
-    variant="secondary"
-    data-testid="add-button"
-    accent={isFavorite ? 'danger' : 'default'}
-    onClick={onClick}
-  />
-);
+}: PageFavoriteButtonProps) => {
+  const title = isFavorite ? 'Remove from favorites' : 'Add to favorites';
+  return (
+    <Button
+      Icon={IconHeart}
+      dataTestId="favorite-button"
+      size="small"
+      variant="secondary"
+      accent={isFavorite ? 'danger' : 'default'}
+      title={title}
+      onClick={onClick}
+      ariaLabel={title}
+    />
+  );
+};
diff --git a/.../twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx b/.../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 = () => {
         ) : (
           <RecordIndexPageKanbanAddButton />
         ))}
+      <PageHeaderOpenCommandMenuButton />
     </PageHeader>
   );
 };
diff --git a/...ront/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx b/...ront/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 = () => {
     <Dropdown
       dropdownMenuWidth="200px"
       dropdownPlacement="bottom-start"
-      clickableComponent={
-        <IconButton
-          Icon={IconPlus}
-          dataTestId="add-button"
-          size="medium"
-          variant="secondary"
-          accent="default"
-          ariaLabel="Add"
-        />
-      }
+      clickableComponent={<PageAddButton />}
       dropdownId={dropdownId}
       dropdownComponents={
         <StyledDropDownMenu>

diff --git a/.../twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx b/.../twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx
@@ -20,7 +20,7 @@ export const SignInBackgroundMockPage = () => {
     <PageContainer>
       <PageHeader title="Companies" Icon={IconBuildingSkyscraper}>
         <PageHotkeysEffect onAddButtonClick={() => {}} />
-        <PageAddButton onClick={() => {}} />
+        <PageAddButton />
       </PageHeader>
       <PageBody>
         <RecordFieldValueSelectorContextProvider>

diff --git a/...ow-page/components/ShowPageMoreButton.tsx → ...nents/PageHeaderOpenCommandMenuButton.tsx b/...ow-page/components/ShowPageMoreButton.tsx → ...nents/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 (
-    <IconButton
+    <Button
       Icon={IconDotsVertical}
-      size="medium"
-      dataTestId="more-showpage-button"
-      accent="default"
+      dataTestId="page-header-open-command-menu-button"
+      size="small"
       variant="secondary"
+      accent="default"
+      shortcut="⌘K"
+      ariaLabel="Open command menu"
       onClick={openCommandMenu}
     />
   );

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
@@ -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) => (
-  <IconButton
+  <Button
     Icon={IconPlus}
     dataTestId="add-button"
-    size="medium"
+    size="small"
     variant="secondary"
     accent="default"
+    title="New record"
     onClick={onClick}
-    ariaLabel="Add"
+    ariaLabel="New record"
   />
 );
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
@@ -129,24 +129,6 @@ export const PageHeader = ({
         )}
 
         <StyledTopBarIconStyledTitleContainer>
-          {hasPaginationButtons && (
-            <>
-              <IconButton
-                Icon={IconChevronUp}
-                size="small"
-                variant="secondary"
-                disabled={!hasPreviousRecord}
-                onClick={() => navigateToPreviousRecord?.()}
-              />
-              <IconButton
-                Icon={IconChevronDown}
-                size="small"
-                variant="secondary"
-                disabled={!hasNextRecord}
-                onClick={() => navigateToNextRecord?.()}
-              />
-            </>
-          )}
           {Icon && <Icon size={theme.icon.size.md} />}
           {title && (
             <StyledTitleContainer data-testid="top-bar-title">
@@ -159,7 +141,28 @@ export const PageHeader = ({
           )}
         </StyledTopBarIconStyledTitleContainer>
       </StyledLeftContainer>
-      <StyledPageActionContainer>{children}</StyledPageActionContainer>
+
+      <StyledPageActionContainer>
+        {hasPaginationButtons && (
+          <>
+            <IconButton
+              Icon={IconChevronUp}
+              size="small"
+              variant="secondary"
+              disabled={!hasPreviousRecord}
+              onClick={() => navigateToPreviousRecord?.()}
+            />
+            <IconButton
+              Icon={IconChevronDown}
+              size="small"
+              variant="secondary"
+              disabled={!hasNextRecord}
+              onClick={() => navigateToNextRecord?.()}
+            />
+          </>
+        )}
+        {children}
+      </StyledPageActionContainer>
     </StyledTopBarContainer>
   );
 };
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
@@ -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 = ({
       <Dropdown
         dropdownId={SHOW_PAGE_ADD_BUTTON_DROPDOWN_ID}
         clickableComponent={
-          <IconButton
+          <Button
             Icon={IconPlus}
-            size="medium"
-            dataTestId="add-showpage-button"
-            accent="default"
+            dataTestId="add-button"
+            size="small"
             variant="secondary"
-            onClick={toggleDropdown}
+            accent="default"
+            title="New note/task"
+            ariaLabel="New note/task"
           />
         }
         dropdownComponents={

diff --git 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,
         }}
       />
-      <ShowPageMoreButton key="more" />
+      <PageHeaderOpenCommandMenuButton key="more" />
     </>
   );
 };
diff --git 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 && <Icon size={theme.icon.size.sm} />}
       {title}