Field title fixes (#1549)

* fix dropdown title * fix datetime label width * fix datetime width * update snaps
SenseNet · Oct 16, 2023 · 83d13f1 · 83d13f1
1 parent 9a6c73a
commit 83d13f1
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 1 deletion.
diff --git a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
@@ -88,6 +88,7 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
           <>
             {settings.DateTimeMode === DateTimeMode.Date ? (
               <MUIDatePicker
+                style={{ display: 'inherit' }}
                 value={value}
                 minDate={minDatePickerDate}
                 onChange={handleDateChange}
@@ -101,6 +102,7 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
               />
             ) : (
               <DateTimePicker
+                style={{ display: 'inherit' }}
                 minDate={minDatePickerDate}
                 value={value}
                 onChange={handleDateChange}
@@ -111,6 +113,7 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
                 InputLabelProps={{ shrink: true }}
                 required={settings.Compulsory}
                 format="yyyy MMMM dd hh:mm aaaa"
+                InputProps={{ readOnly: true, style: { minWidth: '200px' } }}
               />
             )}
             {!hideDescription && <FormHelperText>{settings.Description}</FormHelperText>}

diff --git a/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx b/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx
@@ -60,7 +60,9 @@ export const DropDownList: React.FC<ReactClientFieldSetting<ChoiceFieldSetting>>
           style={{ minWidth: '220px' }}
           required={props.settings.Compulsory}
           disabled={props.settings.ReadOnly}>
-          <InputLabel htmlFor={props.settings.Name}>{props.settings.DisplayName}</InputLabel>
+          <InputLabel htmlFor={props.settings.Name} shrink={true}>
+            {props.settings.DisplayName}
+          </InputLabel>
           <Select
             onChange={handleChange}
             inputProps={

diff --git a/packages/sn-controls-react/test/__snapshots__/date-picker.test.tsx.snap b/packages/sn-controls-react/test/__snapshots__/date-picker.test.tsx.snap
@@ -31,6 +31,14 @@ exports[`Date/Date time field control in edit/new view should set all the props
         "shrink": true,
       }
     }
+    InputProps={
+      Object {
+        "readOnly": true,
+        "style": Object {
+          "minWidth": "200px",
+        },
+      }
+    }
     allowKeyboardControl={true}
     ampm={true}
     disabled={true}
@@ -48,6 +56,11 @@ exports[`Date/Date time field control in edit/new view should set all the props
     orientation="portrait"
     required={true}
     showTabs={true}
+    style={
+      Object {
+        "display": "inherit",
+      }
+    }
     value="1912-04-15T02:10:00.000Z"
     views={
       Array [
@@ -89,6 +102,11 @@ exports[`Date/Date time field control in edit/new view should set all the props
     onChange={[Function]}
     openTo="date"
     required={true}
+    style={
+      Object {
+        "display": "inherit",
+      }
+    }
     value="1912-04-15T02:10:00.000Z"
     views={
       Array [

diff --git a/packages/sn-controls-react/test/__snapshots__/dropdown-list.test.tsx.snap b/packages/sn-controls-react/test/__snapshots__/dropdown-list.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`Drop down list field control in edit/new view should set all the props
 >
   <WithStyles(ForwardRef(InputLabel))
     htmlFor="VersioningMode"
+    shrink={true}
   >
     Versioning Mode For Current Content
   </WithStyles(ForwardRef(InputLabel))>