playbook_ui 14.13.0.pre.rc.10 → 14.14.0.pre.alpha.PBNTR866finalizecssendlessscroll6462

data/app/pb_kits/playbook/pb_drawer/_drawer.scss

@@ -134,14 +134,6 @@ body.PBDrawer__Body--close {
   transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
 }
 
-.pb_drawer_lg_left.pb_drawer {
-  transform: translateX(-100%);
-}
-
-.pb_drawer_lg_right.pb_drawer {
-  transform: translateX(100%);
-}
-
 .pb_drawer.pb_drawer_after_open {
   pointer-events: auto;
   transform: translate3d(0, 0, 0);
@@ -157,6 +149,34 @@ body.PBDrawer__Body--close {
   animation-duration: $animation-duration;
   outline: none;
 
+ &.pb_drawer_within_element_rails {
+    position: relative;
+    width: 100%;
+    display: block;
+    background-color: $white;
+    overflow: hidden;
+
+    // Use max-height for a smooth accordion-like animation
+    max-height: 0;
+    transition: max-height $animation-duration ease-in-out;
+    z-index: 1;
+
+    &.open {
+      max-height: 1000px;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: inherit;
+      z-index: -1;
+    }
+  }
+
   &.pb_drawer_within_element {
     position: relative;
     width: 100%;
@@ -329,6 +349,10 @@ body.PBDrawer__Body--close {
     opacity: 1;
     pointer-events: none;
 
+    & .pb_drawer {
+      pointer-events: auto;
+    }
+
     &_before_close {
       height: 0;
     }

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_drawer/drawer.html.erb

@@ -1,12 +1,20 @@
-<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
-<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
-<%= pb_content_tag(
-    # :div,
-    # aria: object.aria,
-    # class: object.classname,
-    # data: object.data,
-    # id: object.id,
-    # **combined_html_options
-) do %>
-  <span>DRAWER CONTENT</span>
-<% end %>
+<% if within_element %>
+    <%= pb_content_tag(:div, data: {breakpoint: object.breakpoint} ) do %>
+        <%= content %>
+    <% end %>
+<% else %>
+    <div class="pb_drawer_wrapper"
+        id="drawer-wrapper-<%= object.id %>"
+        style="display:none;"
+        data-behavior="<%= object.behavior %>"
+        data-size="<%= object.size %>"
+        data-placement="<%= object.placement %>"
+        data-breakpoint="<%= object.breakpoint %>"
+        >
+        <div class="<%= overlay_classes %>" style="display:none;" id="drawer-overlay-<%= object.id %>"> 
+            <%= pb_content_tag do %>
+                <%= content %>
+            <% end %>
+        </div>
+    </div>
+<% end %>

data/app/pb_kits/playbook/pb_drawer/drawer.rb

@@ -2,7 +2,55 @@
 
 module Playbook
   module PbDrawer
-    class Drawer < ::Playbook::KitBase
+    class Drawer < Playbook::KitBase
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[xs sm md lg xl full],
+                  default: "md"
+      prop :placement, type: Playbook::Props::Enum,
+                       values: %w[left right bottom],
+                       default: "left"
+      prop :behavior, type: Playbook::Props::Enum,
+                      values: %w[floating push],
+                      default: "floating"
+      prop :overlay, type: Playbook::Props::Boolean,
+                     default: true
+      prop :within_element, type: Playbook::Props::Boolean,
+                            default: false
+      prop :border, type: Playbook::Props::Enum,
+                    values: %w[full none right left],
+                    default: "none"
+      prop :breakpoint, type: Playbook::Props::Enum,
+                        values: %w[none xs sm md lg xl],
+                        default: "none"
+
+      def classname
+        generate_classname("pb_drawer pb_drawer_#{size}_#{placement} #{within_class} #{border_classes}")
+      end
+
+      def border_classes
+        case border
+        when "full"
+          "drawer_border-full"
+        when "right"
+          "drawer_border-right"
+        when "left"
+          "drawer_border-left"
+        else
+          ""
+        end
+      end
+
+      def overlay_close
+        !should_close_on_overlay_click ? "overlay_close" : ""
+      end
+
+      def within_class
+        within_element ? "pb_drawer_within_element_rails" : ""
+      end
+
+      def overlay_classes
+        "pb_drawer_#{overlay ? '' : 'no_'}overlay drawer_content_#{placement} pb_drawer_overlay_after_open #{overlay ? '' : 'no-background'}"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_drawer/index.js

@@ -0,0 +1,257 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+export default class PbDrawer extends PbEnhancedElement {
+  static get selector() {
+    return ".pb_drawer_wrapper"
+  }
+
+  connect() {
+    this.handleToggleClick = this.handleToggleClick.bind(this)
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    this.handleResize = this.handleResize.bind(this)
+
+    this._toggleTriggers = Array.from(document.querySelectorAll("[data-open-drawer]"))
+    this._toggleTriggers.forEach(el => {
+      el.addEventListener("click", this.handleToggleClick)
+    })
+
+    this._wrappers = Array.from(document.querySelectorAll(".pb_drawer_wrapper"))
+    this._wrappers.forEach(el => {
+      el.addEventListener("mousedown", this.handleOutsideClick)
+    })
+
+    this._withinElementDrawers = Array.from(
+      document.querySelectorAll(".pb_drawer_within_element_rails[data-breakpoint]")
+    )
+
+    window.addEventListener("resize", this.handleResize)
+    this.handleResize()
+  }
+
+  disconnect() {
+    this._toggleTriggers.forEach(el => {
+      el.removeEventListener("click", this.handleToggleClick)
+    })
+    this._wrappers.forEach(el => {
+      el.removeEventListener("mousedown", this.handleOutsideClick)
+    })
+    window.removeEventListener("resize", this.handleResize)
+  }
+
+  getOverlay(wrapper) {
+    if (wrapper.id && wrapper.id.startsWith("drawer-wrapper-")) {
+      const overlayId = wrapper.id.replace("drawer-wrapper-", "drawer-overlay-")
+      return document.getElementById(overlayId)
+    }
+    return wrapper.querySelector(".pb_drawer_overlay") || wrapper.querySelector(".pb_drawer_no_overlay")
+  }
+
+  handleToggleClick(event) {
+    const trigger = event.currentTarget
+    const drawerId = trigger.dataset.openDrawer
+    const dialog = document.getElementById(drawerId)
+    if (!dialog) return
+
+    if (dialog.classList.contains("pb_drawer_within_element_rails")) {
+      if (dialog.classList.contains("open")) {
+        this.closeWithinElementDrawer(dialog)
+        dialog.dataset.manualOpen = "false"
+      } else {
+        this.openWithinElementDrawer(dialog)
+        dialog.dataset.manualOpen = "true"
+      }
+      return
+    }
+
+    const wrapperId = `drawer-wrapper-${drawerId}`
+    const wrapper = document.getElementById(wrapperId)
+    if (!wrapper) return
+
+    if (wrapper !== this.element) return
+
+    if (wrapper.classList.contains("open")) {
+      this.closeDrawer(wrapper, dialog)
+      wrapper.dataset.manualOpen = "false"
+    } else {
+      this.openDrawer(wrapper, dialog)
+      wrapper.dataset.manualOpen = "true"
+    }
+  }
+
+  openWithinElementDrawer(dialog) {
+    if (dialog.classList.contains("open")) return
+    dialog.style.maxHeight = "0px"
+    dialog.offsetHeight
+    dialog.classList.add("open")
+    // Get trigger's height and add it to the final height
+    const trigger = document.querySelector(`[data-open-drawer="${dialog.id}"]`)
+    const triggerHeight = trigger ? trigger.offsetHeight : 0
+    const finalHeight = (dialog.scrollHeight + triggerHeight) + "px"
+    dialog.style.maxHeight = finalHeight
+    dialog.addEventListener("transitionend", function handleOpenEnd(e) {
+      if (e.propertyName === "max-height") {
+        dialog.style.maxHeight = "none"
+        dialog.removeEventListener("transitionend", handleOpenEnd)
+      }
+    })
+  }
+
+  closeWithinElementDrawer(dialog) {
+    if (!dialog.classList.contains("open")) return
+    const currentHeight = dialog.scrollHeight
+    dialog.style.maxHeight = currentHeight + "px"
+    dialog.offsetHeight
+    dialog.classList.remove("open")
+    dialog.style.maxHeight = "0px"
+    dialog.addEventListener("transitionend", function handleCloseEnd(e) {
+      if (e.propertyName === "max-height") {
+        dialog.removeEventListener("transitionend", handleCloseEnd)
+        dialog.style.maxHeight = "0px"
+      }
+    })
+  }
+
+  openDrawer(wrapper, dialog) {
+    const behavior = wrapper.dataset.behavior
+    const size = wrapper.dataset.size
+    const placement = wrapper.dataset.placement
+    this.handlePushOpen(behavior, size, placement)
+
+    wrapper.style.display = ""
+    const overlay = this.getOverlay(wrapper)
+    if (overlay) overlay.style.display = ""
+
+    wrapper.classList.add("open")
+    dialog.classList.add("open")
+  }
+
+  closeDrawer(wrapper, dialog) {
+    const behavior = wrapper.dataset.behavior
+    this.handlePushClose(behavior)
+
+    if (wrapper.className.includes("open")) wrapper.style.display = "none"
+    const overlay = this.getOverlay(wrapper)
+    if (overlay && wrapper.className.includes("open")) overlay.style.display = "none"
+
+    wrapper.classList.remove("open")
+    dialog.classList.remove("open")
+  }
+
+  handleOutsideClick(event) {
+    const wrapper = event.currentTarget
+    const dialog = wrapper.querySelector(".pb_drawer")
+    const overlay = this.getOverlay(wrapper)
+
+    if (dialog && dialog.classList.contains("pb_drawer_within_element_rails")) {
+      return
+    }
+
+    if (wrapper.dataset.overlayClick === "overlay_close" && event.target === overlay) {
+      this.closeDrawer(wrapper, dialog)
+      event.stopPropagation()
+      return
+    }
+
+    const dialogRect = dialog.getBoundingClientRect()
+    const clickedOutside =
+      event.clientX < dialogRect.left ||
+      event.clientX > dialogRect.right ||
+      event.clientY < dialogRect.top ||
+      event.clientY > dialogRect.bottom
+
+    if (clickedOutside) {
+      this.closeDrawer(wrapper, dialog)
+      event.stopPropagation()
+    }
+  }
+
+  handleResize() {
+    const breakpointValues = {
+      none: 0,
+      xs: 575,
+      sm: 768,
+      md: 992,
+      lg: 1200,
+      xl: 1400,
+    }
+
+    // Process wrappers
+    this._wrappers.forEach(wrapper => {
+      const bp = wrapper.dataset.breakpoint || "none"
+      if (bp === "none") return
+
+      const threshold = breakpointValues[bp] || 0
+      const dialog = wrapper.querySelector(".pb_drawer")
+      const trigger = dialog ? document.querySelector(`[data-open-drawer="${dialog.id}"]`) : null
+
+      if (window.innerWidth >= threshold) {
+        if (!wrapper.classList.contains("open")) {
+          this.openDrawer(wrapper, dialog)
+        }
+        if (trigger) trigger.style.display = "none"
+      } else {
+        if (trigger) trigger.style.display = ""
+        if (wrapper.classList.contains("open") && wrapper.dataset.manualOpen !== "true") {
+          this.closeDrawer(wrapper, dialog)
+        }
+      }
+    })
+
+    // Process within element drawers
+    this._withinElementDrawers.forEach(drawer => {
+      const bp = drawer.dataset.breakpoint || "none"
+      if (bp === "none") return
+
+      const threshold = breakpointValues[bp] || 0
+      const trigger = document.querySelector(`[data-open-drawer="${drawer.id}"]`)
+
+      if (window.innerWidth >= threshold) {
+        if (!drawer.classList.contains("open")) {
+          this.openWithinElementDrawer(drawer)
+        }
+        if (trigger) trigger.style.display = "none"
+      } else {
+        if (trigger) trigger.style.display = ""
+        if (drawer.classList.contains("open") && drawer.dataset.manualOpen !== "true") {
+          this.closeWithinElementDrawer(drawer)
+        }
+      }
+    })
+  }
+
+  handlePushOpen(behavior, size, placement) {
+    if (behavior !== "push") return
+
+    const sizeMap = {
+      xl: "365px",
+      lg: "300px",
+      md: "250px",
+      sm: "200px",
+      xs: "64px",
+      full: "100%",
+    }
+
+    const body = document.querySelector("body")
+    if (!body) return
+
+    if (placement === "left") {
+      body.style.cssText = `margin-left: ${sizeMap[size]} !important; margin-right: '' !important;`
+    } else if (placement === "right") {
+      body.style.cssText = `margin-right: ${sizeMap[size]} !important; margin-left: '' !important;`
+    }
+    body.classList.add("PBDrawer__Body--open")
+  }
+
+  handlePushClose(behavior) {
+    if (behavior !== "push") return
+
+    const body = document.querySelector("body")
+    if (!body) return
+
+    if (body.classList.contains("PBDrawer__Body--open")) {
+      body.classList.add("PBDrawer__Body--close")
+    }
+    body.style.cssText = ""
+    body.classList.remove("PBDrawer__Body--open")
+  }
+}

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

@@ -46,6 +46,7 @@
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
+  <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -32,11 +32,12 @@
   <%= 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 } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
+  <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>