playbook_ui_docs 15.3.0.pre.alpha.PLAY2569advancedtablecolumnstylingfontcolor11977 → 15.3.0.pre.alpha.PLAY2577reactpopoverappendToPOC11730

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 15.3.0.pre.alpha.PLAY2569advancedtablecolumnstylingfontcolor11977
+  version: 15.3.0.pre.alpha.PLAY2577reactpopoverappendToPOC11730
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-11-03 00:00:00.000000000 Z
+date: 2025-10-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -2242,10 +2242,6 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md
@@ -2501,9 +2497,6 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.html.erb
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.html.erb

@@ -1,63 +0,0 @@
-<% content = capture do %>
-    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
-        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
-    <% end %>
-<% end %>
-
-<%= pb_rails("table", props: { size: "sm" }) do %>
-  <%= pb_rails("table/table_head") do %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
-          <%= pb_rails("table/table_header", props: { text: ""}) %>
-       <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "11" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text_align: "right", html_options: { onclick: "toggleArrows()" }}) do %>
-            <%= pb_rails("icon", props: {id: "chevron-icon-down", icon: "chevron-down", fixed_width: true, color: "primary" }) %>
-            <%= pb_rails("icon", props: {id: "chevron-icon-up", icon: "chevron-up", fixed_width: true, color: "primary" }) %>
-          <% end %>
-      <% end %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text: ""}) %>
-      <% end %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text: ""}) %>
-      <% end %>
-  <% end %>
-<% end %>
-
-<script>
-    const downArrow = document.getElementById("chevron-icon-down");
-    const upArrow = document.getElementById("chevron-icon-up");
-
-    upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
-
-    function toggleArrows() {
-        if (downArrow) {
-            downArrow.style.display = downArrow.style.display === 'none' ? 'inline-block' : 'none';
-        }
-        if (upArrow) {
-            upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
-        }
-    }
-</script>

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx

@@ -1,89 +0,0 @@
-import React, { useState } from 'react'
-import Table from '../_table'
-import Icon from '../../pb_icon/_icon'
-import Card from '../../pb_card/_card'
-import Body from '../../pb_body/_body'
-
-const TableWithDynamicCollapsible = (props) => {
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleToggleArrows = () => {
-    setIsOpen(!isOpen)
-  }
-
-  const Content = () => {
-    return (
-      <Card
-          borderNone
-          borderRadius="none"
-          padding="md"
-          {...props}
-      >
-        <Body {...props}>Nested content inside a Table Row</Body>
-      </Card>
-    );
-  };
-
-  return (
-    <Table
-        size="sm"
-        {...props}
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{'Column 1'}</Table.Header>
-          <Table.Header>{'Column 2'}</Table.Header>
-          <Table.Header>{'Column 3'}</Table.Header>
-          <Table.Header>{'Column 4'}</Table.Header>
-          <Table.Header>{'Column 5'}</Table.Header>
-          <Table.Header>{''}</Table.Header>
-        </Table.Row>
-
-      </Table.Head>
-      <Table.Body>
-
-        <Table.Row collapsible
-            collapsibleContent={<Content />}
-            {...props}
-        >
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 1'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 2'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 3'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 4'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 5'}</Table.Cell>
-          <Table.Cell
-              htmlOptions={{ onClick: handleToggleArrows }}
-              textAlign="right"
-          >
-            {
-              <Icon
-                  color="primary"
-                  fixedWidth
-                  icon={isOpen ? 'chevron-up' : 'chevron-down'}
-              />}
-          </Table.Cell>
-
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell>{''}</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell>{''}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
-
-export default TableWithDynamicCollapsible

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md

@@ -1,4 +0,0 @@
-The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
-Please be aware that you will need to pass in an `id` to any table rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.
-
-Follow this example to make the icons dynamic following the state of the collapsible.

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md

@@ -1,3 +0,0 @@
-The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.
-
-Follow this example to make the icons dynamic following the state of the collapsible.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.html.erb

@@ -1,64 +0,0 @@
-<%
-  grouped_options = [
-    {
-      label: "Warm Colors",
-      options: [
-        { label: "Red", value: "#FF0000" },
-        { label: "Orange", value: "#FFA500" },
-        { label: "Yellow", value: "#FFFF00" },
-        { label: "Coral", value: "#FF7F50" },
-        { label: "Gold", value: "#FFD700" }
-      ]
-    },
-    {
-      label: "Cool Colors",
-      options: [
-        { label: "Blue", value: "#0000FF" },
-        { label: "Teal", value: "#008080" },
-        { label: "Cyan", value: "#00FFFF" },
-        { label: "Navy", value: "#000080" },
-        { label: "Turquoise", value: "#40E0D0" }
-      ]
-    },
-    {
-      label: "Neutrals",
-      options: [
-        { label: "White", value: "#FFFFFF" },
-        { label: "Black", value: "#000000" },
-        { label: "Gray", value: "#808080" },
-        { label: "Beige", value: "#F5F5DC" },
-        { label: "Silver", value: "#C0C0C0" }
-      ]
-    },
-    {
-      label: "Earth Tones",
-      options: [
-        { label: "Brown", value: "#A52A2A" },
-        { label: "Olive", value: "#808000" },
-        { label: "Forest Green", value: "#228B22" },
-        { label: "Tan", value: "#D2B48C" },
-        { label: "Maroon", value: "#800000" }
-      ]
-    },
-    {
-      label: "Fun Shades",
-      options: [
-        { label: "Pink", value: "#FFC0CB" },
-        { label: "Magenta", value: "#FF00FF" },
-        { label: "Lime", value: "#00FF00" },
-        { label: "Purple", value: "#800080" },
-        { label: "Indigo", value: "#4B0082" }
-      ]
-    }
-  ]
-%>
-<br />
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-custom-options",
-    options: grouped_options,
-    label: "Colors",
-    name: :foo,
-    placeholder: "Select a Color...",
-    is_multi: false
-  })
-%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.jsx

@@ -1,70 +0,0 @@
-import React from 'react'
-
-import Typeahead from '../_typeahead'
-
-const groupedOptions = [
-  {
-    label: "Warm Colors",
-    options: [
-      { label: "Red", value: "#FF0000" },
-        { label: "Orange", value: "#FFA500" },
-        { label: "Yellow", value: "#FFFF00" },
-        { label: "Coral", value: "#FF7F50" },
-        { label: "Gold", value: "#FFD700" }
-      ]
-    },
-    {
-      label: "Cool Colors",
-      options: [
-        { label: "Blue", value: "#0000FF" },
-        { label: "Teal", value: "#008080" },
-        { label: "Cyan", value: "#00FFFF" },
-        { label: "Navy", value: "#000080" },
-        { label: "Turquoise", value: "#40E0D0" }
-      ]
-    },
-    {
-      label: "Neutrals",
-      options: [
-        { label: "White", value: "#FFFFFF" },
-        { label: "Black", value: "#000000" },
-        { label: "Gray", value: "#808080" },
-        { label: "Beige", value: "#F5F5DC" },
-        { label: "Silver", value: "#C0C0C0" }
-      ]
-    },
-    {
-      label: "Earth Tones",
-      options: [
-        { label: "Brown", value: "#A52A2A" },
-        { label: "Olive", value: "#808000" },
-        { label: "Forest Green", value: "#228B22" },
-        { label: "Tan", value: "#D2B48C" },
-        { label: "Maroon", value: "#800000" }
-      ]
-    },
-    {
-      label: "Fun Shades",
-      options: [
-        { label: "Pink", value: "#FFC0CB" },
-        { label: "Magenta", value: "#FF00FF" },
-        { label: "Lime", value: "#00FF00" },
-        { label: "Purple", value: "#800080" },
-        { label: "Indigo", value: "#4B0082" }
-      ]
-    }
-  ]
-
-const TypeaheadCustomOptions = (props) => {
-  return (
-    <Typeahead
-        label="Colors"
-        options={groupedOptions}
-        placeholder="Select a Color..."
-        {...props}
-    />
-  )
-}
-
-export default TypeaheadCustomOptions
-

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.md

@@ -1 +0,0 @@
-Grouped options can be rendered via structuring the options in the way shown in the code snippet below.