Components · coach-admin
Feature onboarding
PlannedIntroduces a new feature in place.
- Source
components/ui/popover.tsx - Figma: not linked yet (Q13)
What it is for
Introduces a new or unused feature in place, with a short explanation, an image or video, and a way to try it or dismiss it.
Built from
- Popover for a pointer to one control.
- Dialog for a short multi-step introduction.
- Button for "Try it" and "Not now".
- Carousel only when steps really need images.
Guidelines so far
- Show it once, and never block the coach's task.
- Remember dismissals per coach.
Replaces in coach-admin
src/reusableComponents/FeatureOnboarding/ with its trigger (about 120 style values).
From the read-only audit of coach-admin: 104 style values, 125 uses.
Classes and selectors
.onboarding-image7.onboarding-hero__overlay5.onboarding-topbar4.onboarding-instagram__input4.onboarding-subheader3.onboarding-hero__logo3.onboarding-instagram3.onboarding-header2.onboarding-description2.onboarding-questions2.onboarding-hero__tagline1.onboarding-description, .onboarding-features .onboarding-fe1
Files
src/reusableComponents/FeatureOnboarding/FeatureOnboarding.scss68src/reusableComponents/FeatureOnboarding/FeatureOnboardingTrigger.scss19
The inventory lists the first 12 locations of each value, so file counts are a lower bound.
SCSS variables in these styles
$spacing-xlnot a color: spacing, size or layout$light-surface-bg→--muted$overlay-surface-bgnot a color: spacing, size or layout$spacing-smnot a color: spacing, size or layout$primary-color→--primary$overlay-surface-shadow-softnot a color: spacing, size or layout$overlay-button-shadownot a color: spacing, size or layout$light-primary-colornot a color: spacing, size or layout$primary-border-colornot a color: spacing, size or layout$floating-chip-bgnot a color: spacing, size or layout$hero-scrim-colornot a color: spacing, size or layout$hero-scrim-fade-colornot a color: spacing, size or layout