Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 10 commits into from
Apr 7, 2023
Merged

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
bd79155
fix(structured-list): add selected background border
alisonjoseph Mar 21, 2023
21a84cd
fix(StructuredList): render selected class
alisonjoseph Mar 22, 2023
8329550
Merge branch 'main' into selected-structured-list
alisonjoseph Mar 22, 2023
ea2ade3
fix(structured-list): hover selected border color adjustment
alisonjoseph Apr 3, 2023
8eba18b
Merge branch 'main' into selected-structured-list
alisonjoseph Apr 3, 2023
fe144c1
Merge branch 'main' into selected-structured-list
tw15egan Apr 4, 2023
ca77e79
fix: simple list selection
alisonjoseph Apr 4, 2023
8296452
Merge branch 'selected-structured-list' of https://github.com/alisonj…
alisonjoseph Apr 4, 2023
8c5af8c
Merge branch 'main' into selected-structured-list
francinelucca Apr 5, 2023
c8fe4af
Merge branch 'main' into selected-structured-list
alisonjoseph Apr 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/react/src/components/StructuredList/StructuredList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand Down
48 changes: 30 additions & 18 deletions packages/styles/scss/components/structured-list/_structured-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,24 +81,49 @@

.#{$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--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-row.#{$prefix}--structured-list-row--selected {
background-color: $background-selected;
border-color: $layer-selected;
background-color: $layer-selected;
}

.#{$prefix}--structured-list-row--selected
+ .#{$prefix}--structured-list-row {
border-color: $layer-selected;
}

.#{$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;
}

Expand All @@ -115,16 +140,6 @@
color: $text-primary;
}

.#{$prefix}--structured-list--selection
.#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
> .#{$prefix}--structured-list-td {
@if enabled('enable-v11-release') {
border-top: 1px solid $border-subtle;
} @else {
border-top: 1px solid $layer;
}
}

.#{$prefix}--structured-list-thead {
display: table-header-group;
vertical-align: middle;
Expand Down Expand Up @@ -158,9 +173,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);
Expand Down