Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

Improve autoSize middleware:

1. Handle double scrollbar

Currently when autoSize is specified, it adds maxHeight/maxWidth style and overflowX/overflowY. But if the floating element has its own scrollable content, there can be double scrollbar:
https://codesandbox.io/s/blue-framework-mstvsn?file=/example.tsx

1.a When the content of the floating element is expected, for example Menu:

We can remove the double scrollbar by shrinking the scrollable part.

1.b When the content of the floating element is unknown, for example Popover:

We need to way to let user override the inline style added by autoSize. Currently the only way to override these styles is by adding important!. For example if the user would like to make PopoverSurface not scrollable:

const useStyles = makeStyles({
  floating: {
    overflowY: "hidden !important" // to override the inline `overflowY:auto` style added by autoSize
  }
});

export const Default = () => {
  const styles = useStyles();
  return (
    <Popover positioning={{ autoSize: true }}>
      <PopoverTrigger disableButtonEnhancement>
        <Button>Toggle popover</Button>
      </PopoverTrigger>

      <PopoverSurface className={styles.floating}>
        <SomeHeader />
        <SomeScrollableContent />
        <SomeFooter />
      </PopoverSurface>
    </Popover>
  );
}

2. Consolidate 'height'/'height-always' option (and 'width'/'width-always', true/'always')

AutoSize now have so many options, for example when autoSize=true, styles are applied only when overflow happens, and when autoSize='always', styles are applied all the time regardless of overflow.

• A. The case where we want to use 'always' and not 'true':
  When the floating element keeps changing its size, and it is difficult to call updatePosition on each change, we want to use autoSize='always' to make floating element always fit into the viewport.
  For example: https://codesandbox.io/s/blue-framework-6dnnt7?file=/example.tsx changes size every time the 'change size' button is clicked. The PopoverSurface always have max-height style because of autoSize='always'. Therefore it always fits into the viewport without the need to call updatePosition.

• B. The case where we want to use 'true' and not 'always':
  When the floating element changes its size and needs to flip. This is easier with an example: https://codesandbox.io/s/v9-poppover-not-wanting-always-vk6w9s?file=/example.tsx. When the viewport width is small, clicking on 'change size' button calls updatePosition and:

  autoSize=true	autoSize='always
  the floating element flips to the left as expected:	the floating element always has max-width style, and therefore it does not flip on size change:

We can consolidate the xxx/xxx-always option if we always apply max-height/max-width (case A happy), but clear them to restore floating element to its original size when updatePosition is called (case B also happy).

Have you discussed this feature with our team

teams-prg

Additional context

No response

Validations

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