From 4adfcaf552aeb4245a65934838416bc90a20aeb2 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 14 Aug 2024 09:15:36 +0200 Subject: [PATCH 1/5] bug: Fixed backgroud clipping when using ExpandableRow in Table --- .changeset/modern-items-leave.md | 6 ++++ @navikt/core/css/table.css | 21 +++++++++--- .../core/react/src/table/ExpandableRow.tsx | 26 +++++++------- .../stories/table-2-expandable.stories.tsx | 32 +++++++++++++++++ yarn.lock | 34 +++++++++---------- 5 files changed, 86 insertions(+), 33 deletions(-) create mode 100644 .changeset/modern-items-leave.md diff --git a/.changeset/modern-items-leave.md b/.changeset/modern-items-leave.md new file mode 100644 index 0000000000..3b88f12f0b --- /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 ExapandableRow diff --git a/@navikt/core/css/table.css b/@navikt/core/css/table.css index 11c66ad8b9..22ec5c42a1 100644 --- a/@navikt/core/css/table.css +++ b/@navikt/core/css/table.css @@ -176,9 +176,16 @@ } .navds-table__toggle-expand-cell { - padding: 0 var(--a-spacing-2); + padding: 0; + width: 3rem; +} + +.navds-table__toggle-expand-cell > .navds-table__toggle-expand-wrapper { position: relative; - width: 2.5rem; + width: 100%; + aspect-ratio: 1; + display: grid; + place-content: center; } .navds-table--large .navds-table__toggle-expand-cell { @@ -211,7 +218,10 @@ background-color: var(--a-surface-hover); } -.navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) { +.navds-table__toggle-expand-cell--open + > .navds-table__toggle-expand-wrapper + > :where(.navds-table__toggle-expand-button) + :where(.navds-table__expandable-icon) { transform: translateY(0) rotate(180deg); } @@ -219,7 +229,10 @@ transform: translateY(1px); } -.navds-table__toggle-expand-cell--open > .navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) { +.navds-table__toggle-expand-cell--open + > .navds-table__toggle-expand-wrapper + > .navds-table__toggle-expand-button:hover + > :where(.navds-table__expandable-icon) { transform: translateY(-1px) rotate(180deg); } diff --git a/@navikt/core/react/src/table/ExpandableRow.tsx b/@navikt/core/react/src/table/ExpandableRow.tsx index 5704e52213..a3696ef146 100644 --- a/@navikt/core/react/src/table/ExpandableRow.tsx +++ b/@navikt/core/react/src/table/ExpandableRow.tsx @@ -114,18 +114,20 @@ export const ExpandableRow: ExpandableRowType = forwardRef( })} > {!expansionDisabled && ( - +
+ +
)} {togglePlacement === "left" && children} diff --git a/@navikt/core/react/src/table/stories/table-2-expandable.stories.tsx b/@navikt/core/react/src/table/stories/table-2-expandable.stories.tsx index 4dc895fbbf..e04a786275 100644 --- a/@navikt/core/react/src/table/stories/table-2-expandable.stories.tsx +++ b/@navikt/core/react/src/table/stories/table-2-expandable.stories.tsx @@ -241,6 +241,38 @@ const data = [ }, ]; +export const ExpandableButtonBleed = () => { + return ( +
+ + + + {columns.map(({ key, name }) => ( + {name} + ))} + + + + + {data.map((row, i) => ( + + {columns.map(({ key }) => ( + {row[key]} + ))} + + ))} + +
+
+ ); +}; + export const ClickableRow = () => { const [isRowOpen1, setIsRowOpen1] = useState(false); const [isRowOpen2, setIsRowOpen2] = useState(false); diff --git a/yarn.lock b/yarn.lock index 9b9c92b647..38bd56242d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3543,7 +3543,7 @@ __metadata: languageName: node linkType: hard -"@navikt/aksel-icons@npm:^6.15.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons": +"@navikt/aksel-icons@npm:^6.16.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons": version: 0.0.0-use.local resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons" dependencies: @@ -3572,8 +3572,8 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint" dependencies: - "@navikt/ds-css": "npm:^6.15.0" - "@navikt/ds-tokens": "npm:^6.15.0" + "@navikt/ds-css": "npm:^6.16.0" + "@navikt/ds-tokens": "npm:^6.16.0" concurrently: "npm:7.2.1" postcss-selector-parser: "npm:^6.0.13" postcss-value-parser: "npm:^4.2.0" @@ -3588,7 +3588,7 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel@workspace:@navikt/aksel" dependencies: - "@navikt/ds-css": "npm:6.15.0" + "@navikt/ds-css": "npm:6.16.0" axios: "npm:1.6.0" chalk: "npm:4.1.0" clipboardy: "npm:^2.3.0" @@ -3609,11 +3609,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-css@npm:*, @navikt/ds-css@npm:6.15.0, @navikt/ds-css@npm:^6.15.0, @navikt/ds-css@workspace:@navikt/core/css": +"@navikt/ds-css@npm:*, @navikt/ds-css@npm:6.16.0, @navikt/ds-css@npm:^6.16.0, @navikt/ds-css@workspace:@navikt/core/css": version: 0.0.0-use.local resolution: "@navikt/ds-css@workspace:@navikt/core/css" dependencies: - "@navikt/ds-tokens": "npm:^6.15.0" + "@navikt/ds-tokens": "npm:^6.16.0" cssnano: "npm:6.0.0" fast-glob: "npm:3.2.11" lodash: "npm:4.17.21" @@ -3626,14 +3626,14 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^6.15.0, @navikt/ds-react@workspace:@navikt/core/react": +"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^6.16.0, @navikt/ds-react@workspace:@navikt/core/react": version: 0.0.0-use.local resolution: "@navikt/ds-react@workspace:@navikt/core/react" dependencies: "@floating-ui/react": "npm:0.25.4" "@floating-ui/react-dom": "npm:^2.0.9" - "@navikt/aksel-icons": "npm:^6.15.0" - "@navikt/ds-tokens": "npm:^6.15.0" + "@navikt/aksel-icons": "npm:^6.16.0" + "@navikt/ds-tokens": "npm:^6.16.0" "@testing-library/dom": "npm:9.3.4" "@testing-library/jest-dom": "npm:^5.16.0" "@testing-library/react": "npm:^15.0.7" @@ -3663,11 +3663,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tailwind@npm:^6.15.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": +"@navikt/ds-tailwind@npm:^6.16.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": version: 0.0.0-use.local resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind" dependencies: - "@navikt/ds-tokens": "npm:^6.15.0" + "@navikt/ds-tokens": "npm:^6.16.0" color: "npm:4.2.3" lodash: "npm:^4.17.21" tailwindcss: "npm:^3.3.3" @@ -3677,7 +3677,7 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tokens@npm:^6.15.0, @navikt/ds-tokens@workspace:@navikt/core/tokens": +"@navikt/ds-tokens@npm:^6.16.0, @navikt/ds-tokens@workspace:@navikt/core/tokens": version: 0.0.0-use.local resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens" dependencies: @@ -7654,11 +7654,11 @@ __metadata: version: 0.0.0-use.local resolution: "aksel.nav.no@workspace:aksel.nav.no" dependencies: - "@navikt/aksel-icons": "npm:^6.15.0" - "@navikt/ds-css": "npm:^6.15.0" - "@navikt/ds-react": "npm:^6.15.0" - "@navikt/ds-tailwind": "npm:^6.15.0" - "@navikt/ds-tokens": "npm:^6.15.0" + "@navikt/aksel-icons": "npm:^6.16.0" + "@navikt/ds-css": "npm:^6.16.0" + "@navikt/ds-react": "npm:^6.16.0" + "@navikt/ds-tailwind": "npm:^6.16.0" + "@navikt/ds-tokens": "npm:^6.16.0" languageName: unknown linkType: soft From d1dd18455614a0c18f645f4064b9d1c019ba6567 Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Wed, 14 Aug 2024 09:18:44 +0200 Subject: [PATCH 2/5] Update .changeset/modern-items-leave.md --- .changeset/modern-items-leave.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/modern-items-leave.md b/.changeset/modern-items-leave.md index 3b88f12f0b..772661e3c2 100644 --- a/.changeset/modern-items-leave.md +++ b/.changeset/modern-items-leave.md @@ -3,4 +3,4 @@ "@navikt/ds-css": patch --- -Table: Fixed background-clipping when using ExapandableRow +Table: Fixed background-clipping when using ExpandableRow. From 88589f073b466399c8697248e0058e194e5ee21a Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 16 Aug 2024 13:35:30 +0200 Subject: [PATCH 3/5] refactor: Use onClick on expandable tablecell --- @navikt/core/css/table.css | 35 +++++-------------- .../core/react/src/table/ExpandableRow.tsx | 33 +++++++++-------- 2 files changed, 27 insertions(+), 41 deletions(-) diff --git a/@navikt/core/css/table.css b/@navikt/core/css/table.css index 22ec5c42a1..9ee0a1b612 100644 --- a/@navikt/core/css/table.css +++ b/@navikt/core/css/table.css @@ -180,14 +180,6 @@ width: 3rem; } -.navds-table__toggle-expand-cell > .navds-table__toggle-expand-wrapper { - position: relative; - width: 100%; - aspect-ratio: 1; - display: grid; - place-content: center; -} - .navds-table--large .navds-table__toggle-expand-cell { padding: 0 var(--a-spacing-2); } @@ -200,28 +192,30 @@ 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); } -.navds-table__toggle-expand-cell--open - > .navds-table__toggle-expand-wrapper - > :where(.navds-table__toggle-expand-button) - :where(.navds-table__expandable-icon) { +.navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) { transform: translateY(0) rotate(180deg); } @@ -229,10 +223,7 @@ transform: translateY(1px); } -.navds-table__toggle-expand-cell--open - > .navds-table__toggle-expand-wrapper - > .navds-table__toggle-expand-button:hover - > :where(.navds-table__expandable-icon) { +.navds-table__toggle-expand-cell--open > .navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) { transform: translateY(-1px) rotate(180deg); } @@ -248,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 a3696ef146..2ad226a35c 100644 --- a/@navikt/core/react/src/table/ExpandableRow.tsx +++ b/@navikt/core/react/src/table/ExpandableRow.tsx @@ -94,6 +94,12 @@ export const ExpandableRow: ExpandableRowType = forwardRef( !expansionDisabled && expandOnRowClick && onRowClick(e); }; + const handleCellClick = ( + e: React.MouseEvent, + ) => { + expansionHandler(e); + }; + return ( <> {!expansionDisabled && ( -
- -
+ )} {togglePlacement === "left" && children} From 8b3c626a6f363a77bbe5dc074d7bbce00d32e532 Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 16 Aug 2024 13:36:37 +0200 Subject: [PATCH 4/5] fire: Removed duplicate eventhandler --- @navikt/core/react/src/table/ExpandableRow.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/@navikt/core/react/src/table/ExpandableRow.tsx b/@navikt/core/react/src/table/ExpandableRow.tsx index 2ad226a35c..b6be40d034 100644 --- a/@navikt/core/react/src/table/ExpandableRow.tsx +++ b/@navikt/core/react/src/table/ExpandableRow.tsx @@ -94,12 +94,6 @@ export const ExpandableRow: ExpandableRowType = forwardRef( !expansionDisabled && expandOnRowClick && onRowClick(e); }; - const handleCellClick = ( - e: React.MouseEvent, - ) => { - expansionHandler(e); - }; - return ( <> {!expansionDisabled && (