@react-spectrum/list 3.0.0-alpha.10 → 3.0.0-alpha.11

package/src/{listview.css → styles.css}

@@ -1,3 +1,14 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+*/
 
 :root {
   --spectrum-listview-item-compact-padding-y: var(--spectrum-global-dimension-size-50);
@@ -7,6 +18,11 @@
   --spectrum-listview-border-radius: var(--spectrum-table-border-radius, var(--spectrum-alias-border-radius-regular));
   --spectrum-listview-item-border-radius: calc(var(--spectrum-listview-border-radius) - var(--spectrum-listview-border-width));
   --spectrum-listview-row-sticky-focus-indicator-width: 3px;
+  --spectrum-listview-item-line-height: calc(var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default)) * var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height)) - 1px);
+  --spectrum-listview-item-title-text-color: var(--spectrum-global-color-gray-800);
+  --spectrum-listview-item-title-text-size: var(--spectrum-global-dimension-font-size-100);
+  --spectrum-listview-item-description-text-color: var(--spectrum-global-color-gray-700);
+  --spectrum-listview-item-description-text-size: var(--spectrum-global-dimension-font-size-75);
 }
 
 .react-spectrum-ListView {
@@ -45,13 +61,6 @@
         pointer-events: none;
       }
 
-      /* Box shadow for bottom border for non-selected rows that is immmediately above a selected row. */
-      &.is-next-selected {
-        &:after {
-          box-shadow: inset 0 -1px 0 0 var(--spectrum-global-color-blue-500);
-        }
-      }
-
       &.is-selected {
         background-color: var(--spectrum-table-row-background-color-selected);
         &.is-hovered,
@@ -63,22 +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 {
-          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);
-        }
-
-        /* Box shadow for left, right, bottom, and top border for first row when selected (needs 1px top blue border). */
-        &.react-spectrum-ListViewItem--firstRow {
-          &: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 0 1px 0 0 var(--spectrum-global-color-blue-500);
-          }
+          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);
         }
+      }
 
-        /* Box shadow for left, right, and bottom border for last row when selected (needs 1px bottom blue border). */
-        &.react-spectrum-ListViewItem--lastRow {
+      /* 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;
           }
         }
       }
@@ -86,7 +91,7 @@
 
     &:not(.react-spectrum-ListView--quiet) {
       .react-spectrum-ListViewItem {
-        /* Box shadow for bottom border for non-selected rows that aren't immediatly above a selected row (grey border bottom). */
+        /* Box shadow for bottom border for non-selected rows that aren't immediately above a selected row (grey border bottom). */
         /* Also omit bottom border for last row if the total content height of the ListView is equal or greater than the height of the container. This avoids overlapping bottom borders. */
         &:not(.is-selected):not(.is-next-selected):not(.react-spectrum-ListViewItem--isFlushBottom) {
           &:after {
@@ -110,6 +115,42 @@
           }
         }
       }
+
+      &.react-spectrum-ListView--isVerticalScrollbarVisible {
+        .react-spectrum-ListViewItem {
+          &.react-spectrum-ListViewItem--firstRow.is-selected {
+            &:after {
+              border-start-end-radius: 0;
+            }
+          }
+        }
+
+        &:not(.react-spectrum-ListView--loadingMore) {
+          .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {
+            &:after {
+              border-end-end-radius: 0;
+            }
+          }
+        }
+      }
+
+      &.react-spectrum-ListView--isHorizontalScrollbarVisible {
+        &:not(.react-spectrum-ListView--loadingMore) {
+          .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem--isFlushBottom.is-selected {
+            &:after {
+              border-end-start-radius: 0;
+              border-end-end-radius: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+  &.react-spectrum-ListView--wrap .react-spectrum-ListViewItem {
+    & .react-spectrum-ListViewItem-content,
+    & .react-spectrum-ListViewItem-description {
+      white-space: normal;
+      height: auto;
     }
   }
 }
@@ -131,10 +172,46 @@
   }
 }
 
-.react-spectrum-ListView--quiet {
+.react-spectrum-ListView.react-spectrum-ListView--quiet {
   background-color: var(--spectrum-alias-background-color-transparent);
   border-width: 0;
   border-radius: 0;
+
+  .react-spectrum-ListView-row {
+    &.round-tops {
+      &:focus-ring {
+        &:before {
+          border-start-start-radius: var(--spectrum-listview-item-border-radius);
+        }
+      }
+      & > .react-spectrum-ListViewItem {
+        border-start-start-radius: var(--spectrum-listview-item-border-radius);
+        border-start-end-radius: var(--spectrum-listview-item-border-radius);
+
+        &:after {
+          border-start-start-radius: var(--spectrum-listview-item-border-radius);
+          border-start-end-radius: var(--spectrum-listview-item-border-radius);
+        }
+      }
+    }
+
+    &.round-bottoms {
+      &:focus-ring {
+        &:before {
+          border-end-start-radius: var(--spectrum-listview-item-border-radius);
+        }
+      }
+      & > .react-spectrum-ListViewItem {
+        border-end-start-radius: var(--spectrum-listview-item-border-radius);
+        border-end-end-radius: var(--spectrum-listview-item-border-radius);
+
+        &:after {
+          border-end-start-radius: var(--spectrum-listview-item-border-radius);
+          border-end-end-radius: var(--spectrum-listview-item-border-radius);
+        }
+      }
+    }
+  }
 }
 
 .react-spectrum-ListViewItem {
@@ -142,7 +219,7 @@
   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));
-  line-height: calc(var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default)) * var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height)) - 1px);
+  line-height: var(--spectrum-listview-item-line-height);
   padding: var(--spectrum-listview-item-regular-padding-y) var(--spectrum-global-dimension-size-160);
   position: relative;
   /*background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));*/
@@ -176,6 +253,12 @@
     }
   }
 
+  &.is-disabled {
+    &, .react-spectrum-ListViewItem-content, .react-spectrum-ListViewItem-description {
+      color: var(--spectrum-alias-text-color-disabled);
+    }
+  }
+
   &.has-checkbox {
     /* have to eliminate vertical padding to allow proper vertical alignment */
     padding-top: 0px;
@@ -188,8 +271,7 @@
     grid-template-rows: 1fr auto;
     grid-template-areas:
       "draghandle checkbox icon image content actions actionmenu chevron"
-      "draghandle checkbox icon image description actions actionmenu chevron"
-    ;
+      "draghandle checkbox icon image description actions actionmenu chevron";
     align-items: center;
   }
 
@@ -218,12 +300,18 @@
     }
   }
 
-  .react-spectrum-ListViewItem-checkbox {
+  .react-spectrum-ListViewItem-checkboxWrapper {
     grid-area: checkbox;
     align-items: center;
     justify-items: center;
+    transition-duration: 160ms;
+    display: flex;
+  }
+
+  .react-spectrum-ListViewItem-checkbox {
     min-height: 0;
     height: 100%;
+
     > span {
       margin: 0;
     }
@@ -238,22 +326,46 @@
   }
 
   .react-spectrum-ListViewItem-image {
+    display: flex;
     border-radius: var(--spectrum-global-dimension-size-25);
     width: var(--spectrum-global-dimension-size-400);
     height: var(--spectrum-global-dimension-size-400);
+    align-items: center;
+    justify-content: center;
+    > img {
+      width: unset;
+      height: unset;
+      max-height: 100%;
+    }
   }
 
   .react-spectrum-ListViewItem-content,
   .react-spectrum-ListViewItem-description {
     flex-grow: 1;
+
+    /* truncate text with ellipsis */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: var(--spectrum-listview-item-line-height);
   }
 
   .react-spectrum-ListViewItem-content {
     grid-area: content;
+    color: var(--spectrum-listview-item-title-text-color);
+    font-size: var(--spectrum-listview-item-title-text-size);
+  }
+
+  &:not(.react-spectrum-ListView--hasDescription) {
+    .react-spectrum-ListViewItem-content {
+      grid-area: content / description;
+    }
   }
 
   .react-spectrum-ListViewItem-description {
     grid-area: description;
+    color: var(--spectrum-listview-item-description-text-color);
+    font-size: var(--spectrum-listview-item-description-text-size);
   }
 
   .react-spectrum-ListViewItem-actions {
@@ -269,6 +381,12 @@
   .react-spectrum-ListViewItem-parentIndicator {
     grid-area: chevron;
     padding-inline-start: var(--spectrum-global-dimension-size-75);
+    display: none;
+    transition: color var(--spectrum-global-animation-duration-100);
+
+    &.is-disabled {
+      color: var(--spectrum-alias-icon-color-disabled);
+    }
   }
 
   &.react-spectrum-ListViewItem-dragPreview {
@@ -280,8 +398,7 @@
     .react-spectrum-ListViewItem-grid {
       grid-template-areas:
         "icon image content     . badge"
-        "icon image description . badge"
-      ;
+        "icon image description . badge";
       grid-template-columns: auto auto auto 1fr;
     }
 
@@ -293,8 +410,9 @@
       border-radius: var(--spectrum-alias-border-radius-regular);
     }
 
-    &.react-spectrum-ListViewItem-dragPreview--multiple  {
+    &.react-spectrum-ListViewItem-dragPreview--multiple {
       position: relative;
+
       &:after {
         content: '';
         display: block;
@@ -315,16 +433,49 @@
       display: none;
     }
   }
-
+}
+.react-spectrum-ListView:not(.react-spectrum-ListView--quiet) {
   /* give first and last items border-radius to match listview container */
-  div:first-child > div[role="row"] > & {
+
+  .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {
     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"] > & {
+
+  .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {
     border-end-start-radius: var(--spectrum-listview-item-start-end-border-radius);
     border-end-end-radius: var(--spectrum-listview-item-start-end-border-radius);
   }
+
+  &.react-spectrum-ListView--isVerticalScrollbarVisible {
+    .react-spectrum-ListViewItem--firstRow.react-spectrum-ListViewItem {
+      border-start-end-radius: 0;
+    }
+
+    .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {
+      border-end-end-radius: 0;
+    }
+  }
+
+  &.react-spectrum-ListView--isHorizontalScrollbarVisible {
+    .react-spectrum-ListViewItem--lastRow.react-spectrum-ListViewItem {
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+  }
+}
+
+.react-spectrum-ListView {
+  /* When we can use subgrid, get rid of this. */
+  &.react-spectrum-ListView--hasAnyChildren {
+    .react-spectrum-ListViewItem-parentIndicator {
+      display: inline-block;
+      visibility: hidden;
+    }
+    .react-spectrum-ListViewItem-parentIndicator--hasChildItems {
+      visibility: visible;
+    }
+  }
 }
 
 .react-spectrum-ListView--compact .react-spectrum-ListViewItem {
@@ -341,11 +492,39 @@
 
 .react-spectrum-ListView--draggable .react-spectrum-ListViewItem {
   padding-inline-start: 0;
+
+  .react-spectrum-ListViewItem-checkbox {
+    input {
+      inset-inline-start: 0;
+    }
+  }
+}
+
+.react-spectrum-ListViewItem--dropTarget {
+  background-color: var(--spectrum-alias-highlight-selected);
+  box-shadow:
+    inset 2px 0 0 0 var(--spectrum-table-cell-border-color-key-focus),
+    inset -2px 0 0 0 var(--spectrum-table-cell-border-color-key-focus),
+    inset 0 -3px 0 0 var(--spectrum-table-cell-border-color-key-focus),
+    inset 0 2px 0 0 var(--spectrum-table-cell-border-color-key-focus);
 }
 
-.react-spectrum-ListViewItem--draggable {
-  .react-spectrum-ListViewItem-checkbox input {
+.react-spectrum-ListView--dropTarget {
+  border-color: var(--spectrum-global-color-blue-500);
+  background-color: var(--spectrum-alias-highlight-selected);
+  box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus);
+  &::after {
+    border-radius: inherit;
+    border-color: var(--spectrum-global-color-blue-500);
+    background-color: var(--spectrum-alias-highlight-selected);
+    box-shadow: inset 0 0 0 1px var(--spectrum-table-cell-border-color-key-focus);
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
     inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
   }
 }
 
@@ -359,3 +538,55 @@
     padding-top: var(--spectrum-global-dimension-size-50);
   }
 }
+
+.react-spectrum-ListViewInsertionIndicator {
+  width: calc(100% - (2 * var(--spectrum-dropindicator-circle-size)));
+  inset-inline-start: var(--spectrum-dropindicator-circle-size);
+  position: absolute;
+  outline: none;
+
+  &.react-spectrum-ListViewInsertionIndicator--dropTarget {
+    background: var(--spectrum-dropindicator-border-color);
+    border-bottom: 2px solid var(--spectrum-dropindicator-border-color);
+
+    &:before {
+      left: calc(var(--spectrum-dropindicator-circle-size) * -1);
+    }
+
+    &:after {
+      right: calc(var(--spectrum-dropindicator-circle-size) * -1);
+    }
+
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      top: calc(var(--spectrum-dropindicator-circle-size) * -1 / 2 + var(--spectrum-dropindicator-border-size) / 2);
+      width: var(--spectrum-dropindicator-circle-size);
+      height: var(--spectrum-dropindicator-circle-size);
+      border-radius: 50%;
+      border: var(--spectrum-dropindicator-border-size) solid;
+      box-sizing: border-box;
+      border-color: var(--spectrum-dropindicator-circle-border-color);
+      background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
+      z-index: 3;
+    }
+  }
+}
+
+.react-spectrum-ListViewItem-checkbox--enter {
+  opacity: 0.01;
+  max-width: 0px;
+}
+.react-spectrum-ListViewItem-checkbox--enterActive {
+  opacity: 1;
+  max-width: 80px;
+}
+.react-spectrum-ListViewItem-checkbox--exit {
+  opacity: 1;
+  max-width: 80px;
+}
+.react-spectrum-ListViewItem-checkbox--exitActive {
+  opacity: 0.01;
+  max-width: 0px;
+}