playbook_ui 14.14.0 → 14.15.0.pre.alpha.PBNTR902multilevelselecthiddeninputbug6580

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_menu.jsx

@@ -8,8 +8,8 @@ const DrawerMenu = () => {
     const mediaQuery = window.matchMedia("(max-width: 600px)")
     setIsSmallScreen(mediaQuery.matches)
     const handler = (e) => setIsSmallScreen(e.matches)
-    mediaQuery.addEventListener('change', handler)
-    return () => mediaQuery.removeEventListener('change', handler)
+    mediaQuery.addEventListener("change", handler)
+    return () => mediaQuery.removeEventListener("change", handler)
   }, [])
 
   return (
@@ -22,17 +22,17 @@ const DrawerMenu = () => {
         />
       </Button>
       <Drawer
-          breakpoint="md"
+          breakpoint='md'
           placement='bottom'
           size='full'
           triggerId='menuButton'
           withinElement
       >
-        <Nav 
+        <Nav
             highlight={false}
             link='#'
-            orientation={isSmallScreen ? 'vertical' : 'horizontal'} 
-            padding={isSmallScreen ? 'none' : 'sm'}
+            orientation={isSmallScreen ? "vertical" : "horizontal"}
+            padding={isSmallScreen ? "none" : "sm"}
         >
           <NavItem link='#'
               text='About'

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.jsx

@@ -31,6 +31,7 @@ const DrawerSizes = () => {
           onClose={toggleNoOverlayDrawer}
           opened={openedNoOverlayDrawer}
           overlay={false}
+          placement='right'
           size='lg'
       >
         This is a Drawer with no overlay

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:
@@ -10,4 +15,5 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 

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_filter/Filter/CurrentFilters.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { isEmpty, map, omitBy } from 'lodash'
+import { map } from 'lodash'
+import { isEmpty, omitBy } from '../../utilities/object'
 
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
@@ -40,13 +41,13 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                   className="filter"
                   key={`filter-${name}`}
               >
-                { value === true ? 
+                { value === true ?
                 <Title
                     dark={dark}
                     size={4}
                     tag="h4"
                     text={name}
-                /> : 
+                /> :
                 <div>
                   <Caption
                       dark={dark}
@@ -58,7 +59,7 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                       tag="h4"
                       text={value}
                   />
-                </div>    
+                </div>
                 }
               </div>
             ))}

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { isEmpty } from 'lodash'
+import { isEmpty } from '../../utilities/object'
 
 import Flex from '../../pb_flex/_flex'
 
@@ -46,7 +46,7 @@ const FilterSingle = ({
           paddingRight="lg"
           vertical="center"
       >
-        { children && 
+        { children &&
           <>
             <FiltersPopover
                 dark={dark}

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.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: 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 %>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -23,6 +23,13 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
     font-size: $font_small !important;
   }
+
+  &[class*=wrapped] {
+    height: max-content;
+    padding-top: $space-xxs;
+    padding-bottom: $space-xxs;
+  }
+
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
       background-color: mix($color_value, $card_light, 10%);
@@ -142,7 +149,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     height: 12px !important;
     width: 12px !important;
     padding-right: $space_xs;
-    + .pb_form_pill_text, + .pb_form_pill_tag, 
+    + .pb_form_pill_text, + .pb_form_pill_tag,
     + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
     + div .pb_form_pill_text, + div .pb_form_pill_tag {
       padding-left: 0;
@@ -171,7 +178,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     }
     .pb_form_pill_icon {
       padding-right: $space_xxs;
-      + .pb_form_pill_text, + .pb_form_pill_tag, 
+      + .pb_form_pill_text, + .pb_form_pill_tag,
       + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
       + div .pb_form_pill_text, + div .pb_form_pill_tag {
         padding-left: 0;

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -22,6 +22,7 @@ type FormPillProps = {
   data?: {[key: string]: string},
   tabIndex?: number,
   icon?: string,
+  wrapped?: boolean,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -38,6 +39,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     onClick = () => undefined,
     avatarUrl,
     closeProps = {},
+    wrapped,
     size = '',
     textTransform = 'none',
     color = "primary",
@@ -48,6 +50,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
 
   const iconClass = icon ? "_icon" : ""
   const closeIconSize = size === "small" ? "xs" : "sm"
+  const wrappedClass = wrapped ? "wrapped" : ""
 
   const filteredProps: FormPillProps = {...props}
   delete filteredProps.truncate
@@ -55,6 +58,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
     globalProps(filteredProps),
+    wrappedClass,
     className,
     size === 'small' ? 'small' : null,
     textTransform,