Add Missing Core Material 3 Components (Date Picker, Time Picker, SearchField) #41
Description
Feature Request: Add Missing Core Material 3 Components (Date Picker, Time Picker, SearchField)
Is your feature request related to a problem? Please describe.
Currently, the M3e library is missing several essential Material Design 3 (MD3) components that are critical for building complex forms and data-driven applications. Specifically, the absence of a native Date Picker, Time Picker, and SearchField forces developers to use native HTML inputs or heavy third-party React libraries, which breaks the visual consistency and design language of the M3e ecosystem.
Describe the solution you'd like
I would like to see the following components added to the library, following the official Material 3 specifications:
- Date Picker: A modal or docked dialog for selecting dates/ranges.
- Time Picker: An interface for selecting time (dial or input-based).
- SearchField: A specialized text field with leading search icons, trailing clear icons, and optimized interaction patterns for search.
Use Case / Motivation
These components are fundamental for:
- Booking/Scheduling apps: Where users need to select dates and times within a Material 3 UI.
- Data Dashboards: Where filtering data via date ranges or search queries is a primary action.
- Consistency: Ensuring that all input elements share the same elevation, typography, and animation logic as the rest of the M3e library without relying on external React wrappers.
Proposed API / Usage
Here is how I would expect to use these components within a Next.js (React) component:
'use client'; // Required for interactive M3e web components in Next.js App Router
import { useState } from 'react';
export default function BookingForm() {
const [selectedDate, setSelectedDate] = useState('');
return (
<div className="flex flex-col gap-4 p-4">
<M3eFormField>
{/* Proposed Date Picker */}
<M3eDateField
label="Select Date"
value={selectedDate}
mode="single"
onDateChange={(e) => setSelectedDate(e.detail.value)}
></M3eDateField >
{/* Proposed Time Picker */}
<M3eTimeField
label="Appointment Time"
format="24h">
</M3eTimeField>
{/* Proposed SearchField */}
<M3eSearchField
placeholder="Search records..."
clearable>
</M3eSearchField>
</div>
);
}