blip-ds icon indicating copy to clipboard operation
blip-ds copied to clipboard

feat: Permitir edição do label da página atual no componente bds-breadcrumb usando bds-input-editable

Open Copilot opened this issue 7 months ago • 5 comments

🎯 Descrição

Implementa a funcionalidade de edição inline do label da página atual no componente bds-breadcrumb usando o componente bds-input-editable, conforme especificado no design do Figma.

Breadcrumb Editável

✨ Funcionalidades Adicionadas

Nova API

  • Prop: editableCurrentPage?: boolean = false - Habilita edição da página atual
  • Evento: bdsCurrentPageLabelChange - Emitido quando o label é alterado
  • Interface: BreadcrumbCurrentPageChangeEventDetail - Tipagem do evento

Comportamento

  • ✅ Apenas o último item (página atual) é editável quando habilitado
  • ✅ Itens com href permanecem como links e não são editáveis
  • ✅ Funcionalidade é opt-in - totalmente backward compatible
  • ✅ Funciona com breadcrumbs longos (que colapsam automaticamente)
  • ✅ Integração visual perfeita com o design existente

📝 Exemplos de Uso

Breadcrumb Tradicional (comportamento inalterado)

<bds-breadcrumb
  items='[
    {"label": "Home", "href": "/"},
    {"label": "Categoria", "href": "/categoria"},
    {"label": "Página Atual"}
  ]'>
</bds-breadcrumb>

Breadcrumb com Edição Habilitada

<bds-breadcrumb
  editable-current-page="true"
  items='[
    {"label": "Base de conhecimento", "href": "/base"},
    {"label": "Curso de psicologia"}
  ]'
  onBdsCurrentPageLabelChange="handleLabelChange">
</bds-breadcrumb>

Manipulação de Eventos

function handleLabelChange(event) {
  const { oldLabel, newLabel } = event.detail;
  console.log(`Label alterado: "${oldLabel}" → "${newLabel}"`);
}

🧪 Testes

  • 31 testes unitários passando (7 novos para funcionalidade editável)
  • 15 testes e2e passando (4 novos para interações de edição)
  • ✅ Cobertura de todas as funcionalidades e edge cases
  • ✅ Validação de eventos e estados

📚 Storybook

  • EditableCurrentPage - Demonstração básica com event handling
  • EditableWithLongPath - Funcionalidade com breadcrumbs longos
  • Events - Story atualizada com novo evento
  • ✅ Controls atualizados para incluir prop editableCurrentPage

🔄 Compatibilidade

  • 100% backward compatible - funcionalidade é opt-in
  • ✅ Não afeta comportamento existente quando editableCurrentPage é false (padrão)
  • ✅ Mantém todas as APIs e eventos existentes
  • ✅ Suporte automático para React via wrapper gerado

📖 Documentação

  • ✅ README.md automaticamente atualizado
  • ✅ Dependências atualizadas no grafo (inclui bds-input-editable)
  • ✅ TypeScript definitions geradas
  • ✅ JSDoc completo para novas APIs

Fixes #1068.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot avatar Jul 03 '25 14:07 Copilot