shipshapecode/shepherd

classPrefix breaks target blocking

Open

#1 298 ouverte le 15 janv. 2021

Voir sur GitHub
 (8 commentaires) (0 réactions) (0 assignés)JavaScript (622 forks)batch import
buggood first issue

Métriques du dépôt

Stars
 (11 601 stars)
Métriques de merge PR
 (Merge moyen 3m) (1 PR mergée en 30 j)

Description

If you specify a classPrefix in the tour options, any highlighted elements in steps where canClickTarget = true are still clickable because the following css selector breaks:

.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{
    pointer-events:none
}

The following custom css rule has to be added, taking into account the classPrefix:

.shepherd-target-click-disabled.walkthrough-shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.walkthrough-shepherd-enabled.shepherd-target *{
    pointer-events:none
}

Guide contributeur

Direction de recherche
Le problème est que le sélecteur CSS pour désactiver le clic sur les éléments cibles utilise une classe codée en dur '.shepherd target click disabled' etc., mais lorsqu'un classPrefix personnalisé est utilisé, ces sélecteurs doivent inclure le préfixe. Pour corriger, localisez où le CSS est défini (probablement dans les styles du composant ou un module CSS) et modifiez le sélecteur pour qu'il soit dynamique en fonction de l'option classPrefix. Vérifiez la logique de rendu des étapes et assurez vous que le style pointer events est appliqué avec la classe correcte. La correction peut impliquer de mettre à jour l'objet de style ou d'injecter une règle avec le préfixe.
Stack technique
javascript
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
CSS selectorsJavaScript
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
60