ListView UI bug fixes and updates (#2804)
* making quiet listviews not have rounded corners and borders between rows
* matching active/hover state for ListView selected row with TableView
* adding user-select: none to listview
* adding left border and background opacity to listview focused row
also fixing overlapping border when focused row is below selected row
* updating tableview highlight selction selected row left and right borders
as per horizontal scrolling section in Table-tree-list SelectionStyle XD file
* fixing top/bottom border for first and last row in highlight table
changes as per selection style XD file
* moving left indicator to a :before of the ListView row div
* fixing lint
* removing extraneous border
* hiding bottom border of last row to avoid overlap with container border
only applicable if we arent in a loading state since then the last row wont flush with the container bottom
* making the focus ring indicator sticky for TableView and ListView
* removing extraneous focus ring indicator
* fixing borders to remove wiggles
* fix lint
* adding pointer-events none to :after box shadow
* addressing review comments
make ListView rows rely on the next row to render the blue selected border between them. This makes it so there isnt a wiggle when a row between two selected rows is selected/deselected
* fix firefox and safari table checkbox positioning when row focus is visible
also fix the listview cursor indicator so it doesnt show the text selection indicator
* replacing border-top for table highlight selection first row with box shadow
fixes safari and firefox where border-top pushes border bottom out of view for the first row
* removing extra space
* making last row only have rounded corners if we are not loading more items
* fix sticky focus ring rtl
* removing transition from listview to match tableview
* adding blue outline for selected tableview row and replacing bottom border with box shadow
blue outline on selected rows unifies tableview and listview designs. Replaced the bottom border with a box-shadow due to finicky focus indicator height (didnt extend past the border) and because the bottom border radius was slightly cut off by the container
* simplifying the box-shadow tableview css
* update listview css to use box shadows instead of border
gets rid of the issue where the bottom border didnt meet the edges of the row because of the transparent left/right border which were added to stop wiggles. Also fixes the issue where the left/right selection border didnt meet the bottom border (stacked rows had 2 px of border separating them, one from border bottom from top row and one from border top of the row below)
* fixing vertical padding and horizontal padding for dnd
needed to compensate for the missing borders
* fixing z-index for left focus indicator
bumped up so it appears above the border box shadows
* making tableview follow the same .5px box shadow like listview
* fixing listview first and last row styles
* Revert "making tableview follow the same .5px box shadow like listview"
This reverts commit 5fba7631b7cc3077757e2a984e76eda70a79da66.
* removing todo comment
* applying tableview style updates to deprecated tableview too
* making rounded corners only happen if table/list content is greater or equal to container
also includes some clean up as per feed back from Rob
* fixing border radius for first/last row TableView
* going back to -1px bottom border strategy instead of .5px for ListView
This fixes the subpixel rounding issue at certain zoom levels on certain monitors. Unfortunately it means the keyboard focus indicator looks like it 1px off since the grey top border of a row is actually a 1px bottom border of the above row
* removing lastRow bottom border for listview if content is equal or greater than container height
* removing contain: paint since overflow styles should handle that for us
fixes issue where checkboxes and focus indicator werent sticky in Safari 15.4
Co-authored-by: Danni <drobinson@livefyre.com>
