feat(ui-date-input): migrate DateInput and DateInput2

Author: HerrTopi

cypress/component/DateInput.cy.tsx

@@ -231,6 +231,18 @@ type: embed
 
 ```
 
+### DateInput / DateInput2
+
+**Short version:** Use [`DateInput`](/v11_7/DateInput). Forget `DateInput2` exists.
+
+**The full story:** The original `DateInput` had a complex API — you had to manually wire up calendar navigation, day rendering, and date parsing. We wanted to simplify it but couldn't without breaking changes, so we released `DateInput2` as a drop-in alternative with a much simpler API.
+
+Now that InstUI supports component versioning, we no longer need the separate `DateInput2` name. Instead:
+
+- **[DateInput v2](/v11_7/DateInput)** (from v11.7) — the recommended version. Same component that was previously `DateInput2`, same API. **This is the only version that will receive the new theming.**
+- **[DateInput v1](/v11_6/DateInput)** (up to v11.6) — the original component. **Deprecated.** Does not support the new theming system.
+- **[DateInput2 v1](/v11_6/DateInput2)** — **Deprecated.** Will not get a v2 and does not support the new theming system. If you're using `DateInput2`, switch your import to `DateInput` (from v11.7) — the API is identical, no other code changes needed.
+
 ### ColorPicker
 
 ```js

cypress/component/DateInput2.cy.tsx

@@ -39,7 +39,7 @@ import { Playground } from './Playground'
 import { compileAndRenderExample } from './compileAndRenderExample'
 import { Heading } from './Heading'
 import { Link } from './Link'
-import { navigateTo } from './navigationUtils'
+import { navigateTo, MINOR_VERSION_REGEX } from './navigationUtils'
 
 type CodeData = {
   code: string
@@ -286,7 +286,21 @@ const renderer = (title: string) => ({
           return
         }
         e.preventDefault()
-        navigateTo(href)
+
+        // Markdown links can point to a specific version of a component,
+        // e.g. href="/v11_7/DateInput". navigateTo() expects the page
+        // name and version as separate arguments, so we need to split
+        // them apart. Plain links like "DateInput" are passed through
+        // as-is.
+        const path = href.replace(/^\/+/, '') // "/v11_7/DateInput" -> "v11_7/DateInput"
+        const [first, second] = path.split('/')
+        const isVersionedLink = MINOR_VERSION_REGEX.test(first) && second
+
+        if (isVersionedLink) {
+          navigateTo(second, { minorVersion: first })
+        } else {
+          navigateTo(href)
+        }
       }}
     >
       {text}

docs/guides/upgrade-guide.md

@@ -10,7 +10,8 @@ A date input component.
 
 The `ui-date-input` package contains the following:
 
-- [DateInput](DateInput)
+- [DateInput](DateInput) — the recommended date input component
+- [DateInput2](DateInput2) — deprecated, use `DateInput` instead
 
 ### Installation
 

packages/__docs__/src/compileMarkdown.tsx

@@ -2,7 +2,15 @@
 describes: DateInput
 ---
 
-> _Note:_ we recommend to update to the new [`DateInput2`](/#DateInput2) which is easier to configure for developers, has a better UX, better accessibility features and a year picker. `DateInput` will be deprecated in the future.
+> **Deprecated:** This version of `DateInput` is deprecated. Please use the latest version of [`DateInput`](/v11_7/DateInput) which offers easier configuration, better UX, improved accessibility, and a year picker.
+
+### DateInput versions at a glance
+
+| Version                                    | API                          | Theming          | Accessibility   | Status          |
+| :----------------------------------------- | :--------------------------- | :--------------- | :-------------- | :-------------- |
+| [v11.6 DateInput](/v11_6/DateInput) (this) | Old (manual calendar wiring) | Old theming only | Has a11y issues | **Deprecated**  |
+| [v11.6 DateInput2](/v11_6/DateInput2)      | New (simple)                 | Old theming only | Good            | **Deprecated**  |
+| [v11.7 DateInput](/v11_7/DateInput)        | New (simple)                 | New theming      | Good            | **Recommended** |
 
 The `DateInput` component provides a visual interface for inputting date data.