Skip to content

feat(back-to-top): port pf-v5-back-to-top to pf-v6-back-to-top#3149

Open
zeroedin wants to merge 5 commits into
staging/pfv6from
feat/v6-back-to-top
Open

feat(back-to-top): port pf-v5-back-to-top to pf-v6-back-to-top#3149
zeroedin wants to merge 5 commits into
staging/pfv6from
feat/v6-back-to-top

Conversation

@zeroedin
Copy link
Copy Markdown
Collaborator

@zeroedin zeroedin commented May 14, 2026

Summary

  • Removes <pf-v5-back-to-top>
  • Ports <pf-v5-back-to-top> to <pf-v6-back-to-top> for PatternFly v6
  • Shortcut to navigate to the top of a lengthy content page
  • Renders as <a> with href (progressive enhancement) or <button> (JS scroll)
  • Supports always-visible, scrollable-selector, accessible-label, and href attributes
  • delegatesFocus for keyboard accessibility
  • Respects prefers-reduced-motion for scroll behavior
  • Demos: basic (index), always-visible, button-mode, scrollable-container

Closes #2980
Depends on #3130

Intentional divergences from React

  • href attribute: renders as an <a> link instead of a <button>, enabling progressive enhancement (works without JS)
  • Default slot replaces React's title prop, allowing rich content for the button text
  • accessible-label abstracts aria-label per ADVICE.md
  • always-visible attribute instead of React's isAlwaysVisible (no is- prefix per ADVICE.md)
  • scrollable-selector dash-case attribute for the camelCase property
  • prefers-reduced-motion handled via matchMedia check (instant vs smooth scroll)

Test plan

  • npm run test passes
  • Demos render correctly at localhost:8000 with ?rendering=chromeless
  • Button appears after scrolling past threshold (~400px)
  • always-visible keeps button visible without scroll
  • href mode renders as link and navigates to fragment
  • scrollable-selector spies on custom container scroll
  • Screen reader announces accessible name
  • prefers-reduced-motion: reduce uses instant scroll

Assisted-By: Claude noreply@anthropic.com

Testing Instructions

Notes to Reviewers

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 14, 2026

🦋 Changeset detected

Latest commit: 059edbd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@patternfly/elements Major

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 14, 2026

✅ Commitlint tests passed!

More Info
{
  "valid": true,
  "errors": [],
  "warnings": [],
  "input": "feat(back-to-top): port pf-v5-back-to-top to pf-v6-back-to-top"
}

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 14, 2026

Deploy Preview for patternfly-elements ready!

Name Link
🔨 Latest commit 7d0cbbe
😎 Deploy Preview https://deploy-preview-3149--patternfly-elements.netlify.app/

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions github-actions Bot added the AT passed Automated testing has passed label May 14, 2026
@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for 91592ba: Report

@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for 48f1912: Report

@zeroedin zeroedin marked this pull request as ready for review May 19, 2026 16:34
@github-actions

This comment has been minimized.

@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for 7d0cbbe: Report

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AT passed Automated testing has passed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant