@atlaskit/tooltip 20.0.2 → 20.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/tooltip.js +1 -1
- package/dist/es2019/tooltip.js +1 -1
- package/dist/esm/tooltip.js +1 -1
- package/package.json +14 -13
- package/codemods_wip/__tests__/change-wrapped-to-render-prop.ts_ +0 -198
- package/codemods_wip/migrates/change-wrapped-to-render-prop.ts_ +0 -72
- package/codemods_wip/next-tooltip-release.ts_ +0 -7
- package/codemods_wip/wip.md +0 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/tooltip
|
|
2
2
|
|
|
3
|
+
## 20.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#128417](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128417)
|
|
8
|
+
[`889ab4ac93dc2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/889ab4ac93dc2) -
|
|
9
|
+
Update dependencies and remove old unused files.
|
|
10
|
+
|
|
3
11
|
## 20.0.2
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
package/dist/cjs/tooltip.js
CHANGED
package/dist/es2019/tooltip.js
CHANGED
package/dist/esm/tooltip.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/tooltip",
|
|
3
|
-
"version": "20.0.
|
|
3
|
+
"version": "20.0.3",
|
|
4
4
|
"description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -44,11 +44,11 @@
|
|
|
44
44
|
"@atlaskit/analytics-next": "^11.0.0",
|
|
45
45
|
"@atlaskit/ds-lib": "^4.0.0",
|
|
46
46
|
"@atlaskit/layering": "^2.0.0",
|
|
47
|
-
"@atlaskit/motion": "^5.
|
|
47
|
+
"@atlaskit/motion": "^5.1.0",
|
|
48
48
|
"@atlaskit/popper": "^7.0.0",
|
|
49
|
-
"@atlaskit/portal": "^5.
|
|
49
|
+
"@atlaskit/portal": "^5.1.0",
|
|
50
50
|
"@atlaskit/theme": "^18.0.0",
|
|
51
|
-
"@atlaskit/tokens": "^4.
|
|
51
|
+
"@atlaskit/tokens": "^4.5.0",
|
|
52
52
|
"@babel/runtime": "^7.0.0",
|
|
53
53
|
"@compiled/react": "^0.18.2",
|
|
54
54
|
"@emotion/react": "^11.7.1",
|
|
@@ -59,19 +59,20 @@
|
|
|
59
59
|
"react-dom": "^18.2.0"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
|
-
"@af/accessibility-testing": "
|
|
63
|
-
"@af/integration-testing": "
|
|
64
|
-
"@af/visual-regression": "
|
|
62
|
+
"@af/accessibility-testing": "^2.0.0",
|
|
63
|
+
"@af/integration-testing": "^0.5.0",
|
|
64
|
+
"@af/visual-regression": "^1.3.0",
|
|
65
65
|
"@atlaskit/button": "^21.1.0",
|
|
66
66
|
"@atlaskit/css": "^0.10.0",
|
|
67
|
-
"@atlaskit/
|
|
68
|
-
"@
|
|
67
|
+
"@atlaskit/docs": "^10.0.0",
|
|
68
|
+
"@atlaskit/icon": "^25.0.0",
|
|
69
|
+
"@atlaskit/link": "^3.0.0",
|
|
70
|
+
"@atlaskit/primitives": "^14.1.0",
|
|
71
|
+
"@atlaskit/section-message": "^8.2.0",
|
|
72
|
+
"@atlaskit/ssr": "^0.4.0",
|
|
69
73
|
"@testing-library/react": "^13.4.0",
|
|
70
|
-
"@types/react-redux": "^5.0.0",
|
|
71
|
-
"jest-in-case": "^1.0.2",
|
|
72
74
|
"react-dom": "^18.2.0",
|
|
73
|
-
"
|
|
74
|
-
"storybook-addon-performance": "^0.17.3",
|
|
75
|
+
"tiny-invariant": "^1.2.0",
|
|
75
76
|
"typescript": "~5.4.2"
|
|
76
77
|
},
|
|
77
78
|
"keywords": [
|
|
@@ -1,198 +0,0 @@
|
|
|
1
|
-
jest.autoMockOff();
|
|
2
|
-
|
|
3
|
-
import { createTransformer } from '@atlaskit/codemod-utils';
|
|
4
|
-
|
|
5
|
-
import { changeWrappedToRenderProp } from '../migrates/change-wrapped-to-render-prop';
|
|
6
|
-
|
|
7
|
-
// This stays as require() since changing to import will trigger a linter error
|
|
8
|
-
const { defineInlineTest } = require('jscodeshift/dist/testUtils');
|
|
9
|
-
|
|
10
|
-
const transformer = createTransformer([changeWrappedToRenderProp]);
|
|
11
|
-
|
|
12
|
-
describe('Modify Tooltips that use wrapped children to use the render prop API instead', () => {
|
|
13
|
-
defineInlineTest(
|
|
14
|
-
{ default: transformer, parser: 'tsx' },
|
|
15
|
-
{},
|
|
16
|
-
`
|
|
17
|
-
import React from 'react';
|
|
18
|
-
|
|
19
|
-
import Button from '@atlaskit/button/standard-button';
|
|
20
|
-
|
|
21
|
-
import Tooltip from '../src';
|
|
22
|
-
|
|
23
|
-
export default () => (
|
|
24
|
-
<Tooltip content="Hello World">
|
|
25
|
-
{(tooltipProps) => <Button {...tooltipProps}>Hover Over Me</Button>}
|
|
26
|
-
</Tooltip>
|
|
27
|
-
);
|
|
28
|
-
`, // -----
|
|
29
|
-
`
|
|
30
|
-
import React from 'react';
|
|
31
|
-
|
|
32
|
-
import Button from '@atlaskit/button/standard-button';
|
|
33
|
-
|
|
34
|
-
import Tooltip from '../src';
|
|
35
|
-
|
|
36
|
-
export default () => (
|
|
37
|
-
<Tooltip content="Hello World">
|
|
38
|
-
{(tooltipProps) => <Button {...tooltipProps}>Hover Over Me</Button>}
|
|
39
|
-
</Tooltip>
|
|
40
|
-
);
|
|
41
|
-
`, // -----
|
|
42
|
-
'do nothing if already using the render prop API',
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
defineInlineTest(
|
|
46
|
-
{ default: transformer, parser: 'tsx' },
|
|
47
|
-
{},
|
|
48
|
-
`
|
|
49
|
-
import React from 'react';
|
|
50
|
-
|
|
51
|
-
import Button from '@atlaskit/button/standard-button';
|
|
52
|
-
|
|
53
|
-
import Tooltip from '../src';
|
|
54
|
-
|
|
55
|
-
export default () => (
|
|
56
|
-
<Tooltip content="Hello World">
|
|
57
|
-
<Button>Hover Over Me</Button>
|
|
58
|
-
</Tooltip>
|
|
59
|
-
);
|
|
60
|
-
`, // -----
|
|
61
|
-
`
|
|
62
|
-
import React from 'react';
|
|
63
|
-
|
|
64
|
-
import Button from '@atlaskit/button/standard-button';
|
|
65
|
-
|
|
66
|
-
import Tooltip from '../src';
|
|
67
|
-
|
|
68
|
-
export default () => (
|
|
69
|
-
<Tooltip content="Hello World">
|
|
70
|
-
{(tooltipProps) => <Button {...tooltipProps}>Hover Over Me</Button>}
|
|
71
|
-
</Tooltip>
|
|
72
|
-
);
|
|
73
|
-
`, // -----
|
|
74
|
-
'modifies Tooltip that is using wrapped children to use the render prop API',
|
|
75
|
-
);
|
|
76
|
-
|
|
77
|
-
defineInlineTest(
|
|
78
|
-
{ default: transformer, parser: 'tsx' },
|
|
79
|
-
{},
|
|
80
|
-
`
|
|
81
|
-
import React from 'react';
|
|
82
|
-
|
|
83
|
-
import Button from '@atlaskit/button/standard-button';
|
|
84
|
-
|
|
85
|
-
import Tooltip from '../src';
|
|
86
|
-
|
|
87
|
-
export default () => (
|
|
88
|
-
<Tooltip content="Hello World">
|
|
89
|
-
<Button exampleProp="test">Hover Over Me</Button>
|
|
90
|
-
</Tooltip>
|
|
91
|
-
);
|
|
92
|
-
`, // -----
|
|
93
|
-
`
|
|
94
|
-
import React from 'react';
|
|
95
|
-
|
|
96
|
-
import Button from '@atlaskit/button/standard-button';
|
|
97
|
-
|
|
98
|
-
import Tooltip from '../src';
|
|
99
|
-
|
|
100
|
-
export default () => (
|
|
101
|
-
<Tooltip content="Hello World">
|
|
102
|
-
{(tooltipProps) => <Button {...tooltipProps} exampleProp="test">Hover Over Me</Button>}
|
|
103
|
-
</Tooltip>
|
|
104
|
-
);
|
|
105
|
-
`, // -----
|
|
106
|
-
'does not alter existing props on the target element',
|
|
107
|
-
);
|
|
108
|
-
|
|
109
|
-
defineInlineTest(
|
|
110
|
-
{ default: transformer, parser: 'tsx' },
|
|
111
|
-
{},
|
|
112
|
-
`
|
|
113
|
-
import React from 'react';
|
|
114
|
-
|
|
115
|
-
import Button from '@atlaskit/button/standard-button';
|
|
116
|
-
|
|
117
|
-
import Tooltip from '../src';
|
|
118
|
-
|
|
119
|
-
export default () => (
|
|
120
|
-
<Tooltip content="Hello World">
|
|
121
|
-
<Button>
|
|
122
|
-
<span>💸</span>
|
|
123
|
-
</Button>
|
|
124
|
-
</Tooltip>
|
|
125
|
-
);
|
|
126
|
-
`, // -----
|
|
127
|
-
`
|
|
128
|
-
import React from 'react';
|
|
129
|
-
|
|
130
|
-
import Button from '@atlaskit/button/standard-button';
|
|
131
|
-
|
|
132
|
-
import Tooltip from '../src';
|
|
133
|
-
|
|
134
|
-
export default () => (
|
|
135
|
-
<Tooltip content="Hello World">
|
|
136
|
-
{(tooltipProps) => <Button {...tooltipProps}>
|
|
137
|
-
<span>💸</span>
|
|
138
|
-
</Button>}
|
|
139
|
-
</Tooltip>
|
|
140
|
-
);
|
|
141
|
-
`, // -----
|
|
142
|
-
'does not alter nested children on the target element',
|
|
143
|
-
);
|
|
144
|
-
|
|
145
|
-
defineInlineTest(
|
|
146
|
-
{ default: transformer, parser: 'tsx' },
|
|
147
|
-
{},
|
|
148
|
-
`
|
|
149
|
-
import React from 'react';
|
|
150
|
-
|
|
151
|
-
import Button from '@atlaskit/button/standard-button';
|
|
152
|
-
|
|
153
|
-
import Tooltip from '../src';
|
|
154
|
-
|
|
155
|
-
export default () => <Tooltip content="Hello World" />;
|
|
156
|
-
`, // -----
|
|
157
|
-
`
|
|
158
|
-
import React from 'react';
|
|
159
|
-
|
|
160
|
-
import Button from '@atlaskit/button/standard-button';
|
|
161
|
-
|
|
162
|
-
import Tooltip from '../src';
|
|
163
|
-
|
|
164
|
-
export default () => <Tooltip content="Hello World" />;
|
|
165
|
-
`, // -----
|
|
166
|
-
'does nothing with a badly formed Tooltip component',
|
|
167
|
-
);
|
|
168
|
-
|
|
169
|
-
defineInlineTest(
|
|
170
|
-
{ default: transformer, parser: 'tsx' },
|
|
171
|
-
{},
|
|
172
|
-
`
|
|
173
|
-
import React from 'react';
|
|
174
|
-
|
|
175
|
-
import Button from '@atlaskit/button/standard-button';
|
|
176
|
-
|
|
177
|
-
import Tooltip from '../src';
|
|
178
|
-
|
|
179
|
-
export default () => (
|
|
180
|
-
<Tooltip content="Hello World">Test</Tooltip>
|
|
181
|
-
);
|
|
182
|
-
`, // -----
|
|
183
|
-
`
|
|
184
|
-
import React from 'react';
|
|
185
|
-
|
|
186
|
-
import Button from '@atlaskit/button/standard-button';
|
|
187
|
-
|
|
188
|
-
import Tooltip from '../src';
|
|
189
|
-
|
|
190
|
-
export default () => (
|
|
191
|
-
<Tooltip content="Hello World">{(tooltipProps) => <span {...tooltipProps}>Test</span>}</Tooltip>
|
|
192
|
-
);
|
|
193
|
-
`, // -----
|
|
194
|
-
'adds a span to wrapped bare text nodes',
|
|
195
|
-
);
|
|
196
|
-
|
|
197
|
-
// converts custom tags on the wrapped method into elements with props passed in
|
|
198
|
-
});
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import core, { ASTPath, JSXElement } from 'jscodeshift';
|
|
2
|
-
import { Collection } from 'jscodeshift/src/Collection';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Changes all Tooltip implementations using the wrapped children approach to
|
|
6
|
-
* the render prop API.
|
|
7
|
-
*/
|
|
8
|
-
const createTooltipImplementationTransform = () => {
|
|
9
|
-
return (j: core.JSCodeshift, source: Collection<any>) => {
|
|
10
|
-
// Handle any children that are JSX elements
|
|
11
|
-
// (e.g. <Tooltip><Button/></Tooltip>)
|
|
12
|
-
source
|
|
13
|
-
.find(j.JSXElement)
|
|
14
|
-
.filter((path) => path.parent.value.type === 'JSXElement')
|
|
15
|
-
.filter(
|
|
16
|
-
(path) => path.parent.value.openingElement.name.name === 'Tooltip',
|
|
17
|
-
)
|
|
18
|
-
.forEach((element: ASTPath<JSXElement>) => {
|
|
19
|
-
const newComponent = j.jsxElement(
|
|
20
|
-
j.jsxOpeningElement(element.node.openingElement.name, [
|
|
21
|
-
j.jsxSpreadAttribute(j.identifier('tooltipProps')),
|
|
22
|
-
...element.node.openingElement.attributes,
|
|
23
|
-
]),
|
|
24
|
-
element.node.closingElement,
|
|
25
|
-
element.node.children,
|
|
26
|
-
);
|
|
27
|
-
|
|
28
|
-
j(element).replaceWith(
|
|
29
|
-
j.jsxExpressionContainer(
|
|
30
|
-
j.arrowFunctionExpression(
|
|
31
|
-
// Added parens for Prettier styling
|
|
32
|
-
[j.identifier('(tooltipProps)')],
|
|
33
|
-
newComponent,
|
|
34
|
-
),
|
|
35
|
-
),
|
|
36
|
-
);
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
// Handle any direct children that are raw text
|
|
40
|
-
// (e.g. <Tooltip>Test</Tooltip>)
|
|
41
|
-
source
|
|
42
|
-
.find(j.JSXText)
|
|
43
|
-
// Need to ensure that it has this property for TS's sake
|
|
44
|
-
.filter((path) => !!path.value.raw)
|
|
45
|
-
.filter(
|
|
46
|
-
(path) =>
|
|
47
|
-
path.parent.value.openingElement.name.name === 'Tooltip' &&
|
|
48
|
-
path.value.raw!.trim().length > 0, // Adding bang because we are checking in the above filter
|
|
49
|
-
)
|
|
50
|
-
.forEach((element) => {
|
|
51
|
-
const newComponent = j.jsxElement(
|
|
52
|
-
j.jsxOpeningElement(j.jsxIdentifier('span'), [
|
|
53
|
-
j.jsxSpreadAttribute(j.identifier('tooltipProps')),
|
|
54
|
-
]),
|
|
55
|
-
j.jsxClosingElement(j.jsxIdentifier('span')),
|
|
56
|
-
[j.jsxText(element.value.raw ? element.value.raw.trim() : '')],
|
|
57
|
-
);
|
|
58
|
-
|
|
59
|
-
j(element).replaceWith(
|
|
60
|
-
j.jsxExpressionContainer(
|
|
61
|
-
j.arrowFunctionExpression(
|
|
62
|
-
[j.identifier('(tooltipProps)')],
|
|
63
|
-
newComponent,
|
|
64
|
-
),
|
|
65
|
-
),
|
|
66
|
-
);
|
|
67
|
-
});
|
|
68
|
-
return source.toSource();
|
|
69
|
-
};
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
export const changeWrappedToRenderProp = createTooltipImplementationTransform();
|
package/codemods_wip/wip.md
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
To continue work on the codemod:
|
|
2
|
-
|
|
3
|
-
- Add `"jscodeshift": "0.14.0",` to devDependncies
|
|
4
|
-
- Add `"@atlaskit/codemod-utils": "^4.1.3",` to dependencies
|
|
5
|
-
- Change folder from `codemod_wip` to `codemod`
|
|
6
|
-
- Add `"./codemods/**/*.ts",` to `include` in `tsconfig`
|
|
7
|
-
- Rename all `ts_` file extensions in the codemod folders to `ts`
|