Icons for grid autoflow dropdown

editor/src/components/inspector/common/css-utils.ts

@@ -88,6 +88,7 @@ import type { ParseError } from '../../../utils/value-parser-utils'
 import { descriptionParseError } from '../../../utils/value-parser-utils'
 import * as csstree from 'css-tree'
 import { expandCssTreeNodeValue, parseCssTreeNodeValue } from './css-tree-utils'
+import type { IcnProps } from '../../../uuiui'
 
 var combineRegExp = function (regexpList: Array<RegExp | string>, flags?: string) {
   let source: string = ''
@@ -982,9 +983,35 @@ export function parseGridPosition(
   }
 }
 
-export const GridAutoFlowValues = ['row', 'column', 'dense', 'row dense', 'column dense'] as const
+export const GridAutoFlowValues = ['dense', 'column', 'column dense', 'row', 'row dense'] as const
 export type GridAutoFlow = (typeof GridAutoFlowValues)[number]
 
+export function gridAutoFlowIcon(value: GridAutoFlow): IcnProps {
+  switch (value) {
+    case 'column':
+    case 'column dense':
+      return {
+        category: 'inspector-element',
+        type: 'arrowDown',
+        color: 'black',
+        width: 16,
+        height: 16,
+      }
+    case 'dense':
+    case 'row':
+    case 'row dense':
+      return {
+        category: 'inspector-element',
+        type: 'arrowRight',
+        color: 'black',
+        width: 16,
+        height: 16,
+      }
+    default:
+      assertNever(value)
+  }
+}
+
 export function parseGridAutoFlow(rawValue: string): GridAutoFlow | null {
   if (GridAutoFlowValues.some((v) => v === rawValue)) {
     return rawValue as GridAutoFlow

editor/src/components/inspector/flex-section.tsx

@@ -44,6 +44,7 @@ import {
   cssKeyword,
   cssNumber,
   cssNumberToString,
+  gridAutoFlowIcon,
   gridCSSKeyword,
   gridCSSNumber,
   isCSSKeyword,
@@ -828,6 +829,7 @@ const AutoFlowPopupId = 'auto-flow-control'
 const selectOption = (value: GridAutoFlow | 'unset'): SelectOption => ({
   label: value,
   value: value,
+  icon: value === 'unset' ? undefined : gridAutoFlowIcon(value),
 })
 
 const GRID_AUTO_FLOW_DROPDOWN_OPTIONS: Array<SelectOption> = GridAutoFlowValues.map(selectOption)