playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1,84 +1,155 @@
 {
   "template": "<Image{{props}} />",
   "propTargets": {},
-  "defaults": {},
+  "defaults": {
+    "url": "https://unsplash.it/500/400/?image=634",
+    "alt": "Misty forest",
+    "size": "md",
+    "transition": "fade",
+    "rounded": false
+  },
   "presets": [
     {
-      "name": "Sample photo",
-      "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Sample image"
-      }
-    },
-    {
-      "name": "Small",
-      "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Small",
-        "size": "sm"
-      }
-    },
-    {
-      "name": "Medium",
+      "name": "Default",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Medium",
-        "size": "md"
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Misty forest",
+        "size": "md",
+        "transition": "fade"
       }
     },
     {
-      "name": "Large",
+      "name": "Extra Small",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Large",
-        "size": "lg"
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Extra small misty forest",
+        "size": "xs",
+        "transition": "fade"
       }
     },
     {
       "name": "Rounded",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Rounded",
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Rounded misty forest",
         "rounded": true,
-        "size": "md"
+        "size": "md",
+        "transition": "fade"
       }
     },
     {
-      "name": "Blur transition",
+      "name": "Blur Transition",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Blur",
-        "transition": "blur",
-        "size": "md"
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Blur transition image",
+        "size": "md",
+        "transition": "blur"
       }
     },
     {
-      "name": "Scale transition",
+      "name": "Scale Transition",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Scale",
-        "transition": "scale",
-        "size": "md"
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Scale transition image",
+        "size": "md",
+        "transition": "scale"
       }
     },
     {
-      "name": "Fade transition",
+      "name": "Custom Error Handler",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Fade",
-        "transition": "fade",
-        "size": "md"
+        "url": "https://example.invalid/missing-image.jpg",
+        "alt": "Broken image example",
+        "onError": "() => console.log('image failed to load')",
+        "size": "md",
+        "transition": "fade"
       }
     }
   ],
   "conditionals": {},
   "hints": {
-    "lazyload": {
-      "when": {
-        "url": "https://unsplash.it/500/400"
-      },
-      "message": "The kit uses lazyload classes; url is applied as src and data-src.",
+    "default": {
+      "presetName": "Default",
+      "message": "Use the url prop to pass the image URL.",
+      "type": "info"
+    },
+    "rounded": {
+      "presetName": "Rounded",
+      "message": "rounded adds the rounded class while preserving the selected size.",
+      "type": "info"
+    },
+    "blur_transition": {
+      "presetName": "Blur Transition",
+      "message": "Use the transition prop to select the lazyload transition class: fade, blur, or scale.",
+      "type": "info"
+    },
+    "custom_error_handler": {
+      "presetName": "Custom Error Handler",
+      "message": "Use the onError prop to pass a function to handle the image error.",
+      "type": "info"
+    },
+    "Extra Small": {
+      "presetName": "Extra Small",
+      "message": "Use the size prop to change the size of the image.",
       "type": "info"
+    },
+    "Rounded": {
+      "presetName": "Rounded",
+      "message": "Use the rounded prop to add rounded corners to the image.",
+      "type": "info"
+    }
+  },
+  "customProps": {
+    "alt": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "url": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "size": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ],
+      "default": "md"
+    },
+    "rounded": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ],
+      "default": false
+    },
+    "transition": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "blur",
+        "fade",
+        "scale"
+      ],
+      "default": "fade"
+    },
+    "onError": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
     }
   },
   "groups": [
@@ -96,6 +167,12 @@
         "rounded",
         "transition"
       ]
+    },
+    {
+      "name": "Events",
+      "props": [
+        "onError"
+      ]
     }
   ]
 }

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

@@ -1,89 +1,164 @@
 {
+  "defaults": {
+    "url": "https://unsplash.it/500/400/?image=634",
+    "alt": "Misty forest",
+    "size": "md",
+    "transition": "fade",
+    "rounded": false
+  },
+  "customProps": {
+    "alt": {
+      "type": "string",
+      "platforms": ["react"]
+    },
+    "url": {
+      "type": "string",
+      "platforms": ["react"]
+    },
+    "size": {
+      "type": "enum",
+      "platforms": ["react"],
+      "values": [
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ],
+      "default": "md"
+    },
+    "rounded": {
+      "type": "boolean",
+      "platforms": ["react"],
+      "default": false
+    },
+    "transition": {
+      "type": "enum",
+      "platforms": ["react"],
+      "values": [
+        "blur",
+        "fade",
+        "scale"
+      ],
+      "default": "fade"
+    },
+    "onError": {
+      "type": "function",
+      "platforms": ["react"]
+    }
+  },
   "groups": [
     {
       "name": "Content",
-      "props": ["url", "alt"]
+      "props": [
+        "url",
+        "alt"
+      ]
     },
     {
       "name": "Appearance",
-      "props": ["size", "rounded", "transition"]
+      "props": [
+        "size",
+        "rounded",
+        "transition"
+      ]
+    },
+    {
+      "name": "Events",
+      "props": [
+        "onError"
+      ]
     }
   ],
   "presets": [
     {
-      "name": "Sample photo",
-      "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Sample image"
-      }
-    },
-    {
-      "name": "Small",
-      "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Small",
-        "size": "sm"
-      }
-    },
-    {
-      "name": "Medium",
+      "name": "Default",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Medium",
-        "size": "md"
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Misty forest",
+        "size": "md",
+        "transition": "fade"
       }
     },
     {
-      "name": "Large",
+      "name": "Extra Small",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Large",
-        "size": "lg"
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Extra small misty forest",
+        "size": "xs",
+        "transition": "fade"
       }
     },
     {
       "name": "Rounded",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Rounded",
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Rounded misty forest",
         "rounded": true,
-        "size": "md"
+        "size": "md",
+        "transition": "fade"
       }
     },
     {
-      "name": "Blur transition",
+      "name": "Blur Transition",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Blur",
-        "transition": "blur",
-        "size": "md"
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Blur transition image",
+        "size": "md",
+        "transition": "blur"
       }
     },
     {
-      "name": "Scale transition",
+      "name": "Scale Transition",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Scale",
-        "transition": "scale",
-        "size": "md"
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Scale transition image",
+        "size": "md",
+        "transition": "scale"
       }
     },
     {
-      "name": "Fade transition",
+      "name": "Custom Error Handler",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Fade",
-        "transition": "fade",
-        "size": "md"
+        "url": "https://example.invalid/missing-image.jpg",
+        "alt": "Broken image example",
+        "onError": "() => console.log('image failed to load')",
+        "size": "md",
+        "transition": "fade"
       }
     }
   ],
   "conditionals": {},
   "hints": {
-    "lazyload": {
-      "when": { "url": "https://unsplash.it/500/400" },
-      "message": "The kit uses lazyload classes; url is applied as src and data-src.",
+    "default": {
+      "presetName": "Default",
+      "message": "Use the url prop to pass the image URL.",
+      "type": "info"
+    },
+    "rounded": {
+      "presetName": "Rounded",
+      "message": "rounded adds the rounded class while preserving the selected size.",
+      "type": "info"
+    },
+    "blur_transition": {
+      "presetName": "Blur Transition",
+      "message": "Use the transition prop to select the lazyload transition class: fade, blur, or scale.",
+      "type": "info"
+    },
+    "custom_error_handler": {
+      "presetName": "Custom Error Handler",
+      "message": "Use the onError prop to pass a function to handle the image error.",
+      "type": "info"
+    },
+    "Extra Small": {
+      "presetName": "Extra Small",
+      "message": "Use the size prop to change the size of the image.",
+      "type": "info"
+    },
+    "Rounded": {
+      "presetName": "Rounded",
+      "message": "Use the rounded prop to add rounded corners to the image.",
       "type": "info"
-    }
   }
 }
+}

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

@@ -2,24 +2,86 @@
   "template": "<LabelPill{{props}} />",
   "propTargets": {},
   "defaults": {
-    "variant": "neutral"
+    "variant": "neutral",
+    "label": "Service Needed",
+    "pillValue": "76"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
         "label",
-        "pillValue",
+        "pillValue"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
         "variant"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Default",
-      "props": {}
+      "name": "Neutral",
+      "props": {
+        "label": "Service Needed",
+        "pillValue": "76",
+        "variant": "neutral"
+      }
+    },
+    {
+      "name": "Success",
+      "props": {
+        "label": "Waiting",
+        "pillValue": "69",
+        "variant": "success"
+      }
+    },
+    {
+      "name": "Error",
+      "props": {
+        "label": "In Service",
+        "pillValue": "28",
+        "variant": "error"
+      }
+    },
+    {
+      "name": "Warning",
+      "props": {
+        "label": "Fully Serviced",
+        "pillValue": "101",
+        "variant": "warning"
+      }
+    },
+    {
+      "name": "Info",
+      "props": {
+        "label": "Inbox",
+        "pillValue": "197",
+        "variant": "info"
+      }
+    },
+    {
+      "name": "Primary",
+      "props": {
+        "label": "Inbox",
+        "pillValue": "218",
+        "variant": "primary"
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "neutral": {
+      "presetName": "Neutral",
+      "message": "LabelPill combines a Caption label with a Pill value.",
+      "type": "info"
+    },
+    "success": {
+      "presetName": "Success",
+      "message": "variant is passed to the nested Pill to control color treatment.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_label_pill/docs/_playground.overrides.json

@@ -0,0 +1,85 @@
+{
+  "defaults": {
+    "label": "Service Needed",
+    "pillValue": "76",
+    "variant": "neutral"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "pillValue"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Neutral",
+      "props": {
+        "label": "Service Needed",
+        "pillValue": "76",
+        "variant": "neutral"
+      }
+    },
+    {
+      "name": "Success",
+      "props": {
+        "label": "Waiting",
+        "pillValue": "69",
+        "variant": "success"
+      }
+    },
+    {
+      "name": "Error",
+      "props": {
+        "label": "In Service",
+        "pillValue": "28",
+        "variant": "error"
+      }
+    },
+    {
+      "name": "Warning",
+      "props": {
+        "label": "Fully Serviced",
+        "pillValue": "101",
+        "variant": "warning"
+      }
+    },
+    {
+      "name": "Info",
+      "props": {
+        "label": "Inbox",
+        "pillValue": "197",
+        "variant": "info"
+      }
+    },
+    {
+      "name": "Primary",
+      "props": {
+        "label": "Inbox",
+        "pillValue": "218",
+        "variant": "primary"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "neutral": {
+      "presetName": "Neutral",
+      "message": "LabelPill combines a Caption label with a Pill value.",
+      "type": "info"
+    },
+    "success": {
+      "presetName": "Success",
+      "message": "variant is passed to the nested Pill to control color treatment.",
+      "type": "info"
+    }
+  }
+}