Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PBNTR-576] Tooltip for Truncated Form Pills #3856

Merged
merged 9 commits into from
Nov 5, 2024
8 changes: 6 additions & 2 deletions playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.scss
Original file line number Diff line number Diff line change
@@ -142,7 +142,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
height: 12px !important;
width: 12px !important;
padding-right: $space_xs;
+ .pb_form_pill_text, + .pb_form_pill_tag {
+ .pb_form_pill_text, + .pb_form_pill_tag,
+ .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
+ div .pb_form_pill_text, + div .pb_form_pill_tag {
padding-left: 0;
}
}
@@ -169,7 +171,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
}
.pb_form_pill_icon {
padding-right: $space_xxs;
+ .pb_form_pill_text, + .pb_form_pill_tag {
+ .pb_form_pill_text, + .pb_form_pill_tag,
+ .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
+ div .pb_form_pill_text, + div .pb_form_pill_tag {
padding-left: 0;
}
}
56 changes: 30 additions & 26 deletions playbook/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@ import classnames from 'classnames'
import Title from '../pb_title/_title'
import Icon from '../pb_icon/_icon'
import Avatar from '../pb_avatar/_avatar'
import Tooltip from '../pb_tooltip/_tooltip'
import { globalProps, GlobalProps } from '../utilities/globalProps'
import { buildDataProps, buildHtmlProps } from '../utilities/props'

@@ -62,6 +63,30 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
const dataProps = buildDataProps(data)
const htmlProps = buildHtmlProps(htmlOptions)

const renderTitle = (content: string, className: string) => {
const titleComponent = (
<Title
className={className}
size={4}
text={content}
truncate={props.truncate}
/>
)
if (props.truncate) {
return (
<Tooltip
interaction
placement="top"
position="fixed"
text={content}
>
{titleComponent}
</Tooltip>
)
}
return titleComponent
}

return (
<div className={css}
id={id}
@@ -77,12 +102,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
size="xxs"
status={null}
/>
<Title
className="pb_form_pill_text"
size={4}
text={name}
truncate={props.truncate}
/>
{renderTitle(name, "pb_form_pill_text")}
</>
)}
{((name && icon && !text) || (name && icon && text)) && (
@@ -93,12 +113,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
size="xxs"
status={null}
/>
<Title
className="pb_form_pill_text"
size={4}
text={name}
truncate={props.truncate}
/>
{renderTitle(name, "pb_form_pill_text")}
<Icon
className="pb_form_pill_icon"
color={color}
@@ -113,22 +128,10 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
color={color}
icon={icon}
/>
<Title
className="pb_form_pill_tag"
size={4}
text={text}
truncate={props.truncate}
/>
{renderTitle(text, "pb_form_pill_tag")}
</>
)}
{(!name && !icon && text) && (
<Title
className="pb_form_pill_tag"
size={4}
text={text}
truncate={props.truncate}
/>
)}
{(!name && !icon && text) && renderTitle(text, "pb_form_pill_tag")}
<div
className="pb_form_pill_close"
onClick={onClick}
@@ -143,4 +146,5 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
</div>
)
}

export default FormPill
Original file line number Diff line number Diff line change
@@ -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 %>
Original file line number Diff line number Diff line change
@@ -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) => {
<Typeahead
htmlOptions={{ style: { maxWidth: "240px" }}}
isMulti
label="Names"
label="Truncation Within Typeahead"
options={names}
truncate={1}
{...props}
/>
<Caption text="Form Pill Truncation"/>
<Card maxWidth="xs">
<FormPill
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
onClick={() => alert('Click!')}
tabIndex={0}
truncate={1}
/>
<FormPill
icon="badge-check"
onClick={() => {alert('Click!')}}
tabIndex={0}
text="icon and a very long tag to show truncation"
truncate={1}
/>
<FormPill
onClick={() => {alert('Click!')}}
tabIndex={0}
text="form pill with a very long tag to show truncation"
truncate={1}
/>
</Card>
</>
)
}

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
@@ -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.
54 changes: 46 additions & 8 deletions playbook/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb
Original file line number Diff line number Diff line change
@@ -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 %>
<div>
<%= 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 %>
</div>
<% 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 %>
<div>
<%= 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 %>
</div>
<% 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 %>
Loading