admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Replace hotkey scopes by focus stack (Part 4 - Inputs) (#12933)

Browse Source 
# Replace hotkey scopes by focus stack (Part 4 - Inputs)

This PR is the 4th part of a refactoring aiming to deprecate the hotkey
scopes api in favor of the new focus stack api which is more robust.
Part 1: https://github.com/twentyhq/twenty/pull/12673
Part 2: https://github.com/twentyhq/twenty/pull/12798
Part 3: https://github.com/twentyhq/twenty/pull/12910

In this part, I refactored all inputs in the app so that each input has
a unique id which can be used to track the focused element.
This commit is contained in:
Raphaël Bosi
2025-07-07 15:42:12 +02:00
committed by GitHub
parent 0199d5f72a
commit c6e5bab4e9
140 changed files with 1178 additions and 1004 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
View File

@ -48,7 +48,7 @@ export const AdvancedSettingsToggle = ({
const onChange = (newValue: boolean) => {
setIsAdvancedModeEnabled(newValue);
};
const inputId = useId();
const instanceId = useId();
return (
<StyledContainer>
@ -59,11 +59,11 @@ export const AdvancedSettingsToggle = ({
fill={MAIN_COLORS.yellow}
/>
</StyledIconContainer>
<StyledToggleContainer htmlFor={inputId}>
<StyledToggleContainer htmlFor={instanceId}>
<StyledText>{label}</StyledText>
<Toggle
id={inputId}
id={instanceId}
onChange={onChange}
color={MAIN_COLORS.yellow}
value={isAdvancedModeEnabled}

6
packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx
View File

@ -35,14 +35,14 @@ export const MenuItemToggle = ({
onToggleChange,
toggleSize,
}: MenuItemToggleProps) => {
const inputId = useId();
const instanceId = useId();
return (
<StyledMenuItemBase className={className} focused={focused}>
<StyledToggleContainer htmlFor={inputId}>
<StyledToggleContainer htmlFor={instanceId}>
<MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
<StyledMenuItemRightContent>
<Toggle
id={inputId}
id={instanceId}
value={toggled}
onChange={onToggleChange}
toggleSize={toggleSize}