playbook_ui 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5757 → 14.12.0.pre.alpha.PBNTR779railsdraggablecrosscontainer5863

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

@@ -1,18 +1,14 @@
 examples:
-  
-  
   react:
   - draggable_default: Default
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_multiple_containers: Dragging Across Multiple Containers
-  
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit
   - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
   - draggable_with_cards_rails: Draggable with Cards
+  - draggable_multiple_containers_rails: Dragging Across Multiple Containers
 
-
-  

data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb

@@ -1,3 +1,3 @@
 <%= pb_content_tag do %>
-    <%= content.presence %>
-  <% end %>
+  <%= content.presence %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/draggable_container.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbDraggable
     class DraggableContainer < ::Playbook::KitBase
+      prop :container, type: Playbook::Props::String,
+                       default: ""
+
       def data
         Hash(prop(:data)).merge(pb_draggable_container: true)
       end

data/app/pb_kits/playbook/pb_draggable/draggable_item.rb

@@ -5,6 +5,8 @@ module Playbook
     class DraggableItem < ::Playbook::KitBase
       prop :drag_id, type: Playbook::Props::String,
                      default: ""
+      prop :container, type: Playbook::Props::String,
+                       default: ""
 
       def data
         Hash(prop(:data)).merge(pb_draggable_item: true)

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

@@ -9,11 +9,32 @@ export default class PbDraggable extends PbEnhancedElement {
   }
 
   connect() {
+    this.state = {
+      items: [],
+      dragData: { id: "", initialGroup: "" },
+      isDragging: "",
+      activeContainer: ""
+    };
+
     this.draggedItem = null;
     this.draggedItemId = null;
+
     document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
   }
 
+  setState(newState) {
+    this.state = { ...this.state, ...newState };
+    if (newState.items) {
+      const customEvent = new CustomEvent('pb-draggable-reorder', {
+        detail: {
+          reorderedItems: this.state.items,
+          containerId: this.element.querySelector(DRAGGABLE_CONTAINER).id
+        }
+      });
+      this.element.dispatchEvent(customEvent);
+    }
+  }
+
   bindEventListeners() {
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
@@ -27,11 +48,11 @@ export default class PbDraggable extends PbEnhancedElement {
       item.addEventListener("dragenter", this.handleDragEnter.bind(this));
     });
 
-    const container = this.element.querySelector(DRAGGABLE_CONTAINER);
-    if (container) {
+    const containers = this.element.querySelectorAll(DRAGGABLE_CONTAINER);
+    containers.forEach(container => {
       container.addEventListener("dragover", this.handleDragOver.bind(this));
       container.addEventListener("drop", this.handleDrop.bind(this));
-    }
+    });
   }
 
   handleDragStart(event) {
@@ -41,11 +62,17 @@ export default class PbDraggable extends PbEnhancedElement {
       event.preventDefault();
       return;
     }
-    
+
+    const container = event.target.closest(DRAGGABLE_CONTAINER);
     this.draggedItem = event.target;
     this.draggedItemId = event.target.id;
-    event.target.classList.add("is_dragging");
 
+    this.setState({
+      dragData: { id: this.draggedItemId, initialGroup: container.id },
+      isDragging: this.draggedItemId
+    });
+
+    event.target.classList.add("is_dragging");
     if (event.dataTransfer) {
       event.dataTransfer.effectAllowed = 'move';
       event.dataTransfer.setData('text/plain', this.draggedItemId);
@@ -64,6 +91,14 @@ export default class PbDraggable extends PbEnhancedElement {
 
     const container = targetItem.parentNode;
     const items = Array.from(container.children);
+
+    const newItems = [...items].map(item => ({
+      id: item.id,
+      container: container.id
+    }));
+
+    this.setState({ items: newItems });
+
     const draggedIndex = items.indexOf(this.draggedItem);
     const targetIndex = items.indexOf(targetItem);
 
@@ -76,45 +111,82 @@ export default class PbDraggable extends PbEnhancedElement {
 
   handleDragOver(event) {
     event.preventDefault();
-    const container = event.target.closest(DRAGGABLE_CONTAINER);
+    event.stopPropagation();
+
+    let container;
+    if (event.target.matches(DRAGGABLE_CONTAINER)) {
+      container = event.target;
+    } else {
+      container = event.target.closest(DRAGGABLE_CONTAINER);
+    }
 
     if (container) {
+      this.setState({ activeContainer: container.id });
       container.classList.add("active_container");
     }
   }
 
   handleDrop(event) {
     event.preventDefault();
-    const container = event.target.closest(DRAGGABLE_CONTAINER);
+    event.stopPropagation();
+
+    let container;
+
+    if (event.target.matches(DRAGGABLE_CONTAINER)) {
+      container = event.target;
+    } else {
+      container = event.target.closest(DRAGGABLE_CONTAINER);
+    }
+
     if (!container || !this.draggedItem) return;
-  
+
     container.classList.remove("active_container");
     this.draggedItem.style.opacity = '1';
-  
+
+    // Handle empty containers
+    if (!container.querySelector('.pb_draggable_item')) {
+      container.appendChild(this.draggedItem);
+    }
+
     // Updated order of items as an array of item IDs
-    const reorderedItems = Array.from(container.children)
-      .filter(item => item.classList.contains("pb_draggable_item"))
-      .map(item => item.id.replace("item_", "")); 
-  
+    const reorderedItems = Array.from(
+      this.element.querySelectorAll('.pb_draggable_item')
+    ).map(item => ({
+      id: item.id,
+      container: item.closest(DRAGGABLE_CONTAINER).id
+    }));
+
     // Store reordered items in a data attribute on the container
     container.setAttribute("data-reordered-items", JSON.stringify(reorderedItems));
-  
+
     const customEvent = new CustomEvent('pb-draggable-reorder', {
       detail: {
         reorderedItems,
         containerId: container.id,
       }
     });
+
     this.element.dispatchEvent(customEvent);
-  
+
+    this.setState({
+      items: reorderedItems,  // Changed from reorderedItems to items to match setState
+      isDragging: "",
+      activeContainer: ""
+    });
+
     this.draggedItem = null;
     this.draggedItemId = null;
   }
-  
 
   handleDragEnd(event) {
     event.target.classList.remove("is_dragging");
     event.target.style.opacity = '1';
+
+    this.setState({
+      isDragging: "",
+      activeContainer: ""
+    });
+
     this.draggedItem = null;
     this.draggedItemId = null;
 

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag("div",
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label
           for="upload-<%= object.id %>"

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div) do %>
     <%= object.wrapper do %>
       <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
         <% if (object.template != "sort_only") %>

data/app/pb_kits/playbook/pb_form_group/form_group.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
+<%= pb_content_tag(:div, class: object.classname + object.size_class, tabindex: object.tabindex) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
     <% if object.truncate %>

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -18,6 +18,7 @@ type HomeAddressStreetProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
+  preserveCase?: boolean,
   emphasis: "street" | "city" | "none",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   homeId: string,
@@ -43,6 +44,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     htmlOptions = {},
     homeId,
     homeUrl,
+    preserveCase = false,
     target,
     newWindow,
     houseStyle,
@@ -77,6 +79,8 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     return null
   }
 
+  const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
+
   return (
     <div
         className={classes(className, dark)}
@@ -91,7 +95,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
               dark={dark}
               size={4}
           >
-            {joinPresent([titleize(address), houseStyle], ' · ')}
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
           </Title>
           <Title
               className="pb_home_address_street_address"
@@ -101,14 +105,14 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${titleize(city)}, ${state} ${zipcode}`}
+            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
           </Body>
         </div>
       }
       {emphasis == 'city' &&
         <div>
           <Body color="light">
-            {joinPresent([titleize(address), houseStyle], ' · ')}
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
           </Body>
           <Body color="light">{titleize(addressCont)}</Body>
           <div>
@@ -118,7 +122,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${titleize(city)}, ${state}`}
+              {`${titleize(city)}, ${state.toUpperCase()}`}
             </Title>
             <Body
                 color="light"
@@ -132,15 +136,15 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       {emphasis == 'none' &&
         <div>
           <Body dark={dark}>
-            {joinPresent([titleize(address), houseStyle], ' · ')}
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
           </Body>
-          <Body dark={dark}>{titleize(addressCont)}</Body>
+          <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
           <div>
             <Body
                 color="light"
                 dark={dark}
               >
-            {`${titleize(city)}, ${state} ${zipcode}`}
+            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
           </Body>
           </div>
         </div>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("home_address_street", props: {
+  address: "70 pRoSpEcT ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  preserve_case: true,
+  state: "pa",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import HomeAddressStreet from '../_home_address_street'
+
+const HomeAddressStreetFormatting = (props) => {
+  return (
+    <HomeAddressStreet
+        address="70 pRoSpEcT ave"
+        addressCont="Apt M18"
+        city="West Chester"
+        homeId="8250263"
+        homeUrl="https://powerhrg.com/"
+        preserveCase
+        state="pa"
+        territory="PHL"
+        zipcode="19382"
+        {...props}
+    />
+  )
+}
+
+export default HomeAddressStreetFormatting

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md

@@ -0,0 +1 @@
+The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserve_case: true`, the street address will be rendered exactly as entered, without automatic title capitalization.

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md

@@ -0,0 +1 @@
+The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserveCase`, the street address will be rendered exactly as entered, without automatic title capitalization.

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

@@ -5,12 +5,14 @@ examples:
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
+  - home_address_street_formatting: Formatting
 
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
+  - home_address_street_formatting: Formatting
 
   swift:
   - home_address_street_default_swift: Default

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

@@ -2,3 +2,4 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
 export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
+export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -18,6 +18,7 @@ module Playbook
       prop :state
       prop :zipcode
       prop :territory
+      prop :preserve_case, default: false
       prop :dark, type: Playbook::Props::Boolean, default: false
 
       def classname
@@ -29,7 +30,7 @@ module Playbook
       end
 
       def city_state
-        [city&.titleize, state].join(", ")
+        [city&.titleize, state&.upcase].join(", ")
       end
 
       def zip
@@ -37,7 +38,7 @@ module Playbook
       end
 
       def address_house_style
-        [address&.titleize, house_style].join(separator)
+        [format_street_address, house_style].join(separator)
       end
 
       def address_house_style2
@@ -48,6 +49,14 @@ module Playbook
         house_style ? " \u00b7 " : ""
       end
 
+      def format_street_address
+        preserve_case ? address : custom_titleize(address)
+      end
+
+      def custom_titleize(str)
+        str.split(" ").map(&:capitalize).join(" ")
+      end
+
       def city_emphasis_props
         {
           address_house_style: address_house_style,

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

@@ -39,20 +39,17 @@
     </tr>
   </tbody>
 <% end %>
-
 <%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
   <colgroup>
     <%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
-    <%= pb_rails("background", props: { background_color: "card_light", tag: "col" }) %>
+    <%= pb_rails("background", props: { background_color: "info_subtle", tag: "col" }) %>
     <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
   </colgroup>
-  <%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-    </tr>
-  <% end %>
+  <thead>
+    <th>Column 1</th>
+    <th>Column 2</th>
+    <th>Column 3</th>
+  </thead>
   <tbody>
     <tr>
       <td>Value 1</td>

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

@@ -68,7 +68,7 @@ const TableWithBackgroundKit = (props) => {
                 tag='col'
             />
             <Background
-                backgroundColor="card_light"
+                backgroundColor="info_subtle"
                 tag='col'
             />
             <Background
@@ -76,16 +76,13 @@ const TableWithBackgroundKit = (props) => {
                 tag='col'
             />
           </colgroup>
-          <Background
-              backgroundColor="card_light"
-              tag='thead'
-          >
+          <thead>
             <tr>
-                <th>{'Column 1'}</th>
-                <th>{'Column 2'}</th>
-                <th>{'Column 3'}</th>
+              <th>{'Column 1'}</th>
+              <th>{'Column 2'}</th>
+              <th>{'Column 3'}</th>
             </tr>
-          </Background>
+          </thead>
           <tbody>
             <tr>
               <td>{'Value 1'}</td>

data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss

@@ -74,6 +74,31 @@
       &.table-card {
         background: none !important;
 
+        &.dark {
+          tbody, .pb_table_tbody {
+            tr, .pb_table_tr {
+              td, .pb_table_td {
+                background: $bg_dark_card !important;
+                border-color: $border_dark !important;
+                &:before {
+                  color: $text_dk_light !important;
+                }
+                &:after {
+                  height: 0;
+                  background-color: transparent;
+                }
+  
+                &:first-child {
+                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
+                }
+                &:last-child {
+                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
+                }
+              }
+            }
+          }
+        }
+
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {
@@ -81,6 +106,7 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
+
               &:after {
                 height: 0;
                 background-color: transparent;

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -77,7 +77,6 @@
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {
-              background: $white !important;
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;

data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss

@@ -74,6 +74,31 @@
       &.table-card {
         background: none !important;
 
+        &.dark {
+          tbody, .pb_table_tbody {
+            tr, .pb_table_tr {
+              td, .pb_table_td {
+                background: $bg_dark_card !important;
+                border-color: $border_dark !important;
+                &:before {
+                  color: $text_dk_light !important;
+                }
+                &:after {
+                  height: 0;
+                  background-color: transparent;
+                }
+  
+                &:first-child {
+                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
+                }
+                &:last-child {
+                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
+                }
+              }
+            }
+          }
+        }
+
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {

data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss

@@ -74,6 +74,31 @@
       &.table-card {
         background: none !important;
 
+        &.dark {
+          tbody, .pb_table_tbody {
+            tr, .pb_table_tr {
+              td, .pb_table_td {
+                background: $bg_dark_card !important;
+                border-color: $border_dark !important;
+                &:before {
+                  color: $text_dk_light !important;
+                }
+                &:after {
+                  height: 0;
+                  background-color: transparent;
+                }
+  
+                &:first-child {
+                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
+                }
+                &:last-child {
+                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
+                }
+              }
+            }
+          }
+        }
+
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -13,6 +13,7 @@ type UserProps = {
   aria?: {[key: string]: string},
   avatar?: boolean,
   avatarUrl?: string,
+  bold?: boolean,
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
@@ -32,6 +33,7 @@ const User = (props: UserProps): React.ReactElement => {
     aria = {},
     avatar = false,
     avatarUrl,
+    bold = true,
     className,
     dark = false,
     data = {},
@@ -75,6 +77,7 @@ const User = (props: UserProps): React.ReactElement => {
       }
       <div className="content_wrapper">
         <Title
+            bold={bold}
             dark={dark}
             size={size == 'lg' ? 3 : 4}
             text={name}