feat(antares): add DateField component by egaitan-godaddy · Pull Request #201 · godaddy/antares

egaitan-godaddy · 2026-05-29T23:08:34Z

Adds the DateField component — a segmented date input (Year/Month/Day). This is the first date component of the date-components family (DatePicker, DateRangePicker, Calendar, RangeCalendar).
I18NProvider component re-exported from RAC, as it is useful for date components that need to manage locales.
Unlike I18NProvider, @internationalized/date is not re-exported because it is a date utilities package that RAC components already expect users to import directly, we are just following the same direction.
field-frame updates to fix inconsistences across font properties (font, line-height) in date-field, text-field and number-field along with screenshot updates.

Storybook preview

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

changeset-bot · 2026-05-29T23:08:38Z

🦋 Changeset detected

Latest commit: afd3583

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

This PR includes changesets to release 1 package

Name	Type
@godaddy/antares	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

github-actions · 2026-05-29T23:12:14Z

📚 Storybook Preview

Preview URL: https://godaddy.github.io/antares/pr-201-storybook/

Preview will be automatically deleted when this PR is closed.

github-actions · 2026-05-29T23:12:53Z

Docs Site Preview

Preview URL: https://godaddy.github.io/antares/pr-201-site/

Preview will be automatically deleted when this PR is closed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

@see

Drop verbose @example/@see blocks on each prop and tighten the component summary, matching the TextField docstring style.

…fg-secondary

egaitan-godaddy · 2026-06-01T23:27:06Z

/update-screenshots

github-actions · 2026-06-01T23:27:18Z

📸 Updating screenshots... View workflow run

github-actions · 2026-06-01T23:31:24Z

🎉 Successfully updated and committed screenshots!

…ateField component

egaitan-godaddy · 2026-06-01T23:45:32Z

/update-screenshots

github-actions · 2026-06-01T23:45:43Z

📸 Updating screenshots... View workflow run

github-actions · 2026-06-01T23:49:56Z

🎉 Successfully updated and committed screenshots!

…ield component

egaitan-godaddy · 2026-06-02T00:04:48Z

/update-screenshots

github-actions · 2026-06-02T00:05:00Z

📸 Updating screenshots... View workflow run

github-actions · 2026-06-02T00:08:48Z

🎉 Successfully updated and committed screenshots!

Copilot

Pull request overview

Adds a new DateField component to @godaddy/antares (a segmented Year/Month/Day date input built on react-aria-components), along with supporting exports, docs, and tests. It also updates the shared internal FieldFrame styling to normalize font-related behavior across field-based inputs (DateField/TextField/NumberField).

Changes:

Introduces DateField component implementation, styles, Storybook stories, examples, and README docs.
Adds comprehensive browser/node/visual tests (plus SSR snapshots) for DateField.
Updates FieldFrame CSS (font inheritance/line-height) and wires up public exports + dependency on @internationalized/date.

Reviewed changes

Copilot reviewed 23 out of 45 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
packages/@godaddy/antares/package.json	Adds `@internationalized/date` dependency required for `CalendarDate` typing/usage.
packages/@godaddy/antares/index.ts	Exposes `DateField` (and `I18nProvider`) from the public API surface.
packages/@godaddy/antares/exports/DateField.ts	Adds subpath export for `DateField` (+ `I18nProvider`).
packages/@godaddy/antares/components/date-field/src/index.tsx	Implements `DateField` wrapper around RAC `DateField` using `FieldFrame`.
packages/@godaddy/antares/components/date-field/src/index.module.css	Adds DateField-specific layout/segment styling.
packages/@godaddy/antares/components/date-field/README.mdx	Documents DateField usage, date typing (`CalendarDate`), and i18n expectations.
packages/@godaddy/antares/components/date-field/date-field.stories.tsx	Adds Storybook stories for all examples + playground.
packages/@godaddy/antares/components/date-field/examples/basic.tsx	Basic usage example.
packages/@godaddy/antares/components/date-field/examples/controlled.tsx	Controlled `value/onChange` example.
packages/@godaddy/antares/components/date-field/examples/date-field-playground.tsx	Storybook playground wrapper and args surface.
packages/@godaddy/antares/components/date-field/examples/disabled-required-readonly.tsx	Demonstrates disabled/required/read-only states.
packages/@godaddy/antares/components/date-field/examples/form.tsx	Demonstrates native form submission behavior via `name`.
packages/@godaddy/antares/components/date-field/examples/min-max.tsx	Demonstrates `minValue/maxValue` bounds.
packages/@godaddy/antares/components/date-field/examples/with-default-value.tsx	Demonstrates `defaultValue` initialization.
packages/@godaddy/antares/components/date-field/examples/with-description.tsx	Demonstrates `description` helper text.
packages/@godaddy/antares/components/date-field/examples/with-error.tsx	Demonstrates `isInvalid` + `errorMessage`.
packages/@godaddy/antares/components/date-field/examples/with-i18n.tsx	Demonstrates `I18nProvider` locale overrides (LTR + RTL).
packages/@godaddy/antares/components/date-field/test/date-field.browser.test.tsx	Adds interaction/state assertions for browser runtime.
packages/@godaddy/antares/components/date-field/test/date-field.node.test.tsx	Adds SSR snapshot/assertion coverage for examples.
packages/@godaddy/antares/components/date-field/test/date-field.visual.test.tsx	Adds screenshot coverage across example variants.
packages/@godaddy/antares/components/date-field/test/snapshots/date-field.node.test.tsx.snap	Stores SSR snapshots for DateField examples.
packages/@godaddy/antares/components/_internal/field-frame/src/index.module.css	Adjusts shared field frame font/line-height handling.
.changeset/date-field-component.md	Publishes `@godaddy/antares` minor release notes for DateField.

… locale support for tests

Copilot

Pull request overview

Copilot reviewed 24 out of 46 changed files in this pull request and generated 3 comments.

…us styles

Copilot

Pull request overview

Copilot reviewed 25 out of 47 changed files in this pull request and generated 3 comments.

Copilot

Pull request overview

Copilot reviewed 26 out of 48 changed files in this pull request and generated 2 comments.

rmojica-godaddy · 2026-06-11T20:18:59Z

 }
-
-input.input {
-  padding-block: var(--sp-md);


There is a small difference in the figma design. In padding top/bottom for TextArea is density * 1 and for TextField it is density * 2

rmojica-godaddy · 2026-06-11T20:29:22Z

+        >
+          {(segment) => <RACDateSegment segment={segment} className={styles.segment} />}


To be consisten with other components, use a named function instead please

rmojica-godaddy · 2026-06-11T20:40:23Z

+  placeholderValue?: CalendarDate;
+
+  /** Helper text shown below the frame. */
+  description?: string;


If I'm not wrong yo don't need to re-define again description, errormessage and lable because (as far as I know) the Docs Site would autoextract them from the inherited interface

rmojica-godaddy · 2026-06-11T20:42:48Z

+
+export const Props = getComponentDocs(DateField);
+
+export const Default = getStory(DateFieldBasicExample);


In other stories file, this is named Basic

Basic = getStory(DateFieldBasicExample)

rmojica-godaddy · 2026-06-11T20:43:37Z

+
+      it('renders with-error example', function withError() {
+        const result = renderToString(withTestLocale(<DateFieldWithErrorExample />));
+        expect(result).toContain('data-invalid');


in my opinion all node test should have toMatchSnapshot

rmojica-godaddy · 2026-06-11T20:44:33Z

+        gap="sm"
+      >
+        <Flex
+          as={RACDateInput}


I think it would be useful to have the reference for this field. Can you please ad forwardRef

rmojica-godaddy · 2026-06-11T20:45:30Z

+  }
+
+  &[data-invalid] {
+    color: var(--color-feedback-critical-strong, #ae1302);


here you are missing the legacy token

rmojica-godaddy · 2026-06-11T20:47:22Z

    "@bento/icon": "^0.2.0",
    "@bento/svg-parser": "^0.1.1",
    "@bento/use-data-attributes": "^0.1.1",
+    "@internationalized/date": "^3.12.2",


you are missing the package-lock.json changes associated to this change

feat(antares): add DateField component

693df86

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

egaitan-godaddy and others added 11 commits May 29, 2026 18:26

chore: add changeset for DateField

f17bc91

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

refactor(antares): use Flex for DateField input layout

c2dc804

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

docs(antares): trim DateField docstrings

4e4e678

Drop verbose @example/@see blocks on each prop and tighten the component summary, matching the TextField docstring style.

chore: stop tracking date-components plan and PDR

a82bb1e

Merge remote-tracking branch 'origin/main' into feat/date-field

8366787

docs(antares): clarify DateField scope and simplify Working-with-dates

5d7efea

docs(antares): make DateField the canonical Working-with-dates home

8cac9bc

refactor(antares): trim DateField CSS — drop redundant cursors and --…

8d4c966

…fg-secondary

feat(antares): re-export I18nProvider from DateField

a9f01d9

docs(antares): clarify date string format in DateField documentation

b0ed64e

style(field-frame): fix typography and layout

ad658b6

test: update visual regression screenshots

f252ff4

test(date-field): enhance visual tests with additional examples for D…

aaab835

…ateField component

test: update visual regression screenshots

9eef7e0

egaitan-godaddy added 2 commits June 1, 2026 19:03

feat(date-field): add i18n example and update documentation for DateF…

df5198f

…ield component

Merge branch 'main' into feat/date-field

4dab7d6

test: update visual regression screenshots

255da49

egaitan-godaddy marked this pull request as ready for review June 2, 2026 00:11

egaitan-godaddy requested a review from a team as a code owner June 2, 2026 00:11

Copilot AI review requested due to automatic review settings June 2, 2026 00:11

Copilot started reviewing on behalf of egaitan-godaddy June 2, 2026 00:12 View session

Copilot AI reviewed Jun 2, 2026

View reviewed changes

feat(date-field): enhance DateField component with extended props and…

dc23a05

… locale support for tests

egaitan-godaddy force-pushed the feat/date-field branch from ccfe3a4 to dc23a05 Compare June 2, 2026 00:39

egaitan-godaddy requested a review from Copilot June 2, 2026 00:50

Copilot started reviewing on behalf of egaitan-godaddy June 2, 2026 00:51 View session

Copilot AI reviewed Jun 2, 2026

View reviewed changes

Comment thread packages/@godaddy/antares/components/date-field/src/index.tsx

Comment thread packages/@godaddy/antares/components/date-field/src/index.module.css

Comment thread packages/@godaddy/antares/components/date-field/src/index.tsx Outdated

refactor(antares): separate I18nProvider export and enhance field foc…

5d4d14c

…us styles

egaitan-godaddy requested a review from Copilot June 2, 2026 01:15

Copilot started reviewing on behalf of egaitan-godaddy June 2, 2026 01:15 View session

Copilot AI reviewed Jun 2, 2026

View reviewed changes

Comment thread packages/@godaddy/antares/components/date-field/src/index.tsx

Comment thread packages/@godaddy/antares/components/date-field/README.mdx

Comment thread packages/@godaddy/antares/components/_internal/field-frame/src/index.module.css Outdated

fix(field-frame): update group context handling

8ad7bdc

egaitan-godaddy requested a review from Copilot June 2, 2026 02:11

Copilot started reviewing on behalf of egaitan-godaddy June 2, 2026 02:11 View session

Copilot AI reviewed Jun 2, 2026

View reviewed changes

Comment thread packages/@godaddy/antares/components/date-field/README.mdx

Comment thread .changeset/date-field-component.md Outdated

feat(antares): changeset description

afd3583

rmojica-godaddy reviewed Jun 11, 2026

View reviewed changes

		>
		{(segment) => <RACDateSegment segment={segment} className={styles.segment} />}


		export const Props = getComponentDocs(DateField);

		export const Default = getStory(DateFieldBasicExample);

Conversation

egaitan-godaddy commented May 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented May 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented May 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Storybook Preview

Uh oh!

github-actions Bot commented May 29, 2026

Docs Site Preview

Uh oh!

egaitan-godaddy commented Jun 1, 2026

Uh oh!

github-actions Bot commented Jun 1, 2026

📸 Updating screenshots... View workflow run

Uh oh!

github-actions Bot commented Jun 1, 2026

🎉 Successfully updated and committed screenshots!

Uh oh!

egaitan-godaddy commented Jun 1, 2026

Uh oh!

github-actions Bot commented Jun 1, 2026

📸 Updating screenshots... View workflow run

Uh oh!

github-actions Bot commented Jun 1, 2026

🎉 Successfully updated and committed screenshots!

Uh oh!

egaitan-godaddy commented Jun 2, 2026

Uh oh!

github-actions Bot commented Jun 2, 2026

📸 Updating screenshots... View workflow run

Uh oh!

github-actions Bot commented Jun 2, 2026

🎉 Successfully updated and committed screenshots!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

egaitan-godaddy commented May 29, 2026 •

edited

Loading

changeset-bot Bot commented May 29, 2026 •

edited

Loading

github-actions Bot commented May 29, 2026 •

edited

Loading