fix: mgt-person avatar size customization in vertical layout

[Mnickii]

Closes #2867

PR Type

Bugfix

Description of the changes

PR checklist

• Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
• All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
• Stories have been added and existing stories have been tested
• Added appropriate documentation. Docs PR

• License header has been added to all new source files (yarn setLicense)
• Contains NO breaking changes

Other information

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[github-actions]

📖 The updated storybook is available here

[github-actions]

📖 The updated storybook is available here

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[sebastienlevert]

It appears that it works, "but" it has effects on other components. Here's an example when we set --person-avatar-size: 120px; on a component.

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[Mnickii]

It appears that it works, "but" it has effects on other components. Here's an example when we set --person-avatar-size: 120px; on a component.

Fixed this in latest update to have component specific --avatar-size tokens that individually change the mgt-person avatar size token

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[sebastienlevert]

This seems great! What does it mean to have extra tokens? What does this change for others? Also, I'd appreciate a PR for the new tokens documentation. Thanks!

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[sebastienlevert]

This works great!

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[github-actions]

Package	Line Rate	Branch Rate	Complexity	Health
mgt-components.src.components	81%	100%	0	✔
mgt-components.src.components.mgt-contact	68%	83%	0	➖
mgt-components.src.components.mgt-file	51%	100%	0	➖
mgt-components.src.components.mgt-file-list	56%	100%	0	➖
mgt-components.src.components.mgt-file-list.mgt-file-upload	49%	88%	0	❌
mgt-components.src.components.mgt-get	30%	100%	0	❌
mgt-components.src.components.mgt-messages	66%	100%	0	➖
mgt-components.src.components.mgt-organization	47%	100%	0	❌
mgt-components.src.components.mgt-person	81%	65%	0	✔
mgt-components.src.components.mgt-person-card	66%	47%	0	➖
mgt-components.src.components.mgt-picker	78%	100%	0	✔
mgt-components.src.components.mgt-profile	40%	100%	0	❌
mgt-components.src.components.mgt-tasks-base	77%	100%	0	✔
mgt-components.src.components.mgt-theme-toggle	100%	100%	0	✔
mgt-components.src.components.mgt-todo	79%	100%	0	✔
mgt-components.src.components.sub-components.mgt-arrow-options	71%	100%	0	➖
mgt-components.src.components.sub-components.mgt-flyout	78%	53%	0	✔
mgt-components.src.components.sub-components.mgt-spinner	100%	100%	0	✔
mgt-components.src.graph	38%	89%	0	❌
mgt-components.src.styles	92%	80%	0	✔
mgt-components.src.utils	79%	27%	0	✔
mgt-element.dist.es6.components.src.components	73%	79%	0	➖
mgt-element.dist.es6.mock.src.mock	91%	73%	0	✔
mgt-element.dist.es6.providers.src.providers	85%	72%	0	✔
mgt-element.dist.es6.src	91%	80%	0	✔
mgt-element.dist.es6.utils.src.utils	66%	69%	0	➖
mgt-element.src	88%	100%	0	✔
mgt-element.src.components	78%	100%	0	✔
mgt-element.src.mock	81%	56%	0	✔
mgt-element.src.providers	80%	85%	0	✔
mgt-element.src.utils	71%	90%	0	➖
Summary	66% (14140 / 21431)	64% (421 / 656)	0	➖

[gavinbarron]

Great work, this is a really nice improvement to both our functionality and our docs,