playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -0,0 +1,191 @@
+{
+  "structureModes": {
+    "default": "default",
+    "modes": {
+      "default": {
+        "label": "List",
+        "template": "<List{{props}}>\n  {{children}}\n</List>",
+        "children": "<ListItem>Item 1</ListItem>\n<ListItem>Item 2</ListItem>\n<ListItem>Item 3</ListItem>"
+      },
+      "draggable": {
+        "label": "Draggable List",
+        "template": "<DraggableProvider\n    initialItems={initialItems}\n    onReorder={setItems}\n>\n  <List{{props}}>\n    {items.map(({ id, text }) => (\n      <ListItem\n          dragId={id}\n          key={id}\n      >\n        {text}\n      </ListItem>\n    ))}\n  </List>\n</DraggableProvider>",
+        "children": "",
+        "props": {
+          "enableDrag": true
+        },
+        "wrapper": "const initialItems = [\n  { id: 'list-item-1', text: 'Confirm scope' },\n  { id: 'list-item-2', text: 'Design states' },\n  { id: 'list-item-3', text: 'Ship playground' },\n]\n\nconst ListPlaygroundExample = () => {\n  const [items, setItems] = useState(initialItems)\n\n  return {{component}}\n}\n\n<ListPlaygroundExample />"
+      }
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<ListItem>Item 1</ListItem>\n<ListItem>Item 2</ListItem>\n<ListItem>Item 3</ListItem>",
+    "hideWhenPropSet": []
+  },
+  "hiddenProps": [
+    "text",
+    "variant"
+  ],
+  "customProps": {
+    "size": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "large"
+      ]
+    }
+  },
+  "defaults": {
+    "borderless": false,
+    "enableDrag": false,
+    "layout": "",
+    "ordered": false,
+    "size": "",
+    "xpadding": false
+  },
+  "groups": [
+    {
+      "name": "Layout",
+      "props": [
+        "layout",
+        "size",
+        "ordered"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "borderless",
+        "xpadding",
+        "dark"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "enableDrag"
+      ]
+    },
+    {
+      "name": "Accessibility",
+      "props": [
+        "role",
+        "tabIndex"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "structureMode": "default",
+      "props": {},
+      "children": "<ListItem>Item 1</ListItem>\n<ListItem>Item 2</ListItem>\n<ListItem>Item 3</ListItem>"
+    },
+    {
+      "name": "Ordered",
+      "structureMode": "default",
+      "props": {
+        "ordered": true
+      },
+      "children": "<ListItem>Step 1</ListItem>\n<ListItem>Step 2</ListItem>\n<ListItem>Step 3</ListItem>"
+    },
+    {
+      "name": "Borderless",
+      "structureMode": "default",
+      "props": {
+        "borderless": true
+      },
+      "children": "<ListItem>Discovery</ListItem>\n<ListItem>Design</ListItem>\n<ListItem>Build</ListItem>"
+    },
+    {
+      "name": "Large",
+      "structureMode": "default",
+      "props": {
+        "size": "large"
+      },
+      "children": "<ListItem>Large item 1</ListItem>\n<ListItem>Large item 2</ListItem>\n<ListItem>Large item 3</ListItem>"
+    },
+    {
+      "name": "Extra Padding",
+      "structureMode": "default",
+      "props": {
+        "xpadding": true
+      },
+      "children": "<ListItem>Spaced item 1</ListItem>\n<ListItem>Spaced item 2</ListItem>\n<ListItem>Spaced item 3</ListItem>"
+    },
+    {
+      "name": "Layout Left",
+      "structureMode": "default",
+      "props": {
+        "layout": "left"
+      },
+      "children": "<ListItem><Title size={4} text=\"Label\" /><Currency amount=\"2,000.50\" label=\"Caption\" size=\"sm\" /></ListItem>\n<ListItem><Title size={4} text=\"Label\" /><Currency amount=\"1,425.00\" label=\"Caption\" size=\"sm\" /></ListItem>"
+    },
+    {
+      "name": "Layout Right",
+      "structureMode": "default",
+      "props": {
+        "layout": "right"
+      },
+      "children": "<ListItem><Title size={4} text=\"Label\" /><Currency amount=\"2,000.50\" label=\"Caption\" size=\"sm\" /></ListItem>\n<ListItem><Title size={4} text=\"Label\" /><Currency amount=\"1,425.00\" label=\"Caption\" size=\"sm\" /></ListItem>"
+    },
+    {
+      "name": "Draggable",
+      "structureMode": "draggable",
+      "props": {
+        "enableDrag": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "propSyncOnEnable": {
+    "enableDrag": {
+      "structureMode": "draggable"
+    }
+  },
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "List is composed with ListItem children; edit children to change the rows.",
+      "type": "info"
+    },
+    "ordered": {
+      "presetName": "Ordered",
+      "message": "Ordered switches the underlying list from ul to ol while keeping ListItem children.",
+      "type": "info"
+    },
+    "borderless": {
+      "presetName": "Borderless",
+      "message": "Borderless removes the item dividers for a quieter list treatment.",
+      "type": "info"
+    },
+    "large": {
+      "presetName": "Large",
+      "message": "Large applies the list size class so each row has the larger spacing treatment.",
+      "type": "info"
+    },
+    "extra_padding": {
+      "presetName": "Extra Padding",
+      "message": "Extra Padding adds horizontal item padding through the xpadding prop.",
+      "type": "info"
+    },
+    "layout_left": {
+      "presetName": "Layout Left",
+      "message": "Layout Left aligns composed item content using the list layout_left treatment.",
+      "type": "info"
+    },
+    "layout_right": {
+      "presetName": "Layout Right",
+      "message": "Layout Right mirrors the composed item layout for right-aligned supporting content.",
+      "type": "info"
+    },
+    "draggable": {
+      "presetName": "Draggable",
+      "message": "Draggable wraps List in DraggableProvider and gives each ListItem a dragId.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -11,6 +11,7 @@ type LoadingInlineProps = {
   align?: "left" | "center" | "right",
   aria?: { [key: string]: string },
   className?: string,
+  color?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
   data?: { [key: string]: string },
   dark?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -24,6 +25,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     align = 'left',
     aria = {},
     className,
+    color = 'light',
     data = {},
     dark = false,
     htmlOptions = {},
@@ -50,7 +52,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
         id={id}
     >
       <Body
-          color="light"
+          color={color}
           dark={dark}
       >
         <Icon

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_color.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("loading_inline", props: { text: " Light" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "default", text: " Default" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "lighter", text: " Lighter" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "link", text: " Link" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "error", text: " Error" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "success", text: " Success" }) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_color.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import LoadingInline from '../_loading_inline'
+
+const LoadingInlineColor = (props) => (
+    <div>
+        <LoadingInline 
+            text=" Light" 
+            {...props} 
+        />
+        
+            <br/>
+
+        <LoadingInline 
+            color="default"
+            text=" Default" 
+            {...props} 
+        />
+
+
+
+        <br/>
+
+        <LoadingInline 
+            color="lighter"
+            text=" Lighter" 
+            {...props} 
+        />
+
+        <br/>
+
+        <LoadingInline 
+            color="link"
+            text=" Link" 
+            {...props} 
+        />
+
+        <br/>
+
+        <LoadingInline 
+            color="error"
+            text=" Error" 
+            {...props} 
+        />
+
+        <br/>
+
+        <LoadingInline 
+            color="success"
+            text=" Success" 
+            {...props} 
+        />
+    </div>
+)
+
+export default LoadingInlineColor

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_color.md

@@ -0,0 +1 @@
+The Loading Inline kit will use `light` color by default. Other available colors are: `default` `lighter` `success` `error` `link`.

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

@@ -3,6 +3,7 @@
   "propTargets": {},
   "defaults": {
     "align": "left",
+    "color": "light",
     "text": "Loading",
     "variant": "dotted"
   },
@@ -62,5 +63,31 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "align_left": {
+      "presetName": "Align left",
+      "message": "Align left uses the default left-aligned inline loading treatment.",
+      "type": "info"
+    },
+    "align_center": {
+      "presetName": "Align center",
+      "message": "Align center centers the spinner and loading text in the available width.",
+      "type": "info"
+    },
+    "align_right": {
+      "presetName": "Align right",
+      "message": "Align right pushes the inline loading indicator to the right edge.",
+      "type": "info"
+    },
+    "solid_spinner": {
+      "presetName": "Solid spinner",
+      "message": "Solid spinner switches the icon from the dotted spinner to the solid circle-notch variant.",
+      "type": "info"
+    },
+    "custom_label": {
+      "presetName": "Custom label",
+      "message": "Custom label changes the text displayed next to the loading icon.",
+      "type": "info"
+    }
+  }
 }

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

@@ -21,5 +21,31 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "align_left": {
+      "presetName": "Align left",
+      "message": "Align left uses the default left-aligned inline loading treatment.",
+      "type": "info"
+    },
+    "align_center": {
+      "presetName": "Align center",
+      "message": "Align center centers the spinner and loading text in the available width.",
+      "type": "info"
+    },
+    "align_right": {
+      "presetName": "Align right",
+      "message": "Align right pushes the inline loading indicator to the right edge.",
+      "type": "info"
+    },
+    "solid_spinner": {
+      "presetName": "Solid spinner",
+      "message": "Solid spinner switches the icon from the dotted spinner to the solid circle-notch variant.",
+      "type": "info"
+    },
+    "custom_label": {
+      "presetName": "Custom label",
+      "message": "Custom label changes the text displayed next to the loading icon.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml

@@ -4,6 +4,7 @@ examples:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
   - loading_inline_variant: Variant
+  - loading_inline_color: Color
 
   
   
@@ -11,3 +12,4 @@ examples:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
   - loading_inline_variant: Variant
+  - loading_inline_color: Color

data/app/pb_kits/playbook/pb_loading_inline/docs/index.js

@@ -1,3 +1,4 @@
 export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
 export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
 export { default as LoadingInlineVariant } from './_loading_inline_variant.jsx'
+export { default as LoadingInlineColor } from './_loading_inline_color.jsx'

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

@@ -20,6 +20,22 @@
       ],
       "default": "left"
     },
+    "color": {
+      "type": "enum",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "default",
+        "light",
+        "lighter",
+        "link",
+        "error",
+        "success"
+      ],
+      "default": "light"
+    },
     "dark": {
       "type": "boolean",
       "platforms": [
@@ -51,11 +67,11 @@
   "usage": {
     "react": {
       "import": "import { LoadingInline } from 'playbook-ui'",
-      "example": "<LoadingInline align=\"left\" variant=\"dotted\"></LoadingInline>"
+      "example": "<LoadingInline align=\"left\" color=\"default\"></LoadingInline>"
     },
     "rails": {
       "import": null,
-      "example": "<%= pb_rails(\"loading_inline\", props: { align: \"left\", variant: \"dotted\" }) %>"
+      "example": "<%= pb_rails(\"loading_inline\", props: { align: \"left\", color: \"default\" }) %>"
     }
   }
 }

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
 
-  <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
+  <%= pb_rails("body", props: { color: object.color, dark: object.dark }) do %>
     <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: object.spinner_icon, pulse: true }) %> <%= object.text %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -6,6 +6,9 @@ module Playbook
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[default light lighter link error success],
+                   default: "light"
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :text, type: Playbook::Props::String, default: "Loading"
       prop :variant, type: Playbook::Props::Enum,

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

@@ -1,13 +1,31 @@
 {
   "template": "<Map{{props}} />",
   "propTargets": {},
-  "defaults": {},
+  "defaults": {
+    "zoomBtns": true,
+    "flyTo": false,
+    "zoomInClick": "() => handleZoomIn(mapInstance)",
+    "zoomOutClick": "() => handleZoomOut(mapInstance)",
+    "flyToClick": "() => handleFlyTo(mapInstance)",
+    "htmlOptions": {
+      "style": {
+        "height": "320px",
+        "position": "relative",
+        "width": "100%"
+      }
+    }
+  },
   "groups": [
     {
-      "name": "Props",
+      "name": "Controls",
       "props": [
         "zoomBtns",
-        "flyTo",
+        "flyTo"
+      ]
+    },
+    {
+      "name": "Callbacks",
+      "props": [
         "zoomInClick",
         "zoomOutClick",
         "flyToClick"
@@ -16,10 +34,149 @@
   ],
   "presets": [
     {
-      "name": "Default",
-      "props": {}
+      "name": "Zoom Controls",
+      "structureMode": "maplibre",
+      "props": {
+        "zoomBtns": true,
+        "zoomInClick": "() => handleZoomIn(mapInstance)",
+        "zoomOutClick": "() => handleZoomOut(mapInstance)"
+      }
+    },
+    {
+      "name": "Zoom and Fly To",
+      "structureMode": "maplibre",
+      "props": {
+        "zoomBtns": true,
+        "flyTo": true,
+        "zoomInClick": "() => handleZoomIn(mapInstance)",
+        "zoomOutClick": "() => handleZoomOut(mapInstance)",
+        "flyToClick": "() => handleFlyTo(mapInstance)"
+      }
+    },
+    {
+      "name": "No Controls",
+      "structureMode": "maplibre",
+      "props": {
+        "zoomBtns": false,
+        "flyTo": false
+      }
+    },
+    {
+      "name": "Custom Buttons",
+      "structureMode": "custom_controls",
+      "props": {
+        "zoomBtns": true,
+        "flyTo": true,
+        "zoomInClick": "() => handleZoomIn(mapInstance)",
+        "zoomOutClick": "() => handleZoomOut(mapInstance)",
+        "flyToClick": "() => handleFlyTo(mapInstance)"
+      }
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "flyTo": {
+      "requires": "zoomBtns"
+    },
+    "zoomInClick": {
+      "requires": "zoomBtns"
+    },
+    "zoomOutClick": {
+      "requires": "zoomBtns"
+    },
+    "flyToClick": {
+      "requires": {
+        "flyTo": true
+      }
+    }
+  },
+  "hints": {
+    "maplibre_setup": {
+      "when": {},
+      "message": "Map uses MapLibre: import maplibregl from 'maplibre-gl', include the MapLibre CSS, use mapTheme, and give .pb_map a relative container with explicit height and width.",
+      "type": "info"
+    },
+    "zoom_controls": {
+      "presetName": "Zoom Controls",
+      "message": "zoomBtns renders Playbook Map.Controls and the callbacks call MapLibre zoomIn and zoomOut on the loaded map instance.",
+      "type": "info"
+    },
+    "zoom_and_fly_to": {
+      "presetName": "Zoom and Fly To",
+      "message": "flyTo adds the extra control button; flyToClick calls map.flyTo with the default marker position and mapTheme.flyToConfig.",
+      "type": "info"
+    },
+    "no_controls": {
+      "presetName": "No Controls",
+      "message": "With zoomBtns false, Map still wraps the MapLibre container but does not render Playbook map controls.",
+      "type": "info"
+    },
+    "custom_buttons": {
+      "presetName": "Custom Buttons",
+      "message": "Custom Buttons composes Map.Controls and MapCustomButton children; control props move onto Map.Controls in this structure.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "maplibre",
+    "modes": {
+      "maplibre": {
+        "label": "MapLibre",
+        "template": "<Map{{props}}>\n  <div\n      ref={mapContainerRef}\n      style={mapContainerStyle}\n  />\n</Map>",
+        "props": {
+          "htmlOptions": {
+            "style": {
+              "height": "320px",
+              "position": "relative",
+              "width": "100%"
+            }
+          }
+        },
+        "imports": [
+          "mapTheme"
+        ],
+        "externalImports": [
+          "import React, { useEffect, useRef, useState } from 'react'",
+          "import maplibregl from 'maplibre-gl'"
+        ],
+        "wrapper": "const defaultPosition = [-75.379143, 39.831200]\nconst mapContainerStyle = {\n  position: 'absolute',\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n}\n\nconst MapPlaygroundExample = () => {\n  const [mapInstance, setMapInstance] = useState(null)\n  const mapContainerRef = useRef(null)\n\n  const handleZoomIn = (map) => map?.zoomIn({ ...mapTheme.zoomConfig })\n  const handleZoomOut = (map) => map?.zoomOut({ ...mapTheme.zoomConfig })\n  const handleFlyTo = (map) => map?.flyTo({\n    center: defaultPosition,\n    ...mapTheme.flyToConfig,\n  })\n\n  useEffect(() => {\n    if (!mapContainerRef.current) return undefined\n\n    const map = new maplibregl.Map({\n      container: mapContainerRef.current,\n      center: defaultPosition,\n      ...mapTheme.mapConfig,\n    })\n\n    map.on('load', ({ target }) => {\n      new maplibregl.Marker({ color: mapTheme.marker })\n        .setLngLat(defaultPosition)\n        .setPopup(\n          new maplibregl.Popup({ closeButton: false }).setHTML(\n            '<h4 class=\"pb_title_kit pb_title_4\">Hello World!</h4>'\n          )\n        )\n        .addTo(target)\n\n      target.scrollZoom.disable()\n      target.addControl(new maplibregl.AttributionControl({ compact: true }))\n      setMapInstance(target)\n    })\n\n    return () => map.remove()\n  }, [])\n\n  return {{component}}\n}\n\n<MapPlaygroundExample />"
+      },
+      "custom_controls": {
+        "label": "Custom Controls",
+        "template": "<Map{{props}}>\n  <Map.Controls{{Controls.props}}>\n    <MapCustomButton\n        icon=\"home\"\n        onClick={() => console.log('home clicked')}\n    />\n    <MapCustomButton\n        icon=\"search\"\n        onClick={() => console.log('search clicked')}\n    />\n  </Map.Controls>\n  <div\n      ref={mapContainerRef}\n      style={mapContainerStyle}\n  />\n</Map>",
+        "props": {
+          "htmlOptions": {
+            "style": {
+              "height": "320px",
+              "position": "relative",
+              "width": "100%"
+            }
+          },
+          "zoomBtns": true,
+          "flyTo": true,
+          "zoomInClick": "() => handleZoomIn(mapInstance)",
+          "zoomOutClick": "() => handleZoomOut(mapInstance)",
+          "flyToClick": "() => handleFlyTo(mapInstance)"
+        },
+        "propTargets": {
+          "zoomBtns": "Controls.props",
+          "flyTo": "Controls.props",
+          "zoomInClick": "Controls.props",
+          "zoomOutClick": "Controls.props",
+          "flyToClick": "Controls.props"
+        },
+        "imports": [
+          "mapTheme"
+        ],
+        "externalImports": [
+          "import React, { useEffect, useRef, useState } from 'react'",
+          "import maplibregl from 'maplibre-gl'"
+        ],
+        "wrapper": "const defaultPosition = [-75.379143, 39.831200]\nconst mapContainerStyle = {\n  position: 'absolute',\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n}\n\nconst MapPlaygroundExample = () => {\n  const [mapInstance, setMapInstance] = useState(null)\n  const mapContainerRef = useRef(null)\n\n  const handleZoomIn = (map) => map?.zoomIn({ ...mapTheme.zoomConfig })\n  const handleZoomOut = (map) => map?.zoomOut({ ...mapTheme.zoomConfig })\n  const handleFlyTo = (map) => map?.flyTo({\n    center: defaultPosition,\n    ...mapTheme.flyToConfig,\n  })\n\n  useEffect(() => {\n    if (!mapContainerRef.current) return undefined\n\n    const map = new maplibregl.Map({\n      container: mapContainerRef.current,\n      center: defaultPosition,\n      ...mapTheme.mapConfig,\n    })\n\n    map.on('load', ({ target }) => {\n      new maplibregl.Marker({ color: mapTheme.marker })\n        .setLngLat(defaultPosition)\n        .setPopup(\n          new maplibregl.Popup({ closeButton: false }).setHTML(\n            '<h4 class=\"pb_title_kit pb_title_4\">Hello World!</h4>'\n          )\n        )\n        .addTo(target)\n\n      target.scrollZoom.disable()\n      target.addControl(new maplibregl.AttributionControl({ compact: true }))\n      setMapInstance(target)\n    })\n\n    return () => map.remove()\n  }, [])\n\n  return {{component}}\n}\n\n<MapPlaygroundExample />"
+      }
+    }
+  },
+  "children": {
+    "editable": false,
+    "default": ""
+  }
 }