feat(date-time-field): TEDI-Ready DateTimeField component #554

src/community/components/form/pickers/calendar/calendar.stories.tsx

@@ -6,6 +6,11 @@ import Calendar, { CalendarStatus } from './calendar';
 const meta: Meta<typeof Calendar> = {
   component: Calendar,
   title: 'Community/Form/Pickers/Calendar',
+  parameters: {
+    status: {
+      type: ['deprecated', 'ExistsInTediReady'],
+    },
+  },
 };
 
 export default meta;

src/community/components/form/pickers/calendar/calendar.tsx

@@ -8,6 +8,9 @@ import styles from './calendar.module.scss';
 export type CalendarValue = Dayjs | null;
 export type CalendarStatus = 'error' | 'success' | 'inactive';
 
+/**
+ * @deprecated Use `Calendar` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface CalendarProps {
   /**
    * Currently selected value. Accepts a dayjs date object.
@@ -94,6 +97,9 @@ export interface CalendarProps {
   shouldShowStatusOnDate?: (day: CalendarValue) => CalendarStatus | undefined;
 }
 
+/**
+ * @deprecated Use `Calendar` from `@tedi-design-system/react/tedi` instead.
+ */
 export const Calendar = (props: CalendarProps): JSX.Element => {
   const {
     value,

src/community/components/form/pickers/datepicker/datepicker.stories.tsx

@@ -9,6 +9,11 @@ import DatePicker, { DatePickerProps } from './datepicker';
 const meta: Meta<typeof DatePicker> = {
   component: DatePicker,
   title: 'Community/Form/Pickers/DatePicker',
+  parameters: {
+    status: {
+      type: ['deprecated', 'ExistsInTediReady'],
+    },
+  },
 };
 
 export default meta;

src/community/components/form/pickers/datepicker/datepicker.tsx

@@ -8,6 +8,9 @@ import MuiInputTransition from '../mui-input-transition/mui-input-transition';
 
 export type DatepickerValue = Dayjs | null;
 
+/**
+ * @deprecated Use `DateField` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface DatePickerProps extends Omit<TextFieldProps, 'defaultValue' | 'value' | 'onChange'> {
   /**
    * Datepicker initial value. Accepts a dayjs date object.
@@ -92,6 +95,9 @@ export interface DatePickerProps extends Omit<TextFieldProps, 'defaultValue' | '
   onClose?: () => void;
 }
 
+/**
+ * @deprecated Use `DateField` from `@tedi-design-system/react/tedi` instead.
+ */
 export const DatePicker = (props: DatePickerProps): JSX.Element => {
   const {
     value,

src/community/components/form/pickers/datetimepicker/datetimepicker.stories.tsx

@@ -9,6 +9,11 @@ import DateTimePicker, { DateTimePickerProps } from './datetimepicker';
 const meta: Meta<typeof DateTimePicker> = {
   component: DateTimePicker,
   title: 'Community/Form/Pickers/DateTimePicker',
+  parameters: {
+    status: {
+      type: ['deprecated', 'ExistsInTediReady'],
+    },
+  },
 };
 
 export default meta;

src/community/components/form/pickers/datetimepicker/datetimepicker.tsx

@@ -8,6 +8,9 @@ import MuiInputTransition from '../mui-input-transition/mui-input-transition';
 
 export type DateTimepickerValue = Dayjs | null;
 
+/**
+ * @deprecated Use `DateTimeField` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface DateTimePickerProps extends Omit<TextFieldProps, 'defaultValue' | 'value' | 'onChange'> {
   /**
    * DateTimepicker initial value. Accepts a dayjs date object.
@@ -131,6 +134,9 @@ export interface DateTimePickerProps extends Omit<TextFieldProps, 'defaultValue'
   onClose?: () => void;
 }
 
+/**
+ * @deprecated Use `DateTimeField` from `@tedi-design-system/react/tedi` instead.
+ */
 export const DateTimePicker = (props: DateTimePickerProps): JSX.Element => {
   const {
     value,

src/community/components/form/pickers/timepicker/timepicker.stories.tsx

@@ -9,6 +9,11 @@ import TimePicker, { TimePickerProps } from './timepicker';
 const meta: Meta<typeof TimePicker> = {
   component: TimePicker,
   title: 'Community/Form/Pickers/TimePicker',
+  parameters: {
+    status: {
+      type: ['deprecated', 'ExistsInTediReady'],
+    },
+  },
 };
 
 export default meta;

src/community/components/form/pickers/timepicker/timepicker.tsx

@@ -8,6 +8,9 @@ import MuiInputTransition from '../mui-input-transition/mui-input-transition';
 
 export type TimePickerValue = Dayjs | null;
 
+/**
+ * @deprecated Use `TimeField` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface TimePickerProps extends Omit<TextFieldProps, 'defaultValue' | 'value' | 'onChange'> {
   /**
    * TimePicker initial value. Accepts a dayjs date object.
@@ -75,6 +78,9 @@ export interface TimePickerProps extends Omit<TextFieldProps, 'defaultValue' | '
   onClose?: () => void;
 }
 
+/**
+ * @deprecated Use `TimeField` from `@tedi-design-system/react/tedi` instead.
+ */
 export const TimePicker = (props: TimePickerProps): JSX.Element => {
   const {
     defaultValue,

src/tedi/components/content/calendar/calendar.module.scss

@@ -67,7 +67,8 @@
       all: unset;
       display: block;
       width: 100%;
-      height: 100%;
+      width: var(--form-calendar-date-width);
+      height: var(--form-calendar-date-width);
       overflow: hidden;
       font-size: var(--body-regular-size);
       font-weight: var(--tedi-weight-02);

src/tedi/components/form/_field-icon-button.scss

@@ -0,0 +1,93 @@
+// Shared icon-button states for picker-style form fields
+// (`DateField`, `TimeField`, `DateTimeField`).
+//
+// All three render a TextField with a trailing icon button that opens a
+// popover (calendar / time wheel / both). The icon button uses identical
+// hover, open (`aria-expanded='true'`) and disabled treatments — this
+// partial centralises the rules so cross-cutting tweaks (token swaps,
+// accessibility fixes, design-review touch-ups) only need to land once.
+//
+// **The textfield's own `:active` pseudo (mousedown press) is handled by
+// `textfield.module.scss` and inherits through to all three fields — it
+// does not belong here.**
+//
+// Usage (inside each field's `*__textfield` block):
+//
+// ```scss
+// @use '../field-icon-button' as field-icon-button;
+//
+// .tedi-foo-field__textfield {
+//   @include field-icon-button.states;
+//
+//   &--disabled {
+//     @include field-icon-button.disabled;
+//   }
+//
+//   &.tedi-foo-field__icon--disabled {
+//     @include field-icon-button.icon-only-disabled;
+//   }
+// }
+// ```
+//
+// The selector `button:not([data-name='closing-button']):last-child`
+// targets the picker-trigger button while explicitly skipping the clear
+// ("closing") button — that one has its own hover treatment from
+// `<ClosingButton>` and shouldn't pick up the picker icon's hover bg.
+
+@mixin states {
+  button:not([data-name='closing-button']):last-child {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--button-xs-icon-size);
+    min-height: var(--form-field-button-height-sm);
+    max-height: var(--form-field-button-height-sm);
+    border-radius: var(--button-radius-sm);
+
+    > span {
+      color: var(--button-main-neutral-text-default);
+    }
+
+    &:hover {
+      background-color: var(--form-datepicker-date-hover);
+    }
+  }
+
+  // Open-popover state: the textfield root carries `aria-expanded='true'`
+  // while the picker is mounted. Icon button takes the active background
+  // tint and active text colour to mirror the open-dropdown affordance.
+  &[aria-expanded='true'] button:not([data-name='closing-button']):last-child {
+    background-color: var(--form-datepicker-date-hover);
+
+    > span {
+      color: var(--button-main-neutral-text-active);
+    }
+  }
+}
+
+// Fully-disabled field — desaturates the icon and suppresses the hover bg.
+// Applied alongside the field's own `*--disabled` modifier rule.
+@mixin disabled {
+  button:not([data-name='closing-button']):last-child {
+    > span {
+      color: var(--button-main-disabled-general-text);
+    }
+
+    &:hover {
+      background: none;
+    }
+  }
+}
+
+// Icon-only disabled — the input itself stays editable but the picker is
+// unavailable (e.g. `readOnly` or `showPicker={false}`). Suppresses the
+// hover/focus background so the icon doesn't pretend to be a trigger.
+@mixin icon-only-disabled {
+  button:not([data-name='closing-button']):last-child {
+    &:hover,
+    &:focus {
+      cursor: auto;
+      background: none;
+    }
+  }
+}