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

better label for toggle input that will improve UX (#8982)

Browse Source 
Answering the ticket : Increase the clickable area of toggles to parent
container

# Change in Labels

In order to solve this ticket, we change the way we handle the labels VS
the inputs. The use of `htmlFor` and setting up the appropriate id for
the toggle solves the "blank click"
<img width="239" alt="Screenshot 2024-12-09 at 17 43 53"
src="https://github.com/user-attachments/assets/19eab5fc-8393-496d-b713-57e51c620bf1">

fix #8953

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Guillim
2024-12-10 09:41:04 +01:00
committed by GitHub
parent 0a61550f43
commit 28ff5610f0
2 changed files with 28 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,7 +12,7 @@ const StyledContainer = styled.div`
position: relative; position: relative;
`; `;
const StyledLabel = styled.label` const StyledText = styled.div`
color: ${({ theme }) => theme.font.color.secondary}; color: ${({ theme }) => theme.font.color.secondary};
font-size: ${({ theme }) => theme.font.size.sm}; font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium}; font-weight: ${({ theme }) => theme.font.weight.medium};
@ -25,9 +25,10 @@ const StyledIconContainer = styled.div`
left: ${({ theme }) => theme.spacing(-3)}; left: ${({ theme }) => theme.spacing(-3)};
`; `;
const StyledToggleContainer = styled.div` const StyledToggleContainer = styled.label`
display: flex;
align-items: center; align-items: center;
cursor: pointer;
display: flex;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
`; `;
@ -59,8 +60,8 @@ export const AdvancedSettingsToggle = ({
fill={MAIN_COLORS.yellow} fill={MAIN_COLORS.yellow}
/> />
</StyledIconContainer> </StyledIconContainer>
<StyledToggleContainer> <StyledToggleContainer htmlFor={inputId}>
<StyledLabel htmlFor={inputId}>Advanced:</StyledLabel> <StyledText>Advanced:</StyledText>
<Toggle <Toggle
id={inputId} id={inputId}

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

@ -1,11 +1,21 @@
import styled from '@emotion/styled';
import { IconComponent } from '@ui/display'; import { IconComponent } from '@ui/display';
import { Toggle, ToggleSize } from '@ui/input'; import { Toggle, ToggleSize } from '@ui/input';
import { useId } from 'react';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
import { import {
StyledMenuItemBase, StyledMenuItemBase,
StyledMenuItemRightContent, StyledMenuItemRightContent,
} from '../internals/components/StyledMenuItemBase'; } from '../internals/components/StyledMenuItemBase';
const StyledToggleContainer = styled.label`
align-items: center;
cursor: pointer;
display: flex;
justify-content: space-between;
width: 100%;
`;
type MenuItemToggleProps = { type MenuItemToggleProps = {
LeftIcon?: IconComponent; LeftIcon?: IconComponent;
toggled: boolean; toggled: boolean;
@ -23,16 +33,20 @@ export const MenuItemToggle = ({
onToggleChange, onToggleChange,
toggleSize, toggleSize,
}: MenuItemToggleProps) => { }: MenuItemToggleProps) => {
const inputId = useId();
return ( return (
<StyledMenuItemBase className={className}> <StyledMenuItemBase className={className}>
<MenuItemLeftContent LeftIcon={LeftIcon} text={text} /> <StyledToggleContainer htmlFor={inputId}>
<StyledMenuItemRightContent> <MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
<Toggle <StyledMenuItemRightContent>
value={toggled} <Toggle
onChange={onToggleChange} id={inputId}
toggleSize={toggleSize} value={toggled}
/> onChange={onToggleChange}
</StyledMenuItemRightContent> toggleSize={toggleSize}
/>
</StyledMenuItemRightContent>
</StyledToggleContainer>
</StyledMenuItemBase> </StyledMenuItemBase>
); );
}; };