WIP Spinner Description #3361
Open
WIP Spinner Description #3361
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: e194c79 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Draft
Contributor
|
Size Change: +413 B (+0.02%) Total Size: 1.81 MB
ℹ️ View Unchanged
|
TheSonOfThomp
requested review from
adamrasheed,
Copilot and
shaneeza
and removed request for
a team
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds support for displaying description text alongside the Spinner component through new description and direction props, enabling both horizontal and vertical layouts. It also updates the loading-spinner-v5 codemod to preserve these props instead of removing them.
Key changes:
- Adds
description,direction,baseFontSize, andsvgPropsprops to theSpinnercomponent - Updates codemod transformation logic to keep
description/baseFontSizeprops and adddirectionbased on the olddisplayOptionvalue - Changes the Spinner's root element from
<svg>to<div>to accommodate the description text layout
Reviewed changes
Copilot reviewed 20 out of 21 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
tools/codemods/src/codemods/loading-spinner-v5/transform.ts |
Refactored codemod to add direction prop and preserve description/baseFontSize props instead of removing them |
tools/codemods/src/codemods/loading-spinner-v5/tests/*.tsx |
Updated test fixtures to reflect the new codemod behavior |
packages/loading-indicator/src/Spinner/Spinner.types.ts |
Added SpinnerDirection enum and new props (description, direction, baseFontSize, svgProps) |
packages/loading-indicator/src/Spinner/Spinner.tsx |
Updated component to render a wrapper div with optional description text |
packages/loading-indicator/src/Spinner/Spinner.styles.ts |
Added getWrapperStyles function and gap calculation utilities for layout |
packages/loading-indicator/src/Spinner/constants.ts |
Added getHorizontalGap and getVerticalGap functions |
packages/loading-indicator/src/Spinner/Spinner.spec.tsx |
Added tests for description rendering and props pass-through |
packages/loading-indicator/src/testing/* |
Updated test utilities to return HTMLDivElement instead of SVGSVGElement |
.changeset/*.md |
Added changeset documentation for the changes |
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
adamrasheed
approved these changes
Dec 5, 2025
Contributor
|
Coverage after merging at/spinner-description into main will be
Coverage Report for Changed Files
|
|||||||||||||||||||||||||||||||||||||
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
'@leafygreen-ui/loading-indicator': minor
Adds
descriptionanddirectionprops to theSpinnercomponent to support text rendering alongside the spinner.description: Optional text to display alongside the spinnerdirection: Controls the layout of the spinner and description (verticalorhorizontal)baseFontSize: Controls the font size of the description textsvgProps: Pass-through props for the SVG element'@lg-tools/codemods': minor
'@lg-tools/cli': minor
Updates
loading-spinner-v5codemod to convertdisplayOptionprop tosizeanddirectionprops. The codemod now keeps thedescriptionandbaseFontSizeprops instead of removing them.Note:
@leafygreen-ui/loading-indicatorversions 5.0.x will need to be deprecated on npmUpdated from #3219
(Compare solution against #3357)