Skip to content

feat(timestamp): port pf-v5-timestamp to pf-v6-timestamp element#3150

Open
adamjohnson wants to merge 6 commits into
staging/pfv6from
feat/v6-timestamp
Open

feat(timestamp): port pf-v5-timestamp to pf-v6-timestamp element#3150
adamjohnson wants to merge 6 commits into
staging/pfv6from
feat/v6-timestamp

Conversation

@adamjohnson
Copy link
Copy Markdown
Collaborator

Summary

  • Removes <pf-v5-timestamp>
  • Ports <pf-v5-timestamp> to <pf-v6-timestamp> web component for PatternFly v6
  • Displays formatted date/time values using Intl.DateTimeFormat via TimestampController
  • Supports date-format, time-format, display-suffix, locale, relative, utc, and hour-12 attributes
  • New help-text attribute for tooltip trigger styling with keyboard focus (WCAG 2.1.1)
  • Default slot for custom display content (e.g. relative time text, prefacing text)
  • CSS uses --pf-v6-c-timestamp--* design tokens with inherit color fallback for composability
  • Demos: default, basic-formats, custom-format, default-tooltip, custom-content, custom-tooltip, relative-format, relative-format-with-tooltip

Closes #3045

Intentional divergences from React

  • tooltip prop replaced by composition with <pf-v5-tooltip> (slot-based composition over config objects)
  • shouldDisplayUTC renamed to utc (shorter, idiomatic HTML attribute)
  • is12Hour renamed to hour-12 (dash-case per HTML convention; supports hour-12="false")
  • date accepts a string (any new Date()-parseable value) instead of a Date object
  • children mapped to default slot
  • help-text attribute added (not in React) for dashed underline styling and keyboard focusability

Test plan

  • npm run test passes
  • Demos render correctly at localhost:8000 with ?rendering=chromeless
  • Default timestamp displays current date/time
  • All format variants (full, long, medium, short) visually match patternfly.org
  • Relative time displays correctly for past, present, and future dates
  • help-text timestamps show dashed underline and are keyboard-focusable via Tab
  • Tooltip text is visible (white on dark) when timestamp is inside <pf-v5-tooltip>
  • UTC display appends "UTC" suffix
  • Custom slot content replaces formatted time while preserving datetime attribute

Assisted-By: Claude

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 18, 2026

🦋 Changeset detected

Latest commit: 9bb0f60

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

@adamjohnson adamjohnson self-assigned this May 18, 2026
@github-project-automation github-project-automation Bot moved this to Needs triage in PatternFly Issues May 18, 2026
@adamjohnson adamjohnson moved this from Needs triage to PR Review in PatternFly Issues May 18, 2026
@adamjohnson adamjohnson added this to the PatternFly Elements 6 milestone May 18, 2026
@adamjohnson adamjohnson linked an issue May 18, 2026 that may be closed by this pull request
18 tasks
@github-actions
Copy link
Copy Markdown
Contributor

✅ Commitlint tests passed!

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

@adamjohnson adamjohnson marked this pull request as ready for review May 18, 2026 21:13
@github-actions
Copy link
Copy Markdown
Contributor

Deploy Preview for patternfly-elements ready!

Name Link
🔨 Latest commit 6f11399
😎 Deploy Preview https://deploy-preview-3150--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 18, 2026
@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

Status: PR Review

Development

Successfully merging this pull request may close these issues.

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

1 participant