From 3541af599266a88a0f021b88ec4229f03934e260 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 9 Aug 2024 22:38:05 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20extend=20button=20primiti?=
 =?UTF-8?q?ve=20with=20a=20toggle=20variant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Encountered issues extending the current button due to the complexity of the
Button and Link props construction. I’ll need to redesign the component to
enhance its extensibility.

The legacy style adheres to the previous interface but suffers from poor
color
contrast. Hex codes were used to match the selected toggle color,
resulting
in a difficult color system to maintain. This approach needs refactoring
for better color handling. Legacy styles will soon disappear.

Efforts were made to minimize code for handling the toggle functionality.
Future work should focus on refactoring the button to align with the field
approach for improved developer experience and props validation.
---
 src/frontend/src/primitives/Button.tsx | 28 +++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/primitives/Button.tsx b/src/frontend/src/primitives/Button.tsx
index fad77e61..8abd742d 100644
--- a/src/frontend/src/primitives/Button.tsx
+++ b/src/frontend/src/primitives/Button.tsx
@@ -1,10 +1,12 @@
 import { type ReactNode } from 'react'
 import {
   Button as RACButton,
+  ToggleButton as RACToggleButton,
   type ButtonProps as RACButtonsProps,
   TooltipTrigger,
   Link,
   LinkProps,
+  ToggleButtonProps as RACToggleButtonProps,
 } from 'react-aria-components'
 import { cva, type RecipeVariantProps } from '@/styled-system/css'
 import { Tooltip } from './Tooltip'
@@ -19,6 +21,9 @@ const button = cva({
     border: '1px solid transparent',
     color: 'colorPalette.text',
     backgroundColor: 'colorPalette',
+    '&[data-selected]': {
+      background: 'colorPalette.active',
+    },
     '&[data-hovered]': {
       backgroundColor: 'colorPalette.hover',
     },
@@ -112,6 +117,13 @@ const button = cva({
         '&[data-pressed]': {
           borderColor: 'gray.500',
         },
+        '&[data-selected]': {
+          background: '#e5e7eb',
+          borderColor: 'gray.400',
+          '&[data-hovered]': {
+            backgroundColor: 'gray.300',
+          },
+        },
       },
     },
   },
@@ -128,7 +140,9 @@ type Tooltip = {
 }
 export type ButtonProps = RecipeVariantProps<typeof button> &
   RACButtonsProps &
-  Tooltip
+  Tooltip & {
+    toggle?: boolean
+  }
 
 type LinkButtonProps = RecipeVariantProps<typeof button> & LinkProps & Tooltip
 
@@ -147,6 +161,18 @@ export const Button = ({
       </TooltipWrapper>
     )
   }
+
+  if ((props as ButtonProps).toggle) {
+    return (
+      <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
+        <RACToggleButton
+          className={button(variantProps)}
+          {...(componentProps as RACToggleButtonProps)}
+        />
+      </TooltipWrapper>
+    )
+  }
+
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
       <RACButton