Merge branch 'ealcantara-popover-styling' into 'master'

Style popovers according to the design specs See merge request gitlab-org/gitlab-ce!28375

Merge branch 'ealcantara-popover-styling' into 'master'
Style popovers according to the design specs See merge request gitlab-org/gitlab-ce!28375
09419668 · Annabel Dunstone Gray · b6e56ed3 · 0ff97429 · 09419668 · 09419668
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -147,11 +147,6 @@ table {
  pointer-events: none;
 }

-.popover,
-.popover-header {
-  font-size: 14px;
-}
-
 @each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

--- a/app/assets/stylesheets/components/popover.scss
+++ b/app/assets/stylesheets/components/popover.scss
 .popover {
-  min-width: 300px;
-
-  .popover-body .user-popover {
-    padding: $gl-padding-8;
-    font-size: $gl-font-size-small;
-    line-height: $gl-line-height;
-
-    .category-icon {
-      color: $gray-600;
-    }
-  }
+  max-width: $popover-max-width;
+  border: 1px solid $gray-200;
+  box-shadow: 0 2px 3px 1px $gray-200;
+  font-size: $gl-font-size-small;

+  /**
+  * Blue popover variation
+  */
  &.blue {
    background-color: $blue-600;
+    border-color: $blue-600;

    .popover-body {
      color: $white-light;
    }

    &.bs-popover-bottom {
+      .arrow::before,
      .arrow::after {
        border-bottom-color: $blue-600;
      }
    }

    &.bs-popover-top {
+      .arrow::before,
      .arrow::after {
        border-top-color: $blue-600;
      }
    }
+
+    &.bs-popover-right {
+      .arrow::after,
+      .arrow::before {
+        border-right-color: $blue-600;
+      }
+    }
+
+    &.bs-popover-left {
+      .arrow::before,
+      .arrow::after {
+        border-left-color: $blue-600;
+      }
+    }
+  }
+}
+
+.bs-popover-top {
+  /* When popover position is top, the arrow is translated 1 pixel
+  *  due to the box-shadow include in our custom styles.
+  */
+  > .arrow::before {
+    border-top-color: $gray-200;
+    bottom: 1px;
+  }
+
+  > .arrow::after {
+    bottom: 2px;
+  }
+}
+
+.bs-popover-bottom {
+  > .arrow::before {
+    border-bottom-color: $gray-200;
+  }
+
+  > .popover-header::before {
+    border-color: $white-light;
+  }
+}
+
+.bs-popover-right > .arrow::before {
+  border-right-color: $gray-200;
+}
+
+.bs-popover-left > .arrow::before {
+  border-left-color: $gray-200;
+}
+
+.popover-header {
+  background-color: $white-light;
+  font-size: $gl-font-size-small;
+}
+
+.popover-body {
+  padding: $gl-padding $gl-padding-12;
+
+  > .popover-hr {
+    margin: $gl-padding 0;
  }
 }

+/**
+* mr_popover component
+*/
 .mr-popover {
  .text-secondary {
    font-size: 12px;
@@ -58,6 +119,18 @@
  }
 }

+/**
+* user_popover component
+*/
+.user-popover {
+  padding: $gl-padding-8;
+  line-height: $gl-line-height;
+
+  .category-icon {
+    color: $gray-600;
+  }
+}
+
 .onboarding-welcome-page {
  .popover {
    min-width: auto;

--- a/app/assets/stylesheets/framework/feature_highlight.scss
+++ b/app/assets/stylesheets/framework/feature_highlight.scss
@@ -39,7 +39,7 @@
  display: none;

  hr {
-    margin: $gl-padding * 0.5 0;
+    margin: $gl-padding 0;
  }

  .btn-link {
@@ -71,9 +71,6 @@

 .feature-highlight-popover {
  width: 240px;
-  padding: 0;
-  border: 1px solid $border-color;
-  box-shadow: 0 2px 4px $dropdown-shadow-color;

  &.right > .arrow {
    border-right-color: $border-color;
@@ -85,7 +82,7 @@
 }

 .feature-highlight-popover-sub-content {
-  padding: 9px 14px;
+  padding: $gl-padding $gl-padding-12;
 }

 @include keyframes(pulse-highlight) {

--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -336,6 +336,7 @@ $tooltip-font-size: 12px;
 */
 $gl-padding-4: 4px;
 $gl-padding-8: 8px;
+$gl-padding-12: 12px;
 $gl-padding: 16px;
 $gl-padding-24: 24px;
 $gl-padding-32: 32px;
@@ -809,6 +810,11 @@ $modal-border-color: #e9ecef;

 $priority-label-empty-state-width: 114px;

+/*
+Popovers
+*/
+$popover-max-width: 384px;
+
 /*
 Issues Analytics
 */

--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -230,27 +230,6 @@ $status-box-line-height: 26px;
  background-color: $white-light;
 }

-.milestone-deprecation-message {
-  .popover {
-    padding: 0;
-  }
-
-  .popover-body,
-  .popover-content {
-    padding: 0;
-  }
-}
-
-.milestone-popover-body {
-  padding: $gl-padding-8;
-  background-color: $gray-light;
-}
-
-.milestone-popover-footer {
-  padding: $gl-padding-8 $gl-padding;
-  border-top: 1px solid $white-dark;
-}
-
 .milestone-popover-instructions-list {
  padding-left: 2em;


--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -136,7 +136,6 @@
    > .popover-header,
    > .popover-body {
      padding: 8px;
-      font-size: 12px;
      white-space: nowrap;
      position: relative;
    }

--- a/app/views/shared/milestones/_deprecation_message.html.haml
+++ b/app/views/shared/milestones/_deprecation_message.html.haml
@@ -11,4 +11,5 @@
      %ol.milestone-popover-instructions-list.append-bottom-0
        %li= _('Click any <strong>project name</strong> in the project list below to navigate to the project milestone.').html_safe
        %li= _('Click the <strong>Promote</strong> button in the top right corner to promote it to a group milestone.').html_safe
+    %hr.popover-hr
    .milestone-popover-footer= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-link prepend-left-0', target: '_blank'