From e698fe7e1f4b7b3f5ce5dc49f83a49734ba5bdef Mon Sep 17 00:00:00 2001
From: VargaJoe <17780970+VargaJoe@users.noreply.github.com>
Date: Mon, 2 Oct 2023 13:50:58 +0200
Subject: [PATCH] Single column mui (#1520)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* single column mui

* set field full width everywhere

* fix reference width

* set datetime width

* date field auto width

* set switcher auto width

* set number auto width

* set dropdown auto width

* set allowed child types auto width

* short text label instead of placeholder

* align fixes

* unit test adjusts

* reference picker layout

* remove comments

* remove comments 2

---------

Co-authored-by: Ádám Hassan <hassana@sensenet.com>
---
 .../src/components/view-controls/common/styles.ts  |  2 +-
 .../src/fieldcontrols/allowed-child-types.tsx      |  3 +--
 .../src/fieldcontrols/date-picker.tsx              |  6 ++----
 .../src/fieldcontrols/dropdown-list.tsx            |  5 ++++-
 .../sn-controls-react/src/fieldcontrols/number.tsx |  4 ++--
 .../reference-grid/default-item-template.tsx       |  7 ++-----
 .../reference-grid/reference-grid.tsx              | 11 +++++++----
 .../src/fieldcontrols/short-text.tsx               |  2 +-
 .../src/fieldcontrols/switcher.tsx                 |  2 +-
 .../src/viewcontrols/browse-view.tsx               |  6 +++---
 .../src/viewcontrols/edit-view.tsx                 |  6 +++---
 .../test/__snapshots__/date-picker.test.tsx.snap   | 14 ++++++++++----
 .../test/__snapshots__/dropdown-list.test.tsx.snap |  6 +++++-
 .../test/__snapshots__/number.test.tsx.snap        |  8 ++++++--
 .../test/__snapshots__/short-text.test.tsx.snap    |  6 +++++-
 .../sn-controls-react/test/date-picker.test.tsx    |  2 --
 packages/sn-controls-react/test/number.test.tsx    |  2 +-
 .../sn-controls-react/test/reference-grid.test.tsx | 10 +++++++---
 .../sn-controls-react/test/short-text.test.tsx     |  1 -
 19 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/apps/sensenet/src/components/view-controls/common/styles.ts b/apps/sensenet/src/components/view-controls/common/styles.ts
index c00915f4e..cbb9f6f46 100644
--- a/apps/sensenet/src/components/view-controls/common/styles.ts
+++ b/apps/sensenet/src/components/view-controls/common/styles.ts
@@ -18,7 +18,7 @@ const useStyles = makeStyles(() => {
       position: 'relative',
     },
     field: {
-      width: '75%',
+      width: '88%',
       position: 'relative',
     },
     fieldFullWidth: {
diff --git a/packages/sn-controls-react/src/fieldcontrols/allowed-child-types.tsx b/packages/sn-controls-react/src/fieldcontrols/allowed-child-types.tsx
index f130c5d95..2e879f5c6 100644
--- a/packages/sn-controls-react/src/fieldcontrols/allowed-child-types.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/allowed-child-types.tsx
@@ -230,7 +230,7 @@ export const AllowedChildTypes: React.FC<ReactClientFieldSetting & { classes?: A
     case 'new':
       return (
         <ClickAwayListener onClickAway={handleClickAway}>
-          <div>
+          <div style={{ display: 'inline-block', minWidth: '350px' }}>
             <InputLabel shrink htmlFor={props.settings.Name} required={props.settings.Compulsory}>
               {props.settings.DisplayName}
             </InputLabel>
@@ -264,7 +264,6 @@ export const AllowedChildTypes: React.FC<ReactClientFieldSetting & { classes?: A
                   onClick={handleOnClick}
                   onChange={handleInputChange}
                   placeholder={INPUT_PLACEHOLDER}
-                  fullWidth={true}
                   value={inputValue}
                   className={classes.input}
                 />
diff --git a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
index 8b8ff3924..be702fec3 100644
--- a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
@@ -95,9 +95,8 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
                 label={settings.DisplayName}
                 id={settings.Name}
                 disabled={settings.ReadOnly}
-                placeholder={settings.DisplayName}
+                InputLabelProps={{ shrink: true }}
                 required={settings.Compulsory}
-                fullWidth={true}
                 format="yyyy MMMM dd"
               />
             ) : (
@@ -109,9 +108,8 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
                 name={settings.Name}
                 id={settings.Name}
                 disabled={settings.ReadOnly}
-                placeholder={settings.DisplayName}
+                InputLabelProps={{ shrink: true }}
                 required={settings.Compulsory}
-                fullWidth={true}
                 format="yyyy MMMM dd hh:mm aaaa"
               />
             )}
diff --git a/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx b/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx
index 9b5c51e4b..abf23f442 100644
--- a/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx
@@ -56,7 +56,10 @@ export const DropDownList: React.FC<ReactClientFieldSetting<ChoiceFieldSetting>>
     case 'edit':
     case 'new':
       return (
-        <FormControl fullWidth={true} required={props.settings.Compulsory} disabled={props.settings.ReadOnly}>
+        <FormControl
+          style={{ minWidth: '220px' }}
+          required={props.settings.Compulsory}
+          disabled={props.settings.ReadOnly}>
           <InputLabel htmlFor={props.settings.Name}>{props.settings.DisplayName}</InputLabel>
           <Select
             onChange={handleChange}
diff --git a/packages/sn-controls-react/src/fieldcontrols/number.tsx b/packages/sn-controls-react/src/fieldcontrols/number.tsx
index 885887ccc..e642d2162 100644
--- a/packages/sn-controls-react/src/fieldcontrols/number.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/number.tsx
@@ -65,7 +65,8 @@ export const NumberField: React.FC<ReactClientFieldSetting<NumberFieldSetting |
             value={value}
             required={props.settings.Compulsory}
             disabled={props.settings.ReadOnly}
-            placeholder={props.settings.DisplayName}
+            placeholder="0"
+            InputLabelProps={{ shrink: true }}
             InputProps={{
               startAdornment: defineCurrency(),
               endAdornment: props.settings.ShowAsPercentage ? <InputAdornment position="end">%</InputAdornment> : null,
@@ -76,7 +77,6 @@ export const NumberField: React.FC<ReactClientFieldSetting<NumberFieldSetting |
               min: props.settings.MinValue,
             }}
             id={props.settings.Name}
-            fullWidth={true}
             onChange={handleChange}
           />
           {!props.hideDescription && <FormHelperText>{props.settings.Description}</FormHelperText>}
diff --git a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx
index 59ea6241f..170bff9f5 100644
--- a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx
@@ -105,12 +105,9 @@ export const DefaultItemTemplate: React.FC<DefaultItemTemplateProps> = (props) =
   }
 
   return (
-    <ListItem key={content.Id} button={false}>
+    <ListItem style={props.actionName === 'browse' ? { padding: 0 } : undefined} key={content.Id} button={false}>
       {content.Type ? renderIcon(content) : null}
-      <ListItemText
-        primary={content.DisplayName}
-        style={content.Id < 0 ? { textAlign: 'right', paddingRight: 16 } : { textAlign: 'left' }}
-      />
+      <ListItemText primary={content.DisplayName} style={{ textAlign: 'left', paddingRight: 15 }} />
       {props.actionName && props.actionName !== 'browse' && !props.readOnly ? (
         <ListItemSecondaryAction>
           {content.Id > 0 ? (
diff --git a/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx b/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx
index e021236e2..1f0c2514f 100644
--- a/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx
@@ -22,10 +22,13 @@ const styles = {
   root: {
     display: 'flex',
     flexWrap: 'wrap',
+    alignItems: 'flex-start',
   },
   listContainer: {
-    display: 'block',
-    marginTop: 10,
+    display: 'inline-block',
+    minWidth: 250,
+    padding: 0,
+    marginTop: 15,
   },
 }
 
@@ -232,9 +235,9 @@ export const ReferenceGrid: React.FC<ReferenceGridProps> = (props) => {
     default: {
       return (
         <FormControl style={styles.root as any}>
-          <InputLabel shrink={true} htmlFor={props.settings.Name}>
+          <Typography variant="caption" gutterBottom={true}>
             {props.settings.DisplayName}
-          </InputLabel>
+          </Typography>
           <FormGroup>
             {fieldValue ? (
               <List dense={true} style={styles.listContainer}>
diff --git a/packages/sn-controls-react/src/fieldcontrols/short-text.tsx b/packages/sn-controls-react/src/fieldcontrols/short-text.tsx
index b1c408f75..705538d4b 100644
--- a/packages/sn-controls-react/src/fieldcontrols/short-text.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/short-text.tsx
@@ -35,7 +35,7 @@ export const ShortText: React.FC<ReactClientFieldSetting<ShortTextFieldSetting>>
             name={props.settings.Name}
             id={props.settings.Name}
             label={props.settings.DisplayName}
-            placeholder={props.settings.DisplayName}
+            InputLabelProps={{ shrink: true }}
             value={value}
             required={props.settings.Compulsory}
             disabled={props.settings.ReadOnly}
diff --git a/packages/sn-controls-react/src/fieldcontrols/switcher.tsx b/packages/sn-controls-react/src/fieldcontrols/switcher.tsx
index 00c841fb9..93fcdb48e 100644
--- a/packages/sn-controls-react/src/fieldcontrols/switcher.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/switcher.tsx
@@ -89,7 +89,7 @@ const useStyles = makeStyles(() =>
       alignItems: 'flex-start',
     },
     alignedCenter: {
-      alignItems: 'center',
+      alignItems: 'flex-start',
     },
   }),
 )
diff --git a/packages/sn-controls-react/src/viewcontrols/browse-view.tsx b/packages/sn-controls-react/src/viewcontrols/browse-view.tsx
index 5b336c69d..3c9f31899 100644
--- a/packages/sn-controls-react/src/viewcontrols/browse-view.tsx
+++ b/packages/sn-controls-react/src/viewcontrols/browse-view.tsx
@@ -81,9 +81,9 @@ export const BrowseView: React.FC<BrowseViewProps> = (props) => {
                 item={true}
                 xs={12}
                 sm={12}
-                md={isFullWidth ? 12 : 6}
-                lg={isFullWidth ? 12 : 6}
-                xl={isFullWidth ? 12 : 6}
+                md={12}
+                lg={12}
+                xl={12}
                 key={field.fieldSettings.Name}
                 className={classes.fieldWrapper}>
                 <div className={isFullWidth ? classes.fieldFullWidth : classes.field}>
diff --git a/packages/sn-controls-react/src/viewcontrols/edit-view.tsx b/packages/sn-controls-react/src/viewcontrols/edit-view.tsx
index 77fa6fdc7..945ee5917 100644
--- a/packages/sn-controls-react/src/viewcontrols/edit-view.tsx
+++ b/packages/sn-controls-react/src/viewcontrols/edit-view.tsx
@@ -153,9 +153,9 @@ export const EditView: React.FC<EditViewProps> = (props) => {
                 item={true}
                 xs={12}
                 sm={12}
-                md={isFullWidth ? 12 : 6}
-                lg={isFullWidth ? 12 : 6}
-                xl={isFullWidth ? 12 : 6}
+                md={12}
+                lg={12}
+                xl={12}
                 key={field.fieldSettings.Name}
                 className={classes.fieldWrapper}>
                 <div className={isFullWidth ? classes.fieldFullWidth : classes.field}>{fieldControl}</div>
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
index e025e8724..52bb97b91 100644
--- a/packages/sn-controls-react/test/__snapshots__/date-picker.test.tsx.snap
+++ b/packages/sn-controls-react/test/__snapshots__/date-picker.test.tsx.snap
@@ -26,11 +26,15 @@ exports[`Date/Date time field control in edit/new view should set all the props
   utils={[Function]}
 >
   <PickerWithState
+    InputLabelProps={
+      Object {
+        "shrink": true,
+      }
+    }
     allowKeyboardControl={true}
     ampm={true}
     disabled={true}
     format="yyyy MMMM dd hh:mm aaaa"
-    fullWidth={true}
     id="ModificationDate"
     invalidDateMessage="Invalid Date Format"
     label="Modification Date"
@@ -42,7 +46,6 @@ exports[`Date/Date time field control in edit/new view should set all the props
     onChange={[Function]}
     openTo="date"
     orientation="portrait"
-    placeholder="Modification Date"
     required={true}
     showTabs={true}
     value="1912-04-15T02:10:00.000Z"
@@ -67,10 +70,14 @@ exports[`Date/Date time field control in edit/new view should set all the props
   utils={[Function]}
 >
   <PickerWithState
+    InputLabelProps={
+      Object {
+        "shrink": true,
+      }
+    }
     allowKeyboardControl={true}
     disabled={true}
     format="yyyy MMMM dd"
-    fullWidth={true}
     id="ModificationDate"
     invalidDateMessage="Invalid Date Format"
     label="Modification Date"
@@ -81,7 +88,6 @@ exports[`Date/Date time field control in edit/new view should set all the props
     name="ModificationDate"
     onChange={[Function]}
     openTo="date"
-    placeholder="Modification Date"
     required={true}
     value="1912-04-15T02:10:00.000Z"
     views={
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
index 85c32d792..726e68549 100644
--- a/packages/sn-controls-react/test/__snapshots__/dropdown-list.test.tsx.snap
+++ b/packages/sn-controls-react/test/__snapshots__/dropdown-list.test.tsx.snap
@@ -3,8 +3,12 @@
 exports[`Drop down list field control in edit/new view should set all the props 1`] = `
 <WithStyles(ForwardRef(FormControl))
   disabled={true}
-  fullWidth={true}
   required={true}
+  style={
+    Object {
+      "minWidth": "220px",
+    }
+  }
 >
   <WithStyles(ForwardRef(InputLabel))
     htmlFor="VersioningMode"
diff --git a/packages/sn-controls-react/test/__snapshots__/number.test.tsx.snap b/packages/sn-controls-react/test/__snapshots__/number.test.tsx.snap
index 2655c48b2..704371c51 100644
--- a/packages/sn-controls-react/test/__snapshots__/number.test.tsx.snap
+++ b/packages/sn-controls-react/test/__snapshots__/number.test.tsx.snap
@@ -20,6 +20,11 @@ exports[`Number field control in browse view should show the displayname and fie
 exports[`Number field control in edit/new view should set all the props 1`] = `
 <Fragment>
   <WithStyles(ForwardRef(TextField))
+    InputLabelProps={
+      Object {
+        "shrink": true,
+      }
+    }
     InputProps={
       Object {
         "endAdornment": <WithStyles(ForwardRef(InputAdornment))
@@ -35,7 +40,6 @@ exports[`Number field control in edit/new view should set all the props 1`] = `
       }
     }
     disabled={true}
-    fullWidth={true}
     id="Index"
     inputProps={
       Object {
@@ -47,7 +51,7 @@ exports[`Number field control in edit/new view should set all the props 1`] = `
     label="Index"
     name="Index"
     onChange={[Function]}
-    placeholder="Index"
+    placeholder="0"
     required={true}
     type="number"
     value={7}
diff --git a/packages/sn-controls-react/test/__snapshots__/short-text.test.tsx.snap b/packages/sn-controls-react/test/__snapshots__/short-text.test.tsx.snap
index 7f385201b..496e32157 100644
--- a/packages/sn-controls-react/test/__snapshots__/short-text.test.tsx.snap
+++ b/packages/sn-controls-react/test/__snapshots__/short-text.test.tsx.snap
@@ -20,6 +20,11 @@ exports[`Short text field control in browse view should show the displayname and
 exports[`Short text field control in edit/new view should set all the props 1`] = `
 <Fragment>
   <WithStyles(ForwardRef(TextField))
+    InputLabelProps={
+      Object {
+        "shrink": true,
+      }
+    }
     autoComplete="off"
     disabled={true}
     fullWidth={true}
@@ -34,7 +39,6 @@ exports[`Short text field control in edit/new view should set all the props 1`]
     label="Display name"
     name="DisplayName"
     onChange={[Function]}
-    placeholder="Display name"
     required={true}
     value="Hello World"
   />
diff --git a/packages/sn-controls-react/test/date-picker.test.tsx b/packages/sn-controls-react/test/date-picker.test.tsx
index 49dad0f6c..babb5b074 100644
--- a/packages/sn-controls-react/test/date-picker.test.tsx
+++ b/packages/sn-controls-react/test/date-picker.test.tsx
@@ -71,7 +71,6 @@ describe('Date/Date time field control', () => {
       expect(wrapper.find(DateTimePicker).prop('name')).toBe(defaultSettings.Name)
       expect(wrapper.find(DateTimePicker).prop('id')).toBe(defaultSettings.Name)
       expect(wrapper.find(DateTimePicker).prop('label')).toBe(defaultSettings.DisplayName)
-      expect(wrapper.find(DateTimePicker).prop('placeholder')).toBe(defaultSettings.DisplayName)
       expect(wrapper.find(DateTimePicker).prop('required')).toBeTruthy()
       expect(wrapper.find(DateTimePicker).prop('disabled')).toBeTruthy()
       expect(wrapper).toMatchSnapshot()
@@ -109,7 +108,6 @@ describe('Date/Date time field control', () => {
       expect(wrapper.find(MUIDatePicker).prop('name')).toBe(defaultSettings.Name)
       expect(wrapper.find(MUIDatePicker).prop('id')).toBe(defaultSettings.Name)
       expect(wrapper.find(MUIDatePicker).prop('label')).toBe(defaultSettings.DisplayName)
-      expect(wrapper.find(MUIDatePicker).prop('placeholder')).toBe(defaultSettings.DisplayName)
       expect(wrapper.find(MUIDatePicker).prop('required')).toBeTruthy()
       expect(wrapper.find(MUIDatePicker).prop('disabled')).toBeTruthy()
       expect(wrapper).toMatchSnapshot()
diff --git a/packages/sn-controls-react/test/number.test.tsx b/packages/sn-controls-react/test/number.test.tsx
index dacd8a111..7f8d35ccf 100644
--- a/packages/sn-controls-react/test/number.test.tsx
+++ b/packages/sn-controls-react/test/number.test.tsx
@@ -75,7 +75,7 @@ describe('Number field control', () => {
       expect(wrapper.find(TextField).prop('name')).toBe(defaultSettings.Name)
       expect(wrapper.find(TextField).prop('id')).toBe(defaultSettings.Name)
       expect(wrapper.find(TextField).prop('label')).toBe(defaultSettings.DisplayName)
-      expect(wrapper.find(TextField).prop('placeholder')).toBe(defaultSettings.DisplayName)
+      expect(wrapper.find(TextField).prop('placeholder')).toBe('0')
       expect(wrapper.find(TextField).prop('required')).toBeTruthy()
       expect(wrapper.find(TextField).prop('disabled')).toBeTruthy()
       expect(wrapper.find(FormHelperText).text()).toBe(defaultSettings.Description)
diff --git a/packages/sn-controls-react/test/reference-grid.test.tsx b/packages/sn-controls-react/test/reference-grid.test.tsx
index 2b5f12725..e7068ed77 100644
--- a/packages/sn-controls-react/test/reference-grid.test.tsx
+++ b/packages/sn-controls-react/test/reference-grid.test.tsx
@@ -83,12 +83,16 @@ describe('Reference grid field control', () => {
   describe('in browse view', () => {
     it('should show no value message when field value is not provided', () => {
       const wrapper = shallow(<ReferenceGrid actionName="browse" settings={defaultSettings} />)
-      expect(wrapper.find(Typography).text()).toBe(defaultLocalization.referenceGrid.noValue)
+      expect(wrapper.find(Typography).filter({ variant: 'body1' }).text()).toBe(
+        defaultLocalization.referenceGrid.noValue,
+      )
     })
 
     it('should show no value message when field value is empty array', () => {
       const wrapper = shallow(<ReferenceGrid actionName="browse" settings={defaultSettings} fieldValue={[] as any} />)
-      expect(wrapper.find(Typography).text()).toBe(defaultLocalization.referenceGrid.noValue)
+      expect(wrapper.find(Typography).filter({ variant: 'body1' }).text()).toBe(
+        defaultLocalization.referenceGrid.noValue,
+      )
     })
 
     it('should render the default item template when there is a field value', async () => {
@@ -102,7 +106,7 @@ describe('Reference grid field control', () => {
       })
 
       expect(wrapper.find(DefaultItemTemplate)).toHaveLength(1)
-      expect(wrapper.find(InputLabel).text()).toBe(defaultSettings.DisplayName)
+      expect(wrapper.find(Typography).filter({ variant: 'caption' }).text()).toBe(defaultSettings.DisplayName)
     })
 
     it('should create an allowed type list filter', async () => {
diff --git a/packages/sn-controls-react/test/short-text.test.tsx b/packages/sn-controls-react/test/short-text.test.tsx
index 32a7f8138..cbed3068a 100644
--- a/packages/sn-controls-react/test/short-text.test.tsx
+++ b/packages/sn-controls-react/test/short-text.test.tsx
@@ -53,7 +53,6 @@ describe('Short text field control', () => {
       expect(wrapper.find(TextField).prop('name')).toBe(defaultSettings.Name)
       expect(wrapper.find(TextField).prop('id')).toBe(defaultSettings.Name)
       expect(wrapper.find(TextField).prop('label')).toBe(defaultSettings.DisplayName)
-      expect(wrapper.find(TextField).prop('placeholder')).toBe(defaultSettings.DisplayName)
       expect(wrapper.find(TextField).prop('required')).toBeTruthy()
       expect(wrapper.find(TextField).prop('disabled')).toBeTruthy()
       expect(wrapper.find(FormHelperText).text()).toEqual('description')