feat(spinner): add pf-v6-spinner element#3137
Open
zeroedin wants to merge 4 commits intostaging/pfv6from
Open
Conversation
Port pf-v5-spinner to pf-v6-spinner with v6 design tokens and API: - Migrate CSS tokens from --pf-v5-* to --pf-v6-* namespace - Update icon size tokens to --pf-t--global--icon--size--* (v6) - Add `xs` size variant (new in v6) - Add `inline` boolean attribute for font-size-inherited spinners - Add `accessible-label` attribute (abstracts aria-label via internals) - Set role=progressbar and aria-valuetext via InternalsController - Export `SpinnerSize` type union - Avoid sprouting default `size` attribute (CSS handles xl default) - Add demos: basic, size-variations, custom-size, inline-size - Add unit tests with a11ySnapshot assertions and size measurements - Update elements/package.json exports Closes #3037 Assisted-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove unused styleMap import - Use `static styles = [styles]` array form convention - Move diameter CSS custom property to willUpdate (host style) - Sync ariaValueText with accessibleLabel changes - Simplify render return type to TemplateResult - Use individual rotate property instead of transform function - Add prefers-reduced-motion media query - Add cem generate output path to config Assisted-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Contributor
✅ Commitlint tests passed!More Info{
"valid": true,
"errors": [],
"warnings": [],
"input": "feat(spinner): add pf-v6-spinner element"
} |
Contributor
✅ Deploy Preview for patternfly-elements ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
Contributor
bennypowers
requested changes
May 10, 2026
Member
bennypowers
left a comment
bennypowers
left a comment
There was a problem hiding this comment.
The issue in question is an "update" issue, not a "create" issue:
- commit message must be
feat(spinner)!: port to pf-v6-spinner - delete elements/pf-v5-spinner
| @@ -1,5 +1,6 @@ | |||
| sourceControlRootUrl: https://github.com/patternfly/patternfly-elements/tree/main/ | |||
| generate: | |||
| output: ./elements/custom-elements.json | |||
| "./pf-v5-progress/pf-v5-progress.js": "./pf-v5-progress/pf-v5-progress.js", | ||
| "./pf-v5-search-input/pf-v5-search-input.js": "./pf-v5-search-input/pf-v5-search-input.js", | ||
| "./pf-v5-spinner/pf-v5-spinner.js": "./pf-v5-spinner/pf-v5-spinner.js", | ||
| "./pf-v6-spinner/pf-v6-spinner.js": "./pf-v6-spinner/pf-v6-spinner.js", |
Member
There was a problem hiding this comment.
we can probably get rid of all of these, mappa handles trailing-slash exports
| if (changed.has('accessibleLabel')) { | ||
| const label = this.accessibleLabel ?? 'Loading...'; | ||
| this.#internals.ariaLabel = label; | ||
| this.#internals.ariaValueText = label; |
Member
There was a problem hiding this comment.
this should be a separate public property
cc @adamjohnson
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary
<pf-v6-spinner>web component for PatternFly v6role="progressbar"via ElementInternalssize(xs/sm/md/lg/xl),inline,diameter, andaccessible-labelattributesprefers-reduced-motionsupportCloses #3037
Depends on #3130
Intentional divergences from React
xssize supported (exists in PF core SCSS but not React's enum)sizedefaults toundefined(CSS fallback achieves xl visual default without sprouting attribute)accessible-labelabstractsariaLabel/ariaValueTextper ADVICE.mdrotateproperty instead oftransform: rotate()prefers-reduced-motionhandled via media query (React uses.pf-m-no-motionclass)Test plan
npm run testpasseslocalhost:8000with?rendering=chromelessprogressbarrole with correct labelprefers-reduced-motion: reduceAssisted-By: Claude noreply@anthropic.com