playbook_ui_docs 16.10.0.pre.alpha.play300617391 → 16.10.0.pre.alpha.play300617418

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 422fd3ebab1ca1a6218d842bf284e76342f62aa356c2958a1f7fbafd444d66d3
-  data.tar.gz: 8da3dc12f16f0b500b27cf742f5f05e75a63e87cefca2318c5f5d882cc47b76d
+  metadata.gz: cd9327137e3a460566ac95c9c8fb15519229318be75a637ddc464da296e1f020
+  data.tar.gz: a614b3d551ff564f845629082acf5ac142c174a2d87c636ba8537f3b71d02a59
 SHA512:
-  metadata.gz: d76b1de0f12903b67ca32b4f6f1be4ec41a65bc0d43192da7707c8c8ccae260b9aa437bda21992956d1db4be366c2b3b7fb085bf3f185270828ff2f68a9aad4f
-  data.tar.gz: 4859f00648e1fbde12243e3e9cfb03973850fe9e58dc90e328072a64d535cc1d85f917e67bd7834e11098c979649a8144ce029f39c30309037f16cf469daab2e
+  metadata.gz: 1320fb295a94de7714b2312b8346977aac67d4677741b8eb2df0512f69035c200173926b551a5c081133fc51b49520ed2e6d0370b2924409fe7445055b68b24e
+  data.tar.gz: 866ca27108d13b19e28974fa9a0e0df22dee222b345a8b1567017ec867e895b33b2fd4312e2b828d333912868b8f7af9c4fd95ecb7503cfe34f1a13eff859119

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

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_header_text_styling.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 FullScreenHeaderTextStyling = (props) => {
+  const [isFullscreen, setIsFullscreen] = useFullScreen(false);
+
+  return (
+    <>
+      <Button
+          marginBottom="md"
+          onClick={() => setIsFullscreen(true)}
+          text="Enter Fullscreen"
+          {...props}
+      />
+      <FullScreen
+          headerText="Fullscreen Table"
+          headerTextStyling="body"
+          isFullscreen={isFullscreen}
+          onClose={() => setIsFullscreen(false)}
+          {...props}
+      >
+        <AdvancedTable
+            columnDefinitions={columnDefinitions}
+            tableData={MOCK_DATA}
+            {...props}
+        />
+      </FullScreen>
+    </>
+  );
+};
+
+export default FullScreenHeaderTextStyling;

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

@@ -0,0 +1 @@
+Use `headerTextStyling` to match the header text to the weight of the fullscreen experience. The default `title_4` treatment works well for primary workflows, while `body` creates a quieter header for utility views.

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_sticky_header.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 FullScreenStickyHeader = (props) => {
+  const [isFullscreen, setIsFullscreen] = useFullScreen(false);
+
+  return (
+    <>
+      <Button
+          marginBottom="md"
+          onClick={() => setIsFullscreen(true)}
+          text="Enter Fullscreen"
+          {...props}
+      />
+      <FullScreen
+          headerText="Fullscreen Table"
+          isFullscreen={isFullscreen}
+          onClose={() => setIsFullscreen(false)}
+          stickyHeader={false}
+          {...props}
+      >
+        <AdvancedTable
+            columnDefinitions={columnDefinitions}
+            tableData={MOCK_DATA}
+            {...props}
+        />
+      </FullScreen>
+    </>
+  );
+};
+
+export default FullScreenStickyHeader;

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

@@ -0,0 +1 @@
+The fullscreen header stays sticky by default, keeping the title and close action visible while content scrolls. Set `stickyHeader` to `false` when the header should move with the rest of the fullscreen content.

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

@@ -0,0 +1,149 @@
+import React, { useState } 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 Filter from "../../pb_filter/_filter";
+import TextInput from "../../pb_text_input/_text_input";
+import Dropdown from "../../pb_dropdown/_dropdown";
+import Flex from "../../pb_flex/_flex";
+import SectionSeparator from "../../pb_section_separator/_section_separator";
+import Card from "../../pb_card/_card";
+import MOCK_DATA from "../../pb_advanced_table/docs/advanced_table_mock_data.json";
+
+const dropdownOptions = [
+  {
+    label: "United States",
+    value: "unitedStates",
+    id: "us"
+  },
+  {
+    label: "Canada",
+    value: "canada",
+    id: "ca"
+  },
+  {
+    label: "Pakistan",
+    value: "pakistan",
+    id: "pk"
+  }
+];  
+
+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 FullScreenTableAndFilter = (props) => {
+  const [isFullscreen, setIsFullscreen] = useFullScreen(false);
+  const [territory, setTerritory] = useState("");
+
+  return (
+    <>
+      <Button
+          marginBottom="md"
+          onClick={() => setIsFullscreen(true)}
+          text="Enter Fullscreen"
+          {...props}
+      />
+      <FullScreen
+          headerText="Fullscreen Table"
+          isFullscreen={isFullscreen}
+          onClose={() => setIsFullscreen(false)}
+          {...props}
+      >
+        <Card padding="none">
+          <Flex
+              align="stretch"
+              flexDirection="column"
+              gap="none"
+          >
+            <Filter
+                background={false}
+                double
+                maxHeight="50vh"
+                minWidth="xs"
+                popoverProps={{ width: "350px", appendTo: ".fullscreen-overlay" }}
+                results={50}
+                sortOptions={{
+                  territory_id: "Territory ID",
+                  first_name: "Name",
+                  started_on: "Start Date",
+                  department_name: "Department",
+                  title_name: "Title",
+                  branch_branch_name: "Branch",
+                }}
+                sortValue={[{ name: "started_on", dir: "asc" }]}
+            >
+              {({ closePopover }) => (
+                <>
+                  <TextInput
+                      label="Territory ID"
+                      onChange={(event) => setTerritory(event.target.value)}
+                      value={territory}
+                  />
+                  <Dropdown
+                      label="Territory"
+                      marginBottom="sm"
+                      options={dropdownOptions}
+                  />
+                  <Flex spacing="between">
+                    <Button
+                        onClick={() => {
+                          alert(
+                            "No filtering functionality - just a pattern demo!",
+                          );
+                          closePopover();
+                        }}
+                        text="Filter"
+                    />
+                    <Button
+                        text="Defaults"
+                        variant="secondary"
+                    />
+                  </Flex>
+                </>
+              )}
+            </Filter>
+            <SectionSeparator />
+            <AdvancedTable
+                columnDefinitions={columnDefinitions}
+                tableData={MOCK_DATA}
+                tableProps={{ container: false }}
+                {...props}
+            />
+          </Flex>
+        </Card>
+      </FullScreen>
+    </>
+  );
+};
+
+export default FullScreenTableAndFilter;

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

@@ -0,0 +1 @@
+Full Screen can host composed workflows such as a filter paired with a data table. For popovers inside the overlay, set the popover append target to `.fullscreen-overlay` so menus render within the fullscreen layer.

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

@@ -0,0 +1,155 @@
+{
+  "template": "<FullScreen{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "contentPadding": "lg",
+    "escToExit": true,
+    "headerText": "Enrollment Review",
+    "headerTextStyling": "title_4",
+    "onClose": "() => console.log('Fullscreen closed')",
+    "onOpen": "() => console.log('Fullscreen opened')",
+    "stickyHeader": true
+  },
+  "groups": [
+    {
+      "name": "Header",
+      "props": [
+        "headerText",
+        "headerTextStyling",
+        "stickyHeader"
+      ]
+    },
+    {
+      "name": "Content",
+      "props": [
+        "contentPadding"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "escToExit"
+      ]
+    },
+    {
+      "name": "Callbacks",
+      "props": [
+        "trigger",
+        "onOpen",
+        "onClose"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "contentPadding": "lg",
+        "escToExit": true,
+        "headerText": "Enrollment Review",
+        "headerTextStyling": "title_4",
+        "stickyHeader": true,
+        "trigger": "({ onClick, isOpen }) => (\n  <Button\n    marginBottom=\"md\"\n    onClick={onClick}\n  >\n    {isOpen ? \"Exit Fullscreen\" : \"Enter Fullscreen\"}\n  </Button>\n)"
+      }
+    },
+    {
+      "name": "Hook trigger",
+      "structureMode": "hook_trigger",
+      "props": {
+        "contentPadding": "lg",
+        "escToExit": true,
+        "headerText": "Enrollment Review",
+        "headerTextStyling": "title_4",
+        "stickyHeader": true
+      },
+      "children": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"The hook lets the trigger live anywhere while FullScreen owns the overlay content.\" />\n</Card>"
+    },
+    {
+      "name": "Medium padding",
+      "props": {
+        "contentPadding": "md",
+        "headerText": "Medium Padding",
+        "stickyHeader": true
+      }
+    },
+    {
+      "name": "No padding",
+      "props": {
+        "contentPadding": "none",
+        "headerText": "Edge-to-edge Content",
+        "stickyHeader": true
+      }
+    },
+    {
+      "name": "Non-sticky header",
+      "props": {
+        "contentPadding": "lg",
+        "headerText": "Scrolling Header",
+        "stickyHeader": false
+      }
+    },
+    {
+      "name": "Body header",
+      "props": {
+        "headerText": "A quieter header treatment",
+        "headerTextStyling": "body",
+        "stickyHeader": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "hook_trigger": {
+      "presetName": "Hook trigger",
+      "message": "Use the hook pattern when the trigger needs to live outside the FullScreen wrapper.",
+      "type": "info"
+    },
+    "content_padding": {
+      "when": {
+        "contentPadding": "none"
+      },
+      "message": "Use no padding when the fullscreen content already provides its own spacing or needs an edge-to-edge layout.",
+      "type": "info"
+    },
+    "sticky_header": {
+      "when": {
+        "stickyHeader": false
+      },
+      "message": "Turn off stickyHeader when the header should scroll away with the fullscreen content.",
+      "type": "info"
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"Open fullscreen to review a focused workspace with enough content to test header behavior and padding.\" />\n</Card>"
+  },
+  "structureModes": {
+    "default": "trigger_prop",
+    "modes": {
+      "trigger_prop": {
+        "label": "Trigger Prop",
+        "template": "<FullScreen{{props}}>\n  {{children}}\n</FullScreen>",
+        "children": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"Open fullscreen to review a focused workspace with enough content to test header behavior and padding.\" />\n</Card>",
+        "props": {
+          "headerText": "Enrollment Review",
+          "trigger": "({ onClick, isOpen }) => (\n  <Button\n    marginBottom=\"md\"\n    onClick={onClick}\n  >\n    {isOpen ? \"Exit Fullscreen\" : \"Enter Fullscreen\"}\n  </Button>\n)"
+        }
+      },
+      "hook_trigger": {
+        "label": "Hook Trigger",
+        "template": "<FullScreen\n  isFullscreen={isFullscreen}\n  onClose={() => setIsFullscreen(false)}{{props}}\n>\n  {{children}}\n</FullScreen>",
+        "children": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"The hook lets the trigger live anywhere while FullScreen owns the overlay content.\" />\n</Card>",
+        "imports": [
+          "useFullScreen"
+        ],
+        "props": {
+          "headerText": "Enrollment Review"
+        },
+        "wrapper": "const FullScreenPlaygroundExample = () => {\n  const [isFullscreen, setIsFullscreen, toggleFullScreen] = useFullScreen(false)\n\n  return (\n    <>\n      <Flex justify=\"end\">\n        <CircleIconButton\n          icon=\"expand\"\n          marginBottom=\"md\"\n          onClick={toggleFullScreen}\n        />\n      </Flex>\n      {{component}}\n    </>\n  )\n}\n\n<FullScreenPlaygroundExample />"
+      }
+    }
+  },
+  "hiddenProps": [
+    "isFullscreen"
+  ]
+}

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

@@ -0,0 +1,137 @@
+{
+  "children": {
+    "editable": true,
+    "default": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"Open fullscreen to review a focused workspace with enough content to test header behavior and padding.\" />\n</Card>"
+  },
+  "structureModes": {
+    "default": "trigger_prop",
+    "modes": {
+      "trigger_prop": {
+        "label": "Trigger Prop",
+        "template": "<FullScreen{{props}}>\n  {{children}}\n</FullScreen>",
+        "children": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"Open fullscreen to review a focused workspace with enough content to test header behavior and padding.\" />\n</Card>",
+        "props": {
+          "headerText": "Enrollment Review",
+          "trigger": "({ onClick, isOpen }) => (\n  <Button\n    marginBottom=\"md\"\n    onClick={onClick}\n  >\n    {isOpen ? \"Exit Fullscreen\" : \"Enter Fullscreen\"}\n  </Button>\n)"
+        }
+      },
+      "hook_trigger": {
+        "label": "Hook Trigger",
+        "template": "<FullScreen\n  isFullscreen={isFullscreen}\n  onClose={() => setIsFullscreen(false)}{{props}}\n>\n  {{children}}\n</FullScreen>",
+        "children": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"The hook lets the trigger live anywhere while FullScreen owns the overlay content.\" />\n</Card>",
+        "imports": ["useFullScreen"],
+        "props": {
+          "headerText": "Enrollment Review"
+        },
+        "wrapper": "const FullScreenPlaygroundExample = () => {\n  const [isFullscreen, setIsFullscreen, toggleFullScreen] = useFullScreen(false)\n\n  return (\n    <>\n      <Flex justify=\"end\">\n        <CircleIconButton\n          icon=\"expand\"\n          marginBottom=\"md\"\n          onClick={toggleFullScreen}\n        />\n      </Flex>\n      {{component}}\n    </>\n  )\n}\n\n<FullScreenPlaygroundExample />"
+      }
+    }
+  },
+  "defaults": {
+    "contentPadding": "lg",
+    "escToExit": true,
+    "headerText": "Enrollment Review",
+    "headerTextStyling": "title_4",
+    "onClose": "() => console.log('Fullscreen closed')",
+    "onOpen": "() => console.log('Fullscreen opened')",
+    "stickyHeader": true
+  },
+  "groups": [
+    {
+      "name": "Header",
+      "props": ["headerText", "headerTextStyling", "stickyHeader"]
+    },
+    {
+      "name": "Content",
+      "props": ["contentPadding"]
+    },
+    {
+      "name": "Behavior",
+      "props": ["escToExit"]
+    },
+    {
+      "name": "Callbacks",
+      "props": ["trigger", "onOpen", "onClose"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "contentPadding": "lg",
+        "escToExit": true,
+        "headerText": "Enrollment Review",
+        "headerTextStyling": "title_4",
+        "stickyHeader": true,
+        "trigger": "({ onClick, isOpen }) => (\n  <Button\n    marginBottom=\"md\"\n    onClick={onClick}\n  >\n    {isOpen ? \"Exit Fullscreen\" : \"Enter Fullscreen\"}\n  </Button>\n)"
+      }
+    },
+    {
+      "name": "Hook trigger",
+      "structureMode": "hook_trigger",
+      "props": {
+        "contentPadding": "lg",
+        "escToExit": true,
+        "headerText": "Enrollment Review",
+        "headerTextStyling": "title_4",
+        "stickyHeader": true
+      },
+      "children": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"The hook lets the trigger live anywhere while FullScreen owns the overlay content.\" />\n</Card>"
+    },
+    {
+      "name": "Medium padding",
+      "props": {
+        "contentPadding": "md",
+        "headerText": "Medium Padding",
+        "stickyHeader": true
+      }
+    },
+    {
+      "name": "No padding",
+      "props": {
+        "contentPadding": "none",
+        "headerText": "Edge-to-edge Content",
+        "stickyHeader": true
+      }
+    },
+    {
+      "name": "Non-sticky header",
+      "props": {
+        "contentPadding": "lg",
+        "headerText": "Scrolling Header",
+        "stickyHeader": false
+      }
+    },
+    {
+      "name": "Body header",
+      "props": {
+        "headerText": "A quieter header treatment",
+        "headerTextStyling": "body",
+        "stickyHeader": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "hook_trigger": {
+      "presetName": "Hook trigger",
+      "message": "Use the hook pattern when the trigger needs to live outside the FullScreen wrapper.",
+      "type": "info"
+    },
+    "content_padding": {
+      "when": {
+        "contentPadding": "none"
+      },
+      "message": "Use no padding when the fullscreen content already provides its own spacing or needs an edge-to-edge layout.",
+      "type": "info"
+    },
+    "sticky_header": {
+      "when": {
+        "stickyHeader": false
+      },
+      "message": "Turn off stickyHeader when the header should scroll away with the fullscreen content.",
+      "type": "info"
+    }
+  },
+  "hiddenProps": ["isFullscreen"]
+}

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

@@ -0,0 +1,14 @@
+examples:
+  
+  rails:
+  # - full_screen_default: Default
+  
+  
+  react:
+  - full_screen_default: Default
+  - full_screen_custom_trigger: Custom Trigger
+  - full_screen_header_text_styling: Header Text Styling
+  - full_screen_sticky_header: Sticky Header
+  - full_screen_content_padding: Content Padding
+  - full_screen_table_and_filter: Complex Example
+  

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

@@ -0,0 +1,6 @@
+export { default as FullScreenDefault } from './_full_screen_default.jsx'
+export { default as FullScreenCustomTrigger } from './_full_screen_custom_trigger.jsx'
+export { default as FullScreenTableAndFilter } from './_full_screen_table_and_filter.jsx'
+export { default as FullScreenHeaderTextStyling } from './_full_screen_header_text_styling.jsx'
+export { default as FullScreenStickyHeader } from './_full_screen_sticky_header.jsx'
+export { default as FullScreenContentPadding } from './_full_screen_content_padding.jsx'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.10.0.pre.alpha.play300617391
+  version: 16.10.0.pre.alpha.play300617418
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-06-30 00:00:00.000000000 Z
+date: 2026-07-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -946,6 +946,9 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
@@ -954,6 +957,11 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx
@@ -1261,6 +1269,24 @@ files:
 - app/pb_kits/playbook/pb_form_pill/docs/_playground.overrides.json
 - app/pb_kits/playbook/pb_form_pill/docs/example.yml
 - app/pb_kits/playbook/pb_form_pill/docs/index.js
+- app/pb_kits/playbook/pb_full_screen/docs/_description.md
+- app/pb_kits/playbook/pb_full_screen/docs/_full_screen_content_padding.jsx
+- app/pb_kits/playbook/pb_full_screen/docs/_full_screen_content_padding.md
+- app/pb_kits/playbook/pb_full_screen/docs/_full_screen_custom_trigger.jsx
+- app/pb_kits/playbook/pb_full_screen/docs/_full_screen_custom_trigger.md
+- app/pb_kits/playbook/pb_full_screen/docs/_full_screen_default.html.erb
+- app/pb_kits/playbook/pb_full_screen/docs/_full_screen_default.jsx
+- app/pb_kits/playbook/pb_full_screen/docs/_full_screen_default.md
+- app/pb_kits/playbook/pb_full_screen/docs/_full_screen_header_text_styling.jsx
+- app/pb_kits/playbook/pb_full_screen/docs/_full_screen_header_text_styling.md
+- app/pb_kits/playbook/pb_full_screen/docs/_full_screen_sticky_header.jsx
+- app/pb_kits/playbook/pb_full_screen/docs/_full_screen_sticky_header.md
+- app/pb_kits/playbook/pb_full_screen/docs/_full_screen_table_and_filter.jsx
+- app/pb_kits/playbook/pb_full_screen/docs/_full_screen_table_and_filter.md
+- app/pb_kits/playbook/pb_full_screen/docs/_playground.json
+- app/pb_kits/playbook/pb_full_screen/docs/_playground.overrides.json
+- app/pb_kits/playbook/pb_full_screen/docs/example.yml
+- app/pb_kits/playbook/pb_full_screen/docs/index.js
 - app/pb_kits/playbook/pb_hashtag/docs/_description.md
 - app/pb_kits/playbook/pb_hashtag/docs/_footer.md
 - app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.html.erb