Tippy 4 (#336)

* Start updating to tippy 4

We still need to do `arrowTransform` in CSS, as this option was deprecated, and something seems to have changed the width of the tippys

* Add arrow transform to styles

package.json

@@ -47,7 +47,8 @@
   "dependencies": {
     "element-matches": "^0.1.2",
     "lodash-es": "^4.17.11",
-    "tippy.js": "^3.4.1"
+    "popper.js": "^1.14.7",
+    "tippy.js": "^4.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",

src/js/tour.js

@@ -1,4 +1,3 @@
-import { injectCSS } from './css';
 import isEmpty from 'lodash-es/isEmpty';
 import isFunction from 'lodash-es/isFunction';
 import isNumber from 'lodash-es/isNumber';
@@ -9,7 +8,6 @@ import { Modal } from './modal.js';
 import { Step } from './step.js';
 import { bindMethods } from './bind.js';
 import tippy from 'tippy.js';
-import tippyStyles from 'tippy.js/dist/tippy.css';
 import { defaults as tooltipDefaults } from './utils/tooltip-defaults';
 
 import {
@@ -87,8 +85,6 @@ export class Tour extends Evented {
     this._setTooltipDefaults();
     this._setTourID();
 
-    injectCSS(tippyStyles);
-
     return this;
   }
 

src/js/utils.js

@@ -140,7 +140,7 @@ function _makeTippyInstance(attachToOptions) {
 
   const tippyOptions = _makeAttachedTippyOptions.call(this, attachToOptions);
 
-  return tippy.one(attachToOptions.element, tippyOptions);
+  return tippy(attachToOptions.element, tippyOptions);
 }
 
 /**
@@ -199,5 +199,5 @@ function _makeCenteredTippy() {
 
   tippyOptions.popperOptions = finalPopperOptions;
 
-  return tippy.one(document.body, tippyOptions);
+  return tippy(document.body, tippyOptions);
 }

src/js/utils/tooltip-defaults.js

@@ -1,7 +1,6 @@
 export const defaults = {
   trigger: 'manual',
   arrow: true,
-  arrowTransform: 'scale(2)',
   animation: 'fade',
   duration: 420,
   flip: true,

src/scss/tippy/_base-tooltips.scss

@@ -12,6 +12,10 @@
  * </div>
  */
 
+.tippy-arrow {
+  transform: scale(2);
+}
+
 .tippy-popper {
   @include popper-theme-arrows($arrow-size: $arrow-size, $arrow-pointer-events: $arrow-pointer-events);
 

test/cypress/integration/element-targeting.spec.js

@@ -6,7 +6,7 @@ describe('Attaching tooltips to target elements in the DOM on each step', () =>
 
   beforeEach(() => {
     Shepherd = null;
-    tippy.disableAnimations();
+    tippy.setDefaults({ duration: 0, delay: 0 });
 
     cy.visit('/test/dummy/', {
       onLoad(contentWindow) {

test/cypress/integration/modal.spec.js

@@ -12,7 +12,7 @@ describe('Modal mode', () => {
 
   beforeEach(() => {
     Shepherd = null;
-    tippy.disableAnimations();
+    tippy.setDefaults({ duration: 0, delay: 0 });
 
     cy.visit('/test/dummy/', {
       onLoad(contentWindow) {
@@ -22,7 +22,7 @@ describe('Modal mode', () => {
       }
     });
   });
-  
+
   afterEach(() => {
     tour.complete();
   });
@@ -56,7 +56,7 @@ describe('Modal mode', () => {
       cy.get('body').should('not.have.class', modalClassNames.isVisible);
     });
   });
-  
+
   describe('hide', () => {
     beforeEach(() => {
       tour = setupTour(Shepherd, {}, null, { useModalOverlay: true });

test/cypress/integration/test.acceptance.js

@@ -7,7 +7,7 @@ let Shepherd;
 describe('Shepherd Acceptance Tests', () => {
   beforeEach(() => {
     Shepherd = null;
-    tippy.disableAnimations();
+    tippy.setDefaults({ duration: 0, delay: 0 });
 
     cy.visit('/test/dummy/', {
       onLoad(contentWindow) {

test/unit/step.spec.js

@@ -85,7 +85,7 @@ describe('Tour | Step', () => {
     });
 
     beforeEach(() => {
-      tippy.disableAnimations();
+      tippy.setDefaults({ duration: 0, delay: 0 });
     });
 
     afterEach(() => {

test/unit/tour.spec.js

@@ -20,7 +20,7 @@ describe('Tour | Top-Level Class', function() {
   };
 
   beforeEach(() => {
-    tippy.disableAnimations();
+    tippy.setDefaults({ duration: 0, delay: 0 });
   });
 
   afterEach(() => {

yarn.lock

@@ -7307,10 +7307,10 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
-popper.js@^1.14.6:
-  version "1.14.6"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.6.tgz#ab20dd4edf9288b8b3b6531c47c361107b60b4b0"
-  integrity sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA==
+popper.js@^1.14.7:
+  version "1.14.7"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.7.tgz#e31ec06cfac6a97a53280c3e55e4e0c860e7738e"
+  integrity sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==
 
 portfinder@^1.0.13:
   version "1.0.20"
@@ -9570,12 +9570,12 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tippy.js@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-3.4.1.tgz#f0eb3081824ad6c5d364336451ad77ae2f543da8"
-  integrity sha512-ZiyGP9WZyCCcjxKM4G88cm4U1r1ytjeMDGa5FSKPaPzwc/3yZJVZsb1ffcmqUMCpryRp5LNxRNGKLzbs11sb/Q==
+tippy.js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.0.1.tgz#abe33909253e7e5266110ee05b80ba631da13951"
+  integrity sha512-tpq0ITPBmLND0WEuVPEnCI3IGDCZjO81o/qdQFAsHdIhtUJ6vx7eOmbBWRmPm/StLC7Cbbqmba+G8VixAeyVzA==
   dependencies:
-    popper.js "^1.14.6"
+    popper.js "^1.14.7"
 
 tmp@0.0.31:
   version "0.0.31"