fix(form-pill): fix issues where pill text not being truncated

.changeset/violet-cows-share.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/form-pill-group": patch
+"@twilio-paste/core": patch
+---
+
+[FormPillGroup] fixed a bug where long text in a form pill would wrap and break styling. Text within FormPill is now truncated so FormPill(s) will not stretch beyond FormPillGroup width.

packages/paste-core/components/combobox/package.json

@@ -55,6 +55,7 @@
     "@twilio-paste/styling-library": "^3.0.0",
     "@twilio-paste/text": "^10.0.0",
     "@twilio-paste/theme": "^11.0.0",
+    "@twilio-paste/truncate": "^14.0.0",
     "@twilio-paste/types": "^6.0.0",
     "@twilio-paste/uid-library": "^2.0.0",
     "@twilio-paste/utils": "^5.0.0",
@@ -89,6 +90,7 @@
     "@twilio-paste/styling-library": "^3.0.0",
     "@twilio-paste/text": "^10.1.0",
     "@twilio-paste/theme": "^11.0.1",
+    "@twilio-paste/truncate": "^14.1.0",
     "@twilio-paste/types": "^6.0.0",
     "@twilio-paste/uid-library": "^2.0.0",
     "@twilio-paste/utils": "^5.0.0",

packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx

@@ -688,3 +688,27 @@ export default {
     ),
   ],
 } as Meta;
+
+export const MultiselectComboboxInNarrowContainer = (): React.ReactNode => {
+  const [inputValue, setInputValue] = React.useState("");
+  const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);
+
+  return (
+    <Box maxWidth="300px">
+      <MultiselectCombobox
+        labelText="Choose a Paste Component"
+        selectedItemsLabelText="Selected Paste components"
+        helpText="Paste components are the building blocks of your product UI."
+        items={filteredItems}
+        onInputValueChange={({ inputValue: newInputValue = "" }) => {
+          setInputValue(newInputValue);
+        }}
+        onSelectedItemsChange={(selectedItems) => {
+          // eslint-disable-next-line no-console
+          console.log(selectedItems);
+        }}
+      />
+    </Box>
+  );
+};
+MultiselectComboboxInNarrowContainer.storyName = "Narrow Contrainer";

packages/paste-core/components/form-pill-group/package.json

@@ -39,6 +39,7 @@
     "@twilio-paste/style-props": "^9.0.0",
     "@twilio-paste/styling-library": "^3.0.0",
     "@twilio-paste/theme": "^11.0.0",
+    "@twilio-paste/truncate": "^14.0.0",
     "@twilio-paste/types": "^6.0.0",
     "@twilio-paste/uid-library": "^2.0.0",
     "@types/react": "^16.8.6 || ^17.0.2 || ^18.0.27",
@@ -58,6 +59,7 @@
     "@twilio-paste/style-props": "^9.1.0",
     "@twilio-paste/styling-library": "^3.0.0",
     "@twilio-paste/theme": "^11.0.0",
+    "@twilio-paste/truncate": "^14.1.0",
     "@twilio-paste/types": "^6.0.0",
     "@twilio-paste/uid-library": "^2.0.0",
     "@types/react": "^18.0.27",

packages/paste-core/components/form-pill-group/src/FormPill.tsx

@@ -140,6 +140,7 @@ export const FormPill = React.forwardRef<HTMLElement, FormPillProps>(
         position="relative"
         display="inline-block"
         borderRadius="borderRadiusPill"
+        maxWidth="100%"
         {...computedStyles}
       >
         <CompositeItem

packages/paste-core/components/form-pill-group/src/FormPillButton.tsx

@@ -2,6 +2,7 @@ import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
 import type { BoxElementProps, BoxProps } from "@twilio-paste/box";
 import { ErrorIcon } from "@twilio-paste/icons/esm/ErrorIcon";
 import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
+import { Truncate } from "@twilio-paste/truncate";
 import * as React from "react";
 
 import { hoverPillStyles, pillStyles } from "./FormPill.styles";
@@ -33,6 +34,24 @@ const sizeStyles: Record<FormPillGroupSizeVariant, Pick<BoxProps, "fontSize" | "
   },
 };
 
+const renderChildren = (children: React.ReactNode): React.ReactNode => {
+  if (typeof children === "string") {
+    return <Truncate title={children}>{children}</Truncate>;
+  }
+
+  if (React.isValidElement(children)) {
+    return <children.type {...children.props}>{renderChildren(children.props.children)}</children.type>;
+  }
+
+  if (Array.isArray(children)) {
+    return children.map((child, index) => (
+      <React.Fragment key={`PILL-CHILD-${index}`}>{renderChildren(child)}</React.Fragment>
+    ));
+  }
+
+  return children;
+};
+
 export const FormPillButton = React.forwardRef<HTMLElement, FormPillStylesProps>(
   (
     {
@@ -77,6 +96,7 @@ export const FormPillButton = React.forwardRef<HTMLElement, FormPillStylesProps>
         paddingLeft="space30"
         paddingRight={isDismissable ? (size === "large" ? "space90" : "space80") : "space30"}
         transition="background-color 150ms ease-in, border-color 150ms ease-in, box-shadow 150ms ease-in, color 150ms ease-in"
+        maxWidth="100%"
         {...computedStyles}
       >
         <Box display="flex" height="100%" alignItems="center" columnGap="space20" opacity={isDisabled ? 0.3 : 1}>
@@ -86,7 +106,8 @@ export const FormPillButton = React.forwardRef<HTMLElement, FormPillStylesProps>
               <ScreenReaderOnly>{i18nErrorLabel}</ScreenReaderOnly>
             </>
           ) : null}
-          {props.children}
+
+          {renderChildren(props.children)}
         </Box>
       </Box>
     );

packages/paste-core/components/form-pill-group/src/FormPillGroup.tsx

@@ -88,6 +88,7 @@ const FormPillGroupStyles = React.forwardRef<HTMLUListElement, FormPillGroupProp
           padding="space0"
           display={display}
           flexWrap="wrap"
+          maxWidth="100%"
           {...SizeStyles[size]}
         >
           {props.children}

packages/paste-core/components/form-pill-group/stories/index.stories.tsx

@@ -2,6 +2,7 @@
 import { Avatar } from "@twilio-paste/avatar";
 import { Box } from "@twilio-paste/box";
 import { CalendarIcon } from "@twilio-paste/icons/esm/CalendarIcon";
+import { Stack } from "@twilio-paste/stack";
 import * as React from "react";
 
 import { FormPill, FormPillGroup, useFormPillState } from "../src";
@@ -177,6 +178,69 @@ export const FormPillTreeVariant = (): JSX.Element => {
 
 FormPillTreeVariant.storyName = "FormPillGroup Tree Variant";
 
+export const PillStringOverflowVSComposed: React.FC<
+  React.PropsWithChildren<{
+    selected?: boolean;
+    dismissable?: boolean;
+    disabled?: boolean;
+    ariaLabel?: string;
+    size?: FormPillGroupSizeVariant;
+  }>
+> = ({ selected = false, dismissable = true, disabled = false, ariaLabel = "Basic pills:", size }) => {
+  const pillState = useFormPillState();
+  const pillState2 = useFormPillState();
+
+  return (
+    <Box maxWidth="150px">
+      <Stack orientation="vertical" spacing="space80">
+        <FormPillGroup {...pillState} data-testid="form-pill-group-1" aria-label={ariaLabel} size={size}>
+          {PILL_NAMES.map((pill, index) => (
+            <FormPill
+              key={`${pill}-1`}
+              data-testid={`form-pill-${index}-01`}
+              {...pillState}
+              selected={selected}
+              variant={index > 2 ? "error" : "default"}
+              onDismiss={dismissable ? () => {} : undefined}
+              disabled={disabled}
+            >
+              {index % 3 === 2 ? (
+                <Avatar
+                  size={size === "large" ? "sizeIcon20" : "sizeIcon10"}
+                  name="avatar example"
+                  src="./avatars/avatar4.png"
+                />
+              ) : null}
+              {index % 3 === 1 ? (
+                <CalendarIcon decorative size={size === "large" ? "sizeIcon20" : "sizeIcon10"} />
+              ) : null}
+              {pill}
+            </FormPill>
+          ))}
+        </FormPillGroup>
+
+        <FormPillGroup {...pillState2} data-testid="form-pill-group-2" aria-label={ariaLabel} size={size}>
+          {PILL_NAMES.map((pill, index) => (
+            <FormPill
+              key={`${pill}-2`}
+              data-testid={`form-pill-${index}-02`}
+              {...pillState2}
+              selected={selected}
+              variant={index > 2 ? "error" : "default"}
+              onDismiss={dismissable ? () => {} : undefined}
+              disabled={disabled}
+            >
+              {pill}
+            </FormPill>
+          ))}
+        </FormPillGroup>
+      </Stack>
+    </Box>
+  );
+};
+
+PillStringOverflowVSComposed.storyName = "Pill String Overflow vs Composed";
+
 // eslint-disable-next-line import/no-default-export
 export default {
   title: "Components/Form Pill Group",

packages/paste-core/components/popover/package.json

@@ -44,6 +44,7 @@
     "@twilio-paste/styling-library": "^3.0.0",
     "@twilio-paste/text": "^10.0.0",
     "@twilio-paste/theme": "^11.0.0",
+    "@twilio-paste/truncate": "^14.0.0",
     "@twilio-paste/types": "^6.0.0",
     "@twilio-paste/uid-library": "^2.0.0",
     "@types/react": "^16.8.6 || ^17.0.2 || ^18.0.27",
@@ -71,6 +72,7 @@
     "@twilio-paste/styling-library": "^3.0.0",
     "@twilio-paste/text": "^10.1.0",
     "@twilio-paste/theme": "^11.0.0",
+    "@twilio-paste/truncate": "^14.1.0",
     "@twilio-paste/types": "^6.0.0",
     "@twilio-paste/uid-library": "^2.0.0",
     "@types/react": "^18.0.27",

yarn.lock

@@ -12207,6 +12207,7 @@ __metadata:
     "@twilio-paste/styling-library": ^3.0.0
     "@twilio-paste/text": ^10.1.0
     "@twilio-paste/theme": ^11.0.1
+    "@twilio-paste/truncate": ^14.1.0
     "@twilio-paste/types": ^6.0.0
     "@twilio-paste/uid-library": ^2.0.0
     "@twilio-paste/utils": ^5.0.0
@@ -12244,6 +12245,7 @@ __metadata:
     "@twilio-paste/styling-library": ^3.0.0
     "@twilio-paste/text": ^10.0.0
     "@twilio-paste/theme": ^11.0.0
+    "@twilio-paste/truncate": ^14.0.0
     "@twilio-paste/types": ^6.0.0
     "@twilio-paste/uid-library": ^2.0.0
     "@twilio-paste/utils": ^5.0.0
@@ -13073,6 +13075,7 @@ __metadata:
     "@twilio-paste/style-props": ^9.1.0
     "@twilio-paste/styling-library": ^3.0.0
     "@twilio-paste/theme": ^11.0.0
+    "@twilio-paste/truncate": ^14.1.0
     "@twilio-paste/types": ^6.0.0
     "@twilio-paste/uid-library": ^2.0.0
     "@types/react": ^18.0.27
@@ -13094,6 +13097,7 @@ __metadata:
     "@twilio-paste/style-props": ^9.0.0
     "@twilio-paste/styling-library": ^3.0.0
     "@twilio-paste/theme": ^11.0.0
+    "@twilio-paste/truncate": ^14.0.0
     "@twilio-paste/types": ^6.0.0
     "@twilio-paste/uid-library": ^2.0.0
     "@types/react": ^16.8.6 || ^17.0.2 || ^18.0.27
@@ -14109,6 +14113,7 @@ __metadata:
     "@twilio-paste/styling-library": ^3.0.0
     "@twilio-paste/text": ^10.1.0
     "@twilio-paste/theme": ^11.0.0
+    "@twilio-paste/truncate": ^14.1.0
     "@twilio-paste/types": ^6.0.0
     "@twilio-paste/uid-library": ^2.0.0
     "@types/react": ^18.0.27
@@ -14137,6 +14142,7 @@ __metadata:
     "@twilio-paste/styling-library": ^3.0.0
     "@twilio-paste/text": ^10.0.0
     "@twilio-paste/theme": ^11.0.0
+    "@twilio-paste/truncate": ^14.0.0
     "@twilio-paste/types": ^6.0.0
     "@twilio-paste/uid-library": ^2.0.0
     "@types/react": ^16.8.6 || ^17.0.2 || ^18.0.27