feat(onboarding): Update SCM onboarding styles to match updated designs#113352
Draft
feat(onboarding): Update SCM onboarding styles to match updated designs#113352
Conversation
github-actions
bot
added
Scope: Frontend
Contributor
|
🚨 Warning: This pull request contains Frontend and Backend changes! It's discouraged to make changes to Sentry's Frontend and Backend in a single pull request. The Frontend and Backend are not atomically deployed. If the changes are interdependent of each other, they must be separated into two pull requests and be made forward or backwards compatible, such that the Backend or Frontend can be safely deployed independently. Have questions? Please ask in the |
Behind the onboarding-scm-experiment flag, align the welcome and SCM connect steps with the updated designs: swap the animated background and large heading for the ScmStepHeader layout, drop the wordmark and adaptive page corners on SCM steps, and move the connect step's skip/continue actions into the shared GenericFooter. Refs VDY-90
Behind the onboarding-scm-experiment flag, relocate the "Skip onboarding" action from per-step footers into the shared onboarding header so it is available on SCM steps that previously had no skip affordance. A new OnboardingSkipButton keeps a per-step config map of analytics source, sidebar source, and referrer so existing events on the welcome and setup-docs steps retain their current identifiers while the three SCM-only steps get fresh literal sources. The welcome footer skip button and the first-event footer skip link are hidden under the experiment to avoid double-rendering. Refs VDY-90
Add a unit spec for OnboardingSkipButton that locks the per-step analytics source, sidebar source, and referrer tuples for each mapped OnboardingStepId and asserts unmapped steps render nothing. Extend the SCM onboarding integration suite with two cases: clicking the header skip on scm-connect fires growth.onboarding_clicked_skip with the scm-connect source, and the welcome step renders a single skip button rather than a header button plus a footer button. Refs VDY-90
Exercise the new header skip button on scm-platform-features, a step that previously had no skip affordance. Asserts that clicking the header button navigates away from onboarding and carries the step-specific referrer query param so the analytics source remains identifiable from the landing URL. Refs VDY-90
Make the StepHeading badge optional and skip it on setup-docs when the SCM experiment is active. The step number was hardcoded to 2 and the stepper in the onboarding header already communicates position, so the badge duplicated that signal. The heading text is preserved so existing acceptance waits on the SDK heading still work. Refs VDY-90
When the SCM experiment is active, switch the step-level Back button from an absolute top-left position inside the container to a viewport-fixed bottom-left position so it sits in the footer band alongside each step's primary actions. Legacy flows retain the original top-left placement. Refs VDY-90
Replace the fixed-overlay Back button placement with an opt-in genBackButton function on StepProps. In the SCM experiment, each step component renders the Back button inside its own footer; legacy flows continue to render the absolute top-left overlay from onboarding.tsx. ScmStepFooter gains a leading slot to position the Back button on the left while keeping primary actions right-aligned, and FirstEventFooter accepts a leading node that replaces the skip link in column one under the SCM experiment. Refs VDY-90
Replace the inline ScmStepFooter usage on scm-platform-features and scm-project-details with the fixed GenericFooter pattern already used by scm-connect so all SCM steps render a consistent bottom-pinned footer band carrying the Back button on the left and the primary action on the right. ScmStepFooter has no remaining callers and is removed. Relabel the SCM connect skip button to "Continue without repo" so the affordance reads as a step-level action rather than an onboarding-level skip, and update the matching JS and acceptance test selectors. Also drop the bold weight on the SCM step subtitle. Refs VDY-90
Make ScmStepHeader's heading and subtitle sizes configurable, have the welcome screen render its subtitle at size "xl", and shrink the OnboardingContainer's top/bottom padding from 120px to 60px while the SCM experiment is active so the redesigned steps sit closer to the top of the viewport. Refs VDY-90
jaydgoss
force-pushed
the
jaygoss/vdy-90-update-scm-onboarding-styles-to-match-updated-designs
branch
from
9c1cb41 to
ab57b2c
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Bring the SCM onboarding flow in line with the latest Figma designs. The branch collects the layout, spacing, and component tweaks that landed after the initial SCM onboarding scaffolding.
Highlights:
ScmStepHeaderwith configurable heading/subtitle sizes so the welcome screen can scale its subtitle up while the subsequent steps keep the compact variant.GenericFooter, the Back button is pinned to the bottom-left under the SCM experiment, and the setup-docs step badge is hidden while the experiment is active.The oldest commit on the branch is the
onboarding-scm-project-details-experimentflag registration from VDY-82, which already merged via squash in #113072. The diff against master reflects only the remaining styling work.Refs VDY-90