[Bug]: GroupedList footers are not aligned with header

[tonyhallett]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 5.68 GB / 15.59 GB
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.33)
    Internet Explorer: 11.0.22000.120

Are you reporting Accessibility issue?

no

Reproduction

https://github.com/microsoft/fluentui/blob/30d0ecb1a37bd941f01be0bc4a673374c422752b/packages/react-examples/src/react/GroupedList/GroupedList.Basic.Example.tsx

Bug Description

Code from the GroupedList basic example with additional onRenderFooter invoking the default

import * as React from 'react';
import { GroupedList, IGroup, GroupSpacer, IGroupFooterProps } from '@fluentui/react/lib/GroupedList';
import { IColumn, DetailsRow } from '@fluentui/react/lib/DetailsList';
import { Selection, SelectionMode, SelectionZone } from '@fluentui/react/lib/Selection';
import { Toggle, IToggleStyles } from '@fluentui/react/lib/Toggle';
import { useBoolean, useConst } from '@fluentui/react-hooks';
import { createListItems, createGroups, IExampleItem } from '@fluentui/example-data';

const toggleStyles: Partial<IToggleStyles> = { root: { marginBottom: '20px' } };
const groupCount = 3;
const groupDepth = 3;
const items = createListItems(Math.pow(groupCount, groupDepth + 1));
const columns = Object.keys(items[0])
  .slice(0, 3)
  .map(
    (key: string): IColumn => ({
      key: key,
      name: key,
      fieldName: key,
      minWidth: 300,
    }),
  );

const groups = createGroups(groupCount, groupDepth, 0, groupCount);

export const GroupedListBasicExample: React.FunctionComponent = () => {
  const [isCompactMode, { toggle: toggleIsCompactMode }] = useBoolean(false);
  const selection = useConst(() => {
    const s = new Selection();
    s.setItems(items, true);
    return s;
  });

  const onRenderCell = (
    nestingDepth?: number,
    item?: IExampleItem,
    itemIndex?: number,
    group?: IGroup,
  ): React.ReactNode => {
    return item && typeof itemIndex === 'number' && itemIndex > -1 ? (
      <DetailsRow
        columns={columns}
        groupNestingDepth={nestingDepth}
        item={item}
        itemIndex={itemIndex}
        selection={selection}
        selectionMode={SelectionMode.multiple}
        compact={isCompactMode}
        group={group}
      />
    ) : null;
  };

  return (
    <div>
      <Toggle
        label="Enable compact mode"
        checked={isCompactMode}
        onChange={toggleIsCompactMode}
        onText="Compact"
        offText="Normal"
        styles={toggleStyles}
      />
      <SelectionZone selection={selection} selectionMode={SelectionMode.multiple}>
        <GroupedList
          items={items}
          // eslint-disable-next-line react/jsx-no-bind
          onRenderCell={onRenderCell}
          selection={selection}
          selectionMode={SelectionMode.multiple}
          groups={groups}
          groupProps={ //*********************
            {onRenderFooter:(props,defaultRender) => {  
              props.footerText = "Footer";                       
              return defaultRender(props); 
            }}
          }
          compact={isCompactMode}

        />
      </SelectionZone>
    </div>
  );
};

Actual Behavior

Expected Behavior

Aligned with the header. It is debatable if the footershould align with the expand collapse or the group header text.

The problem is that the GroupFooter.base does not account for selection ( or the expand collapse ) https://github.com/microsoft/fluentui/blob/9c8ab6e329157f54899f97eec6c7bc597e632f0e/packages/react/src/components/GroupedList/GroupFooter.base.tsx#L15 padding is probably out too.

Compared to the GroupHeader.base that does https://github.com/microsoft/fluentui/blob/9c8ab6e329157f54899f97eec6c7bc597e632f0e/packages/react/src/components/GroupedList/GroupHeader.base.tsx#L157

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.