refactor(date-time-picker-web): remove hardcodded label from DateTimePicker and update styles

Author: samuelreichert

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

@@ -3,42 +3,23 @@ import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps";
 import "./ui/DateTimePicker.scss";
 
 export function preview(props: DateTimePickerPreviewProps): ReactElement {
-    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 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>
-
-                <button aria-label="Show calendar" className="widget-datetimepicker-input-button" type="button">
-                    <span className="mx-icon-filled mx-icon-calendar" />
-                </button>
             </div>
+
+            <button aria-label="Show calendar" className="widget-datetimepicker-input-button" type="button">
+                <span className="mx-icon-filled mx-icon-calendar" />
+            </button>
         </div>
     );
 }

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

@@ -1,4 +1,3 @@
-import classNames from "classnames";
 import ReactDatePicker from "react-datepicker";
 import { DateTimePickerContainerProps } from "typings/DateTimePickerProps";
 import { useController } from "../hooks/useController";
@@ -12,15 +11,12 @@ export function DateTimePickerContainer(props: DateTimePickerContainerProps) {
         onChange: props.onChange
     });
     const pickerProps = useSetupProps(props, controller);
-    const label = props.showLabel && props.label?.status === "available" ? props.label.value : null;
     const portalId = `datepicker_` + Math.random();
 
     // still have to add validation for max and min time and validation message
     console.info("unused props", {
         name: props.name,
-        editabilityCondition: props.editabilityCondition,
-        readOnlyStyle: props.readOnlyStyle,
-        visible: props.visible,
+        id: props.id,
         validationType: props.validationType,
         customValidation: props.customValidation,
         validationMessage: props.validationMessage
@@ -30,42 +26,22 @@ export function DateTimePickerContainer(props: DateTimePickerContainerProps) {
         props.validationMessage?.status === "available" && props.validationMessage.value.length > 0;
 
     return (
-        <div
-            className={classNames("widget-datetimepicker", props.class)}
-            data-focusindex={props.tabIndex}
-            style={props.style}
-        >
-            {label ? (
-                <div className="widget-datetimepicker-label-wrapper">
-                    <div id={portalId} />
+        <div className="widget-datetimepicker" data-focusindex={props.tabIndex}>
+            <ReactDatePicker {...pickerProps} ref={controller.pickerRef} />
 
-                    <label className="widget-datetimepicker-label" id={pickerProps.ariaLabelledBy}>
-                        {label}
-                    </label>
-                </div>
-            ) : (
-                <span className="sr-only" id={pickerProps.ariaLabelledBy}>
-                    Date picker
-                </span>
-            )}
-
-            <div className="widget-datetimepicker-wrapper">
-                <ReactDatePicker {...pickerProps} ref={controller.pickerRef} />
-
-                <button
-                    aria-controls={portalId}
-                    aria-expanded={controller.expanded}
-                    aria-haspopup
-                    aria-label="Show calendar"
-                    className="widget-datetimepicker-input-button"
-                    onKeyDown={controller.handleButtonKeyDown}
-                    onMouseDown={controller.handleButtonMouseDown}
-                    type="button"
-                >
-                    <span className="mx-icon-filled mx-icon-calendar" />
-                </button>
-                {hasValidationMessage && <div role="alert">{props.validationMessage?.value}</div>}
-            </div>
+            <button
+                aria-controls={portalId}
+                aria-expanded={controller.expanded}
+                aria-haspopup
+                aria-label="Show calendar"
+                className="widget-datetimepicker-input-button"
+                onKeyDown={controller.handleButtonKeyDown}
+                onMouseDown={controller.handleButtonMouseDown}
+                type="button"
+            >
+                <span className="mx-icon-filled mx-icon-calendar" />
+            </button>
+            {hasValidationMessage && <div role="alert">{props.validationMessage?.value}</div>}
         </div>
     );
 }

packages/pluggableWidgets/date-time-picker-web/src/hooks/useSetupProps.ts

@@ -16,7 +16,7 @@ export function useSetupProps(
         dateTimeFormat,
         placeholder,
         dateAttribute,
-        editable,
+        endDateAttribute,
         ariaRequired,
         onEnter,
         onLeave
@@ -34,7 +34,7 @@ export function useSetupProps(
         timeFormat,
         dateTimeFormat,
         dateAttribute.value ?? new Date(),
-        null,
+        endDateAttribute?.value ?? null,
         locale
     );
 
@@ -59,6 +59,8 @@ export function useSetupProps(
         ]
     };
 
+    const disabled = dateAttribute.readOnly || false;
+
     return {
         // Static props
         allowSameDay: false,
@@ -76,7 +78,7 @@ export function useSetupProps(
         // Base props
         ariaLabelledBy: `${id}-label`,
         ariaRequired: ariaRequired.toString(),
-        disabled: editable === "never",
+        disabled,
         locale: calendarLocale,
         placeholderText: placeholder?.status === "available" ? placeholder.value : "",
         tabIndex: tabIndex ?? 0,

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

@@ -2,29 +2,10 @@
     align-items: center;
     color: var(--font-color-default);
     display: flex;
+    flex: 1;
     font-size: var(--font-size-small);
-    margin: 0 -15px 16px -15px;
-
-    &-label-wrapper {
-        flex: 0 0 25%;
-        max-width: 25%;
-        padding: 0 16px;
-    }
-
-    &-label {
-        font-size: var(--font-size-default);
-        font-weight: 600;
-        text-align: right;
-        text-overflow: ellipsis;
-        width: 100%;
-    }
-
-    &-wrapper {
-        align-items: center;
-        display: flex;
-        flex: 1;
-        padding: 0 16px;
-    }
+    margin: 0 -15px;
+    padding: 0 16px;
 
     &-input {
         background-color: var(--bg-color-secondary);