Skip to content

Commit 164c486

Browse files
paula-stachopaula-stacho
authored
refactor: use lg tooltip directly COMPASS-6344 (#6092)
1 parent 541815e commit 164c486

File tree

33 files changed

+1159
-1732
lines changed

33 files changed

+1159
-1732
lines changed

‎package-lock.json‎

Lines changed: 1002 additions & 1388 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-group-form.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -258,8 +258,8 @@ const MatchGroupForm = ({
258258
align="top"
259259
justify="middle"
260260
enabled={disableAddNestedGroupBtn}
261-
trigger={({ children, ...props }) => (
262-
<div {...props} style={{ display: 'inherit' }}>
261+
trigger={
262+
<div style={{ display: 'inherit' }}>
263263
<Button
264264
size="xsmall"
265265
disabled={disableAddNestedGroupBtn}
@@ -268,11 +268,10 @@ const MatchGroupForm = ({
268268
data-testid={TEST_IDS.addNestedGroupBtn(group.id)}
269269
onClick={handleAddNestedGroupClick}
270270
>
271-
{children}
272271
Nested Group
273272
</Button>
274273
</div>
275-
)}
274+
}
276275
>
277276
Compass does not support more than three nested match conditions.
278277
</Tooltip>

‎packages/compass-aggregations/src/components/focus-mode/focus-mode-modal-header.tsx‎

Lines changed: 32 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -181,26 +181,23 @@ export const FocusModeModalHeader: React.FunctionComponent<
181181
<div className={controlsContainerStyles}>
182182
<div className={controlContainerStyles}>
183183
<Tooltip
184-
isDisabled={isFirst}
185-
trigger={({ children, ...props }) => (
186-
<span {...props}>
187-
{children}
188-
<Button
184+
enabled={!isFirst}
185+
trigger={
186+
<Button
187+
size="xsmall"
188+
disabled={isFirst}
189+
onClick={onPreviousStage}
190+
data-testid="previous-stage-button"
191+
aria-label="Edit previous stage"
192+
>
193+
<Icon
189194
size="xsmall"
190-
disabled={isFirst}
191-
onClick={onPreviousStage}
192-
data-testid="previous-stage-button"
193-
aria-label="Edit previous stage"
194-
>
195-
<Icon
196-
size="xsmall"
197-
title={null}
198-
role="presentation"
199-
glyph="ChevronLeft"
200-
></Icon>
201-
</Button>
202-
</span>
203-
)}
195+
title={null}
196+
role="presentation"
197+
glyph="ChevronLeft"
198+
></Icon>
199+
</Button>
200+
}
204201
>
205202
<Body className={tooltipContentStyles}>
206203
<span className={tooltipContentItemStyles}>
@@ -232,26 +229,23 @@ export const FocusModeModalHeader: React.FunctionComponent<
232229
</Select>
233230

234231
<Tooltip
235-
isDisabled={isLast}
236-
trigger={({ children, ...props }) => (
237-
<span {...props}>
238-
{children}
239-
<Button
232+
enabled={!isLast}
233+
trigger={
234+
<Button
235+
size="xsmall"
236+
disabled={isLast}
237+
onClick={onNextStage}
238+
aria-label="Edit next stage"
239+
data-testid="next-stage-button"
240+
>
241+
<Icon
240242
size="xsmall"
241-
disabled={isLast}
242-
onClick={onNextStage}
243-
aria-label="Edit next stage"
244-
data-testid="next-stage-button"
245-
>
246-
<Icon
247-
size="xsmall"
248-
title={null}
249-
role="presentation"
250-
glyph="ChevronRight"
251-
></Icon>
252-
</Button>
253-
</span>
254-
)}
243+
title={null}
244+
role="presentation"
245+
glyph="ChevronRight"
246+
></Icon>
247+
</Button>
248+
}
255249
>
256250
<Body className={tooltipContentStyles}>
257251
<span>Go to next stage</span>

‎packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-pagination-count.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -97,20 +97,18 @@ export const PipelinePaginationCount: React.FunctionComponent<
9797
return (
9898
<div data-testid={testId}>
9999
<Tooltip
100-
trigger={({ children, ...props }) => (
100+
trigger={
101101
<Link
102-
{...props}
103102
aria-label={'count results'}
104103
as="button"
105104
data-testid="pipeline-pagination-count-action"
106105
hideExternalIcon={true}
107106
className={countButtonStyles}
108107
onClick={() => onCount()}
109108
>
110-
{children}
111109
count results
112110
</Link>
113-
)}
111+
}
114112
>
115113
<Body>{countDefinition}</Body>
116114
</Tooltip>

‎packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-name.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,7 @@ export const PipelineName: React.FunctionComponent<PipelineNameProps> = ({
3434
{name === '' ? (
3535
'Untitled'
3636
) : (
37-
<Tooltip
38-
trigger={({ children, ...props }) => (
39-
<span {...props} className={nameStyles}>
40-
{children}
41-
{name}
42-
</span>
43-
)}
44-
>
37+
<Tooltip trigger={<span className={nameStyles}>{name}</span>}>
4538
<Body>{name}</Body>
4639
</Tooltip>
4740
)}

‎packages/compass-aggregations/src/components/stage-preview/stage-preview-header.tsx‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,16 @@ const OperatorLink: React.FunctionComponent<{
1919
return (
2020
<span>
2121
<Tooltip
22-
delay={300}
23-
isDisabled={!description}
24-
trigger={({ children, ...props }) => {
25-
return (
26-
<Link
27-
data-testid="stage-preview-toolbar-link"
28-
{...props}
29-
target="_blank"
30-
href={link}
31-
>
32-
{children}
33-
{stageOperator}
34-
</Link>
35-
);
36-
}}
22+
enabled={!!description}
23+
trigger={
24+
<Link
25+
data-testid="stage-preview-toolbar-link"
26+
target="_blank"
27+
href={link}
28+
>
29+
{stageOperator}
30+
</Link>
31+
}
3732
>
3833
{description}
3934
</Tooltip>

‎packages/compass-collection/src/components/collection-tab-stats.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,21 +44,18 @@ const CollectionTabStats: React.FunctionComponent<CollectionTabStatsProps> = ({
4444
data-testid="collection-stats-tooltip"
4545
align="bottom"
4646
justify="middle"
47-
delay={500}
48-
trigger={({ children, ...props }) => (
47+
trigger={
4948
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
5049
<span
51-
{...props}
5250
onClick={() => {
5351
// We use these stats in the Collection Tab, and LG does not
5452
// bubble up the click event to the parent component, so we
5553
// add noop onClick and let it bubble up.
5654
}}
5755
>
5856
<Badge>{text}</Badge>
59-
{children}
6057
</span>
61-
)}
58+
}
6259
>
6360
<ol className={tooltipDocumentsListStyles}>
6461
{details.map((detail, i) => (

‎packages/compass-components/package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,8 @@
7474
"@leafygreen-ui/tooltip": "^11.0.2",
7575
"@leafygreen-ui/typography": "^18.2.3",
7676
"@react-aria/interactions": "^3.9.1",
77-
"@react-aria/tooltip": "^3.2.1",
7877
"@react-aria/utils": "^3.13.1",
7978
"@react-aria/visually-hidden": "^3.3.1",
80-
"@react-stately/tooltip": "^3.0.5",
8179
"bson": "^6.7.0",
8280
"focus-trap-react": "^9.0.2",
8381
"hadron-document": "^8.5.6",

‎packages/compass-components/src/components/document-list/document-actions-group.tsx‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { useEffect, useRef, useState } from 'react';
22
import { css, cx } from '@leafygreen-ui/emotion';
33
import { spacing } from '@leafygreen-ui/tokens';
4-
import { Button, Icon } from '../leafygreen';
5-
import { Tooltip } from '../tooltip';
4+
import { Button, Icon, Tooltip } from '../leafygreen';
65
import type { Signal } from '../signal-popover';
76
import { SignalPopover } from '../signal-popover';
87

@@ -87,16 +86,12 @@ function ActionButton({
8786
// the container isn't hovered, which causes the tooltips to reset
8887
// their position to 0,0 and glitch visually without enabled.
8988
enabled={tooltipEnabled}
90-
trigger={({ children, ...tooltipProps }) => {
91-
return (
92-
<div data-action-item {...tooltipProps}>
93-
<Button {...props} />
94-
{children}
95-
</div>
96-
);
97-
}}
89+
trigger={
90+
<div data-action-item>
91+
<Button {...props} />
92+
</div>
93+
}
9894
justify="middle"
99-
delay={200} // The copy and clone buttons look alike so we keep the delay short.
10095
>
10196
{tooltipText}
10297
</Tooltip>
@@ -195,7 +190,7 @@ const DocumentActionsGroup: React.FunctionComponent<
195190
{onCopy && (
196191
<Tooltip
197192
open={showCopyButtonTooltip}
198-
trigger={({ children }) => (
193+
trigger={
199194
<div data-action-item>
200195
<ActionButton
201196
tooltipEnabled={isActive}
@@ -210,9 +205,8 @@ const DocumentActionsGroup: React.FunctionComponent<
210205
className={actionsGroupItem}
211206
tooltipText="Copy to clipboard"
212207
/>
213-
{children}
214208
</div>
215-
)}
209+
}
216210
justify="middle"
217211
>
218212
Copied!

‎packages/compass-components/src/components/document-list/element-editors.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@ import { css, cx } from '@leafygreen-ui/emotion';
66
import { palette } from '@leafygreen-ui/palette';
77
import { spacing } from '@leafygreen-ui/tokens';
88
import BSONValue, { BSONValueContainer } from '../bson-value';
9-
import { Tooltip } from '../tooltip';
109
import { mergeProps } from '../../utils/merge-props';
1110
import { documentTypography } from './typography';
12-
import { Icon } from '../leafygreen';
11+
import { Icon, Tooltip } from '../leafygreen';
1312
import { useDarkMode } from '../../hooks/use-theme';
1413

1514
const maxWidth = css({
@@ -80,12 +79,10 @@ export const KeyEditor: React.FunctionComponent<{
8079
{editing ? (
8180
<Tooltip
8281
darkMode
83-
isDisabled={valid}
84-
delay={600}
82+
enabled={!valid}
8583
usePortal={false}
8684
trigger={({
8785
className,
88-
children,
8986
// Having a tooltip connected to the input elements is not the most
9087
// accessible thing ever and so a lot of event listeners of the
9188
// tooltip conflict with the textarea default behavior (due to
@@ -97,8 +94,6 @@ export const KeyEditor: React.FunctionComponent<{
9794
onPointerUp,
9895
onPointerDown,
9996
onMouseDown,
100-
/* eslint-enable @typescript-eslint/no-unused-vars */
101-
...triggerProps
10297
}: React.HTMLProps<HTMLInputElement>) => {
10398
return (
10499
<div className={className}>
@@ -124,9 +119,7 @@ export const KeyEditor: React.FunctionComponent<{
124119
)}
125120
style={{ width }}
126121
spellCheck="false"
127-
{...triggerProps}
128122
></input>
129-
{children}
130123
</div>
131124
);
132125
}}
@@ -229,8 +222,7 @@ export const ValueEditor: React.FunctionComponent<{
229222
{editing ? (
230223
<Tooltip
231224
darkMode
232-
isDisabled={valid}
233-
delay={600}
225+
enabled={!valid}
234226
usePortal={false}
235227
trigger={({
236228
className,

0 commit comments

Comments
 (0)