Skip to content

feat(feature-showcase): Redesign and rewrite FeatureTourModal as FeatureShowcase #112532

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
malwilley merged 3 commits into from
Apr 9, 2026
Merged

feat(feature-showcase): Redesign and rewrite FeatureTourModal as FeatureShowcase #112532

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e689253
feat(ui): Add FeatureShowcase compound component
malwilley Apr 9, 2026
f7040e6
Safer step next/back logic
malwilley Apr 9, 2026
569a752
Ignore on knip and remove onclose
malwilley Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .github/CODEOWNERS
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -439,6 +439,9 @@ tests/sentry/api/endpoints/test_organization_attribute_mappings.py @get
/static/app/components/loading/ @getsentry/app-frontend
/static/app/components/events/interfaces/ @getsentry/app-frontend
/static/app/components/forms/ @getsentry/app-frontend
/static/app/components/featureShowcase.mdx @getsentry/app-frontend
/static/app/components/featureShowcase.spec.tsx @getsentry/app-frontend
/static/app/components/featureShowcase.tsx @getsentry/app-frontend
/static/app/components/markdownTextArea.tsx @getsentry/app-frontend
/static/app/locale.tsx @getsentry/app-frontend
## End of Frontend
Expand Down
2 changes: 2 additions & 0 deletions knip.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ const productionEntryPoints = [
'static/app/components/pipeline/**/*.{js,ts,tsx}',
// TODO: Remove when used
'static/app/views/seerExplorer/contexts/**/*.{js,ts,tsx}',
// TODO: Remove when used
'static/app/components/featureShowcase.tsx',
];

const testingEntryPoints = [
Expand Down
196 changes: 196 additions & 0 deletions static/app/components/featureShowcase.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
---
title: FeatureShowcase
description: A multi-step modal tour for showcasing features.
category: overlay
source: sentry/components/featureShowcase
---

import {Fragment} from 'react';

import tourAlertImage from 'sentry-images/spot/performance-tour-alert.svg';
import tourCorrelateImage from 'sentry-images/spot/performance-tour-correlate.svg';
import tourTraceImage from 'sentry-images/spot/performance-tour-trace.svg';

import {Button, LinkButton} from '@sentry/scraps/button';
import {Flex} from '@sentry/scraps/layout';

import {openModal} from 'sentry/actionCreators/modal';
import {FeatureShowcase, useShowcaseContext} from 'sentry/components/featureShowcase';
import {GlobalModal} from 'sentry/components/globalModal';
import * as Storybook from 'sentry/stories';

export function ReadTheDocsFooter() {
const {close} = useShowcaseContext();
return (
<Flex justify="end">
<LinkButton
external
href="https://docs.sentry.io"
onClick={close}
priority="primary"
>
Read the Docs
</LinkButton>
</Flex>
);
}

Render `<FeatureShowcase>` inside `openModal` with `<FeatureShowcase.Step>` children to create a multi-step modal tour.

```jsx
openModal(deps => (
<FeatureShowcase {...deps}>
<FeatureShowcase.Step>
<FeatureShowcase.Image src={image} alt="Step title" />
<FeatureShowcase.StepTitle>Step title</FeatureShowcase.StepTitle>
<FeatureShowcase.StepContent>Step description</FeatureShowcase.StepContent>
<FeatureShowcase.StepActions />
</FeatureShowcase.Step>
</FeatureShowcase>
));
```

## Basic

Each step can include an image, title, content, and navigation actions. The default `<FeatureShowcase.StepActions />` renders Back/Next/Done buttons automatically.

<Storybook.Demo>
<Fragment>
<GlobalModal />
<Button
priority="primary"
onClick={() => {
openModal(deps => (
<FeatureShowcase {...deps}>
<FeatureShowcase.Step>
<FeatureShowcase.Image src={tourTraceImage} alt="Trace Errors" />
<FeatureShowcase.StepTitle>Trace Errors</FeatureShowcase.StepTitle>
<FeatureShowcase.StepContent>
Trace errors across your services to find the root cause.
</FeatureShowcase.StepContent>
<FeatureShowcase.StepActions />
</FeatureShowcase.Step>
<FeatureShowcase.Step>
<FeatureShowcase.Image src={tourAlertImage} alt="Set Alerts" />
<FeatureShowcase.StepTitle>Set Alerts</FeatureShowcase.StepTitle>
<FeatureShowcase.StepContent>
Get notified when things break before your users do.
</FeatureShowcase.StepContent>
<FeatureShowcase.StepActions />
</FeatureShowcase.Step>
<FeatureShowcase.Step>
<FeatureShowcase.Image src={tourCorrelateImage} alt="Correlate Data" />
<FeatureShowcase.StepTitle>Correlate Data</FeatureShowcase.StepTitle>
<FeatureShowcase.StepContent>
Correlate errors, transactions, and releases to find patterns.
</FeatureShowcase.StepContent>
<FeatureShowcase.StepActions />
</FeatureShowcase.Step>
</FeatureShowcase>
));
}}
>
Open Tour
</Button>
</Fragment>
</Storybook.Demo>
```jsx
openModal(deps => (
<FeatureShowcase {...deps}>
<FeatureShowcase.Step>
<FeatureShowcase.Image src={tourTraceImage} alt="Trace Errors" />
<FeatureShowcase.StepTitle>Trace Errors</FeatureShowcase.StepTitle>
<FeatureShowcase.StepContent>
Trace errors across your services to find the root cause.
</FeatureShowcase.StepContent>
<FeatureShowcase.StepActions />
</FeatureShowcase.Step>
<FeatureShowcase.Step>
<FeatureShowcase.Image src={tourAlertImage} alt="Set Alerts" />
<FeatureShowcase.StepTitle>Set Alerts</FeatureShowcase.StepTitle>
<FeatureShowcase.StepContent>
Get notified when things break before your users do.
</FeatureShowcase.StepContent>
<FeatureShowcase.StepActions />
</FeatureShowcase.Step>
<FeatureShowcase.Step>
<FeatureShowcase.Image src={tourCorrelateImage} alt="Correlate Data" />
<FeatureShowcase.StepTitle>Correlate Data</FeatureShowcase.StepTitle>
<FeatureShowcase.StepContent>
Correlate errors, transactions, and releases to find patterns.
</FeatureShowcase.StepContent>
<FeatureShowcase.StepActions />
</FeatureShowcase.Step>
</FeatureShowcase>
));
```

## Custom Footer Buttons

Pass custom children alongside `<FeatureShowcase.StepActions />`, or replace it entirely with your own footer. Use `useShowcaseContext()` to access `close` and `advance` from custom components.

<Storybook.Demo>
<Fragment>
<GlobalModal />
<Button
priority="primary"
onClick={() => {
openModal(deps => (
<FeatureShowcase {...deps}>
<FeatureShowcase.Step>
<FeatureShowcase.Image src={tourTraceImage} alt="Trace Errors" />
<FeatureShowcase.StepTitle>Trace Errors</FeatureShowcase.StepTitle>
<FeatureShowcase.StepContent>
Trace errors across your services to find the root cause.
</FeatureShowcase.StepContent>
<FeatureShowcase.StepActions />
</FeatureShowcase.Step>
<FeatureShowcase.Step>
<FeatureShowcase.Image src={tourCorrelateImage} alt="Correlate Data" />
<FeatureShowcase.StepTitle>Correlate Data</FeatureShowcase.StepTitle>
<FeatureShowcase.StepContent>
Correlate errors, transactions, and releases to find patterns.
</FeatureShowcase.StepContent>
<ReadTheDocsFooter />
</FeatureShowcase.Step>
</FeatureShowcase>
));
}}
>
Open Tour
</Button>
</Fragment>
</Storybook.Demo>
```jsx
function ReadTheDocsFooter() {
const {close} = useShowcaseContext();
return (
<Flex justify="end">
<LinkButton external href="https://docs.sentry.io" onClick={close} priority="primary">
Read the Docs
</LinkButton>
</Flex>
);
}

openModal(deps => (

<FeatureShowcase {...deps}>
<FeatureShowcase.Step>
<FeatureShowcase.Image src={tourTraceImage} alt="Trace Errors" />
<FeatureShowcase.StepTitle>Trace Errors</FeatureShowcase.StepTitle>
<FeatureShowcase.StepContent>
Trace errors across your services to find the root cause.
</FeatureShowcase.StepContent>
<FeatureShowcase.StepActions />
</FeatureShowcase.Step>
<FeatureShowcase.Step>
<FeatureShowcase.Image src={tourCorrelateImage} alt="Correlate Data" />
<FeatureShowcase.StepTitle>Correlate Data</FeatureShowcase.StepTitle>
<FeatureShowcase.StepContent>
Correlate errors, transactions, and releases to find patterns.
</FeatureShowcase.StepContent>
<ReadTheDocsFooter />
</FeatureShowcase.Step>
</FeatureShowcase>
)); ```
Loading
Loading