@atlaskit/tabs 17.2.0 → 17.2.2

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.
Files changed (32) hide show
  1. package/CHANGELOG.md +14 -36
  2. package/dist/cjs/components/tab-list.compiled.css +8 -2
  3. package/dist/cjs/components/tab-list.js +1 -2
  4. package/dist/cjs/components/tabs.js +1 -1
  5. package/dist/es2019/components/tab-list.compiled.css +8 -2
  6. package/dist/es2019/components/tab-list.js +1 -1
  7. package/dist/es2019/components/tabs.js +1 -1
  8. package/dist/esm/components/tab-list.compiled.css +8 -2
  9. package/dist/esm/components/tab-list.js +1 -2
  10. package/dist/esm/components/tabs.js +1 -1
  11. package/dist/types/components/tab-panel.d.ts +2 -2
  12. package/dist/types-ts4.5/components/tab-panel.d.ts +2 -2
  13. package/package.json +2 -3
  14. package/codemods/13.0.0-lite-mode.tsx +0 -31
  15. package/codemods/__tests__/13.0.0-lite-mode.tsx +0 -569
  16. package/codemods/__tests__/add-id-prop.tsx +0 -77
  17. package/codemods/__tests__/map-tabs-prop.tsx +0 -299
  18. package/codemods/__tests__/on-select-to-on-change.tsx +0 -541
  19. package/codemods/__tests__/remove-components-prop.tsx +0 -151
  20. package/codemods/__tests__/remove-is-selected-test-prop.tsx +0 -147
  21. package/codemods/__tests__/remove-tab-item-tab-content.tsx +0 -86
  22. package/codemods/__tests__/remove-types.tsx +0 -162
  23. package/codemods/__tests__/rename-is-content-persisted-to-should-unmount-tab-panel-on-change.tsx +0 -311
  24. package/codemods/migrations/add-id-prop.tsx +0 -51
  25. package/codemods/migrations/map-tabs-prop.tsx +0 -171
  26. package/codemods/migrations/on-select-to-on-change.tsx +0 -91
  27. package/codemods/migrations/remove-components-prop.tsx +0 -20
  28. package/codemods/migrations/remove-is-selected-test-prop.tsx +0 -17
  29. package/codemods/migrations/remove-tab-item-tab-content.tsx +0 -26
  30. package/codemods/migrations/remove-types.tsx +0 -45
  31. package/codemods/migrations/rename-is-content-persisted-to-should-unmount-tab-panel-on-change.tsx +0 -62
  32. package/codemods/utils.tsx +0 -39
package/codemods/__tests__/map-tabs-prop.tsx DELETED
@@ -1,299 +0,0 @@
1
- import { createTransformer } from '@atlaskit/codemod-utils';
2
-
3
- import { mapTabsProp, removeTabsProp } from '../migrations/map-tabs-prop';
4
-
5
- const transformer = createTransformer([mapTabsProp, removeTabsProp]);
6
-
7
- const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
8
-
9
- describe('map tabs prop to components', () => {
10
- defineInlineTest(
11
- { default: transformer, parser: 'tsx' },
12
- {},
13
- `
14
- import React from "react";
15
- import Tabs from "@atlaskit/tabs";
16
-
17
- const tabs = [
18
- { label: 'Tab 1', content: One, testId: 'one' },
19
- { label: 'Tab 2', content: Two },
20
- { label: 'Tab 3', content: Three },
21
- { label: 'Tab 4', content: Four },
22
- ];
23
-
24
- export default () => (
25
- <Tabs
26
- tabs={tabs}
27
- />
28
- );
29
- `,
30
- `
31
- import React from "react";
32
- import Tabs, { Tab, TabList, TabPanel } from "@atlaskit/tabs";
33
-
34
- const tabs = [
35
- { label: 'Tab 1', content: One, testId: 'one' },
36
- { label: 'Tab 2', content: Two },
37
- { label: 'Tab 3', content: Three },
38
- { label: 'Tab 4', content: Four },
39
- ];
40
-
41
- export default () => (
42
- (<Tabs>
43
- <TabList>
44
- {tabs.map((tab, index) => <Tab testId={tab.testId} key={index}>{tab.label}</Tab>)}
45
- </TabList>
46
- {tabs.map((tab, index) => <TabPanel key={index}>{tab.content}</TabPanel>)}
47
- </Tabs>)
48
- );
49
-
50
- `,
51
- 'should map tabs correctly',
52
- );
53
-
54
- defineInlineTest(
55
- { default: transformer, parser: 'tsx' },
56
- {},
57
- `
58
- import React from "react";
59
- import Tabs from "@atlaskit/tabs";
60
-
61
- export default () => (
62
- <Tabs
63
- tabs={[
64
- { label: 'Tab 1', content: One, testId: 'one' },
65
- { label: 'Tab 2', content: Two },
66
- { label: 'Tab 3', content: Three },
67
- { label: 'Tab 4', content: Four },
68
- ]}
69
- />
70
- );
71
- `,
72
- `
73
- import React from "react";
74
- import Tabs, { Tab, TabList, TabPanel } from "@atlaskit/tabs";
75
-
76
- export default () => (
77
- (<Tabs>
78
- <TabList>
79
- {[
80
- { label: 'Tab 1', content: One, testId: 'one' },
81
- { label: 'Tab 2', content: Two },
82
- { label: 'Tab 3', content: Three },
83
- { label: 'Tab 4', content: Four },
84
- ].map((tab, index) => <Tab testId={tab.testId} key={index}>{tab.label}</Tab>)}
85
- </TabList>
86
- {[
87
- { label: 'Tab 1', content: One, testId: 'one' },
88
- { label: 'Tab 2', content: Two },
89
- { label: 'Tab 3', content: Three },
90
- { label: 'Tab 4', content: Four },
91
- ].map((tab, index) => <TabPanel key={index}>{tab.content}</TabPanel>)}
92
- </Tabs>)
93
- );
94
-
95
- `,
96
- 'should map tabs correctly if defined inline',
97
- );
98
-
99
- defineInlineTest(
100
- { default: transformer, parser: 'tsx' },
101
- {},
102
- `
103
- import React from "react";
104
- import Tabs from "@atlaskit/tabs";
105
-
106
- const Tab = () => {};
107
- const TabList = () => {};
108
-
109
- const tabs = [
110
- { label: 'Tab 1', content: One, testId: 'one' },
111
- { label: 'Tab 2', content: Two },
112
- { label: 'Tab 3', content: Three },
113
- { label: 'Tab 4', content: Four },
114
- ];
115
-
116
- export default () => (
117
- <Tabs
118
- tabs={tabs}
119
- />
120
- );
121
- `,
122
- `
123
- import React from "react";
124
- import Tabs, { Tab as AtlaskitTab, TabList as AtlaskitTabList, TabPanel } from "@atlaskit/tabs";
125
-
126
- const Tab = () => {};
127
- const TabList = () => {};
128
-
129
- const tabs = [
130
- { label: 'Tab 1', content: One, testId: 'one' },
131
- { label: 'Tab 2', content: Two },
132
- { label: 'Tab 3', content: Three },
133
- { label: 'Tab 4', content: Four },
134
- ];
135
-
136
- export default () => (
137
- (<Tabs>
138
- <AtlaskitTabList>
139
- {tabs.map(
140
- (tab, index) => <AtlaskitTab testId={tab.testId} key={index}>{tab.label}</AtlaskitTab>
141
- )}
142
- </AtlaskitTabList>
143
- {tabs.map((tab, index) => <TabPanel key={index}>{tab.content}</TabPanel>)}
144
- </Tabs>)
145
- );
146
-
147
- `,
148
- 'should map tabs correctly - with alias',
149
- );
150
-
151
- defineInlineTest(
152
- { default: transformer, parser: 'tsx' },
153
- {},
154
- `
155
- import React from "react";
156
- import Tabs from "@atlaskit/tabs";
157
-
158
- const Tab = () => {};
159
- const TabList = () => {};
160
- const TabPanel = () => {};
161
-
162
- const tabs = [
163
- { label: 'Tab 1', content: One, testId: 'one' },
164
- { label: 'Tab 2', content: Two },
165
- { label: 'Tab 3', content: Three },
166
- { label: 'Tab 4', content: Four },
167
- ];
168
-
169
- export default () => (
170
- <Tabs
171
- tabs={tabs}
172
- />
173
- );
174
- `,
175
- `
176
- import React from "react";
177
- import Tabs, {
178
- Tab as AtlaskitTab,
179
- TabList as AtlaskitTabList,
180
- TabPanel as AtlaskitTabPanel,
181
- } from "@atlaskit/tabs";
182
-
183
- const Tab = () => {};
184
- const TabList = () => {};
185
- const TabPanel = () => {};
186
-
187
- const tabs = [
188
- { label: 'Tab 1', content: One, testId: 'one' },
189
- { label: 'Tab 2', content: Two },
190
- { label: 'Tab 3', content: Three },
191
- { label: 'Tab 4', content: Four },
192
- ];
193
-
194
- export default () => (
195
- (<Tabs>
196
- <AtlaskitTabList>
197
- {tabs.map(
198
- (tab, index) => <AtlaskitTab testId={tab.testId} key={index}>{tab.label}</AtlaskitTab>
199
- )}
200
- </AtlaskitTabList>
201
- {tabs.map(
202
- (tab, index) => <AtlaskitTabPanel key={index}>{tab.content}</AtlaskitTabPanel>
203
- )}
204
- </Tabs>)
205
- );
206
-
207
- `,
208
- 'should map tabs correctly - with all clashed',
209
- );
210
-
211
- defineInlineTest(
212
- { default: transformer, parser: 'tsx' },
213
- {},
214
- `
215
- import React from "react";
216
- import Tabs from "@atlaskit/tabs";
217
-
218
- const getTabs = () => (
219
- [
220
- { label: 'Tab 1', content: One, testId: 'one' },
221
- { label: 'Tab 2', content: Two },
222
- { label: 'Tab 3', content: Three },
223
- { label: 'Tab 4', content: Four },
224
- ]
225
- );
226
-
227
- export default () => (
228
- <Tabs
229
- tabs={getTabs()}
230
- />
231
- );
232
- `,
233
- `
234
- import React from "react";
235
- import Tabs, { Tab, TabList, TabPanel } from "@atlaskit/tabs";
236
-
237
- const getTabs = () => (
238
- [
239
- { label: 'Tab 1', content: One, testId: 'one' },
240
- { label: 'Tab 2', content: Two },
241
- { label: 'Tab 3', content: Three },
242
- { label: 'Tab 4', content: Four },
243
- ]
244
- );
245
-
246
- export default () => (
247
- (<Tabs>
248
- <TabList>
249
- {getTabs().map((tab, index) => <Tab testId={tab.testId} key={index}>{tab.label}</Tab>)}
250
- </TabList>
251
- {getTabs().map((tab, index) => <TabPanel key={index}>{tab.content}</TabPanel>)}
252
- </Tabs>)
253
- );
254
-
255
- `,
256
- 'should map tabs correctly if defined inline',
257
- );
258
-
259
- defineInlineTest(
260
- { default: transformer, parser: 'tsx' },
261
- {},
262
- `
263
- import React from "react";
264
- import Tabs from "@atlaskit/tabs";
265
-
266
- export default (props) => (
267
- <Tabs
268
- {...props}
269
- />
270
- );
271
- `,
272
- `
273
- /* TODO: (from codemod)
274
- This file is spreading props on the Tabs component.
275
-
276
- The API has changed to be composable and a number of props have changed.
277
- - isSelectedTest no longer exists.
278
- - onSelect is now onChange and has a different type.
279
- - components prop has been removed in favour of the hooks, useTab and useTabPanel.
280
- - isContentPersisted is now called shouldUnmountTabPanelOnChange and its behaviour is inverted.
281
-
282
- If you were using any of these props, check the docs for the new API at
283
- https://atlassian.design/components/tabs/examples */
284
- import React from "react";
285
- import Tabs, { Tab, TabList, TabPanel } from "@atlaskit/tabs";
286
-
287
- export default (props) => (
288
- (<Tabs {...props}>
289
- <TabList>
290
- {props.tabs.map((tab, index) => <Tab testId={tab.testId} key={index}>{tab.label}</Tab>)}
291
- </TabList>
292
- {props.tabs.map((tab, index) => <TabPanel key={index}>{tab.content}</TabPanel>)}
293
- </Tabs>)
294
- );
295
-
296
- `,
297
- 'should map tabs correctly if spread is used',
298
- );
299
- });