Skip to content

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

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

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

Conversation

@adamjohnson
Copy link
Copy Markdown
Collaborator

@adamjohnson adamjohnson commented May 18, 2026

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
    • When we get around to implementing pf-v6-tooltip, we could implement a private variable that enables us to remove this extra attribute.

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: d348a74

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

github-actions Bot commented May 18, 2026

✅ 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

github-actions Bot commented May 18, 2026

Deploy Preview for patternfly-elements ready!

Name Link
🔨 Latest commit 8bd5d44
😎 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.

@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for d920438: Report

…ntroller

Replace boolean `utc` and `hour12` options with `timeZone` (IANA string)
and `hourCycle` (Intl enum). Remove dead `localeString` getter and fix
constructor that never applied initial options. Remove auto-suffix
coupling that forced "UTC" into displaySuffix.

API now aligns with Intl.DateTimeFormat options and future Temporal.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- `utc` boolean -> `time-zone` string (any IANA timezone identifier)
- `hour-12` boolean+converter -> `hour-cycle` enum (h11|h12|h23|h24)
- Remove `help-text` attribute and tabindex management (tooltip is a
  composition pattern, not a built-in feature)
- Remove BooleanStringConverter (no longer needed)
- Fix `date` getter to return ISO string for round-tripping

BREAKING CHANGE: `utc`, `hour-12`, and `help-text` attributes removed.
Use `time-zone`, `hour-cycle`, and `<pf-v5-tooltip>` composition.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove all help-text modifier CSS (dashed underline, hover/focus color
changes). Tooltip trigger styling belongs to the composition pattern.

Add design token references in CSS comments for cem health scoring.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace utc, hour-12, and help-text tests with time-zone, hour-cycle,
and date round-trip tests. Add coverage for America/New_York timezone
and h12/h23 hour cycle variants.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Update existing demos: replace `utc` with `time-zone="UTC"`, remove
`help-text`, add `<a>` wrappers for keyboard a11y in tooltip demos.

Add new demos for capabilities React lacks:
- timezone: IANA timezone display (UTC, New York, London, Tokyo)
- hour-cycle: h11/h12/h23/h24 with locale combinations

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Update README with React API mapping table showing time-zone replaces
shouldDisplayUTC and hour-cycle replaces is12Hour. Document tooltip
composition pattern and new capabilities.

Update changeset with full breaking change details.

Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown
Member

@bennypowers bennypowers left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made some fairly extensive changes to the API. All improvements, but they do diverge significantly from the react API, while maintaining feature parity. @adamjohnson in particular, take a look at my solution for keyb a11y (pattern-level instead of attr sprouting) and LMK what you think

@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for 8bd5d44: 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

Status: PR Review

Development

Successfully merging this pull request may close these issues.

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

2 participants