blip-ds
blip-ds copied to clipboard
feat: Permitir edição do label da página atual no componente bds-breadcrumb usando bds-input-editable
🎯 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.
✨ 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
hrefpermanecem 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.