Feature Request: OverflowIndicator

[bc-sarveshpandit]

Is your feature request related to a problem? Please describe.

The problem arises when displaying a long list of items in a user interface. A lengthy, comma-separated list can clutter the UI, become difficult to read, and overwhelm the user. Additionally, it can make the layout less visually appealing and reduce usability on smaller screens.

Describe the solution, feature, or improvement you'd like

React component that dynamically handles long lists by truncating them once a specified length is exceeded. Instead of showing all items, the component:

• Displays a truncated version of the list with a visual indicator, such as a circle or badge, representing the remaining items.
• The indicator shows the count of items not displayed (e.g., "+5" for 5 additional items).
• When the user hovers over the indicator, a tooltip or popover appears, displaying the full list of items in a readable format.

Is this something worth adding in big-design or is the use-case really specific not something worth adding to big-design?

[bc-sarveshpandit]

@chanceaclark Let me know what you think?

[chanceaclark]

@bc-sarveshpandit I think our guidance is similar to the approach we take in our product list by having a dropdown show the rest of the groups:

@davelinke what are your thoughts here?

[davelinke]

Well, I'm biased here as I was the one designing the one @bc-sarveshpandit shows on the screenshot.

The one shown and the screenshot you pasted differ in many ways, as the first one is just about indicating that there are more items, and there is no action required directly from the overlay presented, hence the tooltip.

The one in the product listing feels more as an action menu within the visual language of BigDesign, causing confusion around it's real utility

I am of course inclined to the interaction Sarvesh is showing due to the fact that it doesn't disrupt row height keeping things clean and also denoting that the information within the dot is supportive but not essential. Maybe the visual aspect of it could be toned down to be less distractive and less "buttony"

Neither of these two are a sanctioned official pattern yet, but we have definitely discussed the one in product listing as a little bit too much within Product Design.

I'd be glad to introduce this overflow component through the Platform Design process.

[bc-sarveshpandit]

@davelinke @chanceaclark I'm unfamiliar with the process here.

I'd be glad to introduce this overflow component through the Platform Design process.

@davelinke Would you need to go through this approval first before I can try to get a PR out for this component?

[davelinke]

Indeed @bc-sarveshpandit , process starts with approval and then integration into the figma library to have a source of truth for the code implementation. Will keep you posted on slack

[bc-sarveshpandit]

Indeed @bc-sarveshpandit , process starts with approval and then integration into the figma library to have a source of truth for the code implementation. Will keep you posted on slack

Thanks @davelinke