[Table] ExpandableRow contentGutter-prop (#3507)

* ✨ New prop contentGutter for ExpandableRow component * ✨ Added new prop-support in darkside CSS * 📝 changeset * Update @navikt/core/react/src/table/ExpandableRow.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
navikt · Jan 21, 2025 · fad913c · fad913c
1 parent 54e03db
commit fad913c
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 5 deletions.
diff --git a/.changeset/swift-lions-promise.md b/.changeset/swift-lions-promise.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+Table: New prop `contentGutter` added to `ExpandableRow`-component. This allows user more control for content layout inside expandable element.
diff --git a/@navikt/core/css/darkside/table.darkside.css b/@navikt/core/css/darkside/table.darkside.css
@@ -229,9 +229,27 @@
 }
 
 .navds-table__expanded-row-content {
-  padding: var(--ax-space-16) calc(var(--ax-space-8) + 3rem);
+  --__ac-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);
+
+  padding-block: var(--ax-space-16);
 }
 
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--ax-space-8) calc(var(--ax-space-8) + 3rem);
+  padding-block: var(--ax-space-8);
+}
+
+.navds-table__expanded-row-content--gutter-both {
+  padding-inline: var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-left {
+  padding-inline: var(--__ac-table-expanded-row-pi) var(--ax-space-8);
+}
+
+.navds-table__expanded-row-content--gutter-right {
+  padding-inline: var(--ax-space-8) var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-none {
+  padding-inline: var(--ax-space-8);
 }
diff --git a/@navikt/core/css/table.css b/@navikt/core/css/table.css
@@ -249,11 +249,29 @@
 }
 
 .navds-table__expanded-row-content {
-  padding: var(--a-spacing-4) calc(var(--a-spacing-2) + 3rem);
+  --__ac-table-expanded-row-pi: calc(var(--a-spacing-2) + 3rem);
+
+  padding-block: var(--a-spacing-4);
 }
 
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem);
+  padding-block: var(--a-spacing-2);
+}
+
+.navds-table__expanded-row-content--gutter-both {
+  padding-inline: var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-left {
+  padding-inline: var(--__ac-table-expanded-row-pi) var(--a-spacing-2);
+}
+
+.navds-table__expanded-row-content--gutter-right {
+  padding-inline: var(--a-spacing-2) var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-none {
+  padding-inline: var(--a-spacing-2);
 }
 
 @media (forced-colors: active) {

diff --git a/@navikt/core/react/src/table/ExpandableRow.tsx b/@navikt/core/react/src/table/ExpandableRow.tsx
@@ -48,6 +48,11 @@ export interface ExpandableRowProps extends Omit<RowProps, "content"> {
    * @default 999
    */
   colSpan?: number;
+  /**
+   * Optional left, right-gutter for content
+   * @default Same as `togglePlacement`
+   */
+  contentGutter?: "left" | "right" | "none";
 }
 
 export type ExpandableRowType = React.ForwardRefExoticComponent<
@@ -67,6 +72,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
       expansionDisabled = false,
       expandOnRowClick = false,
       colSpan = 999,
+      contentGutter,
       onClick,
       ...rest
     },
@@ -139,7 +145,9 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
           <td colSpan={colSpan} className="navds-table__expanded-row-cell">
             <AnimateHeight
               className="navds-table__expanded-row-collapse"
-              innerClassName="navds-table__expanded-row-content"
+              innerClassName={`navds-table__expanded-row-content navds-table__expanded-row-content--gutter-${
+                contentGutter ?? togglePlacement
+              }`}
               height={_open ? "auto" : 0}
               duration={150}
               easing="cubic-bezier(0.39,0.57,0.56,1)"

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
@@ -120,6 +120,68 @@ export const ExpandableSmall = () => {
   );
 };
 
+export const ExpandableContentGutter = () => {
+  return (
+    <Table zebraStripes>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell></Table.HeaderCell>
+          <Table.HeaderCell>Cell</Table.HeaderCell>
+          <Table.HeaderCell>Cell</Table.HeaderCell>
+          <Table.HeaderCell></Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        <Table.ExpandableRow
+          defaultOpen
+          content="ContentContent ContentContent ContentContent"
+          togglePlacement="left"
+        >
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+        </Table.ExpandableRow>
+        <Table.ExpandableRow
+          content="ContentContent ContentContent ContentContent"
+          togglePlacement="right"
+          defaultOpen
+        >
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+        </Table.ExpandableRow>
+        <Table.ExpandableRow
+          content="ContentContent ContentContent ContentContent"
+          defaultOpen
+          contentGutter="left"
+        >
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+        </Table.ExpandableRow>
+        <Table.ExpandableRow
+          content="ContentContent ContentContent ContentContent"
+          defaultOpen
+          contentGutter="right"
+        >
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+        </Table.ExpandableRow>
+        <Table.ExpandableRow
+          content="ContentContent ContentContent ContentContent Con.."
+          defaultOpen
+          contentGutter="none"
+        >
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+        </Table.ExpandableRow>
+      </Table.Body>
+    </Table>
+  );
+};
+
 const columns = [
   {
     name: "Navn",