Fix noninteractive toggle (#8383)

- Use a label to make the whole card interactive
- Disallow the Toggle component to shrink; it used to on mobile devices

A focus indicator is missing for the Toggle component. We'll have to add
one.

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx

@@ -5,7 +5,7 @@ import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
-import { Card, H2Title, Toggle } from 'twenty-ui';
+import { Card, H2Title } from 'twenty-ui';
 import { CalendarChannelVisibility } from '~/generated-metadata/graphql';
 
 const StyledDetailsContainer = styled.div`
@@ -21,10 +21,6 @@ type SettingsAccountsCalendarChannelDetailsProps = {
   >;
 };
 
-const StyledToggle = styled(Toggle)`
-  margin-left: auto;
-`;
-
 export const SettingsAccountsCalendarChannelDetails = ({
   calendarChannel,
 }: SettingsAccountsCalendarChannelDetailsProps) => {
@@ -71,16 +67,13 @@ export const SettingsAccountsCalendarChannelDetails = ({
           <SettingsOptionCardContent
             title="Auto-creation"
             description="Automatically create contacts for people."
-            onClick={() =>
+            checked={calendarChannel.isContactAutoCreationEnabled}
+            onChange={() => {
               handleContactAutoCreationToggle(
                 !calendarChannel.isContactAutoCreationEnabled,
-              )
-            }
-          >
-            <StyledToggle
-              value={calendarChannel.isContactAutoCreationEnabled}
-            />
-          </SettingsOptionCardContent>
+              );
+            }}
+          />
         </Card>
       </Section>
     </StyledDetailsContainer>

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Card, H2Title, Section, Toggle } from 'twenty-ui';
+import { Card, H2Title, Section } from 'twenty-ui';
 
 import {
   MessageChannel,
@@ -30,10 +30,6 @@ const StyledDetailsContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(6)};
 `;
 
-const StyledToggle = styled(Toggle)`
-  margin-left: auto;
-`;
-
 export const SettingsAccountsMessageChannelDetails = ({
   messageChannel,
 }: SettingsAccountsMessageChannelDetailsProps) => {
@@ -107,25 +103,23 @@ export const SettingsAccountsMessageChannelDetails = ({
             title="Exclude non-professional emails"
             description="Don’t create contacts from/to Gmail, Outlook emails"
             divider
-            onClick={() =>
+            checked={messageChannel.excludeNonProfessionalEmails}
+            onChange={() => {
               handleIsNonProfessionalEmailExcludedToggle(
                 !messageChannel.excludeNonProfessionalEmails,
-              )
-            }
-          >
-            <StyledToggle value={messageChannel.excludeNonProfessionalEmails} />
-          </SettingsOptionCardContent>
+              );
+            }}
+          />
           <SettingsOptionCardContent
             title="Exclude group emails"
             description="Don’t sync emails from team@ support@ noreply@..."
-            onClick={() =>
+            checked={messageChannel.excludeGroupEmails}
+            onChange={() =>
               handleIsGroupEmailExcludedToggle(
                 !messageChannel.excludeGroupEmails,
               )
             }
-          >
-            <StyledToggle value={messageChannel.excludeGroupEmails} />
-          </SettingsOptionCardContent>
+          />
         </Card>
       </Section>
     </StyledDetailsContainer>

packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx

@@ -1,16 +1,16 @@
-import styled from '@emotion/styled';
 import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 
-import { IconComponent, CardContent } from 'twenty-ui';
-import { ReactNode } from 'react';
+import { useId } from 'react';
+import { CardContent, IconComponent, Toggle } from 'twenty-ui';
 
 type SettingsOptionCardContentProps = {
   Icon?: IconComponent;
-  title: string;
+  title: React.ReactNode;
   description: string;
-  onClick: () => void;
-  children: ReactNode;
   divider?: boolean;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
 };
 
 const StyledCardContent = styled(CardContent)`
@@ -18,6 +18,7 @@ const StyledCardContent = styled(CardContent)`
   display: flex;
   gap: ${({ theme }) => theme.spacing(4)};
   cursor: pointer;
+  position: relative;
 
   &:hover {
     background: ${({ theme }) => theme.background.transparent.lighter};
@@ -47,28 +48,48 @@ const StyledIcon = styled.div`
   min-width: ${({ theme }) => theme.icon.size.md};
 `;
 
+const StyledToggle = styled(Toggle)`
+  margin-left: auto;
+`;
+
+const StyledCover = styled.span`
+  cursor: pointer;
+  inset: 0;
+  position: absolute;
+`;
+
 export const SettingsOptionCardContent = ({
   Icon,
   title,
   description,
-  onClick,
-  children,
   divider,
+  checked,
+  onChange,
 }: SettingsOptionCardContentProps) => {
   const theme = useTheme();
 
+  const toggleId = useId();
+
   return (
-    <StyledCardContent onClick={onClick} divider={divider}>
+    <StyledCardContent divider={divider}>
       {Icon && (
         <StyledIcon>
           <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.md} />
         </StyledIcon>
       )}
+
       <div>
-        <StyledTitle>{title}</StyledTitle>
+        <StyledTitle>
+          <label htmlFor={toggleId}>
+            {title}
+
+            <StyledCover />
+          </label>
+        </StyledTitle>
         <StyledDescription>{description}</StyledDescription>
       </div>
-      {children}
+
+      <StyledToggle id={toggleId} value={checked} onChange={onChange} />
     </StyledCardContent>
   );
 };

packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx

@@ -2,21 +2,21 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
-import { Card, IconLink, Toggle } from 'twenty-ui';
+import { Card, IconLink, isDefined } from 'twenty-ui';
 import { useUpdateWorkspaceMutation } from '~/generated/graphql';
 
-const StyledToggle = styled(Toggle)`
-  margin-left: auto;
-`;
-
 export const SettingsSecurityOptionsList = () => {
   const { enqueueSnackBar } = useSnackBar();
 
   const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
     currentWorkspaceState,
   );
+  if (!isDefined(currentWorkspace)) {
+    throw new Error(
+      'The current workspace must be defined to edit its security options.',
+    );
+  }
 
   const [updateWorkspace] = useUpdateWorkspaceMutation();
 
@@ -49,12 +49,11 @@ export const SettingsSecurityOptionsList = () => {
         Icon={IconLink}
         title="Invite by Link"
         description="Allow the invitation of new users by sharing an invite link."
-        onClick={() =>
-          handleChange(!currentWorkspace?.isPublicInviteLinkEnabled)
+        checked={currentWorkspace.isPublicInviteLinkEnabled}
+        onChange={() =>
+          handleChange(!currentWorkspace.isPublicInviteLinkEnabled)
         }
-      >
-        <StyledToggle value={currentWorkspace?.isPublicInviteLinkEnabled} />
-      </SettingsOptionCardContent>
+      />
     </Card>
   );
 };

packages/twenty-ui/src/input/components/Toggle.tsx

@@ -12,6 +12,7 @@ type ContainerProps = {
 };
 
 const StyledContainer = styled.label<ContainerProps>`
+  flex-shrink: 0;
   align-items: center;
   background-color: ${({ theme, isOn, color }) =>
     isOn ? (color ?? theme.color.blue) : theme.background.transparent.medium};