playbook_ui 14.3.2.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3791 → 14.3.2.pre.alpha.PBNTR480radiocustomchildrenprop3759

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b05e4ed56c48be4731977c03a59d76947f17b896a2cb4e7c2402433bb6a80d63
-  data.tar.gz: eb12efbde71ac19ed246b5fb7b8250cb0be7721deb98ba34dad10343143ff949
+  metadata.gz: cdd1dded7ae1ba871ee3d9c6301c8157a59069e5b30bd4192aa3923cda2f470f
+  data.tar.gz: f9a6884a3c4fbc00c1cacb9706fcfa02c166c5bcd81c394e37489a953f29b099
 SHA512:
-  metadata.gz: 14d45a7aa2ee15d462c6bf97230c170d5fe65576e48ced5170f2d211c15b16f72666a06ac5ba7b2236afe52405b2f87831c448d09a3a39ea52a03b3eed5f2a28
-  data.tar.gz: 3d390890e511a6f6bfea02ee214c001fce3b7e85ca0d2265e7d28b246ffe84575c828cf4c7ca7a87b6488bfef2f2ab9f5ed3b7b19ef79dbed1065cd75890559b
+  metadata.gz: cb419c98c99095e28a2b17fef5e5f9a5dd258a2d75b26d46a34182af3c56396f3ac60de61e40f9fec9afc6dd38ef00341e54f02bc762f9d4eae31d5d5b783550
+  data.tar.gz: ad8e3e17e90704d2f8ee7f4ff4665e0a195cfc83c0a4908ae19f8cbf3edfbd79930a221d23ba714b9272053c1514e95753dfad4b56722ce1bbbfcb44ac2d07a2

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

@@ -7,7 +7,10 @@
 
 $selector: ".pb_form_pill";
 $pb_form_pill_height: 27px;
-$form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $product_colors));
+$form_pill_colors: (
+  primary: map-get($status_color_text, "primary"),
+  neutral: map-get($status_color_text, "neutral"),
+);
 
 
 [class^=pb_form_pill_kit] {
@@ -33,18 +36,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
           color: $text_lt_default;
         }
       }
-      @if ($color_name == "warning") {
-        background-color: mix($yellow, $card_light, 10%);
-        .pb_form_pill_icon {
-          color: $yellow;
-        }
-      }
-      @if ($color_name == "accessories") {
-        background-color: mix($product_8_background, $card_light, 10%);
-        .pb_form_pill_icon {
-          color: $product_8_background;
-        }
-      }
       transition: background-color 0.2s ease;
       box-shadow: none;
       @media (hover:hover) {
@@ -54,24 +45,12 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
             background-color: mix($neutral, $card_light, 20%);
             border: 1px solid $border_light;
           }
-          @if ($color_name == "warning") {
-            background-color: mix($yellow, $card_light, 20%);
-          }
-          @if ($color_name == "accessories") {
-            background-color: mix($product_8_background, $card_light, 20%);
-          }
         }
         &:active {
           background-color: mix($color_value, $card_light, 30%);
           @if ($color_name == "neutral") {
             background-color: mix($neutral, $card_light, 30%);
           }
-          @if ($color_name == "warning") {
-            background-color: mix($yellow, $card_light, 30%);
-          }
-          @if ($color_name == "accessories") {
-            background-color: mix($product_8_background, $card_light, 30%);
-          }
         }
       }
       #{$selector}_text {
@@ -79,9 +58,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
-        @if ($color_name == "warning") {
-          color: $yellow;
-        }
         padding: 0 $space-xs;
       }
       #{$selector}_close {
@@ -100,23 +76,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
             background-color: mix($neutral, $card_light, 60%);
           }
         }
-        @if ($color_name == "warning") {
-          color: $yellow;
-        }
-        &:hover {
-          background-color: mix($color_value, $card_light, 40%);
-          @if ($color_name == "warning") {
-            background-color: mix($yellow, $card_light, 40%);
-          }
-        }
-        @if ($color_name == "accessories") {
-          color: $product_8_background;
-        }
-        &:hover {
-          @if ($color_name == "accessories") {
-            background-color: mix($product_8_background, $card_light, 40%);
-          }
-        }
       }
       #{$selector}_tag {
         color: $color_value;
@@ -124,9 +83,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
-        @if ($color_name == "warning") {
-          color: $yellow;
-        }
       }
     }
   }
@@ -176,23 +132,25 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   }
   &.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_text, .pb_form_pill_tag, .pb_form_pill_icon {
-          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%);
-        }
+      //   background-color: mix($color_value, $card_dark, 10%);
+        // .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+        //   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;
@@ -227,192 +185,12 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
             }
           }
           &:hover {
-            background-color: mix($active_dark, $card_dark, 20%);
+            background-color: mix($active_dark, $card_dark, 20px);
           }
           &:active {
             background-color: mix($active_dark, $card_dark, 30%);
           }
         }
-        @if ($color_name == "data_1") {
-          background-color: mix($active_dark, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: mix($active_dark, $card_light, 90%);
-          }
-          .pb_form_pill_close {
-            color: mix($active_dark, $card_light, 90%);
-            &:hover {
-              background-color: mix($active_dark, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($active_dark, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($data_1, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "data_6") {
-          background-color: mix($data_6, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $text_dk_light;
-          }
-          .pb_form_pill_close {
-            color: $text_dk_light;
-            &:hover {
-              background-color: mix($text_dk_light, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($data_6, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($data_6, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "windows") {
-          background-color: mix($product_1_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_1_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_1_highlight;
-            &:hover {
-              background-color: mix($product_1_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_1_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_1_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "siding") {
-          background-color: mix($product_2_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_2_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_2_highlight;
-            &:hover {
-              background-color: mix($product_2_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_2_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_2_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "roofing") {
-          background-color: mix($product_5_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_5_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_5_highlight;
-            &:hover {
-              background-color: mix($product_5_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_5_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_5_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "doors") {
-          background-color: mix($product_3_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_3_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_3_highlight;
-            &:hover {
-              background-color: mix($product_3_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_3_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_3_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "gutters") {
-          background-color: mix($product_6_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_6_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_6_highlight;
-            &:hover {
-              background-color: mix($product_6_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_6_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_6_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "solar") {
-          background-color: mix($product_4_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_4_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_4_highlight;
-            &:hover {
-              background-color: mix($product_4_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_4_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_4_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "insulation") {
-          background-color: mix($product_7_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_7_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_7_highlight;
-            &:hover {
-              background-color: mix($product_7_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_7_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_7_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "accessories") {
-          background-color: mix($product_8_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $text_dk_light;
-          }
-          .pb_form_pill_close {
-            color: $text_dk_light;
-            &:hover {
-              background-color: mix($product_8_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_8_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_8_highlight, $card_dark, 30%);
-          }
-        }
       }
     }
   }

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

@@ -17,7 +17,7 @@ type FormPillProps = {
   avatarUrl?: string,
   size?: string,
   textTransform?: 'none' | 'lowercase',
-  color?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
+  color?: "primary" | "neutral",
   data?: {[key: string]: string},
   tabIndex?: number,
   icon?: string,

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

@@ -6,7 +6,6 @@ examples:
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
-  - form_pill_colors: Form Pill Colors
 
   react:
   - form_pill_user: Form Pill User
@@ -14,4 +13,3 @@ examples:
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
-  - form_pill_colors: Form Pill Colors

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

@@ -3,4 +3,3 @@ export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
-export { default as FormPillColors } from './_form_pill_colors.jsx'

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

@@ -12,7 +12,7 @@ module Playbook
                             values: %w[none lowercase],
                             default: "none"
       prop :color, type: Playbook::Props::Enum,
-                   values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
+                   values: %w[primary neutral],
                    default: "primary"
       prop :tabindex
       prop :icon

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -9,7 +9,7 @@ module Playbook
       prop :border, type: Playbook::Props::Boolean,
                     default: false
       prop :fixed_width, type: Playbook::Props::Boolean,
-                         default: true
+                         default: false
       prop :flip, type: Playbook::Props::Enum,
                   values: ["horizontal", "vertical", "both", nil],
                   default: nil

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -34,7 +34,6 @@ type MultiLevelSelectProps = {
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[]
   variant?: "multi" | "single"
-  pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -51,8 +50,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     treeData,
     onSelect = () => null,
     selectedIds,
-    variant = "multi",
-    pillColor = "primary"
+    variant = "multi"
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -469,7 +467,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 inputDisplay === "pills"
                   ? returnedArray.map((item, index) => (
                       <FormPill
-                          color={pillColor}
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}
@@ -482,7 +479,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 inputDisplay === "pills"
                   ? defaultReturn.map((item, index) => (
                       <FormPill
-                          color={pillColor}
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}

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

@@ -6,7 +6,6 @@ examples:
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
-  - multi_level_select_color: With Pills (Custom Color)
 
   react:
   - multi_level_select_default: Default
@@ -14,4 +13,3 @@ examples:
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids_react: Selected Ids
-  - multi_level_select_color: With Pills (Custom Color)

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

@@ -3,4 +3,3 @@ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.
 export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
-export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -19,9 +19,6 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[multi single],
                      default: "multi"
-      prop :pill_color, type: Playbook::Props::Enum,
-                        values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
-                        default: "primary"
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -37,7 +34,6 @@ module Playbook
           selectedIds: selected_ids,
           input_name: input_name,
           variant: variant,
-          pillColor: pill_color,
         }
       end
     end

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

@@ -9,7 +9,7 @@ export default class PbRadio extends PbEnhancedElement {
   }
 
   connect() {
-    const radioWrapperElement = this.element.parentElement.querySelector(RADIO_WRAPPER_SELECTOR)
+    const radioWrapperElement = this.element.querySelector(RADIO_WRAPPER_SELECTOR)
     radioWrapperElement.addEventListener("click", () => {
       this.element.querySelector("input[type='radio']").click()
     })

data/app/pb_kits/playbook/pb_radio/radio.html.erb

@@ -1,23 +1,25 @@
 <% if object.custom_children %>
-  <%= pb_rails("flex", props: {
-    aria: object.aria,
-    align: "center",
-    class: object.classname,
-    cursor: "pointer",
-    data: object.data,
-    **combined_html_options
-  }) do %>
-    <%= content_tag(:label,
-      'data-pb-radio-children': 'true',
-      checked: object.checked,
+  <div data-pb-radio-children="true">
+    <%= pb_rails("flex", props: {
+      aria: object.aria,
+      align: "center",
       class: object.classname,
-      id: object.id,
-      value: object.value) do %>
-      <%= input %>
-      <span class="pb_radio_button"></span>
+      cursor: "pointer",
+      **combined_html_options
+    }) do %>
+      <%= content_tag(:label,
+        checked: object.checked,
+        class: object.classname,
+        data: object.data,
+        id: object.id,
+        value: object.value,
+        **combined_html_options) do %>
+        <%= input %>
+        <span class="pb_radio_button"></span>
+      <% end %>
+      <div data-pb-radio-children-wrapper="true"> <%= content %> </div>
     <% end %>
-    <div data-pb-radio-children-wrapper="true"> <%= content %> </div>
-  <% end %>
+  </div>
 <% else %>
   <%= content_tag(:label,
       aria: object.aria,

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -107,20 +107,4 @@ test('should pass className prop', () => {
 
   const kit = screen.getByTestId('typeahead-test')
   expect(kit).toHaveClass(className)
-})
-
-test('typeahead with colored pills', () => {
-  render(
-    <Typeahead
-        data={{ testid: 'pills-color-test' }}
-        defaultValue={[options[0]]}
-        isMulti
-        options={options}
-        pillColor="neutral"
-    />
-  )
-
-  const kit = screen.getByTestId('pills-color-test')
-  const pill = kit.querySelector(".pb_form_pill_kit_neutral")
-  expect(pill).toBeInTheDocument()
 })

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -45,14 +45,12 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => any),
   getOptionValue?: string | (() => any),
   name?: string,
-  pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
 export type SelectValueType = {
   label: string,
   value: string,
   imageUrl?: string,
-  pillColor?: string,
 }
 
 type TagOnChangeValues = {
@@ -78,7 +76,6 @@ const Typeahead = ({
   htmlOptions = {},
   id,
   loadOptions = noop,
-  pillColor,
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -108,7 +105,6 @@ const Typeahead = ({
     onCreateOption: null as null,
     plusIcon: false,
     onMultiValueClick: (_option: SelectValueType): any => undefined,
-    pillColor: pillColor,
     ...props,
   }
 

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -8,7 +8,6 @@ import { SelectValueType } from '../_typeahead'
 type Props = {
   data: SelectValueType,
   multiValueTemplate: any,
-  pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
   removeProps: any,
   selectProps: any,
 }
@@ -16,55 +15,48 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor } = props.selectProps
+  const { multiKit } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
     name: label,
     avatarUrl: '',
-    dark,
   }
 
   if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
 
   return (
     <components.MultiValueContainer
-        className="text_input_multivalue_container"
-        {...props}
+      className="text_input_multivalue_container"
+      {...props}
     >
       {multiKit === 'badge' &&
         <Badge
-            closeProps={removeProps}
-            removeIcon
-            text={label}
-            variant="primary"
+          closeProps={removeProps}
+          removeIcon
+          text={label}
+          variant="primary"
         />
       }
 
       {multiKit !== 'badge' && imageUrl &&
         <FormPill
-            avatarUrl={imageUrl}
-            closeProps={removeProps}
-            color={pillColor}
-            dark={dark}
-            marginRight="xs"
-            name={label}
-            size={multiKit === 'smallPill' ? 'small' : ''}
-            text=''
-            {...props}
+          avatarUrl={imageUrl}
+          closeProps={removeProps}
+          marginRight="xs"
+          name={label}
+          size={multiKit === 'smallPill' ? 'small' : ''}
+          text=''
         />
       }
 
       {multiKit !== 'badge' && !imageUrl &&
         <FormPill
-            closeProps={removeProps}
-            color={pillColor}
-            dark={dark}
-            marginRight="xs"
-            name=''
-            size={multiKit === 'smallPill' ? 'small' : ''}
-            text={label}
-            {...props}
+          closeProps={removeProps}
+          marginRight="xs"
+          name=''
+          size={multiKit === 'smallPill' ? 'small' : ''}
+          text={label}
         />
       }
     </components.MultiValueContainer>

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

@@ -9,7 +9,6 @@ examples:
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
     - typeahead_error_state: Error State
-    - typeahead_with_pills_color: With Pills (Custom Color)
 
   react:
     - typeahead_default: Default
@@ -24,4 +23,3 @@ examples:
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
     - typeahead_custom_menu_list: Custom MenuList
-    - typeahead_with_pills_color: With Pills (Custom Color)