playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

data/app/pb_kits/playbook/pb_image/docs/_playground.json

@@ -2,12 +2,35 @@
   "template": "<Image{{props}} />",
   "propTargets": {},
   "defaults": {
-    "url": "https://unsplash.it/500/400/?image=634",
     "alt": "Misty forest",
-    "size": "md",
+    "rounded": false,
     "transition": "fade",
-    "rounded": false
+    "url": "https://unsplash.it/500/400/?image=634",
+    "size": "md"
   },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "url",
+        "alt"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size",
+        "rounded",
+        "transition"
+      ]
+    },
+    {
+      "name": "Events",
+      "props": [
+        "onError"
+      ]
+    }
+  ],
   "presets": [
     {
       "name": "Default",
@@ -151,28 +174,5 @@
         "react"
       ]
     }
-  },
-  "groups": [
-    {
-      "name": "Content",
-      "props": [
-        "url",
-        "alt"
-      ]
-    },
-    {
-      "name": "Appearance",
-      "props": [
-        "size",
-        "rounded",
-        "transition"
-      ]
-    },
-    {
-      "name": "Events",
-      "props": [
-        "onError"
-      ]
-    }
-  ]
+  }
 }

data/app/pb_kits/playbook/pb_image/kit.schema.json

@@ -8,59 +8,92 @@
   ],
   "props": {
     "alt": {
+      "type": "string",
       "platforms": [
+        "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "onError": {
+      "type": {
+        "react": "function",
+        "rails": "string"
+      },
       "platforms": [
+        "react",
         "rails"
       ],
-      "type": "string",
       "default": null
     },
-    "rounded": {
+    "size": {
+      "type": "enum",
       "platforms": [
+        "react",
         "rails"
       ],
-      "type": "boolean",
-      "default": false
+      "values": {
+        "react": [
+          "xs",
+          "sm",
+          "md",
+          "lg",
+          "xl"
+        ],
+        "rails": [
+          "xs",
+          "sm",
+          "md",
+          "lg",
+          "xl",
+          "none"
+        ]
+      },
+      "default": {
+        "react": "",
+        "rails": "none"
+      }
     },
-    "size": {
+    "rounded": {
+      "type": "boolean",
       "platforms": [
+        "react",
         "rails"
       ],
-      "type": "enum",
-      "values": [
-        "xs",
-        "sm",
-        "md",
-        "lg",
-        "xl",
-        "none"
-      ],
-      "default": "none"
+      "default": false
     },
     "transition": {
+      "type": "enum",
       "platforms": [
+        "react",
         "rails"
       ],
-      "type": "enum",
-      "values": [
-        "blur",
-        "fade",
-        "scale",
-        "none"
-      ],
+      "values": {
+        "react": [
+          "blur",
+          "fade",
+          "scale"
+        ],
+        "rails": [
+          "blur",
+          "fade",
+          "scale",
+          "none"
+        ]
+      },
       "default": "fade"
     },
     "url": {
+      "type": "string",
       "platforms": [
+        "react",
         "rails"
-      ]
+      ],
+      "default": ""
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Image } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_label_pill/_label_pill.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 
@@ -16,7 +17,7 @@ type LabelPillProps = {
   label?: string,
   pillValue?: string,
   variant: "error" | "info" | "neutral" | "primary" | "success" | "warning",
-}
+} & GlobalEventProps
 
 const LabelPill = (props: LabelPillProps) => {
   const {
@@ -43,6 +44,7 @@ const LabelPill = (props: LabelPillProps) => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_label_pill/kit.schema.json

@@ -39,6 +39,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { LabelPill } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_label_value/docs/_playground.json

@@ -3,10 +3,10 @@
   "propTargets": {},
   "defaults": {
     "active": false,
+    "dark": false,
     "variant": "default",
     "label": "Role",
-    "value": "Administrator, Moderator",
-    "dark": false
+    "value": "Administrator, Moderator"
   },
   "groups": [
     {

data/app/pb_kits/playbook/pb_label_value/kit.schema.json

@@ -19,7 +19,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "date": {
       "type": "Date",

data/app/pb_kits/playbook/pb_layout/docs/_playground.json

@@ -2,11 +2,11 @@
   "template": "<Layout{{props}} />",
   "propTargets": {},
   "defaults": {
-    "collapse": "xs",
+    "dark": false,
     "full": false,
     "position": "left",
     "responsive": false,
-    "size": "sm",
+    "size": "md",
     "variant": "light",
     "transparent": false,
     "layout": "sidebar"

data/app/pb_kits/playbook/pb_layout/kit.schema.json

@@ -20,13 +20,17 @@
         "lg",
         "xl"
       ],
-      "default": "xs"
+      "default": {
+        "react": "md",
+        "rails": "xs"
+      }
     },
     "dark": {
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "full": {
       "type": "boolean",
@@ -62,15 +66,24 @@
         "react",
         "rails"
       ],
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ],
-      "default": {
-        "react": "sm",
-        "rails": "md"
-      }
+      "values": {
+        "react": [
+          "xs",
+          "sm",
+          "md",
+          "base",
+          "lg",
+          "xl"
+        ],
+        "rails": [
+          "xs",
+          "sm",
+          "md",
+          "lg",
+          "xl"
+        ]
+      },
+      "default": "md"
     },
     "variant": {
       "type": "enum",
@@ -99,15 +112,25 @@
         "react",
         "rails"
       ],
-      "values": [
-        "sidebar",
-        "collection",
-        "collection_detail",
-        "kanban",
-        "content",
-        "masonry",
-        "bracket"
-      ],
+      "values": {
+        "react": [
+          "sidebar",
+          "collection",
+          "collection_detail",
+          "kanban",
+          "content",
+          "masonry",
+          "bracket"
+        ],
+        "rails": [
+          "sidebar",
+          "collection",
+          "collection_detail",
+          "kanban",
+          "content",
+          "masonry"
+        ]
+      },
       "default": "sidebar"
     }
   },

data/app/pb_kits/playbook/pb_legend/_legend.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
@@ -17,7 +18,7 @@ type LegendProps = {
   id?: string,
   prefixText?: string,
   text: string,
-}
+} & GlobalEventProps
 
 const Legend = (props: LegendProps) => {
   const {
@@ -54,6 +55,7 @@ const Legend = (props: LegendProps) => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={bodyCss}
         id={id}
     >

data/app/pb_kits/playbook/pb_legend/docs/_playground.json

@@ -3,8 +3,8 @@
   "propTargets": {},
   "defaults": {
     "color": "data_1",
-    "text": "Revenue",
-    "dark": false
+    "dark": false,
+    "text": "Revenue"
   },
   "groups": [
     {

data/app/pb_kits/playbook/pb_legend/kit.schema.json

@@ -19,7 +19,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "prefixText": {
       "type": "string",
@@ -37,6 +38,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Legend } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx

@@ -8,7 +8,7 @@ import { LightboxContext } from './_lightbox_context'
 
 import Carousel from './Carousel/index'
 
-type LightboxType = {
+type LightboxProps = {
   aria?: {[key: string]: string},
   children: React.ReactNode[] | React.ReactNode | string,
   className?: string,
@@ -28,7 +28,7 @@ type LightboxType = {
   title?: string | any,
 }
 
-const Lightbox = (props: LightboxType): React.ReactNode => {
+const Lightbox = (props: LightboxProps): React.ReactNode => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_lightbox/kit.schema.json

@@ -0,0 +1,84 @@
+{
+  "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
+  "name": "Lightbox",
+  "description": "Lightbox component",
+  "platforms": [
+    "react"
+  ],
+  "props": {
+    "currentPhotoIndex": {
+      "type": "number",
+      "platforms": [
+        "react"
+      ]
+    },
+    "description": {
+      "type": "string | any",
+      "platforms": [
+        "react"
+      ]
+    },
+    "photos": {
+      "type": "array",
+      "platforms": [
+        "react"
+      ]
+    },
+    "initialPhoto": {
+      "type": "number",
+      "platforms": [
+        "react"
+      ],
+      "default": 0
+    },
+    "onChange": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "onClickRight": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "onClose": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "icon": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ],
+      "default": "times"
+    },
+    "navRight": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "trigger": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "title": {
+      "type": "string | any",
+      "platforms": [
+        "react"
+      ]
+    }
+  },
+  "globalProps": true,
+  "usage": {
+    "react": {
+      "import": "import { Lightbox } from 'playbook-ui'"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_link/docs/_playground.json

@@ -2,12 +2,15 @@
   "template": "<Link{{props}}>{{children}}</Link>",
   "propTargets": {},
   "defaults": {
-    "color": "default",
     "disabled": false,
+    "href": "#link-example",
+    "icon": "",
+    "iconRight": "",
     "tag": "a",
+    "target": "",
+    "text": "Link text",
     "underline": false,
-    "href": "#link-example",
-    "text": "Link text"
+    "color": "default"
   },
   "children": {
     "editable": true,

data/app/pb_kits/playbook/pb_link/kit.schema.json

@@ -19,7 +19,10 @@
         "muted",
         "destructive"
       ],
-      "default": "default"
+      "default": {
+        "react": "",
+        "rails": "default"
+      }
     },
     "dark": {
       "type": "boolean",
@@ -40,21 +43,24 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "icon": {
       "type": "string",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "iconRight": {
       "type": "string",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "rel": {
       "type": "string",
@@ -94,14 +100,16 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "text": {
       "type": "string",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "underline": {
       "type": "boolean",

data/app/pb_kits/playbook/pb_list/_list_item.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import Icon from '../pb_icon/_icon'
 import Body from '../pb_body/_body'
 import Draggable from '../pb_draggable/_draggable'
@@ -16,7 +17,7 @@ type ListItemProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   tabIndex?: number,
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 const ListItem = (props: ListItemProps) => {
   const {
@@ -52,9 +53,10 @@ const ListItem = (props: ListItemProps) => {
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
+            {...globalEventProps(props)}
             className={classes}
             id={id}
-            tabIndex={tabIndex}
+            {...(tabIndex != null ? { tabIndex } : {})}
         >
           {
             dragHandle && (
@@ -79,9 +81,10 @@ const ListItem = (props: ListItemProps) => {
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
+            {...globalEventProps(props)}
             className={classes}
             id={id}
-            tabIndex={tabIndex}
+            {...(tabIndex != null ? { tabIndex } : {})}
         >
           {children}
         </li>

data/app/pb_kits/playbook/pb_list/docs/_playground.json

@@ -7,8 +7,8 @@
     "enableDrag": false,
     "layout": "",
     "ordered": false,
-    "xpadding": false,
-    "size": ""
+    "size": "",
+    "xpadding": false
   },
   "children": {
     "editable": true,

data/app/pb_kits/playbook/pb_list/kit.schema.json

@@ -75,7 +75,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "variant": {
       "type": "string",

data/app/pb_kits/playbook/pb_loading_inline/docs/_playground.json

@@ -5,7 +5,6 @@
     "align": "left",
     "color": "light",
     "dark": false,
-    "text": "Loading",
     "variant": "dotted"
   },
   "groups": [

data/app/pb_kits/playbook/pb_loading_inline/kit.schema.json

@@ -50,7 +50,10 @@
         "react",
         "rails"
       ],
-      "default": "Loading"
+      "default": {
+        "react": " Loading",
+        "rails": "Loading"
+      }
     },
     "variant": {
       "type": "enum",