Skip to content

fix(onboarding): review-feedback polish#7989

Open
talissoncosta wants to merge 8 commits into
feat/onboarding-next-quest-cards-7739from
fix/onboarding-connect-panel-polish
Open

fix(onboarding): review-feedback polish#7989
talissoncosta wants to merge 8 commits into
feat/onboarding-next-quest-cards-7739from
fix/onboarding-connect-panel-polish

Conversation

@talissoncosta

@talissoncosta talissoncosta commented Jul 10, 2026

Copy link
Copy Markdown
Contributor
  • 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 #7739

Polish for the onboarding quickstart flow, from review feedback on #7941 (Kyle, Wadii, Matt). Stacked on that branch.

  • Code card scrollbar only shows on overflow, not always.
  • Selected SDK shown as an accent badge in both code cards; picker chips match its weight (fw-semibold).
  • JavaScript SDK logo is legible in light mode.
  • Corrected the React init snippet to use FlagsmithProvider + useFlags.
  • More breathing room above the theme toggle.
  • Inline-edit fields (org, project, flag name) now read as editable at rest, not only on hover.

How did you test this code?

Manually against the staging preview, plus lint and typecheck. Open /getting-started, toggle light/dark, switch SDKs, then check the code cards, the editable header fields, and the theme-toggle spacing.

talissoncosta and others added 7 commits July 10, 2026 14:56
@talissoncosta @claude
fix(onboarding): only show the code-card scrollbar on overflow
a8fb6bd 
The code card used overflow-x: scroll, rendering an empty scroll track even
when the snippet fits. Switch to auto so the bar shows only on overflow; the
webkit rule still forces it over the global dark-scroll mixin's hover toggle,
so a long snippet's bar doesn't flicker.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta @claude
style(onboarding): show the selected SDK as a badge in the code card
fd9d68a 
Replace the plain text language label in the code card header with the same
accent badge (logo + label) the SDK picker uses for the selected chip, in
semibold. Reuses the Chip primitive rather than the bespoke label style.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta @claude
fix(onboarding): make the JavaScript SDK logo legible on light mode
233b661 
The JS logo hole-punched the letters out of the yellow square, so they showed
the chip behind them and washed out on a light chip. Draw it as the brand badge
instead - solid black JS on a rounded yellow square - so it reads on both light
and dark.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta @claude
fix(code-help): correct the React init snippet
8250b5d 
The shared React init snippet was two files mashed into one - two 'export
default function' (App and HomePage, invalid JS), duplicate imports, an unused
useFlagsmith import, and an App that never rendered HomePage. Make it one
coherent example: a named HomePage using useFlags, rendered inside the default
App wrapped in FlagsmithProvider. Shared via codeHelp.INIT, so this fixes the
snippet app-wide, including the onboarding wire step.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta @claude
style(onboarding): match SDK picker chips to the badge weight
2cbe93a 
Apply fw-semibold to the selectable SDK chips (and the More/Less chip) so
they match the selected-SDK badge in the code card.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta @claude
style(onboarding): add breathing room above the theme toggle
c16c0ad 
Review nit: bump the flow's top padding (4px -> 24px) so the theme-toggle
row isn't flush to the top edge.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta @claude
style(onboarding): make inline-edit fields read as editable at rest
d1d4388 
Review feedback (Matt): the org/project fields only showed a fill on hover, so
they read as plain text until clicked. Give them a resting fill (matching the
flag pill) and a full-opacity pencil, deepening on hover for feedback.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta talissoncosta requested a review from a team as a code owner July 10, 2026 22:37
@talissoncosta talissoncosta requested review from kyle-ssg and removed request for a team July 10, 2026 22:37
@vercel

vercel Bot commented Jul 10, 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 Jul 13, 2026 6:11pm
flagsmith-frontend-staging Ready Ready Preview, Comment Jul 13, 2026 6:11pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Jul 13, 2026 6:11pm

Request Review

@coderabbitai

coderabbitai Bot commented Jul 10, 2026 •
edited
Loading

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 8a5ff4c9-0a60-466f-8ed2-03271f7f5f89

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Comment @coderabbitai help to get the list of available commands.

@github-actions github-actions Bot added the front-end Issue related to the React Front End Dashboard label Jul 10, 2026
@talissoncosta talissoncosta mentioned this pull request Jul 10, 2026
Open
4 tasks
@github-actions github-actions Bot added the fix label Jul 10, 2026
@github-actions

github-actions Bot commented Jul 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Docker builds report

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

@p68175655-bot

p68175655-bot commented Jul 10, 2026

Copy link
Copy Markdown
  • 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 #7739

Polish for the onboarding quickstart flow, from review feedback on #7941 (Kyle, Wadii, Matt). Stacked on that branch.

  • Code card scrollbar only shows on overflow, not always.
  • Selected SDK shown as an accent badge in both code cards; picker chips match its weight (fw-semibold).
  • JavaScript SDK logo is legible in light mode.
  • Corrected the React init snippet to use FlagsmithProvider + useFlags.
  • More breathing room above the theme toggle.
  • Inline-edit fields (org, project, flag name) now read as editable at rest, not only on hover.

How did you test this code?

Manually against the staging preview, plus lint and typecheck. Open /getting-started, toggle light/dark, switch SDKs, then check the code cards, the editable header fields, and the theme-toggle spacing.

@github-actions

github-actions Bot commented Jul 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

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

passed  4 passed

Details

stats  4 tests across 3 suites
duration  11.8 seconds
commit  d1d4388
info  🔄 Run: #18172 (attempt 1)

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

passed  5 passed

Details

stats  5 tests across 4 suites
duration  7.5 seconds
commit  d1d4388
info  🔄 Run: #18172 (attempt 1)

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

passed  6 passed

Details

stats  6 tests across 5 suites
duration  34.6 seconds
commit  d1d4388
info  🔄 Run: #18172 (attempt 1)

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

passed  6 passed

Details

stats  6 tests across 5 suites
duration  12.2 seconds
commit  d1d4388
info  🔄 Run: #18172 (attempt 1)

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

failed  1 failed

Details

stats  1 test across 1 suite
duration  22.4 seconds
commit  30eeb34
info  📦 Artifacts: View test results and HTML report
🔄 Run: #18204 (attempt 1)

Failed tests

firefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss

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

failed  1 failed

Details

stats  1 test across 1 suite
duration  23.1 seconds
commit  30eeb34
info  📦 Artifacts: View test results and HTML report
🔄 Run: #18204 (attempt 1)

Failed tests

firefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss

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

failed  1 failed

Details

stats  1 test across 1 suite
duration  22.8 seconds
commit  23652a2
info  📦 Artifacts: View test results and HTML report
🔄 Run: #18205 (attempt 1)

Failed tests

firefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss

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

failed  1 failed

Details

stats  1 test across 1 suite
duration  22.5 seconds
commit  4550c7a
info  📦 Artifacts: View test results and HTML report
🔄 Run: #18206 (attempt 1)

Failed tests

firefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss

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

failed  1 failed

Details

stats  1 test across 1 suite
duration  23.7 seconds
commit  23652a2
info  📦 Artifacts: View test results and HTML report
🔄 Run: #18205 (attempt 1)

Failed tests

firefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss

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

failed  1 failed
passed  1 passed

Details

stats  2 tests across 2 suites
duration  23.3 seconds
commit  23652a2
info  📦 Artifacts: View test results and HTML report
🔄 Run: #18205 (attempt 1)

Failed tests

firefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss

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

failed  1 failed

Details

stats  1 test across 1 suite
duration  23.6 seconds
commit  4550c7a
info  📦 Artifacts: View test results and HTML report
🔄 Run: #18206 (attempt 1)

Failed tests

firefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss

@github-actions

github-actions Bot commented Jul 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Visual Regression

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

@github-actions github-actions Bot added fix and removed fix labels Jul 13, 2026
@talissoncosta @claude
fix(onboarding): avoid Safari contact autofill on inline-edit fields
4550c7a 
Safari AutoFill read the "<thing> name" aria-label as a contact-name field
and showed its person icon on the project field. Label the fields "Edit
<thing>" instead: a clear accessible name Safari doesn't classify as a contact.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@talissoncosta talissoncosta force-pushed the fix/onboarding-connect-panel-polish branch from 23652a2 to 4550c7a Compare July 13, 2026 18:10
@github-actions github-actions Bot added fix and removed fix labels Jul 13, 2026
@github-actions github-actions Bot added fix and removed fix labels Jul 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kyle-ssg kyle-ssg Awaiting requested review from kyle-ssg kyle-ssg is a code owner automatically assigned from Flagsmith/flagsmith-front-end

Assignees

@kyle-ssg kyle-ssg

Labels

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

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@talissoncosta @p68175655-bot @kyle-ssg