feat(date-time-picker-web): enhance DateTimePicker preview and container layout

Author: samuelreichert

packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx

@@ -1,9 +1,44 @@
 import { ReactElement } from "react";
 import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps";
-import { DatePicker } from "./components/DatePicker";
 import "./ui/DateTimePicker.scss";
 
 export function preview(props: DateTimePickerPreviewProps): ReactElement {
-    console.info("Rendering DateTimePicker preview with props:", props);
-    return <DatePicker label={props.label} />;
+    const label = props.showLabel ? props.label : null;
+    const portalId = `datepicker_` + Math.random();
+
+    return (
+        <div className="widget-datetimepicker">
+            {label ? (
+                <div className="widget-datetimepicker-label-wrapper">
+                    <div id={portalId} />
+
+                    <label className="widget-datetimepicker-label" id="datepicker-label">
+                        {label}
+                    </label>
+                </div>
+            ) : (
+                <span className="sr-only" id="datepicker-label">
+                    Date picker
+                </span>
+            )}
+
+            <div className="widget-datetimepicker-wrapper">
+                <div className="react-datepicker-wrapper">
+                    <div className="react-datepicker__input-container">
+                        <input
+                            className="widget-datetimepicker-input react-datepicker-ignore-onclickoutside"
+                            placeholder={props.placeholder ?? ""}
+                            readOnly
+                            type="text"
+                            value={props.dateAttribute ? `[${props.dateAttribute}]` : "[Date time picker]"}
+                        />
+                    </div>
+                </div>
+
+                <button aria-label="Show calendar" className="widget-datetimepicker-input-button" type="button">
+                    <span className="mx-icon-filled mx-icon-calendar" />
+                </button>
+            </div>
+        </div>
+    );
 }

packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx

@@ -35,19 +35,19 @@ export function DateTimePickerContainer(props: DateTimePickerContainerProps) {
             data-focusindex={props.tabIndex}
             style={props.style}
         >
-            <div className="widget-datetimepicker-label-wrapper">
-                <div id={portalId} />
+            {label ? (
+                <div className="widget-datetimepicker-label-wrapper">
+                    <div id={portalId} />
 
-                {label ? (
                     <label className="widget-datetimepicker-label" id={pickerProps.ariaLabelledBy}>
                         {label}
                     </label>
-                ) : (
-                    <span className="sr-only" id={pickerProps.ariaLabelledBy}>
-                        Date picker
-                    </span>
-                )}
-            </div>
+                </div>
+            ) : (
+                <span className="sr-only" id={pickerProps.ariaLabelledBy}>
+                    Date picker
+                </span>
+            )}
 
             <div className="widget-datetimepicker-wrapper">
                 <ReactDatePicker {...pickerProps} ref={controller.pickerRef} />

packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.scss

@@ -22,8 +22,7 @@
     &-wrapper {
         align-items: center;
         display: flex;
-        flex: 0 0 75%;
-        max-width: 75%;
+        flex: 1;
         padding: 0 16px;
     }