Charles BochetandGitHub
3bfdc2c83f
## Summary
Continues the Emotion → Linaria migration (PR 4-6 from the [migration
plan](docs/emotion-to-linaria-migration-plan.md)). Migrates **311
files** across four module groups:
| Module | Files |
|---|---|
| command-menu | 53 |
| workflow | 84 |
| page-layout | 84 |
| UI (partial - first ~80 files) | ~80 |
| twenty-ui (TEXT_INPUT_STYLE) | 1 |
| misc (hooks, keyboard-shortcut-menu, file-upload) | ~9 |
### Migration patterns applied
- `import styled from '@emotion/styled'` → `import { styled } from
'@linaria/react'`
- `import { useTheme } from '@emotion/react'` → `import { useContext }
from 'react'` + `import { ThemeContext } from 'twenty-ui/theme'`
- `${({ theme }) => theme.X.Y.Z}` → `${themeCssVariables.X.Y.Z}` (static
CSS variables)
- `theme.spacing(N)` → `themeCssVariables.spacing[N]`
- `styled(motion.div)` → `motion.create(StyledBase)` (11 components)
- `styled(Component)<TypeParams>` → wrapper div approach for non-HTML
elements
- Multi-declaration interpolations split into one CSS property per
interpolation
- Interpolation return types fixed (`&&` → ternary `? : ''`)
- `TEXT_INPUT_STYLE` converted from function to static string constant
(backward compatible)
- Emotion `<Global>` replaced with `useEffect` style injection
- Complex runtime-dependent styles use CSS custom properties via
`style={}` prop
### After this PR
- **Remaining files**: ~400 (object-record: ~160, settings: ~200, UI:
~44)
- **No breaking changes**: CSS variables resolve identically to the
previous Emotion theme values
86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
import { COMMAND_MENU_NAVIGATION_HISTORY_DROPDOWN_ID } from '@/command-menu/constants/CommandMenuNavigationHistoryDropdownId';
|
|
import { useCommandMenuContextChips } from '@/command-menu/hooks/useCommandMenuContextChips';
|
|
import { useCommandMenuHistory } from '@/command-menu/hooks/useCommandMenuHistory';
|
|
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
|
|
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
|
|
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
|
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
|
|
import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
|
|
import { styled } from '@linaria/react';
|
|
import { IconChevronLeft } from 'twenty-ui/display';
|
|
import { IconButton } from 'twenty-ui/input';
|
|
import { MenuItem } from 'twenty-ui/navigation';
|
|
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
|
|
|
const StyledNavigationIcon = styled.div`
|
|
align-items: center;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
`;
|
|
|
|
const StyledIconChevronLeft = styled(IconChevronLeft)`
|
|
color: ${themeCssVariables.font.color.secondary};
|
|
`;
|
|
|
|
export const CommandMenuBackButton = () => {
|
|
const { goBackFromCommandMenu } = useCommandMenuHistory();
|
|
|
|
const { contextChips } = useCommandMenuContextChips();
|
|
|
|
const { openDropdown } = useOpenDropdown();
|
|
|
|
const { closeDropdown } = useCloseDropdown();
|
|
|
|
const handleBackButtonContextMenu = (
|
|
event: React.MouseEvent<HTMLDivElement>,
|
|
) => {
|
|
if (contextChips.length === 0) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
openDropdown({
|
|
dropdownComponentInstanceIdFromProps:
|
|
COMMAND_MENU_NAVIGATION_HISTORY_DROPDOWN_ID,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Dropdown
|
|
clickableComponent={
|
|
<StyledNavigationIcon onContextMenu={handleBackButtonContextMenu}>
|
|
<IconButton
|
|
Icon={StyledIconChevronLeft}
|
|
size="small"
|
|
variant="tertiary"
|
|
onClick={goBackFromCommandMenu}
|
|
/>
|
|
</StyledNavigationIcon>
|
|
}
|
|
dropdownComponents={
|
|
<DropdownContent>
|
|
<DropdownMenuItemsContainer>
|
|
{contextChips.slice(0, -1).map((chip, index) => (
|
|
<MenuItem
|
|
key={index}
|
|
LeftComponent={chip.Icons}
|
|
onClick={() => {
|
|
closeDropdown(COMMAND_MENU_NAVIGATION_HISTORY_DROPDOWN_ID);
|
|
chip.onClick?.();
|
|
}}
|
|
text={chip.text}
|
|
/>
|
|
))}
|
|
</DropdownMenuItemsContainer>
|
|
</DropdownContent>
|
|
}
|
|
dropdownId={COMMAND_MENU_NAVIGATION_HISTORY_DROPDOWN_ID}
|
|
dropdownPlacement="bottom-start"
|
|
disableClickForClickableComponent={true}
|
|
/>
|
|
);
|
|
};
|