Add includeStyles option

docs-src/tutorials/02-usage.md

@@ -108,6 +108,8 @@ const myTour = new Shepherd.Tour(options);
 - `confirmCancelMessage`: The message to display in the confirm dialog
 - `defaultStepOptions`: Default options for Steps created through `addStep`
 - `exitOnEsc`: Exiting the tour with the escape key will be enabled unless this is explicitly set to `false`.
+- `includeStyles`: If false, the majority of the Shepherd styles will not be included.
+You may want to use this option if you find yourself overriding a lot of the Shepherd styles.
 - `keyboardNavigation`: Navigating the tour via left and right arrow keys will be enabled unless this is explicitly set to `false`.
 - `modalContainer` An optional container element for the modal. If not set, the modal will be appended to `document.body`.
 - `steps`: An array of step options objects or Step instances to initialize the tour with.
@@ -209,6 +211,7 @@ For example: `{selector: '.some-element', event: 'click'}`.  It doesn't have to
 You can also always manually advance the Tour by calling `myTour.next()`.
 - `highlightClass`: An extra class to apply to the `attachTo` element when it is highlighted (that is, when its step is active). You can then target that selector in your CSS.
 - `id`: The string to use as the `id` for the step. If an id is not passed one will be generated.
+- `modalOverlayOpeningPadding`: An amount of padding to add around the modal overlay opening
 - `showOn`: A function that, when it returns true, will show the step. If it returns false, the step will be skipped.
 - `scrollTo`: Should the element be scrolled to when this step is shown?
 - `scrollToHandler`: A function that lets you override the default `scrollTo` behavior and define a custom action to do the scrolling,

src/js/components/shepherd-content/shepherd-footer/shepherd-button/styles.js

@@ -1,34 +1,40 @@
 import { darken } from 'polished';
 
-export default function buttonStyles(classPrefix, variables) {
-  return {
-    button: {
-      background: variables.shepherdThemePrimary,
-      borderRadius: variables.shepherdButtonBorderRadius,
-      border: 0,
-      color: variables.shepherdThemeTextPrimary,
-      cursor: 'pointer',
-      display: 'inline-block',
-      fontFamily: 'inherit',
-      fontSize: '0.8em',
-      letterSpacing: '0.1em',
-      lineHeight: '1em',
-      marginRight: '0.5em',
-      padding: '0.75em 2em',
-      textTransform: 'uppercase',
-      transition: 'all 0.5s ease',
-      verticalAlign: 'middle',
-      '&:hover': {
-        background: darken(0.1, variables.shepherdThemePrimary)
-      },
-      [`&.${classPrefix}shepherd-button-secondary`]: {
-        background: variables.shepherdThemeSecondary,
-        color: variables.shepherdThemeTextSecondary,
+export default function buttonStyles(classPrefix, variables, includeStyles) {
+  if (includeStyles) {
+    return {
+      button: {
+        background: variables.shepherdThemePrimary,
+        borderRadius: variables.shepherdButtonBorderRadius,
+        border: 0,
+        color: variables.shepherdThemeTextPrimary,
+        cursor: 'pointer',
+        display: 'inline-block',
+        fontFamily: 'inherit',
+        fontSize: '0.8em',
+        letterSpacing: '0.1em',
+        lineHeight: '1em',
+        marginRight: '0.5em',
+        padding: '0.75em 2em',
+        textTransform: 'uppercase',
+        transition: 'all 0.5s ease',
+        verticalAlign: 'middle',
         '&:hover': {
-          background: darken(0.1, variables.shepherdThemeSecondary),
-          color: darken(0.1, variables.shepherdThemeTextSecondary)
+          background: darken(0.1, variables.shepherdThemePrimary)
+        },
+        [`&.${classPrefix}shepherd-button-secondary`]: {
+          background: variables.shepherdThemeSecondary,
+          color: variables.shepherdThemeTextSecondary,
+          '&:hover': {
+            background: darken(0.1, variables.shepherdThemeSecondary),
+            color: darken(0.1, variables.shepherdThemeTextSecondary)
+          }
         }
       }
-    }
+    };
+  }
+
+  return {
+    button: {}
   };
 }

src/js/components/shepherd-content/shepherd-footer/styles.js

@@ -1,16 +1,22 @@
-export default function footerStyles(classPrefix, variables) {
-  return {
-    footer: {
-      borderBottomLeftRadius: variables.shepherdElementBorderRadius,
-      borderBottomRightRadius: variables.shepherdElementBorderRadius,
-      display: 'flex',
-      justifyContent: 'flex-end',
-      padding: '0 0.75em 0.75em',
-      [`.${classPrefix}shepherd-button`]: {
-        '&:last-child': {
-          marginRight: 0
+export default function footerStyles(classPrefix, variables, includeStyles) {
+  if (includeStyles) {
+    return {
+      footer: {
+        borderBottomLeftRadius: variables.shepherdElementBorderRadius,
+        borderBottomRightRadius: variables.shepherdElementBorderRadius,
+        display: 'flex',
+        justifyContent: 'flex-end',
+        padding: '0 0.75em 0.75em',
+        [`.${classPrefix}shepherd-button`]: {
+          '&:last-child': {
+            marginRight: 0
+          }
         }
       }
-    }
+    };
+  }
+
+  return {
+    footer: {}
   };
 }

src/js/components/shepherd-content/shepherd-header/styles.js

@@ -1,7 +1,33 @@
 import { getLighterOrDarker } from '../../../styles/utils';
 
-export default function headerStyles(classPrefix, variables) {
-  return {
+export default function headerStyles(classPrefix, variables, includeStyles) {
+  const header = {
+    alignItems: 'center',
+    borderTopLeftRadius: variables.shepherdElementBorderRadius,
+    borderTopRightRadius: variables.shepherdElementBorderRadius,
+    display: 'flex',
+    justifyContent: 'flex-end',
+    lineHeight: '2em',
+    padding: '0.75em 0.75em 0',
+    [`.${classPrefix}shepherd-has-title .${classPrefix}shepherd-content &`]: {
+      background: variables.shepherdHeaderBackground,
+      padding: '1em'
+    }
+  };
+
+  const title = {
+    color: variables.shepherdThemeTextHeader,
+    display: 'flex',
+    flex: '1 0 auto',
+    fontSize: '1.1em',
+    fontWeight: 'normal',
+    margin: 0,
+    padding: 0,
+    position: 'relative',
+    verticalAlign: 'middle'
+  };
+
+  let styles = {
     'cancel-icon': {
       background: 'transparent',
       border: 'none',
@@ -24,32 +50,22 @@ export default function headerStyles(classPrefix, variables) {
           color: variables.shepherdThemeTextHeader
         }
       }
-    },
-
-    header: {
-      alignItems: 'center',
-      borderTopLeftRadius: variables.shepherdElementBorderRadius,
-      borderTopRightRadius: variables.shepherdElementBorderRadius,
-      display: 'flex',
-      justifyContent: 'flex-end',
-      lineHeight: '2em',
-      padding: '0.75em 0.75em 0',
-      [`.${classPrefix}shepherd-has-title .${classPrefix}shepherd-content &`]: {
-        background: variables.shepherdHeaderBackground,
-        padding: '1em'
-      }
-    },
-
-    title: {
-      color: variables.shepherdThemeTextHeader,
-      display: 'flex',
-      flex: '1 0 auto',
-      fontSize: '1.1em',
-      fontWeight: 'normal',
-      margin: 0,
-      padding: 0,
-      position: 'relative',
-      verticalAlign: 'middle'
     }
   };
+
+  if (includeStyles) {
+    styles = {
+      ...styles,
+      header,
+      title
+    };
+  } else {
+    styles = {
+      ...styles,
+      header: {},
+      title: {}
+    };
+  }
+
+  return styles;
 }

src/js/components/shepherd-content/shepherd-text/styles.js

@@ -1,17 +1,23 @@
-export default function textStyles(variables) {
-  return {
-    text: {
-      color: variables.shepherdThemeTextColor,
-      fontSize: variables.shepherdTextFontSize,
-      lineHeight: variables.shepherdTextLineHeight,
-      padding: '0.75em',
-      p: {
-        marginTop: 0,
+export default function textStyles(variables, includeStyles) {
+  if (includeStyles) {
+    return {
+      text: {
+        color: variables.shepherdThemeTextColor,
+        fontSize: variables.shepherdTextFontSize,
+        lineHeight: variables.shepherdTextLineHeight,
+        padding: '0.75em',
+        p: {
+          marginTop: 0,
 
-        '&:last-child': {
-          marginBottom: 0
+          '&:last-child': {
+            marginBottom: 0
+          }
         }
       }
-    }
+    };
+  }
+
+  return {
+    text: {}
   };
 }

src/js/components/shepherd-content/styles.js

@@ -1,11 +1,17 @@
-export default function contentStyles(variables) {
+export default function contentStyles(variables, includeStyles) {
+  if (includeStyles) {
+    return {
+      content: {
+        background: variables.shepherdTextBackground,
+        borderRadius: variables.shepherdElementBorderRadius,
+        fontSize: 'inherit',
+        outline: 'none',
+        padding: 0
+      }
+    };
+  }
+
   return {
-    content: {
-      background: variables.shepherdTextBackground,
-      borderRadius: variables.shepherdElementBorderRadius,
-      fontSize: 'inherit',
-      outline: 'none',
-      padding: 0
-    }
+    content: {}
   };
 }

src/js/styles/generateStyles.js

@@ -14,6 +14,7 @@ export function generateStyles(options) {
   const variables = getVariables(options);
   const classPrefix = normalizePrefix(options.classPrefix);
   const tippyPrefix = normalizePrefix(options.tippyClassPrefix);
+  const { includeStyles } = options;
 
   const styles = {
     active: {
@@ -32,13 +33,13 @@ export function generateStyles(options) {
       }
     },
 
-    ...buttonStyles(classPrefix, variables),
-    ...contentStyles(variables),
+    ...buttonStyles(classPrefix, variables, includeStyles),
+    ...contentStyles(variables, includeStyles),
     ...elementStyles(),
-    ...footerStyles(classPrefix, variables),
-    ...headerStyles(classPrefix, variables),
+    ...footerStyles(classPrefix, variables, includeStyles),
+    ...headerStyles(classPrefix, variables, includeStyles),
     ...modalStyles(classPrefix, variables),
-    ...textStyles(variables)
+    ...textStyles(variables, includeStyles)
   };
 
   if (variables.useDropShadow) {

src/js/tour.jsx

@@ -44,6 +44,8 @@ export class Tour extends Evented {
    * mousewheel, arrow keys, etc. You may want to use this to ensure you are driving the scroll position with the tour.
    * @param {boolean} options.exitOnEsc Exiting the tour with the escape key will be enabled unless this is explicitly
    * set to false.
+   * @param {boolean} options.includeStyles If false, the majority of the Shepherd styles will not be included.
+   * You may want to use this option if you find yourself overriding a lot of the Shepherd styles.
    * @param {boolean} options.keyboardNavigation Navigating the tour via left and right arrow keys will be enabled
    * unless this is explicitly set to false.
    * @param {HTMLElement} options.modalContainer An optional container element for the modal.
@@ -65,12 +67,13 @@ export class Tour extends Evented {
 
     const defaultTourOptions = {
       exitOnEsc: true,
+      includeStyles: true,
       keyboardNavigation: true
     };
 
     this.options = Object.assign({}, defaultTourOptions, options);
     this.classPrefix = this.options ? normalizePrefix(this.options.classPrefix) : '';
-    this.styles = generateStyles(options);
+    this.styles = generateStyles(this.options);
     this.steps = [];
     this.addSteps(this.options.steps);
 

src/types/step.d.ts

@@ -113,9 +113,9 @@ declare namespace Step {
     id?: string;
 
     /**
-     * Extra [options to pass to tippy.js]{@link https://atomiks.github.io/tippyjs/#all-options}
+     * An amount of padding to add around the modal overlay opening
      */
-    tippyOptions?: object;
+    modalOverlayOpeningPadding?: number;
 
     /**
      * Should the element be scrolled to when this step is shown?
@@ -145,6 +145,11 @@ declare namespace Step {
      */
     text?: string | ReadonlyArray<string> | HTMLElement | (() => string | ReadonlyArray<string> | HTMLElement)
 
+    /**
+     * Extra [options to pass to tippy.js]{@link https://atomiks.github.io/tippyjs/#all-options}
+     */
+    tippyOptions?: object;
+
     /**
      * The step's title. It becomes an `h3` at the top of the step.
      */

src/types/tour.d.ts

@@ -122,6 +122,12 @@ declare namespace Tour {
      */
     exitOnEsc?: boolean;
 
+    /**
+     * If false, the majority of the Shepherd styles will not be included.
+     * You may want to use this option if you find yourself overriding a lot of the Shepherd styles.
+     */
+    includeStyles?: boolean;
+
     /**
      * Navigating the tour via left and right arrow keys will be enabled
      * unless this is explicitly set to false.