Skip to content

Commit 2b27d3d

Browse files
luwesluwes
committed
chore(site): update eject code generator
1 parent f513c74 commit 2b27d3d

File tree

2 files changed

+57
-73
lines changed

2 files changed

+57
-73
lines changed

‎site/src/content/docs/concepts/ui-components.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ Each primitive represents at most **one HTML element**, without internal element
4343
Complex components are broken into smaller, composable pieces. This pattern is used for:
4444

4545
- **Sliders** - Root, Track, Thumb, Progress, Pointer
46-
- **Tooltips** - Root, Trigger, Positioner, Popup, Arrow, Portal
47-
- **Popovers** - Root, Trigger, Positioner, Popup, Portal
46+
- **Tooltips** - Root, Trigger, Positioner, Popup
47+
- **Popovers** - Root, Trigger, Positioner, Popup
4848

4949
Each piece handles one concern, but they work together seamlessly.
5050

@@ -98,4 +98,4 @@ Multi-element components for complex interactions:
9898
- <DocsLink slug="reference/time-slider">**TimeSlider**</DocsLink> - Seekable timeline with progress
9999
- <DocsLink slug="reference/volume-slider">**VolumeSlider**</DocsLink> - Volume control slider
100100
- **Tooltip** - Hover tooltips with positioning
101-
- **Popover** - Click/hover popovers with collision detection
101+
- **Popover** - Click/hover popovers with collision detection

‎site/src/utils/ejectCodeGenerator.ts‎

Lines changed: 54 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,12 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS
4646
<PauseIcon className="icon pause-icon" />
4747
</PlayButton>
4848
</Tooltip.Trigger>
49-
<Tooltip.Portal>
50-
<Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
51-
<Tooltip.Popup className="tooltip-popup surface popup-animation">
52-
<span className="tooltip play-tooltip">Play</span>
53-
<span className="tooltip pause-tooltip">Pause</span>
54-
</Tooltip.Popup>
55-
</Tooltip.Positioner>
56-
</Tooltip.Portal>
49+
<Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
50+
<Tooltip.Popup className="tooltip-popup surface popup-animation">
51+
<span className="tooltip play-tooltip">Play</span>
52+
<span className="tooltip pause-tooltip">Pause</span>
53+
</Tooltip.Popup>
54+
</Tooltip.Positioner>
5755
</Tooltip.Root>
5856
5957
<div className="time-controls">
@@ -73,13 +71,11 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS
7371
<TimeSlider.Thumb className="slider-thumb" />
7472
</TimeSlider.Root>
7573
</Tooltip.Trigger>
76-
<Tooltip.Portal>
77-
<Tooltip.Positioner side="top" sideOffset={18} collisionPadding={12}>
78-
<Tooltip.Popup className="surface popup-animation tooltip-popup">
79-
<PreviewTimeDisplay className="time-display media-preview-time-display" />
80-
</Tooltip.Popup>
81-
</Tooltip.Positioner>
82-
</Tooltip.Portal>
74+
<Tooltip.Positioner side="top" sideOffset={18} collisionPadding={12}>
75+
<Tooltip.Popup className="surface popup-animation tooltip-popup">
76+
<PreviewTimeDisplay className="time-display media-preview-time-display" />
77+
</Tooltip.Popup>
78+
</Tooltip.Positioner>
8379
</Tooltip.Root>
8480
8581
<DurationDisplay className="time-display" />
@@ -93,18 +89,16 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS
9389
<VolumeOffIcon className="icon volume-off-icon" />
9490
</MuteButton>
9591
</Popover.Trigger>
96-
<Popover.Portal>
97-
<Popover.Positioner side="top" sideOffset={12}>
98-
<Popover.Popup className="surface popup-animation popover-popup">
99-
<VolumeSlider.Root className="slider" orientation="vertical">
100-
<VolumeSlider.Track className="slider-track">
101-
<VolumeSlider.Progress className="slider-progress" />
102-
</VolumeSlider.Track>
103-
<VolumeSlider.Thumb className="slider-thumb" />
104-
</VolumeSlider.Root>
105-
</Popover.Popup>
106-
</Popover.Positioner>
107-
</Popover.Portal>
92+
<Popover.Positioner side="top" sideOffset={12}>
93+
<Popover.Popup className="surface popup-animation popover-popup">
94+
<VolumeSlider.Root className="slider" orientation="vertical">
95+
<VolumeSlider.Track className="slider-track">
96+
<VolumeSlider.Progress className="slider-progress" />
97+
</VolumeSlider.Track>
98+
<VolumeSlider.Thumb className="slider-thumb" />
99+
</VolumeSlider.Root>
100+
</Popover.Popup>
101+
</Popover.Positioner>
108102
</Popover.Root>
109103
110104
<Tooltip.Root delay={500}>
@@ -114,14 +108,12 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS
114108
<FullscreenExitIcon className="icon fullscreen-exit-icon" />
115109
</FullscreenButton>
116110
</Tooltip.Trigger>
117-
<Tooltip.Portal>
118-
<Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
119-
<Tooltip.Popup className="surface popup-animation tooltip-popup">
120-
<span className="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
121-
<span className="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
122-
</Tooltip.Popup>
123-
</Tooltip.Positioner>
124-
</Tooltip.Portal>
111+
<Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
112+
<Tooltip.Popup className="surface popup-animation tooltip-popup">
113+
<span className="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
114+
<span className="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
115+
</Tooltip.Popup>
116+
</Tooltip.Positioner>
125117
</Tooltip.Root>
126118
</div>
127119
</MediaContainer>
@@ -163,14 +155,12 @@ export default function MinimalSkin({ children, className = '' }: SkinProps): JS
163155
<PauseIcon className="icon pause-icon" />
164156
</PlayButton>
165157
</Tooltip.Trigger>
166-
<Tooltip.Portal>
167-
<Tooltip.Positioner side="top-start" sideOffset={6} collisionPadding={12}>
168-
<Tooltip.Popup className="popup-animation tooltip-popup">
169-
<span className="tooltip play-tooltip">Play</span>
170-
<span className="tooltip pause-tooltip">Pause</span>
171-
</Tooltip.Popup>
172-
</Tooltip.Positioner>
173-
</Tooltip.Portal>
158+
<Tooltip.Positioner side="top-start" sideOffset={6} collisionPadding={12}>
159+
<Tooltip.Popup className="popup-animation tooltip-popup">
160+
<span className="tooltip play-tooltip">Play</span>
161+
<span className="tooltip pause-tooltip">Pause</span>
162+
</Tooltip.Popup>
163+
</Tooltip.Positioner>
174164
</Tooltip.Root>
175165
176166
<div className="time-display-group">
@@ -196,13 +186,11 @@ export default function MinimalSkin({ children, className = '' }: SkinProps): JS
196186
<TimeSlider.Thumb className="slider-thumb" />
197187
</TimeSlider.Root>
198188
</Tooltip.Trigger>
199-
<Tooltip.Portal>
200-
<Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
201-
<Tooltip.Popup className="popup-animation tooltip-popup">
202-
<PreviewTimeDisplay className="time-display media-preview-time-display" />
203-
</Tooltip.Popup>
204-
</Tooltip.Positioner>
205-
</Tooltip.Portal>
189+
<Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
190+
<Tooltip.Popup className="popup-animation tooltip-popup">
191+
<PreviewTimeDisplay className="time-display media-preview-time-display" />
192+
</Tooltip.Popup>
193+
</Tooltip.Positioner>
206194
</Tooltip.Root>
207195
208196
<div className="button-group">
@@ -214,18 +202,16 @@ export default function MinimalSkin({ children, className = '' }: SkinProps): JS
214202
<VolumeOffIcon className="icon volume-off-icon" />
215203
</MuteButton>
216204
</Popover.Trigger>
217-
<Popover.Portal>
218-
<Popover.Positioner side="top" sideOffset={2}>
219-
<Popover.Popup className="popup-animation popover-popup">
220-
<VolumeSlider.Root className="slider" orientation="vertical">
221-
<VolumeSlider.Track className="slider-track">
222-
<VolumeSlider.Progress className="slider-progress" />
223-
</VolumeSlider.Track>
224-
<VolumeSlider.Thumb className="slider-thumb" />
225-
</VolumeSlider.Root>
226-
</Popover.Popup>
227-
</Popover.Positioner>
228-
</Popover.Portal>
205+
<Popover.Positioner side="top" sideOffset={2}>
206+
<Popover.Popup className="popup-animation popover-popup">
207+
<VolumeSlider.Root className="slider" orientation="vertical">
208+
<VolumeSlider.Track className="slider-track">
209+
<VolumeSlider.Progress className="slider-progress" />
210+
</VolumeSlider.Track>
211+
<VolumeSlider.Thumb className="slider-thumb" />
212+
</VolumeSlider.Root>
213+
</Popover.Popup>
214+
</Popover.Positioner>
229215
</Popover.Root>
230216
231217
<Tooltip.Root delay={500} closeDelay={0}>
@@ -235,14 +221,12 @@ export default function MinimalSkin({ children, className = '' }: SkinProps): JS
235221
<FullscreenExitAltIcon className="icon fullscreen-exit-icon" />
236222
</FullscreenButton>
237223
</Tooltip.Trigger>
238-
<Tooltip.Portal>
239-
<Tooltip.Positioner side="top-end" sideOffset={6} collisionPadding={12}>
240-
<Tooltip.Popup className="popup-animation tooltip-popup">
241-
<span className="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
242-
<span className="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
243-
</Tooltip.Popup>
244-
</Tooltip.Positioner>
245-
</Tooltip.Portal>
224+
<Tooltip.Positioner side="top-end" sideOffset={6} collisionPadding={12}>
225+
<Tooltip.Popup className="popup-animation tooltip-popup">
226+
<span className="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
227+
<span className="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
228+
</Tooltip.Popup>
229+
</Tooltip.Positioner>
246230
</Tooltip.Root>
247231
</div>
248232
</div>

0 commit comments

Comments
 (0)