SONAR-10664 Improve dropdown UI/UX consistency (#217)

19 files changed, 193 insertions, 219 deletions

diff --git a/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.js b/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.js
index b3f230810fe..fcfd515b587 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/ChangelogPopup.js
@@ -22,9 +22,9 @@ import React from 'react';
 import { getIssueChangelog } from '../../../api/issues';
 import { translate } from '../../../helpers/l10n';
 import Avatar from '../../../components/ui/Avatar';
-import BubblePopup from '../../../components/common/BubblePopup';
 import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import IssueChangelogDiff from '../components/IssueChangelogDiff';
+import { DropdownOverlay } from '../../controls/Dropdown';
 /*:: import type { ChangelogDiff } from '../components/IssueChangelogDiff'; */
 /*:: import type { Issue } from '../types'; */
 
@@ -80,8 +80,8 @@ export default class ChangelogPopup extends React.PureComponent {
     const { issue } = this.props;
     const { author } = issue;
     return (
-      <BubblePopup position={this.props.popupPosition} customClass="bubble-popup-bottom-right">
-        <div className="issue-changelog">
+      <DropdownOverlay>
+        <div className="menu is-container issue-changelog">
           <table className="spaced">
             <tbody>
               <tr>
@@ -110,14 +110,14 @@ export default class ChangelogPopup extends React.PureComponent {
                         {item.userName}
                       </p>
                     )}
-                    {item.diffs.map(diff => <IssueChangelogDiff key={diff.key} diff={diff} />)}
+                    {item.diffs.map(diff => <IssueChangelogDiff diff={diff} key={diff.key} />)}
                   </td>
                 </tr>
               ))}
             </tbody>
           </table>
         </div>
-      </BubblePopup>
+      </DropdownOverlay>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/issue/popups/CommentDeletePopup.js b/server/sonar-web/src/main/js/components/issue/popups/CommentDeletePopup.js
index 9776ab00253..c7fd5d89ae8 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/CommentDeletePopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/CommentDeletePopup.js
@@ -19,8 +19,9 @@
  */
 // @flow
 import React from 'react';
+import { Button } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
-import BubblePopup from '../../../components/common/BubblePopup';
+import { DropdownOverlay } from '../../controls/Dropdown';
 
 /*::
 type Props = {
@@ -31,13 +32,13 @@ type Props = {
 
 export default function CommentDeletePopup(props /*: Props */) {
   return (
-    <BubblePopup position={props.popupPosition} customClass="bubble-popup-bottom-right">
-      <div className="text-right">
+    <DropdownOverlay>
+      <div className="menu is-container">
         <div className="spacer-bottom">{translate('issue.comment.delete_confirm_message')}</div>
-        <button className="button-red" onClick={props.onDelete}>
+        <Button className="button-red" onClick={props.onDelete}>
           {translate('delete')}
-        </button>
+        </Button>
       </div>
-    </BubblePopup>
+    </DropdownOverlay>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/issue/popups/CommentPopup.js b/server/sonar-web/src/main/js/components/issue/popups/CommentPopup.js
index 2a17f71383b..bee719a083e 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/CommentPopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/CommentPopup.js
@@ -19,16 +19,15 @@
  */
 // @flow
 import React from 'react';
-import classNames from 'classnames';
-import BubblePopup from '../../../components/common/BubblePopup';
 import MarkdownTips from '../../../components/common/MarkdownTips';
+import { Button, ResetButtonLink } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
+import { DropdownOverlay } from '../../controls/Dropdown';
 /*:: import type { IssueComment } from '../types'; */
 
 /*::
 type Props = {
   comment?: IssueComment,
-  customClass?: string,
   onComment: string => void,
   toggleComment: boolean => void,
   placeholder: string,
@@ -63,8 +62,7 @@ export default class CommentPopup extends React.PureComponent {
     }
   };
 
-  handleCancelClick = (evt /*: MouseEvent */) => {
-    evt.preventDefault();
+  handleCancelClick = () => {
     this.props.toggleComment(false);
   };
 
@@ -81,37 +79,37 @@ export default class CommentPopup extends React.PureComponent {
   render() {
     const { comment } = this.props;
     return (
-      <BubblePopup
-        position={this.props.popupPosition}
-        customClass={classNames(this.props.customClass, 'bubble-popup-bottom-right')}>
-        <div className="issue-comment-form-text">
-          <textarea
-            autoFocus={true}
-            placeholder={this.props.placeholder}
-            onChange={this.handleCommentChange}
-            onKeyDown={this.handleKeyboard}
-            value={this.state.textComment}
-            rows="2"
-          />
-        </div>
-        <div className="issue-comment-form-footer">
-          <div className="issue-comment-form-actions">
-            <button
-              className="js-issue-comment-submit little-spacer-right"
-              disabled={this.state.textComment.trim().length < 1}
-              onClick={this.handleCommentClick}>
-              {comment && translate('save')}
-              {!comment && translate('issue.comment.submit')}
-            </button>
-            <a href="#" className="js-issue-comment-cancel" onClick={this.handleCancelClick}>
-              {translate('cancel')}
-            </a>
+      <DropdownOverlay>
+        <div className="issue-comment-bubble-popup">
+          <div className="issue-comment-form-text">
+            <textarea
+              autoFocus={true}
+              onChange={this.handleCommentChange}
+              onKeyDown={this.handleKeyboard}
+              placeholder={this.props.placeholder}
+              rows="2"
+              value={this.state.textComment}
+            />
           </div>
-          <div className="issue-comment-form-tips">
-            <MarkdownTips />
+          <div className="issue-comment-form-footer">
+            <div className="issue-comment-form-actions">
+              <Button
+                className="js-issue-comment-submit little-spacer-right"
+                disabled={this.state.textComment.trim().length < 1}
+                onClick={this.handleCommentClick}>
+                {comment && translate('save')}
+                {!comment && translate('issue.comment.submit')}
+              </Button>
+              <ResetButtonLink className="js-issue-comment-cancel" onClick={this.handleCancelClick}>
+                {translate('cancel')}
+              </ResetButtonLink>
+            </div>
+            <div className="issue-comment-form-tips">
+              <MarkdownTips />
+            </div>
           </div>
         </div>
-      </BubblePopup>
+      </DropdownOverlay>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js b/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js
index 270cbe04158..b5658c997d3 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetAssigneePopup.js
@@ -23,7 +23,6 @@ import { map } from 'lodash';
 import { connect } from 'react-redux';
 import * as PropTypes from 'prop-types';
 import Avatar from '../../../components/ui/Avatar';
-import BubblePopup from '../../../components/common/BubblePopup';
 import SelectList from '../../../components/common/SelectList';
 import SelectListItem from '../../../components/common/SelectListItem';
 import SearchBox from '../../../components/controls/SearchBox';
@@ -31,6 +30,7 @@ import { searchMembers } from '../../../api/organizations';
 import { searchUsers } from '../../../api/users';
 import { translate } from '../../../helpers/l10n';
 import { getCurrentUser } from '../../../store/rootReducer';
+import { DropdownOverlay } from '../../controls/Dropdown';
 /*:: import type { Issue } from '../types'; */
 
 /*::
@@ -123,9 +123,7 @@ class SetAssigneePopup extends React.PureComponent {
 
   render() {
     return (
-      <BubblePopup
-        customClass="bubble-popup-menu bubble-popup-bottom"
-        position={this.props.popupPosition}>
+      <DropdownOverlay noPadding={true}>
         <div className="multi-select">
           <div className="menu-search">
             <SearchBox
@@ -142,7 +140,7 @@ class SetAssigneePopup extends React.PureComponent {
             items={map(this.state.users, 'login')}
             onSelect={this.props.onSelect}>
             {this.state.users.map(user => (
-              <SelectListItem key={user.login} item={user.login}>
+              <SelectListItem item={user.login} key={user.login}>
                 {!!user.login && (
                   <Avatar className="spacer-right" hash={user.avatar} name={user.name} size={16} />
                 )}
@@ -155,7 +153,7 @@ class SetAssigneePopup extends React.PureComponent {
             ))}
           </SelectList>
         </div>
-      </BubblePopup>
+      </DropdownOverlay>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.tsx b/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.tsx
index 90b8af5f628..c41c216e8b6 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetIssueTagsPopup.tsx
@@ -19,12 +19,12 @@
  */
 import * as React from 'react';
 import { difference, without } from 'lodash';
-import { BubblePopupPosition } from '../../../components/common/BubblePopup';
 import TagsSelector from '../../../components/tags/TagsSelector';
 import { searchIssueTags } from '../../../api/issues';
+import { DropdownOverlay } from '../../controls/Dropdown';
+import { PopupPlacement } from '../../ui/popups';
 
 interface Props {
-  popupPosition: BubblePopupPosition;
   organization: string;
   selectedTags: string[];
   setTags: (tags: string[]) => void;
@@ -74,15 +74,16 @@ export default class SetIssueTagsPopup extends React.PureComponent<Props, State>
   render() {
     const availableTags = difference(this.state.searchResult, this.props.selectedTags);
     return (
-      <TagsSelector
-        listSize={LIST_SIZE}
-        onSearch={this.onSearch}
-        onSelect={this.onSelect}
-        onUnselect={this.onUnselect}
-        position={this.props.popupPosition}
-        selectedTags={this.props.selectedTags}
-        tags={availableTags}
-      />
+      <DropdownOverlay placement={PopupPlacement.BottomRight}>
+        <TagsSelector
+          listSize={LIST_SIZE}
+          onSearch={this.onSearch}
+          onSelect={this.onSelect}
+          onUnselect={this.onUnselect}
+          selectedTags={this.props.selectedTags}
+          tags={availableTags}
+        />
+      </DropdownOverlay>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetSeverityPopup.js b/server/sonar-web/src/main/js/components/issue/popups/SetSeverityPopup.js
index cc03b290475..2d3c2232f88 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetSeverityPopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetSeverityPopup.js
@@ -20,17 +20,16 @@
 // @flow
 import React from 'react';
 import { translate } from '../../../helpers/l10n';
-import BubblePopup from '../../../components/common/BubblePopup';
 import SelectList from '../../../components/common/SelectList';
 import SelectListItem from '../../../components/common/SelectListItem';
 import SeverityIcon from '../../../components/shared/SeverityIcon';
+import { DropdownOverlay } from '../../controls/Dropdown';
 /*:: import type { Issue } from '../types'; */
 
 /*::
 type Props = {
   issue: Issue,
   onSelect: string => void,
-  popupPosition?: {}
 };
 */
 
@@ -41,21 +40,19 @@ export default class SetSeverityPopup extends React.PureComponent {
 
   render() {
     return (
-      <BubblePopup
-        position={this.props.popupPosition}
-        customClass="bubble-popup-menu bubble-popup-bottom">
+      <DropdownOverlay>
         <SelectList
-          items={SEVERITY}
           currentItem={this.props.issue.severity}
+          items={SEVERITY}
           onSelect={this.props.onSelect}>
           {SEVERITY.map(severity => (
-            <SelectListItem key={severity} item={severity}>
+            <SelectListItem item={severity} key={severity}>
               <SeverityIcon className="little-spacer-right" severity={severity} />
               {translate('severity', severity)}
             </SelectListItem>
           ))}
         </SelectList>
-      </BubblePopup>
+      </DropdownOverlay>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetTransitionPopup.js b/server/sonar-web/src/main/js/components/issue/popups/SetTransitionPopup.js
index 44bf942253d..37d342f7eb2 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetTransitionPopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetTransitionPopup.js
@@ -19,16 +19,15 @@
  */
 // @flow
 import React from 'react';
-import BubblePopup from '../../../components/common/BubblePopup';
 import SelectList from '../../../components/common/SelectList';
 import SelectListItem from '../../../components/common/SelectListItem';
 import { translate } from '../../../helpers/l10n';
+import { DropdownOverlay } from '../../controls/Dropdown';
 
 /*::
 type Props = {
   transitions: Array<string>,
   onSelect: string => void,
-  popupPosition?: {}
 };
 */
 
@@ -38,22 +37,20 @@ export default class SetTransitionPopup extends React.PureComponent {
   render() {
     const { transitions } = this.props;
     return (
-      <BubblePopup
-        position={this.props.popupPosition}
-        customClass="bubble-popup-menu bubble-popup-bottom">
-        <SelectList items={transitions} currentItem={transitions[0]} onSelect={this.props.onSelect}>
+      <DropdownOverlay>
+        <SelectList currentItem={transitions[0]} items={transitions} onSelect={this.props.onSelect}>
           {transitions.map(transition => {
             return (
               <SelectListItem
-                key={transition}
                 item={transition}
+                key={transition}
                 title={translate('issue.transition', transition, 'description')}>
                 {translate('issue.transition', transition)}
               </SelectListItem>
             );
           })}
         </SelectList>
-      </BubblePopup>
+      </DropdownOverlay>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SetTypePopup.js b/server/sonar-web/src/main/js/components/issue/popups/SetTypePopup.js
index f623afccd08..f69e07cf141 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SetTypePopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/SetTypePopup.js
@@ -20,17 +20,16 @@
 // @flow
 import React from 'react';
 import { translate } from '../../../helpers/l10n';
-import BubblePopup from '../../../components/common/BubblePopup';
 import IssueTypeIcon from '../../../components/ui/IssueTypeIcon';
 import SelectList from '../../../components/common/SelectList';
 import SelectListItem from '../../../components/common/SelectListItem';
+import { DropdownOverlay } from '../../controls/Dropdown';
 /*:: import type { Issue } from '../types'; */
 
 /*::
 type Props = {
   issue: Issue,
   onSelect: string => void,
-  popupPosition?: {}
 };
 */
 
@@ -41,21 +40,19 @@ export default class SetTypePopup extends React.PureComponent {
 
   render() {
     return (
-      <BubblePopup
-        position={this.props.popupPosition}
-        customClass="bubble-popup-menu bubble-popup-bottom">
+      <DropdownOverlay>
         <SelectList
-          items={TYPES}
           currentItem={this.props.issue.type}
+          items={TYPES}
           onSelect={this.props.onSelect}>
           {TYPES.map(type => (
-            <SelectListItem key={type} item={type}>
+            <SelectListItem item={type} key={type}>
               <IssueTypeIcon className="little-spacer-right" query={type} />
               {translate('issue.type', type)}
             </SelectListItem>
           ))}
         </SelectList>
-      </BubblePopup>
+      </DropdownOverlay>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.js b/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.js
index fb9b24780e3..7a28c6594ed 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.js
@@ -19,9 +19,9 @@
  */
 // @flow
 import React from 'react';
-import BubblePopup from '../../../components/common/BubblePopup';
 import SelectList from '../../../components/common/SelectList';
 import SelectListItem from '../../../components/common/SelectListItem';
+import { DropdownOverlay } from '../../../components/controls/Dropdown';
 import SeverityHelper from '../../../components/shared/SeverityHelper';
 import StatusHelper from '../../../components/shared/StatusHelper';
 import QualifierIcon from '../../../components/shared/QualifierIcon';
@@ -35,7 +35,6 @@ import { fileFromPath, limitComponentName } from '../../../helpers/path';
 type Props = {|
   issue: Issue,
   onFilter: (property: string, issue: Issue) => void,
-  popupPosition?: {}
 |};
 */
 
@@ -64,9 +63,7 @@ export default class SimilarIssuesPopup extends React.PureComponent {
     ].filter(item => item);
 
     return (
-      <BubblePopup
-        position={this.props.popupPosition}
-        customClass="bubble-popup-menu bubble-popup-bottom-right">
+      <DropdownOverlay noPadding={true}>
         <header className="menu-search">
           <h6>{translate('issue.filter_similar_issues')}</h6>
         </header>
@@ -118,7 +115,7 @@ export default class SimilarIssuesPopup extends React.PureComponent {
 
           {issue.tags != null &&
             issue.tags.map(tag => (
-              <SelectListItem key={`tag###${tag}`} item={`tag###${tag}`}>
+              <SelectListItem item={`tag###${tag}`} key={`tag###${tag}`}>
                 <i className="icon-tags icon-half-transparent little-spacer-right" />
                 {tag}
               </SelectListItem>
@@ -143,7 +140,7 @@ export default class SimilarIssuesPopup extends React.PureComponent {
             {fileFromPath(issue.componentLongName)}
           </SelectListItem>
         </SelectList>
-      </BubblePopup>
+      </DropdownOverlay>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/CommentDeletePopup-test.js b/server/sonar-web/src/main/js/components/issue/popups/__tests__/CommentDeletePopup-test.js
index 2256e3fb35a..be0c222335d 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/CommentDeletePopup-test.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/CommentDeletePopup-test.js
@@ -26,6 +26,6 @@ it('should render the comment delete popup correctly', () => {
   const onDelete = jest.fn();
   const element = shallow(<CommentDeletePopup onDelete={onDelete} />);
   expect(element).toMatchSnapshot();
-  click(element.find('button'));
+  click(element.find('Button'));
   expect(onDelete.mock.calls.length).toBe(1);
 });
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/CommentPopup-test.js b/server/sonar-web/src/main/js/components/issue/popups/__tests__/CommentPopup-test.js
index 7716fe669a3..6cfd0dcdf64 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/CommentPopup-test.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/CommentPopup-test.js
@@ -25,10 +25,10 @@ import { click } from '../../../../helpers/testUtils';
 it('should render the comment popup correctly without existing comment', () => {
   const element = shallow(
     <CommentPopup
+      customClass="myclass"
       onComment={jest.fn()}
-      toggleComment={jest.fn()}
       placeholder="placeholder test"
-      customClass="myclass"
+      toggleComment={jest.fn()}
     />
   );
   expect(element).toMatchSnapshot();
@@ -37,12 +37,10 @@ it('should render the comment popup correctly without existing comment', () => {
 it('should render the comment popup correctly when changing a comment', () => {
   const element = shallow(
     <CommentPopup
-      comment={{
-        markdown: '*test*'
-      }}
+      comment={{ markdown: '*test*' }}
       onComment={jest.fn()}
-      toggleComment={jest.fn()}
       placeholder=""
+      toggleComment={jest.fn()}
     />
   );
   expect(element).toMatchSnapshot();
@@ -52,15 +50,15 @@ it('should render not allow to send comment with only spaces', () => {
   const onComment = jest.fn();
   const element = shallow(
     <CommentPopup
+      customClass="myclass"
       onComment={onComment}
-      toggleComment={jest.fn()}
       placeholder="placeholder test"
-      customClass="myclass"
+      toggleComment={jest.fn()}
     />
   );
-  click(element.find('button.js-issue-comment-submit'));
+  click(element.find('.js-issue-comment-submit'));
   expect(onComment.mock.calls.length).toBe(0);
   element.setState({ textComment: 'mycomment' });
-  click(element.find('button.js-issue-comment-submit'));
+  click(element.find('.js-issue-comment-submit'));
   expect(onComment.mock.calls.length).toBe(1);
 });
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/SetIssueTagsPopup-test.tsx b/server/sonar-web/src/main/js/components/issue/popups/__tests__/SetIssueTagsPopup-test.tsx
index f66e329ec87..00b85fd1817 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/SetIssueTagsPopup-test.tsx
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/SetIssueTagsPopup-test.tsx
@@ -23,12 +23,7 @@ import SetIssueTagsPopup from '../SetIssueTagsPopup';
 
 it('should render tags popup correctly', () => {
   const element = shallow(
-    <SetIssueTagsPopup
-      organization="foo"
-      popupPosition={{}}
-      selectedTags={['mytag']}
-      setTags={jest.fn()}
-    />
+    <SetIssueTagsPopup organization="foo" selectedTags={['mytag']} setTags={jest.fn()} />
   );
   element.setState({ searchResult: ['mytag', 'test', 'second'] });
   expect(element).toMatchSnapshot();
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/ChangelogPopup-test.js.snap b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/ChangelogPopup-test.js.snap
index 65cade73cf8..f54cfd88b77 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/ChangelogPopup-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/ChangelogPopup-test.js.snap
@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render the changelog popup correctly 1`] = `
-<BubblePopup
-  customClass="bubble-popup-bottom-right"
->
+<DropdownOverlay>
   <div
-    className="issue-changelog"
+    className="menu is-container issue-changelog"
   >
     <table
       className="spaced"
@@ -62,5 +60,5 @@ exports[`should render the changelog popup correctly 1`] = `
       </tbody>
     </table>
   </div>
-</BubblePopup>
+</DropdownOverlay>
 `;
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentDeletePopup-test.js.snap b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentDeletePopup-test.js.snap
index 634b35907be..43c00928943 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentDeletePopup-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentDeletePopup-test.js.snap
@@ -1,23 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render the comment delete popup correctly 1`] = `
-<BubblePopup
-  customClass="bubble-popup-bottom-right"
->
+<DropdownOverlay>
   <div
-    className="text-right"
+    className="menu is-container"
   >
     <div
       className="spacer-bottom"
     >
       issue.comment.delete_confirm_message
     </div>
-    <button
+    <Button
       className="button-red"
       onClick={[MockFunction]}
     >
       delete
-    </button>
+    </Button>
   </div>
-</BubblePopup>
+</DropdownOverlay>
 `;
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentPopup-test.js.snap b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentPopup-test.js.snap
index d33898199b7..8ed5e9eb55a 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentPopup-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/CommentPopup-test.js.snap
@@ -1,93 +1,95 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render the comment popup correctly when changing a comment 1`] = `
-<BubblePopup
-  customClass="bubble-popup-bottom-right"
->
+<DropdownOverlay>
   <div
-    className="issue-comment-form-text"
-  >
-    <textarea
-      autoFocus={true}
-      onChange={[Function]}
-      onKeyDown={[Function]}
-      placeholder=""
-      rows="2"
-      value="*test*"
-    />
-  </div>
-  <div
-    className="issue-comment-form-footer"
+    className="issue-comment-bubble-popup"
   >
     <div
-      className="issue-comment-form-actions"
+      className="issue-comment-form-text"
     >
-      <button
-        className="js-issue-comment-submit little-spacer-right"
-        disabled={false}
-        onClick={[Function]}
-      >
-        save
-      </button>
-      <a
-        className="js-issue-comment-cancel"
-        href="#"
-        onClick={[Function]}
-      >
-        cancel
-      </a>
+      <textarea
+        autoFocus={true}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        placeholder=""
+        rows="2"
+        value="*test*"
+      />
     </div>
     <div
-      className="issue-comment-form-tips"
+      className="issue-comment-form-footer"
     >
-      <MarkdownTips />
+      <div
+        className="issue-comment-form-actions"
+      >
+        <Button
+          className="js-issue-comment-submit little-spacer-right"
+          disabled={false}
+          onClick={[Function]}
+        >
+          save
+        </Button>
+        <ResetButtonLink
+          className="js-issue-comment-cancel"
+          onClick={[Function]}
+        >
+          cancel
+        </ResetButtonLink>
+      </div>
+      <div
+        className="issue-comment-form-tips"
+      >
+        <MarkdownTips />
+      </div>
     </div>
   </div>
-</BubblePopup>
+</DropdownOverlay>
 `;
 
 exports[`should render the comment popup correctly without existing comment 1`] = `
-<BubblePopup
-  customClass="myclass bubble-popup-bottom-right"
->
+<DropdownOverlay>
   <div
-    className="issue-comment-form-text"
-  >
-    <textarea
-      autoFocus={true}
-      onChange={[Function]}
-      onKeyDown={[Function]}
-      placeholder="placeholder test"
-      rows="2"
-      value=""
-    />
-  </div>
-  <div
-    className="issue-comment-form-footer"
+    className="issue-comment-bubble-popup"
   >
     <div
-      className="issue-comment-form-actions"
+      className="issue-comment-form-text"
     >
-      <button
-        className="js-issue-comment-submit little-spacer-right"
-        disabled={true}
-        onClick={[Function]}
-      >
-        issue.comment.submit
-      </button>
-      <a
-        className="js-issue-comment-cancel"
-        href="#"
-        onClick={[Function]}
-      >
-        cancel
-      </a>
+      <textarea
+        autoFocus={true}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        placeholder="placeholder test"
+        rows="2"
+        value=""
+      />
     </div>
     <div
-      className="issue-comment-form-tips"
+      className="issue-comment-form-footer"
     >
-      <MarkdownTips />
+      <div
+        className="issue-comment-form-actions"
+      >
+        <Button
+          className="js-issue-comment-submit little-spacer-right"
+          disabled={true}
+          onClick={[Function]}
+        >
+          issue.comment.submit
+        </Button>
+        <ResetButtonLink
+          className="js-issue-comment-cancel"
+          onClick={[Function]}
+        >
+          cancel
+        </ResetButtonLink>
+      </div>
+      <div
+        className="issue-comment-form-tips"
+      >
+        <MarkdownTips />
+      </div>
     </div>
   </div>
-</BubblePopup>
+</DropdownOverlay>
 `;
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetIssueTagsPopup-test.tsx.snap b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetIssueTagsPopup-test.tsx.snap
index 57990df2131..a5eb2aafcac 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetIssueTagsPopup-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetIssueTagsPopup-test.tsx.snap
@@ -1,22 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render tags popup correctly 1`] = `
-<TagsSelector
-  listSize={10}
-  onSearch={[Function]}
-  onSelect={[Function]}
-  onUnselect={[Function]}
-  position={Object {}}
-  selectedTags={
-    Array [
-      "mytag",
-    ]
-  }
-  tags={
-    Array [
-      "test",
-      "second",
-    ]
-  }
-/>
+<DropdownOverlay
+  placement="bottom-right"
+>
+  <TagsSelector
+    listSize={10}
+    onSearch={[Function]}
+    onSelect={[Function]}
+    onUnselect={[Function]}
+    selectedTags={
+      Array [
+        "mytag",
+      ]
+    }
+    tags={
+      Array [
+        "test",
+        "second",
+      ]
+    }
+  />
+</DropdownOverlay>
 `;
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetSeverityPopup-test.js.snap b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetSeverityPopup-test.js.snap
index f5cc9cfed81..f8818f53cab 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetSeverityPopup-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetSeverityPopup-test.js.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render tags popup correctly 1`] = `
-<BubblePopup
-  customClass="bubble-popup-menu bubble-popup-bottom"
->
+<DropdownOverlay>
   <SelectList
     currentItem="MAJOR"
     items={
@@ -68,5 +66,5 @@ exports[`should render tags popup correctly 1`] = `
       severity.INFO
     </SelectListItem>
   </SelectList>
-</BubblePopup>
+</DropdownOverlay>
 `;
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetTransitionPopup-test.js.snap b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetTransitionPopup-test.js.snap
index 2b0be175cbe..a9728b1687a 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetTransitionPopup-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetTransitionPopup-test.js.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render tags popup correctly 1`] = `
-<BubblePopup
-  customClass="bubble-popup-menu bubble-popup-bottom"
->
+<DropdownOverlay>
   <SelectList
     currentItem="confirm"
     items={
@@ -45,5 +43,5 @@ exports[`should render tags popup correctly 1`] = `
       issue.transition.wontfix
     </SelectListItem>
   </SelectList>
-</BubblePopup>
+</DropdownOverlay>
 `;
diff --git a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetTypePopup-test.js.snap b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetTypePopup-test.js.snap
index 190d91cb61b..5055d807449 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetTypePopup-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/popups/__tests__/__snapshots__/SetTypePopup-test.js.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render tags popup correctly 1`] = `
-<BubblePopup
-  customClass="bubble-popup-menu bubble-popup-bottom"
->
+<DropdownOverlay>
   <SelectList
     currentItem="BUG"
     items={
@@ -46,5 +44,5 @@ exports[`should render tags popup correctly 1`] = `
       issue.type.CODE_SMELL
     </SelectListItem>
   </SelectList>
-</BubblePopup>
+</DropdownOverlay>
 `;