From 28ff5610f06fb7aae698c6fad49a0d82adb69175 Mon Sep 17 00:00:00 2001
From: Guillim <guillim@users.noreply.github.com>
Date: Tue, 10 Dec 2024 09:41:04 +0100
Subject: [PATCH] better label for toggle input that will improve UX (#8982)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/AdvancedSettingsToggle.tsx     | 11 +++----
 .../menu-item/components/MenuItemToggle.tsx   | 30 ++++++++++++++-----
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
index efedcc756..d3532df4d 100644
--- a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
+++ b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
@@ -12,7 +12,7 @@ const StyledContainer = styled.div`
   position: relative;
 `;
 
-const StyledLabel = styled.label`
+const StyledText = styled.div`
   color: ${({ theme }) => theme.font.color.secondary};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -25,9 +25,10 @@ const StyledIconContainer = styled.div`
   left: ${({ theme }) => theme.spacing(-3)};
 `;
 
-const StyledToggleContainer = styled.div`
-  display: flex;
+const StyledToggleContainer = styled.label`
   align-items: center;
+  cursor: pointer;
+  display: flex;
   justify-content: space-between;
   width: 100%;
 `;
@@ -59,8 +60,8 @@ export const AdvancedSettingsToggle = ({
           fill={MAIN_COLORS.yellow}
         />
       </StyledIconContainer>
-      <StyledToggleContainer>
-        <StyledLabel htmlFor={inputId}>Advanced:</StyledLabel>
+      <StyledToggleContainer htmlFor={inputId}>
+        <StyledText>Advanced:</StyledText>
 
         <Toggle
           id={inputId}
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx
index 485df1268..813d9e357 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx
@@ -1,11 +1,21 @@
+import styled from '@emotion/styled';
 import { IconComponent } from '@ui/display';
 import { Toggle, ToggleSize } from '@ui/input';
+import { useId } from 'react';
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import {
   StyledMenuItemBase,
   StyledMenuItemRightContent,
 } from '../internals/components/StyledMenuItemBase';
 
+const StyledToggleContainer = styled.label`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`;
+
 type MenuItemToggleProps = {
   LeftIcon?: IconComponent;
   toggled: boolean;
@@ -23,16 +33,20 @@ export const MenuItemToggle = ({
   onToggleChange,
   toggleSize,
 }: MenuItemToggleProps) => {
+  const inputId = useId();
   return (
     <StyledMenuItemBase className={className}>
-      <MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
-      <StyledMenuItemRightContent>
-        <Toggle
-          value={toggled}
-          onChange={onToggleChange}
-          toggleSize={toggleSize}
-        />
-      </StyledMenuItemRightContent>
+      <StyledToggleContainer htmlFor={inputId}>
+        <MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
+        <StyledMenuItemRightContent>
+          <Toggle
+            id={inputId}
+            value={toggled}
+            onChange={onToggleChange}
+            toggleSize={toggleSize}
+          />
+        </StyledMenuItemRightContent>
+      </StyledToggleContainer>
     </StyledMenuItemBase>
   );
 };