Grid advanced modal color/stretch tweaks (#6559)

**Problem:**

1. The advanced grid modal always shows selected dropdown value with a
subdued color
2. The advaned grid modal doesn't offer `stretch` as an option for
justify/align.

**Fix:**

1. Fix the entries which are incorrectly set with `placeholder: true`
2. Use `FlexAlignment` for the options of the `align` section
3. Add `stretch` to the `FlexJustifyContent` enum

Fixes #6558

editor/src/components/inspector/controls/advanced-grid-modal.tsx

@@ -14,7 +14,7 @@ import {
  separatorRadixSelectOption,
 } from '../../../uuiui/radix-components'
 import { optionalMap } from '../../../core/shared/optional-utils'
-import type { FlexAlignment } from 'utopia-api/core'
+import { FlexAlignment } from 'utopia-api/core'
 import { FlexJustifyContent } from 'utopia-api/core'
 import { GridAutoColsOrRowsControlInner } from '../grid-auto-cols-or-rows-control'
 import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
@@ -79,12 +79,18 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
  [alignItemsLayoutInfo],
  )
 
- const contentOptions = [
+ const justifyOptions = [
  unsetSelectOption,
  separatorRadixSelectOption(),
  ...Object.values(FlexJustifyContent).map(selectOption),
  ]
 
+ const alignOptions = [
+ unsetSelectOption,
+ separatorRadixSelectOption(),
+ ...Object.values(FlexAlignment).map(selectOption),
+ ]
+
  const onSubmitJustifyContent = React.useCallback(
  (value: string) => {
  if (value === 'unset') {
@@ -187,7 +193,7 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
  <RadixSelect
  id='grid.justifyContent'
  value={currentJustifyContentValue ?? unsetSelectOption}
- options={contentOptions}
+ options={justifyOptions}
  onValueChange={onSubmitJustifyContent}
  contentClassName={`ignore-react-onclickoutside-${props.id}`}
  contentStyle={{
@@ -205,7 +211,7 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
  <RadixSelect
  id='grid.alignContent'
  value={currentAlignContentValue ?? unsetSelectOption}
- options={contentOptions}
+ options={alignOptions}
  onValueChange={onSubmitAlignContent}
  contentClassName={`ignore-react-onclickoutside-${props.id}`}
  contentStyle={{
@@ -301,11 +307,11 @@ const justifyItemsOptions = itemsOptions('justify')
 const alignItemsOptions = itemsOptions('align')
 const rowVariant: GridRowVariant = '|--67px--|<--------1fr-------->'
 
-function selectOption(value: FlexJustifyContent) {
+function selectOption(value: FlexJustifyContent | FlexAlignment) {
  return regularRadixSelectOption({
  label: value.replace('-', ' '),
  value: value,
- placeholder: true,
+ placeholder: false,
  })
 }
 

utopia-api/src/layout/flex.ts

@@ -215,6 +215,7 @@ export enum FlexJustifyContent {
  SpaceAround = 'space-around',
  SpaceBetween = 'space-between',
  SpaceEvenly = 'space-evenly',
+ Stretch = 'stretch',
 }
 
 export const AllFlexJustifyContents: Array<FlexJustifyContent> = [
@@ -224,6 +225,7 @@ export const AllFlexJustifyContents: Array<FlexJustifyContent> = [
  FlexJustifyContent.SpaceAround,
  FlexJustifyContent.SpaceBetween,
  FlexJustifyContent.SpaceEvenly,
+ FlexJustifyContent.Stretch,
 ]
 
 export enum FlexDirection {