playbook_ui 14.3.2.pre.alpha.pbntr523enablekitsforradiofix3809 → 14.3.2.pre.alpha.play1472newicons3773

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 053356ea9f4bf69e1703a14d0d96123f811efa5f5f416408c8d01aca834da920
-  data.tar.gz: faed3bbad051fb0aff9b57caa8d44441f9bd4d7aa58d063f8e6702cae2619d3c
+  metadata.gz: 70d2f1e5fb2d0f8307d13237e623c35d33a265a63224948efc82eed8d6364884
+  data.tar.gz: 5069ab02e8b2f8a3b47cf3ae6de5129ef346cf78fcd9cde8471ed73db173945f
 SHA512:
-  metadata.gz: 5064a8ff20bf2e88081a35677b4c55389836736db68d5a35e44b165de56824a099d02108222abaf33714b94f769e9ea4cecdda78053983fd3524b08943b17bf3
-  data.tar.gz: 1b1e694bef55de53662d91dbd687d9e276761f7cc81dd164b67d9948ba571f7a0a2bfe34545cc684bfc3093b831f7f591ae0073183faa14ea830f20a79d67b6c
+  metadata.gz: a730f62851ae33e7875ac2a4c6ba6a6961f42a1c52f41f2cd11d7fada31d99761a9262961d016fa74a9dc743ec6cf163a0b01a22597cb4548a59c6ca3ccc5b99
+  data.tar.gz: 8323c2c34dcd72ec906d8bbac6b2c167c131d854592a8c2107b5a2f8e5ac9f7cba33e40dedb86b8a29a39d7f50654f851490efaeccbef2c7f0b1eaa78ec603a3

data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx

@@ -4,6 +4,7 @@ import { Header } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 
 import Icon from "../../pb_icon/_icon"
+import { getAllIcons } from "../../utilities/icons/allicons"
 
 import { displayIcon } from "../Utilities/IconHelpers"
 
@@ -11,21 +12,39 @@ type SortIconButtonProps = {
   header: Header<GenericObject, unknown>
   sortIcon?: string | string[]
 }
+
 export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
 
+const firstIcon = displayIcon(sortIcon)[0] 
+const secondIcon = displayIcon(sortIcon)[1] 
+const upIcon = getAllIcons()["arrowUpShortWide"].icon as unknown as { [key: string]: SVGElement }
+const downIcon = getAllIcons()["arrowDownShortWide"].icon as unknown as { [key: string]: SVGElement }
+
   return (
     <>
       {header.column.getIsSorted() === "desc" ? (
         <div className="sort-button-icon" 
-            key={displayIcon(sortIcon)[0]}
+            key={firstIcon}
         >
-          <Icon icon={displayIcon(sortIcon)[0]} />
+        { firstIcon === "arrow-up-short-wide" ? (
+          <Icon 
+              className="svg-inline--fa"
+              customIcon={upIcon}
+          /> ) : (
+          <Icon icon={firstIcon} />
+        )}
         </div>
       ) : (
         <div className="sort-button-icon" 
-            key={displayIcon(sortIcon)[1]}
+            key={secondIcon}
         >
-          <Icon icon={displayIcon(sortIcon)[1]} />
+        { secondIcon === "arrow-down-short-wide" ? (
+          <Icon 
+              className="svg-inline--fa"
+              customIcon={downIcon}
+          /> ) : (
+          <Icon icon={secondIcon} />
+        )}
         </div>
       )}
     </>

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -7,6 +7,7 @@ import { globalProps } from '../utilities/globalProps'
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
 import Icon from '../pb_icon/_icon'
+import { getAllIcons } from "../utilities/icons/allicons"
 
 const contactTypeMap: { [key: string]: string } = {
   'cell': 'mobile',
@@ -18,6 +19,8 @@ const contactTypeMap: { [key: string]: string } = {
   'wrong-phone': 'phone-slash',
 }
 
+const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string]: SVGElement }
+
 const formatContact = (contactString: string, contactType: string) => {
   if (contactType === 'email') return contactString
 
@@ -91,11 +94,20 @@ const Contact = (props: ContactProps): React.ReactElement => {
           dark={dark}
           tag="span"
       >
-        <Icon
-            dark={dark}
-            fixedWidth
-            icon={contactTypeMap[contactType] || 'phone'}
-        />
+          {contactType === 'email' ? (
+            <Icon 
+                className="svg-inline--fa envelope"
+                customIcon={envelopeIcon} 
+                dark={dark} 
+                fixedWidth 
+            />
+          ) : (
+            <Icon
+                dark={dark}
+                fixedWidth
+                icon={contactTypeMap[contactType] || 'phone'}
+            />
+          )}
         {` ${formatContact(contactValue, contactType)} `}
         {contactDetail && (
           <Caption

data/app/pb_kits/playbook/pb_contact/contact.html.erb

@@ -4,12 +4,20 @@
         classname: "pb_contact_kit", 
         color: "light",
         dark: object.dark
-      }) do %>
-    <%= pb_rails("icon", props: { 
-          icon: object.contact_icon, 
-          fixed_width: true,
-          dark: object.dark
-        }) %>
+  }) do %>
+    <% if contact_type == "email" %>
+      <%= pb_rails("icon", props: { 
+            custom_icon: Playbook::Engine::root.join(envelope_path),
+            fixed_width: true,
+            dark: object.dark
+      }) %>
+    <% else %>
+      <%= pb_rails("icon", props: { 
+            icon: object.contact_icon, 
+            fixed_width: true,
+            dark: object.dark
+      }) %>
+    <% end %>
     <%= object.formatted_contact_value if object.contact_value %>
 
     <%= pb_rails("caption", props: { 

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -44,6 +44,10 @@ module Playbook
         end
       end
 
+      def envelope_path
+        "app/pb_kits/playbook/utilities/icons/envelope.svg"
+      end
+
     private
 
       def formatted_value

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -79,7 +79,7 @@ test('returns correct icon', () => {
   expect(screen.getByTestId('test-home').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
   expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
   expect(screen.getByTestId('test-work-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-laptop')
-  expect(screen.getByTestId('test-email').querySelector('.pb_icon_kit')).toHaveClass('fa-envelope')
+  expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toHaveClass('envelope')
   expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-slash')
   expect(screen.getByTestId('test-wrong-type').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
   expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
+import { getAllIcons } from "../utilities/icons/allicons"
 
 import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
@@ -161,7 +162,7 @@ useEffect(() => {
     }
     return base
   }
-
+  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   return (
     <div
@@ -231,8 +232,8 @@ useEffect(() => {
                     id={`${pickerId}-angle-down`}
                 >
                   <Icon
-                      className="angle_down_icon"
-                      icon="angle-down"
+                      className="angle_down_icon svg-inline--fa"
+                      customIcon={angleDown}
                   />
                 </div>
               </div>

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -61,7 +61,7 @@
       >
         <%= pb_rails("icon", props: {
           classname: "angle_down_icon",
-          icon: "angle-down"
+          custom_icon: Playbook::Engine::root.join(angle_down_path)
         }) %>
       </div>
     <% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -118,6 +118,10 @@ module Playbook
         class_string += error_class
         class_string
       end
+
+      def angle_down_path
+        "app/pb_kits/playbook/utilities/icons/angle-down.svg"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -5,6 +5,9 @@ import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 import timeSelectPlugin from './plugins/timeSelect'
 import quickPickPlugin from './plugins/quickPick'
+import { getAllIcons } from '../utilities/icons/allicons';
+
+const angleDown = getAllIcons().angleDown.string
 
 const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -256,10 +259,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
 
-  // Adding dropdown icons to year and month selects
-  dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
+  // Adding dropdown icons to year and month select
+  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
   if (picker.monthElements[0].parentElement) {
-    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')}
+    return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDown}</i>`)}
   // if (picker.weekElements[0].parentElement){
   //   return  picker.weekElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
   // }

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -14,4 +14,4 @@
     }
     fpInline.config.onChange.push(showAngleDownHandler)
   })
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss

@@ -322,7 +322,8 @@
   background: rgba(0,0,0,0.05);
 }
 .flatpickr-current-month .numInputWrapper {
-  width: 7ch;
+  width: 6ch;
+  width: 7ch\0;
   display: inline-block;
 }
 .flatpickr-current-month .numInputWrapper span.arrowUp:after {
@@ -773,4 +774,4 @@ span.flatpickr-weekday {
     -webkit-transform: translate3d(0, 0, 0);
             transform: translate3d(0, 0, 0);
   }
-}
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss

@@ -76,7 +76,11 @@
   pointer-events: none;
   color: $text_lt_light;
 }
-
+.year-dropdown-icon svg, .month-dropdown-icon svg {
+  width: 16px;
+  margin-top: 6px;
+  margin-left: -2px;
+}
 // Left - Right Arrow Styling
 .flatpickr-prev-month {
   display: flex;
@@ -113,4 +117,4 @@
       }
     }
   }
-}
+}

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