Fix boolean segment controls

concrete-utopia · Jun 4, 2024 · bea051c · bea051c
1 parent 14e18ee
commit bea051c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 35 deletions.
diff --git 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
@@ -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',
       },