Sistema di progettazione Twilio Paste.

Sistema di progettazione sistema di design Twilio Paste: usa il sistema upstream senza confonderlo con la diramazione della documentazione

Fonte Twilio e continuazione indipendente

Paste è pubblicato nel repository twilio-labs. Durante la verifica, i vecchi percorsi della documentazione su paste.twilio.design reindirizzavano a quel repository. Il sito Paste DSys, ospitato separatamente, si presenta come una diramazione indipendente senza affiliazione con Twilio. Questa guida basa quindi i valori dei token e il comportamento dei componenti sui file sorgente upstream.

Un compositore di notifiche è un esempio utile perché mostra diversi stati che una galleria statica di pulsanti non può rappresentare: contenuti modificabili, conferma della revisione, un’istantanea preparata e un confine chiaro prima dell’invio. Questa anteprima non chiama alcun API Twilio.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Twilio Paste: leggi la scala di spaziatura prima di scegliere un suffisso

I numeri dei token sono nomi, non valori in pixel

space30 corrisponde a mezzo rem, mentre space70 corrisponde a un rem e mezzo. I suffissi 30 e 70 indicano posizioni nella scala, non 30px e 70px. Con una radice da 16px, il compositore può usare 8px tra etichetta e campo, 12px all’interno di un controllo e 24px tra le aree.

La sorgente YAML usa nomi con trattini. La tabella di riferimento mostra i nomi in stile JavaScript usati da chi utilizza Paste e affianca loro i valori risolti. Un valore basato su rem si adatta alla dimensione del carattere radice; il suo equivalente in pixel non va considerato una misurazione incondizionata del browser.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Twilio Paste: abbina le dimensioni dei caratteri a token di interlinea separati

La scala non implica valori numerici identici

Gli alias per dimensione del carattere e interlinea sono separati. fontSize30 corrisponde a 14px con la dimensione radice predefinita, mentre lineHeight30 corrisponde a 20px. fontSize70 corrisponde a 24px, con un'opzione di interlinea di 32px. Queste coppie mantengono leggibili le etichette e i contenuti su più righe, senza trasformare ogni sezione in un grande titolo promozionale.

L'esempio incorporato usa una famiglia di caratteri sans-serif di sistema e un'illustrazione del telefono realizzata dall'applicazione. Queste scelte sono esplicitamente illustrative. Non viene ridistribuito alcun file di caratteri proprietario e le dimensioni della cornice del telefono non sono presentate come token Paste.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Twilio Paste: i ruoli semantici del testo includono vincoli di contrasto

Il testo poco visibile non equivale al testo disabilitato

La sorgente dei colori a monte registra gli abbinamenti di contrasto insieme ai ruoli. Il testo principale, quello secondario, gli errori e i messaggi di successo hanno ruoli di primo piano previsti distinti. Per il ruolo del testo meno visibile è indicato di non usarlo per i normali controlli attivi. Il conteggio dei caratteri non dovrebbe quindi usare semplicemente il grigio più tenue disponibile.

Nell'esempio il blu indica l'azione, mentre il testo neutro scuro comunica il messaggio. La bozza preparata non diventa verde solo perché l'utente ha premuto un pulsante: il suo stato spiega che è stata creata un'istantanea locale. I valori di esempio corrispondono alla palette collegata; le altre varianti del tema potrebbero risolversi in modo diverso.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Twilio Paste: la selezione del tema è un cambio di stato esplicito

Varianti del provider e superfici dell'applicazione

Theme esporta un Provider e un Consumer, insieme a oggetti tema con nome e utilità. Le costanti delle varianti attuali includono default, dark, twilio, twilio-dark, sendgrid ed evergreen. L'esempio passa intenzionalmente solo da default a dark.

Quando cambia il provider, i controlli nativi appartenenti all'applicazione devono ricevere un trattamento della superficie corrispondente. Un provider può applicare il tema ai componenti Paste, ma non modifica automaticamente ogni widget esterno. Il codice fornito imposta esplicitamente i colori di primo piano e di sfondo dell'area circostante e indica che la textarea appartiene all'applicazione.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Twilio Paste: usa lo stato premuto solo con una famiglia di pulsanti supportata

Azioni, navigazione e operazioni in sospeso hanno comportamenti distinti

L'implementazione di Button convalida alcune combinazioni di proprietà. L'interruttore del tema usa secondary con pressed. L'azione del modulo imposta type="submit", poiché il tipo predefinito del componente è button. Un pulsante con forma di collegamento richiede href e non può essere trattato come un'azione disabilitata o in caricamento.

• Usa primary per preparare la bozza e secondary per l'interruttore indipendente del tema.
• Mantieni la navigazione sotto forma di collegamento; non aggiungere href a un pulsante senza usare la corrispondente variante ad ancora.
• Riserva loading alle operazioni effettivamente in sospeso, poiché modifica sia il comportamento di busy sia quello di disabled.
• Evita valori di tabIndex positivi; l'implementazione supporta solo 0 e -1.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Twilio Paste: separa il testo modificabile dall'istantanea revisionata

Una sequenza trasparente

L'anteprima in tempo reale segue il valore corrente della textarea. La copia preparata viene archiviata separatamente e cambia solo dopo la convalida. Le modifiche successive non devono riscrivere in modo silenzioso l'istantanea già preparata. La casella di controllo per la revisione è un'interazione locale dimostrativa, non prova del consenso del destinatario né della conformità legale.

1. Scrivi il contenuto nella textarea con etichetta.
2. Esamina il messaggio corrente e seleziona la casella di controllo locale per confermare la revisione.
3. Prepara un'istantanea senza contattare alcun servizio di messaggistica.
4. Modifica di nuovo il testo e confronta la bozza con la copia preparata prima di creare una nuova istantanea.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Twilio Paste: rendi comprensibili i feedback senza dover interpretare un modello di telefono

Etichette e feedback testuale restano all'esterno dell'illustrazione

La textarea ha un'etichetta visibile ed è collegata alle descrizioni del conteggio e degli errori. Il conteggio è definito in punti di codice Unicode; non pretende di misurare la segmentazione degli SMS, la codifica o i costi. Anche il risultato preparato è visibile come testo normale all'esterno del dispositivo illustrativo.

La convalida deve segnalare un messaggio vuoto o la mancata conferma della revisione. La regione di stato annuncia il risultato locale senza far credere che il messaggio sia stato inviato. Il focus da tastiera resta visibile su tutti i controlli nativi e sui pulsanti, anche nella visualizzazione stretta.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Twilio Paste: verifica separatamente il pacchetto e l'interpretazione offline

Cosa dimostra l'esempio fornito

La configurazione importa i pacchetti reali Paste Theme e Button e include una composizione completa di React. I controlli nativi del modulo sono dichiarati come appartenenti all'applicazione, anziché attribuiti a un componente API non verificato. La versione incorporata è un'interpretazione offline di HTML, senza dipendenze da CDN esterni.

Prima di usarla in un servizio, risolvi le dipendenze peer, compila l'esempio nativo e aggiungi un vero confine di backend per l'invio. Un test locale dell'anteprima riuscito dimostra il comportamento dell'editor, non l'integrazione di un servizio di messaggistica in produzione né l'effettiva consegna tramite Twilio.

Leggi la specifica di supporto

Esempi di componenti del sistema di progettazione sistema di design Twilio Paste

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Paste notification draft studio</title><style>
*{box-sizing:border-box}body{margin:0;background:#f4f4f6;color:#121c2d;font:14px/20px Arial,sans-serif}header{background:#121c2d;color:white;padding:20px 32px;display:flex;justify-content:space-between;gap:16px}.brand{font-weight:700;letter-spacing:.02em}header small{color:#cacdd8}main{max-width:1000px;padding:32px;margin:auto}h1{font-size:28px;line-height:40px;margin:0 0 8px}h2{font-size:18px;line-height:28px;margin:0 0 16px}.intro{color:#606b85;margin:0 0 32px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px}form{background:white;border:1px solid #e1e3ea;border-radius:8px;padding:24px}label{display:block;font-weight:600}textarea{width:100%;font:16px/24px Arial,sans-serif;border:1px solid #8891aa;border-radius:4px;padding:12px;margin-top:8px;resize:vertical;min-height:150px}textarea:focus,button:focus-visible,input:focus-visible{outline:3px solid #0263e0;outline-offset:3px}.count{color:#606b85;font-size:12px;line-height:20px}.review{display:flex;align-items:start;gap:8px;margin-top:24px}.review label{font-weight:400}.review input{width:16px;height:16px;accent-color:#0263e0}button{font:600 14px/20px Arial,sans-serif;cursor:pointer;border:1px solid #0263e0;border-radius:4px;padding:10px 16px;background:#0263e0;color:white}button:hover{background:#043cb5}button.secondary{background:white;color:#0263e0}.error{color:#ad1111;min-height:20px}aside{text-align:center}.phone{margin:auto;background:white;border:8px solid #121c2d;border-radius:32px;min-height:400px;padding:24px 12px;box-shadow:0 12px 32px #121c2d14}.notch{width:72px;height:5px;background:#121c2d;border-radius:8px;margin:0 auto 24px}.sender{font-size:12px;color:#606b85;padding-bottom:16px;border-bottom:1px solid #e1e3ea}.bubble{background:#ebf4ff;border-radius:12px;padding:12px;margin-top:24px;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;min-height:70px}.caption{font-size:12px;color:#606b85}.prepared{padding:24px;background:#fff;border:1px solid #e1e3ea;border-radius:8px;margin-top:24px}.prepared p{white-space:pre-wrap;overflow-wrap:anywhere}.status{color:#606b85;font-size:12px}.foot{font-size:12px;color:#606b85;margin-top:24px}@media(max-width:650px){header{padding:16px}main{padding:24px 16px}.layout{grid-template-columns:1fr}.phone{max-width:250px;min-height:300px}form{padding:20px}.intro{margin-bottom:24px}}
</style><header><span class="brand">Paste / Message studio</span><small>Local preview</small></header><main><h1>Notification draft</h1><p class="intro">Write the message. Review the copy. Keep a prepared version.</p><div class="layout"><div><form id="composer" novalidate><h2>Compose your message</h2><label for="message">Message</label><textarea id="message" aria-describedby="count error">Your appointment is confirmed for Thursday at 10:00.</textarea><p id="count" class="count"></p><div class="review"><input id="reviewed" type="checkbox"><label for="reviewed">I reviewed this draft</label></div><p id="error" class="error" role="alert"></p><button>Prepare local draft</button></form><section class="prepared"><h2>Prepared copy</h2><p id="snapshot">No draft prepared yet.</p><p class="status" id="status" role="status">Nothing has been sent.</p></section></div><aside><div class="phone" aria-label="Illustrative phone preview"><div class="notch"></div><div class="sender">Sample service · Preview</div><div class="bubble" id="bubble"></div></div><p class="caption">Live preview of the editable message</p></aside></div><p class="foot">HTML interpretation of upstream Paste · Counts Unicode code points, not SMS segments · No messaging connection</p></main><script>
const $=id=>document.getElementById(id);function update(){$('bubble').textContent=$('message').value||'Your message will appear here.';$('count').textContent=Array.from($('message').value).length+' Unicode code points. Not an SMS segment estimate.'}$('message').oninput=()=>{update();$('reviewed').checked=false};$('composer').onsubmit=e=>{e.preventDefault();$('error').textContent='';$('message').removeAttribute('aria-invalid');if(!$('message').value.trim()){$('error').textContent='Write a message before preparing a draft.';$('message').setAttribute('aria-invalid','true');$('message').focus();return}if(!$('reviewed').checked){$('error').textContent='Confirm that you reviewed the message.';$('reviewed').focus();return}$('snapshot').textContent=$('message').value.trim();$('status').textContent='Draft prepared locally. Nothing was sent.'};update();
</script></html>

// npm install @twilio-paste/button @twilio-paste/theme react react-dom
import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Theme} from '@twilio-paste/theme';
import {Button} from '@twilio-paste/button';
// Native textarea and labels are application-owned; this is not Paste TextArea.
function Composer() {
  const [message,setMessage] = useState('Your appointment is confirmed for Thursday at 10:00.');
  const [snapshot,setSnapshot] = useState('');
  const [error,setError] = useState('');
  const [confirmed,setConfirmed] = useState(false);
  const [mode,setMode] = useState('default');
  const length = Array.from(message).length;
  const background = mode === 'dark' ? '#121c2d' : '#ffffff';
  const foreground = mode === 'dark' ? '#ffffff' : '#121c2d';
  function prepare(event) {
    event.preventDefault();
    if (!message.trim()) return setError('Write a message before preparing a draft.');
    if (!confirmed) return setError('Confirm that you reviewed the message.');
    setError(''); setSnapshot(message.trim());
  }
  return <Theme.Provider theme={mode}>
    <main style={{padding:24,background,color:foreground,maxWidth:760,margin:'auto'}}>
      <h1>Notification draft</h1>
      <Button variant="secondary" pressed={mode==='dark'} onClick={() => setMode(mode==='dark'?'default':'dark')}>Dark preview</Button>
      <form onSubmit={prepare}>
        <label htmlFor="message" style={{display:'block',marginTop:24}}>Message</label>
        <textarea id="message" rows={5} value={message} onChange={e=>{setMessage(e.target.value);setConfirmed(false);}}
          aria-describedby="count error" aria-invalid={!!error}
          style={{width:'100%',padding:12,margin:'8px 0',font:'inherit',borderRadius:4}} />
        <p id="count">{length} Unicode code points. This is not an SMS segment estimate.</p>
        <label><input type="checkbox" checked={confirmed} onChange={e=>setConfirmed(e.target.checked)} /> I reviewed this draft</label>
        <p id="error" role="alert">{error}</p>
        <Button variant="primary" type="submit">Prepare local draft</Button>
      </form>
      <section aria-label="Prepared draft" style={{marginTop:24}}>
        <h2>Prepared copy</h2>
        <p style={{whiteSpace:'pre-wrap'}}>{snapshot || 'No draft prepared yet.'}</p>
        <p role="status">{snapshot ? 'Draft prepared locally. Nothing was sent.' : ''}</p>
      </section>
    </main>
  </Theme.Provider>;
}
createRoot(document.getElementById('root')).render(<Composer />);