Skip to content

Commit 6e5d4c5

Browse files
robertpiosikrobertpiosik
committed
Add translate prop to Tooltip component and update usages
- tooltip should have translate: {x y} prop that lets move it the specified amount of pixels using transform. Move 'New tab' 5px to the right. - 'use template' tooltip is not properly centered right above the button. in your solution use similar positioning pattern to 'edit format instructions' tooltip. - keep 'at sign' and 'hash sign' tooltips as before [Changes] └── packages └── ui └── src └── components └── editor └── common ├── Tooltip │ ├── Tooltip.module.scss │ ├── Tooltip.tsx │ └── index.ts └── prompts ├── PromptField │ ├── PromptField.module.scss │ ├── PromptField.stories.tsx │ ├── PromptField.tsx │ ├── components │ │ ├── CompletedTasks │ │ │ ├── CompletedTasks.module.scss │ │ │ ├── CompletedTasks.tsx │ │ │ └── index.ts │ │ ├── Footer │ │ │ ├── Footer.module.scss │ │ │ ├── Footer.tsx │ │ │ └── index.ts │ │ └── Tabs │ │ ├── Tabs.module.scss │ │ ├── Tabs.tsx │ │ └── index.ts │ ├── hooks │ │ ├── use-drag-drop.ts │ │ ├── use-dropdown.ts │ │ ├── use-ghost-text.ts │ │ ├── use-handlers │ │ │ ├── handle-copy.ts │ │ │ ├── handle-cut.ts │ │ │ ├── handle-input-change.ts │ │ │ ├── handle-input-click.ts │ │ │ ├── handle-key-down.ts │ │ │ ├── handle-paste.ts │ │ │ ├── handle-submit.ts │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ ├── use-handlers.ts │ │ │ └── utils.ts │ │ └── use-keyboard-shortcuts.ts │ └── index.ts ├── Template │ ├── Template.module.scss │ ├── Template.tsx │ └── index.ts └── shared └── symbols ├── caret.ts ├── get-highlighted-text.tsx ├── index.ts ├── position-mapping.ts ├── prompt-symbols.module.scss ├── reconstruct-raw-value.ts └── use-symbol-deletion.ts
1 parent 63f5c70 commit 6e5d4c5

4 files changed

Lines changed: 29 additions & 15 deletions

File tree

‎packages/ui/src/components/editor/common/Tooltip/Tooltip.module.scss‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,16 @@
5151
}
5252

5353
&.tooltip--align-left {
54-
transform: translateY(calc(-100% + 1px));
54+
transform: translateY(calc(-100% + 1px))
55+
translate(var(--tooltip-translate-x, 0), var(--tooltip-translate-y, 0));
5556
}
5657
&.tooltip--align-right {
57-
transform: translateY(calc(-100% + 1px));
58+
transform: translateY(calc(-100% + 1px))
59+
translate(var(--tooltip-translate-x, 0), var(--tooltip-translate-y, 0));
5860
}
5961
&.tooltip--align-center {
60-
transform: translateX(-50%) translateY(calc(-100% - 5px));
62+
transform: translateX(-50%) translateY(calc(-100% - 5px))
63+
translate(var(--tooltip-translate-x, 0), var(--tooltip-translate-y, 0));
6164
}
6265
}
6366

@@ -71,13 +74,16 @@
7174
}
7275

7376
&.tooltip--align-left {
74-
transform: translateY(4px);
77+
transform: translateY(4px)
78+
translate(var(--tooltip-translate-x, 0), var(--tooltip-translate-y, 0));
7579
}
7680
&.tooltip--align-right {
77-
transform: translateY(4px);
81+
transform: translateY(4px)
82+
translate(var(--tooltip-translate-x, 0), var(--tooltip-translate-y, 0));
7883
}
7984
&.tooltip--align-center {
80-
transform: translateX(-50%) translateY(4px);
85+
transform: translateX(-50%) translateY(4px)
86+
translate(var(--tooltip-translate-x, 0), var(--tooltip-translate-y, 0));
8187
}
8288
}
8389

@@ -92,7 +98,8 @@
9298
}
9399

94100
&.tooltip--align-center {
95-
transform: translateY(-50%) translateX(6px);
101+
transform: translateY(-50%) translateX(6px)
102+
translate(var(--tooltip-translate-x, 0), var(--tooltip-translate-y, 0));
96103

97104
&::after {
98105
top: 50%;

‎packages/ui/src/components/editor/common/Tooltip/Tooltip.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,19 @@ type Props = {
99
is_warning?: boolean
1010
details?: React.ReactNode
1111
offset?: number
12+
translate?: { x: number; y: number }
1213
}
1314

1415
export const Tooltip: React.FC<Props> = (params) => {
1516
const style = {
1617
...(params.offset !== undefined
1718
? { '--tooltip-offset': `${params.offset}px` }
19+
: {}),
20+
...(params.translate
21+
? {
22+
'--tooltip-translate-x': `${params.translate.x}px`,
23+
'--tooltip-translate-y': `${params.translate.y}px`
24+
}
1825
: {})
1926
} as React.CSSProperties
2027

‎packages/ui/src/components/editor/common/prompts/PromptField/components/Footer/Footer.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -201,13 +201,6 @@ export const Footer: React.FC<Props> = (props) => {
201201
offset={28}
202202
/>
203203
)}
204-
{hovered_left_action == 'slash' && (
205-
<Tooltip
206-
message={props.props.translations.use_template}
207-
align="left"
208-
offset={48}
209-
/>
210-
)}
211204
{show_submit_tooltip && (
212205
<Tooltip
213206
message={
@@ -268,6 +261,12 @@ export const Footer: React.FC<Props> = (props) => {
268261
onMouseEnter={() => set_hovered_left_action('slash')}
269262
onMouseLeave={() => set_hovered_left_action(null)}
270263
>
264+
{hovered_left_action == 'slash' && (
265+
<Tooltip
266+
message={props.props.translations.use_template}
267+
align="center"
268+
/>
269+
)}
271270
<Icon variant="SLASH" />
272271
</button>
273272
<span className={styles.icon}></span>

‎packages/ui/src/components/editor/common/prompts/PromptField/components/Tabs/Tabs.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,8 @@ export const Tabs = forwardRef<TabsRef, Props>((props, ref) => {
9494
message={props.translations.new_tab}
9595
position="bottom"
9696
align="right"
97-
offset={1}
97+
offset={6}
98+
translate={{ x: 5, y: 0 }}
9899
/>
99100
)}
100101
<div className={styles['tabs__tab__icon']} />

0 commit comments

Comments
 (0)