MM-14778 - Updating menu functionality

components/file_upload/__snapshots__/file_upload.test.jsx.snap

@@ -4,19 +4,50 @@ exports[`components/FileUpload should match snapshot 1`] = `
 <span
   className=""
 >
-  <div
-    className="icon icon--attachment"
-    id="fileUploadButton"
+  <input
+    accept=""
+    aria-label="Upload files"
+    className="file-attachment-menu-item-input"
+    multiple={true}
+    onChange={[Function]}
+    onClick={[Function]}
+    type="file"
+  />
+  <MenuWrapper
+    animationComponent={[Function]}
+    className=""
   >
-    <AttachmentIcon />
-    <input
-      accept=""
-      aria-label="Upload files"
-      multiple={true}
-      onChange={[Function]}
-      onClick={[Function]}
-      type="file"
-    />
-  </div>
+    <button
+      className="style--none"
+      type="button"
+    >
+      <div
+        className="icon icon--attachment"
+        id="fileUploadButton"
+      >
+        <AttachmentIcon />
+      </div>
+    </button>
+    <Menu
+      ariaLabel="Upload type selector"
+      openLeft={true}
+      openUp={true}
+    >
+      <li>
+        <a
+          onClick={[Function]}
+        >
+          <i
+            className="fa fa-laptop"
+          />
+          <FormattedMessage
+            defaultMessage="Your computer"
+            id="yourcomputer"
+            values={Object {}}
+          />
+        </a>
+      </li>
+    </Menu>
+  </MenuWrapper>
 </span>
 `;

components/file_upload/file_upload.jsx

@@ -572,7 +572,7 @@ export default class FileUpload extends PureComponent {
         const uploadsRemaining = Constants.MAX_UPLOAD_FILES - this.props.fileCount;
 
         let bodyAction;
-        if (this.props.pluginFileUploadMethods.length === 0) {
+        if (this.props.pluginFileUploadMethods.length === 1) {
             bodyAction = (
                 <div
                     id='fileUploadButton'

components/widgets/menu/menu.jsx

@@ -11,6 +11,7 @@ export default class Menu extends React.PureComponent {
         children: PropTypes.node,
         openLeft: PropTypes.bool,
         openUp: PropTypes.bool,
+        onMobile: PropTypes.bool,
         id: PropTypes.string,
         ariaLabel: PropTypes.string.isRequired,
     };
@@ -29,13 +30,13 @@ export default class Menu extends React.PureComponent {
     }
 
     render() {
-        const {children, openUp, openLeft, id, ariaLabel} = this.props;
+        const {children, openUp, openLeft, onMobile, id, ariaLabel} = this.props;
         const styles = {};
-        if (openLeft && !isMobile()) {
+        if (openLeft && (!isMobile() || !onMobile)) {
             styles.left = 'inherit';
             styles.right = 0;
         }
-        if (openUp && !isMobile()) {
+        if (openUp && (!isMobile() || !onMobile)) {
             styles.bottom = '100%';
             styles.top = 'auto';
         }

components/widgets/menu/menu.test.jsx

@@ -72,7 +72,14 @@ describe('components/Menu', () => {
   aria-label="test-label"
   className="Menu dropdown-menu"
   role="menu"
-  style={Object {}}
+  style={
+    Object {
+      "bottom": "100%",
+      "left": "inherit",
+      "right": 0,
+      "top": "auto",
+    }
+  }
 >
   text
 </ul>

sass/responsive/_mobile.scss

@@ -308,6 +308,7 @@
             line-height: 21px;
             text-align: center;
             text-decoration: none;
+            visibility: visible;
             width: 28px;
 
             &:after {