playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -0,0 +1,91 @@
+{
+  "template": "<FormGroup{{props}}>\n{{children}}\n</FormGroup>",
+  "wrapper": "const FormGroupPlayground = () => {\n  const [formFields, setFormFields] = useState({\n    firstName: \"Jane\",\n    middleInitial: \"Q\",\n    lastName: \"Doe\",\n    search: \"\",\n    eventName: \"Planning session\",\n    animal: \"cat\"\n  })\n\n  const handleFieldChange = ({ target }) => {\n    setFormFields({ ...formFields, [target.name]: target.value })\n  }\n\n  const handleAnimalChange = ({ target }) => {\n    setFormFields({ ...formFields, animal: target.value })\n  }\n\n  return {{component}}\n}\n\n<FormGroupPlayground />",
+  "externalImports": ["import React, { useState } from 'react'"],
+  "children": {
+    "editable": true,
+    "default": "<TextInput\n    id=\"first-name\"\n    label=\"First Name\"\n    name=\"firstName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter first name\"\n    value={formFields.firstName}\n/>\n<TextInput\n    id=\"middle-initial\"\n    label=\"Middle Initial\"\n    name=\"middleInitial\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter middle initial\"\n    value={formFields.middleInitial}\n/>\n<TextInput\n    id=\"last-name\"\n    label=\"Last Name\"\n    name=\"lastName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter last name\"\n    value={formFields.lastName}\n/>"
+  },
+  "groups": [
+    {
+      "name": "Layout",
+      "props": ["fullWidth"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Text Inputs",
+      "props": {},
+      "children": "<TextInput\n    id=\"first-name\"\n    label=\"First Name\"\n    name=\"firstName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter first name\"\n    value={formFields.firstName}\n/>\n<TextInput\n    id=\"middle-initial\"\n    label=\"Middle Initial\"\n    name=\"middleInitial\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter middle initial\"\n    value={formFields.middleInitial}\n/>\n<TextInput\n    id=\"last-name\"\n    label=\"Last Name\"\n    name=\"lastName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter last name\"\n    value={formFields.lastName}\n/>"
+    },
+    {
+      "name": "Full Width",
+      "props": {
+        "fullWidth": true
+      },
+      "children": "<TextInput\n    id=\"first-name-full-width\"\n    label=\"First Name\"\n    name=\"firstName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter first name\"\n    value={formFields.firstName}\n/>\n<TextInput\n    id=\"middle-initial-full-width\"\n    label=\"Middle Initial\"\n    name=\"middleInitial\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter middle initial\"\n    value={formFields.middleInitial}\n/>\n<TextInput\n    id=\"last-name-full-width\"\n    label=\"Last Name\"\n    name=\"lastName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter last name\"\n    value={formFields.lastName}\n/>"
+    },
+    {
+      "name": "Search Button",
+      "props": {},
+      "children": "<TextInput\n    id=\"search-with-action\"\n    label=\"Search\"\n    name=\"search\"\n    onChange={handleFieldChange}\n    placeholder=\"Search\"\n    value={formFields.search}\n/>\n<Button\n    onClick={() => alert(\"Button clicked!\")}\n    text=\"Submit\"\n    variant=\"secondary\"\n/>"
+    },
+    {
+      "name": "Select",
+      "props": {},
+      "children": "<TextInput\n    id=\"artist-name\"\n    name=\"artistName\"\n    onChange={handleFieldChange}\n    placeholder=\"Enter Artist Name\"\n    value={formFields.artistName || \"\"}\n/>\n<Select\n    blankSelection=\"Genre\"\n    name=\"genre\"\n    options={[\n      { value: \"Country\" },\n      { value: \"Pop\" },\n      { value: \"Rock\" },\n      { value: \"Hip-Hop/Rap\" }\n    ]}\n/>"
+    },
+    {
+      "name": "Date Picker",
+      "props": {},
+      "children": "<TextInput\n    id=\"event-name\"\n    label=\"Event\"\n    name=\"eventName\"\n    onChange={handleFieldChange}\n    placeholder=\"Event Name\"\n    value={formFields.eventName}\n/>\n<DatePicker\n    label=\"Event Date\"\n    pickerId=\"form-group-event-date\"\n/>"
+    },
+    {
+      "name": "Typeahead Action",
+      "props": {},
+      "children": "<Typeahead\n    id=\"products\"\n    label=\"Products\"\n    options={[\n      { label: \"Windows\", value: \"windows\" },\n      { label: \"Roof\", value: \"roof\" },\n      { label: \"Siding\", value: \"siding\" },\n      { label: \"Doors\", value: \"doors\" }\n    ]}\n/>\n<Button\n    onClick={() => alert(\"Product added!\")}\n    text=\"Add\"\n    variant=\"secondary\"\n/>"
+    },
+    {
+      "name": "Selectable Cards",
+      "props": {},
+      "children": "<SelectableCard\n    checked={formFields.animal === \"cat\"}\n    inputId=\"cat-option\"\n    multi={false}\n    name=\"animal\"\n    onChange={handleAnimalChange}\n    value=\"cat\"\n>\n  Cat\n</SelectableCard>\n<SelectableCard\n    checked={formFields.animal === \"dog\"}\n    inputId=\"dog-option\"\n    multi={false}\n    name=\"animal\"\n    onChange={handleAnimalChange}\n    value=\"dog\"\n>\n  Dog\n</SelectableCard>"
+    }
+  ],
+  "hints": {
+    "text_inputs": {
+      "presetName": "Text Inputs",
+      "message": "Text Inputs uses state-backed child inputs so the playground fields stay editable.",
+      "type": "info"
+    },
+    "full_width": {
+      "presetName": "Full Width",
+      "message": "Full Width applies fullWidth to the FormGroup while leaving each child input editable.",
+      "type": "info"
+    },
+    "search_button": {
+      "presetName": "Search Button",
+      "message": "Search Button pairs a controlled text field with an action button in the same group.",
+      "type": "info"
+    },
+    "select": {
+      "presetName": "Select",
+      "message": "Select shows mixed children inside the group, with the options array kept directly in editable children.",
+      "type": "info"
+    },
+    "date_picker": {
+      "presetName": "Date Picker",
+      "message": "Date Picker combines a text input with a picker child, including the pickerId required by the kit.",
+      "type": "info"
+    },
+    "typeahead_action": {
+      "presetName": "Typeahead Action",
+      "message": "Typeahead Action mirrors the docs pattern of a searchable Typeahead plus an adjacent button.",
+      "type": "info"
+    },
+    "selectable_cards": {
+      "presetName": "Selectable Cards",
+      "message": "Selectable Cards keeps both card options in children so each option can be edited together.",
+      "type": "info"
+    }
+  }
+}

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

@@ -4,33 +4,174 @@
   "defaults": {
     "textTransform": "none",
     "color": "primary",
-    "wrapped": false
+    "wrapped": false,
+    "text": "This is a tag",
+    "tabIndex": 0,
+    "onClick": "() => alert('Click!')"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
         "text",
         "name",
-        "onClick",
-        "avatar",
-        "avatarUrl",
+        "icon",
+        "avatarUrl"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "color",
         "size",
         "textTransform",
-        "color",
-        "tabIndex",
-        "icon",
-        "wrapped",
-        "closeProps"
+        "wrapped"
+      ]
+    },
+    {
+      "name": "Interaction",
+      "props": [
+        "tabIndex"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Default",
-      "props": {}
+      "name": "Tag",
+      "props": {
+        "text": "this is a tag",
+        "name": "",
+        "icon": ""
+      }
+    },
+    {
+      "name": "Lowercase",
+      "props": {
+        "text": "THIS IS A TAG",
+        "textTransform": "lowercase",
+        "name": "",
+        "icon": ""
+      }
+    },
+    {
+      "name": "Icon and tag",
+      "props": {
+        "text": "icon and tag",
+        "icon": "badge-check",
+        "name": ""
+      }
+    },
+    {
+      "name": "User",
+      "props": {
+        "text": "",
+        "name": "Anna Black",
+        "icon": "",
+        "avatarUrl": ""
+      }
+    },
+    {
+      "name": "User with avatar",
+      "props": {
+        "text": "",
+        "name": "Anna Black",
+        "icon": "",
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg"
+      }
+    },
+    {
+      "name": "Small user",
+      "props": {
+        "text": "",
+        "name": "Anna Black",
+        "icon": "",
+        "avatarUrl": "",
+        "size": "small"
+      }
+    },
+    {
+      "name": "Wrapped tag",
+      "props": {
+        "text": "form pill with a very long tag to show wrapped text",
+        "name": "",
+        "icon": "",
+        "wrapped": true
+      }
+    },
+    {
+      "name": "Wrapped user",
+      "props": {
+        "text": "",
+        "name": "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
+        "icon": "",
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+        "wrapped": true
+      }
+    },
+    {
+      "name": "Success",
+      "props": {
+        "text": "Success",
+        "color": "success",
+        "name": "",
+        "icon": ""
+      }
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "avatarUrl": {
+      "requires": "name"
+    }
+  },
+  "hints": {
+    "close_button": {
+      "when": {},
+      "message": "The close icon calls onClick; wire it in app code to remove the pill from your form.",
+      "type": "info"
+    },
+    "wrapped_text": {
+      "when": {
+        "wrapped": true
+      },
+      "message": "Wrapped pills expand to multiple lines instead of truncating long labels.",
+      "type": "info"
+    },
+    "user_with_avatar": {
+      "when": {
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg"
+      },
+      "message": "The avatar is displayed when the avatarUrl is set. Name is required for avatar display.",
+      "type": "info"
+    },
+    "user_without_avatar": {
+      "when": {
+        "avatarUrl": ""
+      },
+      "message": "The name is displayed when the avatarUrl is not set.",
+      "type": "info"
+    },
+    "lowercase": {
+      "when": {
+        "textTransform": "lowercase"
+      },
+      "message": "The text is displayed in lowercase when the textTransform is set to lowercase.",
+      "type": "info"
+    },
+    "success": {
+      "when": {
+        "color": "success"
+      },
+      "message": "The pill is displayed in success color when the color is set to success. See the color variants section for more information on colors available.",
+      "type": "info"
+    }
+  },
+  "children": {
+    "editable": false,
+    "default": ""
+  },
+  "hiddenProps": [
+    "onClick",
+    "closeProps",
+    "avatar"
+  ]
 }

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

@@ -0,0 +1,147 @@
+{
+  "children": {
+    "editable": false,
+    "default": ""
+  },
+  "defaults": {
+    "text": "This is a tag",
+    "color": "primary",
+    "textTransform": "none",
+    "wrapped": false,
+    "tabIndex": 0,
+    "onClick": "() => alert('Click!')"
+  },
+  "hiddenProps": ["onClick", "closeProps", "avatar"],
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["text", "name", "icon", "avatarUrl"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["color", "size", "textTransform", "wrapped"]
+    },
+    {
+      "name": "Interaction",
+      "props": ["tabIndex"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Tag",
+      "props": {
+        "text": "this is a tag",
+        "name": "",
+        "icon": ""
+      }
+    },
+    {
+      "name": "Lowercase",
+      "props": {
+        "text": "THIS IS A TAG",
+        "textTransform": "lowercase",
+        "name": "",
+        "icon": ""
+      }
+    },
+    {
+      "name": "Icon and tag",
+      "props": {
+        "text": "icon and tag",
+        "icon": "badge-check",
+        "name": ""
+      }
+    },
+    {
+      "name": "User",
+      "props": {
+        "text": "",
+        "name": "Anna Black",
+        "icon": "",
+        "avatarUrl": ""
+      }
+    },
+    {
+      "name": "User with avatar",
+      "props": {
+        "text": "",
+        "name": "Anna Black",
+        "icon": "",
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg"
+      }
+    },
+    {
+      "name": "Small user",
+      "props": {
+        "text": "",
+        "name": "Anna Black",
+        "icon": "",
+        "avatarUrl": "",
+        "size": "small"
+      }
+    },
+    {
+      "name": "Wrapped tag",
+      "props": {
+        "text": "form pill with a very long tag to show wrapped text",
+        "name": "",
+        "icon": "",
+        "wrapped": true
+      }
+    },
+    {
+      "name": "Wrapped user",
+      "props": {
+        "text": "",
+        "name": "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
+        "icon": "",
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+        "wrapped": true
+      }
+    },
+    {
+      "name": "Success",
+      "props": {
+        "text": "Success",
+        "color": "success",
+        "name": "",
+        "icon": ""
+      }
+    }
+  ],
+  "conditionals": {
+    "avatarUrl": { "requires": "name" }
+  },
+  "hints": {
+    "close_button": {
+      "when": {},
+      "message": "The close icon calls onClick; wire it in app code to remove the pill from your form.",
+      "type": "info"
+    },
+    "wrapped_text": {
+      "when": { "wrapped": true },
+      "message": "Wrapped pills expand to multiple lines instead of truncating long labels.",
+      "type": "info"
+    },
+    "user_with_avatar": {
+      "when": { "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg" },
+      "message": "The avatar is displayed when the avatarUrl is set. Name is required for avatar display.",
+      "type": "info"
+    },
+    "user_without_avatar": {
+      "when": { "avatarUrl": "" },
+      "message": "The name is displayed when the avatarUrl is not set.",
+      "type": "info"
+    },
+    "lowercase": {
+      "when": { "textTransform": "lowercase" },
+      "message": "The text is displayed in lowercase when the textTransform is set to lowercase.",
+      "type": "info"
+    },
+    "success": {
+      "when": { "color": "success" },
+      "message": "The pill is displayed in success color when the color is set to success. See the color variants section for more information on colors available.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_full_screen/docs/_description.md

@@ -0,0 +1 @@
+Full Screen creates a focused overlay for workflows that need more room, such as tables, filters, dashboards, or review screens. It can manage its own trigger or be controlled with `useFullScreen` when the trigger needs to live elsewhere in the interface.

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_content_padding.jsx

@@ -0,0 +1,68 @@
+import React from "react";
+import FullScreen from "../../pb_full_screen/_full_screen";
+import useFullScreen from "../../pb_full_screen/useFullScreen";
+import AdvancedTable from "../../pb_advanced_table/_advanced_table";
+import Button from "../../pb_button/_button";
+import MOCK_DATA from "../../pb_advanced_table/docs/advanced_table_mock_data.json";
+
+const columnDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+  },
+  {
+    accessor: "completedClasses",
+    label: "Completed Classes",
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Class Completion Rate",
+  },
+  {
+    accessor: "graduatedStudents",
+    label: "Graduated Students",
+  },
+];
+
+const FullScreenContentPadding = (props) => {
+  const [isFullscreen, setIsFullscreen] = useFullScreen(false);
+
+  return (
+    <>
+      <Button
+          marginBottom="md"
+          onClick={() => setIsFullscreen(true)}
+          text="Enter Fullscreen"
+          {...props}
+      />
+      <FullScreen
+          contentPadding="md"
+          headerText="Fullscreen Table"
+          isFullscreen={isFullscreen}
+          onClose={() => setIsFullscreen(false)}
+          {...props}
+      >
+        <AdvancedTable
+            columnDefinitions={columnDefinitions}
+            tableData={MOCK_DATA}
+            {...props}
+        />
+      </FullScreen>
+    </>
+  );
+};
+
+export default FullScreenContentPadding;

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_content_padding.md

@@ -0,0 +1 @@
+Use `contentPadding` to tune the spacing around fullscreen content. The default is `lg` for comfortable breathing room; choose a smaller value like `md` when the content is dense or already has its own container spacing.

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_custom_trigger.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+import FullScreen from "../../pb_full_screen/_full_screen";
+import useFullScreen from "../../pb_full_screen/useFullScreen";
+import AdvancedTable from "../../pb_advanced_table/_advanced_table";
+import Flex from "../../pb_flex/_flex";
+import MOCK_DATA from "../../pb_advanced_table/docs/advanced_table_mock_data.json";
+import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button";
+
+const columnDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+  },
+  {
+    accessor: "completedClasses",
+    label: "Completed Classes",
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Class Completion Rate",
+  },
+  {
+    accessor: "graduatedStudents",
+    label: "Graduated Students",
+  },
+];
+
+const FullScreenCustomTrigger = (props) => {
+  const [isFullscreen, setIsFullscreen] = useFullScreen(false);
+
+  return (
+    <>
+      <Flex justify="end">
+        <CircleIconButton
+            icon="expand"
+            marginBottom="md"
+            onClick={() => setIsFullscreen(true)}
+            {...props}
+        />
+      </Flex>
+
+      <FullScreen
+          headerText="Fullscreen Table"
+          isFullscreen={isFullscreen}
+          onClose={() => setIsFullscreen(false)}
+          {...props}
+      >
+        <AdvancedTable
+            columnDefinitions={columnDefinitions}
+            tableData={MOCK_DATA}
+            {...props}
+        />
+      </FullScreen>
+    </>
+  );
+};
+
+export default FullScreenCustomTrigger;

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_custom_trigger.md

@@ -0,0 +1 @@
+Use `useFullScreen` when the trigger belongs somewhere else on the page, such as a toolbar or table action area. Pass the hook state to `isFullscreen`, open the overlay from your external control, and reset the state with `onClose`.

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("full_screen") do %>
+  Full Screen content
+<% end %>

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_default.jsx

@@ -0,0 +1,63 @@
+import React from "react";
+import FullScreen from "../../pb_full_screen/_full_screen";
+import AdvancedTable from "../../pb_advanced_table/_advanced_table";
+import Button from "../../pb_button/_button";
+import MOCK_DATA from "../../pb_advanced_table/docs/advanced_table_mock_data.json";
+
+const columnDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+  },
+  {
+    accessor: "completedClasses",
+    label: "Completed Classes",
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Class Completion Rate",
+  },
+  {
+    accessor: "graduatedStudents",
+    label: "Graduated Students",
+  },
+];
+
+const FullScreenDefault = (props) => {
+
+  return (
+    <FullScreen
+        headerText="Fullscreen Table"
+        trigger={({ onClick, isOpen }) => (
+          <Button
+              marginBottom="md"
+              onClick={onClick}
+              text={isOpen ? "Exit Fullscreen" : "Enter Fullscreen"}
+              {...props}
+          />
+        )}
+        {...props}
+    >
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </FullScreen>
+  );
+};
+
+export default FullScreenDefault;

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_default.md

@@ -0,0 +1 @@
+Use the `trigger` prop for the simplest setup. The trigger render function receives the fullscreen state and toggle handler, so the control can open and close the overlay without managing separate state.