PreviewTrigger: option to open on press (tap) instead of long press on touch devices

Aperta
  • Qualcosa non va?
#10,777 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
30/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start with the PreviewTrigger component and its long-press handling, then read how the hover, focus and press events open the popover. The issue leaves the API open (a touchTrigger prop or an openOnPress boolean, or a configurable long-press delay), so a maintainer must choose one before coding. Done means a tap toggles the popover with the option on, long press stays the default, and tests cover mouse, keyboard and touch. Read #8905 and #10243 for the earlier decisions.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement
Provide a general summary of the feature here

Add an option to PreviewTrigger so a regular press (a tap on touch devices) opens the preview. Today a touch user has to long press. The option is for triggers whose only job is to show the popover, such as an info button, rather than links.

🤔 Expected Behavior?

With the option on (for example <PreviewTrigger openOnPress> or touchTrigger="press"):

  • Mouse: hover opens after the usual delay, as now. Clicking the trigger also toggles the popover.
  • Keyboard: focus opens it, as now. Enter or Space toggles it.
  • Touch: a tap toggles the popover. Pressing outside or Escape closes it, as with any non-modal popover.

Long press stays the default, so link previews keep working as they do today.

😯 Current Behavior

PreviewTrigger opens on hover, on focus and on long press. A tap runs the trigger's own action (onPress, or navigation for a Link).

That's right for link previews. But when the trigger's only purpose is to reveal the popover (an info icon next to a field label or table header, for example), touch users have to discover a long press. Tooltip isn't an alternative, because it isn't shown on touch at all, and it can't contain interactive content anyway.

The workaround is to combine useHover with a controlled DialogTrigger/Popover. That means re-implementing the warmup and cooldown delays, the safe-area polygon and the focus behaviour that PreviewTrigger already handles.

💁 Possible Solution

Either of these would work for us:

  1. Open on press. Add a prop that sets how touch users open the preview, for example touchTrigger?: 'longPress' | 'press' (default 'longPress'), or a boolean openOnPress that makes a press on any pointer type toggle the popover.
  2. Configurable long-press threshold. If it fits the current implementation better, expose the long-press delay as a prop. Setting it to 0 for these triggers would give the same result as option 1.

Prior art: Base UI's Popover.Trigger has an openOnHover prop (https://base-ui.com/react/components/popover). Hover is mouse-only and click or tap always opens it, so the same trigger works on hover with a mouse and on tap with touch. This was mentioned in #8905, which PreviewTrigger (#10243) closed.

🔦 Context

We're building a design system on React Aria Components for a mature data product. A common pattern is a small "info" trigger next to labels and column headers. It opens a non-modal popover with a short explanation and sometimes a link. On desktop it should open on hover. On touch it needs to open on tap, because a long press on a plain icon button isn't discoverable.

PreviewTrigger is very close to what we need. It's only the touch gesture that rules it out for this pattern.

💻 Examples
<PreviewTrigger touchTrigger="press">
  <Button aria-label="About this field">
    <InfoIcon />
  </Button>
  <Popover>
    <Dialog>
      Rows are sampled from the last 7 days. <Link href="/docs/sampling">Learn more</Link>
    </Dialog>
  </Popover>
</PreviewTrigger>
Lingua principale
TypeScript
Stelle
16k
Fork
1.6k
Merge medio
4g 3h
PR unite (30g)
39

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di adobe/react-spectrum

Tutte le issue di adobe/react-spectrum

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.