[Avatar] Add new sizing 'extra-small'

[omar-sr88]

WHY are these changes introduced?

I work in Vault Tools and recently with the launch of Debrief the need for a new Avatar sizing came up.
In section Prototypes being reviewed in (exhibit A) we use an Avatar size of 24px to condense the list and reduce whitespace.

The Avatar small size has the following result (exhibit B).

Our designer, @ChrisHS, has also envisioned smaller avatar for single line text components (exhibit C)

Opening this contribution to extend applications of Avatar

WHAT is this pull request doing?

1. Adds a new css variable for the extrasmall size at 24px
2. Created the .sizeExtraSmall css class and added an extra min-width so it doesn't affect the base value for that attr (currently $sizeSmall)
3. Added extraSmall to Size prop

Sizes for comparrison

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
     <Page title="Playground">
      <Avatar size="extraSmall" initials="XS" />
      <Avatar size="small" initials="SM" />
      <Avatar initials="MD" />
      <Avatar size="large" initials="LG" />
    </Page>
  );
}

Additional question:

• While testing with initials I saw that the Avatar component does not do any sort of control on that prop. It is clearly designed to handle 2 letters, but if for some reason someone enters 3+ this starts happening:

I wonder if we shouldn't have some extra check or control for that. Added a 2nd commit with a suggestion to always crop initials to the first and last in case more than 2 characters are present. It was an arbitrary choice, btw.

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, ping @ sarahill to update the Polaris UI kit

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[github-actions]

size-limit report

Path	Size
cjs	142.52 KB (+0.01% 🔺)
esm	96.28 KB (+0.01% 🔺)
esnext	139.47 KB (+0.02% 🔺)
css	33.75 KB (+0.02% 🔺)

[kyledurand]

This looks good just a couple of questions. Can you also add an example for extra small in the avatar readme?

And don't forget to add to UNRELEASED.md

[omar-sr88]

Can you also add an example for extra small in the avatar readme?

I've got the UNRELEASED.md updated and wanted to ask about the Best practices section of the README.md

I can add the example, but I don't have a best practice direction to go with.
Eg:

 Extra small (24 x 24 px): use when small size is too big
 Small (32 × 32 px): use when the medium size is too big for the layout, or when the avatar has less importance

[chloerice]

🚀

[ghost]

🎉 Thanks for your contribution to Polaris React!