Single column mui (#1520)

* 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 <[email protected]>
SenseNet · Oct 2, 2023 · e698fe7 · e698fe7
1 parent 0f91ffc
commit e698fe7
Show file tree

Hide file tree

Showing 19 changed files with 61 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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')