Skip to content

Add ListView text overflow #3080

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
May 10, 2022
Merged

Add ListView text overflow #3080

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
f7fabc3
add truncation to listview
Apr 27, 2022
918b81f
Merge branch 'main' of github.com:adobe/react-spectrum into listview-…
Apr 27, 2022
89a690c
address pr comments
Apr 28, 2022
f44540a
remove overflowMode from context
Apr 28, 2022
cf86167
Merge branch 'main' into listview-trunc
tiffany-sy-lin Apr 28, 2022
ba51564
pulled latest from main
May 6, 2022
3ab8e0e
redo changes removed by merge conflict
May 6, 2022
7f16f4e
row height optimization
May 6, 2022
2da4cf9
add rowHeight to listlayout
May 6, 2022
a28308a
change null to undefined
May 6, 2022
2704b97
updating overflow type description
LFDanLu May 6, 2022
c6196db
adding missing dep
LFDanLu May 6, 2022
be96691
undo row height optimization
May 10, 2022
578d02d
Merge branch 'main' of github.com:adobe/react-spectrum into listview-…
May 10, 2022
82bd3c9
remove extra semi colon
May 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion packages/@react-spectrum/list/src/ListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,11 @@ interface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProp
isQuiet?: boolean,
/** The current loading state of the ListView. Determines whether or not the progress circle should be shown. */
loadingState?: LoadingState,
/**
* Sets the text behavior for the row contents.
* @default 'truncate'
*/
overflowMode?: 'truncate' | 'wrap',
/** Sets what the ListView should render when there is no content to display. */
renderEmptyState?: () => JSX.Element,
/**
Expand All @@ -112,6 +117,7 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
onLoadMore,
loadingState,
isQuiet,
overflowMode = 'truncate',
onAction,
dragHooks,
...otherProps
Expand Down Expand Up @@ -210,7 +216,8 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
'react-spectrum-ListView--loadingMore': loadingState === 'loadingMore',
'react-spectrum-ListView--isScrollingVertically': isVerticalScrollbarVisible,
'react-spectrum-ListView--isScrollingHorizontally': isHorizontalScrollbarVisible,
'react-spectrum-ListView--hasAnyChildren': hasAnyChildren
'react-spectrum-ListView--hasAnyChildren': hasAnyChildren,
'react-spectrum-ListView--wrap': overflowMode === 'wrap'
},
styleProps.className
)
Expand Down
11 changes: 11 additions & 0 deletions packages/@react-spectrum/list/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,12 @@
}
}
}
&.react-spectrum-ListView--wrap .react-spectrum-ListViewItem {
& .react-spectrum-ListViewItem-content,
& .react-spectrum-ListViewItem-description {
white-space: normal;
}
}
}

.react-spectrum-ListView-row {
Expand Down Expand Up @@ -299,6 +305,11 @@
.react-spectrum-ListViewItem-content,
.react-spectrum-ListViewItem-description {
flex-grow: 1;

/* truncate text with ellipsis */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.react-spectrum-ListViewItem-content {
Expand Down
34 changes: 32 additions & 2 deletions packages/@react-spectrum/list/stories/ListView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
import {Image} from '@react-spectrum/image';
import Info from '@spectrum-icons/workflow/Info';
import {Item, ListView} from '../';
import {Link} from '@react-spectrum/link';
import NoSearchResults from '@spectrum-icons/illustrations/src/NoSearchResults';
import React, {useEffect, useState} from 'react';
import {storiesOf} from '@storybook/react';
Expand Down Expand Up @@ -326,8 +327,37 @@ storiesOf('ListView', module)
<Droppable />
<DragExample listViewProps={{selectionStyle: 'highlight', onAction: action('onAction')}} dragHookOptions={{onDragStart: action('dragStart'), onDragEnd: action('dragEnd')}} />
</Flex>
), {description: {data: 'Folders are non-draggable.'}}
);
), {description: {data: 'Folders are non-draggable.'}})
.add('overflowMode="truncate" (default)', () => (
<ListView width="250px" overflowMode="truncate">
<Item textValue="row 1">row 1 with a very very very very very long title</Item>
<Item textValue="row 2">
<Text>Text slot with a really really really long name</Text>
<Text slot="description">Description slot with a really really long name</Text>
</Item>
<Item textValue="row 3">
<Content>Content slot with really really long name</Content>
</Item>
<Item textValue="row 4">
<Link >Link slot with a very very very very long name</Link>
</Item>
</ListView>
))
.add('overflowMode="wrap"', () => (
<ListView width="250px" overflowMode="wrap">
<Item textValue="row 1">row 1 with a very very very very very long title</Item>
<Item textValue="row 2">
<Text>Text slot with a really really really long name</Text>
<Text slot="description">Description slot with a really really long name</Text>
</Item>
<Item textValue="row 3">
<Content>Content slot with really really long name</Content>
</Item>
<Item textValue="row 4">
<Link >Link slot with a very very very very long name</Link>
</Item>
</ListView>
));

function Example(props?) {
return (
Expand Down