chore: Indent expandable table rows with a custom property

[TrevorBurnham]

Description

cell-padding-inline-start in table/cell-base/_cell-box.scss generates a rule pair for each of the 11 expandable levels (0-9 and next), and body-cell/styles.scss calls it in 11 contexts. That accounts for 220 of the 375 rules in table/body-cell/styles.scoped.css.

This PR sets the level as an inline custom property (tableExpandableLevel, capped at 9 as before) on expandable column cells, and the mixin emits one rule pair keyed on .body-cell-expandable. That class is applied under the same condition as the level classes and has the same specificity, so the cascade is unchanged.

Several internal apps select on [class*="expandable-level-N"] to tint rows or extend indentation past level 9, so the level classes are still applied and kept in the class map as rules with no declarations.

table/body-cell/styles.scoped.css:

	Raw	Gzip	Brotli
Before	183.0 KB	6.4 KB	5.0 KB
After	59.0 KB	4.2 KB	3.6 KB

Adding a custom property changes the shared hash in every generated custom property name, as with any addition to the list. The second commit updates the nine styles.test.tsx snapshots that contain the hash; the only change in them is ka4djm to fikhx4.

Related links, issue #, if available: n/a

How has this been tested?

• Compiled CSS: after mapping each expandable-level-next rule to its .body-cell-expandable replacement and dropping levels 0-9, the remaining rules are identical and in the same order. Every removed level-N declaration equals the new one with the property set to N, either textually or, for the toggle wrapper, after evaluating the calc.
• Computed styles in Chrome: recorded padding, margins, and child positions of every body cell on the expandable-rows permutations, expandable-rows-test, grouped-table-hooks and progressive-loading pages, in classic and visual refresh (default, one-theme, core-update), both densities, and LTR and RTL, plus hover and edit mode on editable cells. 64 page and mode combinations, 56,992 cells and 2,432 interactions matched main exactly, including rows nested past level 9.
• New unit tests check the property value per level (including the cap), that it is absent outside the expandable column and while editing, and that the level classes are still applied.
• Table, composable table, and src/__tests__ unit suites pass, apart from the Style API docs tests that need a full build.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[Copilot]

Copilot review overview

🟢 Approval recommended

The focused implementation preserves existing behavior and compatibility with adequate regression coverage.

Review effort: Balanced
Findings: None

What changed in this PR

Replaces per-level expandable table indentation rules with a numeric CSS custom property, substantially reducing generated CSS while preserving compatibility.

Changes:

• Sets capped indentation levels inline for expandable cells.
• Consolidates SCSS indentation rules while retaining legacy level classes.
• Adds regression tests for nesting, capping, column scope, editing, and classes.

File	Description
src/​table/​cell-base/​_cell-box.scss	Calculates indentation from the custom property.
src/​table/​body-cell/​td-element.tsx	Sets capped levels and preserves legacy classes.
src/​table/​body-cell/​styles.scss	Retains declaration-free compatibility classes.
src/​table/​__tests__/​expandable-rows.test.tsx	Tests custom-property and class behavior.
build-tools/​utils/​custom-css-properties.js	Registers the table custom property.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.83%. Comparing base (3b62c18) to head (2556598).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5112      +/-   ##
==========================================
- Coverage   97.70%   93.83%   -3.88%     
==========================================
  Files         990      989       -1     
  Lines       31818    27559    -4259     
  Branches    11752     9496    -2256     
==========================================
- Hits        31089    25861    -5228     
- Misses        722      786      +64     
- Partials        7      912     +905     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.