Skip to content

Commit b2d6795

Browse files
TheSonOfThompCopilot
TheSonOfThomp
and
Copilot
authored
[LG-4735] Spinner codemod (#3228)
* Creates loading spinner * creates story * lgids and test utils * Update README.md * deprecate Spinner from loading-indicator * changesets * Apply suggestion from @Copilot Co-authored-by: Copilot <[email protected]> * Apply suggestion from @Copilot Co-authored-by: Copilot <[email protected]> * Apply suggestion from @Copilot Co-authored-by: Copilot <[email protected]> * mv story * update animation timing * replace loading spinner * adds test harnesses * fix test references * adds named exports * changeset * Update loading-spinner.md * update rotation speed * Update README.md * Updates sizing to match Figma * fixes * Update loading-spinner.md * adds codemod * update description comment * Update loading-spinner.md * lint * fixes xl tests * adds tree shake tests * Update tools/codemods/src/codemods/loading-spinner-v5/transform.ts Co-authored-by: Copilot <[email protected]> * Update tools/codemods/README.md Co-authored-by: Copilot <[email protected]> * fix treeshake test --------- Co-authored-by: Copilot <[email protected]>
1 parent 2e06c1d commit b2d6795

16 files changed

+482
-0
lines changed

‎.changeset/loading-spinner.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,15 @@ Size.Small: 24px;
1717
Size.Default: 48px;
1818
Size.Large: 64px;
1919
```
20+
Run the codemod to auto-update this prop change
21+
```bash
22+
lg codemod loading-spinner-v5
23+
```
2024

2125
- Removes `baseFontSize` prop
2226
- Removes the explicit `description` prop.
27+
These props will be _removed_ by the codemod, but the description will only be converted to a comment, and must be updated manually.
28+
To add a description to the spinner, use the `Description` component from `@leafygreen-ui/typography` directly.
2329
```tsx
2430
<div>
2531
<Spinner size="default" />

‎tools/codemods/README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,56 @@ import Copyable from '@leafygreen-ui/copyable';
326326
<Tooltip justify="middle" renderMode="top-layer" />
327327
```
328328

329+
### `loading-spinner-v5`
330+
331+
This codemod can be used to upgrade Spinner components to v5 of `@leafygreen-ui/loading-indicator`.
332+
333+
This codemod applies to the following package:
334+
335+
- `@leafygreen-ui/loading-indicator`
336+
337+
This codemod does the following:
338+
339+
1. Converts `displayOption` prop to `size` prop with appropriate value mapping
340+
2. Removes `description` prop and adds guidance comment
341+
3. Removes `baseFontSize` prop if present
342+
343+
```shell
344+
pnpm lg codemod loading-spinner-v5 <path>
345+
```
346+
347+
**Before**:
348+
349+
```tsx
350+
import { Spinner } from '@leafygreen-ui/loading-indicator';
351+
352+
<Spinner
353+
displayOption="default-vertical"
354+
description="Loading data..."
355+
darkMode={true}
356+
/>
357+
<Spinner
358+
displayOption="large-vertical"
359+
description="Processing..."
360+
baseFontSize={16}
361+
/>
362+
```
363+
364+
**After**:
365+
366+
```tsx
367+
import { Spinner } from '@leafygreen-ui/loading-indicator';
368+
369+
/* Previous description: "Loading data..." */
370+
/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */
371+
372+
<Spinner size="default" darkMode={true} />;
373+
374+
/* Previous description: "Processing..." */
375+
/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */
376+
<Spinner size="large" />;
377+
```
378+
329379
### `tabs-v17`
330380

331381
This codemod can be used to get started in upgrading LG `Tabs` instances to v17 of `@leafygreen-ui/tabs`.

‎tools/codemods/src/codemods/loading-spinner-v5/tests/aliased-import.input.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
3+
import { Spinner as LGSpinner } from '@leafygreen-ui/loading-indicator';
4+
5+
export default function App() {
6+
return (
7+
<div>
8+
<LGSpinner displayOption="default-vertical" description="Loading..." />
9+
<LGSpinner displayOption="large-vertical" />
10+
</div>
11+
);
12+
}

‎tools/codemods/src/codemods/loading-spinner-v5/tests/aliased-import.output.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
3+
import { Spinner as LGSpinner } from '@leafygreen-ui/loading-indicator';
4+
5+
export default function App() {
6+
return (
7+
<div>
8+
{/* Previous description: "Loading..." */}
9+
{/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */}
10+
<LGSpinner size="default" />
11+
<LGSpinner size="large" />
12+
</div>
13+
);
14+
}

‎tools/codemods/src/codemods/loading-spinner-v5/tests/combined-props.input.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
3+
import { Spinner } from '@leafygreen-ui/loading-indicator';
4+
5+
export default function App() {
6+
return (
7+
<div>
8+
<Spinner
9+
displayOption="default-vertical"
10+
description="Loading data..."
11+
darkMode={true}
12+
className="my-spinner"
13+
/>
14+
<Spinner
15+
displayOption="large-vertical"
16+
description="Processing..."
17+
baseFontSize={16}
18+
colorOverride="#FF0000"
19+
/>
20+
</div>
21+
);
22+
}

‎tools/codemods/src/codemods/loading-spinner-v5/tests/combined-props.output.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
3+
import { Spinner } from '@leafygreen-ui/loading-indicator';
4+
5+
export default function App() {
6+
return (
7+
<div>
8+
{/* Previous description: "Loading data..." */}
9+
{/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */}
10+
<Spinner size="default" darkMode={true} className="my-spinner" />
11+
{/* Previous description: "Processing..." */}
12+
{/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */}
13+
<Spinner size="large" colorOverride="#FF0000" />
14+
</div>
15+
);
16+
}

‎tools/codemods/src/codemods/loading-spinner-v5/tests/no-changes.input.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
3+
import { PageLoader, Spinner } from '@leafygreen-ui/loading-indicator';
4+
5+
export default function App() {
6+
return (
7+
<div>
8+
<Spinner size="default" />
9+
<Spinner size="large" darkMode={true} />
10+
<Spinner />
11+
<PageLoader
12+
baseFontSize={16}
13+
description="Loading page..."
14+
darkMode={true}
15+
/>
16+
</div>
17+
);
18+
}

‎tools/codemods/src/codemods/loading-spinner-v5/tests/no-changes.output.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
3+
import { PageLoader, Spinner } from '@leafygreen-ui/loading-indicator';
4+
5+
export default function App() {
6+
return (
7+
<div>
8+
<Spinner size="default" />
9+
<Spinner size="large" darkMode={true} />
10+
<Spinner />
11+
<PageLoader
12+
baseFontSize={16}
13+
description="Loading page..."
14+
darkMode={true}
15+
/>
16+
</div>
17+
);
18+
}

‎tools/codemods/src/codemods/loading-spinner-v5/tests/remove-description.input.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
3+
import { Spinner } from '@leafygreen-ui/loading-indicator';
4+
5+
export default function App() {
6+
return (
7+
<div>
8+
<Spinner description="Loading..." />
9+
<Spinner displayOption="large-vertical" description="Please wait" />
10+
</div>
11+
);
12+
}

‎tools/codemods/src/codemods/loading-spinner-v5/tests/remove-description.output.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
3+
import { Spinner } from '@leafygreen-ui/loading-indicator';
4+
5+
export default function App() {
6+
return (
7+
<div>
8+
{/* Previous description: "Loading..." */}
9+
{/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */}
10+
<Spinner />
11+
{/* Previous description: "Please wait" */}
12+
{/* TODO: The Spinner component no longer supports the `description` prop. Please render description text separately using the Typography component. */}
13+
<Spinner size="large" />
14+
</div>
15+
);
16+
}

0 commit comments

Comments
 (0)