playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -3,17 +3,31 @@
   "propTargets": {},
   "defaults": {
     "stack": 1,
-    "color": "default"
+    "color": "default",
+    "borderRadius": "sm",
+    "gap": "xxs",
+    "height": "16px",
+    "width": "100%"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Shape",
       "props": [
         "height",
         "width",
-        "borderRadius",
-        "gap",
+        "borderRadius"
+      ]
+    },
+    {
+      "name": "Stack",
+      "props": [
         "stack",
+        "gap"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
         "color",
         "dark"
       ]
@@ -22,9 +36,57 @@
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "height": "16px",
+        "width": "100%"
+      }
+    },
+    {
+      "name": "Stacked",
+      "props": {
+        "gap": "xs",
+        "stack": 4,
+        "width": "80%"
+      }
+    },
+    {
+      "name": "Avatar",
+      "props": {
+        "borderRadius": "rounded",
+        "height": "48px",
+        "width": "48px"
+      }
+    },
+    {
+      "name": "White",
+      "props": {
+        "color": "white",
+        "height": "24px",
+        "width": "60%"
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders a single loading line using the standard skeleton color.",
+      "type": "info"
+    },
+    "stacked": {
+      "presetName": "Stacked",
+      "message": "Stacked repeats the skeleton item and separates rows with gap.",
+      "type": "info"
+    },
+    "avatar": {
+      "presetName": "Avatar",
+      "message": "Avatar uses equal height and width with rounded radius for circular loading placeholders.",
+      "type": "info"
+    },
+    "white": {
+      "presetName": "White",
+      "message": "White switches the skeleton color for darker or colored surfaces.",
+      "type": "info"
+    }
+  }
 }

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

@@ -0,0 +1,80 @@
+{
+  "defaults": {
+    "borderRadius": "sm",
+    "color": "default",
+    "gap": "xxs",
+    "height": "16px",
+    "stack": 1,
+    "width": "100%"
+  },
+  "groups": [
+    {
+      "name": "Shape",
+      "props": ["height", "width", "borderRadius"]
+    },
+    {
+      "name": "Stack",
+      "props": ["stack", "gap"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["color", "dark"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "height": "16px",
+        "width": "100%"
+      }
+    },
+    {
+      "name": "Stacked",
+      "props": {
+        "gap": "xs",
+        "stack": 4,
+        "width": "80%"
+      }
+    },
+    {
+      "name": "Avatar",
+      "props": {
+        "borderRadius": "rounded",
+        "height": "48px",
+        "width": "48px"
+      }
+    },
+    {
+      "name": "White",
+      "props": {
+        "color": "white",
+        "height": "24px",
+        "width": "60%"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders a single loading line using the standard skeleton color.",
+      "type": "info"
+    },
+    "stacked": {
+      "presetName": "Stacked",
+      "message": "Stacked repeats the skeleton item and separates rows with gap.",
+      "type": "info"
+    },
+    "avatar": {
+      "presetName": "Avatar",
+      "message": "Avatar uses equal height and width with rounded radius for circular loading placeholders.",
+      "type": "info"
+    },
+    "white": {
+      "presetName": "White",
+      "message": "White switches the skeleton color for darker or colored surfaces.",
+      "type": "info"
+    }
+  }
+}

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

@@ -3,25 +3,86 @@
   "propTargets": {},
   "defaults": {
     "hideIcon": false,
-    "type": "inbound"
+    "type": "inbound",
+    "source": "Website lead"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
-        "hideIcon",
         "source",
         "type",
         "user"
       ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "hideIcon"
+      ]
     }
   ],
   "presets": [
     {
-      "name": "Default",
-      "props": {}
+      "name": "Inbound",
+      "props": {
+        "source": "Website lead",
+        "type": "inbound"
+      }
+    },
+    {
+      "name": "Referral",
+      "props": {
+        "source": "Partner referral",
+        "type": "referral",
+        "user": {
+          "name": "Ada Lovelace",
+          "userId": "42"
+        }
+      }
+    },
+    {
+      "name": "User",
+      "props": {
+        "source": "Created by",
+        "type": "user",
+        "user": {
+          "name": "Grace Hopper",
+          "userId": "12"
+        }
+      }
+    },
+    {
+      "name": "No Icon",
+      "props": {
+        "hideIcon": true,
+        "source": "Retail location",
+        "type": "retail"
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "inbound": {
+      "presetName": "Inbound",
+      "message": "Inbound shows the default source icon and type label.",
+      "type": "info"
+    },
+    "referral": {
+      "presetName": "Referral",
+      "message": "Referral can use user data to render an avatar and referrer details.",
+      "type": "info"
+    },
+    "user": {
+      "presetName": "User",
+      "message": "User replaces the source type icon with the provided avatar data.",
+      "type": "info"
+    },
+    "no_icon": {
+      "presetName": "No Icon",
+      "message": "No Icon hides the leading source icon while keeping the text stack.",
+      "type": "info"
+    }
+  },
+  "hiddenProps": []
 }

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

@@ -0,0 +1,80 @@
+{
+  "defaults": {
+    "hideIcon": false,
+    "source": "Website lead",
+    "type": "inbound"
+  },
+  "hiddenProps": [],
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["source", "type", "user"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["hideIcon"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Inbound",
+      "props": {
+        "source": "Website lead",
+        "type": "inbound"
+      }
+    },
+    {
+      "name": "Referral",
+      "props": {
+        "source": "Partner referral",
+        "type": "referral",
+        "user": {
+          "name": "Ada Lovelace",
+          "userId": "42"
+        }
+      }
+    },
+    {
+      "name": "User",
+      "props": {
+        "source": "Created by",
+        "type": "user",
+        "user": {
+          "name": "Grace Hopper",
+          "userId": "12"
+        }
+      }
+    },
+    {
+      "name": "No Icon",
+      "props": {
+        "hideIcon": true,
+        "source": "Retail location",
+        "type": "retail"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "inbound": {
+      "presetName": "Inbound",
+      "message": "Inbound shows the default source icon and type label.",
+      "type": "info"
+    },
+    "referral": {
+      "presetName": "Referral",
+      "message": "Referral can use user data to render an avatar and referrer details.",
+      "type": "info"
+    },
+    "user": {
+      "presetName": "User",
+      "message": "User replaces the source type icon with the provided avatar data.",
+      "type": "info"
+    },
+    "no_icon": {
+      "presetName": "No Icon",
+      "message": "No Icon hides the leading source icon while keeping the text stack.",
+      "type": "info"
+    }
+  }
+}

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

@@ -3,7 +3,7 @@
   "propTargets": {},
   "defaults": {
     "layoutOption": "default",
-    "rating": 0,
+    "rating": 4,
     "denominator": 5,
     "colorOption": "yellow",
     "backgroundType": "fill",
@@ -23,8 +23,7 @@
       "props": [
         "rating",
         "denominator",
-        "variant",
-        "onClick"
+        "variant"
       ]
     },
     {
@@ -40,37 +39,13 @@
   ],
   "presets": [
     {
-      "name": "Empty",
+      "name": "Default",
       "props": {
-        "rating": 0,
-        "denominator": 5,
-        "variant": "display"
-      }
-    },
-    {
-      "name": "Half / partial",
-      "props": {
-        "rating": 2.5,
-        "denominator": 5,
-        "variant": "display"
-      }
-    },
-    {
-      "name": "Full score",
-      "props": {
-        "rating": 5,
+        "rating": 4,
         "denominator": 5,
         "variant": "display"
       }
     },
-    {
-      "name": "Out of 10",
-      "props": {
-        "rating": 8,
-        "denominator": 10,
-        "variant": "display"
-      }
-    },
     {
       "name": "Number layout",
       "props": {
@@ -90,39 +65,39 @@
         "variant": "display"
       }
     },
-    {
-      "name": "Primary color",
-      "props": {
-        "rating": 4,
-        "denominator": 5,
-        "colorOption": "primary",
-        "variant": "display"
-      }
-    },
     {
       "name": "Interactive",
       "props": {
         "rating": 0,
         "denominator": 5,
-        "variant": "interactive",
-        "onClick": "(n) => {}"
-      }
-    }
-  ],
-  "conditionals": {
-    "onClick": {
-      "requires": {
         "variant": "interactive"
       }
     }
-  },
+  ],
+  "conditionals": {},
   "hints": {
-    "interactive_click": {
-      "when": {
-        "variant": "interactive"
-      },
-      "message": "Interactive mode calls onClick with the star index; rating is controlled by your handler.",
+    "default": {
+      "presetName": "Default",
+      "message": "Default shows the common five-star display rating.",
+      "type": "info"
+    },
+    "number": {
+      "presetName": "Number layout",
+      "message": "Number layout displays the numeric rating beside the stars.",
+      "type": "info"
+    },
+    "one_star": {
+      "presetName": "One star highlight",
+      "message": "One star highlight uses the compact one-star layout for summary scores.",
+      "type": "info"
+    },
+    "interactive": {
+      "presetName": "Interactive",
+      "message": "Interactive mode is ready for a click handler in product code; the playground keeps it visual.",
       "type": "info"
     }
-  }
+  },
+  "hiddenProps": [
+    "onClick"
+  ]
 }

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

@@ -1,4 +1,14 @@
 {
+  "defaults": {
+    "backgroundType": "fill",
+    "colorOption": "yellow",
+    "denominator": 5,
+    "layoutOption": "default",
+    "rating": 4,
+    "size": "sm",
+    "variant": "display"
+  },
+  "hiddenProps": ["onClick"],
   "groups": [
     {
       "name": "Content",
@@ -6,7 +16,7 @@
     },
     {
       "name": "Rating",
-      "props": ["rating", "denominator", "variant", "onClick"]
+      "props": ["rating", "denominator", "variant"]
     },
     {
       "name": "Appearance",
@@ -21,20 +31,8 @@
   ],
   "presets": [
     {
-      "name": "Empty",
-      "props": { "rating": 0, "denominator": 5, "variant": "display" }
-    },
-    {
-      "name": "Half / partial",
-      "props": { "rating": 2.5, "denominator": 5, "variant": "display" }
-    },
-    {
-      "name": "Full score",
-      "props": { "rating": 5, "denominator": 5, "variant": "display" }
-    },
-    {
-      "name": "Out of 10",
-      "props": { "rating": 8, "denominator": 10, "variant": "display" }
+      "name": "Default",
+      "props": { "rating": 4, "denominator": 5, "variant": "display" }
     },
     {
       "name": "Number layout",
@@ -55,32 +53,35 @@
         "variant": "display"
       }
     },
-    {
-      "name": "Primary color",
-      "props": {
-        "rating": 4,
-        "denominator": 5,
-        "colorOption": "primary",
-        "variant": "display"
-      }
-    },
     {
       "name": "Interactive",
       "props": {
         "rating": 0,
         "denominator": 5,
-        "variant": "interactive",
-        "onClick": "(n) => {}"
+        "variant": "interactive"
       }
     }
   ],
-  "conditionals": {
-    "onClick": { "requires": { "variant": "interactive" } }
-  },
+  "conditionals": {},
   "hints": {
-    "interactive_click": {
-      "when": { "variant": "interactive" },
-      "message": "Interactive mode calls onClick with the star index; rating is controlled by your handler.",
+    "default": {
+      "presetName": "Default",
+      "message": "Default shows the common five-star display rating.",
+      "type": "info"
+    },
+    "number": {
+      "presetName": "Number layout",
+      "message": "Number layout displays the numeric rating beside the stars.",
+      "type": "info"
+    },
+    "one_star": {
+      "presetName": "One star highlight",
+      "message": "One star highlight uses the compact one-star layout for summary scores.",
+      "type": "info"
+    },
+    "interactive": {
+      "presetName": "Interactive",
+      "message": "Interactive mode is ready for a click handler in product code; the playground keeps it visual.",
       "type": "info"
     }
   }

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

@@ -53,18 +53,24 @@
   ],
   "conditionals": {},
   "hints": {
-    "value_required": {
-      "when": {
-        "value": null
-      },
-      "message": "Nothing renders until value is set—the component appends \"%\" after the value (do not include \"%\" in the value).",
+    "increase": {
+      "presetName": "Increase",
+      "message": "Increase shows positive change styling with the default upward direction icon.",
+      "type": "info"
+    },
+    "decrease": {
+      "presetName": "Decrease",
+      "message": "Decrease shows negative change styling with the default downward direction icon.",
+      "type": "info"
+    },
+    "neutral": {
+      "presetName": "Neutral",
+      "message": "Neutral keeps the percent value without positive or negative emphasis.",
       "type": "info"
     },
     "custom_icon": {
-      "when": {
-        "icon": true
-      },
-      "message": "Increase and decrease use arrow icons by default; set icon to override the arrow.",
+      "presetName": "Custom icon",
+      "message": "Custom icon replaces the default arrow with an explicit icon name.",
       "type": "info"
     }
   }

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

@@ -15,14 +15,24 @@
   ],
   "conditionals": {},
   "hints": {
-    "value_required": {
-      "when": { "value": null },
-      "message": "Nothing renders until value is set—the component appends \"%\" after the value (do not include \"%\" in the value).",
+    "increase": {
+      "presetName": "Increase",
+      "message": "Increase shows positive change styling with the default upward direction icon.",
+      "type": "info"
+    },
+    "decrease": {
+      "presetName": "Decrease",
+      "message": "Decrease shows negative change styling with the default downward direction icon.",
+      "type": "info"
+    },
+    "neutral": {
+      "presetName": "Neutral",
+      "message": "Neutral keeps the percent value without positive or negative emphasis.",
       "type": "info"
     },
     "custom_icon": {
-      "when": { "icon": true },
-      "message": "Increase and decrease use arrow icons by default; set icon to override the arrow.",
+      "presetName": "Custom icon",
+      "message": "Custom icon replaces the default arrow with an explicit icon name.",
       "type": "info"
     }
   }

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

@@ -1,10 +1,7 @@
 {
   "template": "<StatValue{{props}} />",
   "propTargets": {},
-  "defaults": {
-    "value": 1428,
-    "unit": "hrs"
-  },
+  "defaults": {},
   "groups": [
     {
       "name": "Content",
@@ -45,11 +42,24 @@
   ],
   "conditionals": {},
   "hints": {
-    "unit_hint": {
-      "when": {
-        "unit": true
-      },
-      "message": "When a unit is set, it renders smaller than the value, with a space between.",
+    "default": {
+      "presetName": "Default",
+      "message": "Default pairs a numeric value with a compact unit label.",
+      "type": "info"
+    },
+    "value_only": {
+      "presetName": "Value only",
+      "message": "Value only renders the stat without the smaller unit text.",
+      "type": "info"
+    },
+    "formatted_string": {
+      "presetName": "Formatted string",
+      "message": "Formatted string accepts preformatted values when commas or labels are already prepared.",
+      "type": "info"
+    },
+    "zero_state": {
+      "presetName": "Zero state",
+      "message": "Zero state keeps the unit visible while showing an empty or reset metric.",
       "type": "info"
     }
   }