playbook_ui_docs 15.3.0.pre.alpha.PLAY258611978 → 15.3.0.pre.alpha.PLAY260211773

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 15.3.0.pre.alpha.PLAY258611978
+  version: 15.3.0.pre.alpha.PLAY260211773
 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-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -604,8 +604,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_and_dropdown_range..md
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_and_dropdown_range.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
@@ -878,14 +876,6 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
@@ -1830,9 +1820,7 @@ files:
 - app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb
-- app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx
-- app/pb_kits/playbook/pb_popover/docs/_popover_append_to_rails.md
-- app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md
+- app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
@@ -2252,10 +2240,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
@@ -2511,9 +2495,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_date_picker/docs/_date_picker_and_dropdown_range..md

@@ -1,14 +0,0 @@
-You can link a Dropdown (`quickpick` variant) to standard DatePickers using the following props:
-
-**For the Dropdown**:
-`controlsStartId`: ID of the DatePicker that should receive the start date.
-
-`controlsEndId`: ID of the DatePicker that should receive the end date.
-
-When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
-
-**For the Start/End DatePickers**:
-`syncStartWith`: ID of the quickpick this start date is synced to.
-`syncEndWith`: ID of the quickpick this end date is synced to.
-
-When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_and_dropdown_range.jsx

@@ -1,38 +0,0 @@
-import React from "react";
-import Dropdown from "../../pb_dropdown/_dropdown";
-import DatePicker from "../../pb_date_picker/_date_picker";
-
-const DatePickerAndDropdownRange = (props) => {
-  return (
-    <>
-      <Dropdown
-          controlsEndId="end-date-picker1"
-          controlsStartId="start-date-picker1"
-          id="dropdown-as-quickpick"
-          label="Date Range"
-          marginBottom="sm"
-          placeholder="Select a Date Range"
-          variant="quickpick"
-          {...props}
-      /> 
-
-      <DatePicker
-          label="Start Date"
-          pickerId="start-date-picker1"
-          placeholder="Select a Start Date"
-          syncStartWith="dropdown-as-quickpick"
-          {...props}
-      />
-
-      <DatePicker
-          label="End Date"
-          pickerId="end-date-picker1"
-          placeholder="Select an End Date"
-          syncEndWith="dropdown-as-quickpick"
-          {...props}
-      />
-    </>
-  );
-};
-
-export default DatePickerAndDropdownRange;

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

@@ -1,18 +0,0 @@
-import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-
-const DropdownQuickpick = (props) => {
-
-  return (
-    <div>
-      <Dropdown
-          label="Date Range"
-          onSelect={(selectedItem) => console.log(selectedItem)}
-          variant="quickpick"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default DropdownQuickpick

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

@@ -1,4 +0,0 @@
-The QuickPick variant provides predefined date based options when `variant="quickpick"` is used. 
-
-Open the Dropdown above to see the default options.
-

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

@@ -1,18 +0,0 @@
-import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-
-const DropdownQuickpickDefaultDates = (props) => {
-
-  return (
-    <div>
-      <Dropdown
-          defaultValue="This Year"
-          label="Date Range"
-          variant="quickpick"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default DropdownQuickpickDefaultDates

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

@@ -1 +0,0 @@
-To set a default value for the Dropdown, you can use the label of the range you want set as default, for example "This Year", "Today", etc. 

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

@@ -1,19 +0,0 @@
-import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-
-const DropdownQuickpickRangeEnd = (props) => {
-
-  return (
-    <div>
-      <Dropdown
-          label="Date Range"
-          onSelect={(selectedItem) => console.log(selectedItem)}
-          rangeEndsToday
-          variant="quickpick"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default DropdownQuickpickRangeEnd

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

@@ -1 +0,0 @@
-The optional `rangeEndsToday` prop can be used with the quickpick variant to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if `rangeEndsToday` prop is used, end date on that range will be today's date.

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

@@ -1,38 +0,0 @@
-import React from "react";
-import Dropdown from "../../pb_dropdown/_dropdown";
-import DatePicker from "../../pb_date_picker/_date_picker";
-
-const DropdownQuickpickWithDatePickers = (props) => {
-  return (
-    <>
-      <Dropdown
-          controlsEndId="end-date-picker"
-          controlsStartId="start-date-picker"
-          id="dropdown-quickpick"
-          label="Range"
-          marginBottom="sm"
-          placeholder="Select a Date Range"
-          variant="quickpick"
-          {...props}
-      /> 
-
-      <DatePicker
-          label="Start Date"
-          pickerId="start-date-picker"
-          placeholder="Select a Start Date"
-          syncStartWith="dropdown-quickpick"
-          {...props}
-      />
-
-      <DatePicker
-          label="End Date"
-          pickerId="end-date-picker"
-          placeholder="Select an End Date"
-          syncEndWith="dropdown-quickpick"
-          {...props}
-      />
-    </>
-  );
-};
-
-export default DropdownQuickpickWithDatePickers;

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

@@ -1,14 +0,0 @@
-You can link a Dropdown (`quickpick` variant) to standard DatePickers using the following props:
-
-**For the Dropdown**:
-`controlsStartId`: ID of the DatePicker that should receive the start date.
-
-`controlsEndId`: ID of the DatePicker that should receive the end date.
-
-When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
-
-**For the Start/End DatePickers**:
-`syncStartWith`: ID of the quickpick this start date is synced to.
-`syncEndWith`: ID of the quickpick this end date is synced to.
-
-When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx

@@ -1,68 +0,0 @@
-import React, { useState } from "react";
-import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
-
-const PopoverAppendTo = (props) => {
-  const [showParentPopover, setShowParentPopover] = useState(false);
-  const [showSelectorPopover, setShowSelectorPopover] = useState(false);
-
-  const parentPopoverReference = (
-    <CircleIconButton
-        icon="info"
-        onClick={() => setShowParentPopover(!showParentPopover)}
-        variant="secondary"
-    />
-  );
-
-  const selectorPopoverReference = (
-    <CircleIconButton
-        icon="info"
-        onClick={() => setShowSelectorPopover(!showSelectorPopover)}
-        variant="secondary"
-    />
-  );
-
-  return (
-    <>
-      <Flex
-          marginBottom="md"
-          orientation="row"
-          vertical="center"
-          {...props}
-      >
-        <Body text="Click info for more details" />
-        &nbsp;
-        <PbReactPopover
-            appendTo="parent"
-            offset
-            placement="top"
-            reference={parentPopoverReference}
-            show={showParentPopover}
-            {...props}
-        >
-          {'I\'m a popover. I have been appended to my parent element.'}
-        </PbReactPopover>
-      </Flex>
-
-      <Flex
-          orientation="row"
-          vertical="center"
-          {...props}
-      >
-        <Body text="Click info for more details" />
-        &nbsp;
-        <PbReactPopover
-            appendTo=".kit-show-wrapper"
-            offset
-            placement="top"
-            reference={selectorPopoverReference}
-            show={showSelectorPopover}
-            {...props}
-        >
-          {'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
-        </PbReactPopover>
-      </Flex>
-    </>
-  );
-};
-
-export default PopoverAppendTo;

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md

@@ -1 +0,0 @@
-By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `appendTo` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

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.