Display a tooltip for actions without short labels (#11243)

- Merge `RecordIndexActionMenuButtons` and `RecordShowActionMenuButtons` into a single component `PageHeaderActionMenuButtons` - Display tooltip after 1s for actions without short labels https://github.com/user-attachments/assets/7649bed8-a1a9-4c1d-8fbe-f1bf3a51db56
2025-03-28 11:01:55 +01:00
parent 8d35454dd8
commit b1c57edc90
10 changed files with 131 additions and 106 deletions
--- a/packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx
@ -0,0 +1,64 @@
+import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import styled from '@emotion/styled';
+import { i18n } from '@lingui/core';
+import {
+  AppTooltip,
+  Button,
+  IconButton,
+  TooltipDelay,
+  TooltipPosition,
+} from 'twenty-ui';
+
+const StyledWrapper = styled.div`
+  font-size: ${({ theme }) => theme.font.size.md};
+`;
+
+export const PageHeaderActionMenuButtons = () => {
+  const actionMenuEntries = useRecoilComponentValueV2(
+    actionMenuEntriesComponentSelector,
+  );
+
+  const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
+
+  return (
+    <>
+      {pinnedEntries.map((entry) =>
+        entry.shortLabel ? (
+          <Button
+            key={entry.key}
+            Icon={entry.Icon}
+            size="small"
+            variant="secondary"
+            accent="default"
+            title={entry.shortLabel ? i18n._(entry.shortLabel) : ''}
+            onClick={() => entry.onClick?.()}
+            ariaLabel={i18n._(entry.label)}
+          />
+        ) : (
+          <div id={`action-menu-entry-${entry.key}`} key={entry.key}>
+            <IconButton
+              Icon={entry.Icon}
+              size="small"
+              variant="secondary"
+              accent="default"
+              onClick={() => entry.onClick?.()}
+              ariaLabel={i18n._(entry.label)}
+            />
+            <StyledWrapper>
+              <AppTooltip
+                // eslint-disable-next-line
+                anchorSelect={`#action-menu-entry-${entry.key}`}
+                content={i18n._(entry.label)}
+                delay={TooltipDelay.longDelay}
+                place={TooltipPosition.Bottom}
+                offset={5}
+                noArrow
+              />
+            </StyledWrapper>
+          </div>
+        ),
+      )}
+    </>
+  );
+};