[Feature Request]: Badge Slot on SideNavigationItem

Đang mở
  • Có gì không ổn?
#14,272 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

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

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
55/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Start by reading the SideNavigationItem component and its tests, then check how ButtonBadge is implemented and used for slot-based content. Work out how a badge can fit into the item while preserving its active and hover states; done means a badge count can be rendered on a SideNavigationItem and its behavior is covered by tests.

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

Mô tả

feature request SAP Signavio TOPIC RD
Feature Request Description

Hi team :)
We from Signavio have a use case where we would like to render a badge count notification on a SideNavigationItem.

For now, our workaround is to render a <Button /> with a Badge, however this requires us to re-implement a lot of logic including the hover state and the active state.

I attached a screenshot of the designs.

Image
Proposed Solution

Perhaps adding a new badge component, or even re-using the existing 

 <SideNavigationItem
      dir="rtl"
      key={item.id}
      text={item.label}
      onClick={() => handleItemClick(item)}
      data-uie={item.testId}
      .......
>
      <SideNavigationItemBadge
            design="OverlayText"
            text={item.badgeText}
            slot="badge"
       />
</SideNavigationItem>
Proposed Alternatives

For now, our workaround is to render a <Button /> with a Badge, however this requires us to re-implement a lot of logic including the hover state and the active state.

Organization

Signavio - Shell Team

Additional Context

No response

Priority

High

Privacy Policy
  • I’m not disclosing any internal or sensitive information.
Ngôn ngữ chính
TypeScript
Star
1.8k
Fork
290
Merge trung bình
2 ngày 13 giờ
Pull request đã merge (30 ngày)
50

Chuẩn bị môi trường

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.

Issue khác của UI5/webcomponents

Tất cả issue của UI5/webcomponents

Issue tương tự

Thêm issue về TypeScript

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.