shipshapecode/shepherd

classPrefix breaks target blocking

Open

#1.298 geöffnet am 15. Jan. 2021

Auf GitHub ansehen
 (8 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (622 Forks)batch import
buggood first issue

Repository-Metriken

Stars
 (11.601 Stars)
PR-Merge-Metriken
 (Durchschn. Merge 3m) (1 gemergte PR in 30 T)

Beschreibung

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
}

Contributor Guide

Research-Richtung
Das Problem besteht darin, dass der CSS Selektor zum Deaktivieren von Klicks auf Zielelemente eine fest codierte Klasse '.shepherd target click disabled' usw. verwendet, aber wenn ein benutzerdefiniertes classPrefix verwendet wird, sollten diese Selektoren das Präfix enthalten. Um dies zu beheben, suchen Sie, wo das CSS definiert ist (wahrscheinlich in den Stilen der Komponente oder einem CSS Modul), und ändern Sie den Selektor so, dass er dynamisch auf der Grundlage der classPrefix Option ist. Überprüfen Sie die Schritt Rendering Logik und stellen Sie sicher, dass der pointer events Stil mit der richtigen Klasse angewendet wird. Die Lösung kann die Aktualisierung des Stilobjekts oder das Einfügen einer Regel mit dem Präfix umfassen.
Tech Stack
javascript
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
CSS selectorsJavaScript
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
60