fix(structured-list): add selected background border (#13384)

* fix(structured-list): add selected background border * fix(StructuredList): render selected class * fix(structured-list): hover selected border color adjustment * fix: simple list selection --------- Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>
carbon-design-system · Apr 7, 2023 · f2725e0 · f2725e0
1 parent 9352e42
commit f2725e0
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 20 deletions.
diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
@@ -162,12 +162,14 @@ export function StructuredListRow(props) {
   const { onKeyDown, children, className, head, ...other } = props;
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
   const id = useId('grid-input');
+  const selectedRow = React.useContext(GridSelectedRowStateContext);
   const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
   const prefix = usePrefix();
   const value = { id };
   const classes = classNames(`${prefix}--structured-list-row`, className, {
     [`${prefix}--structured-list-row--header-row`]: head,
     [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
+    [`${prefix}--structured-list-row--selected`]: selectedRow === id,
   });
 
   return head ? (

diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss
@@ -81,24 +81,52 @@
 
   .#{$prefix}--structured-list-row {
     display: table-row;
-    border-bottom: 1px solid $border-subtle;
+    border-top: 1px solid $border-subtle;
     transition: background-color motion.$duration-fast-02
       motion.motion(standard, productive);
   }
 
+  .#{$prefix}--structured-list-tbody
+    .#{$prefix}--structured-list-row:last-child {
+    border-bottom: 1px solid $border-subtle;
+  }
+
+  .#{$prefix}--structured-list-row--header-row {
+    border: none;
+  }
+
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row):not(.#{$prefix}--structured-list-row--selected) {
-    border-bottom: 1px solid $background-hover;
-    background-color: $background-hover;
+    border-color: $layer-hover;
+    background-color: $layer-hover;
     cursor: pointer;
   }
 
-  .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected {
-    background-color: $background-selected;
+  .#{$prefix}--structured-list--selection
+    .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row):not(.#{$prefix}--structured-list-row--selected)
+    + .#{$prefix}--structured-list-row {
+    border-color: $layer-hover;
+  }
+
+  .#{$prefix}--structured-list--selection
+    .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected {
+    border-color: $layer-selected;
+    background-color: $layer-selected;
+  }
+
+  .#{$prefix}--structured-list--selection
+    .#{$prefix}--structured-list-row--selected
+    + .#{$prefix}--structured-list-row {
+    border-color: $layer-selected;
+  }
+
+  .#{$prefix}--structured-list--selection
+    .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected
+    .#{$prefix}--structured-list-td {
+    color: $text-primary;
   }
 
   .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--header-row {
-    border-bottom: 1px solid $background-selected;
     cursor: inherit;
   }
 
@@ -110,19 +138,10 @@
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
     > .#{$prefix}--structured-list-td,
-  .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected
-    > .#{$prefix}--structured-list-td {
-    color: $text-primary;
-  }
-
   .#{$prefix}--structured-list--selection
-    .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
+    .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected
     > .#{$prefix}--structured-list-td {
-    @if enabled('enable-v11-release') {
-      border-top: 1px solid $border-subtle;
-    } @else {
-      border-top: 1px solid $layer;
-    }
+    color: $text-primary;
   }
 
   .#{$prefix}--structured-list-thead {
@@ -158,9 +177,6 @@
     display: table-cell;
     max-width: 36rem;
     color: $text-secondary;
-    @if enabled('enable-v11-release') {
-      border-top: 1px solid $border-subtle;
-    }
 
     transition: color motion.$duration-fast-02
       motion.motion(standard, productive);