ListView CSS updates (#2517)

* initial ListView CSS updates

* add stories

* remove border radius from quiet ListItem

* remove border radiu from focus ring

* fix first and last items border radius

* fix double border on adjacent selected items

* fix to use emphasized styles by default

* fix border styling

* Update packages/@react-spectrum/list/src/listview.css

Co-authored-by: Daniel Lu <[email protected]>

Co-authored-by: Danni <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

packages/@react-spectrum/list/src/ListView.tsx

@@ -159,6 +159,7 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
             listStyles,
             'react-spectrum-ListView',
             `react-spectrum-ListView--${density}`,
+            'react-spectrum-ListView--emphasized',
             {
               'react-spectrum-ListView--quiet': isQuiet
             },
@@ -171,7 +172,7 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
         {(type, item) => {
           if (type === 'item') {
             return (
-              <ListViewItem item={item} onAction={onAction} />
+              <ListViewItem item={item} onAction={onAction} isEmphasized />
             );
           } else if (type === 'loader') {
             return (

packages/@react-spectrum/list/src/ListViewItem.tsx

@@ -27,7 +27,8 @@ import {useLocale} from '@react-aria/i18n';
 export function ListViewItem(props) {
   let {
     item,
-    onAction
+    onAction,
+    isEmphasized
   } = props;
   let cellNode = [...item.childNodes][0];
   let {state} = useContext(ListViewContext);
@@ -92,6 +93,7 @@ export function ListViewItem(props) {
               'focus-ring': isFocusVisible,
               'is-hovered': isHovered,
               'is-selected': isSelected,
+              'is-previous-selected': state.selectionManager.isSelected(item.prevKey),
               'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey))
             }
           )
@@ -103,7 +105,7 @@ export function ListViewItem(props) {
             <Checkbox
               UNSAFE_className={listStyles['react-spectrum-ListViewItem-checkbox']}
               {...checkboxProps}
-              isEmphasized />
+              isEmphasized={isEmphasized} />
           )}
           <SlotProvider
             slots={{

packages/@react-spectrum/list/src/listview.css

@@ -3,15 +3,18 @@
   --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50);
   --spectrum-listview-item-regular-padding-y: var(--spectrum-global-dimension-size-75);
   --spectrum-listview-item-spacious-padding-y: var(--spectrum-global-dimension-size-100);
+  --spectrum-listview-border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));
+  --spectrum-listview-border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));
+  --spectrum-listview-item-start-end-border-radius: calc(var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width));
 }
 
 .react-spectrum-ListView {
   box-sizing: border-box;
   border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
   border-style: solid;
   position: relative;
-  border-width: var(--spectrum-table-border-size, var(--spectrum-alias-border-size-thin));
-  border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));
+  border-width: var(--spectrum-listview-border-width);
+  border-radius: var(--spectrum-listview-border-radius);
   overflow: auto;
   vertical-align: var(--spectrum-table-cell-vertical-alignment);
   border-collapse: separate;
@@ -33,7 +36,8 @@
 
 .react-spectrum-ListViewItem {
   display: grid; /* TODO: define grid areas */
-  border-bottom: 1px solid var(--spectrum-tabel-cell-border-color, var(--spectrum-global-color-gray-300));
+  border: 1px solid transparent;
+  border-bottom-color: var(--spectrum-table-cell-border-color, var(--spectrum-global-color-gray-300));
   box-sizing: border-box;
   font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));
   font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));
@@ -46,53 +50,62 @@
   outline: 0;
   min-height: var(--spectrum-global-dimension-size-500);
 
-  .react-spectrum-ListView--quiet & {
-    border-bottom: 0;
+  .react-spectrum-ListView--emphasized & {
+    &.is-selected {
+      background-color: var(--spectrum-table-row-background-color-selected);
+      border-color: var(--spectrum-global-color-blue-500);
+      &.is-hovered,
+      &.is-active {
+        background-color: var(--spectrum-table-row-background-color-selected);
+      }
+
+      /* avoid double border for adjacent selected items */
+      &.is-previous-selected {        
+        &:not(.is-focused) {
+          border-top-color: transparent;
+        }
+      }
+    }
   }
 
   &.is-hovered,
   &.is-focused {
     background-color: var(--spectrum-table-row-background-color-hover);
-
-    .react-spectrum-ListView--quiet & {
-      border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));
-    }
   }
 
   &:focus-ring {
     background-color: var(--spectrum-table-row-background-color-hover);
-    box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);
-    border-radius: var(--spectrum-table-cell-border-radius-key-focus);
+    box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus);
+    border-color: var(--spectrum-global-color-blue-500);
   }
 
   &.is-active {
     background-color: var(--spectrum-table-row-background-color-down);
   }
 
   &.is-selected {
-    background-color: var(--spectrum-table-row-background-color-selected);
+    background-color: var(--spectrum-table-row-background-color-hover);
 
     &.is-hovered,
     &.is-active {
-      background-color: var(--spectrum-table-row-background-color-selected-hover);
+      background-color: var(--spectrum-table-row-background-color-hover);
     }
   }
 
-  &.react-spectrum-ListViewItem--highlightSelection {
-    border-bottom-color: var(--spectrum-global-color-blue-500);
-  }
-
   &.has-checkbox {
     /* have to eliminate vertical padding to allow proper vertical alignment */
     padding-top: 0px;
     padding-bottom: 0px;
   }
-}
-
-.react-spectrum-ListViewItem-selected {
-  background-color: var(--spectrum-table-row-background-color-selected, var(--spectrum-alias-highlight-selected));
-  &.is-hovered {
-    background-color: var(--spectrum-table-quiet-row-background-color-selected-hover);
+  
+  /* give first and last items border-radius to match listview container */
+  div:first-child > div[role="row"] > & {
+    border-start-start-radius: var(--spectrum-listview-item-start-end-border-radius);
+    border-start-end-radius: var(--spectrum-listview-item-start-end-border-radius);
+  }
+  div:last-child > div[role="row"] > & {
+    border-end-start-radius: var(--spectrum-listview-item-start-end-border-radius);
+    border-end-end-radius: var(--spectrum-listview-item-start-end-border-radius);
   }
 }
 

packages/@react-spectrum/list/stories/ListView.stories.tsx

@@ -141,9 +141,15 @@ storiesOf('ListView', module)
   .add('selection: single, checkbox, disabled', () => (
     <Example selectionMode="single" disabledKeys={['row1']} />
   ))
+  .add('selection: single, checkbox, isQuiet', () => (
+    <Example selectionMode="single" isQuiet />
+  ))
   .add('selection: multiple, checkbox', () => (
     <Example selectionMode="multiple" />
   ))
+  .add('selection: multiple, checkbox, isQuiet', () => (
+    <Example selectionMode="multiple" isQuiet />
+  ))
   .add('parent link example', () => (
     <Example2 selectionMode="multiple" />
   ))