playbook_ui 14.19.0 → 14.20.0.pre.alpha.PLAY22297977

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { render, screen } from "../utilities/test-utils"
+import { render, screen, fireEvent } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
 
@@ -263,4 +263,110 @@ test("searchbar prop to render TextInput in container", () => {
   const kit = screen.getByTestId(testId)
   const searchbar = kit.querySelector('.pb_text_input_kit')
   expect(searchbar).toBeInTheDocument()
-})
+})
+
+test("MultiSelect prop to allow multiple selections + add correct Form Pills", () => {
+  render(
+    <Dropdown 
+        data={{ testid: testId }} 
+        multiSelect 
+        options={options} 
+    />
+ );
+
+  const kit = screen.getByTestId(testId);
+  const option = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+  fireEvent.click(option[0]); // Select first option
+  fireEvent.click(option[1]); // Select second option
+  const formPills = kit.querySelectorAll(".pb_form_pill_kit_primary");
+  expect(formPills.length).toBe(2);
+  expect(formPills[0]).toHaveTextContent("United States");
+  expect(formPills[1]).toHaveTextContent("Canada");
+});
+
+ test("hides each selected option from the dropdown", () => {
+
+    render(
+      <Dropdown 
+          data={{ testid: testId }} 
+          multiSelect 
+          options={options} 
+      />
+    );
+
+  const kit = screen.getByTestId(testId);
+  const option = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+  const firstOpt = options[0].label
+  fireEvent.click(option[0]);
+  const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+  expect(option2[0]).not.toHaveTextContent(firstOpt)
+  })
+
+test("renders form pills inside trigger", () => {
+      render(
+        <Dropdown 
+            data={{ testid: testId }} 
+            multiSelect 
+            options={options} 
+        />
+      );
+
+  const kit = screen.getByTestId(testId)
+  const option = kit.querySelector('.pb_dropdown_option_list')
+  fireEvent.click(option)
+  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
+  expect(formPill).toBeInTheDocument()
+  })
+
+test("multiSelect and autocomplete to work together", () => {
+  render (
+    <Dropdown
+        autocomplete
+        data={{ testid: testId }}
+        multiSelect
+        options={options}
+    />   
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('.dropdown_input')
+  expect(input).toBeInTheDocument()
+    const option = kit.querySelector('.pb_dropdown_option_list')
+  fireEvent.click(option)
+  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
+  expect(formPill).toBeInTheDocument()
+})
+
+test("renders form pills with size and color", () => {
+      render(
+        <Dropdown 
+            data={{ testid: testId }} 
+            formPillProps={{ size: "small", color: "neutral" }}
+            multiSelect 
+            options={options} 
+        />
+      );
+
+  const kit = screen.getByTestId(testId)
+  const option = kit.querySelector('.pb_dropdown_option_list')
+  fireEvent.click(option)
+  const formPill = kit.querySelector(".pb_form_pill_kit_neutral")
+  expect(formPill).toBeInTheDocument()
+  expect(formPill).toHaveClass("small")
+  })
+
+test("defaultValue works with multiSelect", () => {
+    render(
+      <Dropdown
+          data={{ testid: testId }}
+          defaultValue={[options[0], options[2]]}
+          multiSelect
+          options={options}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelectorAll(".pb_form_pill_kit_primary")).toHaveLength(2)
+    const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+    const firstOpt = options[0].label
+    expect(option2[0]).not.toHaveTextContent(firstOpt)
+  })

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

@@ -14,7 +14,7 @@
         padding_y:"xs",
         html_options: {tabindex:"0"}
         }) do %>
-        <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("flex/flex_item", props: { fixed_size: object.multi_select ? "85%" : "" }) do %>
             <%= pb_rails("flex", props: {align: "center"}) do %>
                 <% if object.custom_display.present?  %>
                     <%= pb_rails("flex", props: {align: "center"}) do %>
@@ -24,23 +24,44 @@
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
                     <% end %>
                 <% else %>
-                    <% if object.autocomplete %>
-                        <input
-                            data-dropdown-autocomplete
-                            class="dropdown_input"
-                            type="text"
-                            placeholder="<%= object.placeholder || 'Select…' %>"
-                            autocomplete="off"
-                        />
+                    <% if object.multi_select %>
+                        <%= pb_rails("flex", props: { align: "center", wrap: true }) do %>
+                            <%= pb_rails("flex", props: { id:"dropdown_pills_wrapper", wrap: true }) do %>
+                            <% end %>   
+                        <% if object.autocomplete %>
+                                <input
+                                    data-dropdown-autocomplete
+                                    class="dropdown_input"
+                                    type="text"
+                                    placeholder="<%= object.placeholder || 'Select…' %>"
+                                    autocomplete="off"
+                                />
+                            <% else %>
+                                <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display_multi_select"}) %>
+                            <% end %>
+                        <% end %>
                     <% else %>
-                        <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                        <% if object.autocomplete %>
+                            <input
+                                data-dropdown-autocomplete
+                                class="dropdown_input"
+                                type="text"
+                                placeholder="<%= object.placeholder || 'Select…' %>"
+                                autocomplete="off"
+                            />
+                        <% else %>
+                            <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                        <% end %>
                     <% end %>
                 <% end %>
             <% end %>
         <% end %>
-            <%= pb_rails("body", props: {display: "flex"}) do  %>
-                <%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", id: "dropdown_open_icon"}) %>
-                <%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", id: "dropdown_close_icon"}) %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("body", props: {display: "flex", align_items:"center" }) do  %>
+                    <%= pb_rails("icon", props: {icon: "times", cursor: "pointer", size:"sm", id: "dropdown_clear_icon", padding_right:"xs" }) %>
+                    <%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", id: "dropdown_open_icon"}) %>
+                    <%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", id: "dropdown_close_icon"}) %>
+                <% end %>
             <% end %>
     <% end %>
     <% end %>

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

@@ -11,6 +11,8 @@ module Playbook
       prop :custom_display
       prop :autocomplete, type: Playbook::Props::Boolean,
                           default: false
+      prop :multi_select, type: Playbook::Props::Boolean,
+                          default: false
 
       def data
         Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)
@@ -25,7 +27,7 @@ module Playbook
       end
 
       def trigger_wrapper_classes
-        generate_classname("dropdown_trigger_wrapper", ("select_only" unless autocomplete))
+        generate_classname("dropdown_trigger_wrapper", ("select_only" unless autocomplete || multi_select))
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx

@@ -22,12 +22,6 @@ const {
     }
 
     switch (e.key) {
-    case "Backspace":
-    case "Delete":
-      if (autocomplete) {
-      handleBackspace();
-      }
-      break;
     case "ArrowDown": {
       e.preventDefault();
       setIsDropDownClosed(false);