User avatar follow up fixes from release review

[elycheea]

Summary from #5544

• Noticed that in Safari that the ring is missing. Should check with design if we intend for this to appear on click or just focus[^1].
• Theming works when wrapped in a component but this isn’t apparent in Storybook. May need to add documentation on different ways to handle theming using UserAvatar[^2].
• User avatar SCSS files need to add imports for Tooltip and possibly TooltipTrigger in the _carbon-imports.scss and _user-avatar.scss files respectively.
• Code coverage look GOOD 🔥

Tasks

• [ ] Check with design and address focus ring in Safari as needed
• [ ] Update stories to demonstrate theme handling
  • [ ] Add documentation in Storybook docs
• [ ] Add missing SCSS imports to carbon-imports.scss and user-avatar.scss
• [ ] Address console error around renderIcon prop type^4
• [ ] Add extra comments to clarify theme mixins/handling (for anyone coming in a few years later :))

[^1]: In Safari, focus state only appears on tab but not on click, which is inconsistent with other browsers. (#5544 comment) [^2]: Suggestion on how we show Theme in Storybook based on Carbon React Storybook. (#5544 comment)

[anamikaanu96]

Hi @elycheea, regarding "focus ring" I discussed with Marion Hekeler(@marion-bruells) she mentioned it should work only on tabbing.