feat: update date field to v4 design (#16430)

Refactors date field UI to match V4 designs.

---------

Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com>

Author: JessRynkar

.claude/skills/ui4-review/SKILL.md

@@ -185,6 +185,65 @@ These must be replaced with new tokens.
 
 ---
 
+### SCSS Patterns in Native CSS (CRITICAL)
+
+Native CSS nesting does NOT support all SCSS patterns. Flag these:
+
+**Bad — `&--modifier` for BEM modifiers:**
+
+```css
+.react-datepicker {
+  /* This does NOT work in native CSS */
+  &--time-only {
+    border: none;
+  }
+}
+```
+
+In SCSS, `&--time-only` expands to `.react-datepicker--time-only`. In native CSS, `&` represents the _entire selector list_, not a string to concatenate.
+
+**Good — Use flat selectors outside the block:**
+
+```css
+.react-datepicker {
+  /* base styles */
+}
+
+.react-datepicker--time-only {
+  border: none;
+}
+```
+
+**Also bad — `&__element` for BEM elements:**
+
+```css
+.block {
+  &__element {
+    /* Does NOT work */
+  }
+}
+```
+
+**Detection pattern:** Look for `&--` or `&__` inside CSS blocks. These are SCSS-only patterns.
+
+**Exception:** `&:pseudo` and `& .child` work fine in native CSS:
+
+```css
+.button {
+  &:hover {
+    /* OK */
+  }
+  &:focus {
+    /* OK */
+  }
+  & .icon {
+    /* OK */
+  }
+}
+```
+
+---
+
 ## Behavior: AUTO-FIX
 
 **Do NOT just report violations. FIX THEM.**

packages/ui/src/elements/DatePicker/DatePicker.tsx

@@ -11,9 +11,8 @@ const ReactDatePicker =
 import type { Props } from './types.js'
 
 import { CalendarIcon } from '../../icons/Calendar/index.js'
-import { XIcon } from '../../icons/X/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
-import './index.scss'
+import './index.css'
 import { getFormattedLocale } from './getFormattedLocale.js'
 
 const baseClass = 'date-time-picker'
@@ -97,6 +96,7 @@ const DatePicker: React.FC<Props> = (props) => {
     showMonthYearPicker: pickerAppearance === 'monthOnly',
     showPopperArrow: false,
     showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',
+    showTimeSelectOnly: pickerAppearance === 'timeOnly',
     timeFormat,
     timeIntervals,
     ...(overrides as Extract<
@@ -124,25 +124,15 @@ const DatePicker: React.FC<Props> = (props) => {
 
   return (
     <div className={classes} id={id}>
-      <div className={`${baseClass}__icon-wrap`}>
-        {dateTimePickerProps.selected && (
-          <button
-            className={`${baseClass}__clear-button`}
-            onClick={() => onChange(null)}
-            type="button"
-          >
-            <XIcon />
-          </button>
-        )}
-        <CalendarIcon />
-      </div>
       <div className={`${baseClass}__input-wrapper`}>
         <ReactDatePicker
           {...dateTimePickerProps}
           dropdownMode="select"
           showMonthDropdown
           showYearDropdown
         />
+        {/* TODO: update icon */}
+        <CalendarIcon />
       </div>
     </div>
   )