Added partition for controlled overflow menu

[ValentinaKozlova]

• Added partition for controlled overflow menu
• Added unit tests
• Used Overflow component
• Styling will be done in the following PR

New Behavior

Behavior with Overflow component:
Note: last item should be always visible

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 4acd563e14d4a257585cff2dba2fb826ce9c059b}

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 4acd563e14d4a257585cff2dba2fb826ce9c059b (build)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2577fca:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[ling1726]

This does not behave as it should, take a look at the recording

There are a few things things causing the available space calculation to mess up. I just went with something like below as a quick workaround, but I think some of these underlying issues can be fixed in the overflow package

<Overflow padding={40} />

Style reset for <ol>

The <ol> tag is shipped with default user agent styles, you should reset those styles the padding and margins are messing up the available space. You could probably use the padding prop in the Overflow component too, but I don't think you want those styles anyway.

Divider width

I think this is rather overlooked from me. The overflow library was designed with the vertical dividers in mind that didn't take up that much space, which is essentially what toolbars used. A simple padding in the Overflow component could just solve this, but it might be worth looking into more complex dividers for that library.

Unmanaged divider

You have a divider unmanaged by the overflow library, which also throws off available space calculations.

          <ControlledOverflowMenu
            overflowItems={overflowItems}
            startDisplayedItems={startDisplayedItems}
            endDisplayedItems={endDisplayedItems}
          />
          <BreadcrumbDivider />

[ValentinaKozlova]

This does not behave as it should, take a look at the recording

There are a few things things causing the available space calculation to mess up. I just went with something like below as a quick workaround, but I think some of these underlying issues can be fixed in the overflow package

<Overflow padding={40} />

Style reset for <ol>

The <ol> tag is shipped with default user agent styles, you should reset those styles the padding and margins are messing up the available space. You could probably use the padding prop in the Overflow component too, but I don't think you want those styles anyway.

Divider width

I think this is rather overlooked from me. The overflow library was designed with the vertical dividers in mind that didn't take up that much space, which is essentially what toolbars used. A simple padding in the Overflow component could just solve this, but it might be worth looking into more complex dividers for that library.

Unmanaged divider

You have a divider unmanaged by the overflow library, which also throws off available space calculations.

          <ControlledOverflowMenu
            overflowItems={overflowItems}
            startDisplayedItems={startDisplayedItems}
            endDisplayedItems={endDisplayedItems}
          />
          <BreadcrumbDivider />

Hi @ling1726 , I did style reset in a separate PR. Hope, I'll merge it tomorrow. And I talked to Tudor about the divider issue. I can collaborate on fixing it when the major features of Breadcrumb are ready. There are accessibility and focus left