Avatar groups should only display the n overflow element when n>1, otherwise use the space to display the final item

[kjhenner]

• [X ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Avatar groups should only display the n overflow element when n>1, otherwise use the space to display the final item. The current behavior is to display a number of item specified by maxCount, plus an additional item with the n value when the number of children exceeds max count.

What does the proposed API look like?

Not sure how to express this idea concisely in the prop name, but backwards compatibility could be maintained by adding a boolean prop to determine whether to follow a new pattern in which the final item is either put in the max position if it is the last item, or that position is used to display the count of remaining items

Current behavior is like

maxCount = 3
(A)
(A)(B)
(A)(B)(C)
(A)(B)(C)( 1) <-- Note that we're not only displaying more than the user has asked for, and the last position is used inefficiently.
(A)(B)(C)( 2)
...

Proposed behavior with overFlowInFinal === true:
maxCount = 3
(A)
(A)(B)
(A)(B)(C) <-- We limit the total number of elements to the maxCount and correctly display the final item in slot 3
(A)(B)( 2)
...

Props would look like this:

export interface GroupProps {
  className?: string;
  children?: React.ReactNode;
  style?: React.CSSProperties;
  prefixCls?: string;
  maxCount?: number;
  overflowInFinal?: boolean; // <-- Add this prop
  maxStyle?: React.CSSProperties;
  maxPopoverPlacement?: 'top' | 'bottom';
  /*
   * Size of avatar, options: `large`, `small`, `default`
   * or a custom number size
   * */
  size?: AvatarSize;
}

[afc163]

We can use https://github.com/react-component/overflow to refactor it.

[github-actions]

Hello @kjhenner. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @kjhenner，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。