You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit 5bfa4c7
Browse filesBrowse the repository at this point in the historyBrowse files
Copy file name to clipboardExpand all lines: docs/design-system.md
+9-3Lines changed: 9 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -204,7 +204,7 @@ Os estados são definidos uma vez aqui e valem para todo componente. A seção d
204
204
205
205
**`nav-item`**: item da barra lateral. Altura de 40px, ícone de 20px e rótulo em `{typography.ui}`, `{rounded.sm}`, padding 8px × 12px. Ativo: fundo `{colors.primary-soft}`, texto e ícone em `{colors.primary}`, rótulo em `{typography.ui-strong}`.
206
206
207
-
**`breadcrumb`**: caminho da pasta atual, no topo da área de conteúdo. Segmentos em `{typography.ui}` e `{colors.ink-muted}`, separados por um ícone de seta de 16px; o último segmento fica em `{colors.ink}` e `{typography.ui-strong}`. Cada segmento é um destino de arrastar e soltar. Quando não cabe, os segmentos do meio colapsam em "…", que abre um `{component.menu}`.
207
+
**`breadcrumb`**: caminho da pasta atual, no topo da área de conteúdo. Segmentos em `{typography.ui}` e `{colors.ink-muted}`, separados por um ícone de seta de 16px; o último segmento fica em `{colors.ink}` e `{typography.ui-strong}`. Cada segmento é um link para a pasta. Quando não cabe, os segmentos do meio colapsam em "…", que abre um `{component.menu}`.
208
208
209
209
**`toolbar`**: linha abaixo do breadcrumb, com altura de 48px. À esquerda, as ações da pasta ("Nova pasta") em `{component.button-utility}`. À direita, a alternância entre lista e grade. Com itens selecionados, a barra troca de conteúdo: mostra a contagem ("3 selecionados") e as ações em lote (baixar, mover, excluir).
210
210
@@ -268,8 +268,14 @@ Os estados são definidos uma vez aqui e valem para todo componente. A seção d
268
268
### Sobreposições e avisos
269
269
270
270
**`menu`**: menu de contexto e menu "Mais ações". Fundo `{colors.surface-raised}`, borda em `{colors.hairline}`, `{rounded.lg}`, `{shadow.overlay}`, padding `{spacing.xxs}` e largura mínima de 200px. Itens com 36px de altura, ícone de 16px e rótulo em `{typography.ui}`, com `{rounded.sm}`. Ações destrutivas ficam por último, depois de um separador, em `{colors.danger}`.
271
+
-**Linha de pasta:** "Renomear" e "Mover para…".
272
+
-**Linha de arquivo:** "Baixar", "Renomear" e "Mover para…".
273
+
- "Excluir" entra nos dois com a lixeira, como ação destrutiva, e não é desenhado antes disso.
271
274
272
-
**`dialog`**: janela modal sobre `{colors.scrim}`. Fundo `{colors.surface-raised}`, `{rounded.lg}`, `{shadow.overlay}`, padding `{spacing.lg}`. Título em `{typography.title}`, corpo em `{typography.body}` e, no rodapé, os botões alinhados à direita, com o primário por último. Usos: nova pasta, renomear, mover (com árvore de pastas) e confirmação de exclusão definitiva.
275
+
**`dialog`**: janela modal sobre `{colors.scrim}`. Fundo `{colors.surface-raised}`, `{rounded.lg}`, `{shadow.overlay}`, padding `{spacing.lg}`. Título em `{typography.title}`, corpo em `{typography.body}` e, no rodapé, os botões alinhados à direita, com o primário por último. Usos: nova pasta, renomear, mover e confirmação de exclusão definitiva. Estados: padrão, com erro e carregando (o botão primário no estado carregando). Tem duas variações de conteúdo:
276
+
-**Campo de nome** (nova pasta e renomear): um `{component.text-field}` com o nome. Em "renomear" ele abre com o nome atual preenchido e selecionado por inteiro. O erro de nome inválido aparece abaixo do campo, em `{colors.danger}`, sem fechar o diálogo.
277
+
-**Seletor de pastas** (mover): o caminho do nível atual no topo, em `{typography.ui}`, e abaixo uma lista de pastas com 36px de altura por linha, em `{typography.ui}`, que o usuário percorre um nível por vez (clicar numa pasta entra nela, e o caminho leva de volta). Só aparecem pastas. A pasta que está sendo movida e as descendentes dela ficam desabilitadas, com o ícone e o nome em `{colors.ink-disabled}`. No fim da lista, quando há mais pastas, fica o `{component.button-utility}` "Carregar mais". O primário "Mover" confirma o nível atual como destino. O seletor tem altura máxima de 320px e rola dentro do diálogo.
278
+
Abaixo de `sm`, o diálogo ocupa a largura total, com margem de 16px.
273
279
274
280
**`toast`**: confirmação breve, no canto inferior esquerdo. Fundo `{colors.surface-raised}`, borda em `{colors.hairline}`, `{rounded.lg}`, `{shadow.overlay}`, padding 12px × 16px, texto em `{typography.ui}`. Pode ter uma ação em `{component.text-link}` ("Desfazer", depois de mover um item para a lixeira). Some sozinho em 5 segundos; os de erro ficam até o usuário fechar.
275
281
@@ -493,7 +499,7 @@ Com a web rodando no contêiner, abra a tela pelo MCP do Playwright, capture em
493
499
494
500
- O produto ainda não tem nome nem logotipo. Onde este documento diz "marca do produto", a interface usa um marcador de texto até a identidade ser definida.
495
501
- O contraste dos pares de cor (texto sobre superfície, nos dois temas) foi escolhido para atender à WCAG AA, mas ainda não foi medido com ferramenta. A medição acontece quando os tokens forem implementados.
496
-
- O arquivo do Figma tem as fundações (variáveis, estilos de texto e de sombra), os componentes usados na autenticação (`auth-card`, `banner`, `button-primary`, `button-icon`, `text-field`, `password-field` e `text-link`), os usados pelas telas do Drive (`app-bar`, `sidebar`, `nav-item`, `breadcrumb`, `toolbar`, `account-menu`, `search-input`, `quota-meter`, `segmented-control`, `button-utility`, `menu`, `file-list`, `file-row`, `checkbox`, `empty-state`, `dropzone`, `upload-panel` e `upload-item`, com o "Carregar mais", o estado de espera pelo arquivo e o aviso de pasta solta), as telas da página Autenticação e as da página Drive: a casca, com a gaveta da navegação e o menu da conta, a lista com arquivos, a Pasta raiz vazia, a zona de soltar, o painel de envios em cada estado e o aviso de pasta solta. Os demais componentes (`file-card`, `preview-viewer`, `button-secondary`, `button-danger`, `dialog`, `toast`, `share-dialog`, `public-share-page`, `plan-card` e `plan-card-current`) ainda não existem no Figma, e as páginas Link público e Planos ainda estão vazias.
502
+
- O arquivo do Figma tem as fundações (variáveis, estilos de texto e de sombra), os componentes usados na autenticação (`auth-card`, `banner`, `button-primary`, `button-icon`, `text-field`, `password-field` e `text-link`), os usados pelas telas do Drive (`app-bar`, `sidebar`, `nav-item`, `breadcrumb`, `toolbar`, `account-menu`, `search-input`, `quota-meter`, `segmented-control`, `button-utility`, `menu` (com o menu da linha de pasta e o de arquivo), `file-list`, `file-row`, `checkbox`, `empty-state`, `dropzone`, `upload-panel` e `upload-item`, com o "Carregar mais", o estado de espera pelo arquivo e o aviso de pasta solta), os de pastas (`button-secondary`, `dialog`, com o campo de nome e o seletor de pastas, e `toast`), as telas da página Autenticação e as da página Drive: a casca, com a gaveta da navegação e o menu da conta, a lista com arquivos, a Pasta raiz vazia, a zona de soltar, o painel de envios em cada estado e o aviso de pasta solta, e as de pastas (a pasta com conteúdo e com o menu da linha, a pasta vazia, os diálogos de nova pasta, renomear e mover em cada estado e os avisos de confirmação). Os demais componentes (`file-card`, `preview-viewer`, `button-danger`, `share-dialog`, `public-share-page`, `plan-card` e `plan-card-current`) ainda não existem no Figma, e as páginas Link público e Planos ainda estão vazias.
497
503
- No código, existem os componentes usados na autenticação e os da casca e da lista do Drive: `app-bar`, `sidebar` (com a gaveta abaixo de `lg`), `nav-item`, `account-menu`, `menu`, `button-utility`, `file-list` (com o "Carregar mais"), `file-row` e `empty-state`, só com as partes que as funcionalidades já entregues usam. Os demais entram com as telas que os usam.
498
504
- Não há seletor manual de tema. O tema segue o sistema operacional.
499
505
- Os controles internos de vídeo, áudio e PDF do `{component.preview-viewer}` são os do navegador e não seguem estes tokens.
Ticket de design: nenhum critério tem marca de teste. O de documento é conferido pela leitura do `docs/design-system.md` no diff do PR, e os de revisão humana, pelo arquivo do Figma. O Figma é a origem do código: os tickets seguintes (LUI-179, LUI-180 e LUI-181) leem daqui o diálogo, o aviso, o menu da linha e o breadcrumb, em vez de cada um desenhar o seu.
4
+
5
+
A luz e o escuro de cada tela são conferidos trocando o modo da coleção `colors` do frame de Light para Dark: nenhuma camada pode ficar com a cor do tema claro. O que o design system já descreve (`dialog`, `toast`, `button-secondary`) não é redefinido: o ticket leva essas peças ao Figma e acrescenta ao documento só o que falta, que são a variação de seletor de pastas do diálogo, os menus da linha e o breadcrumb sem arrastar e soltar.
6
+
7
+
## LUI-178-CA1
8
+
9
+
**Marca:** revisão humana
10
+
11
+
**Cenário:** Dado o arquivo do Figma depois do ticket, quando o revisor abre a página Componentes, então o `dialog` é um conjunto com as variações de campo de nome (criar e renomear) e de seletor de pastas (mover), cada uma nos estados padrão, com erro e carregando, e a vitrine em Light e em Dark; e, ao inspecionar as camadas, nenhuma cor, tamanho de fonte, raio, espaçamento ou sombra está fora de uma variável ou de um estilo.
12
+
13
+
## LUI-178-CA2
14
+
15
+
**Marca:** revisão humana
16
+
17
+
**Cenário:** Dado o arquivo do Figma depois do ticket, quando o revisor abre a página Componentes, então o `toast` (com a variação de erro, que fica até o usuário fechar) e o `button-secondary` são conjuntos com os estados como variantes e a vitrine em Light e em Dark, sem cor, tamanho de fonte, raio, espaçamento ou sombra fora de uma variável ou de um estilo.
18
+
19
+
## LUI-178-CA3
20
+
21
+
**Marca:** revisão humana
22
+
23
+
**Cenário:** Dado o arquivo do Figma depois do ticket, quando o revisor abre o `menu` da página Componentes, então há o menu da linha de pasta, com "Renomear" e "Mover para…", e o da linha de arquivo, com "Baixar", "Renomear" e "Mover para…", e nenhum dos dois tem "Excluir".
24
+
25
+
## LUI-178-CA4
26
+
27
+
**Marca:** revisão humana
28
+
29
+
**Cenário:** Dado o arquivo do Figma depois do ticket, quando o revisor abre o `breadcrumb` da página Componentes, então ele tem a variante completa e a colapsada, com os trechos do meio em "…" que abre um `menu`, e nenhum trecho aparece como destino de arrastar e soltar.
30
+
31
+
## LUI-178-CA5
32
+
33
+
**Marca:** revisão humana
34
+
35
+
**Cenário:** Dado a página Drive do Figma, quando o revisor abre as telas de pasta, então há, em 390 e em 1280 px, a pasta com conteúdo (breadcrumb, barra de ferramentas com "Nova pasta" e "Enviar", e a lista com pastas e arquivos, uma linha de pasta com o menu "Mais ações" aberto) e a pasta vazia, com o convite para enviar ou criar o primeiro item; e, ao trocar o modo da coleção `colors` de cada frame de Light para Dark, nenhuma camada fica com a cor do tema claro.
36
+
37
+
## LUI-178-CA6
38
+
39
+
**Marca:** revisão humana
40
+
41
+
**Cenário:** Dado a página Drive do Figma, quando o revisor abre as telas dos diálogos, então há, em 390 e em 1280 px, o de nova pasta, o de renomear (com o nome atual selecionado e o erro de nome inválido) e o de mover (seletor no nível inicial "Meus arquivos", em um nível mais fundo com o caminho e com "Carregar mais", e com a pasta movida e as descendentes desabilitadas), todos com o aviso de confirmação do `toast` mostrado numa tela depois da ação; e, ao trocar o modo da coleção `colors` de cada frame de Light para Dark, nenhuma camada fica com a cor do tema claro. Em 390 px os diálogos ocupam a largura total, com margem de 16 px.
42
+
43
+
## LUI-178-CA7
44
+
45
+
**Marca:** documento
46
+
47
+
**Cenário:** Dado o `docs/design-system.md` deste PR, quando a seção "Componentes" é lida, então o `{component.breadcrumb}` não diz mais que cada segmento é destino de arrastar e soltar, o `{component.dialog}` descreve a variação de seletor de pastas (nível a nível, com o caminho do nível, "Carregar mais" e as pastas impedidas desabilitadas), o `{component.menu}` traz as ações da linha de pasta e de arquivo, e cada peça nova cita só tokens das tabelas do documento; e, na seção "Lacunas conhecidas", o item sobre o Figma lista `dialog`, `toast` e `button-secondary` como existentes e as telas de pasta da página Drive.
0 commit comments