playbook_ui 13.30.0.pre.alpha.20240515remotebuildkitconversion3150 → 13.30.0

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx

@@ -17,11 +17,10 @@ type DraggableItemProps = {
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
-  dragId?: string;
 };
 
 const DraggableItem = (props: DraggableItemProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id } = props;
 
   const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
     DraggableContext();
@@ -32,7 +31,7 @@ const DraggableItem = (props: DraggableItemProps) => {
 
   const classes = classnames(
     buildCss("pb_draggable_item"),
-    `${isDragging === dragId ? "is_dragging" : ""}`,
+    `${isDragging === id ? "is_dragging" : ""}`,
     globalProps(props),
     className
   );
@@ -45,10 +44,10 @@ const DraggableItem = (props: DraggableItemProps) => {
         className={classes}
         draggable
         id={id}
-        key={dragId}
+        key={id}
         onDragEnd={() => handleDragEnd()}
-        onDragEnter={() => handleDragEnter(dragId, container)}
-        onDragStart={() => handleDragStart(dragId, container)}
+        onDragEnter={() => handleDragEnter(id, container)}
+        onDragStart={() => handleDragStart(id, container)}
     >
       {children}
     </div>

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

@@ -96,7 +96,6 @@
         width: 100%;
       }
     }
-
     .close {
       display: none;
       animation-name: fadeOut;
@@ -112,17 +111,6 @@
       animation-timing-function: linear;
       animation-fill-mode: forwards;
     }
-
-    &.error {
-      [class*=pb_body_kit] {
-        margin-top: $space_xs / 2;
-      }
-
-      [class*="dropdown_trigger_wrapper"] {
-        border-color: $error;
-        box-shadow: none !important;
-      }
-    }
   }
 
   &.dark {
@@ -150,12 +138,6 @@
           color: $white;
         }
       }
-
-      &.error {
-        [class*="dropdown_trigger_wrapper"] {
-          border-color: $error_dark;
-        }
-      }
     }
     .pb_dropdown_container {
       background-color: $bg_dark !important;

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

@@ -4,7 +4,6 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../uti
 import { globalProps } from "../utilities/globalProps";
 import { GenericObject } from "../types";
 
-import Body from '../pb_body/_body';
 import Caption from "../pb_caption/_caption";
 
 import DropdownContainer from "./subcomponents/DropdownContainer";
@@ -14,245 +13,236 @@ import DropdownTrigger from "./subcomponents/DropdownTrigger";
 import useDropdown from "./hooks/useDropdown";
 
 import {
-    separateChildComponents,
-    prepareSubcomponents,
-    handleClickOutside,
+  separateChildComponents,
+  prepareSubcomponents,
+  handleClickOutside,
 } from "./utilities";
 
 type DropdownProps = {
-    aria?: { [key: string]: string };
-    autocomplete?: boolean;
-    children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
-    className?: string;
-    dark?: boolean;
-    data?: { [key: string]: string };
-    error?: string;
-    htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
-    id?: string;
-    isClosed?: boolean;
-    label?: string;
-    onSelect?: (arg: GenericObject) => null;
-    options: GenericObject;
-    triggerRef?: any;
+  aria?: { [key: string]: string };
+  autocomplete?: boolean;
+  children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
+  className?: string;
+  dark?: boolean;
+  data?: { [key: string]: string };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string;
+  isClosed?: boolean;
+  label?: string;
+  onSelect?: (arg: GenericObject) => null;
+  options: GenericObject;
+  triggerRef?: any;
 };
 
 const Dropdown = (props: DropdownProps) => {
-    const {
-        aria = {},
-        autocomplete = false,
-        children,
-        className,
-        dark = false,
-        data = {},
-        error,
-        htmlOptions = {},
-        id,
-        isClosed = true,
-        label,
-        onSelect,
-        options,
-        triggerRef
-    } = props;
-
-    const ariaProps = buildAriaProps(aria);
-    const dataProps = buildDataProps(data);
-    const htmlProps = buildHtmlProps(htmlOptions);
-    const classes = classnames(
-        buildCss("pb_dropdown"),
-        globalProps(props),
-        className
-    );
-
-    const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
-
-    const [filterItem, setFilterItem] = useState("");
-    const [selected, setSelected] = useState<GenericObject>({});
-    const [isInputFocused, setIsInputFocused] = useState(false);
-    const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
-    const [hasContainerSubcomponent, setHasContainerSubcomponent] =
-        useState(true);
-    //state for keyboard events
-    const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
-
-    const dropdownRef = useRef(null);
-    const inputRef = useRef(null);
-    const inputWrapperRef = useRef(null);
-    const dropdownContainerRef = useRef(null);
-
-    const { trigger, container, otherChildren } =
-        separateChildComponents(children);
-
-    useEffect(() => {
-        // Set the parent element of the trigger to relative to allow for absolute positioning of the dropdown
-        //Only needed for when useDropdown hook used with external trigger
-        if (triggerRef?.current) {
-            const parentElement = triggerRef.current.parentNode;
-            if (parentElement) {
-                parentElement.style.position = 'relative';
+  const {
+    aria = {},
+    autocomplete = false,
+    children,
+    className,
+    dark = false,
+    data = {},
+    htmlOptions = {},
+    id,
+    isClosed = true,
+    label,
+    onSelect,
+    options,
+    triggerRef
+  } = props;
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(
+    buildCss("pb_dropdown"),
+    globalProps(props),
+    className
+  );
+
+  const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
+
+  const [filterItem, setFilterItem] = useState("");
+  const [selected, setSelected] = useState<GenericObject>({});
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
+  const [hasContainerSubcomponent, setHasContainerSubcomponent] =
+    useState(true);
+  //state for keyboard events
+  const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
+
+  const dropdownRef = useRef(null);
+  const inputRef = useRef(null);
+  const inputWrapperRef = useRef(null);
+  const dropdownContainerRef = useRef(null);
+
+  const { trigger, container, otherChildren } =
+    separateChildComponents(children);
+
+  useEffect(() => {
+    // Set the parent element of the trigger to relative to allow for absolute positioning of the dropdown
+    //Only needed for when useDropdown hook used with external trigger
+    if (triggerRef?.current) {
+      const parentElement = triggerRef.current.parentNode;
+      if (parentElement) {
+          parentElement.style.position = 'relative';
+      }
+  }
+  // Handle clicks outside the dropdown
+  const handleClick = handleClickOutside({
+    inputWrapperRef,
+    dropdownContainerRef,
+    setIsDropDownClosed,
+    setFocusedOptionIndex,
+    setIsInputFocused,
+  });
+  
+    window.addEventListener("click", handleClick);
+    return () => {
+      window.removeEventListener("click", handleClick);
+    };
+  }, []);
+
+  useEffect(() => {
+    setHasTriggerSubcomponent(!!trigger);
+    setHasContainerSubcomponent(!!container);
+  }, []);
+
+// dropdown to toggle with external control
+  useEffect(()=> {
+    setIsDropDownClosed(isClosed)
+   },[isClosed])
+
+  const filteredOptions = options?.filter((option: GenericObject) => {
+    const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
+    return String(label).toLowerCase().includes(filterItem.toLowerCase());
+  }
+  );
+
+// For keyboard accessibility: Set focus within dropdown to selected item if it exists
+  useEffect(() => {
+    if (!isDropDownClosed) { 
+        let newIndex = 0; 
+        if (selected && selected?.label) {
+            const selectedIndex = filteredOptions.findIndex((option: GenericObject) => option.label === selected.label);
+            if (selectedIndex >= 0) {
+                newIndex = selectedIndex;
             }
         }
-        // Handle clicks outside the dropdown
-        const handleClick = handleClickOutside({
-            inputWrapperRef,
-            dropdownContainerRef,
-            setIsDropDownClosed,
-            setFocusedOptionIndex,
-            setIsInputFocused,
-        });
-
-        window.addEventListener("click", handleClick);
-        return () => {
-            window.removeEventListener("click", handleClick);
-        };
-    }, []);
-
-    useEffect(() => {
-        setHasTriggerSubcomponent(!!trigger);
-        setHasContainerSubcomponent(!!container);
-    }, []);
-
-    // dropdown to toggle with external control
-    useEffect(() => {
-        setIsDropDownClosed(isClosed)
-    }, [isClosed])
-
-    const filteredOptions = options?.filter((option: GenericObject) => {
-        const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
-        return String(label).toLowerCase().includes(filterItem.toLowerCase());
+        setFocusedOptionIndex(newIndex);
     }
-    );
-
-    // For keyboard accessibility: Set focus within dropdown to selected item if it exists
-    useEffect(() => {
-        if (!isDropDownClosed) {
-            let newIndex = 0;
-            if (selected && selected?.label) {
-                const selectedIndex = filteredOptions.findIndex((option: GenericObject) => option.label === selected.label);
-                if (selectedIndex >= 0) {
-                    newIndex = selectedIndex;
-                }
-            }
-            setFocusedOptionIndex(newIndex);
+}, [isDropDownClosed]);
+
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFilterItem(e.target.value);
+    setIsDropDownClosed(false);
+  };
+
+  const handleOptionClick = (selectedItem: GenericObject) => {
+    setSelected(selectedItem);
+    setFilterItem("");
+    setIsDropDownClosed(true);
+    onSelect && onSelect(selectedItem);
+  };
+
+  const handleWrapperClick = () => {
+    autocomplete && inputRef.current.focus();
+    toggleDropdown();
+  };
+
+  const handleBackspace = () => {
+    setSelected({});
+    onSelect && onSelect(null);
+    setFocusedOptionIndex(-1);
+  };
+
+  const componentsToRender = prepareSubcomponents({
+    children,
+    hasTriggerSubcomponent,
+    hasContainerSubcomponent,
+    trigger,
+    container,
+    otherChildren,
+    dark
+  });
+
+
+  return (
+    <div {...ariaProps} 
+        {...dataProps} 
+        {...htmlProps}
+        className={classes} 
+        id={id}
+        style={triggerRef ? { position: "absolute"} : { position: "relative"}}
+    >
+      <DropdownContext.Provider
+          value={{
+              autocomplete,
+              dropdownContainerRef,
+              filteredOptions,
+              filterItem,
+              focusedOptionIndex,
+              handleBackspace,
+              handleChange,
+              handleOptionClick,
+              handleWrapperClick,
+              inputRef,
+              inputWrapperRef,
+              isDropDownClosed,
+              isInputFocused,
+              options,
+              selected,
+              setFocusedOptionIndex,
+              setIsDropDownClosed,
+              setIsInputFocused,
+              setSelected,
+              toggleDropdown,
+              triggerRef
+          }}
+      >
+        {label &&
+        <Caption
+            dark={dark}
+            marginBottom="xs"
+            text={label}
+        />
         }
-    }, [isDropDownClosed]);
-
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setFilterItem(e.target.value);
-        setIsDropDownClosed(false);
-    };
-
-    const handleOptionClick = (selectedItem: GenericObject) => {
-        setSelected(selectedItem);
-        setFilterItem("");
-        setIsDropDownClosed(true);
-        onSelect && onSelect(selectedItem);
-    };
-
-    const handleWrapperClick = () => {
-        autocomplete && inputRef.current.focus();
-        toggleDropdown();
-    };
-
-    const handleBackspace = () => {
-        setSelected({});
-        onSelect && onSelect(null);
-        setFocusedOptionIndex(-1);
-    };
-
-    const componentsToRender = prepareSubcomponents({
-        children,
-        hasTriggerSubcomponent,
-        hasContainerSubcomponent,
-        trigger,
-        container,
-        otherChildren,
-        dark
-    });
-
-
-    return (
-        <div {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            id={id}
-            style={triggerRef ? { position: "absolute" } : { position: "relative" }}
-        >
-            <DropdownContext.Provider
-                value={{
-                    autocomplete,
-                    dropdownContainerRef,
-                    filteredOptions,
-                    filterItem,
-                    focusedOptionIndex,
-                    handleBackspace,
-                    handleChange,
-                    handleOptionClick,
-                    handleWrapperClick,
-                    inputRef,
-                    inputWrapperRef,
-                    isDropDownClosed,
-                    isInputFocused,
-                    options,
-                    selected,
-                    setFocusedOptionIndex,
-                    setIsDropDownClosed,
-                    setIsInputFocused,
-                    setSelected,
-                    toggleDropdown,
-                    triggerRef
-                }}
-            >
-                {label &&
-                    <Caption
-                        dark={dark}
-                        marginBottom="xs"
-                        text={label}
-                    />
-                }
-                <div className={`dropdown_wrapper ${error ? 'error' : ''}`}
-                    onBlur={() => {
-                        // Debounce to delay the execution to prevent jumpiness in Focus state
-                        setTimeout(() => {
-                            if (!dropdownRef.current.contains(document.activeElement)) {
-                                setIsInputFocused(false);
-                            }
-                        }, 0);
-                    }}
-                    onFocus={() => setIsInputFocused(true)}
-                    ref={dropdownRef}
-                >
-                    {children ? (
-                        <>
-                            {componentsToRender.map((component, index) => (
-                                <React.Fragment key={index}>{component}</React.Fragment>
-                            ))}
-                        </>
-                    ) : (
-                        <>
-                            <DropdownTrigger />
-                            <DropdownContainer>
-                                {options &&
-                                    options?.map((option: GenericObject) => (
-                                        <Dropdown.Option key={option.id}
-                                            option={option}
-                                        />
-                                    ))}
-                            </DropdownContainer>
-                        </>
-                    )}
-
-                    {error &&
-                        <Body
-                            status="negative"
-                            text={error}
-                        />
+        <div className="dropdown_wrapper" 
+            onBlur={() => {
+                // Debounce to delay the execution to prevent jumpiness in Focus state
+                setTimeout(() => {
+                    if (!dropdownRef.current.contains(document.activeElement)) {
+                        setIsInputFocused(false);
                     }
-                </div>
-            </DropdownContext.Provider>
+                }, 0);
+            }}
+            onFocus={() => setIsInputFocused(true)}
+            ref={dropdownRef}
+        >
+          {children ? (
+            <>
+              {componentsToRender.map((component, index) => (
+                <React.Fragment key={index}>{component}</React.Fragment>
+              ))}
+            </>
+          ) : (
+            <>
+              <DropdownTrigger />
+              <DropdownContainer>
+                {options &&
+                  options?.map((option: GenericObject) => (
+                    <Dropdown.Option key={option.id} 
+                        option={option}
+                    /> 
+                  ))}
+              </DropdownContainer>
+            </>
+          )}
         </div>
-    )
+      </DropdownContext.Provider>
+    </div>
+  )
 };
 
 Dropdown.Option = DropdownOption;

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

@@ -7,7 +7,6 @@ examples:
   - dropdown_with_custom_display_rails: Custom Display
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
-  - dropdown_error: Dropdown with Error
 
   react:
   - dropdown_default: Default
@@ -17,7 +16,6 @@ examples:
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
-  - dropdown_error: Dropdown with Error
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

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

@@ -8,5 +8,4 @@ export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_pa
 export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
 export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
 export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
-export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
-export { default as DropdownError } from './_dropdown_error.jsx'
+export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -7,22 +7,20 @@
     <% if object.label.present? %>
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
-    <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value=""/>
-        <% if content.present? %>
-            <%= content.presence %>
-            <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
-        <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger") %>
-            <%= pb_rails("dropdown/dropdown_container") do %>
-                <% if object.options.present? %>
-                    <% object.options.each do |option| %>
-                        <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
-                    <% end %>
+    <div class="dropdown_wrapper" style="position: relative">
+    <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value=""/>
+    <% if content.present? %>
+        <%= content.presence %>
+    <% else %>
+        <%= pb_rails("dropdown/dropdown_trigger") %>
+        <%= pb_rails("dropdown/dropdown_container") do %>
+            <% if object.options.present? %>
+                <% object.options.each do |option| %>
+                    <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
                 <% end %>
             <% end %>
-
-            <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
         <% end %>
+    <% end %>
     </div>
 <% end %>
+  

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -7,7 +7,6 @@ module Playbook
                      default: []
       prop :label, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
-      prop :error, type: Playbook::Props::String
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)
@@ -16,12 +15,6 @@ module Playbook
       def classname
         generate_classname("pb_dropdown")
       end
-
-    private
-
-      def error_class
-        error.present? ? " error" : ""
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -170,7 +170,7 @@ test('generated custom Trigger', () => {
         options={options}
     >
       <Dropdown.Trigger>
-          <Icon icon="elephant" />
+          <Icon icon="home" />
       </Dropdown.Trigger>
       {options.map((option) => (
       <Dropdown.Option key={option.id} 
@@ -182,7 +182,7 @@ test('generated custom Trigger', () => {
 
   const kit = screen.getByTestId(testId)
   const trigger = kit.querySelector('.pb_dropdown_trigger')
-  const customTrigger = trigger.querySelector('.fa-elephant.pb_icon_kit.fa-fw')
+  const customTrigger = trigger.querySelector('.fa-home.pb_icon_kit.fa-fw')
   expect(customTrigger).toBeInTheDocument()
 })
 
@@ -204,19 +204,4 @@ test('selected option on click', () => {
   const option = kit.querySelector('.pb_dropdown_option_list')
   option.click()
   expect(option).toHaveClass('pb_dropdown_option_selected')
-})
-
-test('show error message', () => {
-  const errorMessage = 'Please make a valid selection'
-
-  render (
-    <Dropdown
-        data={{ testid: testId }}
-        error={errorMessage}
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveTextContent(errorMessage)
 })