Charles Bochet
647c32ff3e
## Summary
- **Eliminate `ICON_SIZES` / `ICON_STROKES` constants**: all icon
dimensions are now resolved at runtime via
`resolveThemeVariableAsNumber(themeCssVariables.icon.size.X)`, ensuring
values always come from computed CSS variables
- **No more consumer imports from `twenty-ui/theme`**: moved
`ColorSchemeContext`, `ColorSchemeProvider`, `ThemeColor`,
`MAIN_COLOR_NAMES`, `getNextThemeColor`, `AnimationDuration` to
`twenty-ui/theme-constants`
- **Remove `ThemeContext` / `ThemeContextProvider` / `ThemeProvider` /
`ThemeType`**: replaced across ~300 files with `themeCssVariables` (for
CSS contexts) or `resolveThemeVariable` / `resolveThemeVariableAsNumber`
(for JS runtime values)
- **Simplify provider chain**: only `ColorSchemeProvider` remains — it
toggles `light`/`dark` class on `document.documentElement` and provides
`colorScheme` via React context
- **Fix pre-existing test failures**: `useIcons.test.ts`
(non-configurable ES module spy) and
`turnRecordFilterGroupIntoGqlOperationFilter.test.ts`
(`Omit<RecordFilter, 'id'>` type mismatch)
### Theme access pattern (before → after)
| Context | Before | After |
|---------|--------|-------|
| CSS (Linaria) | `${({ theme }) => theme.font.color.primary}` |
`${themeCssVariables.font.color.primary}` |
| JS runtime (icon size, animation) | `theme.icon.size.md` /
`ICON_SIZES.md` |
`resolveThemeVariableAsNumber(themeCssVariables.icon.size.md)` |
| Color scheme check | `theme.name === 'dark'` |
`useContext(ColorSchemeContext).colorScheme === 'dark'` |
87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
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 { styled } from '@linaria/react';
|
|
import { useContext } from 'react';
|
|
import { IconChevronDown } from 'twenty-ui/display';
|
|
import { type SelectOption } from 'twenty-ui/input';
|
|
import { MenuItemSelect } from 'twenty-ui/navigation';
|
|
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
|
|
|
|
const StyledDropdownMenuInnerSelectDropdownButton = styled.div`
|
|
align-items: center;
|
|
color: ${themeCssVariables.font.color.secondary};
|
|
display: flex;
|
|
font-size: ${themeCssVariables.font.size.sm};
|
|
|
|
font-weight: ${themeCssVariables.font.weight.medium};
|
|
height: ${themeCssVariables.spacing[7]};
|
|
|
|
justify-content: space-between;
|
|
|
|
padding-left: ${themeCssVariables.spacing[2]};
|
|
padding-right: ${themeCssVariables.spacing[2]};
|
|
width: 100%;
|
|
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
`;
|
|
|
|
export type DropdownMenuInnerSelectProps = {
|
|
selectedOption: SelectOption;
|
|
onChange: (value: SelectOption) => void;
|
|
options: SelectOption[];
|
|
dropdownId: string;
|
|
widthInPixels?: number;
|
|
};
|
|
|
|
export const DropdownMenuInnerSelect = ({
|
|
selectedOption,
|
|
onChange,
|
|
options,
|
|
dropdownId,
|
|
widthInPixels,
|
|
}: DropdownMenuInnerSelectProps) => {
|
|
const { theme } = useContext(ThemeContext);
|
|
const { closeDropdown } = useCloseDropdown();
|
|
|
|
return (
|
|
<Dropdown
|
|
clickableComponent={
|
|
<StyledDropdownMenuInnerSelectDropdownButton>
|
|
<span>{selectedOption.label}</span>
|
|
<IconChevronDown size={theme.icon.size.sm} />
|
|
</StyledDropdownMenuInnerSelectDropdownButton>
|
|
}
|
|
dropdownComponents={
|
|
<DropdownContent widthInPixels={widthInPixels}>
|
|
<DropdownMenuItemsContainer>
|
|
{options.map((selectOption) => (
|
|
<MenuItemSelect
|
|
key={`dropdown-menu-inner-select-item-${selectOption.value}`}
|
|
onClick={() => {
|
|
onChange(selectOption);
|
|
closeDropdown(dropdownId);
|
|
}}
|
|
text={selectOption.label}
|
|
disabled={selectOption.disabled}
|
|
selected={selectOption.value === selectedOption.value}
|
|
/>
|
|
))}
|
|
</DropdownMenuItemsContainer>
|
|
</DropdownContent>
|
|
}
|
|
globalHotkeysConfig={{
|
|
enableGlobalHotkeysWithModifiers: false,
|
|
enableGlobalHotkeysConflictingWithKeyboard: false,
|
|
}}
|
|
dropdownId={dropdownId}
|
|
dropdownOffset={{
|
|
x: 8,
|
|
}}
|
|
/>
|
|
);
|
|
};
|