Skip to content

feat(background-image): port pf-v5-background-image to pf-v6-background-image#3151

Open
zeroedin wants to merge 5 commits into
staging/pfv6from
feat/v6-background-image
Open

feat(background-image): port pf-v5-background-image to pf-v6-background-image#3151
zeroedin wants to merge 5 commits into
staging/pfv6from
feat/v6-background-image

Conversation

@zeroedin
Copy link
Copy Markdown
Collaborator

Summary

  • Removes <pf-v5-background-image>
  • Ports <pf-v5-background-image> to <pf-v6-background-image> web component for PatternFly v6
  • Simplified from 115 LOC to 36 LOC — removes responsive breakpoint image map in favor of a single src attribute (matching React v6)
  • Uses --pf-v6-c-background-image--* design tokens matching PatternFly v6 SCSS
  • Responsive sizing via clamp() with configurable min/width/max tokens
  • Bidirectional support via :host(:dir(rtl)) (replaces SCSS bidirectional mixin)
  • aria-hidden="true" on background container for WCAG compliance
  • Replaces v5 JPEG demo images with v6 SVG pattern asset

Closes #2980

Intentional divergences from React

  • --pf-v6-c-background-image--BackgroundPosition exposed as a public CSS custom property (React sets this internally via SCSS
    bidirectional mixin; shadow DOM prevents class-level overrides)

Test plan

  • npm run test passes
  • Demo renders correctly at localhost:8000 with ?rendering=chromeless
  • Background image displays fixed behind page content
  • src attribute sets the background image URL
  • Removing src clears the background image
  • Background color token applies when no image is set
  • RTL layout positions image at bottom-left
  • Background size tokens (--min-width, --width, --max-width) are respected
  • Element is hidden from assistive technology (aria-hidden)

Assisted-By: Claude

Testing Instructions

Notes to Reviewers

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 18, 2026

🦋 Changeset detected

Latest commit: d446c5d

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

@zeroedin zeroedin changed the base branch from main to staging/pfv6 May 18, 2026 21:19
@netlify
Copy link
Copy Markdown

netlify Bot commented May 18, 2026

Deploy Preview for patternfly-elements ready!

Name Link
🔨 Latest commit b805d37
😎 Deploy Preview https://deploy-preview-3151--patternfly-elements.netlify.app/

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

@zeroedin zeroedin changed the title Feat/v6 background image feat(background-image): port pf-v5-background-image to pf-v6-background-image May 18, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 18, 2026

✅ Commitlint tests passed!

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

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

SSR Test Run for fa7e3de: Report

@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for e7f8ab4: Report

@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for 600e72b: Report

@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for 4de07f5: Report

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

This comment has been minimized.

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.

[feat]: Update <pf-v6-background-image> for PatternFly v6

1 participant