Skip to content

[WIP]: refactor(forms): migrate Input to TS#7762

Open
talissoncosta wants to merge 16 commits into
mainfrom
feat/input-ts-7758
Open

[WIP]: refactor(forms): migrate Input to TS#7762
talissoncosta wants to merge 16 commits into
mainfrom
feat/input-ts-7758

Conversation

@talissoncosta

@talissoncosta talissoncosta commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

Thanks for submitting a PR! Please check the boxes below:

  • I have read the Contributing Guide.
  • I have added information to docs/ if required so people know about the feature.
  • I have filled in the "Changes" section below.
  • I have filled in the "How did you test this code" section below.

Changes

Contributes to #7758

Migrates the Input base component (behind ~94 call sites) from Input.js to a typed function component, Input.tsx. Stacked on #7745 (base branch feat/label-variant-key-ui) — will retarget to main once that merges.

  • Typed FC. React 19 ref-as-prop + useImperativeHandle exposing the E2E-guarded focus() (no-op under E2E, matching the original).
  • Drops the unused react-maskedinput dependency and the checkbox/radio delegation (the one caller renders <Checkbox> directly).
  • Unifies the password/search icon widths via one size map; the invalid password icon uses the colorIconDanger token instead of a hardcoded hex.
  • Updates ~17 call sites: removes bogus DOM InputEvent/KeyboardEvent annotations on Input handlers (React infers the synthetic events) and fixes a few loose usages typing surfaced (JSX in the string title, readonly→readOnly, non-boolean isValid, a boolean value).

Out of scope (follow-ups): the wrapper-less redesign with PasswordInput/SearchInput, an Input variant API, the autocomplete→autoComplete alias removal, and the repo-wide InputEvent-annotation cleanup.

How did you test this code?

  • npm run typecheck: 0 new errors vs the base branch (the typed Input removed one pre-existing error; 976 → 975).
  • npm run lint: clean on all changed files.
  • Opened as draft to validate the CI lint gate, typecheck and E2E. Manual in-app verification (light/dark, password reveal, search, underline variant) still pending.

@talissoncosta talissoncosta added the front-end Issue related to the React Front End Dashboard label Jun 11, 2026
@vercel

vercel Bot commented Jun 11, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Jun 15, 2026 8:36pm
flagsmith-frontend-staging Ready Ready Preview, Comment Jun 15, 2026 8:36pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Jun 15, 2026 8:36pm

Request Review

@talissoncosta talissoncosta changed the title Migrate Input to TS refactor(forms): migrate Input to TS Jun 11, 2026
@talissoncosta talissoncosta marked this pull request as ready for review June 11, 2026 17:53
@talissoncosta talissoncosta requested a review from a team as a code owner June 11, 2026 17:53
@talissoncosta talissoncosta requested review from kyle-ssg and removed request for a team June 11, 2026 17:53
@talissoncosta talissoncosta removed the request for review from kyle-ssg June 11, 2026 17:54
@github-actions

github-actions Bot commented Jun 11, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-7762 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-7762 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-7762 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith:pr-7762 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-7762 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-frontend:pr-7762 Finished ✅ Results ✅

@github-actions

github-actions Bot commented Jun 11, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  35.5 seconds
commit  34e9558
info  🔄 Run: #17442 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  44.6 seconds
commit  34e9558
info  🔄 Run: #17442 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  3 passed

Details

stats  3 tests across 3 suites
duration  1 minute
commit  34e9558
info  🔄 Run: #17442 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  55.5 seconds
commit  34e9558
info  🔄 Run: #17442 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  45.1 seconds
commit  b6ae7f9
info  🔄 Run: #17514 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  4 passed

Details

stats  4 tests across 3 suites
duration  59.1 seconds
commit  b6ae7f9
info  🔄 Run: #17514 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  40.7 seconds
commit  b6ae7f9
info  🔄 Run: #17514 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

failed  1 failed
passed  1 passed

Details

stats  2 tests across 2 suites
duration  21.2 seconds
commit  b6ae7f9
info  📦 Artifacts: View test results and HTML report
🔄 Run: #17514 (attempt 1)

Failed tests

firefox › tests/environment-permission-test.pw.ts › Environment Permission Tests › Environment-level permissions control access to features, identities, and segments @enterprise

### Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  4 passed

Details

stats  4 tests across 4 suites
duration  38.3 seconds
commit  b6ae7f9
info  🔄 Run: #17514 (attempt 2)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  39.6 seconds
commit  484f4cf
info  🔄 Run: #17515 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  11.1 seconds
commit  484f4cf
info  🔄 Run: #17515 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  46.4 seconds
commit  484f4cf
info  🔄 Run: #17515 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  31.6 seconds
commit  484f4cf
info  🔄 Run: #17515 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  43.2 seconds
commit  73b3787
info  🔄 Run: #17516 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  40.3 seconds
commit  73b3787
info  🔄 Run: #17516 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  3 passed

Details

stats  3 tests across 3 suites
duration  56.7 seconds
commit  73b3787
info  🔄 Run: #17516 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  58.9 seconds
commit  73b3787
info  🔄 Run: #17516 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  40.5 seconds
commit  b6e5271
info  🔄 Run: #17518 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  43.8 seconds
commit  b6e5271
info  🔄 Run: #17518 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  58.9 seconds
commit  b6e5271
info  🔄 Run: #17518 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  3 passed

Details

stats  3 tests across 3 suites
duration  39.5 seconds
commit  b6e5271
info  🔄 Run: #17518 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  40.6 seconds
commit  7581761
info  🔄 Run: #17519 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  43.8 seconds
commit  7581761
info  🔄 Run: #17519 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  46.9 seconds
commit  7581761
info  🔄 Run: #17519 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  3 passed

Details

stats  3 tests across 3 suites
duration  1 minute, 2 seconds
commit  7581761
info  🔄 Run: #17519 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  40.9 seconds
commit  1838b31
info  🔄 Run: #17520 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  44.2 seconds
commit  1838b31
info  🔄 Run: #17520 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  55.1 seconds
commit  1838b31
info  🔄 Run: #17520 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  1 minute, 6 seconds
commit  1838b31
info  🔄 Run: #17520 (attempt 1)

@github-actions

github-actions Bot commented Jun 11, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Visual Regression

19 screenshots compared. See report for details.
View full report

@talissoncosta talissoncosta marked this pull request as draft June 11, 2026 18:40
@talissoncosta talissoncosta mentioned this pull request Jun 11, 2026
Closed
4 tasks
Base automatically changed from feat/label-variant-key-ui to main June 15, 2026 15:19
talissoncosta and others added 2 commits June 15, 2026 12:29
@talissoncosta @claude
feat(forms): migrate Input to TypeScript
4768404 
Convert Input.js to a typed function component (Input.tsx). React 19
ref-as-prop + useImperativeHandle for the E2E-guarded focus(); drop the
unused react-maskedinput dependency and the checkbox/radio delegation.
Unify the password/search icon widths and use the colorIconDanger token.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta @claude
refactor(integrations): render Checkbox directly
9506e60 
Input no longer delegates type='checkbox' to Checkbox, so the single
caller uses <Checkbox> directly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta @claude
refactor(forms): compose FieldLabel and FieldError in InputGroup
92455d8 
InputGroup now renders FieldLabel (label + info-icon tooltip) and FieldError
instead of hand-rolling them, and wires label -> control -> error off the useId
id: htmlFor / id / aria-describedby + aria-invalid, so screen readers announce
the field's error (previously the error id was name-based and nothing pointed at
it). FieldLabel gains a tooltipPlace prop so InputGroup's tooltipPlace survives.

Intentional behaviour changes across ~62 fields (Chromatic is skipped on the
draft, so these are unverified visually):
- tooltip hover target is the info icon only (was the whole label)
- field errors restyle via FieldError (text-small, d-block, mt-1, role=alert)
- errors are now associated with the control via aria-describedby/aria-invalid

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta @claude
refactor(forms): drop dead top-level props from InputGroup + consumers
b6ae7f9 
InputGroup never forwarded top-level props (only inputProps), so name,
autocomplete, autoFocus, autoValidate, search and rows passed at the top level
were always ignored. Remove them from InputGroupProps and strip the ~32 dead
occurrences across the consumers. Behaviour-preserving — these props had no
effect; the real values come from inputProps. Slims the interface back down
after the migration.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta talissoncosta marked this pull request as ready for review June 15, 2026 17:31
@talissoncosta talissoncosta changed the title refactor(forms): migrate Input to TS [WIP]: refactor(forms): migrate Input to TS Jun 15, 2026
@talissoncosta
fix(forms): vertically centre FieldLabel's tooltip icon
484f4cf 
The Tooltip wraps the icon in an inline span, so align-items-center on the
label centred the span but not the 12px svg inside it (control-label's
svg vertical-align + line-height pushed it off-centre). Make the trigger span
a centred flex box so the icon sits centred against the label text.
@talissoncosta
docs(forms): add InputGroup Storybook story
73b3787 
Variant stories (default, tooltip, single/multiple errors, disabled, textarea,
unsaved, sizes, right component) for Chromatic coverage in light + dark — this
would have caught the tooltip-icon alignment regression.

To render in Storybook, import Row/Flex in InputGroup rather than relying on the
runtime globals (both are .tsx now), which also drops a legacy global dependency
per the standing TODO in .storybook/preview.js.
@talissoncosta
fix(forms): match prod label layout for tooltip icon and unsaved badge
b6e5271 
FieldLabel was using d-flex on the label, which re-aligned the inline content
(unsaved badge sat off vs prod's baseline-inline placement). Drop flex from the
label so children flow inline like the original control-label, and centre the
tooltip icon via d-inline-flex on its trigger (stays inline + centred). Restore
the title->badge gap (ml-1) that the original {' '} provided.

Verified in Storybook (light + dark) against the prod look.
@talissoncosta
docs(forms): use the real forgot-password example in InputGroup story
7581761 
Mirror the login form's actual rightComponent usage (Forgot password link next
to the Password field) instead of a made-up API key example.
@talissoncosta
refactor(forms): move login Forgot-password below the field, drop rig…
1838b31 
…htComponent

The login form placed 'Forgot password' in the password field's label row via
InputGroup's rightComponent escape hatch — an uncommon pattern. Move it to a
right-aligned link below the field (the conventional placement). HomePage was
the sole rightComponent consumer, so remove the prop from InputGroup entirely
and its Storybook story.

Behaviour: same link/handler, just relocated. No E2E selects it by position.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@talissoncosta talissoncosta

Labels

front-end Issue related to the React Front End Dashboard refactor

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@talissoncosta @kyle-ssg