Skip to content

fix(onboarding): review-feedback polish#7989

Open
talissoncosta wants to merge 19 commits into
mainfrom
fix/onboarding-connect-panel-polish
Open

fix(onboarding): review-feedback polish#7989
talissoncosta wants to merge 19 commits into
mainfrom
fix/onboarding-connect-panel-polish

Conversation

@talissoncosta

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 12 commits July 2, 2026 10:53
Add an optional content slot (children), make selected optional, and pass
through className, so SelectableCard can back a navigational card and not just
a selection tile. Additive: existing consumers are unaffected.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The three next-quest cards (gradual rollout, experiment, remote config) are
built on SelectableCard and each deep-links to the flag's real config: rollout
to the segment overrides tab, remote config to the value tab, experiment to
the experiments page. The tab param is the slugified tab label. Locked and
dimmed (inert) until the app connects.

Closes #7739

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add the "Flip it once your app connects" lock affordance beside the Your
flags heading while the toggle is waiting to connect.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Assert the cards are locked before the first evaluation, and that once
connected each one deep-links to the right destination.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Review nit: align the classnames import name with SelectableCard's.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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>
@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

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 15, 2026 1:14pm
flagsmith-frontend-staging Ready Ready Preview, Comment Jul 15, 2026 1:14pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Jul 15, 2026 1:14pm

Request Review

@coderabbitai

coderabbitai Bot commented Jul 10, 2026

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: d1c666ec-cee7-445c-b813-4f6c1de4175d

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
@github-actions github-actions Bot added the fix label Jul 10, 2026
@github-actions

github-actions Bot commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Docker builds report

Image Build Status Security report
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

@p68175655-bot

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

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

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

passed  3 passed

Details

stats  3 tests across 3 suites
duration  42.6 seconds
commit  21e67aa
info  🔄 Run: #18240 (attempt 1)

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

passed  5 passed

Details

stats  5 tests across 4 suites
duration  11.9 seconds
commit  21e67aa
info  🔄 Run: #18240 (attempt 1)

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

passed  7 passed

Details

stats  7 tests across 5 suites
duration  33.3 seconds
commit  21e67aa
info  🔄 Run: #18240 (attempt 1)

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

passed  5 passed

Details

stats  5 tests across 4 suites
duration  11.3 seconds
commit  21e67aa
info  🔄 Run: #18240 (attempt 1)

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

passed  5 passed

Details

stats  5 tests across 4 suites
duration  40.6 seconds
commit  ae7a277
info  🔄 Run: #18292 (attempt 1)

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

passed  5 passed

Details

stats  5 tests across 4 suites
duration  35.6 seconds
commit  ae7a277
info  🔄 Run: #18292 (attempt 1)

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

passed  6 passed

Details

stats  6 tests across 5 suites
duration  32.8 seconds
commit  ae7a277
info  🔄 Run: #18292 (attempt 1)

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

passed  4 passed

Details

stats  4 tests across 4 suites
duration  32.6 seconds
commit  8767248
info  🔄 Run: #18293 (attempt 1)

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

passed  1 passed

Details

stats  1 test across 1 suite
duration  6.9 seconds
commit  8767248
info  🔄 Run: #18293 (attempt 1)

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

passed  2 passed

Details

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

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

passed  4 passed

Details

stats  4 tests across 4 suites
duration  42.2 seconds
commit  8767248
info  🔄 Run: #18293 (attempt 1)

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

passed  5 passed

Details

stats  5 tests across 4 suites
duration  40.5 seconds
commit  8767248
info  🔄 Run: #18293 (attempt 1)

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

passed  4 passed

Details

stats  4 tests across 3 suites
duration  34.3 seconds
commit  765339e
info  🔄 Run: #18295 (attempt 1)

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

failed  1 failed

Details

stats  1 test across 1 suite
duration  9.6 seconds
commit  765339e
info  📦 Artifacts: View test results and HTML report
🔄 Run: #18295 (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)

passed  4 passed

Details

stats  4 tests across 3 suites
duration  39.4 seconds
commit  765339e
info  🔄 Run: #18295 (attempt 1)

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

passed  8 passed

Details

stats  8 tests across 6 suites
duration  41.9 seconds
commit  765339e
info  🔄 Run: #18295 (attempt 1)

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

passed  3 passed

Details

stats  3 tests across 2 suites
duration  12.8 seconds
commit  2e1fdc2
info  🔄 Run: #18298 (attempt 1)

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

passed  5 passed

Details

stats  5 tests across 3 suites
duration  35.3 seconds
commit  2e1fdc2
info  🔄 Run: #18298 (attempt 1)

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

passed  4 passed

Details

stats  4 tests across 3 suites
duration  38.4 seconds
commit  2e1fdc2
info  🔄 Run: #18298 (attempt 1)

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

passed  5 passed

Details

stats  5 tests across 5 suites
duration  7.9 seconds
commit  2e1fdc2
info  🔄 Run: #18298 (attempt 1)

@github-actions

github-actions Bot commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Visual Regression

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

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>
@kyle-ssg

Copy link
Copy Markdown
Member

Maybe this

image

Rather than this ? It looks like our semibold class isn't semibold

image

@kyle-ssg

kyle-ssg commented Jul 15, 2026

Copy link
Copy Markdown
Member
image

I think this isn't picking up markup and template strings too well

Our current live version does

image

@kyle-ssg

kyle-ssg commented Jul 15, 2026

Copy link
Copy Markdown
Member

Border radius on border / maybe spacing could be better
image

talissoncosta and others added 2 commits July 15, 2026 09:46
Review (Kyle): the chips/badge weren't rendering semibold. The project's
working weight class is .font-weight-semibold (token + !important); Bootstrap's
.fw-semibold has no effect here. Swap it across the connect panel.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Review (Kyle): the resting-fill fields felt cramped. Bump the radius to
--radius-sm and the padding to 1px 8px, matching the flag pill.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Rounded bottom corners fought the action underline. Square the bottom so it
sits flush; the flag pill (no underline) keeps its full radius.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Semibold read too heavy on the chips; use font-weight-medium for the SDK
badge and picker chips. Section headings stay semibold.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Zaimwa9
Zaimwa9 previously approved these changes Jul 15, 2026

@Zaimwa9 Zaimwa9 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, thanks for addressing Kyle's comments

Base automatically changed from feat/onboarding-next-quest-cards-7739 to main July 15, 2026 15:34
@talissoncosta talissoncosta dismissed Zaimwa9’s stale review July 15, 2026 15:34

The base branch was changed.

@talissoncosta talissoncosta requested a review from Zaimwa9 July 15, 2026 15:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants