Ajr datepicker polish

[aresnik11]

Overview

PR Checklist

• Related to designs:
• Related to JIRA ticket: [ABC-123]
• Version plan added/updated (or not needed)
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

1. Go to story X
2. Do something
3. Do that something in dark mode
4. Check it with VO
5. Finish and do a celebratory dance

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 444cea1

---

☁️ Nx Cloud last updated this comment at 2026-05-27 19:40:06 UTC

[codecademydev]

📬 Published Alpha Packages:

Package	Version	npm	Diff
@codecademy/gamut	68.6.3-alpha.57e1cd.0	npm	diff
@codecademy/gamut-icons	9.57.6-alpha.57e1cd.0	npm	diff
@codecademy/gamut-illustrations	0.58.12-alpha.57e1cd.0	npm	diff
@codecademy/gamut-kit	0.6.601-alpha.57e1cd.0	npm	diff
@codecademy/gamut-patterns	0.10.31-alpha.57e1cd.0	npm	diff
@codecademy/gamut-styles	18.0.1-alpha.57e1cd.0	npm	diff
@codecademy/gamut-tests	6.0.2-alpha.57e1cd.0	npm	diff
@codecademy/variance	0.26.2-alpha.57e1cd.0	npm	diff
eslint-plugin-gamut	2.4.4-alpha.57e1cd.0	npm	diff

[codecov]

❌ 2 Tests Failed:

Tests completed	Failed	Passed	Skipped
1149	2	1147	0

View the top 2 failed test(s) by shortest run time

DatePicker inside a form in range mode, has two named hidden fields for start and end

Stack Traces | 0.027s run time

Error: expect(received).not.toBe(expected) // Object.is equality

Expected: not "datePickerInput"
    at Object.<anonymous> (.../DatePicker/__tests__/DatePicker.test.tsx:326:28)
    at Promise.then.completed (.../jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../jest-circus/build/run.js:316:40)
    at async _runTest (.../jest-circus/build/run.js:252:3)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:126:9)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:121:9)
    at async run (.../jest-circus/build/run.js:71:3)
    at async runAndTransformResultsToJestFormat (.../build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at async jestAdapter (.../build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at async runTestInternal (.../jest-runner/build/runTest.js:367:16)
    at async runTest (.../jest-runner/build/runTest.js:444:34)

DatePicker associates the field label with the segment shell via label `for` and shell `id` (DatePickerInput)

Stack Traces | 0.028s run time

Error: expect(received).toBeTruthy()

Received: null
    at Object.<anonymous> (.../DatePicker/__tests__/DatePicker.test.tsx:158:21)
    at Promise.then.completed (.../jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../jest-circus/build/run.js:316:40)
    at runNextTicks (node:internal/process/task_queues:65:5)
    at listOnTimeout (node:internal/timers:555:9)
    at processTimers (node:internal/timers:529:7)
    at async _runTest (.../jest-circus/build/run.js:252:3)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:126:9)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:121:9)
    at async run (.../jest-circus/build/run.js:71:3)
    at async runAndTransformResultsToJestFormat (.../build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at async jestAdapter (.../build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at async runTestInternal (.../jest-runner/build/runTest.js:367:16)
    at async runTest (.../jest-runner/build/runTest.js:444:34)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

[github-actions]

🚀 Styleguide deploy preview ready!

Preview URL: https://6a17496cea9c5c19e8b875f1--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/6a17496cea9c5c19e8b875f1