search

ni / nimble

The NI Nimble Design System
https://nimble.ni.dev
MIT License
31 stars 8 forks source link

Add a badge component #1428

Open pakdev opened 1 year ago

pakdev commented 1 year ago

😯 Problem to Solve

A recent project required a badge component to indicate the number of notifications someone has e.g.

image

💁 Proposed Solution

Create a badge component similar to Angular Material's

📋 Tasks

jattasNI commented 1 year ago

Thanks for filing @pakdev! Some questions for you to help us understand scope and priority:

  1. do you only need the badge on tabs or are you aware of use cases to add a badge on other components (e.g. buttons, text)? Do you need the Material feature that lets you position it in arbitrary locations?
  2. any other requirements for the content of the badge? For example:
    1. Is it always a single digit number?
    2. Different background colors for different types of notification?
    3. Any additional content to display on hover?
  3. does this request have a deadline?
pakdev commented 1 year ago
  1. Today, I need the badge on buttons (my example above uses my own tab control whose tabs are mat-icon-button's containing mat-icon's). I do not currently need arbitrary locations (top-right is sufficient)
  2. The badge content must allow for multi-digit numbers. It would be nice if different background colors were supported, though I am not currently using that feature. I'm not sure I'd ever react to hover events.
  3. No deadline as I have workarounds
jattasNI commented 1 year ago

@fredvisser let's discuss this at an upcoming grooming meeting. Some questions to drive:

  1. any changes to our intake process? (component status table? tags to track issues moving from initial request to prioritized?)
  2. any outreach to gather additional requirements from other clients?
  3. what's the priority for IxD / VxD / dev? Any work items to create?
kroeschl commented 1 year ago

Seconding this request for RDSS MTO's internal Dashboard product.

NIbokeefe commented 1 year ago

Will something like this work for you @pakdev @kroeschl?

Screen Shot 2023-09-13 at 4 17 11 PM

Early on in my button spec I had a design in place for badges but we did not have a use case at the time, so it was pulled. We did however implement notification alerts in multiple colors for tabs in SLE. It's a similar layout but instead a circular dot with no type.

@jattasNI

kroeschl commented 1 year ago

@NIbokeefe Our use case is text with a badge, so something like this: image

The styling you showed looks fine as long as it can apply to more than just buttons.

pakdev commented 1 year ago

Will something like this work for you @pakdev @kroeschl?

Can the badge only appear on the left side?

kroeschl commented 1 year ago

Not in our case, though I'm not wondering if we're just abusing the badge concept and should re-think the UI. We have a table and decorate the name column text with a count of related active resources: image

NIbokeefe commented 6 months ago

@TJ-G

Here's the task for the badge feature I mentioned during our UX Consulting meeting today.