fix(react-scheduler-material-ui): correct AppointmentTooltip OpenButt…

…on position (#2367)
DevExpress · Sep 30, 2019 · 3fbcf4a · 3fbcf4a
1 parent c640464
commit 3fbcf4a
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/...act-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/form-customization.jsx b/...act-scheduler-demos/src/demo-sources/scheduler-editing/material-ui/form-customization.jsx
@@ -35,7 +35,7 @@ const BasicLayout = ({ onFieldChange, appointmentData, ...restProps }) => {
     >
       <AppointmentForm.Label
         text="Custom Field"
-        id="titleLabel"
+        type="title"
       />
       <AppointmentForm.TextEditor
         value={appointmentData.customField}

diff --git a/...r-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx b/...r-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx
@@ -31,6 +31,7 @@ import ListItemText from '@material-ui/core/ListItemText';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import FormControl from '@material-ui/core/FormControl';
+import classNames from 'classnames';
 import { lighten } from '@material-ui/core/styles/colorManipulator';
 
 import { tasks, priorities } from '../../../demo-data/tasks';
@@ -94,6 +95,11 @@ const styles = theme => ({
     paddingLeft: theme.spacing(2.2),
     paddingRight: theme.spacing(2.2),
   },
+  titleNoWrap: {
+    '& div > div > div': {
+      whiteSpace: 'normal',
+    },
+  },
 });
 
 const PrioritySelectorItem = ({ id, classes }) => {
@@ -181,7 +187,7 @@ const TooltipHeader = withStyles(styles, { name: 'TooltipHeader' })(
       <AppointmentTooltip.Header
         {...restProps}
         appointmentData={appointmentData}
-        className={priorityClasses}
+        className={classNames(priorityClasses, classes.titleNoWrap)}
       />
     );
   },

diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/layout.jsx
@@ -74,7 +74,7 @@ const LayoutBase = ({
             && <CommandButton id={commandButtonIds.delete} onExecute={onDeleteButtonClick} />}
           {showCloseButton && <CommandButton id={commandButtonIds.close} onExecute={onHide} />}
         </div>
-        <Grid container spacing={1} alignItems="center">
+        <Grid container spacing={1} alignItems="flex-end">
           <Grid item xs={2} className={classes.flexItem}>
             <div className={classes.buttonsLeft}>
               {showOpenButton