From 84cea2f658a322848a78a6a1d4a1a2b5bdbf18fc Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 12 Dec 2024 15:19:31 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(front)=20add=20description=20to=20But?=
 =?UTF-8?q?tons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We want to display full description below buttons for mobile specific
displays.
---
 src/frontend/src/primitives/Button.tsx       | 11 +++++++++--
 src/frontend/src/primitives/LinkButton.tsx   | 13 +++++++++++--
 src/frontend/src/primitives/ToggleButton.tsx | 20 +++++++++++++++++---
 src/frontend/src/primitives/buttonRecipe.ts  | 18 ++++++++++++++----
 4 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/primitives/Button.tsx b/src/frontend/src/primitives/Button.tsx
index ab2a46bf..8ee63d03 100644
--- a/src/frontend/src/primitives/Button.tsx
+++ b/src/frontend/src/primitives/Button.tsx
@@ -5,10 +5,14 @@ import {
 import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
+import { ReactNode } from 'react'
 
 export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
   RACButtonsProps &
-  TooltipWrapperProps
+  TooltipWrapperProps & {
+    // Use tooltip as description below the button.
+    description?: boolean
+  }
 
 export const Button = ({
   tooltip,
@@ -22,7 +26,10 @@ export const Button = ({
       <RACButton
         className={buttonRecipe(variantProps)}
         {...(componentProps as RACButtonsProps)}
-      />
+      >
+        {componentProps.children as ReactNode}
+        {props.description && <span>{tooltip}</span>}
+      </RACButton>
     </TooltipWrapper>
   )
 }
diff --git a/src/frontend/src/primitives/LinkButton.tsx b/src/frontend/src/primitives/LinkButton.tsx
index 1397da5c..e0d871d3 100644
--- a/src/frontend/src/primitives/LinkButton.tsx
+++ b/src/frontend/src/primitives/LinkButton.tsx
@@ -2,10 +2,14 @@ import { Link, LinkProps } from 'react-aria-components'
 import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
+import { ReactNode } from 'react'
 
 type LinkButtonProps = RecipeVariantProps<ButtonRecipe> &
   LinkProps &
-  TooltipWrapperProps
+  TooltipWrapperProps & {
+    // Use tooltip as description below the button.
+    description?: boolean
+  }
 
 export const LinkButton = ({
   tooltip,
@@ -16,7 +20,12 @@ export const LinkButton = ({
 
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
-      <Link className={buttonRecipe(variantProps)} {...componentProps} />
+      <Link className={buttonRecipe(variantProps)} {...componentProps}>
+        <>
+          {componentProps.children as ReactNode}
+          {props.description && <span>{tooltip}</span>}
+        </>
+      </Link>
     </TooltipWrapper>
   )
 }
diff --git a/src/frontend/src/primitives/ToggleButton.tsx b/src/frontend/src/primitives/ToggleButton.tsx
index 288a9335..d398c725 100644
--- a/src/frontend/src/primitives/ToggleButton.tsx
+++ b/src/frontend/src/primitives/ToggleButton.tsx
@@ -1,9 +1,17 @@
 import {
   ToggleButton as RACToggleButton,
-  ToggleButtonProps,
+  ToggleButtonProps as RACToggleButtonProps,
 } from 'react-aria-components'
 import { type ButtonRecipeProps, buttonRecipe } from './buttonRecipe'
 import { TooltipWrapper, TooltipWrapperProps } from './TooltipWrapper'
+import { ReactNode } from 'react'
+
+export type ToggleButtonProps = RACToggleButtonProps &
+  ButtonRecipeProps &
+  TooltipWrapperProps & {
+    // Use tooltip as description below the button.
+    description?: boolean
+  }
 
 /**
  * React aria ToggleButton with our button styles, that can take a tooltip if needed
@@ -12,14 +20,20 @@ export const ToggleButton = ({
   tooltip,
   tooltipType,
   ...props
-}: ToggleButtonProps & ButtonRecipeProps & TooltipWrapperProps) => {
+}: ToggleButtonProps) => {
   const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
+
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
       <RACToggleButton
         {...componentProps}
         className={buttonRecipe(variantProps)}
-      />
+      >
+        <>
+          {componentProps.children as ReactNode}
+          {props.description && <span>{tooltip}</span>}
+        </>
+      </RACToggleButton>
     </TooltipWrapper>
   )
 }
diff --git a/src/frontend/src/primitives/buttonRecipe.ts b/src/frontend/src/primitives/buttonRecipe.ts
index c9241f92..e89483af 100644
--- a/src/frontend/src/primitives/buttonRecipe.ts
+++ b/src/frontend/src/primitives/buttonRecipe.ts
@@ -1,9 +1,5 @@
 import { type RecipeVariantProps, cva } from '@/styled-system/css'
 
-export type ButtonRecipe = typeof buttonRecipe
-
-export type ButtonRecipeProps = RecipeVariantProps<ButtonRecipe>
-
 export const buttonRecipe = cva({
   base: {
     display: 'flex',
@@ -222,6 +218,16 @@ export const buttonRecipe = cva({
     shySelected: {
       true: {},
     },
+    description: {
+      true: {
+        flexDirection: 'column',
+        gap: '0.5rem',
+        '& span': {
+          fontSize: '13px',
+          textAlign: 'center',
+        },
+      },
+    },
     // if the button is next to other ones to make a "button group", tell where the button is to handle radius
     groupPosition: {
       left: {
@@ -255,3 +261,7 @@ export const buttonRecipe = cva({
     variant: 'primary',
   },
 })
+
+export type ButtonRecipe = typeof buttonRecipe
+
+export type ButtonRecipeProps = RecipeVariantProps<ButtonRecipe>