openui / openui/open-ui

Should it be possible to open overscroll areas "modally", and if so, how?

Open
#1,384 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs-triage overscroll
Dominant language
MDX
Stars
4.5k
Forks
226
Avg merge
2d 22h
Merged PRs (30d)
4

Description

It's been suggested that some use cases for overscroll actions might require the overscroll area to become modal when opened. It was also raised that if there's a ::backdrop pseudo element for overscroll areas, and it is darkened/blurred to obscure the background, then that should be a modal interaction pattern.

I'm a bit unclear on the concrete example use cases for this, so I'm hoping the community can help me enumerate these. It'd help (me at least) to be able to think about the interaction pattern in some specific cases.

Assuming there are use cases that require modal, the second question is how should that be achieved in the HTML. One suggestion is to just use a <dialog> element as the target overscroll element, which would then automatically become open in modal mode. That might be a little weird, given it would also be in the top layer, but perhaps we add a new special dialog "open in overscroll mode" mode, or something? E.g.

<div overscrollcontainer>
    <dialog id="modal">Modal contents</dialog>
    ...Regular content...
</div>

<button commandfor="modal" command="toggle-overscroll">
  Toggle Modal Dialog Menu
</button>

Are there other ideas?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the overscroll actions explainer and the discussion linked from issue 1372. Enumerate concrete cases that require modal behavior, then compare using a dialog element with other approaches such as a dedicated overscroll mode. Done means the use cases and the HTML mechanism are clearly documented and agreed upon.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
design, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.