Use auto as value for Auto Flow dropdown (#6504)

**Problem:** The `Auto Flow` dropdown should show `Auto` as its label instead of `Unset` when the dropdown is closed, but still show `Unset` if the dropdown is open _and_ the current value is not `auto` (or not set). **Fix:** https://github.com/user-attachments/assets/99bbfe1e-78f2-4512-afbb-a598985b0a0f Fixes #6503
concrete-utopia · Dec 13, 2024 · ab61d49 · ab61d49
1 parent ec5d9e5
commit ab61d49
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
@@ -967,8 +967,8 @@ function selectOption(value: GridAutoFlow) {
 }
 
 const unsetSelectOption = regularRadixSelectOption({
-  label: 'unset',
-  value: 'unset',
+  label: (isOpen, currentValue) => (isOpen && currentValue !== 'auto' ? 'unset' : 'auto'),
+  value: 'auto',
   placeholder: true,
 })
 
@@ -1026,7 +1026,7 @@ const AutoFlowControl = React.memo(() => {
         selectededViewsRef.current.map((path) =>
           applyCommandsAction([
             updateBulkProperties('always', path, [
-              value === 'unset'
+              value === 'auto'
                 ? propertyToDelete(PP.create('style', 'gridAutoFlow'))
                 : propertyToSet(PP.create('style', 'gridAutoFlow'), value),
             ]),

diff --git a/editor/src/uuiui/radix-components.tsx b/editor/src/uuiui/radix-components.tsx
@@ -228,7 +228,7 @@ Separator.displayName = 'Separator'
 type RegularRadixSelectOption = {
   type: 'REGULAR'
   value: string
-  label: string
+  label: string | ((isOpen: boolean, currentValue: string | null) => string)
   icon?: IcnProps
   placeholder?: boolean
 }
@@ -254,6 +254,20 @@ export function separatorRadixSelectOption(): Separator {
 
 export type RadixSelectOption = RegularRadixSelectOption | Separator
 
+function optionLabelToString(
+  option: RegularRadixSelectOption | null,
+  isOpen: boolean,
+  currentValue: string | null,
+): string | null {
+  if (option == null) {
+    return null
+  }
+
+  const label = typeof option.label === 'string' ? option.label : option.label(isOpen, currentValue)
+
+  return `${label.charAt(0).toUpperCase()}${label.slice(1)}`
+}
+
 export const RadixSelect = React.memo(
   (props: {
     id: string
@@ -269,11 +283,24 @@ export const RadixSelect = React.memo(
       e.stopPropagation()
     }, [])
 
+    const { onOpenChange: propsOnOpenChange } = props
+
+    const [isOpen, setIsOpen] = React.useState(false)
+    const onOpenChange = React.useCallback(
+      (open: boolean) => {
+        setIsOpen(open)
+        propsOnOpenChange?.(open)
+      },
+      [propsOnOpenChange],
+    )
+
+    const valueLabel = optionLabelToString(props.value ?? null, isOpen, props.value?.value ?? null)
+
     return (
       <Select.Root
         value={props.value?.value}
         onValueChange={props.onValueChange}
-        onOpenChange={props.onOpenChange}
+        onOpenChange={onOpenChange}
       >
         <Select.Trigger
           style={{
@@ -297,7 +324,7 @@ export const RadixSelect = React.memo(
             },
           }}
         >
-          <Select.Value placeholder={props.value?.label} />
+          <Select.Value placeholder={valueLabel} />
           <Select.Icon style={{ width: 12, height: 12 }}>
             <SmallerIcons.ExpansionArrowDown />
           </Select.Icon>
@@ -339,7 +366,7 @@ export const RadixSelect = React.memo(
                   )
                 }
 
-                const label = `${option.label.charAt(0).toUpperCase()}${option.label.slice(1)}`
+                const label = optionLabelToString(option, isOpen, props.value?.value ?? null)
                 return (
                   <Select.Item
                     key={`select-option-${props.id}-${index}`}