Update prop hierarchy for kit, ensure consistent behavior between rai…

…ls and react
powerhome · Jul 22, 2024 · fa58bb0 · fa58bb0
1 parent 46bfc4f
commit fa58bb0
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 22 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx b/playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx
@@ -65,34 +65,60 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         {...dataProps}
         {...htmlProps}
     >
-        {name &&
+      {((name && !icon && !text) || (name && !icon && text)) && (
         <>
-        <Avatar
-            imageUrl={avatarUrl}
-            name={name}
-            size="xs"
-            status={null}
-        />
-        <Title
-            className="pb_form_pill_text"
-            size={4}
-            text={name}
-        />
+          <Avatar
+              imageUrl={avatarUrl}
+              name={name}
+              size="xs"
+              status={null}
+          />
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+          />
         </>
-        }
-      {icon && 
-        <Icon
-            className="pb_form_pill_icon"
-            icon={icon}
-        />
-      }
-      {text &&
+      )}
+      {((name && icon && !text) || (name && icon && text)) && (
+        <>
+          <Avatar
+              imageUrl={avatarUrl}
+              name={name}
+              size="xs"
+              status={null}
+          />
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+          />
+          <Icon
+              className="pb_form_pill_icon"
+              icon={icon}
+          />
+        </>
+      )}
+      {(!name && icon && text) && (
+        <>
+          <Icon
+              className="pb_form_pill_icon"
+              icon={icon}
+          />
+          <Title
+              className="pb_form_pill_tag"
+              size={4}
+              text={text}
+          />
+        </>
+      )}
+      {(!name && !icon && text) && (
         <Title
             className="pb_form_pill_tag"
             size={4}
             text={text}
         />
-      }
+      )}
       <div
           className="pb_form_pill_close"
           onClick={onClick}

diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb
@@ -1,5 +1,4 @@
 <%= pb_rails("form_pill", props: {
-    color: "primary",
     icon: "badge-check",
     text: "icon and tag",
     tabindex: 0,

diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb b/playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb
@@ -2,6 +2,9 @@
   <% 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" }) %>
+    <% if object.icon.present? %>
+      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+    <% end %>
   <% elsif object.text.present? %>
       <% if object.icon.present? %>
         <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>