patternfly / patternfly/patternfly-react
Scrollable areas - add dynamic shadows based on scroll position
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 862
- Forks
- 392
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked scrollable page sections overflow-scroll demo and review how .pf-m-overflow-scroll and .pf-m-shadow-bottom currently behave. Clarify whether dynamic shadows should apply broadly or only to page sections, including performance expectations and the desired scrolled states. Done means the scope and behavior are agreed before implementation begins.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, react, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100