Small core/ui components improvements

packages/vulcan-core/lib/modules/components/Datatable.jsx

@@ -207,6 +207,7 @@ const DatatableRow = (props, { intl }) => {
   const canEdit = collection && collection.options && collection.options.mutations && collection.options.mutations.edit && collection.options.mutations.edit.check(currentUser, document);
 
   const row = typeof rowClass === 'function' ? rowClass(document) : rowClass || '';
+  const modalProps = { title: <code>{document._id}</code> };
 
   return (
   <tr className={`datatable-item ${row}`}>
@@ -215,7 +216,7 @@ const DatatableRow = (props, { intl }) => {
 
     {showEdit && canEdit ?
       <td>
-        <Components.EditButton collection={collection} documentId={document._id} currentUser={currentUser} mutationFragmentName={options && options.fragmentName} {...editFormOptions}/>
+        <Components.EditButton collection={collection} documentId={document._id} currentUser={currentUser} mutationFragmentName={options && options.fragmentName} modalProps={modalProps} {...editFormOptions}/>
       </td>
     : null}
 

packages/vulcan-core/lib/modules/components/EditButton.jsx

@@ -2,7 +2,7 @@ import { Components, registerComponent } from 'meteor/vulcan:lib';
 import React from 'react';
 import { FormattedMessage, intlShape } from 'meteor/vulcan:i18n';
 
-const EditButton = ({ style = 'primary', size, ...props }, { intl }) => (
+const EditButton = ({ style = 'primary', size, showId, modalProps, ...props }, { intl }) => (
   <Components.ModalTrigger
     label={intl.formatMessage({ id: 'datatable.edit' })}
     component={
@@ -10,6 +10,7 @@ const EditButton = ({ style = 'primary', size, ...props }, { intl }) => (
         <FormattedMessage id="datatable.edit" />
       </Components.Button>
     }
+    modalProps={modalProps}
   >
     <Components.EditForm {...props} />
   </Components.ModalTrigger>

packages/vulcan-ui-bootstrap/lib/components/ui/Dropdown.jsx

@@ -57,14 +57,14 @@ const Item = ({ index, to, labelId, label, component, componentProps = {}, itemP
 Item.propTypes = {
   index: PropTypes.number, // index
   to: PropTypes.any, // a string or object, used to generate the router path for the menu item
-  id: PropTypes.string, // an i18n id for the item label
+  labelId: PropTypes.string, // an i18n id for the item label
   label: PropTypes.string, // item label string, used if id is not provided
   component: PropTypes.object, // a component to use as menu item
   componentProps: PropTypes.object, // props passed to the component
   itemProps: PropTypes.object, // props for the <MenuItem/> component
 };
 
-const BootstrapDropdown = ({ label, labelId, trigger, menuItems, menuContents, ...dropdownProps }) => {
+const BootstrapDropdown = ({ label, labelId, trigger, menuItems, menuContents, variant = 'dropdown', ...dropdownProps }) => {
   const menuBody = menuContents ? menuContents : menuItems.map((item, index) => {
     if (item === 'divider') {
       return <MenuItem divider key={index} />;
@@ -73,6 +73,11 @@ const BootstrapDropdown = ({ label, labelId, trigger, menuItems, menuContents, .
     }
   });
 
+  if (variant === 'flat') {
+    
+    return menuBody;
+
+  } else {
     if (trigger) {
       // if a trigger component has been provided, use it
       return (
@@ -89,6 +94,7 @@ const BootstrapDropdown = ({ label, labelId, trigger, menuItems, menuContents, .
         </DropdownButton>
       );
     }
+  }
 };
 
 BootstrapDropdown.propTypes = {
@@ -97,6 +103,7 @@ BootstrapDropdown.propTypes = {
   trigger: PropTypes.object, // component used as menu trigger (the part you click to open the menu)
   menuContents: PropTypes.object, // a component specifying the menu contents
   menuItems: PropTypes.array, // an array of menu items, used if menuContents is not provided
+  variant: PropTypes.string, // dropdown (default) or flat
 };
 
 registerComponent('Dropdown', BootstrapDropdown);

packages/vulcan-ui-bootstrap/lib/components/ui/ModalTrigger.jsx

@@ -37,6 +37,7 @@ class ModalTrigger extends PureComponent {
           onHide={this.closeModal}
           dialogClassName={this.props.dialogClassName}
           title={this.props.title}
+          {...this.props.modalProps}
         >
           {childrenComponent}
         </Components.Modal>