playbook_ui 13.27.0 → 13.28.0.pre.alpha.PBNTR297gradientoverlay3029

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

@@ -0,0 +1,9 @@
+examples:
+  
+  
+  react:
+  - draggable_default: Default
+  - draggable_with_cards: Draggable with Cards
+  - draggable_multiple_containers: Dragging Across Multiple Containers
+  
+  

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

@@ -0,0 +1,3 @@
+export { default as DraggableDefault } from './_draggable_default.jsx'
+export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
+export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -0,0 +1,65 @@
+import React, {useState} from "react"
+import { render, screen } from "../utilities/test-utils"
+
+import { Draggable, DraggableProvider, SelectableList } from '../'
+
+const testId = 'draggable'
+
+const data = [
+  {
+    id: "1",
+    text: "Task 1",
+  },
+  {
+    id: "2",
+    text: "Task 2",
+  },
+  {
+    id: "3",
+    text: "Task 3",
+  },
+  {
+    id: "4",
+    text: "Task 4",
+  },
+];
+
+
+const DefaultDraggableKit = () => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <DraggableProvider
+        initialItems={data}
+        onChange={(items) => setInitialState(items)}
+    >
+      <Draggable
+          data={{ testid: testId }}
+          draggableItems={data}
+          onDragChange={(items) => setInitialItems(items)}
+      >
+        <Draggable.Container>
+          <SelectableList variant="checkbox">
+            {initialState.map(({ id, text }) => (
+              <Draggable.Item id={id} 
+                  key={id}
+              >
+                <SelectableList.Item label={text} 
+                    name={id} 
+                    value={id} 
+                />
+              </Draggable.Item>
+            ))}
+          </SelectableList>
+        </Draggable.Container>
+      </Draggable>
+    </DraggableProvider>
+  );
+};
+
+test('generated default kit and classname', () => {
+render(<DefaultDraggableKit/>)
+const kit = screen.getByTestId(testId)
+expect(kit).toBeInTheDocument()
+expect(kit).toHaveClass('pb_draggable')
+})

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

@@ -0,0 +1,54 @@
+import React from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import { DraggableContext } from "../context";
+
+type DraggableContainerProps = {
+  aria?: { [key: string]: string };
+  children?: React.ReactNode;
+  className?: string;
+  container?: any;
+  data?: { [key: string]: string };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string;
+};
+
+const DraggableContainer = (props: DraggableContainerProps) => {
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = props;
+
+  const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+
+  const classes = classnames(
+    buildCss("pb_draggable_container"),
+    `${activeContainer === container ? "active" : ""}`,
+    globalProps(props),
+    className
+  );
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+        key={container}
+        onDragOver={(e) => handleDragOver(e, container)}
+        onDrop={() => handleDrop(container)}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default DraggableContainer;

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

@@ -0,0 +1,57 @@
+import React from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import { DraggableContext } from "../context";
+
+type DraggableItemProps = {
+  aria?: { [key: string]: string };
+  children?: React.ReactNode;
+  className?: string;
+  container?: any;
+  data?: { [key: string]: string };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string;
+};
+
+const DraggableItem = (props: DraggableItemProps) => {
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id } = props;
+
+  const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
+    DraggableContext();
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+
+  const classes = classnames(
+    buildCss("pb_draggable_item"),
+    `${isDragging === id ? "is_dragging" : ""}`,
+    globalProps(props),
+    className
+  );
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        draggable
+        id={id}
+        key={id}
+        onDragEnd={() => handleDragEnd()}
+        onDragEnter={() => handleDragEnter(id, container)}
+        onDragStart={() => handleDragStart(id, container)}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default DraggableItem;

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

@@ -63,6 +63,10 @@
       width: 100%;
 
       [class*="pb_dropdown_option"] {
+        padding-left: $space_sm;
+        padding-right: $space_sm;
+        padding-top: $space_xs;
+        padding-bottom: $space_xs;
         cursor: pointer;
         &:hover {
           background-color: $border_light;
@@ -77,8 +81,9 @@
         }
         &[class*="selected"] {
           background-color: $primary;
+          color: $white;
           [class^="pb_body"],
-          [class^="pb_title_kit"] {
+          [class^="pb_title_kit"], a {
             color: $white !important;
           }
           &:hover {

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";
@@ -114,8 +113,10 @@ const Dropdown = (props: DropdownProps) => {
     setIsDropDownClosed(isClosed)
    },[isClosed])
 
-  const filteredOptions = options?.filter((option: GenericObject) =>
-    option.label.toLowerCase().includes(filterItem.toLowerCase())
+  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
@@ -233,9 +234,7 @@ const Dropdown = (props: DropdownProps) => {
                   options?.map((option: GenericObject) => (
                     <Dropdown.Option key={option.id} 
                         option={option}
-                    >
-                      <Body text={option.label} />
-                    </Dropdown.Option>
+                    /> 
                   ))}
               </DropdownContainer>
             </>

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

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States' },
-    { label: 'Canada', value: 'Canada' },
-    { label: 'Pakistan', value: 'Pakistan' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

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

@@ -1 +1 @@
-The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.
+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` and `value`.

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

@@ -1,7 +1,6 @@
-The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
+The dropdown is built using all of the following subcomponents:
 
-`Dropdown. Trigger` / `dropdown/dropdown_trigger`
-`Dropdown.Container`/ `dropdown/dropdown_container`
-`Dropdown.Option` / `dropdown/dropdown_option`
-
-See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props. 
+`Dropdown.Trigger` is the UI component that users interact with to toggle the dropdown. 
+`Dropdown.Container` is the floating container that wraps the list of dropdown options. 
+`Dropdown.Option` renders options that are passed to the container. 
+Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure.html.erb → _dropdown_subcomponent_structure_rails.html.erb}

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States' },
-    { label: 'Canada', value: 'Canada' },
-    { label: 'Pakistan', value: 'Pakistan' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

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

@@ -0,0 +1,6 @@
+The dropdown is built using all of the following required subcomponents:
+
+`dropdown/dropdown_trigger` is the UI component that users interact with to toggle the dropdown. 
+`dropdown/dropdown_container` is the floating container that wraps the list of dropdown options.
+`dropdown/dropdown_option` renders options that are passed to the container. 
+Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown, User, FlexItem, Badge, Avatar } from '../../'
+import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from '../../'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();
@@ -69,7 +69,10 @@ const DropdownWithCustomDisplay = (props) => {
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <>
+            <Flex
+                align="center"
+                justify="between"
+            >
               <FlexItem>
                 <User
                     align="left"
@@ -93,7 +96,7 @@ const DropdownWithCustomDisplay = (props) => {
                     }`}
                 />
               </FlexItem>
-            </>
+            </Flex>
           </Dropdown.Option>
         ))}
     </Dropdown>

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

@@ -1,5 +1,5 @@
-The `customDisplay` prop can be used to customize the display of the selected item by allowing devs to pass in a component that will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
 
-The `placeholder` prop can also be used to customize the placeholder text for the default Trigger. 
+The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`. 
 
-The `onSelect` prop is a function that gives the dev one argument: the selected option. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.
+The `onSelect` prop returns the selected option as an object to be utilized by the dev. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_display.html.erb → _dropdown_with_custom_display_rails.html.erb}

@@ -48,12 +48,17 @@
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
-                <% end %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
-                <% end %>
+              <%= pb_rails("flex", props: {
+                align: "center",
+                justify: "between",
+                }) do %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
+                  <% end %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+                  <% end %>
+              <% end %>
             <% end %>
         <% end %>
     <% end %>

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

@@ -0,0 +1,5 @@
+Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+
+The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`. 
+
+The dropdown follows the typical rails pattern of utilizing hidden inputs for form submission. The hidden input value is the selected options' id.

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

@@ -38,7 +38,10 @@ const DropdownWithCustomOptions = (props) => {
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <>
+            <Flex
+                align="center"
+                justify="between"
+            >
               <FlexItem>
                 <Flex>
                   <Icon icon={option.icon} 
@@ -52,7 +55,7 @@ const DropdownWithCustomOptions = (props) => {
                     text={option.areaCode} 
                 />
               </FlexItem>
-            </>
+            </Flex>
           </Dropdown.Option>
         ))}
     </Dropdown>

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

@@ -1 +1 @@
-The Dropdown also allows for custom options that can be passed in as children to the `Dropdown.Option` subcomponent. If no children are passed to `Dropdown.Option`, the kit will render each option as text within a Body kit by default. 
+`Dropdown.Option` subcomponent accepts any child components to customize the options' contents and display. By default, options are Body kit text that is set by the `label` value from the `option` object.

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options.html.erb → _dropdown_with_custom_options_rails.html.erb}

@@ -5,21 +5,21 @@
       value: "United States",
       areaCode: "+1",
       icon: "🇺🇸",
-      id: "United-states"
+      id: "us"
     },
     {
       label: "Canada",
       value: "Canada",
       areaCode: "+1",
       icon: "🇨🇦",
-      id: "canada"
+      id: "ca"
     },
     {
       label: "Pakistan",
       value: "Pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
-      id: "pakistan"
+      id: "pk"
     }
   ]
 
@@ -30,14 +30,19 @@
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("flex") do %>
-                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                    <% end %>
-                <% end %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+              <%= pb_rails("flex", props: {
+                align: "center",
+                justify: "between",
+                }) do %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("flex") do %>
+                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                      <% end %>
+                  <% end %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+                  <% end %>
                 <% end %>
             <% end %>
         <% end %>

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

@@ -0,0 +1 @@
+`dropdown/dropdown_option` subcomponent accepts any child components to customize the options' contents and display. By default, options are Body kit text that is set by the `label` value from the `option` object.

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

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States' },
-    { label: 'Canada', value: 'Canada' },
-    { label: 'Pakistan', value: 'Pakistan' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

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

@@ -1 +1 @@
-By default, the padding on each option in the dropdown is set to `xs`. The `padding` Global Props however can be used to override this default. In this example, we are setting padding to `sm`.
+By default, dropdown option paddingX is set to `sm` and paddingY is set to `xs`, but this padding can be overridden using our global padding props. In this example we are setting the option padding to `sm` all around.

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

@@ -51,7 +51,10 @@ const [selectedOption, setSelectedOption] = useState();
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <>
+            <Flex
+                align="center"
+                justify="between"
+            >
               <FlexItem>
                 <Flex>
                   <Icon icon={option.icon} 
@@ -65,7 +68,7 @@ const [selectedOption, setSelectedOption] = useState();
                     text={option.areaCode} 
                 />
               </FlexItem>
-            </>
+            </Flex>
           </Dropdown.Option>
         ))}
       </Dropdown.Container>

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

@@ -1 +1 @@
-The Dropdown can also be given a custom Trigger by passing children to the `Dropdown.Trigger` subcomponent as shown in this example. Here we are using the IconCircle kit. 
+Optionally replace the default trigger's select element by passing child components directly to the `Dropdown.Trigger`.

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger.html.erb → _dropdown_with_custom_trigger_rails.html.erb}

@@ -5,21 +5,21 @@
       value: "United States",
       areaCode: "+1",
       icon: "🇺🇸",
-      id: "United-states"
+      id: "us"
     },
     {
       label: "Canada",
       value: "Canada",
       areaCode: "+1",
       icon: "🇨🇦",
-      id: "canada"
+      id: "ca"
     },
     {
       label: "Pakistan",
       value: "Pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
-      id: "pakistan"
+      id: "pk"
     }
   ]
 
@@ -32,15 +32,20 @@
     <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
+              <%= pb_rails("flex", props: {
+                align: "center",
+                justify: "between",
+                }) do %>
                 <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("flex") do %>
-                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                    <% end %>
-                <% end %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                <% end %>
+                      <%= pb_rails("flex") do %>
+                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                      <% end %>
+                  <% end %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+                  <% end %>
+              <% end %>
             <% end %>
         <% end %>
     <% end %>

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

@@ -0,0 +1 @@
+Optionally replace the default trigger's select element by passing child components directly to the `dropdown/dropdown_trigger`.

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

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States' },
-    { label: 'Canada', value: 'Canada' },
-    { label: 'Pakistan', value: 'Pakistan' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

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

@@ -1 +1 @@
-The optional `label` prop takes a string value that if present will render that string as the label for the Dropdown.
+The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.

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

@@ -1,12 +1,12 @@
 examples:
   rails:
   - dropdown_default: Default
-  - dropdown_subcomponent_structure: Subcomponent Structure
+  - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_label: With Label
-  - dropdown_with_custom_options: Custom Options
-  - dropdown_with_custom_display: Custom Display
-  - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
+  - dropdown_with_custom_options_rails: Custom Options
+  - dropdown_with_custom_display_rails: Custom Display
+  - dropdown_with_custom_trigger_rails: Custom Trigger
+  - dropdown_with_custom_padding: Custom Option Padding
 
   react:
   - dropdown_default: Default
@@ -15,7 +15,7 @@ examples:
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
+  - dropdown_with_custom_padding: Custom Option Padding
   # - 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/dropdown.html.erb

@@ -8,6 +8,7 @@
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% 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 %>

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

@@ -6,6 +6,7 @@ module Playbook
       prop :options, type: Playbook::Props::Array,
                      default: []
       prop :label, type: Playbook::Props::String
+      prop :name, type: Playbook::Props::String
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)

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

@@ -203,5 +203,5 @@ test('selected option on click', () => {
   const kit = screen.getByTestId(testId)
   const option = kit.querySelector('.pb_dropdown_option_list')
   option.click()
-  expect(option).toHaveClass('pb_dropdown_option_selected p_xs')
+  expect(option).toHaveClass('pb_dropdown_option_selected')
 })