diff --git a/.changeset/modern-items-leave.md b/.changeset/modern-items-leave.md new file mode 100644 index 0000000000..772661e3c2 --- /dev/null +++ b/.changeset/modern-items-leave.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-react": patch +"@navikt/ds-css": patch +--- + +Table: Fixed background-clipping when using ExpandableRow. diff --git a/@navikt/core/css/table.css b/@navikt/core/css/table.css index 11c66ad8b9..9ee0a1b612 100644 --- a/@navikt/core/css/table.css +++ b/@navikt/core/css/table.css @@ -176,9 +176,8 @@ } .navds-table__toggle-expand-cell { - padding: 0 var(--a-spacing-2); - position: relative; - width: 2.5rem; + padding: 0; + width: 3rem; } .navds-table--large .navds-table__toggle-expand-cell { @@ -193,20 +192,25 @@ display: grid; place-content: center; cursor: pointer; - margin: 0; background: transparent; border: none; border-radius: var(--a-border-radius-medium); height: 2rem; width: 2rem; font-size: 1.5rem; + margin: 0 auto; } .navds-table__expandable-icon { transition: transform 150ms ease-in-out; } +.navds-table__toggle-expand-cell:hover { + cursor: pointer; +} + .navds-table__toggle-expand-button:hover, +.navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button, .navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button { background-color: var(--a-surface-hover); } @@ -235,16 +239,6 @@ } } -.navds-table__toggle-expand-button::after { - inset: 0; - z-index: 1; - position: absolute; - content: ""; - height: 100%; - width: 100%; - cursor: pointer; -} - .navds-table__expanded-row-cell { padding: 0; } diff --git a/@navikt/core/react/src/table/ExpandableRow.tsx b/@navikt/core/react/src/table/ExpandableRow.tsx index 5704e52213..b6be40d034 100644 --- a/@navikt/core/react/src/table/ExpandableRow.tsx +++ b/@navikt/core/react/src/table/ExpandableRow.tsx @@ -112,6 +112,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef( className={cl("navds-table__toggle-expand-cell", { "navds-table__toggle-expand-cell--open": _open, })} + onClick={expansionHandler} > {!expansionDisabled && (