Spike out select style inputs for keyword-based properties

apps/docs/pages/index.tsx

@@ -7,9 +7,9 @@ import { Theme } from '@emotion/react'
 const initialStyles: any = {
   fontSize: { value: 16, unit: 'px' },
   lineHeight: { value: 1.4, unit: 'number' },
+  textAlign: 'inherit',
   color: 'tomato',
   backgroundColor: 'black',
-  textAlign: 'inherit',
 }
 const DEFAULT_THEME: Theme = {
   fontSizes: [

packages/gui/src/components/Editor/map.ts

@@ -1,9 +1,11 @@
 import { FontSizeInput, LineHeightInput } from '../editors'
 import { BackgroundColorInput, ColorInput } from '../editors/ColorInputs'
+import { TextAlignInput } from '../editors/KeywordInputs'
 
 export const controlMap: Record<string, any> = {
   fontSize: FontSizeInput,
   lineHeight: LineHeightInput,
   color: ColorInput,
   backgroundColor: BackgroundColorInput,
+  textAlign: TextAlignInput,
 }

packages/gui/src/components/editors/ColorInputs.tsx

@@ -1,12 +1,16 @@
+import { useId } from 'react'
 import { ColorPopover, Label } from '../primitives'
 import { ColorEditorProps } from './types'
 
 const DEFAULT_BACKGROUND_COLOR = '#fff'
 export const BackgroundColorInput = ({ value, onChange }: ColorEditorProps) => {
+  const id = useId()
+  const fullId = `${id}-backgroundColor`
   return (
     <>
-      <Label>Background color</Label>
+      <Label htmlFor={fullId}>Background color</Label>
       <ColorPopover
+        id={fullId}
         value={value || DEFAULT_BACKGROUND_COLOR}
         onChange={onChange}
       />
@@ -16,10 +20,16 @@ export const BackgroundColorInput = ({ value, onChange }: ColorEditorProps) => {
 
 const DEFAULT_COLOR = '#000'
 export const ColorInput = ({ value, onChange }: ColorEditorProps) => {
+  const id = useId()
+  const fullId = `${id}-color`
   return (
     <>
-      <Label>Color</Label>
-      <ColorPopover value={value || DEFAULT_COLOR} onChange={onChange} />
+      <Label htmlFor={fullId}>Color</Label>
+      <ColorPopover
+        id={fullId}
+        value={value || DEFAULT_COLOR}
+        onChange={onChange}
+      />
     </>
   )
 }

packages/gui/src/components/editors/KeywordInputs.tsx

@@ -0,0 +1,47 @@
+import { ChangeEvent, useId } from 'react'
+import { getPropertyData } from '../../data/properties'
+import { Label } from '../primitives'
+import { KeywordEditorProps } from './types'
+
+const DEFAULT_TEXT_ALIGN = 'inherit'
+const textAlignKeywords = getPropertyData('textAlign')!
+export const TextAlignInput = ({ value, onChange }: KeywordEditorProps) => {
+  const id = useId()
+  const fullId = `${id}-textAlign`
+  return (
+    <>
+      <Label htmlFor={fullId}>Text align</Label>
+      <Select
+        id={fullId}
+        value={value || DEFAULT_TEXT_ALIGN}
+        onChange={onChange}
+        values={textAlignKeywords.keywords}
+      />
+    </>
+  )
+}
+
+type SelectProps = {
+  id: string
+  onChange: (newValue: string) => void
+  values: string[]
+  value: string
+}
+export const Select = ({ value, onChange, id, values }: SelectProps): any => {
+  return (
+    <select
+      id={id}
+      value={value}
+      onChange={(e: ChangeEvent<HTMLSelectElement>) => onChange(e.target.value)}
+      sx={{ width: '100%', minHeight: '1.6em' }}
+    >
+      {values.map((v) => {
+        return (
+          <option key={v} value={v}>
+            {v}
+          </option>
+        )
+      })}
+    </select>
+  )
+}

packages/gui/src/components/editors/types.ts

@@ -5,6 +5,11 @@ export type LengthEditorProps = {
   onChange: (newValue: Length | ResponsiveLength) => void
 }
 
+export type KeywordEditorProps = {
+  value?: string
+  onChange: (newValue: string) => void
+}
+
 export type ColorEditorProps = {
   value?: Color
   onChange: (newValue: Color) => void

packages/gui/src/components/primitives/ColorPicker/Popover.tsx

@@ -8,6 +8,7 @@ interface Props extends PickerProps {
   showText?: boolean
   /** The element to render on the swatch preview */
   swatch?: JSX.Element
+  id?: string
 }
 
 /**