Skip to content

Commit e4bd1f3

Browse files
committed
docs(CompactMap): add showPopup prop documentation to Storybook
Adds a new "Popup Control" section to the CompactMap story demonstrating the showPopup prop with side-by-side comparison. Examples: - With Popups (default): Shows popup bubbles on marker click - Without Popups: Uses carousel for cleaner map interactions Explains when to disable popups (external UI, Inspector panels, sidebars) to avoid duplicate information and keep the map view cleaner.
1 parent 0975cb1 commit e4bd1f3

File tree

1 file changed

+85
-1
lines changed

1 file changed

+85
-1
lines changed

packages/ui/src/components/Map/CompactMap.stories.tsx

Lines changed: 85 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -515,6 +515,90 @@ const CompactMapDoc: FC = () => {
515515
/>
516516
</section>
517517

518+
<section style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
519+
<header>
520+
<h2 style={{ marginBottom: '8px' }}>Popup Control</h2>
521+
<p style={{ margin: 0, color: 'var(--ai-color-text-secondary)' }}>
522+
Toggle popup bubbles with the `showPopup` prop. Disable when using external UI like
523+
sidebars or inspectors to handle marker interactions.
524+
</p>
525+
</header>
526+
527+
<div
528+
style={{
529+
display: 'grid',
530+
gap: '24px',
531+
gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
532+
}}
533+
>
534+
<div>
535+
<h3
536+
style={{
537+
marginBottom: '12px',
538+
fontSize: '14px',
539+
color: 'var(--ai-color-text-secondary)',
540+
}}
541+
>
542+
With Popups (default)
543+
</h3>
544+
<CompactMap
545+
locations={locations.slice(0, 2)}
546+
showPopup={true}
547+
height={CHATGPT_APP_HEIGHT}
548+
/>
549+
<p
550+
style={{
551+
marginTop: '12px',
552+
fontSize: '13px',
553+
color: 'var(--ai-color-text-secondary)',
554+
}}
555+
>
556+
Click markers to see popup bubbles with location details
557+
</p>
558+
</div>
559+
560+
<div>
561+
<h3
562+
style={{
563+
marginBottom: '12px',
564+
fontSize: '14px',
565+
color: 'var(--ai-color-text-secondary)',
566+
}}
567+
>
568+
Without Popups
569+
</h3>
570+
<CompactMap
571+
locations={locations.slice(0, 2)}
572+
showPopup={false}
573+
height={CHATGPT_APP_HEIGHT}
574+
/>
575+
<p
576+
style={{
577+
marginTop: '12px',
578+
fontSize: '13px',
579+
color: 'var(--ai-color-text-secondary)',
580+
}}
581+
>
582+
Uses carousel for marker interactions (cleaner map view)
583+
</p>
584+
</div>
585+
</div>
586+
587+
<div
588+
style={{
589+
background: 'var(--ai-color-bg-secondary)',
590+
borderRadius: '12px',
591+
padding: '16px',
592+
maxWidth: CHATGPT_APP_WIDTH,
593+
fontSize: '13px',
594+
}}
595+
>
596+
<strong>Usage:</strong> Set `showPopup={'{false}'}` when handling selection via external UI
597+
(Inspector panels, sidebars, modals). Keeps the map cleaner and avoids duplicate
598+
information.
599+
</div>
600+
</section>
601+
518602
<section style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
519603
<header>
520604
<h2 style={{ marginBottom: '8px' }}>When to Escalate</h2>
@@ -528,7 +612,7 @@ const CompactMapDoc: FC = () => {
528612
If users need side-by-side Inspector and carousel details, escalate to `FullscreenMap`.
529613
</li>
530614
<li>
531-
Use `MapView` directly when the carousel isnt necessary (e.g., single location focus).
615+
Use `MapView` directly when the carousel isn't necessary (e.g., single location focus).
532616
</li>
533617
<li>
534618
Keep selection state in a shared store so CompactMap can hand off to fullscreen

0 commit comments

Comments
 (0)