patternfly / patternfly/patternfly-react

Menu/MenuItem - should support drill-[up/out] icon/layout in menu list

Aberta
#9,653 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

PF Team Pinned
Linguagem predominante
TypeScript
Estrelas
862
Forks
392
Merge médio
4d 8h
PRs com merge (30d)
9

Descrição

re: https://github.com/patternfly/patternfly-react/issues/9587 and this issue to make the same update in core https://github.com/patternfly/patternfly/issues/5950. Not sure if this is a breaking change or not, probably depends on how we go about implementing it.

In the drilldown with breadcrumb menu examples, in the breadcrumb dropdown, we have items that present (and seem to function) as drill-[up/out] items with a back arrow at the start of the item, and clicking on the item takes you up a level in the breadcrumb hierarchy. However, our component doesn't support this layout - our examples are using a user-supplied icon passed as the icon prop - https://github.com/patternfly/patternfly-react/blob/e27aac2f35e0a8bb16fa5397eb5ef841b3ecc578/packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx#L130-L138

Some issues with this are:

  1. It doesn't work by default in RTL since we can't predictably target and mirror/flip that menu item icon for the user since that could be a non-directional icon or they may have opted for some other type of directional icon there that shouldn't be flipped.
  2. Since it's a user supplied icon, there is the possibility for inconsistency
  3. I could be wrong, but I don't know if a user could pass an actual icon to any of those items since the prop is being used for the back arrow.

We have a direction="up" prop that puts the correct icon container and icon on a drill-up/out icon and works in RTL, but that is specific to the top/first item in a drilled-in drilldown menu. The prop applies other logic to that item that isn't appropriate for use in the breadcrumb items, so we can't use that prop there. https://github.com/patternfly/patternfly-react/blob/e27aac2f35e0a8bb16fa5397eb5ef841b3ecc578/packages/react-core/src/components/Menu/MenuItem.tsx#L366-L370

Ideally we could do something like update the direction prop so it could be used in these breadcrumb menu items or maybe introduce some new kind of prop for an item that indicates clicking it does some kind of "back" action and it just borrows the way direction="up" includes the icon in the item.


Jira Issue: PF-116

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Direção de pesquisa

Comece por packages/react-core/src/components/Menu/MenuItem.tsx, especialmente pelo tratamento existente de direction="up", e pelo exemplo MenuWithDrilldownBreadcrumbs.tsx vinculado na issue. Compare o comportamento atual do dropdown de breadcrumbs com a core issue e as expectativas de RTL. Considera-se concluído quando os itens de subir ou sair do drilldown de breadcrumbs tiverem um layout consistente e orientado pela direção, sem depender de um ícone de voltar fornecido pelo usuário.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
react, typescript
Domínio
frontend
Tipo de issue
Funcionalidade
Dificuldade
5/5
Tempo estimado
Mais de uma semana
Status de atividade
Estagnada
Clareza
Razoavelmente clara
Facilidade para iniciantes
35/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.