fix(onboarding): review-feedback polish by talissoncosta · Pull Request #7989 · Flagsmith/flagsmith

talissoncosta · 2026-07-10T22:37:38Z

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.

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>

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>

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>

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>

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>

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>

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>

vercel · 2026-07-10T22:37:44Z

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

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	Jul 10, 2026 10:37pm
flagsmith-frontend-staging	Ready	Preview, Comment	Jul 10, 2026 10:37pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored		Jul 10, 2026 10:37pm

coderabbitai · 2026-07-10T22:37:50Z

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: cdc2f13c-f0e5-40ca-a103-fe3163cfe694

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 · 2026-07-10T22:38:42Z

Docker builds report

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

p68175655-bot · 2026-07-10T22:42:51Z

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 · 2026-07-10T22:45:10Z

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

4 passed

Details

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

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

5 passed

Details

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

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

6 passed

Details

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

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

6 passed

Details

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

github-actions · 2026-07-10T22:45:51Z

Visual Regression

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

talissoncosta and others added 7 commits July 10, 2026 14:56

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>

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 requested a review from a team as a code owner July 10, 2026 22:37

talissoncosta requested review from kyle-ssg and removed request for a team July 10, 2026 22:37

flagsmith-engineering Bot assigned kyle-ssg Jul 10, 2026

github-actions Bot added the front-end Issue related to the React Front End Dashboard label Jul 10, 2026

talissoncosta mentioned this pull request Jul 10, 2026

feat(onboarding): "next quest" cards #7941

Open

4 tasks

github-actions Bot added the fix label Jul 10, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(onboarding): review-feedback polish#7989

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

talissoncosta commented Jul 10, 2026

Uh oh!

vercel Bot commented Jul 10, 2026

Uh oh!

coderabbitai Bot commented Jul 10, 2026

Review skipped

Uh oh!

github-actions Bot commented Jul 10, 2026 •

edited

Loading

Uh oh!

p68175655-bot commented Jul 10, 2026

Changes

How did you test this code?

Uh oh!

github-actions Bot commented Jul 10, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

talissoncosta commented Jul 10, 2026

Changes

How did you test this code?

Uh oh!

vercel Bot commented Jul 10, 2026

Uh oh!

coderabbitai Bot commented Jul 10, 2026

Review skipped

Uh oh!

github-actions Bot commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Docker builds report

Uh oh!

p68175655-bot commented Jul 10, 2026

Changes

How did you test this code?

Uh oh!

github-actions Bot commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Details

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

Details

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

Details

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

Details

Uh oh!

github-actions Bot commented Jul 10, 2026

Visual Regression

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Jul 10, 2026 •

edited

Loading

github-actions Bot commented Jul 10, 2026 •

edited

Loading