diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js index d11d7cc14157..dac249db3b3d 100644 --- 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 index 7c14d48211bd..a7358fe43cb7 100644 --- 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);