Charles Bochet
802a5b0af6
## Summary - Migrate ~200 files from `@emotion/styled` / `@emotion/react` to `@linaria/react` + `themeCssVariables`, continuing the zero-runtime CSS-in-JS migration (PR 2-3 of the [migration plan](docs/emotion-to-linaria-migration-plan.md)) - Modules covered: **auth** (19), **activities** (53), **ai** (30), **pages** (70), **action-menu** (3), **object-metadata** (4), **onboarding** (2), **workspace** (2), **file** (3), **error-handler** (2), **front-components** (1), **geo-map** (1), **loading** (5), **testing** (5), plus a `style` prop addition to `TableRow` - Handles `styled(FunctionComponent)<Props>` incompatibility with Linaria by using CSS custom properties via `style` + `var()` references ## Test plan - [x] `npx nx lint:diff-with-main twenty-front` passes - [x] `npx nx typecheck twenty-front` passes - [ ] Visual spot-check of auth, onboarding, settings, activities, and AI chat screens - [ ] No remaining `@emotion/styled` or `@emotion/react` imports in migrated files Made with [Cursor](https://cursor.com)
69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import { type ActionDisplayProps } from '@/action-menu/actions/display/components/ActionDisplay';
|
|
import { getActionLabel } from '@/action-menu/utils/getActionLabel';
|
|
import { styled } from '@linaria/react';
|
|
import { isDefined } from 'twenty-shared/utils';
|
|
import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
|
|
import { Button, IconButton } from 'twenty-ui/input';
|
|
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
|
|
|
const StyledWrapper = styled.div`
|
|
font-size: ${themeCssVariables.font.size.md};
|
|
`;
|
|
|
|
export const ActionButton = ({
|
|
action,
|
|
onClick,
|
|
to,
|
|
}: {
|
|
action: ActionDisplayProps;
|
|
onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
|
|
to?: string;
|
|
}) => {
|
|
const label = getActionLabel(action.label);
|
|
|
|
const shortLabel = isDefined(action.shortLabel)
|
|
? getActionLabel(action.shortLabel)
|
|
: undefined;
|
|
|
|
const buttonAccent = action.isPrimaryCTA ? 'blue' : 'default';
|
|
|
|
return (
|
|
<>
|
|
{action.shortLabel ? (
|
|
<Button
|
|
Icon={action.Icon}
|
|
size="small"
|
|
variant="secondary"
|
|
accent={buttonAccent}
|
|
to={to}
|
|
onClick={onClick}
|
|
title={shortLabel}
|
|
ariaLabel={label}
|
|
/>
|
|
) : (
|
|
<div id={`action-menu-entry-${action.key}`} key={action.key}>
|
|
<IconButton
|
|
Icon={action.Icon}
|
|
size="small"
|
|
variant="secondary"
|
|
accent={buttonAccent}
|
|
to={to}
|
|
onClick={onClick}
|
|
ariaLabel={label}
|
|
/>
|
|
<StyledWrapper>
|
|
<AppTooltip
|
|
anchorSelect={`#action-menu-entry-${action.key}`}
|
|
content={label}
|
|
delay={TooltipDelay.longDelay}
|
|
place={TooltipPosition.Bottom}
|
|
offset={5}
|
|
noArrow
|
|
/>
|
|
</StyledWrapper>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|