fix: Update DefinitionListItem and Breadcrumbs components to truncate long strings

CHANGELOG.md

@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   Update `<DefinitionListItem />` and `<Breadcrumbs />` core components to truncate long strings
+
 ## [1.0.50] - 2024-10-23
 
 ### Changed

src/core/components/breadcrumbs/breadcrumbs.stories.tsx

@@ -24,9 +24,9 @@ export const Default: Story = {
 };
 
 /**
- * Usage example of the Breadcrumb component with full props.
+ * Usage example of the Breadcrumb component with multiple links.
  */
-export const Loaded: Story = {
+export const MultipleLinks: Story = {
     args: {
         links: [
             { label: 'Root', href: '/' },
@@ -38,4 +38,21 @@ export const Loaded: Story = {
     },
 };
 
+/**
+ *
+ */
+export const LongLinks: Story = {
+    args: {
+        links: [
+            { label: 'Page', href: '/page' },
+            { label: 'Landing page', href: '/landing' },
+            {
+                label: '57315882981128814746779425043803154429950896059301423809907842839317903353083978465312',
+                href: '/landing/long',
+            },
+        ],
+        tag: { label: 'Long', variant: 'warning' },
+    },
+};
+
 export default meta;

src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -15,32 +15,37 @@ export interface IBreadcrumbsLink {
 
 export interface IBreadcrumbsProps {
     /**
-     * Array of BreadcrumbsLink objects `{label: string, href?: string}`
+     * Array of BreadcrumbsLink objects (@see IBreadcrumbsLink).
      * The array indicates depth from the current position to be displayed in the Breadcrumbs.
      * Starting at index 0 you must define the root up to the current location.
      * The final index which will render as non-active and without separator.
      */
     links: IBreadcrumbsLink[];
     /**
-     * Optional tag pill to be displayed at the end of the Breadcrumbs for extra info. @type ITagProps
+     * Optional tag pill to be displayed at the end of the Breadcrumbs for extra info.
      */
     tag?: ITagProps;
 }
 
-export const Breadcrumbs: React.FC<IBreadcrumbsProps> = ({ links, tag, ...otherProps }) => {
+export const Breadcrumbs: React.FC<IBreadcrumbsProps> = (props) => {
+    const { links, tag, ...otherProps } = props;
+
     const currentPage = links[links.length - 1];
     const pathLinks = links.slice(0, -1);
 
     return (
-        <nav aria-label="Breadcrumbs" className="flex items-center gap-x-2" {...otherProps}>
-            <ol className="flex items-center gap-x-0.5">
+        <nav aria-label="breadcrumbs" className="flex min-w-0 items-center gap-x-2" {...otherProps}>
+            <ol className="flex min-w-0 items-center gap-x-0.5">
                 {pathLinks.map((link) => (
                     <li key={link.href} className="flex items-center gap-x-1 whitespace-nowrap">
                         <Link href={link.href}>{link.label}</Link>
                         <Icon icon={IconType.SLASH} className="text-neutral-200" responsiveSize={{ md: 'lg' }} />
                     </li>
                 ))}
-                <li aria-current="page" className="text-sm font-normal leading-tight text-neutral-500 md:text-base">
+                <li
+                    aria-current="page"
+                    className="truncate text-sm font-normal leading-tight text-neutral-500 md:text-base"
+                >
                     {currentPage.label}
                 </li>
             </ol>

src/core/components/definitionList/definitionListItem/definitionListItem.stories.tsx

@@ -1,9 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 import { DefinitionList, type IDefinitionListItemProps } from '../index';
 
 const meta: Meta<typeof DefinitionList.Item> = {
     title: 'Core/Components/DefinitionList/DefinitionList.Item',
     component: DefinitionList.Item,
+    decorators: (Story: ComponentType) => (
+        <DefinitionList.Container>
+            <Story />
+        </DefinitionList.Container>
+    ),
     parameters: {
         design: {
             type: 'figma',
@@ -20,12 +26,8 @@ type Story = StoryObj<typeof DefinitionList.Item>;
 export const Default: Story = {
     args: {
         term: 'First Item Term',
+        children: 'First item description',
     },
-    render: (props: IDefinitionListItemProps) => (
-        <DefinitionList.Container>
-            <DefinitionList.Item {...props}>First item description</DefinitionList.Item>
-        </DefinitionList.Container>
-    ),
 };
 
 /**
@@ -36,13 +38,27 @@ export const WithComponent: Story = {
         term: 'First Item Term',
     },
     render: (props: IDefinitionListItemProps) => (
-        <DefinitionList.Container>
-            <DefinitionList.Item {...props}>
-                <div className="flex h-96 w-full items-center justify-center border border-dashed bg-success-100">
-                    Any React Node Child
-                </div>
-            </DefinitionList.Item>
-        </DefinitionList.Container>
+        <DefinitionList.Item {...props}>
+            <div className="flex h-96 w-full items-center justify-center border border-dashed bg-success-100">
+                Any React Node Child
+            </div>
+        </DefinitionList.Item>
+    ),
+};
+
+/**
+ * Usage of the DefinitionList.Item component with a truncated long string.
+ */
+export const TruncateDefinition: Story = {
+    args: {
+        term: 'Long string',
+    },
+    render: (props: IDefinitionListItemProps) => (
+        <DefinitionList.Item {...props}>
+            <div className="truncate text-neutral-500">
+                5731588298112881474677942504380315442995089605930142380990784283931790335308357315882981128814746779425043803154429950896059301423809907842839317903353083
+            </div>
+        </DefinitionList.Item>
     ),
 };
 

src/core/components/definitionList/definitionListItem/definitionListItem.tsx

@@ -22,7 +22,7 @@ export const DefinitionListItem: React.FC<IDefinitionListItemProps> = (props) =>
             <dt className="line-clamp-1 shrink-0 text-base font-normal leading-relaxed text-neutral-800 md:line-clamp-6 md:w-40">
                 {term}
             </dt>
-            <dd className="size-full text-base font-normal leading-relaxed text-neutral-800">{children}</dd>
+            <dd className="size-full min-w-0 text-base font-normal leading-relaxed text-neutral-800">{children}</dd>
         </div>
     );
 };