palantir/blueprint

Toaster (static usage): Toast Notifications no longer appear at bottom of a scrolled page (regression)

Open

#4 864 ouverte le 20 août 2021

Voir sur GitHub
 (3 commentaires) (0 réactions) (0 assignés)TypeScript (2 167 forks)batch import
Package: coreStatus: needs fix verificationType: bughelp wanted

Métriques du dépôt

Stars
 (20 263 stars)
Métriques de merge PR
 (Merge moyen 43j 10h) (27 PRs mergées en 30 j)

Description

Environment

  • Package version(s): 3.48.0
  • Operating System: Windows 10
  • Browser name and version: Google Chrome 92.0.4515.159

Code Sandbox

https://codesandbox.io/s/vibrant-waterfall-9bjnr

Steps to reproduce

  1. Use toaster component statically (toaster = Toaster.create(...)) with positioning set to bottom
  2. Display a toast (toaster.show(..)) while the page is scrolled

Actual behaviour

The toast notification appears at a location that isn't the bottom of the viewport. This behaviour seems to have been introduced in version 3.40.0.

Expected behaviour

Expected the behaviour of previous blueprintjs versions (i.e. 3.39.0):

  • Toast notifications always appear at the bottom of the viewport, regardless of scroll location.
  • Position of notification remain at the bottom while scrolling

Possible solution

Set toaster container to always use fixed positioning via CSS:

.bp3-toast-container {
  position: fixed !important;
}

This may break non-static usage of the toaster component (especially when usePortal=false)

Guide contributeur

Direction de recherche
Examinez le CSS du composant toaster dans le code source de Blueprint, en particulier la classe .bp3 toast container. Étudiez comment la position du conteneur est actuellement définie et si elle peut être changée en 'fixed' sans affecter d'autres cas d'utilisation. Prenez en compte la propriété usePortal et quand le positionnement fixe pourrait causer des problèmes. Vérifiez le CodeSandbox associé pour reproduire le bug. Consultez la discussion dans l'issue pour tout contexte supplémentaire ou solutions proposées.
Stack technique
typescriptreactcss
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
CSSReact
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
70