Fluentui: Stack component is unusable in List component

[PooLP]

Environment Information

• __Package version(s)__: @microsoft/sp-office-ui-fabric-core": "1.8.0" (UI Fabric 6?)
• __Browser and OS versions__: All

Actual behavior:

If use a Stack component in onRenderCell of a List component, unnecessary markup makes Stack unusable

ex:

<Stack horizontal={true} disableShrink={true} gap={5} padding={10}>
    <List 
          items={items}
          onRenderCell={this._onRenderCell}
    />
</Stack>

private _onRenderCell(item: any, index: number, isScrolling: boolean): JSX.Element {
    return (
      <Stack.Item align={'auto'}>
            My item content
      </Stack.Item>
)}

[dzearing]

This is by design. What are you trying to do exactly? Maybe we can find a better solution for what your targeting.

The List content "unecessary markup" is necessary for virtualization reasons. You give it items, it manages pagenation and virtualization for you. The List consists of a container (ms-List), a surface which renders the estimated render space (ms-List-surface), and pages (ms-List-page) which pop in and out depending on what's visible at the time.

List also only works vertically with virtualization. It's primary use is for rendering rows of content. And, if you're only rendering a few items, virtualization is overkill anyway.

The Stack is an abstraction around the flexbox. Flexbox manages direct descendants only. You can't nest wrappers (like List) in between the Stack and Stack.Item components; otherwise it conflicts with how stacks work.

[PooLP]

Hi,
Thanks for response, I understand the problem.

I wanted to use Stack in the List component to take advantage, as you say, of the benefits of the List component with the modularity of the Stack component. It does not matter, I'm going to do my own CSS to take advantage of Flexbox in the List component ;)

[dzearing]

That's what I'd recommend :)