playbook_ui 14.20.0.pre.rc.2 → 14.21.0.pre.alpha.PLAY2140upgraderailsdependency8110

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

@@ -0,0 +1,56 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+const INDETERMINATE_MAIN_CHECKBOX_SELECTOR = "[data-pb-checkbox-indeterminate-main='true']"
+
+export default class PbCheckbox extends PbEnhancedElement {
+  static get selector() {
+    return INDETERMINATE_MAIN_CHECKBOX_SELECTOR
+  }
+
+  connect() {
+    const mainCheckboxWrapper = this.element;
+    const mainCheckbox = mainCheckboxWrapper.querySelector('input')
+    const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+
+    const updateMainCheckbox = () => {
+      // Count the number of checked child checkboxes
+      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
+      // Determine if the main checkbox should be in an indeterminate state
+      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
+      
+      // Set the main checkbox states
+      mainCheckbox.indeterminate = indeterminate;
+      mainCheckbox.checked = checkedCount > 0;
+
+      // Determine the main checkbox label based on the number of checked checkboxes
+      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+
+      // Determine the icon class to add and remove based on the number of checked checkboxes
+      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+
+      // Update main checkbox label
+      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
+      
+      // Add and remove the icon class to the main checkbox wrapper
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
+      
+      // Toggle the visibility of the checkbox icon based on the indeterminate state
+      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
+      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
+    };
+
+    // Set indeterminate icon on main checkbox if initial children checkboxes are checked
+    updateMainCheckbox();
+
+    this.element.querySelector('input').addEventListener('change', function() {
+      childCheckboxes.forEach(cb => cb.checked = this.checked);
+      updateMainCheckbox();
+    });
+
+    childCheckboxes.forEach(cb => {
+      cb.addEventListener('change', updateMainCheckbox);
+    });
+  }
+}

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_date_display.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  date_display: false,
+  end_date_id: "quick-pick-end-date",
+  end_date_name: "quick-pick-end-date",
+  mode: "range",
+  picker_id: "date-picker-quick-pick-date-display",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "quick-pick-start-date",
+  start_date_name: "quick-pick-start-date"
+}) %>
+

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -1,11 +1,11 @@
-import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
 import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
   items: [],
   dragData: { id: "", initialGroup: "" },
   isDragging: "",
-  activeContainer: "",
+  activeContainer: ""
 };
 
 const reducer = (state: InitialStateType, action: ActionType) => {
@@ -31,23 +31,9 @@ const reducer = (state: InitialStateType, action: ActionType) => {
       const { dragId, targetId } = action.payload;
       const newItems = [...state.items];
       const draggedItem = newItems.find(item => item.id === dragId);
-      const targetItem = newItems.find(item => item.id === targetId);
-    
-      if (!draggedItem || !targetItem || draggedItem.container !== targetItem.container) {
-        return state;
-      }
-
-      if (dragId === targetId) {
-        return state;
-      }
-
-      const draggedIndex = newItems.findIndex(item => item.id === dragId);
+      const draggedIndex = newItems.indexOf(draggedItem);
       const targetIndex = newItems.findIndex(item => item.id === targetId);
 
-      if (draggedIndex === -1 || targetIndex === -1) {
-        return state;
-      }
-
       newItems.splice(draggedIndex, 1);
       newItems.splice(targetIndex, 0, draggedItem);
 
@@ -62,11 +48,7 @@ const reducer = (state: InitialStateType, action: ActionType) => {
 const DragContext = createContext<any>({});
 
 export const DraggableContext = () => {
-  const context = useContext(DragContext);
-  if (context === undefined) {
-    throw new Error('DraggableContext must be used within a DraggableProvider');
-  }
-  return context;
+  return useContext(DragContext);
 };
 
 export const DraggableProvider = ({
@@ -81,11 +63,7 @@ export const DraggableProvider = ({
   dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
-  
-  // Store initial items in a ref to use if needed (for consistency when needed in future updates)
-  const initialItemsRef = useRef(initialItems);
-  const [isDragging, setIsDragging] = useState(false);
-  
+
   // Parse dropZone prop - handle both string format (backward compatibility) and object format
   let dropZoneType = 'ghost';
   let dropZoneColor = 'neutral';
@@ -108,64 +86,45 @@ export const DraggableProvider = ({
 
   useEffect(() => {
     dispatch({ type: 'SET_ITEMS', payload: initialItems });
-    initialItemsRef.current = initialItems;
   }, [initialItems]);
 
   useEffect(() => {
-    if (onReorder) {
-      onReorder(state.items);
-    }
-  }, [state.items, onReorder]);
+    onReorder(state.items);
+  }, [state.items]);
 
   const handleDragStart = (id: string, container: string) => {
-    setIsDragging(true);
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id, initialGroup: container } });
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
     dispatch({ type: 'SET_IS_DRAGGING', payload: id });
-    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     if (onDragStart) onDragStart(id, container);
   };
 
   const handleDragEnter = (id: string, container: string) => {
-    if (!isDragging || container !== state.activeContainer) return;
-
-    if (state.dragData.id === id) return;
-
-    const draggedItem = state.items.find(item => item.id === state.dragData.id);
-    const targetItem = state.items.find(item => item.id === id);
-
-    if (!draggedItem || !targetItem || draggedItem.container !== targetItem.container) {
-      return;
+    if (state.dragData.id !== id) {
+      dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
     }
-
-    dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
-    
     if (onDragEnter) onDragEnter(id, container);
   };
 
   const handleDragEnd = () => {
-    setIsDragging(false);
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     if (onDragEnd) onDragEnd();
   };
 
-  const handleDrop = (container: string) => {
-    const draggedItem = state.items.find(item => item.id === state.dragData.id);
-    
-    if (draggedItem && draggedItem.container !== container) {
-      dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId: state.dragData.id, container } });
-    }
+  const changeCategory = (itemId: string, container: string) => {
+    dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId, container } });
+  };
 
+  const handleDrop = (container: string) => {
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-
-    setIsDragging(false);
+    changeCategory(state.dragData.id, container);
     if (onDrop) onDrop(container);
   };
 
   const handleDragOver = (e: Event, container: string) => {
     e.preventDefault();
-    e.stopPropagation();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     if (onDragOver) onDragOver(e, container);
   };
@@ -185,7 +144,7 @@ export const DraggableProvider = ({
     handleDragEnd,
     handleDrop,
     handleDragOver
-  }), [state, dropZoneType, dropZoneColor, dropZoneDirection,  handleDragStart, handleDragEnter, handleDragEnd, handleDrop, handleDragOver]);
+  }), [state, dropZoneType, dropZoneColor, dropZoneDirection]);
 
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -15,7 +15,7 @@
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
-      height: 45px;
+      min-height: 45px;
       @media (hover: hover) {
         &:hover,
         &:active,

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle, useMemo } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
@@ -25,6 +25,8 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
+    closeOnSelection?: boolean;
+    formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
     defaultValue?: GenericObject;
@@ -33,6 +35,7 @@ type DropdownProps = {
     id?: string;
     isClosed?: boolean;
     label?: string;
+    multiSelect?: boolean;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
     separators?: boolean;
@@ -53,6 +56,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
+        closeOnSelection = true,
         dark = false,
         data = {},
         defaultValue = {},
@@ -61,6 +65,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         id,
         isClosed = true,
         label,
+        multiSelect = false,
+        formPillProps,
         onSelect,
         options,
         separators = true,
@@ -80,7 +86,20 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
     const [filterItem, setFilterItem] = useState("");
-    const [selected, setSelected] = useState<GenericObject>(defaultValue);
+    const initialSelected = useMemo(() => {
+      if (multiSelect) {
+        if (Array.isArray(defaultValue)) return defaultValue;
+        return defaultValue && Object.keys(defaultValue).length
+          ? [defaultValue]
+          : [];
+      }
+      return defaultValue || {};
+    }, [multiSelect, defaultValue]);
+
+    const [selected, setSelected] = useState<GenericObject | GenericObject[]>(
+      initialSelected
+    );
+
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
     const [hasContainerSubcomponent, setHasContainerSubcomponent] =
@@ -93,6 +112,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const inputWrapperRef = useRef(null);
     const dropdownContainerRef = useRef(null);
 
+    const selectedArray = Array.isArray(selected)
+    ? selected
+    : selected && Object.keys(selected).length
+    ? [selected]
+    : [];
+
     const { trigger, container, otherChildren } =
         separateChildComponents(children);
 
@@ -124,16 +149,23 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
     const optionsWithBlankSelection = blankSelectionOption.concat(options);
-    const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
-        const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
-        return String(label).toLowerCase().includes(filterItem.toLowerCase());
-    });
+
+    const availableOptions = useMemo(()=> {
+        if (!multiSelect) return optionsWithBlankSelection;
+        return optionsWithBlankSelection.filter((option: GenericObject) => !selectedArray.some((sel) => sel.label === option.label));
+    }, [optionsWithBlankSelection, selectedArray, multiSelect]);
+
+    const filteredOptions = useMemo(() => {
+          return availableOptions.filter((opt: GenericObject) =>
+            String(opt.label).toLowerCase().includes(filterItem.toLowerCase())
+          );
+        }, [availableOptions, filterItem]);
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
         if (!isDropDownClosed) {
             let newIndex = 0;
-            if (selected && selected?.label) {
+            if (selected && !Array.isArray(selected) && selected.label) {
                 const selectedIndex = filteredOptions.findIndex((option: GenericObject) => option.label === selected.label);
                 if (selectedIndex >= 0) {
                     newIndex = selectedIndex;
@@ -149,12 +181,33 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setIsDropDownClosed(false);
     };
 
-    const handleOptionClick = (selectedItem: GenericObject) => {
-        setSelected(selectedItem);
-        setFilterItem("");
-        setIsDropDownClosed(true);
-        onSelect && onSelect(selectedItem);
-    };
+
+      const handleOptionClick = (clickedItem: GenericObject) => {
+                if (multiSelect) {
+                    setSelected((prev) => {
+                       const list = prev as GenericObject[];
+                       const exists = list.find((option) => option.value === clickedItem.value);
+                       const next = exists
+                       ? list.filter((option) => option.value !== clickedItem.value)
+                           : [...list, clickedItem];
+                   onSelect && onSelect(next);
+                       return next;
+                   });
+                   setFilterItem("");
+                   // Only close dropdown if closeOnSelection is true
+                   if (closeOnSelection) {
+                       setIsDropDownClosed(true);
+                   }
+               } else {
+                   setSelected(clickedItem);
+                   setFilterItem("");
+                   onSelect && onSelect(clickedItem);
+                   // Only close dropdown if closeOnSelection is true
+                   if (closeOnSelection) {
+                       setIsDropDownClosed(true);
+                   }
+            }
+             };
 
     const handleWrapperClick = () => {
         autocomplete && inputRef?.current?.focus();
@@ -162,9 +215,14 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     };
 
     const handleBackspace = () => {
+      if (multiSelect) {
+        setSelected([]);
+        onSelect && onSelect([]);
+      } else {
         setSelected({});
         onSelect && onSelect(null);
         setFocusedOptionIndex(-1);
+      }
     };
 
     const componentsToRender = prepareSubcomponents({
@@ -178,12 +236,17 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     });
 
     useImperativeHandle(ref, () => ({
-        clearSelected: () => {
-            setSelected({});
-            setFilterItem("");
-            setIsDropDownClosed(true);
-            onSelect && onSelect(null);
-        },
+      clearSelected: () => {
+        if (multiSelect) {
+          setSelected([]);
+          onSelect && onSelect([]);
+        } else {
+          setSelected({});
+          onSelect && onSelect(null);
+        }
+        setFilterItem("");
+        setIsDropDownClosed(true);
+      },
     }));
 
     return (
@@ -197,10 +260,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             <DropdownContext.Provider
                 value={{
                     autocomplete,
+                    closeOnSelection,
                     dropdownContainerRef,
                     filteredOptions,
                     filterItem,
                     focusedOptionIndex,
+                    formPillProps,
                     handleBackspace,
                     handleChange,
                     handleOptionClick,
@@ -209,6 +274,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
+                    multiSelect,
+                    onSelect,
                     optionsWithBlankSelection,
                     selected,
                     setFocusedOptionIndex,

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownCloseOnSelect = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];
+
+
+  return (
+  <div>
+    <Dropdown
+        closeOnSelection={false}
+        label="Default"
+        options={options}
+        {...props}
+    />
+    <br />
+    <Dropdown
+        closeOnSelection={false}
+        label="Multi Select"
+        multiSelect
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownCloseOnSelect

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.md

@@ -0,0 +1 @@
+By default, the dropdown menu will close when a selection is made. You can prevent this behavior by using the `closeOnSelection` prop, which will leave the menu open after a selection is made when set to 'false'.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb

@@ -0,0 +1,31 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<% 
+  options2 = [
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'Mexico', value: 'Mexico', id: 'mx' },
+    { label: 'Brazil', value: 'Brazil', id: 'br' },
+    { label: 'Argentina', value: 'Argentina', id: 'ar' },
+    { label: 'Colombia', value: 'Colombia', id: 'co' },
+    { label: 'Chile', value: 'Chile', id: 'cl' },
+    { label: 'Peru', value: 'Peru', id: 'pe' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) %>
+
+<script>
+  document.addEventListener("pb:dropdown:selected", (e) => {
+    const option   = e.detail;
+    const dropdown = e.target;
+    console.log("Selected option:", option);
+})
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.md

@@ -0,0 +1,5 @@
+This kit's `options` prop requires an array of objects, each of which will be used as the selectable options within the dropdown. Each option object can support any number of key-value pairs, but each MUST contain `label`, `value` and `id`. 
+
+The kit also comes with a custom event called "pb:dropdown:selected" which updates dynamically with the selection as it changes. See code snippet to see this in action.
+
+In addition, a data attribute called `data-option-selected` with the selection is also rendered on the parent dropdown div.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownMultiSelect = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+        label: "United Kingdom",
+        value: "United Kingdom",
+    },  
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    },
+    {
+      label: "India",
+      value: "India",
+    },
+    {
+      label: "Australia",
+      value: "Australia",
+    },
+    {
+      label: "New Zealand",
+      value: "New Zealand",
+    },
+    {
+      label: "Italy",
+      value: "Italy",
+    },
+    {
+      label: "Spain",
+      value: "Spain",
+    }
+  ];  
+
+  return (
+  <div>
+    <Dropdown
+        multiSelect
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownMultiSelect

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md

@@ -0,0 +1,3 @@
+`multiSelect` is a boolean prop that if set to true will allow for multiple options to be selected from the Dropdown.
+
+`multiSelect` is set to false by default.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownMultiSelectDisplay = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+        label: "United Kingdom",
+        value: "United Kingdom",
+    },  
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    },
+    {
+      label: "India",
+      value: "India",
+    },
+    {
+      label: "Australia",
+      value: "Australia",
+    },
+    {
+      label: "New Zealand",
+      value: "New Zealand",
+    },
+    {
+      label: "Italy",
+      value: "Italy",
+    },
+    {
+      label: "Spain",
+      value: "Spain",
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        formPillProps={{size:"small", color:"neutral"}}
+        multiSelect
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownMultiSelectDisplay

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.md

@@ -0,0 +1,3 @@
+By default, the `multiSelect` prop will render selected options as the default FormPill. `FormPillProps` however can be used to customize these Pills with any props that exist for the FormPill. 
+
+This prop must be an object that contains valid FormPill props. For a full list of FormPill props, see [here](https://playbook.powerapp.cloud/kits/form_pill/react).

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb

@@ -0,0 +1,20 @@
+<%
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
+    { label: 'Australia', value: 'Australia', id: 'au' },
+    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
+    { label: 'Germany', value: 'Germany', id: 'de' },
+    { label: 'France', value: 'France', id: 'fr' },
+    { label: 'Italy', value: 'Italy', id: 'it' },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: {
+  options: options,
+  multi_select: true,
+  form_pill_props: { size:"small", color:"neutral" },
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.md

@@ -0,0 +1 @@
+By default, the `multi_select` prop will render selected options as the default form_pill. `form_pill_props` however can be used to customize these Pills with props that exist for the form_pill. Currently, only the '[color](https://playbook.powerapp.cloud/kits/form_pill/rails#form-pill-colors)' and '[size](https://playbook.powerapp.cloud/kits/form_pill/rails#form-pill-size)' props are supported as shown here.