Change title -> label for io.display.grid

interval · Mar 8, 2023 · 3e3b30f · 3e3b30f
1 parent 89d0a7b
commit 3e3b30f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/src/classes/IOClient.ts b/src/classes/IOClient.ts
@@ -1047,7 +1047,7 @@ export class IOClient {
         /**
          * Displays data in a grid layout.
          *
-         * Grid items can include a title, description, image, and options menu, and can optionally link to another page, action, or external URL.
+         * Grid items can include a label, description, image, and options menu, and can optionally link to another page, action, or external URL.
          *
          * Grid item size can be controlled using the idealColumnWidth property. Interval will calculate a column width that is as close as possible to that number while factoring in gutter size and window width.
          *
@@ -1082,7 +1082,7 @@ export class IOClient {
          *     },
          *   ],
          *   renderItem: row => ({
-         *     title: row.album,
+         *     label: row.album,
          *     description: row.artist,
          *     image: {
          *       url: row.imageUrl,

diff --git a/src/examples/basic/grid.ts b/src/examples/basic/grid.ts
@@ -24,7 +24,7 @@ export const dogs = new Action({
       data,
       idealColumnWidth: 200,
       renderItem: row => ({
-        title: row.name,
+        label: row.name,
         description: row.description,
         route: 'tables/display_table',
         image: {
@@ -49,7 +49,7 @@ export const tiktoks = new Action({
       .fill(null)
       .map((_, i) => ({
         id: i,
-        title: `video from ${faker.internet.userName()}`,
+        label: `video from ${faker.internet.userName()}`,
         description: faker.date.past().toLocaleString(),
         image: faker.image.animals(1080 / 4, 1920 / 4, true),
       }))
@@ -58,7 +58,7 @@ export const tiktoks = new Action({
       data,
       idealColumnWidth: 220,
       renderItem: row => ({
-        title: row.title,
+        label: row.label,
         description: row.description,
         image: {
           url: row.image,
@@ -86,7 +86,7 @@ export const no_images: IntervalActionHandler = async io => {
     .fill(null)
     .map((_, i) => ({
       id: i,
-      title: faker.commerce.productName(),
+      label: faker.commerce.productName(),
       description: faker.commerce.price(100, 200, 0, '$'),
     }))
 
@@ -156,7 +156,7 @@ export const music = new Action({
       data,
       idealColumnWidth: 240,
       renderItem: row => ({
-        title: row.name,
+        label: row.name,
         description: row.artists,
         image: {
           url: row.image,
@@ -206,7 +206,7 @@ export const long_descriptions = new Action({
       data,
       idealColumnWidth: 300,
       renderItem: row => ({
-        title: row.name,
+        label: row.name,
         description: row.description,
         image: {
           url: row.image,
@@ -231,7 +231,7 @@ export const empty_state = new Action({
       data: data.slice(0, 0),
       idealColumnWidth: 300,
       renderItem: row => ({
-        title: row.name,
+        label: row.name,
       }),
     })
   },
@@ -248,9 +248,9 @@ export const async_grid: IntervalActionHandler = async io => {
       image: i % 5 === 0 ? null : faker.image.imageUrl(600, 300, 'dog', true),
     }))
 
-  await io.display.grid<typeof allData[0]>('Display users', {
+  await io.display.grid<(typeof allData)[0]>('Display users', {
     renderItem: row => ({
-      title: row.name,
+      label: row.name,
       description: row.description,
       image: {
         url: row.image,

diff --git a/src/ioSchema.ts b/src/ioSchema.ts
@@ -310,7 +310,7 @@ export const internalTableColumn = z.object({
 })
 
 export const gridItem = z.object({
-  title: z.string().nullable().optional(),
+  label: z.string().nullable().optional(),
   description: z.string().nullable().optional(),
   image: z
     .object({
@@ -327,13 +327,23 @@ export const gridItem = z.object({
   params: serializableRecord.optional(),
 })
 
+export const backwardCompatibleGridItem = gridItem.merge(
+  z.object({
+    // @deprecated in favor of label
+    title: z.string().nullable().optional(),
+  })
+)
+
 export const internalGridItem = z.object({
-  data: gridItem,
+  data: backwardCompatibleGridItem,
   key: z.string(),
   filterValue: z.string().optional(),
 })
 
-export type GridItem = z.infer<typeof gridItem>
+export type GridItem = z.input<typeof gridItem>
+export type BackwardCompatibleGridItem = z.input<
+  typeof backwardCompatibleGridItem
+>
 export type InternalGridItem = z.infer<typeof internalGridItem>
 
 const searchResult = z.object({