playbook_ui 14.6.2.pre.alpha.PLAY1551tiptapextbump4350 → 14.6.2.pre.alpha.PLAY1613darkdatetimecolors4432

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2cc93bf2d7fe805d4a429a22e453f5b0611e6640c8c9412295200f19445acd3
-  data.tar.gz: 11093062f7f9caa106b2c805400f779b2f8413ff21cda0ddd3a3c063662ba94e
+  metadata.gz: db6a77d5d0d5f2f583dec0ae055971d993b86ed35cebb3df70a3eb46c520f60e
+  data.tar.gz: 9f214f19a94bce463d9561600773513112947c453c8a87248c4a37740103ac47
 SHA512:
-  metadata.gz: 3e65ac77d1e95398832bfbe710db224b7e99f1042870f6915bc75a5673300b2f78916e89dd86991b0a379a37f2de5d81477c91a057c3855e3c574ed7816ea1ef
-  data.tar.gz: 4f88a4362e06630eb22a588539f5fb9d64b20d4e79fb57dac0443633ae4b22ed4e3516392580e52112cddaf10e56b9ffc207ec6d70d96556a8fc684c03dfe171
+  metadata.gz: 6d30fd7598b3c3094e108bfe2f611be040ccdc4ce8bdfdf085c6757e62b386031f890e58607e825da501479e5734974f8134fb4738a0890d1bf8caf5fb923da2
+  data.tar.gz: 19958248e4ee7a1a3d13efc7ba1debe4891bc58bd2ff790b33fc272a739a24789d98454b6e61b61210fafb5ceef4af94afe75f27a77122fde54b91fca6e0bd76

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,3 @@
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
@@ -85,6 +84,7 @@
 @import 'pb_selectable_card_icon/selectable_card_icon';
 @import 'pb_selectable_icon/selectable_icon';
 @import 'pb_selectable_list/selectable_list';
+@import 'pb_skeleton_loading/skeleton_loading';
 @import 'pb_source/source';
 @import 'pb_star_rating/star_rating';
 @import 'pb_stat_change/stat_change';

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

@@ -16,6 +16,7 @@ interface CustomCellProps {
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   row: Row<GenericObject>
   value?: string
+  customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
 } 
 
 export const CustomCell = ({
@@ -23,6 +24,7 @@ export const CustomCell = ({
   onRowToggleClick,
   row,
   value,
+  customRenderer,
 }: CustomCellProps & GlobalProps) => {
   const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
 
@@ -61,7 +63,12 @@ export const CustomCell = ({
           </button>
         ) : null}
         <FlexItem paddingLeft={renderButton? "none" : "xs"}>
-          {row.depth === 0 ? getValue() : value}
+          {row.depth === 0 ? (
+            customRenderer ? customRenderer(row, getValue()) : getValue()
+           ) :(
+            customRenderer ? customRenderer(row, value) : value
+           )
+           }
         </FlexItem>
       </Flex>
     </div>

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -90,8 +90,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   const columnHelper = createColumnHelper()
 
-  //Create cells for first columns
-  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element) => {
+  //Create cells for columns, with customization for first column
+  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, index?: number) => {
     const columnCells = ({
       row,
       getValue,
@@ -101,19 +101,16 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }) => {
       const rowData = row.original
 
-    // Use customRenderer if provided, otherwise default rendering
-    if (customRenderer) {
-      return customRenderer(row, getValue())
-    }
-
+    if (index === 0) {
       switch (row.depth) {
         case 0: {
           return (
-            <CustomCell
-                getValue={getValue}
-                onRowToggleClick={onRowToggleClick}
-                row={row}
-            />
+                <CustomCell
+                    customRenderer={customRenderer}
+                    getValue={getValue}
+                    onRowToggleClick={onRowToggleClick}
+                    row={row}
+                />
           )
         }
         default: {
@@ -122,6 +119,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           const accessorValue = rowData[depthAccessor]
           return accessorValue ? (
             <CustomCell
+                customRenderer={customRenderer}
                 onRowToggleClick={onRowToggleClick}
                 row={row} 
                 value={accessorValue} 
@@ -132,11 +130,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         }
       }
     }
-
+    return customRenderer
+    ? customRenderer(row, getValue())
+    : getValue()
+    }
     return columnCells
   }
-
-  //Create column array in format needed by Tanstack
+//Create column array in format needed by Tanstack
   const columns =
     columnDefinitions &&
       columnDefinitions.map((column, index) => {
@@ -147,19 +147,12 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         }),
       }
 
-  // Use the custom renderer if provided, EXCEPT for the first column
-  if (index !== 0) {
-    if (column.cellAccessors || column.customRenderer) {
-      columnStructure.cell = createCellFunction(
-        column.cellAccessors,
-        column.customRenderer
-      )
-    }
-  } else {
-    // For the first column, apply createCellFunction without customRenderer
-    if (column.cellAccessors) {
-      columnStructure.cell = createCellFunction(column.cellAccessors)
-    }
+  if (column.cellAccessors || column.customRenderer) {
+    columnStructure.cell = createCellFunction(
+      column.cellAccessors,
+      column.customRenderer,
+      index
+    )
   }
 
   return columnStructure

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from "react"
 import { render, screen, waitFor } from "../utilities/test-utils"
 
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable, Pill } from "playbook-ui"
 
 const MOCK_DATA = [
   {
@@ -88,6 +88,28 @@ const columnDefinitions = [
   },
 ]
 
+const columnDefinitionsCustomRenderer = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+    customRenderer: (row, value) => (
+      <Pill text={value} 
+          variant="success"    
+      />
+    ),
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+]
+
+
 const subRowHeaders = ["Quarter"]
 
 const testId = "advanced_table"
@@ -463,3 +485,17 @@ test("responsive none prop functions as expected", () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
 })
+
+test("customRenderer prop functions as expected", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitionsCustomRenderer}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const pill = kit.querySelector(".pb_pill_kit_success_lowercase")
+  expect(pill).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
+import { AdvancedTable, Pill, Body, Flex, Detail, Caption, Badge, Title } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCustomCell = (props) => {
@@ -8,7 +8,18 @@ const AdvancedTableCustomCell = (props) => {
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
-
+      customRenderer: (row, value) => (
+        <Flex>
+          <Title size={4}
+              text={value} 
+          />
+          <Badge dark
+              marginLeft="xxs"
+              text={row.original.newEnrollments > 20 ? "High" : "Low"}
+              variant="neutral"
+          />
+        </Flex>
+      ), 
     },
     {
       accessor: "newEnrollments",

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -5,7 +5,7 @@ import { get } from 'lodash'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
@@ -49,6 +49,7 @@ type CardBodyProps = {
   padding?: string,
 } & GlobalProps
 
+
 // Header component
 const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
@@ -107,6 +108,10 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   // coerce to array
   const cardChildren = React.Children.toArray(children)
+  const dynamicInlineProps = globalInlineProps(props);
+  const { style: htmlStyle = {}, ...restHtmlProps } = htmlProps as { style?: React.CSSProperties };
+  const mergedStyles: React.CSSProperties = { ...htmlStyle, ...dynamicInlineProps };
+
 
   const subComponentTags = (tagName: string) => {
     return cardChildren.filter((c: string) => (
@@ -122,7 +127,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   const tagOptions = ['div', 'section', 'footer', 'header', 'article', 'aside', 'main', 'nav']
   const Tag = tagOptions.includes(tag) ? tag : 'div'
-
+  
   return (
     <>
     {
@@ -133,8 +138,9 @@ const Card = (props: CardPropTypes): React.ReactElement => {
         <Tag
             {...ariaProps}
             {...dataProps}
-            {...htmlProps}
             className={classnames(cardCss, globalProps(props), className)}
+            {...restHtmlProps}
+            style={mergedStyles} 
         >
           {subComponentTags('Header')}
           {
@@ -161,8 +167,9 @@ const Card = (props: CardPropTypes): React.ReactElement => {
           <Tag
               {...ariaProps}
               {...dataProps}
-              {...htmlProps}
               className={classnames(cardCss, globalProps(props), className)}
+              {...restHtmlProps}
+              style={mergedStyles} 
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}

data/app/pb_kits/playbook/pb_date/_date.scss

@@ -28,5 +28,8 @@
         [class^=pb_title_kit] {
             color: $text_dk_default !important;
         }
+        [class^=pb_body_kit], [class^=pb_caption_kit] {
+            color: $text_dk_light !important;
+        }
     }
 }

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -6,7 +6,7 @@ import classnames from "classnames";
 import Modal from "react-modal";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
+import { globalProps, globalInlineProps } from "../utilities/globalProps";
 
 import Body from "../pb_body/_body";
 import Button from "../pb_button/_button";
@@ -91,6 +91,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
     beforeClose: "pb_dialog_overlay_before_close",
   };
 
+  const dynamicInlineProps = globalInlineProps(props); 
+
   const classes = classnames(
     buildCss("pb_dialog_wrapper"),
     globalProps(props),
@@ -184,6 +186,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
+            style={{ content: dynamicInlineProps }}
         >
           <>
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -192,6 +195,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
               <Dialog.Body
                   className="dialog_status_text_align"
                   padding="md"
+              
               >
                 <Flex align="center"
                     orientation="column"

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -47,7 +47,7 @@ interface DropdownComponent
     Container: typeof DropdownContainer;
 }
 
-const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
+let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const {
         aria = {},
         autocomplete = false,
@@ -260,7 +260,7 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
                             <DropdownContainer>
                                 {optionsWithBlankSelection &&
                                     optionsWithBlankSelection?.map((option: GenericObject) => (
-                                        <Dropdown.Option key={option.id}
+                                        <DropdownOption key={option.id}
                                             option={option}
                                         />
                                     ))}
@@ -278,11 +278,12 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
             </DropdownContext.Provider>
         </div>
     )
-}) as DropdownComponent
+}
 
-Dropdown.displayName = "Dropdown";
-Dropdown.Option = DropdownOption;
-Dropdown.Trigger = DropdownTrigger;
-Dropdown.Container = DropdownContainer;
+Dropdown = forwardRef(Dropdown) as unknown as DropdownComponent;
+(Dropdown as DropdownComponent).displayName = "Dropdown";
+(Dropdown as DropdownComponent).Option = DropdownOption;
+(Dropdown as DropdownComponent).Trigger = DropdownTrigger;
+(Dropdown as DropdownComponent).Container = DropdownContainer;
 
 export default Dropdown;

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
 type FlexProps = {
@@ -61,6 +61,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
   const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
+  const dynamicInlineProps = globalInlineProps(props)
 
 
   return (
@@ -83,6 +84,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
         globalProps(props),
         className
       )}
+        style={dynamicInlineProps}
         {...dataProps}
         {...htmlProps}
     >

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
 type FlexItemPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   fixedSize?: string,
@@ -35,14 +35,20 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `order_${order}` : null
+  const dynamicInlineProps = globalInlineProps(props)
+  const combinedStyles = {
+    ...fixedStyle,
+    ...dynamicInlineProps
+  }
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
+
   return (
     <div
         {...htmlProps}
         className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
-        style={fixedStyle}
+        style={combinedStyles}
     >
       {children}
     </div>

data/app/pb_kits/playbook/pb_flex/flex_item.html.erb

@@ -1,8 +1,5 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    style: object.style_value,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div, 
+  style: object.inline_styles
+) do %> 
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -20,8 +20,13 @@ module Playbook
         generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
       end
 
-      def style_value
-        "flex-basis: #{fixed_size};" if fixed_size.present?
+      def inline_styles
+        styles = []
+        styles << "flex-basis: #{fixed_size};" if fixed_size.present?
+        styles << "height: #{height};" if height.present?
+        styles << "min-height: #{min_height};" if min_height.present?
+        styles << "max-height: #{max_height};" if max_height.present?
+        styles.join(" ")
       end
 
     private

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

@@ -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;
       }
     }

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

@@ -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

data/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 %>

data/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) => {
       <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>
     </>
   )
 }

data/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.

data/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.