[Feature]: Overflow should allow for configuration of gap per item

[mathis-m]

Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

Currently it is not posible to define the exact gap between items so that at any given point in time the visible items are hidden at the exact time of overflow.

We can only provide a static padding, this results for early overflow when resizing smaller. This is getting more noticable for whenn many items are used with a larger gap.
Eg. 10 items (100px width), gap 20px => padding 200px
Item 2 will be hidden at 399px container width, Even tho it would fit until 220px container width

Example dynamic padding based on visible item count: [Item 1] [Item 2] [Item 3]

General State
Item width: 100px
Gap: 10px

Initial state for Overflow
Overflow Padding: 20px
Container size: 320px

Container Resize
Container size: 319px

Overflow Manager will hide Item 3 because 3 * 100 > 319 - 20
Example is now: [Item 1] [Item 2]

Option 1: In order for the overflow to happen after resizing at 209px the padding needs to be in total 10px.

Option 2: But the padding as well needs to be 20px so that the overflow can happen after resizing to 320px. Otherwise it would already show item 3 at 310px when we would use 10px for padding.

Even if we would use 10px (Option 1, set padding to actual total padding currently in use) this would introduce a flickering as the overflow manager (instances, plural because if the options change a new instance is created) would oscillate between 3 and 2 items:

container size: 319px
padding: 20px

1. 3 * 100 > 319 - 20 => Item 3 hide
2. Update Padding to 10px
3. Next instance of overflow manager is created: all items are in visible queue
4. Hide Until 3 * 100 < 319 - 10 => all are shown
5. Update Padding to 20px
6. Next instance of overflow manager is created: all items are in visible queue
7. Hide Until 3 * 100 < 319 - 20=> Item 3 is hidden
8. Continue at 2.

Related Code for proccesing of items:

fluentui/packages/react-components/priority-overflow/src/overflowManager.ts

Lines 141 to 176 in 5964b11

	const processOverflowItems = (): boolean => {
	if (!container) {
	return false;
	}
	sizeCache.clear();
	const availableSize = getClientSize(container) - options.padding;
	// Snapshot of the visible/invisible state to compare for updates
	const visibleTop = visibleItemQueue.peek();
	const invisibleTop = invisibleItemQueue.peek();
	while (compareItems(invisibleItemQueue.peek(), visibleItemQueue.peek()) > 0) {
	hideItem(); // hide elements whose priority become smaller than the highest priority of the hidden one
	}
	// Run the show/hide step twice - the first step might not be correct if
	// it was triggered by a new item being added - new items are always visible by default.
	for (let i = 0; i < 2; i++) {
	// Add items until available width is filled - can result in overflow
	while (
	(occupiedSize() < availableSize && invisibleItemQueue.size() > 0) ||
	invisibleItemQueue.size() === 1 // attempt to show the last invisible item hoping it's size does not exceed overflow menu size
	) {
	showItem();
	}
	// Remove items until there's no more overflow
	while (occupiedSize() > availableSize && visibleItemQueue.size() > options.minimumVisible) {
	hideItem();
	}
	}
	// only update when the state of visible/invisible items has changed
	return visibleItemQueue.peek() !== visibleTop || invisibleItemQueue.peek() !== invisibleTop;
	};

Re-instantiate of manager

fluentui/packages/react-components/react-overflow/library/src/useOverflowContainer.ts

Lines 71 to 89 in 5964b11

	useIsomorphicLayoutEffect(() => {
	if (!containerRef.current || !canUseDOM() || firstMount) {
	return;
	}
	const newOverflowManager = createOverflowManager();
	newOverflowManager.observe(containerRef.current, overflowOptions);
	setOverflowManager(newOverflowManager);
	// We don't want to re-create the overflow manager when the first mount flag changes from true to false
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [overflowOptions]);
	/* Clean up overflow manager on unmount */
	React.useEffect(
	() => () => {
	overflowManager?.disconnect();
	},
	[overflowManager],
	);

Add all items to visible queue after instantiate

fluentui/packages/react-components/priority-overflow/src/overflowManager.ts

Line 190 in 5964b11

Object.values(overflowItems).forEach(item => visibleItemQueue.enqueue(item.id));

Missing Option from my perspective

Provide a way to either statically define a space between items and padding per item, that is used based on items visible.
Provide a function that is called per item to let the user decide based on id and index what the total padding is.

Is there a better solution to process overflow

Probably, yes, is there any reason why we use width sum instead of reverse iterating and checking x coordinate plus width?
If coordinate would be used, all the css gap would work ootb.

Additional context

No response

Have you discussed this feature with our team

No response

Validations

• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

Low

[ValentinaKozlova]

Hello @mathis-m, currently there's a workaround for a gap in the Overflow component.
You might want to use OverflowDivider as a gap and to style it accordingly.
It's not the best solution, but might help for now.
Here's an example:
https://stackblitz.com/edit/um8bvi5k?file=src%2Fexample.tsx

[mathis-m]

Hello @mathis-m, currently there's a workaround for a gap in the Overflow component.
You might want to use OverflowDivider as a gap and to style it accordingly.
It's not the best solution, but might help for now.
Here's an example:
https://stackblitz.com/edit/um8bvi5k?file=src%2Fexample.tsx

Thanks, my workaround is to add padding within the item itself, depending on its index and if overflow button is shown or not.

[tudorpopams]

Personally I feel that the OverflowDivider option should be good enough for this. @ling1726 what do you think?

[mathis-m]

Just my two cents: Fluent Ui is so mature and uses so many great concepts in v9, I think it would be worth investing a little time into the great Overflow component(really useful), to find an algorithm that just works, without declarative padding and supports CSS Grid and Flex gaps!

Eg. Find most offset item on axis and use offset and element size to calculate the overflow items. Instead of building a sum over all widths. This would be more versatile and supports gaps and probably even static positioning!

[ling1726]

This is essentially a duplicate of #23066

We've been aware of this issue, and haven't prioritized it yet since the main difficulty is that there is no way in the DOM API to measure margins/gaps in the bounding box model. Even if we added some kind of prop to declare regular spacing there's no guarantee it won't get out of sync with what the layouting engine actually makes those gaps.

We've been recommending folks to use the padding workaround for now - it's the option that has the least amount of effort

[ling1726]

Going to close this and track this problem under the eixsting issue #23066

Please drop a like and a bump in that issue so we can know the interest and reprioritize