Skip to content

Commit 1fc48b8

Browse files
robertpiosikrobertpiosik
committed
Extract Tooltip component into a dedicated module in PromptField/components
1 parent 4a742d6 commit 1fc48b8

5 files changed

Lines changed: 89 additions & 83 deletions

File tree

‎packages/ui/src/components/editor/panel/PromptField/PromptField.module.scss‎

Lines changed: 0 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -385,66 +385,6 @@
385385
}
386386
}
387387

388-
.tooltip {
389-
position: absolute;
390-
z-index: 2;
391-
top: 0;
392-
transform: translateY(calc(-100% + 1px));
393-
font-size: 12px;
394-
white-space: normal;
395-
max-width: calc(100vw - 50px);
396-
display: flex;
397-
align-items: center;
398-
gap: 4px;
399-
padding: 3px 6px;
400-
border-radius: 6px;
401-
background-color: var(--vscode-quickInput-background);
402-
border: 1px solid var(--vscode-widget-border);
403-
box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
404-
pointer-events: none;
405-
406-
&--warning {
407-
&::before {
408-
font-family: 'codicon';
409-
content: '\ea6c';
410-
color: var(--vscode-problemsWarningIcon-foreground);
411-
}
412-
}
413-
414-
&::after {
415-
content: '';
416-
position: absolute;
417-
bottom: -5px;
418-
border-left: 5px solid transparent;
419-
border-right: 5px solid transparent;
420-
border-top: 5px solid var(--vscode-quickInput-background);
421-
filter: drop-shadow(0 1px 0.5px var(--vscode-widget-border));
422-
}
423-
424-
&--align-left {
425-
left: 2px;
426-
&::after {
427-
left: var(--tooltip-offset);
428-
}
429-
}
430-
&--align-right {
431-
right: 2px;
432-
&::after {
433-
right: var(--tooltip-offset);
434-
}
435-
}
436-
437-
&--align-center {
438-
left: 50%;
439-
transform: translateX(-50%) translateY(calc(-100% - 4px));
440-
white-space: nowrap;
441-
&::after {
442-
left: 50%;
443-
margin-left: -5px;
444-
}
445-
}
446-
}
447-
448388
.underlined {
449389
text-decoration: underline;
450390
}

‎packages/ui/src/components/editor/panel/PromptField/PromptField.tsx‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,29 +19,7 @@ import {
1919
map_raw_pos_to_display_pos
2020
} from './utils/position-mapping'
2121
import { dictionary } from '@shared/constants/dictionary'
22-
23-
const Tooltip: React.FC<{
24-
message: string
25-
align: 'left' | 'right' | 'center'
26-
is_warning?: boolean
27-
offset?: number
28-
}> = (params) => (
29-
<div
30-
className={cn(styles.tooltip, {
31-
[styles['tooltip--align-left']]: params.align == 'left',
32-
[styles['tooltip--align-right']]: params.align == 'right',
33-
[styles['tooltip--align-center']]: params.align == 'center',
34-
[styles['tooltip--warning']]: params.is_warning
35-
})}
36-
style={
37-
params.offset !== undefined
38-
? ({ '--tooltip-offset': `${params.offset}px` } as React.CSSProperties)
39-
: undefined
40-
}
41-
>
42-
{params.message}
43-
</div>
44-
)
22+
import { Tooltip } from './components'
4523

4624
export type EditFormat = 'whole' | 'truncated' | 'diff' | 'before-after'
4725

‎packages/ui/src/components/editor/panel/PromptField/components/Tooltip.module.scss‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.tooltip {
2+
position: absolute;
3+
z-index: 2;
4+
top: 0;
5+
transform: translateY(calc(-100% + 1px));
6+
font-size: 12px;
7+
white-space: normal;
8+
max-width: calc(100vw - 50px);
9+
display: flex;
10+
align-items: center;
11+
gap: 4px;
12+
padding: 3px 6px;
13+
border-radius: 6px;
14+
background-color: var(--vscode-quickInput-background);
15+
border: 1px solid var(--vscode-widget-border);
16+
box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
17+
pointer-events: none;
18+
19+
&--warning {
20+
&::before {
21+
font-family: 'codicon';
22+
content: '\ea6c';
23+
color: var(--vscode-problemsWarningIcon-foreground);
24+
}
25+
}
26+
27+
&::after {
28+
content: '';
29+
position: absolute;
30+
bottom: -5px;
31+
border-left: 5px solid transparent;
32+
border-right: 5px solid transparent;
33+
border-top: 5px solid var(--vscode-quickInput-background);
34+
filter: drop-shadow(0 1px 0.5px var(--vscode-widget-border));
35+
}
36+
37+
&--align-left {
38+
left: 2px;
39+
&::after {
40+
left: var(--tooltip-offset);
41+
}
42+
}
43+
&--align-right {
44+
right: 2px;
45+
&::after {
46+
right: var(--tooltip-offset);
47+
}
48+
}
49+
50+
&--align-center {
51+
left: 50%;
52+
transform: translateX(-50%) translateY(calc(-100% - 4px));
53+
white-space: nowrap;
54+
&::after {
55+
left: 50%;
56+
margin-left: -5px;
57+
}
58+
}
59+
}

‎packages/ui/src/components/editor/panel/PromptField/components/Tooltip.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react'
2+
import cn from 'classnames'
3+
import styles from './Tooltip.module.scss'
4+
5+
export type TooltipProps = {
6+
message: string
7+
align: 'left' | 'right' | 'center'
8+
is_warning?: boolean
9+
offset?: number
10+
}
11+
12+
export const Tooltip: React.FC<TooltipProps> = (params) => (
13+
<div
14+
className={cn(styles.tooltip, {
15+
[styles['tooltip--align-left']]: params.align == 'left',
16+
[styles['tooltip--align-right']]: params.align == 'right',
17+
[styles['tooltip--align-center']]: params.align == 'center',
18+
[styles['tooltip--warning']]: params.is_warning
19+
})}
20+
style={
21+
params.offset !== undefined
22+
? ({ '--tooltip-offset': `${params.offset}px` } as React.CSSProperties)
23+
: undefined
24+
}
25+
>
26+
{params.message}
27+
</div>
28+
)

‎packages/ui/src/components/editor/panel/PromptField/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './Tooltip'

0 commit comments

Comments
 (0)