playbook_ui_docs 16.10.0 → 16.11.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 81474679fa1e673e010a53e74c370621d241f8e9d9f79e031accd2d5dda84e7e
-  data.tar.gz: 4c977e961d67b8bf78eea7160f643edeaa94c40f8198a941e0753052f4f1c9cc
+  metadata.gz: 848100ab0b18540bc0a206fa0e424c3efb52965935b07a8cfdc3b9cd4ab4e48e
+  data.tar.gz: a95ae1a587b664448fa5398ec07fd945db65afa5fae31f872d92abc6601061eb
 SHA512:
-  metadata.gz: 77bc037bdc66f1df564020b0e2ec2904ca13e3cbd0c4568fa2777e09fe3e6c2c7ff3422ab4e0a2057da03599083b584e39598e4f60a6793d9473b0506048d9e2
-  data.tar.gz: 3a92c8be8e162d0d8ef9cb50853ed111022cb573b6b52a2561d6fa488addabcff087e548029314f55b649b6437be7339612f19ac7e54e48d19abba231ef0d9d1
+  metadata.gz: 7a6fcb1466507aba549248990daff3689a9b5ea236f394edf35f781d5377eafc67265fe4ea997f4dc3f0247fdee937e61ecc95b9e98dacffc84e6d79bb33a30a
+  data.tar.gz: e0d301f3d3bfd3adf02ce5e72b004f1eb13e26ba7971dd74337abe535fe226df6587d76ace3c946bf34e0889d4f84ccb0b1d2c5da8fc09a96ad7b80b437f520e

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.html.erb

@@ -0,0 +1,93 @@
+<%
+  options = [
+    {
+      label: "Jasper Furniss",
+      value: "jasperFurniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "ramonRuiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Unavailable",
+      disabled: true
+    },
+    {
+      label: "Carlos Lima",
+      value: "carlosLima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "courtneyLong",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ]
+%>
+
+<%
+  custom_display = capture do
+    pb_rails("flex", props: { align: "center" }) do
+      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
+      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
+      concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
+    end
+  end
+%>
+
+<%= pb_rails("dropdown", props: { id: "user-dropdown-disabled-options", options: options }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger", props: { placeholder: "Select a User", custom_display: custom_display }) %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% options.each do |option| %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+          <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("user", props: { name: option[:label], align: "left", avatar: true, orientation: "horizontal", territory: option[:territory], title: option[:title] }) %>
+          <% end %>
+          <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("badge", props: { rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<script>
+  document.addEventListener("pb:dropdown:selected", (e) => {
+    if (e.target.id !== "user-dropdown-disabled-options") return;
+
+    const option = e.detail;
+    const dropdown = e.target;
+    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
+    if (!display) return;
+
+    const nameEl = display.querySelector("#dropdown-avatar-name");
+    if (nameEl) nameEl.textContent = option.label;
+
+    const avatarWrapper = display.querySelector("#dropdown-avatar .avatar_wrapper");
+    if (avatarWrapper) {
+      const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
+      avatarWrapper.dataset.name = option.label;
+      avatarWrapper.setAttribute("data-initials", initials);
+    }
+
+    const badgeEl = display.querySelector("#dropdown-avatar-status");
+    const variant = option.status === "Online" ? "success" : option.status === "Offline" ? "neutral" : "warning";
+    if (badgeEl) {
+      badgeEl.querySelector("span").textContent = option.status;
+      badgeEl.className = `pb_badge_kit_${variant}`;
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.jsx

@@ -0,0 +1,127 @@
+import React, { useState } from 'react'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import User from '../../pb_user/_user'
+import Body from '../../pb_body/_body'
+
+const DropdownCustomDisplayDisabledOption = (props) => {
+  const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "Jasper Furniss",
+      value: "jasperFurniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "ramonRuiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Unavailable",
+      disabled: true
+    },
+    {
+      label: "Carlos Lima",
+      value: "carlosLima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "courtneyLong",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ];
+
+  const CustomDisplay = () => {
+    return (
+      <>
+      {
+        selectedOption && (
+          <Flex align="center">
+            <Avatar
+                name={selectedOption.label}
+                size="xs"
+            />
+            <Body 
+                marginX="xs"
+                text={selectedOption.label} 
+            />
+            <Badge 
+                text={selectedOption.status} 
+                variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
+            />
+          </Flex>
+        )
+      }
+    </>
+    )
+  };
+
+
+  return (
+  <div>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger customDisplay={<CustomDisplay/>}
+          placeholder="Select a User"
+      />
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          >
+            <Flex
+                align="center"
+                justify="between"
+            >
+              <FlexItem>
+                <User
+                    align="left"
+                    avatar
+                    name={option.label}
+                    orientation="horizontal"
+                    territory={option.territory}
+                    title={option.title}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Badge dark
+                    rounded
+                    text={option.status}
+                    variant={`${
+                        option.status === "Offline"
+                        ? "neutral"
+                    : option.status === "Unavailable"
+                    ? "warning"
+                        : option.status === "Online"
+                        ? "success"
+                        : "warning"
+                    }`}
+                />
+              </FlexItem>
+            </Flex>
+          </Dropdown.Option>
+        ))}
+    </Dropdown>
+  </div>
+  )
+}
+
+export default DropdownCustomDisplayDisabledOption

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.md

@@ -0,0 +1 @@
+To disable individual items in the `options`, include `disabled: true` within the object on the option that you want disabled. See the code snippet below for an example of how to do this.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {id: "dropdown-disabled", disabled: true,label: "Default Dropdown", options: options}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import Dropdown from '../_dropdown'
+
+const DropdownDisabled = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        disabled
+        label="Default Dropdown"
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownDisabled

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.html.erb

@@ -0,0 +1,10 @@
+<%
+  options = [
+    { label: "Available Option", value: "available", id: "available-option" },
+    { label: "Coming Soon", value: "coming-soon", id: "coming-soon", disabled: true },
+    { label: "Another Available", value: "another-available", id: "another-available" },
+    { label: "Locked Feature", value: "locked-feature", id: "locked-feature", disabled: true },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: { label: "Disabled Options", options: options }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Caption from '../../pb_caption/_caption'
+
+const DropdownDisabledOption = (props) => {
+  const [selectedOption, setSelectedOption] = useState()
+
+  const options = [
+    { label: 'Available Option', value: 'available', id: 'available-option' },
+    { label: 'Coming Soon', value: 'coming-soon', id: 'coming-soon', disabled: true },
+    { label: 'Another Available', value: 'another-available', id: 'another-available' },
+    { label: 'Locked Feature', value: 'locked-feature', id: 'locked-feature', disabled: true },
+  ]
+
+  return (
+    <div>
+      <Caption
+          text="Select an option. Disabled options remain visible but cannot be selected."
+      />
+      <Dropdown
+          onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+          options={options}
+          placeholder="Choose an option"
+          {...props}
+      />
+      {selectedOption && (
+        <Caption
+            marginTop="xs"
+            text={`Selected: ${selectedOption.label}`}
+        />
+      )}
+    </div>
+  )
+}
+
+export default DropdownDisabledOption

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.md

@@ -0,0 +1 @@
+To disable individual items in the `options`, include `disabled: true` within the object on the option that you want disabled. See the code snippet below for an example of how to do this.

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

@@ -6,12 +6,14 @@ examples:
   - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
   - dropdown_multi_select_display_rails: Multi Select with Form Pill Props
   - dropdown_subtle_variant: Subtle Variant
+  - dropdown_disabled_option: Disabled Option
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
   - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
   - dropdown_with_custom_display_rails: Custom Display
+  - dropdown_custom_display_disabled_option: Custom Display Disabled Option
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
@@ -33,6 +35,7 @@ examples:
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
   - dropdown_required_indicator: Required Indicator
+  - dropdown_disabled: Disabled Input
   - dropdown_custom_event_type: Custom Event Type
 
   react:
@@ -42,10 +45,12 @@ examples:
   - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
   - dropdown_multi_select_display: Multi Select with Form Pill Props
   - dropdown_subtle_variant: Subtle Variant
+  - dropdown_disabled_option: Disabled Option
   - dropdown_subcomponent_structure: Subcomponent Structure
   - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
+  - dropdown_custom_display_disabled_option: Custom Display Disabled Option
   - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
@@ -71,3 +76,4 @@ examples:
   - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
   - dropdown_required_indicator: Required Indicator
+  - dropdown_disabled: Disabled Input

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

@@ -33,3 +33,6 @@ export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx
 export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
 export { default as DropdownClosingOptions } from './_dropdown_closing_options.jsx'
 export { default as DropdownRequiredIndicator } from "./_dropdown_required_indicator.jsx";
+export { default as DropdownDisabledOption } from "./_dropdown_disabled_option.jsx";
+export { default as DropdownCustomDisplayDisabledOption } from "./_dropdown_custom_display_disabled_option.jsx";
+export { default as DropdownDisabled } from "./_dropdown_disabled.jsx";

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

@@ -1 +1,100 @@
-null
+{
+  "template": "<FormGroup{{props}}>\n{{children}}\n</FormGroup>",
+  "propTargets": {},
+  "defaults": {
+    "fullWidth": false
+  },
+  "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>"
+    }
+  ],
+  "conditionals": {},
+  "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"
+    }
+  },
+  "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/>"
+  }
+}

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_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.