From a22fad521d60a41dac298f6e9fa1e4acf457e20e Mon Sep 17 00:00:00 2001
From: Henrik Haugberg <henrik.haugberg@gmail.com>
Date: Mon, 23 Oct 2023 15:04:53 +0200
Subject: [PATCH] fix(forms): Support undefined in toggle and button fields
 (#2775)

Before, passing no value defaulted to the `valueOff` option in
`Field.Toggle`, leading to the same in `Field.Button` (false option
being chosen). Now, no buttons is selected when value is undefined.

<img width="939" alt="Screenshot 2023-10-20 at 14 38 13"
src="https://github.com/dnbexperience/eufemia/assets/2526740/db4cd31f-6fd0-4078-8986-7961eda988eb">
---
 .../forms/base-fields/Boolean/Examples.tsx           | 12 ++++++++++++
 .../extensions/forms/base-fields/Boolean/demos.mdx   |  4 ++++
 .../src/extensions/forms/Field/Toggle/Toggle.tsx     |  3 ++-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/Examples.tsx
index 30f634d7dab..9a78dab67bc 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/Examples.tsx
@@ -235,6 +235,18 @@ export const ButtonsFalse = () => {
   )
 }
 
+export const ButtonsUndefined = () => {
+  return (
+    <ComponentBox>
+      <Field.Boolean
+        variant="buttons"
+        label="Label text"
+        onChange={(value) => console.log('onChange', value)}
+      />
+    </ComponentBox>
+  )
+}
+
 export const ButtonsRequired = () => {
   return (
     <ComponentBox>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/demos.mdx
index 87542d6e684..66312ffddcd 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/demos.mdx
@@ -86,6 +86,10 @@ import * as Examples from './Examples'
 
 <Examples.ButtonsFalse />
 
+#### Button - Value undefined (no option selected)
+
+<Examples.ButtonsUndefined />
+
 #### Buttons - Required
 
 <Examples.ButtonsRequired />
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx
index 5ca55bde0a9..ac1ab5a9535 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx
@@ -82,6 +82,7 @@ function Toggle(props: Props) {
   }
 
   const isOn = value === valueOn
+  const isOff = value === valueOff
 
   switch (variant) {
     default:
@@ -134,7 +135,7 @@ function Toggle(props: Props) {
               id={id}
               text={textOff ?? sharedContext?.translation.Forms.booleanNo}
               on_click={setOff}
-              variant={isOn ? 'secondary' : undefined}
+              variant={isOff ? undefined : 'secondary'}
               disabled={disabled}
               status={error ? 'error' : undefined}
             />