Componenti e varianti

Pulsanti, schede, link, moduli, schede di navigazione e gli altri componenti del catalogo prendono l'aspetto dal design system, non dalla pagina. Un elemento della pagina dice solo quale variante disegna (Pieno o Contorno, per un pulsante); colori, spazi, tipografia e angoli della variante stanno qui, per dimensione, stato e breakpoint. Cambi la variante una volta, e cambiano tutti i pulsanti che la usano.

Prima di iniziare #

• Ti serve il ruolo Amministratore, oppure quello di Editor di contenuti con Modifica su Componenti (per cambiare le celle) e su Varianti (per aggiungerle, nasconderle o eliminarle). Di base un Editor di contenuti vede i componenti e sceglie le varianti nella pagina, niente di più.
• Prima vengono i token. Una cella punta a un token (un ruolo di colore, un passo della spaziatura, uno stile di testo), mai a un valore scritto a mano. Se il valore che ti serve non c'è, aggiungilo come token in Colori, spazi e temi.

Come è fatto un componente #

L'aspetto di un componente è una griglia di celle. Ogni cella è una combinazione di:

• Variante: un aspetto con un nome, come Pieno, Contorno e Inverso per un pulsante.
• Dimensione: piccola, media, grande, per i componenti che le hanno. Tutte le dimensioni (base) raccoglie quello che non cambia con la dimensione.
• Stato: predefinito, al passaggio del mouse, con il focus, premuto, disattivato e altri, secondo il componente.
• Parte: un pezzo del componente con un nome, come l'etichetta, l'icona o il bordo.
• Breakpoint: Mobile, Tablet, Desktop.

Una cella vuota eredita: la dimensione da Tutte le dimensioni (base), lo stato dallo stato predefinito, il breakpoint da Mobile in su.

Definire l'aspetto di un componente #

1. Nella barra laterale del sito apri Design System, poi Componenti. I componenti sono divisi in gruppi (Azioni, Moduli, Navigazione, Contenuti e così via); una scheda riporta Personalizzato se il sito l'ha cambiato.
2. Scegli Apri {component} su una scheda, per esempio Apri Pulsante. Vedi le varianti e le dimensioni sulle righe e gli stati sulle colonne, con il tema e la larghezza scelti nella barra in alto.
3. Scegli una cella della griglia. Si apre Proprietà della cella con Variante, Stato, Dimensione e Breakpoint. Un clic sull'intestazione di riga di una variante o su quella di colonna di uno stato lo apre con Applica a su Variante in tutti gli stati o Stato in tutte le varianti.
4. In Applica a scegli fin dove arriva la modifica: Questa cella, Variante in tutti gli stati o Stato in tutte le varianti.
5. Cambia una proprietà, per esempio Sfondo, Colore del contenuto, Spaziatura interna o Arrotondamento, scegliendo un token. Una riga con Non impostato, Ereditato dallo stato predefinito o Ereditato da un'altra cella qui non ha un valore suo.
6. Per i valori che cambiano con la larghezza dello schermo apri Valori responsive e impostali per Tablet e Desktop.
7. Le modifiche si accumulano in Modifiche da salvare. Ne togli una con Rimuovi modifica, le butti tutte con Scarta, le tieni con Salva modifiche.

Confronta con il blueprint mette la riga del blueprint accanto a quella del sito, così vedi cosa hai cambiato.

Aggiungere una variante #

1. Apri il componente e vai a Varianti.
2. Scegli Aggiungi variante.
3. Scrivi una Chiave (lettere minuscole, cifre e trattini, con una lettera all'inizio, per esempio ghost), un'Etichetta, cioè il nome che si legge nell'editor, e scegli Parti da: la variante da copiare.
4. Scegli Crea, poi definisci le celle della nuova variante come sopra.

Nella stessa tabella, accanto a ogni variante, trovi Rinomina, Nascondi (nell'editor non si può più scegliere; gli elementi che la usano già la tengono e continuano a disegnarla), Mostra per farla riapparire ed Elimina. Utilizzato da conta gli elementi delle pagine in bozza e le celle di altri componenti che la usano. Elimina resta disattivato finché il conteggio non è 0, e per le varianti che arrivano dal blueprint del sito.

Scegliere una variante nella pagina #

1. Nell'editor seleziona un componente (un pulsante, una scheda).
2. Nel pannello a destra scegli la Variante, e la Dimensione se il componente ne ha. Predefinita disegna la variante di base del componente.

Trasformare gli stili locali in una variante #

Capita di sistemare a mano un pulsante finché non è giusto. Fanne una variante, così il prossimo pulsante la può usare.

1. Nell'editor seleziona l'elemento. Nel pannello Livelli è segnato Scollegato (i suoi stili sostituiscono lo stile collegato).
2. Nel pannello a destra apri Component styles: riporta il componente e la variante che l'elemento disegna.
3. Nel modulo di promozione scrivi Variant name (il nome) e Variant key (la chiave).
4. Scegli Promote to variant. Il sito ha una variante nuova, l'elemento passa a usarla e gli stili spostati vengono tolti dall'elemento. Gli altri stili locali restano.

Per vedere il modulo ti serve Modifica sia su Componenti sia su Varianti.

Cosa vedi #

• La Panoramica elenca le Istanze scollegate: i componenti con stili locali. I Controlli di una pagina le mostrano una per una come Scollegato dal sistema · {count} dichiarazioni, con Ricollega: rimuovi gli stili locali.
• L'Attività registra "ha modificato l'aspetto di una variante di componente", "ha aggiunto una variante di componente" e "ha trasformato uno stile in {target} in una variante di componente".
• Il Campionario disegna su un solo foglio tutte le varianti, le dimensioni e gli stati di un componente.

Errori comuni #

• Una cella accetta un token semantico o di base (un ruolo di colore, un passo della spaziatura), non un gradino della tavolozza né un valore scritto. È voluto: se una cella puntasse a blue.500, un tema non potrebbe cambiarla.
• Anche qui si controlla il contrasto: una modifica che porta una coppia testo/sfondo sotto AA viene rifiutata, come per i token.
• Un'altra variante si chiama già «{label}». Scegli un altro nome. Le etichette sono uniche per componente.
• Non presente in questo design system: alcuni componenti del catalogo non hanno stili nel blueprint di questo sito. Sono elencati a parte e non si possono modificare finché il blueprint non li include.
• Component styles e il modulo di promozione oggi sono solo in inglese, anche con l'admin in italiano.
• Le modifiche arrivano sul sito pubblico quando pubblichi.

Vedi anche #

• Colori, spazi e temi
• Tipografia e font
• Livelli e canvas
• Componenti del sito