Person Card component should be updated to the latest Fluent UI design

[vogtn]

Proposal: facilitate the integration of Fluent UI web components into the mgt-person-card

Description

This is an open thread for implementation, discussion and review of the mgt-person-card upgrade to utilize Fluent UI web components.

https://github.com/microsoft/fluentui/tree/master/packages/web-components

Rationale

Further mgt alignment with the current fluent guidelines

Preferred Solution

• [x] Phase 1: Suggest controls/UI/text with similar functionality/design that could be replaced with the Fluent UI web component. any concerns with implementation should be noted
• [x] Phase 2: Review preferred components to be used with the mgt-person-card (ideally with conformation from additional authors).
• [x] Phase 3: Develop POC with the mgt-person-card and the new Fluent UI web components
• [ ] Phase 4: Test against current functionality.
• [ ] Phase 5: Prepare for merge

[vogtn]

Phase 1: Proposal

Proposed Fluent UI web components:

1. Tabs
2. Divider + Button
3. Button

OR

2. Accordion
3. Button

Potential Concerns:

[1] Tabs - Can we integrate SVGs into a tab

[2] Accordion - If we chose to utilize this for the sections, see if we can change the "+" expanding cta into text "see more"

[3] Button - Do the features (highlighting, clickable) make sense for the "skills pills" and "see more" functionality seems different. @yyiinnggzz

[vogtn]

Phase 2: Review

New updates

1. Tabs
2. Divider + Button
3. Button
4. Textfield

Concerns:

[1] button, will allow additional hover states such as underline

[vogtn]

TABS

• Issue:

Activity indicator isn't very customizable. We wish to make the blue "active" state indicator the same height and width, as our hover box state.

• work-around: @yyiinnggzz designed hoverstate without the grey border:

[vogtn]

TABS

• Issue: The tabs, and attached tab-panel have inherited child spacing, making customization of just the tabs themselves difficult. We wish to add margin (margin-left to force the tabs to the right) to the tabs, but leave the panel margin alone. The grid doesn't seem to be customizable.

• workaround:

add a custom css grid column at the start with the spacing needed:

fluent-tabs {
    grid-template-columns: minmax(1px, 0.1fr);
}