Text annotations

concrete-utopia · Jun 4, 2024 · 3f72dc3 · 3f72dc3
1 parent d2b928a
commit 3f72dc3
Showing 1 changed file with 219 additions and 3 deletions.
diff --git a/utopia/text.utopia.js b/utopia/text.utopia.js
@@ -286,12 +286,228 @@ const annotations = {
   Text: {
     component: Text,
     properties: {
-      size: Utopia.popupListControl(
-        tshirtSizes.map((size) => ({
+      size: {
+        control: 'radio',
+        options: tshirtSizes.map((size) => ({
           label: size,
           value: size,
         })),
-      ),
+        folder: 'Size',
+      },
+      width: {
+        control: 'radio',
+        options: [
+          {
+            label: 'narrow',
+            value: 'narrow',
+          },
+          {
+            label: 'base',
+            value: 'base',
+          },
+          {
+            label: 'wide',
+            value: 'wide',
+          },
+          {
+            label: 'full',
+            value: 'full',
+          },
+        ],
+        folder: 'Size',
+      },
+      weight: {
+        control: 'radio',
+        options: [
+          {
+            value: 'light',
+            label: 'light',
+          },
+          {
+            value: 'regular',
+            label: 'regular',
+          },
+          {
+            value: 'medium',
+            label: 'medium',
+          },
+          {
+            value: 'semibold',
+            label: 'semibold',
+          },
+          {
+            value: 'bold',
+            label: 'bold',
+          },
+        ],
+        folder: 'Character',
+      },
+      align: {
+        control: 'radio',
+        options: [
+          {
+            value: 'light',
+            label: 'light',
+          },
+          {
+            value: 'left',
+            label: 'left',
+          },
+          {
+            value: 'center',
+            label: 'center',
+          },
+          {
+            value: 'right',
+            label: 'right',
+          },
+        ],
+        folder: 'Paragraph',
+      },
+      wrap: {
+        control: 'radio',
+        options: [
+          {
+            value: 'wrap',
+            label: 'wrap',
+          },
+          {
+            value: 'nowrap',
+            label: 'nowrap',
+          },
+          {
+            value: 'pretty',
+            label: 'pretty',
+          },
+          {
+            value: 'balance',
+            label: 'balance',
+          },
+          {
+            value: 'bold',
+            label: 'bold',
+          },
+        ],
+        folder: 'Paragraph',
+      },
+      color: {
+        control: 'radio',
+        options: [
+          {
+            value: 'text',
+            label: 'text',
+          },
+          {
+            value: 'black',
+            label: 'black',
+          },
+          {
+            value: 'accent',
+            label: 'accent',
+          },
+          {
+            value: 'white',
+            label: 'white',
+          },
+          {
+            value: 'gray',
+            label: 'gray',
+          },
+        ],
+        folder: 'Character',
+      },
+      truncate: {
+        ...BooleanSegmentControl,
+        folder: 'Paragraph',
+      },
+      uppercase: {
+        ...BooleanSegmentControl,
+        folder: 'Character',
+      },
+      fontStyle: {
+        control: 'radio',
+        options: [
+          {
+            value: 'italic',
+            label: 'italic',
+          },
+          {
+            value: 'underline',
+            label: 'underline',
+          },
+          {
+            value: 'lineThrough',
+            label: 'linethrough',
+          },
+          {
+            value: 'strike',
+            label: 'strike',
+          },
+          {
+            value: 'bold',
+            label: 'bold',
+          },
+        ],
+        folder: 'Character',
+        label: 'Font style',
+      },
+      font: {
+        control: 'radio',
+        options: [
+          {
+            value: 'sans',
+            label: 'sans',
+          },
+          {
+            value: 'serif',
+            label: 'serif',
+          },
+          {
+            value: 'mono',
+            label: 'mono',
+          },
+          {
+            value: 'text',
+            label: 'text',
+          },
+          {
+            value: 'display',
+            label: 'display',
+          },
+        ],
+        folder: 'Character',
+      },
+      leading: {
+        control: 'radio',
+        options: [
+          {
+            value: 'none',
+            label: 'none',
+          },
+          {
+            value: 'tight',
+            label: 'tight',
+          },
+          {
+            value: 'snug',
+            label: 'snug',
+          },
+          {
+            value: 'normal',
+            label: 'normal',
+          },
+          {
+            value: 'relaxed',
+            label: 'relaxed',
+          },
+          {
+            value: 'loose',
+            label: 'loose',
+          },
+        ],
+        folder: 'Paragraph',
+        label: 'Line height',
+      },
     },
     focus: 'never',
     inspector: 'hidden',