playbook_ui 13.32.0.pre.alpha.PBNTR405dropdownformfixesrails3301 → 13.32.0.pre.alpha.PLAY1138iconkitaddcolorprop3268

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 46be62680a9b7f69c65dbc7401bac4bfa0fdcc6eb8e77b636053147335db6aeb
-  data.tar.gz: a6b937a47504236820e0452a347643dd726ab61d2b95ecf78ecaf9c88eae14cf
+  metadata.gz: 2b8727cde66e2db0ab8c6e03d0e4f1f120946349c33ccde13db3a57654e723f6
+  data.tar.gz: 62cd6fd054f6114e65ebf42836c112b6defd2fb641cc5286f7a0515e9275b7e5
 SHA512:
-  metadata.gz: 30558fa14a011d3a22c55218a8e66e23a6beb66f11e065135189e5f171799669c7f213aa751554df57dc599416b99759971f66d319e9c44a4cdd30dfb23c25d7
-  data.tar.gz: 5690e376f3790d415dc66f95a53c73327fd5c5f769ed7dd3199aa097ca1f36c3584505bffa08ae142d546f5249c199160f531772e904878f06c89d9d7fabcdc6
+  metadata.gz: 64db2dd4d63371d32e7f7430ca1f683946a830bc2782ee19779a4082a57943b0f5f275c15e81be777c42dfcb76ea640a846be4d3118252149cb458861362ec52
+  data.tar.gz: dd527085844a67f55d0420db0f2458f815f9cbc12e4d40c0387249d2bda0c16a9a8b35800c88202e5e06fcc7b0f6043c4bb181ff91f2aa3da12ca0e18e9b2289

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

@@ -1,6 +1,2 @@
 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-lg fa-fw fa-lg fa-chevron-down"
+                class="pb_icon_kit far fa-fw fa-lg fa-chevron-down"
               />
               <span
                 aria-label="chevron-down icon"

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

@@ -22,12 +22,10 @@ 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;
@@ -42,12 +40,10 @@ const Dropdown = (props: DropdownProps) => {
     const {
         aria = {},
         autocomplete = false,
-        blankSelection = '',
         children,
         className,
         dark = false,
         data = {},
-        defaultValue = {},
         error,
         htmlOptions = {},
         id,
@@ -70,7 +66,7 @@ const Dropdown = (props: DropdownProps) => {
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
     const [filterItem, setFilterItem] = useState("");
-    const [selected, setSelected] = useState<GenericObject>(defaultValue);
+    const [selected, setSelected] = useState<GenericObject>({});
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
     const [hasContainerSubcomponent, setHasContainerSubcomponent] =
@@ -120,12 +116,11 @@ const Dropdown = (props: DropdownProps) => {
         setIsDropDownClosed(isClosed)
     }, [isClosed])
 
-    const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
-    const optionsWithBlankSelection = blankSelectionOption.concat(options);
-    const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
+    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(() => {
@@ -199,7 +194,7 @@ const Dropdown = (props: DropdownProps) => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
-                    optionsWithBlankSelection,
+                    options,
                     selected,
                     setFocusedOptionIndex,
                     setIsDropDownClosed,
@@ -238,8 +233,8 @@ const Dropdown = (props: DropdownProps) => {
                         <>
                             <DropdownTrigger />
                             <DropdownContainer>
-                                {optionsWithBlankSelection &&
-                                    optionsWithBlankSelection?.map((option: GenericObject) => (
+                                {options &&
+                                    options?.map((option: GenericObject) => (
                                         <Dropdown.Option key={option.id}
                                             option={option}
                                         />

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

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

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

@@ -8,7 +8,8 @@
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input id="dropdown-selected-option" name="<%= object.name %>" value="<%= input_default_value %>" style="display: none" <%= object.required ? "required" : ""%> />
+        <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" : ""%> />
 
         <% if content.present? %>
             <%= content.presence %>
@@ -16,8 +17,8 @@
         <% else %>
             <%= pb_rails("dropdown/dropdown_trigger") %>
             <%= pb_rails("dropdown/dropdown_container") do %>
-                <% if options_with_blank.present? %>
-                    <% options_with_blank.each do |option| %>
+                <% if object.options.present? %>
+                    <% object.options.each do |option| %>
                         <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
                     <% end %>
                 <% end %>

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

@@ -10,9 +10,6 @@ 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)
@@ -27,14 +24,6 @@ module Playbook
       def error_class
         error.present? ? " error" : ""
       end
-
-      def input_default_value
-        default_value.present? ? default_value.transform_keys(&:to_s) : ""
-      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, dropdown_placeholder: default_display_placeholder)
+        Hash(prop(:data)).merge(dropdown_trigger: true)
       end
 
       def classname

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

@@ -8,9 +8,7 @@ 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 DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
-const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
-const DROPDOWN_INPUT = "#dropdown-selected-option";
+const INPUT_FORM_VALIDATION = "#dropdown-form-validation";
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -23,11 +21,9 @@ export default class PbDropdown extends PbEnhancedElement {
 
   connect() {
     this.keyboardHandler = new PbDropdownKeyboard(this);
-    this.setDefaultValue();
     this.bindEventListeners();
     this.updateArrowDisplay(false);
     this.handleFormValidation();
-    this.handleFormReset();
   }
 
   bindEventListeners() {
@@ -47,13 +43,14 @@ export default class PbDropdown extends PbEnhancedElement {
 
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
-    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
+    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
 
     if (option) {
       const value = option.dataset.dropdownOptionLabel;
       hiddenInput.value = JSON.parse(value).id;
-      this.clearFormValidation(hiddenInput);
-
+      inputFormValidation.value = JSON.parse(value).id;
+      this.clearFormValidation(inputFormValidation);
       this.onOptionSelected(value, option);
     }
   }
@@ -86,7 +83,9 @@ 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"
     );
@@ -159,18 +158,14 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   handleFormValidation() {
-    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
-    );
+    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);
   }
 
   clearFormValidation(input) {
@@ -178,63 +173,10 @@ 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);
-
-    if (hiddenInput.value) {
-      const defaultValue = JSON.parse(hiddenInput.value.replaceAll("=>", ":"));
-      const options = this.element.querySelectorAll(OPTION_SELECTOR);
-
-      options.forEach((option) => {
-        if (
-          defaultValue.id === JSON.parse(option.dataset.dropdownOptionLabel).id
-        ) {
-          option.classList.add("pb_dropdown_option_selected");
-        }
-      });
-
-      this.setTriggerElementText(defaultValue.label);
-
-      hiddenInput.value = defaultValue.id;
-    }
-  }
-
-  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,7 +8,6 @@ $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"),
 );
 
 
@@ -24,71 +23,34 @@ $form_pill_colors: (
   cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
-      background-color: mix($color_value, $card_light, 10%);
-      @if ($color_name == "neutral") {
-        background-color: $white;
-        border: 1px solid $border_light;
-      }
+      background-color: rgba($color_value, $opacity-1);
       transition: background-color 0.2s ease;
       box-shadow: none;
       @media (hover:hover) {
         &:hover {
-          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%);
-          }
+          background-color: rgba($color_value, $opacity-2);
         }
       }
       #{$selector}_text {
         color: $color_value;
-        @if ($color_name == "neutral") {
-          color: $text_lt_default;
-        }
         padding-left: $space-sm;
-        padding-right: $space-sm/2;
+        padding-right: $space-sm/4;
       }
       #{$selector}_close {
         color: $color_value;
-        padding-left: $space-sm/4;
+        padding-left: $space-sm/2;
         padding-right: $space-sm/4;
         display: flex;
         align-items: center;
-        // 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;
+        height: 100%;
         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;
@@ -108,71 +70,6 @@ $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.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 { buildDataProps, buildHtmlProps } from '../utilities/props'
+import { buildHtmlProps } from '../utilities/props'
 
 type FormPillProps = {
   className?: string,
@@ -18,9 +18,6 @@ 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>,
@@ -39,26 +36,20 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     closeProps = {},
     size = '',
     textTransform = 'none',
-    color = "primary",
-    data = {},
-    tabIndex,
   } = props
   const css = classnames(
-    `pb_form_pill_kit_${color}`,
+    `pb_form_pill_kit_${'primary'}`,
     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 &&

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb

@@ -1,5 +1 @@
-<%= pb_rails("form_pill", props: {
-    text_transform: "lowercase" ,
-    text: "THIS IS A TAG",
-    tabindex: 0,
-}) %>
+<%= pb_rails("form_pill", props: { text_transform: "lowercase" , text: "THIS IS A TAG" }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx

@@ -6,7 +6,6 @@ const FormPillExample = (props) => {
     <div>
       <FormPill
           onClick={() => alert('Click!')}
-          tabIndex={0}
           text="THIS IS A TAG"
           textTransform="lowercase"
           {...props}

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb

@@ -2,7 +2,6 @@
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
    size: "small",
-   tabindex: 0,
 }) %>
 
 <br />
@@ -11,5 +10,4 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    size: "small",
-   tabindex: 0,
 }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx

@@ -9,7 +9,6 @@ const FormPillSize = (props) => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           size="small"
-          tabIndex={0}
           {...props}
       />
       <br />
@@ -17,7 +16,6 @@ const FormPillSize = (props) => {
       <FormPill
           name="Anna Black"
           size="small"
-          tabIndex={0}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb

@@ -1,4 +1 @@
-<%= pb_rails("form_pill", props: {
-    text: "this is a tag",
-    tabindex: 0,
-}) %>
+<%= pb_rails("form_pill", props: { text: "this is a tag" }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx

@@ -6,9 +6,8 @@ const FormPillDefault = (props) => {
     <div>
       <FormPill
           onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
+alert('Click!')
+}}
           text="this is a tag"
           {...props}
       />

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb

@@ -1,7 +1,6 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-   tabindex: 0,
 }) %>
 
 <br />
@@ -9,5 +8,4 @@
 
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
-   tabindex: 0,
 }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx

@@ -9,7 +9,6 @@ const FormPillDefault = (props) => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           onClick={() => alert('Click!')}
-          tabIndex={0}
           {...props}
       />
       <br />
@@ -17,7 +16,6 @@ const FormPillDefault = (props) => {
       <FormPill
           name="Anna Black"
           onClick={() => alert('Click!')}
-          tabIndex={0}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -11,13 +11,9 @@ module Playbook
       prop :text_transform, type: Playbook::Props::Enum,
                             values: %w[none lowercase],
                             default: "none"
-      prop :color, type: Playbook::Props::Enum,
-                   values: %w[primary neutral],
-                   default: "primary"
-      prop :tabindex
 
       def classname
-        generate_classname("pb_form_pill_kit", color, name, text, text_transform)
+        generate_classname("pb_form_pill_kit", "primary", name, text, text_transform)
       end
 
       def display_text