From bea051c0198a56c04cb531f1cb742ea708c34948 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Tue, 4 Jun 2024 16:57:41 +0200
Subject: [PATCH] Fix boolean segment controls

---
 .../products.$handle/sections/reviews.jsx     |  2 +-
 utopia/layout.utopia.js                       | 45 +++++--------------
 2 files changed, 12 insertions(+), 35 deletions(-)

diff --git a/app/routes/products.$handle/sections/reviews.jsx b/app/routes/products.$handle/sections/reviews.jsx
index 00579b9..9da5fd9 100644
--- a/app/routes/products.$handle/sections/reviews.jsx
+++ b/app/routes/products.$handle/sections/reviews.jsx
@@ -48,7 +48,7 @@ export default function Reviews({ data }) {
         <Flex direction='row' justify='end'>
           <Flex
             direction='down'
-            wrap='true'
+            wrap
             align='end'
             maxHeight
             maxWidth
diff --git a/utopia/layout.utopia.js b/utopia/layout.utopia.js
index 1943b7a..7666d6c 100644
--- a/utopia/layout.utopia.js
+++ b/utopia/layout.utopia.js
@@ -8,16 +8,20 @@ import {
 } from '@h2/new/Layout'
 import { DefaultTextContents } from './text.utopia.js'
 
-export const BooleanSegmentControl = Utopia.radioControl([
+export const BooleanSegmentControlOptions = [
   {
     label: 'Yes',
-    value: 'true',
+    value: true,
   },
   {
     label: 'No',
-    value: 'false',
+    value: false,
   },
-])
+]
+
+export const BooleanSegmentControl = Utopia.radioControl(
+  BooleanSegmentControlOptions,
+)
 
 const RowWithPlaceholdersVariant = {
   label: 'Flex row with placeholders',
@@ -230,30 +234,12 @@ const annotations = {
       maxHeight: {
         control: 'radio',
         label: 'Max Height',
-        options: [
-          {
-            label: 'Yes',
-            value: 'true',
-          },
-          {
-            label: 'No',
-            value: 'false',
-          },
-        ],
+        options: BooleanSegmentControlOptions,
       },
       maxWidth: {
         control: 'radio',
         label: 'Max Width',
-        options: [
-          {
-            label: 'Yes',
-            value: 'true',
-          },
-          {
-            label: 'No',
-            value: 'false',
-          },
-        ],
+        options: BooleanSegmentControlOptions,
       },
     },
     focus: 'never',
@@ -394,16 +380,7 @@ const annotations = {
 
       marginBottom: {
         control: 'radio',
-        options: [
-          {
-            label: 'Yes',
-            value: 'true',
-          },
-          {
-            label: 'No',
-            value: 'false',
-          },
-        ],
+        options: BooleanSegmentControlOptions,
         label: 'Bottom margin',
         folder: 'Margin',
       },