Skip to content

fix(SDK-1219): make DataView column justify the single source of truth for alignment - #2648

Open
aaronlee777 wants to merge 3 commits into
mainfrom
al-fix-dataview-justify
Open

fix(SDK-1219): make DataView column justify the single source of truth for alignment#2648
aaronlee777 wants to merge 3 commits into
mainfrom
al-fix-dataview-justify

Conversation

@aaronlee777

@aaronlee777 aaronlee777 commented Aug 26, 2026

Copy link
Copy Markdown
Contributor

Summary

  • DataView column alignment was expressed two ways, but only one reached component adapters: column.justify (baked into cell content via a cellEnd flex wrapper) and an implicit .react-aria-Cell:last-child { text-align: right } rule internal to the default renderer's stylesheet.
  • The implicit rule auto-right-aligned whatever landed in the last column, was invisible to custom adapters (they only receive { key, content }), and forced per-table :last-child { text-align: left } overrides to cancel it. It also produced artifacts like a trailing date column rendering right-aligned in a payment summary.
  • This PR makes column.justify the single source of truth: numeric columns declare justify: 'end', the implicit CSS is removed, and the injected actions column is end-aligned through the same mechanism.

Changes

  • Declare justify: 'end' on currency/amount/hours/tax-rate columns across DataView tables (Payroll, Employee, Contractor, Company). Footers inherit column.justify, so totals rows align automatically. Left rate-as-text columns and single-row horizontal payment summaries left-aligned (right-aligning them reads worse).
  • Remove the implicit default .react-aria-Cell:last-child { text-align: right } from the default Table renderer (kept all cosmetic border-radius :last-child rules and the base text-align: left).
  • End-align the injected actions/row-menu column in DataTable via the existing withJustify helper, so it stays flush-right without the last-child rule.
  • Delete the two obsolete overrides that only existed to cancel the implicit default (EmployeeTable's :not([data-has-menu]) rule + its data-has-menu attr, and OffCycleTaxWithholdingTable's last-child override).
  • Tests + story: extend the DataTable column justify tests (an unset last column is not wrapped; the actions column is end-aligned) and add a DataViewWithJustifiedColumns story.

Demo

Reviewable in Storybook via the new UI/Components/DataViewDataViewWithJustifiedColumns story (right-aligned Amount column + footer, flush-right row menu). In the SDK dev app (dev-source routes): JobsList amount, Deductions, PayrollReceipts, and StateTaxes → "Manage tax rates" now right-align numeric columns; text/status/date columns and rate-as-text stay left.

Related

  • Jira ticket: SDK-1219
  • Consumer-side interim fix (Bootstrap adapter, to be removed once this releases and the dep bumps): Gusto/gws-flows#4052

Testing

  • npm run tsc && npm run lint:check && npm run format:check
  • npx vitest run src/components/Common/DataView/DataTable/DataTable.test.tsx — includes the extended column justify cases
  • Broader: npx vitest run src/components/Payroll src/components/Employee src/components/Company/StateTaxes src/components/Contractor/Payments (touched tables) — all green
  • Storybook: npm run storybookUI/Components/DataViewDataViewWithJustifiedColumns
  • Manual regression: confirm actions/row-menu columns stay flush-right and text/status/date last columns are now left-aligned (e.g. ContractorList, EmployeeList)

aaronlee777 and others added 3 commits August 26, 2026 15:58
Right-align currency, amount, hours, and tax-rate columns across DataView
tables by declaring column.justify explicitly, instead of relying on the
implicit "last column is right-aligned" CSS. This right-aligns mid-table
numeric columns that previously rendered left, and their footers inherit the
justify automatically.

Leaves rate-as-text columns and single-row horizontal payment summaries
left-aligned, where right-alignment reads worse.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…gnment

Remove the implicit ".react-aria-Cell:last-child { text-align: right }" rule
from the default Table renderer. That rule auto-right-aligned whatever landed
in the last column and was invisible to component adapters, so custom adapters
had to reverse-engineer it (and got footers wrong). Alignment now comes solely
from column.justify, which flows through cell content to every renderer.

- End-align the injected actions/row-menu column in DataTable via withJustify,
  so it stays flush-right without the last-child rule.
- Delete the two per-table overrides that only existed to cancel the implicit
  default (EmployeeTable's :not([data-has-menu]) rule + its data-has-menu attr,
  and OffCycleTaxWithholdingTable's last-child override).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Extend the DataTable "column justify" tests: an unset column (including the
  last one) is not wrapped in cellEnd, and the injected actions column is
  end-aligned when itemMenu is provided.
- Add a DataViewWithJustifiedColumns story so the alignment behavior is
  visually reviewable in Storybook (no existing story exercised justify).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@aaronlee777
aaronlee777 marked this pull request as ready for review August 27, 2026 15:13
@aaronlee777
aaronlee777 requested a review from a team as a code owner August 27, 2026 15:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant