{
size="xxs"
status={null}
/>
- {
color={color}
icon={icon}
/>
-
+ alert('Click!')}
+ tabIndex={0}
+ truncate={1}
+ />
+ {alert('Click!')}}
+ tabIndex={0}
+ text="icon and a very long tag to show truncation"
+ truncate={1}
+ />
+ {alert('Click!')}}
+ tabIndex={0}
+ text="form pill with a very long tag to show truncation"
+ truncate={1}
+ />
+
)
}
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md
deleted file mode 100644
index e960dc2deb..0000000000
--- a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md
+++ /dev/null
@@ -1 +0,0 @@
-For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md
new file mode 100644
index 0000000000..fc0593464e
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md
@@ -0,0 +1,3 @@
+For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+
+__NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md
new file mode 100644
index 0000000000..5b35756d8c
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md
@@ -0,0 +1 @@
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
\ No newline at end of file
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
index b9ddf68b86..4e42ddabb6 100644
--- 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
@@ -1,19 +1,57 @@
<%= 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: "xxs" }) %>
- <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+ <% if object.truncate %>
+
{
)
}
+
export default FormPill
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
index 3e66bb7446..a298f19a09 100644
--- a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
@@ -13,7 +13,30 @@
id: "typeahead-form-pill",
is_multi: true,
options: names,
- label: "Names",
+ label: "Truncation Within Typeahead",
pills: true,
truncate: 1,
}) %>
+
+<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
+<%= pb_rails("card", props: { max_width: "xs" }) do %>
+ <%= pb_rails("form_pill", props: {
+ name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+ tabindex: 0,
+ truncate: 1,
+ id: "truncation-1"
+ }) %>
+ <%= pb_rails("form_pill", props: {
+ icon: "badge-check",
+ text: "icon and a very long tag to show truncation",
+ tabindex: 0,
+ truncate: 1,
+ id: "truncation-2"
+ }) %>
+ <%= pb_rails("form_pill", props: {
+ text: "form pill long tag no tooltip show truncation",
+ tabindex: 0,
+ truncate: 1,
+ }) %>
+<% end %>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
index b599017782..51a8a3e2a5 100644
--- a/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
+++ b/playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
@@ -1,5 +1,5 @@
import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
const names = [
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,11 +15,34 @@ const FormPillTruncatedText = (props) => {
+ <%= pb_rails("title", props: {
+ classname: "pb_form_pill_text truncate_#{object.truncate}",
+ id: object.id,
+ size: 4,
+ text: object.name,
+ }) %>
+ <% if object.id.present? %>
+ <%= pb_rails("tooltip", props: {
+ position: "top",
+ tooltip_id: "tooltip-#{object.id}",
+ trigger_element_selector: "##{object.id}"
+ }) do %>
+ <%= object.name %>
+ <% end %>
+ <% end %>
+
+ <% else %>
+ <%= pb_rails("title", props: { classname: "pb_form_pill_text", id: object.id, size: 4, text: object.name }) %>
+ <% end %>
<% if object.icon.present? %>
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
<% end %>
<% elsif object.text.present? %>
- <% if object.icon.present? %>
- <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
- <% end %>
- <% if object.text.present? %>
- <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
- <% end %>
+ <% if object.icon.present? %>
+ <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
+ <% end %>
+ <% if object.truncate %>
+
+ <%= pb_rails("title", props: {
+ classname: "pb_form_pill_tag truncate_#{object.truncate}",
+ id: object.id,
+ size: 4,
+ text: object.text,
+ }) %>
+ <% if object.id.present? %>
+ <%= pb_rails("tooltip", props: {
+ position: "top",
+ tooltip_id: "tooltip-#{object.id}",
+ trigger_element_selector: "##{object.id}"
+ }) do %>
+ <%= object.text %>
+ <% end %>
+ <% end %>
+
+ <% else %>
+ <%= pb_rails("title", props: { classname: "pb_form_pill_tag", id: object.id, size: 4, text: object.text, }) %>
+ <% end %>
<% end %>
<%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
<%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
<% end %>
-<% end %>
+<% end %>
\ No newline at end of file