fix(onboarding): review-feedback polish#7989
Conversation
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>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Comment |
Docker builds report
|
|
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
Playwright Test Results (oss - depot-ubuntu-latest-16)Details
Failed testsfirefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss Details
Failed testsfirefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss Details
Failed testsfirefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss Details
Failed testsfirefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss Details
Failed testsfirefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss Details
Failed testsfirefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss Details
Failed testsfirefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)Details
Playwright Test Results (oss - depot-ubuntu-latest-16)Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)Details
Playwright Test Results (oss - depot-ubuntu-latest-16)Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)Details
Playwright Test Results (oss - depot-ubuntu-latest-16)Details
Failed testsfirefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)Details
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
|
Visual Regression19 screenshots compared. See report for details. |
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>
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
left a comment
There was a problem hiding this comment.
Nice, thanks for addressing Kyle's comments





docs/if required so people know about the feature.Changes
Contributes to #7739
Polish for the onboarding quickstart flow, from review feedback on #7941 (Kyle, Wadii, Matt). Stacked on that branch.
fw-semibold).FlagsmithProvider+useFlags.How did you test this code?
Manually against the staging preview, plus
lintandtypecheck. Open/getting-started, toggle light/dark, switch SDKs, then check the code cards, the editable header fields, and the theme-toggle spacing.