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">
2024-12-22 19:41:53 +03:00 · 2024-12-09 10:55:33 +01:00 · 2024-12-09 10:55:33 +01:00 · 387f5259a7
commit 387f5259a7
parent ef0ae2568d
10 changed files with 70 additions and 68 deletions
--- 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}
+    />
+  );
+};
--- 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 = () => {
        ) : (
          <RecordIndexPageKanbanAddButton />
        ))}
+      <PageHeaderOpenCommandMenuButton />
    </PageHeader>
  );
 };
--- 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 = () => {
    <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>
--- 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 = () => {
    <PageContainer>
      <PageHeader title="Companies" Icon={IconBuildingSkyscraper}>
        <PageHotkeysEffect onAddButtonClick={() => {}} />
-        <PageAddButton onClick={() => {}} />
+        <PageAddButton />
      </PageHeader>
      <PageBody>
        <RecordFieldValueSelectorContextProvider>
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.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 (
-    <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}
    />
  );
--- 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"
  />
 );
--- 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>
  );
 };
--- 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={
--- 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" />
    </>
  );
 };
--- 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}