classPrefix not working?

sn3p commented 4 years ago

I don't see any effect:

https://codepen.io/snap/pen/dyoLWBw?editors=0010

sn3p commented 4 years ago

Mhm ok, it seems only the body classes are prefixed:

<body class="foo-shepherd-enabled foo-shepherd-target">

Not sure if this is by design, but the docs state that ALL classes will be prefixed:

classPrefix	string	The prefix to add to all the shepherd-* class names.

RobbieTheWagner commented 4 years ago

@sn3p yes, they are no longer all prefixed. The idea is you prefix only the necessary ones for styling.

sn3p commented 4 years ago

Ok, prolly want to change this in the docs as well then 😄

I get your point, but in our case we are using CSS Modules to scope classnames. Our preferred way is to scope all classes to the component to prevent style leakage.

samywang92 commented 4 years ago

Hello!

I thought I was having the same issue till I found this post. However, I still have some questions. I see in the typing comments that classPrefix only applies to

The prefix to add to the `shepherd-enabled` and `shepherd-target` class names as well as the `data-shepherd-step-id`.

I'm not sure if this applies to shepherd-header classes? I currently have 2 tour instances and want to have different backround-color for each. Currently I am just overwriting the default shepherd-header class to change it for both to 1 color. Is there still a way to apply different styling to 'title's?

RobbieTheWagner commented 4 years ago

@samywang92 the classPrefix is only added to those elements, but it will work for what you want to do. For example, you would do something like this:

.my-prefix-shepherd-enabled .shepherd-header {
  background-color: blue;
}

Each individual step also has the classes option if you need to style certain steps differently.

samywang92 commented 4 years ago

@rwwagner90 Thank you for the swift reply! I tried your example and it did not work for me. I examined the elements and it seems that only my targeted element gets the tour-dashboard-shepherd-enabled class.

Unfortunately my step does not. It gets the tour-dashboard added to the step-id but not to shepherd-enabled.

<div aria-describedby="step-cecd3a6a-be16-448c-93c9-51effd5feebf-description" aria-labelledby="step-cecd3a6a-be16-448c-93c9-51effd5feebf-label" role="dialog" tabindex="0" class="shepherd-has-title shepherd-element shadow-md bg-purple-dark shepherd-enabled" data-tour-dashboard-shepherd-step-id="step-cecd3a6a-be16-448c-93c9-51effd5feebf" style="position: absolute; left: 0px; top: 0px; margin: 0px; right: auto; bottom: auto; transform: translate(0px, 47px);" data-popper-escaped="" data-popper-placement="bottom">

I tried using classes on the step but setting background-color changes the shepherd-content background and not the shepherd-header. What am I doing wrong?

RobbieTheWagner commented 4 years ago

@samywang92 I don't understand. shepherd-enabled is a wrapper for all steps. To change the shepherd-header style you'll want to do what I suggested.

RobbieTheWagner commented 4 years ago

@samywang92 here is a CodePen https://codepen.io/rwwagner90/pen/ExPvWgX

samywang92 commented 4 years ago

I have the same settings as your codepen however I couldn't get it to work with classPrefix. I was able to get it to style by adding a custom class name to defaultStepOptions since it applies to the parent of shepherd-header and styled accordingly with css though!

Maybe its something with vue/nuxt? Not exactly sure but thank you for your assistance!

RobbieTheWagner commented 4 years ago

@samywang92 with the same settings, it should work the same way. The JS framework should not matter. Please make sure to match the settings up exactly, and if it does not work, please provide us with a reproduction.

samywang92 commented 4 years ago

Using Nuxt: 2.10.2 Vue-shepherd: 0.2.1

Set up with a shepherd.js Nuxt plugin:

import Vue from 'vue'
import VueShepherd from 'vue-shepherd'
import 'shepherd.js'
import 'shepherd.js/dist/css/shepherd.css'

Vue.use(VueShepherd)

nuxt.config.js:

...
  plugins: [
    ...,
    '@/plugins/shepherd'
  ],
...

css:

.tour-dashboard-shepherd-enabled .shepherd-element .shepherd-header {
  background-color: purple;
}

component within mounted():

    const firstTime = cookie.get('dashBoardFirst')
    this.$nextTick(() => {
      const tour = this.$shepherd({
        defaultStepOptions: {
          classes: 'shadow-md bg-purple-dark',
          scrollTo: true
        },
        useModalOverlay: true,
        classPrefix: 'tour-dashboard'
      })

      tour.addStep({
        title: '<h4 class="tour-font tour-header">Welcome!</h4>',
        attachTo: { element: '#element-id', on: 'top' },
        text: `<pre class="tour-font">Thank you for using our service, \nlet's get started!</pre>`,
        buttons: [
          {
            action() {
              return this.back()
            },
            classes: 'tour-btn-secondary tour-font',
            text: 'Back'
          },
          {
            action() {
              return this.next()
            },
            text: 'Next',
            classes: 'tour-dashboard-btn-primary tour-font'
          }
        ]
      })

      if (firstTime === undefined || firstTime !== 'false') {
        tour.start()
        cookie.set('dashBoardFirst', 'false')
      }

RobbieTheWagner commented 4 years ago

@samywang92 seems like that should be okay. What's the problem with it?

samywang92 commented 4 years ago

.tour-dashboard-shepherd-enabled .shepherd-element .shepherd-header {
  background-color: purple;
}

Styling shepherd-header with classPrefix does not work. The background is the default grey.

RobbieTheWagner commented 4 years ago

@samywang92 that does not tell us much. We would need to know is the classPrefix not added or something are your style selector wrong, etc. Like what is the actual problem? If you can make a reproduction on CodePen or CodeSandbox or something, we can help you debug, but since my CodePen works, I would compare all the things and see what's going wrong.

shepherd-pro / shepherd

classPrefix not working? #876