Add icon prop to form pills, set icon size, add tests

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

@@ -89,6 +89,10 @@ $form_pill_colors: (
     outline: $primary solid 2px;
     outline-offset: -1px;
   }
+  .pb_form_pill_icon {
+    height: 12px !important;
+    width: 12px !important;
+  }
   &.small {
     height: fit-content;
     height: -moz-fit-content;

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

@@ -50,4 +50,15 @@ test('displays size variant', () => {
     )
     const kit = screen.getByTestId('formpill')
     expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
+});
+
+test('displays icon', () => {
+    render(
+        <FormPill            
+            data={{ testid: testId }}
+            icon={"test"}
+        />
+    )
+    const kit = screen.getByTestId('formpill')
+    expect(kit).toHaveClass(`pb_form_pill_kit_primary_icon none`)
 });

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

@@ -21,6 +21,7 @@ type FormPillProps = {
   color?: "primary" | "neutral",
   data?: {[key: string]: string},
   tabIndex?: number,
+  icon?: string,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -42,9 +43,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     color = "primary",
     data = {},
     tabIndex,
+    icon = "",
   } = props
+
+  const iconClass = icon ? "_icon" : ""
   const css = classnames(
-    `pb_form_pill_kit_${color}`,
+    `pb_form_pill_kit_${color}${iconClass}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
@@ -76,7 +80,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         />
         </>
         }
-
+      {icon && 
+        <Icon
+            className="pb_form_pill_icon"
+            icon={icon}
+        />
+      }
       {text &&
         <Title
             className="pb_form_pill_tag"

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

@@ -1,12 +1,16 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **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" }) %>
-        <% elsif object.text.present? %>
-          <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
-            <% end %>
-
-              <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
-                <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
-                  <% end %>
-                    <% end %>
+    <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+  <% elsif object.text.present? %>
+      <% if object.icon.present? %>
+        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+      <% end %>
+      <% if object.text.present? %>
+        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
+      <% end %>
+  <% end %>
+  <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
+    <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
+  <% end %>
+<% end %>

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

@@ -15,9 +15,10 @@ class FormPill < Playbook::KitBase
                    values: %w[primary neutral],
                    default: "primary"
       prop :tabindex
+      prop :icon
 
       def classname
-        generate_classname("pb_form_pill_kit", color, name, text, text_transform)
+        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform)
       end
 
       def display_text
@@ -27,6 +28,10 @@ def display_text
       def size_class
         size == "small" ? " small" : ""
       end
+
+      def icon_class
+        icon ? "icon" : nil
+      end
     end
   end
 end

playbook/spec/pb_kits/playbook/kits/form_pill_spec.rb

@@ -10,12 +10,14 @@
   it { is_expected.to define_prop(:avatar_url) }
   it { is_expected.to define_prop(:size) }
   it { is_expected.to define_prop(:color) }
+  it { is_expected.to define_prop(:icon) }
 
   describe "#classname" do
     it "returns namespaced class name", :aggregate_failures do
       expect(subject.new({}).classname).to eq "pb_form_pill_kit_primary_none"
       expect(subject.new(classname: "additional_class").classname).to eq "pb_form_pill_kit_primary_none additional_class"
       expect(subject.new(color: "neutral").classname).to eq "pb_form_pill_kit_neutral_none"
+      expect(subject.new(icon: "user").classname).to eq "pb_form_pill_kit_primary_icon_none"
     end
   end
 end