playbook_ui 13.32.0 → 13.33.0.pre.alpha.PBNTR405dropdownformfixesrails3311

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 15c98ab4c24f31f753052d92ce96169c82221a5a1b94a6d73f26f39605507324
-  data.tar.gz: a132e4e59aafc142e919af50b3ced4622e9073e39c1e8d5183a4484a91a72e51
+  metadata.gz: 8fbda811742441cdb16b2651544b02a6053acfca38e070ef814ff1f2fcb1c27c
+  data.tar.gz: 159b81a126b1d13b8f64f2e16a53326dfbf21b1afd7118c469c95bf7e9524b5b
 SHA512:
-  metadata.gz: 51ae3a858325d45b791b217debbff7ac11d9304ced1606a1f037af3329345d293582583ef31c9298143f5e5befa1ff203a90e6a751f127f5ab600eb363c54146
-  data.tar.gz: c154c881d29dcccecdcfd90638eb619b48747fd2f172f3b136c9ba30686e8bd7e726e6265b06e65e4348df5a9f8d1f6e1d98d79fcfcac334721fd2d9703c6fb9
+  metadata.gz: dc57caefdde9638b830c0ad6a010c8e0ada6cd7fd2d72b7b134271ed86de9e3bb7a45a351690afea6950b8c7e8733d3063fac7436e0d1bdc7cdc82074c219289
+  data.tar.gz: ddce620575e43112f59837ad5a39d4efbda50072d4c48e3c171b37d8774605ee84770cdcd8c200ef0bb3018dee8b6e8fa10c1a30d58dbbccefa30e1e131158c2

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md

@@ -1,2 +1,6 @@
 The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
  It's important to note that certain options may require specific script imports to function properly.
+
+Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
+
+You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -28,7 +28,7 @@ exports[`html structure is correct 1`] = `
               style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
               <i
-                class="pb_icon_kit far fa-fw fa-lg fa-chevron-down"
+                class="pb_icon_kit far fa-lg fa-fw fa-lg fa-chevron-down"
               />
               <span
                 aria-label="chevron-down icon"

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

@@ -22,10 +22,12 @@ import {
 type DropdownProps = {
     aria?: { [key: string]: string };
     autocomplete?: boolean;
+    blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
     dark?: boolean;
     data?: { [key: string]: string };
+    defaultValue?: GenericObject;
     error?: string;
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string;
@@ -40,10 +42,12 @@ const Dropdown = (props: DropdownProps) => {
     const {
         aria = {},
         autocomplete = false,
+        blankSelection = '',
         children,
         className,
         dark = false,
         data = {},
+        defaultValue = {},
         error,
         htmlOptions = {},
         id,
@@ -66,7 +70,7 @@ const Dropdown = (props: DropdownProps) => {
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
     const [filterItem, setFilterItem] = useState("");
-    const [selected, setSelected] = useState<GenericObject>({});
+    const [selected, setSelected] = useState<GenericObject>(defaultValue);
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
     const [hasContainerSubcomponent, setHasContainerSubcomponent] =
@@ -116,11 +120,12 @@ const Dropdown = (props: DropdownProps) => {
         setIsDropDownClosed(isClosed)
     }, [isClosed])
 
-    const filteredOptions = options?.filter((option: GenericObject) => {
+    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());
-    }
-    );
+    });    
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -194,7 +199,7 @@ const Dropdown = (props: DropdownProps) => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
-                    options,
+                    optionsWithBlankSelection,
                     selected,
                     setFocusedOptionIndex,
                     setIsDropDownClosed,
@@ -233,8 +238,8 @@ const Dropdown = (props: DropdownProps) => {
                         <>
                             <DropdownTrigger />
                             <DropdownContainer>
-                                {options &&
-                                    options?.map((option: GenericObject) => (
+                                {optionsWithBlankSelection &&
+                                    optionsWithBlankSelection?.map((option: GenericObject) => (
                                         <Dropdown.Option key={option.id}
                                             option={option}
                                         />

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

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: { blank_selection: "Select One...", options: options }) %>

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Dropdown } from '../../'
+
+const DropdownBlankSelection = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];
+
+  return (
+  <>
+    <Dropdown
+        blankSelection="Select one..."
+        options={options}
+        {...props}
+    />
+  </>
+  )
+}
+
+export default DropdownBlankSelection

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

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options, default_value: options.last}) %>

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Dropdown } from '../../'
+
+const DropdownDefaultValue = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];  
+
+  return (
+  <>
+    <Dropdown
+        defaultValue={options[2]}
+        options={options}
+        {...props}
+    />
+  </>
+  )
+}
+
+export default DropdownDefaultValue

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

@@ -8,6 +8,8 @@ examples:
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
+  - dropdown_default_value: Default Value
+  - dropdown_blank_selection: Blank Selection
 
   react:
   - dropdown_default: Default
@@ -18,6 +20,8 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
+  - dropdown_default_value: Default Value
+  - dropdown_blank_selection: Blank Selection
   # - 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

@@ -9,4 +9,6 @@ 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 DropdownError } from './_dropdown_error.jsx'
+export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
+export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'

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

@@ -8,17 +8,21 @@
         <%= 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="" />
-        <input id="dropdown-form-validation" name="<%= object.name %>_form_validation" value="" style="display: none" <%= object.required ? "required" : ""%> />
-
+        <input 
+            data-default-value="<%= input_default_value %>" 
+            id="dropdown-selected-option" 
+            name="<%= object.name %>" 
+            style="display: none" 
+            <%= object.required ? "required" : ""%> 
+        />
         <% 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| %>
+                <% if options_with_blank.present? %>
+                    <% options_with_blank.each do |option| %>
                         <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
                     <% end %>
                 <% end %>

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

@@ -10,6 +10,9 @@ module Playbook
       prop :error, type: Playbook::Props::String
       prop :required, type: Playbook::Props::Boolean,
                       default: false
+      prop :default_value
+      prop :blank_selection, type: Playbook::Props::String,
+                             default: ""
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)
@@ -24,6 +27,14 @@ module Playbook
       def error_class
         error.present? ? " error" : ""
       end
+
+      def input_default_value
+        default_value.present? ? default_value.transform_keys(&:to_s)["id"] : ""
+      end
+
+      def options_with_blank
+        blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
+      end
     end
   end
 end

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

@@ -11,7 +11,7 @@ module Playbook
       prop :custom_display
 
       def data
-        Hash(prop(:data)).merge(dropdown_trigger: true)
+        Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)
       end
 
       def classname

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

@@ -8,7 +8,9 @@ const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
 const UP_ARROW_SELECTOR = "#dropdown_close_icon";
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
 const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
-const INPUT_FORM_VALIDATION = "#dropdown-form-validation";
+const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
+const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
+const DROPDOWN_INPUT = "#dropdown-selected-option";
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -21,9 +23,11 @@ export default class PbDropdown extends PbEnhancedElement {
 
   connect() {
     this.keyboardHandler = new PbDropdownKeyboard(this);
+    this.setDefaultValue();
     this.bindEventListeners();
     this.updateArrowDisplay(false);
     this.handleFormValidation();
+    this.handleFormReset();
   }
 
   bindEventListeners() {
@@ -43,14 +47,13 @@ export default class PbDropdown extends PbEnhancedElement {
 
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
-    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
-    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
 
     if (option) {
       const value = option.dataset.dropdownOptionLabel;
       hiddenInput.value = JSON.parse(value).id;
-      inputFormValidation.value = JSON.parse(value).id;
-      this.clearFormValidation(inputFormValidation);
+      this.clearFormValidation(hiddenInput);
+
       this.onOptionSelected(value, option);
     }
   }
@@ -83,9 +86,7 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   onOptionSelected(value, selectedOption) {
-    const triggerElement = this.element.querySelector(
-      "#dropdown_trigger_display"
-    );
+    const triggerElement = this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);
     const customDisplayElement = this.element.querySelector(
       "#dropdown_trigger_custom_display"
     );
@@ -158,14 +159,18 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   handleFormValidation() {
-    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
-
-    inputFormValidation.addEventListener("invalid", function (event) {
-      if (inputFormValidation.hasAttribute("required") && inputFormValidation.value === "") {
-        event.preventDefault();
-        inputFormValidation.closest(".dropdown_wrapper").classList.add("error");
-      }
-    }, true);
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+
+    hiddenInput.addEventListener(
+      "invalid",
+      function (event) {
+        if (hiddenInput.hasAttribute("required") && hiddenInput.value === "") {
+          event.preventDefault();
+          hiddenInput.closest(".dropdown_wrapper").classList.add("error");
+        }
+      },
+      true
+    );
   }
 
   clearFormValidation(input) {
@@ -173,10 +178,62 @@ export default class PbDropdown extends PbEnhancedElement {
       const dropdownWrapperElement = input.closest(".dropdown_wrapper");
       dropdownWrapperElement.classList.remove("error");
 
-      const errorLabelElement = dropdownWrapperElement.querySelector(".pb_body_kit_negative");
+      const errorLabelElement = dropdownWrapperElement.querySelector(
+        ".pb_body_kit_negative"
+      );
       if (errorLabelElement) {
         errorLabelElement.remove();
       }
     }
   }
+
+  setDefaultValue() {
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+    const options = this.element.querySelectorAll(OPTION_SELECTOR);
+
+    const defaultValue = hiddenInput.dataset.defaultValue || "";
+    hiddenInput.value = defaultValue;
+
+    if (defaultValue) {
+      const selectedOption = Array.from(options).find((option) => {
+        return (
+          JSON.parse(option.dataset.dropdownOptionLabel).id === defaultValue
+        );
+      });
+      selectedOption.classList.add("pb_dropdown_option_selected");
+      this.setTriggerElementText(
+        JSON.parse(selectedOption.dataset.dropdownOptionLabel).label
+      );
+    }
+  }
+
+  handleFormReset() {
+    const form = this.element.closest("form");
+
+    if (form) {
+      form.addEventListener("reset", () => {
+        this.resetDropdownValue();
+      });
+    }
+  }
+
+  resetDropdownValue() {
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+    const options = this.element.querySelectorAll(OPTION_SELECTOR);
+    options.forEach((option) => {
+      option.classList.remove("pb_dropdown_option_selected");
+    });
+
+    hiddenInput.value = "";
+
+    const defaultPlaceholder = this.element.querySelector(DROPDOWN_PLACEHOLDER);
+    this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder);
+  }
+
+  setTriggerElementText(text) {
+    const triggerElement = this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);
+    if (triggerElement) {
+      triggerElement.textContent = text;
+    }
+  }
 }

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

@@ -8,6 +8,7 @@ $selector: ".pb_form_pill";
 $pb_form_pill_height: 37px;
 $form_pill_colors: (
   primary: map-get($status_color_text, "primary"),
+  neutral: map-get($status_color_text, "neutral"),
 );
 
 
@@ -23,34 +24,71 @@ $form_pill_colors: (
   cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
-      background-color: rgba($color_value, $opacity-1);
+      background-color: mix($color_value, $card_light, 10%);
+      @if ($color_name == "neutral") {
+        background-color: $white;
+        border: 1px solid $border_light;
+      }
       transition: background-color 0.2s ease;
       box-shadow: none;
       @media (hover:hover) {
         &:hover {
-          background-color: rgba($color_value, $opacity-2);
+          background-color: mix($color_value, $card_light, 20%);
+          @if ($color_name == "neutral") {
+            background-color: mix($neutral, $card_light, 20%);
+            border: 1px solid $border_light;
+          }
+        }
+        &:active {
+          background-color: mix($color_value, $card_light, 30%);
+          @if ($color_name == "neutral") {
+            background-color: mix($neutral, $card_light, 30%);
+          }
         }
       }
       #{$selector}_text {
         color: $color_value;
+        @if ($color_name == "neutral") {
+          color: $text_lt_default;
+        }
         padding-left: $space-sm;
-        padding-right: $space-sm/4;
+        padding-right: $space-sm/2;
       }
       #{$selector}_close {
         color: $color_value;
-        padding-left: $space-sm/2;
+        padding-left: $space-sm/4;
         padding-right: $space-sm/4;
         display: flex;
         align-items: center;
-        height: 100%;
+        // I had to temporarily change height to 27px so new hover state darker background forms a circle not an oval
+        // before size change (ticket 2 of 4) - change back to 100% when $pb_form_pill_height changed to 27px from 37px
+        height: 27px;
+        border-radius: 70px;
         cursor: pointer;
+        &:hover {
+          background-color: mix($color_value, $card_light, 40%);
+          @if ($color_name == "neutral") {
+            background-color: mix($neutral, $card_light, 60%);
+          }
+        }
       }
       #{$selector}_tag {
         color: $color_value;
         padding-left: $space-sm;
+        @if ($color_name == "neutral") {
+          color: $text_lt_default;
+        }
       }
     }
   }
+  &:focus {
+    outline: $primary solid 2px;
+    outline-offset: -1px;
+  }
+  &:focus-visible {
+    outline: $primary solid 2px;
+    outline-offset: -1px;
+  }
   &.small {
     height: fit-content;
     height: -moz-fit-content;
@@ -70,6 +108,71 @@ $form_pill_colors: (
       &::before { line-height: 21px; }
     }
   }
+  &.dark {
+    @each $color_name, $color_value in $form_pill_colors {
+      // In dark mode, the base patterns below are needed for the next tickets for success, warning, error, info. 
+      // Primary and Neutral are exceptions to the general rule in the handoff 
+      &[class*=_#{$color_name}]  {
+      //   background-color: mix($color_value, $card_dark, 10%);
+        // .pb_form_pill_tag {
+        //   color: $color_name;
+        // }
+        // .pb_form_pill_close {
+        //   color: $color_name;
+        //   &:hover {
+        //     background-color: mix($color_value, $card_dark, 40%);
+        //   }
+        // }
+        // &:hover {
+        //   background-color: mix($color_value, $card_dark, 20%);
+        // }
+        // &:active {
+        //   background-color: mix($color_value, $card_dark, 30%);
+        // }
+        @if ($color_name == "neutral") {
+          background-color: transparent;
+          border: 1px solid $border_dark;
+          .pb_form_pill_text, .pb_form_pill_tag {
+            color: $text_dk_default;
+          }
+          .pb_form_pill_close {
+            color: $text_dk_default;
+            &:hover {
+              background-color: mix($neutral, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($white, $card_dark, 10%);
+          }
+          &:active {
+            background-color: mix($white, $card_dark, 20%);
+          }
+          &:focus {
+            border: 1px solid $primary;
+          }
+        }
+        @if ($color_name == "primary") {
+          background-color: mix($active_dark, $card_dark, 10%);
+          .pb_form_pill_text, .pb_form_pill_tag {
+            color: $active_dark;
+          }
+          .pb_form_pill_close {
+            color: $active_dark;
+            &:hover {
+              background-color: mix($active_dark, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($active_dark, $card_dark, 20px);
+          }
+          &:active {
+            background-color: mix($active_dark, $card_dark, 30%);
+          }
+        }
+      }
+    }
+  }
+
   &[class*=lowercase] {
     text-transform: lowercase;
   }

data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import FormPill from './_form_pill';
+
+const testId = 'formpill';
+
+test('should render classname', () => {
+    render(
+        <FormPill
+            data={{ testid: testId }}
+            text="test"
+        /> 
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_form_pill_kit_primary none')
+});
+
+test('displays text content', () => {
+    render(
+        <FormPill
+            data={{ testid: testId }}
+            text="test"
+        /> 
+    )
+  
+    const text = screen.getByText("test")
+    expect(text).toBeInTheDocument()
+});
+
+test('displays color variant', () => {
+    render(
+        <FormPill
+            color={"neutral"}
+            data={{ testid: testId }}
+            text={"test"}
+        />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_form_pill_kit_neutral none`)
+});
+
+test('displays size variant', () => {
+    render(
+        <FormPill            
+            data={{ testid: testId }}
+            size={"small"}
+            text={"test"}
+        />
+    )
+    const kit = screen.getByTestId('formpill')
+    expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
+});

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

@@ -5,7 +5,7 @@ import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { buildHtmlProps } from '../utilities/props'
+import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type FormPillProps = {
   className?: string,
@@ -18,6 +18,9 @@ type FormPillProps = {
   avatarUrl?: string,
   size?: string,
   textTransform?: 'none' | 'lowercase',
+  color?: "primary" | "neutral",
+  data?: {[key: string]: string},
+  tabIndex?: number,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -36,20 +39,26 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     closeProps = {},
     size = '',
     textTransform = 'none',
+    color = "primary",
+    data = {},
+    tabIndex,
   } = props
   const css = classnames(
-    `pb_form_pill_kit_${'primary'}`,
+    `pb_form_pill_kit_${color}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
     textTransform,
   )
 
+  const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
     <div className={css}
         id={id}
+        tabIndex={tabIndex}
+        {...dataProps}
         {...htmlProps}
     >
         {name &&