From bc3e5e385cd41d10208c61c0d59574e40792259a Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Mon, 18 May 2026 16:10:30 -0400 Subject: [PATCH 1/6] feat(timestamp): add `` element --- elements/pf-v6-timestamp/README.md | 59 +++++++++ .../pf-v6-timestamp/demo/basic-formats.html | 19 +++ .../pf-v6-timestamp/demo/custom-content.html | 31 +++++ .../pf-v6-timestamp/demo/custom-format.html | 24 ++++ .../pf-v6-timestamp/demo/custom-tooltip.html | 25 ++++ .../pf-v6-timestamp/demo/default-tooltip.html | 26 ++++ elements/pf-v6-timestamp/demo/index.html | 15 +++ .../demo/relative-format-with-tooltip.html | 24 ++++ .../pf-v6-timestamp/demo/relative-format.html | 17 +++ elements/pf-v6-timestamp/pf-v6-timestamp.css | 41 ++++++ elements/pf-v6-timestamp/pf-v6-timestamp.ts | 125 ++++++++++++++++++ 11 files changed, 406 insertions(+) create mode 100644 elements/pf-v6-timestamp/README.md create mode 100644 elements/pf-v6-timestamp/demo/basic-formats.html create mode 100644 elements/pf-v6-timestamp/demo/custom-content.html create mode 100644 elements/pf-v6-timestamp/demo/custom-format.html create mode 100644 elements/pf-v6-timestamp/demo/custom-tooltip.html create mode 100644 elements/pf-v6-timestamp/demo/default-tooltip.html create mode 100644 elements/pf-v6-timestamp/demo/index.html create mode 100644 elements/pf-v6-timestamp/demo/relative-format-with-tooltip.html create mode 100644 elements/pf-v6-timestamp/demo/relative-format.html create mode 100644 elements/pf-v6-timestamp/pf-v6-timestamp.css create mode 100644 elements/pf-v6-timestamp/pf-v6-timestamp.ts diff --git a/elements/pf-v6-timestamp/README.md b/elements/pf-v6-timestamp/README.md new file mode 100644 index 0000000000..477910e635 --- /dev/null +++ b/elements/pf-v6-timestamp/README.md @@ -0,0 +1,59 @@ +# pf-v6-timestamp + +A timestamp provides consistent formats for displaying date and time values. + +## Usage + +### Basic date and time + +```html + + +``` + +### Relative time + +```html + + +``` + +### With tooltip (UTC display) + +```html + + + + +``` + +## Divergences from React `Timestamp` + +### Not implemented + +| React prop | Notes | +|---|---| +| `tooltip` | Use composition with `` wrapping the timestamp instead. The web component pattern favors slot-based composition over configuration objects. | +| `shouldDisplayUTC` | Use the `utc` attribute instead, which is functionally equivalent. | + +### Changed API + +| React prop | Web component | Difference | +|---|---|---| +| `is12Hour` | `hour-12` attribute | Renamed to dash-case per HTML convention. Supports `hour-12="false"` for explicit 24-hour. | +| `date` (Date object) | `date` attribute (string) | Accepts any string parseable by `new Date()` rather than a Date object, since HTML attributes are strings. | +| `customFormat` (prop) | `.customFormat` property | Set via JavaScript property only (not reflectable as attribute). | +| `tooltip.variant="default"` | `help-text` + composition | Dashed underline from `help-text` attr; tooltip via `` wrapping. | +| `children` | Default slot | Slotted content replaces computed display, matching web component conventions. | + +### Added + +| Web component API | Notes | +|---|---| +| `help-text` attribute | Boolean attribute that applies the dashed-underline "help text" styling from the v6 design system, indicating a tooltip is available. | +| Default slot | Slot for custom display content (e.g. relative time text). The `datetime` attribute on the inner `