From bb1a4bd8d89e049f42c2622f76c1e717b8526e2b Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 14 Oct 2024 17:16:17 -0400 Subject: [PATCH 01/10] Add "opt in" prop for `TreeView` to opt in to truncation of text --- packages/react/src/TreeView/TreeView.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx index b891aa97a74..73b2e1c325c 100644 --- a/packages/react/src/TreeView/TreeView.tsx +++ b/packages/react/src/TreeView/TreeView.tsx @@ -66,6 +66,7 @@ export type TreeViewProps = { 'aria-labelledby'?: React.AriaAttributes['aria-labelledby'] children: React.ReactNode flat?: boolean + truncate?: boolean className?: string } @@ -205,9 +206,11 @@ const UlBox = styled.ul` } .PRIVATE_TreeView-item-content-text { - /* Truncate text label */ flex: 1 1 auto; width: 0; + } + + &[data-truncate-text='true'] .PRIVATE_TreeView-item-content-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -282,6 +285,7 @@ const Root: React.FC = ({ 'aria-labelledby': ariaLabelledby, children, flat, + truncate, className, }) => { const containerRef = React.useRef(null) @@ -338,6 +342,7 @@ const Root: React.FC = ({ aria-label={ariaLabel} aria-labelledby={ariaLabelledby} data-omit-spacer={flat} + data-truncate-text={truncate || false} onMouseDown={onMouseDown} className={className} > From ffe65359693bc28aa7bbfbdeacb6887f6dbadd2c Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Tue, 5 Nov 2024 11:35:17 -0500 Subject: [PATCH 02/10] Make non-truncate opt-in --- packages/react/src/TreeView/TreeView.docs.json | 6 ++++++ .../react/src/TreeView/TreeView.features.stories.tsx | 12 ++++-------- packages/react/src/TreeView/TreeView.tsx | 2 +- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/react/src/TreeView/TreeView.docs.json b/packages/react/src/TreeView/TreeView.docs.json index fb8d83893ef..3fa064219a2 100644 --- a/packages/react/src/TreeView/TreeView.docs.json +++ b/packages/react/src/TreeView/TreeView.docs.json @@ -69,6 +69,12 @@ "name": "onSelect", "type": "(event: React.MouseEvent | React.KeyboardEvent) => void" }, + { + "name": "truncate", + "type": "boolean", + "defaultValue": "true", + "description": "Truncate the item's text content with an ellipsis." + }, { "name": "ref", "type": "React.Ref" diff --git a/packages/react/src/TreeView/TreeView.features.stories.tsx b/packages/react/src/TreeView/TreeView.features.stories.tsx index b4d9a8181b4..d99abc9dea0 100644 --- a/packages/react/src/TreeView/TreeView.features.stories.tsx +++ b/packages/react/src/TreeView/TreeView.features.stories.tsx @@ -1046,15 +1046,13 @@ export const LeadingAction: StoryFn = () => { export const MultilineItems: StoryFn = () => (