From 662be4a227a0e884e83fc760836ee4120ccc5416 Mon Sep 17 00:00:00 2001 From: Ruggero Cino Date: Wed, 23 Oct 2024 11:12:27 +0200 Subject: [PATCH 1/3] fix: Update DefinitionListItem style to support truncation of long definitions --- CHANGELOG.md | 4 ++ .../definitionListItem.stories.tsx | 40 +++++++++++++------ .../definitionListItem/definitionListItem.tsx | 2 +- 3 files changed, 33 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index db21c9525..d78673e33 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- Update `` core component style to support truncation of long definitions + ## [1.0.50] - 2024-10-23 ### Changed diff --git a/src/core/components/definitionList/definitionListItem/definitionListItem.stories.tsx b/src/core/components/definitionList/definitionListItem/definitionListItem.stories.tsx index 36662721f..2865ce964 100644 --- a/src/core/components/definitionList/definitionListItem/definitionListItem.stories.tsx +++ b/src/core/components/definitionList/definitionListItem/definitionListItem.stories.tsx @@ -1,9 +1,15 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { ComponentType } from 'react'; import { DefinitionList, type IDefinitionListItemProps } from '../index'; const meta: Meta = { title: 'Core/Components/DefinitionList/DefinitionList.Item', component: DefinitionList.Item, + decorators: (Story: ComponentType) => ( + + + + ), parameters: { design: { type: 'figma', @@ -20,12 +26,8 @@ type Story = StoryObj; export const Default: Story = { args: { term: 'First Item Term', + children: 'First item description', }, - render: (props: IDefinitionListItemProps) => ( - - First item description - - ), }; /** @@ -36,13 +38,27 @@ export const WithComponent: Story = { term: 'First Item Term', }, render: (props: IDefinitionListItemProps) => ( - - -
- Any React Node Child -
- - + +
+ Any React Node Child +
+ + ), +}; + +/** + * Usage of the DefinitionList.Item component with a truncated long string. + */ +export const TruncateDefinition: Story = { + args: { + term: 'Long string', + }, + render: (props: IDefinitionListItemProps) => ( + +
+ 5731588298112881474677942504380315442995089605930142380990784283931790335308357315882981128814746779425043803154429950896059301423809907842839317903353083' +
+ ), }; diff --git a/src/core/components/definitionList/definitionListItem/definitionListItem.tsx b/src/core/components/definitionList/definitionListItem/definitionListItem.tsx index 746139a7d..e2ad592b9 100644 --- a/src/core/components/definitionList/definitionListItem/definitionListItem.tsx +++ b/src/core/components/definitionList/definitionListItem/definitionListItem.tsx @@ -22,7 +22,7 @@ export const DefinitionListItem: React.FC = (props) =>
{term}
-
{children}
+
{children}
); }; From 7d33936ebaf6103bc821f2beefafd55e2c1cd309 Mon Sep 17 00:00:00 2001 From: Ruggero Cino Date: Wed, 23 Oct 2024 11:19:39 +0200 Subject: [PATCH 2/3] Fix lint issues --- .../definitionListItem/definitionListItem.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/components/definitionList/definitionListItem/definitionListItem.stories.tsx b/src/core/components/definitionList/definitionListItem/definitionListItem.stories.tsx index 2865ce964..4ba1d5ade 100644 --- a/src/core/components/definitionList/definitionListItem/definitionListItem.stories.tsx +++ b/src/core/components/definitionList/definitionListItem/definitionListItem.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { ComponentType } from 'react'; +import type { ComponentType } from 'react'; import { DefinitionList, type IDefinitionListItemProps } from '../index'; const meta: Meta = { @@ -56,7 +56,7 @@ export const TruncateDefinition: Story = { render: (props: IDefinitionListItemProps) => (
- 5731588298112881474677942504380315442995089605930142380990784283931790335308357315882981128814746779425043803154429950896059301423809907842839317903353083' + 5731588298112881474677942504380315442995089605930142380990784283931790335308357315882981128814746779425043803154429950896059301423809907842839317903353083
), From 1c1458a84f99fd4ffb0775ddca62e580082688b4 Mon Sep 17 00:00:00 2001 From: Ruggero Cino Date: Wed, 23 Oct 2024 12:10:15 +0200 Subject: [PATCH 3/3] Update breadcrumbs component --- CHANGELOG.md | 2 +- .../breadcrumbs/breadcrumbs.stories.tsx | 21 +++++++++++++++++-- .../components/breadcrumbs/breadcrumbs.tsx | 17 +++++++++------ 3 files changed, 31 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d78673e33..c3307d448 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Fixed -- Update `` core component style to support truncation of long definitions +- Update `` and `` core components to truncate long strings ## [1.0.50] - 2024-10-23 diff --git a/src/core/components/breadcrumbs/breadcrumbs.stories.tsx b/src/core/components/breadcrumbs/breadcrumbs.stories.tsx index d028f2399..b57241ea1 100644 --- a/src/core/components/breadcrumbs/breadcrumbs.stories.tsx +++ b/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; diff --git a/src/core/components/breadcrumbs/breadcrumbs.tsx b/src/core/components/breadcrumbs/breadcrumbs.tsx index f3c681286..c15f7f918 100644 --- a/src/core/components/breadcrumbs/breadcrumbs.tsx +++ b/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 = ({ links, tag, ...otherProps }) => { +export const Breadcrumbs: React.FC = (props) => { + const { links, tag, ...otherProps } = props; + const currentPage = links[links.length - 1]; const pathLinks = links.slice(0, -1); return ( -