RevealField
A personal value shown masked until an operator reveals it with a reason (Figma "Backoffice / Reveal Field" 2058:52243): Masked, Focus, Revealed, No permission.
Every reveal is audited, so the revealed state says who, when and why. The value region is polite live, so the revealed value is read out. The reason dialog itself is the Overlays family's.
<RevealField label="Telefone do responsável" maskedValue="+55 11 •••••-••42" revealLabel="Revelar" hideLabel="Ocultar" onReveal={askReason} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Backoffice / Reveal Field
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
| Masked | Focus | Revealed | No permission |
|---|---|---|---|
Telefone do responsável +55 11 •••••-••42 | Telefone do responsável +55 11 •••••-••42 | Telefone do responsável +55 11 98765-4342 Revelado por Mariana Lima às 14:32 · motivo: suporte ao cliente · registrado na auditoria | Telefone do responsável +55 11 •••••-••42Sem permissão para revelar |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| label | string | — | "Telefone do responsável". |
| maskedValue | string | — | What shows while hidden: "+55 11 •••••-••42". |
| revealed? | { value: string; by: ReactNode; } | — | The revealed value and who revealed it. Present = Figma State=Revealed. |
| canReveal? | boolean | true | False = Figma State=No permission: no button, a lock and `noPermissionLabel`. |
| onReveal? | (() => void) | — | Asks for the reason (the Reason dialog), then reveals. |
| onHide? | (() => void) | — | |
| revealLabel | string | — | Button copy, e.g. "Revelar" and "Ocultar". |
| hideLabel | string | — | |
| noPermissionLabel? | string | — | "Sem permissão para revelar". |
| className? | string | — |