Skip to content

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

Draft
zeroedin wants to merge 1 commit into
staging/pfv6from
feat/v6-background-image
Draft

feat(background-image): port pf-v5-background-image to pf-v6-background-image#3151
zeroedin wants to merge 1 commit 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

⚠️ No Changeset found

Latest commit: 4c0ad09

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a 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 fa7e3de
😎 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

✅ 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

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