patternfly / patternfly/patternfly-react

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

Đang mở
#9,653 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

PF Team Pinned
Ngôn ngữ chính
TypeScript
Star
862
Fork
392
Merge trung bình
4 ngày 8 giờ
Pull request đã merge (30 ngày)
9

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu với packages/react-core/src/components/Menu/MenuItem.tsx, đặc biệt là cách xử lý direction="up" hiện có, và ví dụ MenuWithDrilldownBreadcrumbs.tsx được liên kết trong issue. So sánh hành vi dropdown breadcrumb hiện tại với core issue và các kỳ vọng RTL. Được xem là hoàn tất khi các mục drill-up/out của breadcrumb có bố cục nhất quán, nhận biết hướng, mà không phụ thuộc vào biểu tượng quay lại do người dùng cung cấp.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react, typescript
Lĩnh vực
frontend
Loại issue
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.