Skip to content

Fix wiggle in listview selection #3119

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 11 commits into from
May 18, 2022
Merged

Fix wiggle in listview selection #3119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fee9836
Fix wiggle in listview selection
snowystinger May 11, 2022
3998295
Add code comments
snowystinger May 11, 2022
2c64306
Merge branch 'main' into fix-wiggle-listview-selection
snowystinger May 11, 2022
785fc26
move stories back where they belong
snowystinger May 11, 2022
1e27dc1
Merge branch 'fix-wiggle-listview-selection' of github.com:adobe/reac…
snowystinger May 11, 2022
9796320
Merge branch 'main' into fix-wiggle-listview-selection
snowystinger May 16, 2022
7dd662b
Merge branch 'main' into fix-wiggle-listview-selection
snowystinger May 18, 2022
7363354
fix merge
snowystinger May 18, 2022
42c0aa3
also merge fix
snowystinger May 18, 2022
443b615
Merge branch 'main' into fix-wiggle-listview-selection
snowystinger May 18, 2022
228a8b6
Merge branch 'main' into fix-wiggle-listview-selection
LFDanLu May 18, 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
10 changes: 7 additions & 3 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 @@ -72,14 +72,18 @@
background-color: var(--spectrum-table-row-background-color-selected-key-focus);
}

/* Box shadow for left, right, and bottom border for selected rows. */
/* Negative block start causes borders to actually be shared between items. Only works if we allow item overflow to be visible, like card focus rings. */
&:after {
inset-block-start: -1px;
box-shadow: inset 1px 0 0 0 var(--spectrum-global-color-blue-500), inset -1px 0 0 0 var(--spectrum-global-color-blue-500), inset 0 -1px 0 0 var(--spectrum-global-color-blue-500), inset 0 1px 0 0 var(--spectrum-global-color-blue-500);
}
}

&.is-prev-selected {
/* First item in the ListView should not have a border that extends outside of itself to the top, it doesn't need to share a border space. */
&.react-spectrum-ListViewItem--firstRow {
&.is-selected {
&:after {
box-shadow: inset 1px 0 0 0 var(--spectrum-global-color-blue-500), inset -1px 0 0 0 var(--spectrum-global-color-blue-500), inset 0 -1px 0 0 var(--spectrum-global-color-blue-500);
inset-block-start: 0px;
}
}
}
Expand Down
38 changes: 19 additions & 19 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 @@ -319,6 +319,24 @@ storiesOf('ListView', module)
(item) => <Item textValue={item.title}><Image src={item.url} /><Text>{item.title}</Text><Text slot="description">JPG</Text></Item>
}
</ListView>
))
.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>
</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>
</ListView>
));

storiesOf('ListView/Drag and Drop', module)
Expand Down Expand Up @@ -383,25 +401,7 @@ storiesOf('ListView/Drag and Drop', module)
<Droppable />
<DragExample listViewProps={{selectionStyle: 'highlight', onAction: action('onAction')}} dragHookOptions={{onDragStart: action('dragStart'), onDragEnd: action('dragEnd')}} />
</Flex>
), {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>
</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>
</ListView>
));
), {description: {data: 'Folders are non-draggable.'}});

function Example(props?) {
return (
Expand Down
2 changes: 2 additions & 0 deletions packages/@react-stately/layout/src/ListLayout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,8 @@ export class ListLayout<T> extends Layout<Node<T>> implements KeyboardDelegate {

let rect = new Rect(x, y, width - x, rectHeight);
let layoutInfo = new LayoutInfo(node.type, node.key, rect);
// allow overflow so the focus ring/selection ring can extend outside to overlap with the adjacent items borders
layoutInfo.allowOverflow = true;
layoutInfo.estimatedSize = isEstimated;
return {
layoutInfo
Expand Down