Skip to content

fix(SDK-1264): fix gross-up modal default value, loading state, and alignment - #2718

Open
krisxcrash wants to merge 2 commits into
mainfrom
kw/fix/sdk-1264-gross-up-modal-polish
Open

fix(SDK-1264): fix gross-up modal default value, loading state, and alignment#2718
krisxcrash wants to merge 2 commits into
mainfrom
kw/fix/sdk-1264-gross-up-modal-polish

Conversation

@krisxcrash

Copy link
Copy Markdown
Contributor

Summary

Three separate, previously-reported issues in the gross-up (net amount) calculator modal:

  • Lingering "0"netPay defaulted to 0, which NumberInput rendered as a visible $0.00 before the user touched the field. Reuses the coerceNaN preprocessor already established for this exact purpose in the deduction form schema, so the field renders blank until a value is entered.
  • Button width shift on click — the Calculate button swapped its own label to "Calculating..." with no fixed width, visibly growing and shifting its neighbors. Switched to Button's built-in isLoading (same pattern the footer's Apply button already uses one screen element away), which keeps the label's width fixed and overlays a spinner instead.
  • Input/button misalignment — two prior fix attempts here (a magic-number margin, then an align-self hack) didn't hold up, because the button's align-self: flex-end tracked whichever sibling was tallest — fine with no error, but drifting once a validation error grew the input's height. Root-caused instead: visually hides the input's own label (shouldVisuallyHideLabel, keeps the accessible name) and renders one shared label above the whole row, so the input and button boxes now start flush at the same top edge regardless of what renders below either of them.

Jira: SDK-1264

Test plan

  • GrossUpModal.test.tsx passes (7/7)
  • eslint/tsc --noEmit clean
  • Open the modal in the browser: field starts blank, Calculate doesn't shift the button, and the button stays aligned with the input both before and after triggering the validation error
  • Confirm with a screen reader/axe that "Net amount" isn't announced twice (the visible label is decorative/aria-hidden; the real accessible name is the visually-hidden field label)

krisxcrash and others added 2 commits September 4, 2026 16:24
…lignment

Three separate issues in the same modal:
- netPay defaulted to 0, which NumberInput rendered as a visible "$0.00"
  before the user touched the field. Reuses the coerceNaN preprocessor
  already established for this in the deduction form schema so the field
  starts blank.
- The Calculate button swapped its own label to "Calculating..." with no
  fixed width, shifting its neighbors. Switched to Button's built-in
  isLoading, matching how the footer's Apply button already handles this.
- The button drifted out of alignment with the input whenever a
  validation error grew the input's height, because the button's
  align-self tracked the tallest sibling rather than the input itself.
  Visually hides the input's own label and adds one shared label above
  the row instead, so both boxes start flush at the same top edge
  regardless of what renders below.
@krisxcrash
krisxcrash marked this pull request as ready for review September 4, 2026 23:36
@krisxcrash
krisxcrash requested a review from a team as a code owner September 4, 2026 23:36
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