patternfly / patternfly/patternfly-react

Scrollable areas - add dynamic shadows based on scroll position

Ouverte
#11,817 5 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

PF Team Stale
Langage dominant
TypeScript
Étoiles
862
Forks
392
Merge moyen
4 j 8 h
PR mergées (30 j)
9

Description

From @jamestalton, I wanted to create an issue to track a request I've heard from James a few times. It would be super cool if PF was able to add shadows to scrollable regions dynamically. A good example we could currently work with is scrollable page sections. You designate a page section as .pf-m-overflow-scroll, and by default, it looks like any other page section. However, if its content is taller than the section, it will automatically add a scrollbar and the content becomes scrollable. PF could detected that there is overflow and added a shadow dynamically. Currently users can add shadows themselves by adding .pf-m-shadow-bottom (one for a top shadow, too) to the preceding page section, but that class adds a static shadow. If you add it because the section below has the potential to scroll, but doesn't scroll because there is no overflow content, the shadow appears unnecessarily.

Some questions:

  • Currently a user could wire this up themselves, but should PF provide this ability?

  • Would this be enabled for all scrollable regions? Sounds like that has the potential to create a lot of work to implement/maintain.

  • Is there any kind of performance cost?

  • Are there other cases for dynamic shadows - for example, adding a shadow only once you've scrolled a little bit? What's the LEO for that and does it come with performance costs?

Anything else you'd like to add @jamestalton?


Jira Issue: PF-1775

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par la démo overflow-scroll des sections de page défilables liées et examinez le comportement actuel de .pf-m-overflow-scroll et .pf-m-shadow-bottom. Clarifiez si les ombres dynamiques doivent s’appliquer de manière générale ou uniquement aux sections de page, notamment les attentes en matière de performances et les états de défilement souhaités. La tâche est considérée comme terminée lorsque le périmètre et le comportement ont été convenus avant le début de l’implémentation.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
css, react, typescript
Domaine
design, frontend
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
Calme
Clarté
À clarifier
Accessibilité débutants
30/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.