playbook_ui_docs 14.18.0.pre.alpha.play2149overlaykitdynamicbug7619 → 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.18.0.pre.alpha.play2149overlaykitdynamicbug7619
+  version: 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-05-07 00:00:00.000000000 Z
+date: 2025-04-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -83,18 +83,18 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_react.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_react.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
@@ -747,16 +747,11 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_react.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
@@ -817,12 +812,10 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb
@@ -839,14 +832,10 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/example.yml
 - app/pb_kits/playbook/pb_dropdown/docs/index.js
 - app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb

@@ -1,55 +0,0 @@
-<% initial_items = [
-  {
-    id: "211",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "212",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "213",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-] %>
-
-<% next_init_items = [
-  {
-    id: "2111",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "2112",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "2113",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-] %>
-
-<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "line"}) do %>
-  <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical" }) do %>
-    <%= pb_rails("flex", props: { gap: "sm", orientation: "column", height: "367px" }) do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "purple"}) do %>
-          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<br/>
-
-<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "line"}) do %>
-  <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "horizontal" }) do %>
-    <%= pb_rails("flex", props: { gap: "sm", html_options: { style: "width: 332px;" } }) do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "primary"}) do %>
-          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md

@@ -1,5 +0,0 @@
-When using the "line" style, make sure to set the appropriate `direction` attribute within the `drop_zone_direction` prop on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. Also, set the `drop_zone_line_color` prop on the `draggable/draggable_item` component to "primary" or "purple".
-
-The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items. 
-
-Additionally, if the parent container of the `draggable`/`draggable/draggable_container` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md

@@ -1,5 +0,0 @@
-The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
-
-By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
-
-When using the "line" type, make sure to set the appropriate `direction` attribute on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones-line).

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx

@@ -1,59 +0,0 @@
-import React, { useState } from "react";
-
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
-import Draggable from '../../pb_draggable/_draggable'
-import { DraggableProvider } from '../../pb_draggable/context'
-
-const data = [
-  {
-    id: "100",
-    url: "https://unsplash.it/500/400/?image=638",
-  },
-  {
-    id: "200",
-    url: "https://unsplash.it/500/400/?image=639",
-  },
-  {
-    id: "300",
-    url: "https://unsplash.it/500/400/?image=640",
-  },
-];
-
-const DraggableDefault = (props) => {
-  const [initialState, setInitialState] = useState(data);
-
-  return (
-    <>
-    <DraggableProvider initialItems={data}
-        onReorder={(items) => setInitialState(items)}
-    >
-        <Draggable.Container {...props}>
-        <Flex>
-            {initialState.map(({ id, url }) => (
-              <Draggable.Item dragId={id} 
-                  key={id}
-                  onDrag={() => console.log(`${id} drag!`)}
-                  onDragEnd={() => console.log(`${id} drag end!`)}
-                  onDragEnter={() => console.log(`${id} drag enter!`)}
-                  onDragLeave={() => console.log(`${id} drag leave!`)}
-                  onDragOver={() => console.log(`${id} drag over!`)}
-                  onDragStart={() => console.log(`${id} drag start!`)}
-                  onDrop={() => console.log(`${id} drop!`)}
-              >
-                <Image alt={id} 
-                    margin="xs"
-                    size="md" 
-                    url={url} 
-                />
-              </Draggable.Item>
-            ))}
-         </Flex>
-        </Draggable.Container>
-    </DraggableProvider>
-    </>
-
-  );
-};
-
-export default DraggableDefault;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md

@@ -1 +0,0 @@
-You can add drag event listeners for `onDrag`, `onDragEnd`, `onDragEnter`, `onDragLeave`, `onDragOver`, `onDragStart`, and `onDrop`.

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

@@ -1,28 +0,0 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "United Kingdom",
-      areaCode: "+44",
-      icon: "🇬🇧", 
-      id: "gb"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pk"
-    }
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>

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

@@ -1,58 +0,0 @@
-<% 
-   options = [
-    {
-      label: "Jasper Furniss",
-      value: "Jasper Furniss",
-      territory: "PHL",
-      title: "Lead UX Engineer",
-      id: "jasper-furniss",
-      status: "Offline"
-    },
-    {
-      label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
-      territory: "PHL",
-      title: "Senior UX Designer",
-      id: "ramon-ruiz",
-      status: "Away"
-    },
-    {
-      label: "Carlos Lima",
-      value: "Carlos Lima",
-      territory: "PHL",
-      title: "Nitro Developer",
-      id: "carlos-lima",
-      status: "Online"
-    },
-    {
-      label: "Courtney Long",
-      value: "Courtney Long",
-      territory: "PHL",
-      title: "Lead UX Designer",
-      id: "courtney-long",
-      status: "Online"
-    }
-  ];
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options}) do %>
-    <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Search...", autocomplete: true}) %>
-    <%= 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 %>

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

@@ -1 +0,0 @@
-`autocomplete` prop can also be used in conjunction with the subcomponent structure.

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

@@ -1 +0,0 @@
-The `useDropdown` hook can also be used to toggle the dropdown open and closed using an external control. To do so, you must manage state with the custom hook, pass the `dropdown:'pb-dropdown-trigger'` data attribute to the external control and use the `isClosed` prop as shown. 

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

@@ -1,61 +0,0 @@
-import React, { useState } from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-import IconCircle from '../../pb_icon_circle/_icon_circle';
-
-const DropdownWithSearch = (props) => {
-const [selectedOption, setSelectedOption] = useState();
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-      icon: "🇺🇸",
-      id: "United-states"
-
-    },
-    {
-      label: "United Kingdom",
-      value: "United Kingdom",
-      icon: "🇬🇧",
-      id: "united-kingdom"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      icon: "🇵🇰",
-      id: "pakistan"
-    }
-  ];  
-
-
-  return (
-  <div>
-    <Dropdown
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
-        options={options}
-        {...props}
-    >
-      <Dropdown.Trigger>
-        <div key={selectedOption ? selectedOption.icon : "flag"}>
-            <IconCircle
-                cursor="pointer"
-                icon={selectedOption ? selectedOption.icon : "flag"}
-                variant="royal"
-            />
-        </div>
-      </Dropdown.Trigger>
-      <Dropdown.Container maxWidth="xs"
-          searchbar
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          />
-        ))}
-      </Dropdown.Container>
-    </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownWithSearch

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

@@ -1,2 +0,0 @@
-The optional `searchbar` boolean prop can also be used on the `Dropdown.Container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
-`searchbar` is set to false by default. 

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

@@ -1,52 +0,0 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "United Kingdom",
-      areaCode: "+44",
-      icon: "🇬🇧",
-      id: "gb"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pk"
-    }
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options}) do %>
-    <%= pb_rails("dropdown/dropdown_trigger") do %>
-        <%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
-    <% end %>
-    <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs", searchbar: true}) 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("flex") do %>
-                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                      <% end %>
-                  <% end %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                  <% end %>
-              <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

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

@@ -1,2 +0,0 @@
-The optional `searchbar` boolean prop can also be used on the `dropdown/dropdown_container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
-`searchbar` is set to false by default.