patternfly / patternfly/patternfly-react

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

未关闭
#9,653 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

PF Team Pinned
主要语言
TypeScript
星标
862
派生
392
平均合并
4 天 8 小时
30 天内合并 PR
9

描述

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

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

从 packages/react-core/src/components/Menu/MenuItem.tsx 开始,重点查看现有的 direction="up" 处理,以及 issue 中链接的 MenuWithDrilldownBreadcrumbs.tsx 示例。将当前的 breadcrumb dropdown 行为与 core issue 和 RTL 预期进行比较。完成的标准是:breadcrumb drill-up/out 项目具有一致且适配方向的布局,不依赖用户提供的返回图标。

由索引模型根据 Issue 内容生成。

评估

技术栈
react, typescript
领域
frontend
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。