From 385d31262d694bf9cee63363e86ddc409cc99515 Mon Sep 17 00:00:00 2001 From: Luiz Carlos Date: Thu, 15 Oct 2026 16:58:40 -0300 Subject: [PATCH 1/2] docs: plan the folder screens and components in Figma (LUI-178) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Acceptance file docs/tickets/LUI-177/LUI-178/aceite.md (CA1-CA7). Design ticket: six criteria are checked by human review of the Figma file, with light and dark checked by switching the colors mode, and one by reading the design system in the PR diff. No criterion has a test check, and the ticket changes no route, contract or schema. Decision: the design system already describes dialog, toast and button-secondary, so the ticket brings them to Figma and adds to the document only what is missing: the folder-picker variation of the dialog, the row menus of a folder and of a file, and the breadcrumb without drag and drop. This avoids redefining what the document already owns. Decision: the folder picker is described as a level-by-level list with the trail of the current level, "Carregar mais" and disabled folders, not as a full tree, because LUI-177 chose navigation through the children route filtered to folders over a tree route. Decision: the row menus carry no "Excluir" in either variant, since deleting belongs to the trash (feature 04) and no disabled button is drawn. Files and interfaces the implementation will touch: - docs/design-system.md: Componentes > Navegação (breadcrumb loses "Cada segmento é um destino de arrastar e soltar"), Componentes > Sobreposições e avisos (dialog gets the folder-picker variation; menu gets the folder-row and file-row actions) and Lacunas conhecidas (the Figma item lists dialog, toast, button-secondary and the folder screens). - Figma file, page Componentes: component sets and vitrines for dialog (name field and folder picker, in default, error and loading states), toast (with the error variation), button-secondary, the folder-row and file-row menus, and the breadcrumb in full and collapsed variants. - Figma file, page Drive: folder with content, empty folder, and the new-folder, rename and move dialogs with the toast shown afterwards, at 390 and 1280 px. - apps/web/app/globals.css: only if a token changes (none planned). Existing tests whose behavior changes: none. Data changes: none. Co-Authored-By: Claude Sonnet 5.5 Claude-Session: https://claude.ai/code/session_017UJLJcNU6V3ceKgzE23AZ1 --- docs/tickets/LUI-177/LUI-178/aceite.md | 47 ++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 docs/tickets/LUI-177/LUI-178/aceite.md diff --git a/docs/tickets/LUI-177/LUI-178/aceite.md b/docs/tickets/LUI-177/LUI-178/aceite.md new file mode 100644 index 0000000..e305e7c --- /dev/null +++ b/docs/tickets/LUI-177/LUI-178/aceite.md @@ -0,0 +1,47 @@ +# Aceite do LUI-178 + +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. + +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. + +## LUI-178-CA1 + +**Marca:** revisão humana + +**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. + +## LUI-178-CA2 + +**Marca:** revisão humana + +**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. + +## LUI-178-CA3 + +**Marca:** revisão humana + +**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". + +## LUI-178-CA4 + +**Marca:** revisão humana + +**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. + +## LUI-178-CA5 + +**Marca:** revisão humana + +**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. + +## LUI-178-CA6 + +**Marca:** revisão humana + +**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. + +## LUI-178-CA7 + +**Marca:** documento + +**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. From 3122f9bf1b7e12683fda242e400f38222fccf379 Mon Sep 17 00:00:00 2001 From: Luiz Carlos Date: Thu, 15 Oct 2026 17:27:39 -0300 Subject: [PATCH 2/2] docs: design system for folders, row menus and the folder-picker dialog (LUI-178) The breadcrumb stops being a drag-and-drop target, the dialog gets the folder-picker variation (level by level, trail, "Carregar mais", disabled folders), the menu lists the folder-row and file-row actions, and the known-gaps item now lists what the Figma file has: button-secondary, dialog, toast and the folder screens. Co-Authored-By: Claude Sonnet 5.5 Claude-Session: https://claude.ai/code/session_017UJLJcNU6V3ceKgzE23AZ1 --- docs/design-system.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/design-system.md b/docs/design-system.md index 55e0567..c659839 100644 --- a/docs/design-system.md +++ b/docs/design-system.md @@ -204,7 +204,7 @@ Os estados são definidos uma vez aqui e valem para todo componente. A seção d **`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}`. -**`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}`. +**`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}`. **`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). @@ -268,8 +268,14 @@ Os estados são definidos uma vez aqui e valem para todo componente. A seção d ### Sobreposições e avisos **`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}`. +- **Linha de pasta:** "Renomear" e "Mover para…". +- **Linha de arquivo:** "Baixar", "Renomear" e "Mover para…". +- "Excluir" entra nos dois com a lixeira, como ação destrutiva, e não é desenhado antes disso. -**`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. +**`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: +- **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. +- **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. +Abaixo de `sm`, o diálogo ocupa a largura total, com margem de 16px. **`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. @@ -493,7 +499,7 @@ Com a web rodando no contêiner, abra a tela pelo MCP do Playwright, capture em - 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. - 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. -- 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. +- 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. - 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. - Não há seletor manual de tema. O tema segue o sistema operacional. - Os controles internos de vídeo, áudio e PDF do `{component.preview-viewer}` são os do navegador e não seguem estes tokens.