playbook_ui_docs 14.14.0.pre.alpha.play1853typeaheadreacthookform6373 → 14.14.0.pre.alpha.play1853typeaheadreacthookform6480

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69e167614dc6979147993f0aca179416464a0dcf5041e49f1fb1bba2d850c608
-  data.tar.gz: 5efe6838dc0280186e139e6063666bbe932377f8a4eba745174328a5fd413220
+  metadata.gz: c942e1b9d08c93696d7902328d2a05261b809a3cb41f9154cee8650638d93e99
+  data.tar.gz: 2e95c9e8f281018fd6c069b3fb9763540e3eeeeabe710e71aed61fc0c9ce7ba2
 SHA512:
-  metadata.gz: 75dcba3659690199acce6ef5089146adbac805c32a4740f71450fbe859d551bb3c68a42e6a53855e5c5316b7211e31ff1167c686dab773f35e0ac7b3adcb8b9c
-  data.tar.gz: 111c76c52106f396099e90219702955c9046fe4fc17b43b84a7785feaa859e6607a85978d05ca6982900c3fec5be0ca25e6a4a2cded8d43595f6b1325489be1e
+  metadata.gz: 47d076e0a2e6b031f8782fc04365f14f211db7b05be1a513bd04d196a6c00c5f53c7806396e4bf2b50ec4b17371a88abbb8c2cbb42d0726a3cc54af01c36d737
+  data.tar.gz: 9b2c7f57605b805a3a78286241a2ea51be15f3f62fe9112c1991257a52c9ad158f9c4ad9ba0a2ee0ca9edd8a7df43bc835a5444767e201421b2062b297ebc932

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("button", props: { text: "Push Drawer", margin_right: "sm", data: {"open-drawer": "drawer-3"} }) %>
+
+<%= pb_rails("drawer", props: { 
+    id:"drawer-3", 
+    behavior: "push"
+}) do  %>
+    Test me (Push Behavior)
+<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "Drawer with border right", margin_right: "sm", data: {"open-drawer": "drawer-12"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-12", 
+        overlay: false,
+        border: "right"
+    }) do  %>
+        Test me (Border Right)
+    <% end %>
+    
+    
+    <%= pb_rails("button", props: { text: "Drawer with border left", margin_right: "sm", data: {"open-drawer": "drawer-13"} }) %>
+    
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-13", 
+        overlay: false,
+        border: "left"
+    }) do  %>
+        Test me (Border Left)
+    <% end %>
+
+    <%= pb_rails("button", props: { text: "Drawer with border full", data: {"open-drawer": "drawer-14"} }) %>
+    
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-14", 
+        overlay: false,
+        border: "full"
+    }) do  %>
+        Test me (Border Full)
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb

@@ -1 +1,20 @@
-<%= pb_rails("drawer") %>
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-1", 
+    }) do  %>
+        Test me (Left Drawer)
+    <% end %>
+    
+    
+    <%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
+    
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-2", 
+        placement: "right"
+    }) do  %>
+        Test me (Right Drawer)
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("button", props: { padding: "xs", margin_right: "sm", data: {"open-drawer": "drawer-4"} }) do %>
+    <%= pb_rails("icon", props: { icon: "bars", size: "2x" }) %>
+<% end %>
+
+<%= pb_rails("drawer", props: { 
+    id:"drawer-4", 
+    within_element: true,
+    placement: "bottom",
+    breakpoint: "md",
+    size: "full"
+}) do  %>
+    <%= pb_rails("nav", props: { display: {xl: "none", lg: "none", md: "none", sm: "block" } }) do %>
+        <%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
+        <%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
+    <% end %>
+    <%= pb_rails("nav", props: { display: {md: "block", sm: "none", xs: "none" }, orientation: "horizontal" }) do %>
+        <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+        <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "No Overlay Drawer", margin_right: "sm", data: {"open-drawer": "drawer-10"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-10", 
+        overlay: false
+    }) do  %>
+        Test me (No Overlay)
+    <% end %>
+    
+    
+    <%= pb_rails("button", props: { text: "Overlay Drawer", data: {"open-drawer": "drawer-11"} }) %>
+    
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-11", 
+        placement: "right"
+    }) do  %>
+        Test me (Has Overlay)
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md

@@ -0,0 +1 @@
+Click the button to close the drawer when there is no overlay.

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb

@@ -0,0 +1,49 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "XS Drawer", margin_right: "sm", data: {"open-drawer": "drawer-5"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-5", 
+        size: "xs"
+    }) do  %>
+        XS 
+    <% end %>
+    
+    <%= pb_rails("button", props: { text: "SM Drawer", margin_right: "sm", data: {"open-drawer": "drawer-6"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-6", 
+        size: "sm",
+        placement: "right"
+    }) do  %>
+        This is a small drawer 
+    <% end %>
+
+    <%= pb_rails("button", props: { text: "MD Drawer", margin_right: "sm", data: {"open-drawer": "drawer-7"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-7", 
+        size: "md"
+    }) do  %>
+        This is a medium drawer 
+    <% end %>
+
+    <%= pb_rails("button", props: { text: "LG Drawer", margin_right: "sm", data: {"open-drawer": "drawer-8"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-8", 
+        size: "lg",
+        placement: "right"
+    }) do  %>
+        This is a large drawer 
+    <% end %>
+
+    <%= pb_rails("button", props: { text: "XL Drawer", margin_right: "sm", data: {"open-drawer": "drawer-9"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-9", 
+        size: "xl"
+    }) do  %>
+        This is an extra large drawer 
+    <% end %>
+<% end %>
+

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

@@ -2,6 +2,11 @@ examples:
   
   rails:
   - drawer_default: Default
+  - drawer_behavior: Push Behavior
+  - drawer_menu: Within Element
+  - drawer_sizes: Sizes
+  - drawer_overlay: Overlay
+  - drawer_borders: Borders 
   
   
   react:

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -32,7 +32,7 @@
   <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", scroll_bar_none: true }) do %>
+    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
+        <% 15.times do %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("card") do %>
+                    Card content
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
+
+const InlineCardsExample = () => {
+    return (
+        <Flex
+            columnGap="lg"
+            orientation="row"
+            overflowX="auto"
+        >
+            {Array.from({ length: 15 }, (_, index) => (
+                <FlexItem key={index}>
+                    <Card>{"Card Content"}</Card>
+                </FlexItem>
+            ))}
+        </Flex>
+    )
+}
+
+const OverlayHideScrollBar = () => (
+    <>
+        <Overlay
+            color="card_light"
+            layout={{"x": "xl"}}
+            scrollBarNone
+        >
+            <InlineCardsExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayHideScrollBar

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md

@@ -0,0 +1 @@
+Pass the `scroll_bar_none` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md

@@ -0,0 +1 @@
+Pass the `scrollBarNone` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", dynamic: true }) do %>
+    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
+        <% 15.times do %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("card") do %>
+                    Card content
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md

@@ -0,0 +1 @@
+Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar.

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

@@ -4,8 +4,11 @@ examples:
   - overlay_multi_directional: Multi-directional
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
+  - overlay_hide_scroll_bar: Hide Scroll Bar
 
   rails:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
+  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
+  - overlay_hide_scroll_bar: Hide Scroll Bar

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

@@ -2,3 +2,4 @@ export { default as OverlayDefault } from './_overlay_default.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
+export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb

@@ -0,0 +1,39 @@
+<%= pb_rails("flex", props: { orientation: "row", gap: "md" }) do %>
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-delay", text: "1s delay"}) %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-open-delay", text: "Open only"}) %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-close-delay", text: "Close only"}) %>
+  <% end %>
+
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-delay",
+      tooltip_id: "delay-tooltip",
+      position: 'top',
+      delay_open: 1000,
+      delay_close: 1000
+    }) do %>
+        1s open/close delay 
+  <% end %>
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-open-delay",
+      tooltip_id: "open-tooltip",
+      position: 'top',
+      delay_open: 1000
+    }) do %>
+        1s open delay 
+  <% end %>
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-close-delay",
+      tooltip_id: "close-tooltip",
+      position: 'top',
+      delay_close: 1000
+    }) do %>
+        1s close delay 
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md

@@ -0,0 +1,3 @@
+Waits for the specified time when the event listener runs before triggering the tooltip.
+
+The `delay_open` and `delay_close` accept numbers in milliseconds. 1 second is 1000 milliseconds.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
+  <%= pb_rails("flex/flex_item") do %>
+    <%= pb_rails("button", props: { text: "With Interaction", id: "tooltip-interaction"}) %>
+
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#tooltip-interaction",
+      tooltip_id: "tooltip-with-interaction",
+      position: 'top',
+      interaction: true
+    }) do %>
+        You can copy me
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item") do %>
+    <%= pb_rails("button", props: { text: "No Interaction", id: "tooltip-no-interaction"}) %>
+
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#tooltip-no-interaction",
+      tooltip_id: "tooltip-without-interaction",
+      position: 'top',
+    }) do %>
+        I'm just a regular tooltip
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -2,8 +2,10 @@ examples:
 
   rails:
   - tooltip_default: Default
+  - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
   - tooltip_with_icon_circle: Icon Circle Tooltip
+  - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
 
   react:

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

@@ -0,0 +1,45 @@
+<%= pb_rails("select", props: {
+  id:"color_context_2",
+  label: "Choose a Color",
+  name: "color_name",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" }
+  ],
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  label: "Pick a Shade",
+  is_multi: false,
+  search_context_selector: "color_context_2",
+  options_by_context: {
+    "red":  [
+      { label: "Scarlet", value: "scarlet" },
+      { label: "Mahogany", value: "mahogany" },
+      { label: "Crimson", value: "crimson" }
+    ],
+    "blue": [
+      { label: "Sky Blue", value: "sky" },
+      { label: "Cerulean", value: "cerulean" },
+      { label: "Navy", value: "navy" }
+    ],
+    "green": [
+      { label: "Emerald", value: "emerald" },
+      { label: "Mint", value: "mint" },
+      { label: "Olive", value: "olive" }
+    ]
+  },
+  id: "typeahead-dynamic-options",
+}) %>
+
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

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

@@ -0,0 +1,5 @@
+You can also set up a typeahead to render options dynamically based on input from a select. To achieve this:
+- The typeahead must have a unique `id`
+- Use the `search_context_selector` prop on the typeahead. The value here must match the id of the select so the Typeahead knows where to read the current "context" from.
+- Use `options_by_context` to pass in a hash whose keys match the possible values of your “context” select. Each key maps to an array of { label, value } objects. The typeahead automatically displays only the subset of options matching the current context.
+- Additionally, the optional `clear_on_context_change` prop controls whether the typeahead clears or not when a change happens in the linked select. This prop is set to true by default so that whenever a selection is made in the select, the Typeahead automatically clears its current input/selection.

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

@@ -0,0 +1,33 @@
+<%= pb_rails("select", props: {
+  id:"color_context",
+  label: "Choose a Color",
+  name: "color_name_2",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" }
+  ],
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  label: "Pick a Shade",
+  search_context_selector: "color_context",
+  options_by_context: {
+    "red":  [
+      { label: "Scarlet", value: "scarlet" },
+      { label: "Mahogany", value: "mahogany" },
+      { label: "Crimson", value: "crimson" }
+    ],
+    "blue": [
+      { label: "Sky Blue", value: "sky" },
+      { label: "Cerulean", value: "cerulean" },
+      { label: "Navy", value: "navy" }
+    ],
+    "green": [
+      { label: "Emerald", value: "emerald" },
+      { label: "Mint", value: "mint" },
+      { label: "Olive", value: "olive" }
+    ]
+  },
+  search_term_minimum_length: 0,
+}) %>

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

@@ -0,0 +1,3 @@
+The dynamic rendering of options for the typeahead can also be achieved with a pure Rails implementation (not react rendered). For this implementation, use all the props as above with the following additions:
+
+- `search_term_minimum_length`: this sets the minimum input in the typeahead needed to display the dropdown. This is set to 3 by default. Set it to 0 for the dropdown to always display when the typeahead is interacted with. 

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

@@ -12,7 +12,7 @@ const languages = [
   { label: 'Rust', value: '2010', category: 'Systems Programming' },
   { label: 'Swift', value: '2014', category: 'Mobile Development' },
   { label: 'Kotlin', value: '2011', category: 'Mobile Development' },
-  { label: 'Ruby', value: '1995', category: 'Web Development' },
+  { label: 'Ruby', value: '1995', category: 'General Purpose' },
   { label: 'PHP', value: '1995', category: 'Web Development' },
 ]
 

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

@@ -49,7 +49,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
    * @summary - for doc example purposes only
    */
   const handleOnMultiValueClick = (value) => {
-    alert(`You removed the user: "${value.label}"`)
+    alert(`You added the user: "${value.label}"`)
   }
 
   return (

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

@@ -56,7 +56,7 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
    * @summary - for doc example purposes only
    */
   const handleOnMultiValueClick = (value) => {
-    alert(`You removed the user: "${value.label}"`)
+    alert(`You added the user: "${value.label}"`)
   }
 
   return (

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

@@ -12,6 +12,8 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
+    - typeahead_dynamic_options: Dynamic Options
+    - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
 
   react:
     - typeahead_default: Default