.shepherd-popper -> .shepherd, move .shepherd-has-title

docs/welcome/css/welcome.css

@@ -47,24 +47,28 @@ body {
   width: 100%;
 }
 
-.hero-outer .hero-inner {
-  margin: 0 auto 1em;
-  text-align: center;
-  width: 540px;
+.hero-inner {
+  max-width: 700px;
+  width: 90%;
 }
 
 @media (max-width: 600px) {
-  .hero-outer .hero-inner {
+  .hero-inner {
     width: 340px;
   }
 }
 
 @media (max-width: 360px) {
-  .hero-outer .hero-inner {
+  .hero-inner {
     width: 200px;
   }
 }
 
+.hero-outer .hero-inner {
+  margin: 0 auto 1em;
+  text-align: center;
+}
+
 .hero-outer .hero-inner h1,
 .hero-outer .hero-inner h2,
 .hero-outer .hero-inner h3,
@@ -112,20 +116,6 @@ pre {
   color: rgba(0, 0, 0, 0.75);
 }
 
-.tippy-popper.shepherd-popper[x-placement^='left'] {
-  margin-right: 16px;
-}
-
-.tippy-popper.shepherd-popper[x-placement^='right'] {
-  margin-left: 16px;
-}
-
-.tippy-popper.shepherd-popper .shepherd-element:not(.shepherd-has-title) .shepherd-content header,
-.tippy-popper.shepherd-popper .shepherd-element:not(.shepherd-has-title) .shepherd-content .shepherd-header {
-  background: transparent;
-  padding-bottom: 0;
-}
-
-.tippy-popper.shepherd-popper .shepherd-element .shepherd-content .shepherd-text {
+.tippy-popper.shepherd .shepherd-element .shepherd-content .shepherd-text {
   color: #336457;
 }

src/js/step.js

@@ -283,7 +283,6 @@ export class Step extends Evented {
       title.id = labelId;
       element.setAttribute('aria-labeledby', labelId);
       header.appendChild(title);
-      element.classList.add('shepherd-has-title');
     }
 
     content.classList.add('shepherd-content');

src/js/utils/general.js

@@ -2,14 +2,9 @@ import { isString, isUndefined } from './type-check';
 import tippy from 'tippy.js';
 import { missingTippy } from './error-messages';
 
-// popperOption modifier, to add shepherd-popper class to both default and centeredStyle poppers
-const addShepherdClass = {
-  enabled: true,
-  fn: (data) => {
-    data.instance.popper.classList.add('shepherd-popper');
-    return data;
-  }
-};
+// popperOption modifier, to add `shepherd` class to both default and centeredStyle poppers
+const addShepherdClass = _createClassModifier('shepherd');
+const addHasTitleClass = _createClassModifier('shepherd-has-title');
 
 const centeredStylePopperModifier = {
   computeStyle: {
@@ -138,6 +133,22 @@ export function parseAttachTo() {
   return returnOpts;
 }
 
+/**
+ * Create a popper modifier for adding the passed className to the popper
+ * @param {string} className The class to add to the popper
+ * @return {{fn(*): *, enabled: boolean}|*}
+ * @private
+ */
+function _createClassModifier(className) {
+  return {
+    enabled: true,
+    fn(data) {
+      data.instance.popper.classList.add(className);
+      return data;
+    }
+  };
+}
+
 /**
  * Generates a `Tippy` instance from a set of base `attachTo` options
  *
@@ -172,8 +183,7 @@ function _makeAttachedTippyOptions(attachToOptions) {
   Object.assign(resultingTippyOptions, this.options.tippyOptions);
 
   if (this.options.title) {
-    const existingTheme = resultingTippyOptions.theme;
-    resultingTippyOptions.theme = existingTheme ? `${existingTheme} shepherd-has-title` : 'shepherd-has-title';
+    Object.assign(defaultPopperOptions.modifiers, { addHasTitleClass });
   }
 
   if (this.options.tippyOptions && this.options.tippyOptions.popperOptions) {
@@ -203,6 +213,10 @@ function _makeCenteredTippy() {
   tippyOptions.arrow = false;
   tippyOptions.popperOptions = tippyOptions.popperOptions || {};
 
+  if (this.options.title) {
+    Object.assign(defaultPopperOptions.modifiers, { addHasTitleClass });
+  }
+
   const finalPopperOptions = Object.assign(
     {},
     defaultPopperOptions,

src/scss/_base.scss

@@ -13,11 +13,6 @@
     filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
   }
 
-  &.shepherd-has-title .shepherd-content header {
-    background: $shepherd-header-background;
-    padding: 1em;
-  }
-
   .shepherd-content {
     background: $shepherd-text-background;
     font-size: inherit;
@@ -112,3 +107,10 @@
     }
   }
 }
+
+.shepherd-has-title {
+  .shepherd-content header {
+    background: $shepherd-header-background;
+    padding: 1em;
+  }
+}

src/scss/tippy/_base-tooltips.scss

@@ -3,7 +3,7 @@
 /**
  * Shepherd-Tippy tooltips have the following base structure:
  *
- * <div class="tippy-popper shepherd-popper" x-placement="top">
+ * <div class="tippy-popper shepherd" x-placement="top">
  *   <div class="tippy-tooltip">
  *     <div class="tippy-content">
  *       [[ Content Here ]]
@@ -12,7 +12,7 @@
  * </div>
  */
 
-.tippy-popper.shepherd-popper {
+.tippy-popper.shepherd {
   @include popper-theme-arrows($arrow-size: $arrow-size, $arrow-pointer-events: $arrow-pointer-events);
 
   z-index: $shepherd-element-z-index;

src/scss/tippy/_popper-theme-arrows.scss

@@ -8,7 +8,7 @@
       border-top-color: $text-bg;
     }
 
-    .shepherd-has-title-theme {
+    &.shepherd-has-title {
       .tippy-arrow {
         border-top-color: $header-bg;
       }
@@ -22,7 +22,7 @@
       border-bottom-color: $text-bg;
     }
 
-    .shepherd-has-title-theme {
+    &.shepherd-has-title {
       .tippy-arrow {
         border-bottom-color: $header-bg;
       }
@@ -36,7 +36,7 @@
       border-left-color: $text-bg;
     }
 
-    .shepherd-has-title-theme {
+    &.shepherd-has-title {
       .tippy-arrow {
         border-left-color: $header-bg;
       }
@@ -50,7 +50,7 @@
       border-right-color: $text-bg;
     }
 
-    .shepherd-has-title-theme {
+    &.shepherd-has-title {
       .tippy-arrow {
         border-right-color: $header-bg;
       }