playbook_ui 14.13.0.pre.alpha.play1884progresspill6064 → 14.13.0.pre.rc.0

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -14,7 +14,6 @@ type PbDateProps = {
   alignment?: "left" | "center" | "right";
   aria?: { [key: string]: string };
   className?: string;
-  dark?: boolean;
   data?: { [key: string]: string };
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
@@ -30,7 +29,6 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
     aria = {},
     alignment = "left",
     className,
-    dark = false,
     data = {},
     htmlOptions = {},
     id,
@@ -58,7 +56,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
   );
 
   return (
-    <div
+    <div 
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
@@ -95,9 +93,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
           </>
         : size == "md" || size == "lg"
           ? (
-            <Title
-                dark={dark}
-                size={4}
+            <Title size={4}
                 tag="h4"
             >
               {showIcon && (
@@ -131,7 +127,6 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
               <>
                 {showIcon && (
                   <Caption className="pb_icon_kit_container"
-                      dark={dark}
                       tag="span"
                   >
                     <Icon fixedWidth
@@ -143,20 +138,15 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
 
                 {showDayOfWeek && (
                   <>
-                    <Caption dark={dark}
-                        tag="div">
-                        {weekday}
-                    </Caption>
+                    <Caption tag="div">{weekday}</Caption>
                     <Caption color="light"
-                        dark={dark}
                         tag="div"
                         text=" • "
                     />
                   </>
                 )}
 
-                <Caption dark={dark}
-                    tag="span">
+                <Caption tag="span">
                   {month} {day}
                   {currentYear != year && <>{`, ${year}`}</>}
                 </Caption>

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -18,7 +18,7 @@ const DateDefault = (props) => {
             value={"2012-08-03"}
             {...props}
         />
-        <Caption {...props}>{"(Hyphenated Date)"}</Caption>
+        <Caption>{"(Hyphenated Date)"}</Caption>
       </div>
 
       <br />
@@ -56,7 +56,6 @@ const DateDefault = (props) => {
         <Title
             size={4}
             text={"(Hyphenated Date)"}
-            {...props}
         />
       </div>
 

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -4,8 +4,7 @@ import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
 const DateUnstyled = (props) => {
   return (
     <>
-      <Caption {...props}
-          size="xs"
+      <Caption size="xs"
           text="Basic unstyled example"
       />
       <FormattedDate
@@ -16,14 +15,10 @@ const DateUnstyled = (props) => {
 
       <br />
 
-      <Caption {...props}
-
-          size="xs"
+      <Caption size="xs"
           text="Example with wrapping typography kit"
       />
-      <Title {...props}
-          size={1}
-      >
+      <Title size={1}>
         <FormattedDate
             unstyled
             value={new Date('25 Dec 1995')}
@@ -33,13 +28,10 @@ const DateUnstyled = (props) => {
 
       <br />
 
-      <Caption {...props}
-          size="xs"
+      <Caption size="xs"
           text="Example with icon + subcaption"
       />
-      <Caption {...props}
-          size="xs"
-      >
+      <Caption size="xs">
         <FormattedDate
             showDayOfWeek
             showIcon

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

@@ -1,15 +1,18 @@
 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_with_table: Draggable with Table
-  - 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(object.tag) do %>
+<%= pb_content_tag do %>
     <%= content.presence %>
-  <% end %>
+  <% end %>

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

@@ -3,11 +3,6 @@
 module Playbook
   module PbDraggable
     class DraggableContainer < ::Playbook::KitBase
-      prop :tag, type: Playbook::Props::String,
-                 default: "div"
-      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.html.erb

@@ -1,4 +1,4 @@
-<%= pb_content_tag(object.tag, {
+<%= pb_content_tag(:div, {
 id: "item_#{object.drag_id}",
 draggable: true
 }) do %>

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

@@ -5,10 +5,6 @@ module Playbook
     class DraggableItem < ::Playbook::KitBase
       prop :drag_id, type: Playbook::Props::String,
                      default: ""
-      prop :tag, type: Playbook::Props::String,
-                 default: "div"
-      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,38 +9,12 @@ export default class PbDraggable extends PbEnhancedElement {
   }
 
   connect() {
-    this.state = {
-      items: [],
-      dragData: { id: "", initialGroup: "" },
-      isDragging: "",
-      activeContainer: ""
-    };
-
     this.draggedItem = null;
     this.draggedItemId = null;
-    this.hasMultipleContainers = false;
-
     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() {
-    // Check for multiple containers
-    const containers = this.element.querySelectorAll(DRAGGABLE_CONTAINER);
-    this.hasMultipleContainers = containers.length > 1;
-
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
     this.element.querySelectorAll(".pb_draggable_item img").forEach(img => {
@@ -53,10 +27,11 @@ export default class PbDraggable extends PbEnhancedElement {
       item.addEventListener("dragenter", this.handleDragEnter.bind(this));
     });
 
-    containers.forEach(container => {
+    const container = this.element.querySelector(DRAGGABLE_CONTAINER);
+    if (container) {
       container.addEventListener("dragover", this.handleDragOver.bind(this));
       container.addEventListener("drop", this.handleDrop.bind(this));
-    });
+    }
   }
 
   handleDragStart(event) {
@@ -66,17 +41,11 @@ 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;
-
-    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);
@@ -90,20 +59,11 @@ export default class PbDraggable extends PbEnhancedElement {
   handleDragEnter(event) {
     if (!this.draggedItem || event.target === this.draggedItem) return;
 
-    if (this.hasMultipleContainers) {
-      this.handleMultiContainerDragEnter(event);
-    } else {
-      this.handleSingleContainerDragEnter(event);
-    }
-  }
-
-  handleSingleContainerDragEnter(event) {
     const targetItem = event.target.closest('.pb_draggable_item');
     if (!targetItem) return;
 
     const container = targetItem.parentNode;
     const items = Array.from(container.children);
-
     const draggedIndex = items.indexOf(this.draggedItem);
     const targetIndex = items.indexOf(targetItem);
 
@@ -114,143 +74,47 @@ export default class PbDraggable extends PbEnhancedElement {
     }
   }
 
-  handleMultiContainerDragEnter(event) {
-    const targetContainer = event.target.closest(DRAGGABLE_CONTAINER);
-    const targetItem = event.target.closest('.pb_draggable_item');
-
-    if (!targetContainer) return;
-
-    // If we're entering a container directly or there's no target item
-    if (!targetItem) {
-      const lastItem = targetContainer.querySelector('.pb_draggable_item:last-child');
-      if (lastItem) {
-        targetContainer.insertBefore(this.draggedItem, lastItem.nextSibling);
-      } else {
-        targetContainer.appendChild(this.draggedItem);
-      }
-      return;
-    }
-
-    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 rect = targetItem.getBoundingClientRect();
-    const middleY = rect.top + rect.height / 2;
-
-    if (event.clientY < middleY) {
-      container.insertBefore(this.draggedItem, targetItem);
-    } else {
-      container.insertBefore(this.draggedItem, targetItem.nextSibling);
-    }
-  }
-
   handleDragOver(event) {
     event.preventDefault();
-    event.stopPropagation();
-
-    if (this.hasMultipleContainers) {
-      this.handleMultiContainerDragOver(event);
-    } else {
-      this.handleSingleContainerDragOver(event);
-    }
-  }
-
-  handleSingleContainerDragOver(event) {
     const container = event.target.closest(DRAGGABLE_CONTAINER);
-    if (container) {
-      container.classList.add("active_container");
-    }
-  }
-
-  handleMultiContainerDragOver(event) {
-    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");
-
-      // If dragging over empty container or below last item
-      const lastItem = container.querySelector('.pb_draggable_item:last-child');
-      if (!lastItem || (lastItem && event.clientY > lastItem.getBoundingClientRect().bottom)) {
-        if (this.draggedItem && this.draggedItem.parentNode !== container) {
-          container.appendChild(this.draggedItem);
-        }
-      }
     }
   }
 
   handleDrop(event) {
     event.preventDefault();
-    event.stopPropagation();
-
-    let container;
-    if (event.target.matches(DRAGGABLE_CONTAINER)) {
-      container = event.target;
-    } else {
-      container = event.target.closest(DRAGGABLE_CONTAINER);
-    }
-
+    const 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 (this.hasMultipleContainers && !container.querySelector('.pb_draggable_item')) {
-      container.appendChild(this.draggedItem);
-    }
-
+  
     // Updated order of items as an array of item IDs
-    const reorderedItems = Array.from(
-      this.element.querySelectorAll('.pb_draggable_item')
-    ).map(item => ({
-      id: item.id,
-      container: item.closest(DRAGGABLE_CONTAINER).id
-    }));
-
+    const reorderedItems = Array.from(container.children)
+      .filter(item => item.classList.contains("pb_draggable_item"))
+      .map(item => item.id.replace("item_", "")); 
+  
     // 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,
-      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,4 +1,9 @@
-<%= pb_content_tag(:div) do %>
+<%= content_tag("div",
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) 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,4 +1,8 @@
-<%= pb_content_tag(:div) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) 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_fixed_confirmation_toast/docs/example.yml

@@ -5,7 +5,6 @@ examples:
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
-  - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
   

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

@@ -2,18 +2,16 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbFixedConfirmationToast extends PbEnhancedElement {
   static get selector() {
-    return '[class*="pb_fixed_confirmation_toast_kit"]'
+    return '.remove_toast'
   }
 
   connect() {
     this.self = this.element
     this.autoCloseToast(this.self)
 
-    if (this.self.classList.contains('remove_toast')) {
-      this.self.addEventListener('click', () => {
-        this.removeToast(this.self)
-      })
-    }
+    this.self.addEventListener('click', () => {
+      this.removeToast(this.self)
+    })
   }
 
   removeToast(elem) {
@@ -34,4 +32,4 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
       }, autoCloseIntValue)
     }
   }
-}
+}

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

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

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

@@ -1,4 +1,4 @@
-<%= pb_content_tag(:div, class: object.classname + object.size_class, tabindex: object.tabindex) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) 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,7 +18,6 @@ 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,
@@ -44,7 +43,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     htmlOptions = {},
     homeId,
     homeUrl,
-    preserveCase = false,
     target,
     newWindow,
     houseStyle,
@@ -79,8 +77,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     return null
   }
 
-  const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
-
   return (
     <div
         className={classes(className, dark)}
@@ -95,7 +91,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
               dark={dark}
               size={4}
           >
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            {joinPresent([titleize(address), houseStyle], ' · ')}
           </Title>
           <Title
               className="pb_home_address_street_address"
@@ -105,14 +101,14 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${titleize(city)}, ${state} ${zipcode}`}
           </Body>
         </div>
       }
       {emphasis == 'city' &&
         <div>
           <Body color="light">
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            {joinPresent([titleize(address), houseStyle], ' · ')}
           </Body>
           <Body color="light">{titleize(addressCont)}</Body>
           <div>
@@ -122,7 +118,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${titleize(city)}, ${state.toUpperCase()}`}
+              {`${titleize(city)}, ${state}`}
             </Title>
             <Body
                 color="light"
@@ -136,15 +132,15 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       {emphasis == 'none' &&
         <div>
           <Body dark={dark}>
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            {joinPresent([titleize(address), houseStyle], ' · ')}
           </Body>
-          <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
+          <Body dark={dark}>{titleize(addressCont)}</Body>
           <div>
             <Body
                 color="light"
                 dark={dark}
               >
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${titleize(city)}, ${state} ${zipcode}`}
           </Body>
           </div>
         </div>

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

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

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -5,8 +5,12 @@
     <%= object.icon.html_safe %>
   </span>
 <% else %>
-  <%= pb_content_tag(:i) do %>
-  <% end %>
+  <%= content_tag(:i, nil,
+      id: object.id,
+      data: object.data,
+      class: object.classname,
+      **combined_html_options
+  ) %>
   <%= content_tag(:span, nil,
       aria: { label: "#{object.icon} icon" }.merge(object.aria),
       hidden: true

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb

@@ -1,2 +1,3 @@
 <%= pb_rails("icon_button") %>
-<%= pb_rails("icon_button", props: {variant: "link", margin_top: "md" }) %>
+</br>
+<%= pb_rails("icon_button", props: {variant: "link"}) %>