react-spectrum

5716435e - CardView grid layout UX fixes + horizontal card support (#2481)

CardView grid layout UX fixes + horizontal card support (#2481) * preventing clicks/taps on focusable elements from scrolling virtualized lists * adding transitions on card removal + load to CardView * rough support for horizontal card orientation in grid layout * moving card view styles into spectrum-css and removing blue outline from clicking on card * updating story format to csf as per review * modifying default size of horizontal cards + removing selection mode for horizontal * adding scale to layouts and shifting default itemPadding values to layouts * fixing grid layout isVisible check adding the transition duration broke async loading and toggling items stories in grid layout card view. Turns out that layoutInfo is not always defined in the isVisible check so accounting for that case * fixing scroll when clicking on action menu trigger in card view Turns out that opening the action menu in a card view triggers useVirtualizers onFocus when focusSafely is called on the actionmenu "ul". Added a extra conditional to stop useVirtualizer from scrolling to the focused key if focus target is happening on an element outside the virtualizer. * fixing tests * cleanup * adding test for horizontal cards in cardview * only calling isVisible in GridLayout if layoutInfo is available * updating quiet vertical cards in grid cardview so that text content is single line updates the grid layout calc so the content section is always single line height. The rest of the card then expands to fill the available vertical height to accomodate layouts that provide item padding values much greater than what is required to display the single line of text * fixing horizontal card image aspect ratio resizing previously we calculated the correct aspect ratio for the image for a horizontal card in a useLayoutEffect but this didnt quite work when the CardView changed in size. Now we calculate the aspect ratio during resize via useResizeObserver * removing !important styles for cardview and moving them to layoutInfo * fixing shift tab behavior * adding offset to scrollToView for cardview so that focus rings are not cut off * updating scrollToItem in CardView to use margin from layout * removing some design specific TODOs and moving into issues * removing another TODO thought again about this again, we need cardOrientation in the CardViewProps in case the user passes in the layout constructor instead of a layout * updating type description for gridlayout * addressing review comments Co-authored-by: Danni <drobinson@livefyre.com>