Skip to content

Add experimental React RelativeTime - #8250

Draft
adierkens wants to merge 5 commits into
mainfrom
adierkens-react-first-relative-time
Draft

Add experimental React RelativeTime#8250
adierkens wants to merge 5 commits into
mainfrom
adierkens-react-first-relative-time

Conversation

@adierkens

@adierkens adierkens commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Closes #

Changelog

New

  • ExperimentalRelativeTime is available from @primer/react/experimental for opt-in evaluation of the native React implementation.
  • Internal users can enable primer_react_relative_time to evaluate the implementation through the established RelativeTime entry point.

Changed

  • The stable RelativeTime component continues to render the existing <relative-time> custom element and retains its dependency, props, callback event contract, refs, and serialized formatting attributes by default.
  • The experimental implementation is SSR-safe, renders a native <time>, and uses Intl APIs for formatting and live updates. It preserves its data-component and datetime contract; it intentionally does not reproduce legacy formatting attributes. If rollout diagnostics need DOM metadata, add a dedicated data-relative-time-* contract rather than reviving custom-element attributes.
  • DataTable VRT masks both stable and experimental RelativeTime DOM shapes, so neither live timestamp output causes unrelated baseline churn.
  • The changeset is now a minor release because the stable API and DOM output remain unchanged.

Removed

  • None.

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

  • Added coverage for the stable custom-element default, preserved nullable-date and formatting-attribute behavior, the flagged React implementation, unsupported legacy precision fallback, SSR output, formatting variants, live updates, callback payloads, and public experimental exports.
  • The focused RelativeTime browser tests, export snapshot test, package type-check, full unit suite, lint, CSS lint, formatting, and build pass locally.
  • The retriggered VRT run on ff7297694 showed 297 DataTable failures across 99 snapshots (three retries each). The stable default had reverted to <relative-time>, while the prior mask only targeted the experimental <time> shape. Commit fba412b2e masks both shapes; no baselines were regenerated.
  • github-ui integration PR #28694 passed its relevant build, type-check, and package-test jobs with the stable path restored. Its unrelated VRT status gate remains separate from the component tests.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: bfa22b31-cbe2-4b07-8add-f302af4c1a2b
@github-actions github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jul 29, 2026
@github-actions

Copy link
Copy Markdown
Contributor

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: bfa22b31-cbe2-4b07-8add-f302af4c1a2b
@changeset-bot

changeset-bot Bot commented Jul 29, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 63d5e4e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Minor

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

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: bfa22b31-cbe2-4b07-8add-f302af4c1a2b
@adierkens adierkens changed the title Reimplement RelativeTime as a React component Add experimental React RelativeTime Jul 30, 2026
@github-actions
github-actions Bot temporarily deployed to storybook-preview-8250 July 30, 2026 02:34 Inactive
@github-actions
github-actions Bot temporarily deployed to storybook-preview-8250 July 30, 2026 04:20 Inactive
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: bfa22b31-cbe2-4b07-8add-f302af4c1a2b
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: bfa22b31-cbe2-4b07-8add-f302af4c1a2b
@primer-integration

primer-integration Bot commented Jul 30, 2026

Copy link
Copy Markdown

Integration test results from github/github-ui PR:

Passed  CI   Passed
Waiting  VRT   Waiting
Running  Projects   Running

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant