(web-components): add avatar as a new Fluent 2 aligned component #26729

chrisdholt · 2023-02-07T06:48:46Z

Previous Behavior

We did not have a Fluent 2 aligned Avatar Component.

New Behavior

Now we do! closes #26672

This PR provides pretty much parity of API but proposes a flat structure to limit the size of our element by leveraging the default slot for string attributes. Additionally, I'm proposing a property/attribute delta - color-id rather than id-for-color, but I'm open to changing it back to align here.

If we do not have initials or any slotted items in the default slot, a default SVG is returned in the template.
If we have a name or initials, we'll get the correct initials based on what's provided.
If we have a slotted item (such as an image) that will be projected into the DOM.

Lastly, this does not include the manipulation of aria-label and aria-labelledby automatically. There are a couple of considerations I think we should look at given the potential perf cost of "covering the sins" of consuming teams. If we went the guidance method, teams would construct their labels (we can provide specific examples!) and the cost is basically free as we're leveraging the native API's on the element. If we want to provide this by default then we need to observe and manage the lifecycle of both aria-label and aria-labelledby as well as observe the badge slot and then likely manipulate or modify slotted elements such as the badge slot as well. Finally, we'd need a method of providing a localized string to create this I think...which is easy enough with a formatter - but it encourages both us handling it and encourages us taking on the cost. Miro and I discussed this in our sync this week and agreed it isn't a blocker but I do think it's worth discussing the trade offs.

Related Issue(s)

Fixes #

fabricteam · 2023-02-07T06:55:32Z

📊 Bundle size report

_{🤖 This report was generated against 7d9573d73b4be010c2b07540fa0c23c27aba2821}

codesandbox-ci · 2023-02-07T07:03:09Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 34ea6e8:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

packages/web-components/src/avatar/avatar.styles.ts

size-auditor · 2023-02-14T01:18:44Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 7d9573d73b4be010c2b07540fa0c23c27aba2821 (build)

packages/web-components/src/avatar/avatar.options.ts

eljefe223 · 2023-02-14T23:44:08Z

packages/web-components/src/avatar/avatar.styles.ts

+  :host([shape='square'][size='96']),
+  :host([shape='square'][size='120']),
+  :host([shape='square'][size='128']) {
+    border-radius: ${borderRadiusXLarge};


Would be nice to get docs up with all these values for reference.

tudorpopams

Approving for v-build owned files.

miroslavstastny

I think all the *Changed callbacks which call either setInitials() or setColor() are unnecessary asboth are just compute functions which do not alter anything.
When any of name, initials, color or color-id attributes changes, the relevant part of the template is invalidated and re-rendered.

change/@fluentui-web-components-1c73e6e8-61a0-46c8-b69e-0820f5a2488d.json

packages/web-components/src/avatar/avatar.styles.ts

miroslavstastny · 2023-02-21T10:40:05Z

packages/web-components/src/avatar/avatar.ts

+   * HTML Attribute: active
+   */
+  @attr
+  public active?: AvatarActive | undefined;


Besides active and inactive, FUIR9 also uses unset (which is default).

@miroslavstastny this is one where I think we need to figure out the right thing...am I mistaken that the intent of "unset" is undefined? Basically "removing" the state itself? While I'm more than happy to align on including "unset", it's basically a noop here, and our approach was to not provide default values to attributes when possible to avoid cluttering DOM. Happy to align, but I think these are places where I'm a bit lost on why certain decisions were made.

I think this is the only outstanding instance, I'm going to look for detail on this in past issues.

OK, I've found what I think is precedent from FUIR9 for adopting undefined here instead of "unset". This specific instance seems to be a large part of prompting this RFC: #23304. Given we're doing new work here, I'd rather align with this forward-thinking direction which I assume will be adopted into the React Avatar implementation when we can next make a breaking change.

Makes sense, let's go with undefined. Do you plan to add a spec documenting the differences between FUIR9 and WC3?

packages/web-components/src/avatar/avatar.options.ts

packages/web-components/src/avatar/avatar.ts

packages/web-components/src/avatar/avatar.styles.ts

packages/web-components/src/avatar/avatar.template.ts

packages/web-components/src/avatar/avatar.ts

packages/web-components/src/avatar/avatar.styles.ts

packages/web-components/src/avatar/avatar.ts

miroslavstastny

Unblocking the PR, I still would like to understand colorIdChanged()

chrisdholt · 2023-02-22T21:58:18Z

Unblocking the PR, I still would like to understand colorIdChanged()

Removed/resolved - I think I might have misspelled or typed a value which doesn't exist. 👀

…ions

) * add avatar as a new component * add export path * update helpers path in avatar stories * create public static value for named colors * update styles to support any slotted badge * add size 16 styles and stories * update animations to use tokens * add support for prefers reduced motion on active and inactive transitions * change set to generate for color and initials fns * add large badge styles * remove unnecessary badge cchange handlers * fix brand color in dark mode with static inverted value * update change file * remove unnecessary lifecycle event * add avatar readme for react deltas * update attributes as optional * update api report

…rosoft#26729) * add avatar as a new component * add export path * update helpers path in avatar stories * create public static value for named colors * update styles to support any slotted badge * add size 16 styles and stories * update animations to use tokens * add support for prefers reduced motion on active and inactive transitions * change set to generate for color and initials fns * add large badge styles * remove unnecessary badge cchange handlers * fix brand color in dark mode with static inverted value * update change file * remove unnecessary lifecycle event * add avatar readme for react deltas * update attributes as optional * update api report

) * add avatar as a new component * add export path * update helpers path in avatar stories * create public static value for named colors * update styles to support any slotted badge * add size 16 styles and stories * update animations to use tokens * add support for prefers reduced motion on active and inactive transitions * change set to generate for color and initials fns * add large badge styles * remove unnecessary badge cchange handlers * fix brand color in dark mode with static inverted value * update change file * remove unnecessary lifecycle event * add avatar readme for react deltas * update attributes as optional * update api report

chrisdholt requested a review from a team as a code owner February 7, 2023 06:48

msft-fluent-ui-bot added the web-components label Feb 7, 2023

msft-fluent-ui-bot assigned micahgodbolt Feb 7, 2023

chrisdholt force-pushed the users/chhol/add-avatar-as-new-component branch from d732376 to 2680450 Compare February 7, 2023 06:50

eljefe223 reviewed Feb 10, 2023

View reviewed changes

chrisdholt requested a review from eljefe223 February 10, 2023 20:46

chrisdholt force-pushed the users/chhol/add-avatar-as-new-component branch from c00523f to 0f44ff9 Compare February 14, 2023 01:04

chrisdholt requested a review from a team as a code owner February 14, 2023 01:04

chrisdholt force-pushed the users/chhol/add-avatar-as-new-component branch from 0f44ff9 to 0e1a331 Compare February 14, 2023 04:36

eljefe223 reviewed Feb 14, 2023

View reviewed changes

packages/web-components/src/avatar/avatar.options.ts Show resolved Hide resolved

eljefe223 reviewed Feb 14, 2023

View reviewed changes

eljefe223 approved these changes Feb 14, 2023

View reviewed changes

chrisdholt force-pushed the users/chhol/add-avatar-as-new-component branch 3 times, most recently from 630fab7 to 021cf99 Compare February 21, 2023 00:04

chrisdholt assigned miroslavstastny and unassigned micahgodbolt Feb 21, 2023

tudorpopams approved these changes Feb 21, 2023

View reviewed changes

miroslavstastny requested changes Feb 21, 2023

View reviewed changes

msft-fluent-ui-bot added the Needs: Author Feedback label Feb 21, 2023

miroslavstastny reviewed Feb 21, 2023

View reviewed changes

packages/web-components/src/avatar/avatar.styles.ts Outdated Show resolved Hide resolved

msft-fluent-ui-bot removed the Needs: Author Feedback label Feb 21, 2023

chrisdholt force-pushed the users/chhol/add-avatar-as-new-component branch from 0c0c88f to c56866b Compare February 22, 2023 01:09

chrisdholt requested a review from miroslavstastny February 22, 2023 01:09

miroslavstastny reviewed Feb 22, 2023

View reviewed changes

packages/web-components/src/avatar/avatar.ts Show resolved Hide resolved

miroslavstastny approved these changes Feb 22, 2023

View reviewed changes

chrisdholt added 13 commits February 24, 2023 16:31

update helpers path in avatar stories

723932a

create public static value for named colors

80afc41

update styles to support any slotted badge

dce5d55

add size 16 styles and stories

84ecbcc

update animations to use tokens

566d983

add support for prefers reduced motion on active and inactive transit…

1866958

…ions

change set to generate for color and initials fns

34aa077

add large badge styles

cec4c02

remove unnecessary badge cchange handlers

9ad4889

fix brand color in dark mode with static inverted value

436a525

update change file

bcc0324

remove unnecessary lifecycle event

65fb284

add avatar readme for react deltas

4006a9f

chrisdholt force-pushed the users/chhol/add-avatar-as-new-component branch from 0ff51f6 to 4006a9f Compare February 25, 2023 00:32

chrisdholt added 2 commits February 24, 2023 16:47

update attributes as optional

cee198c

update api report

34ea6e8

chrisdholt merged commit 4309a0d into microsoft:web-components-v3 Feb 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(web-components): add avatar as a new Fluent 2 aligned component #26729

(web-components): add avatar as a new Fluent 2 aligned component #26729

chrisdholt commented Feb 7, 2023 •

edited

Loading

fabricteam commented Feb 7, 2023 •

edited

Loading

codesandbox-ci bot commented Feb 7, 2023 •

edited

Loading

size-auditor bot commented Feb 14, 2023 •

edited

Loading

eljefe223 Feb 14, 2023

tudorpopams left a comment

miroslavstastny left a comment

miroslavstastny Feb 21, 2023

chrisdholt Feb 21, 2023

chrisdholt Feb 22, 2023

chrisdholt Feb 22, 2023

miroslavstastny Feb 22, 2023

miroslavstastny left a comment

chrisdholt commented Feb 22, 2023

(web-components): add avatar as a new Fluent 2 aligned component #26729

(web-components): add avatar as a new Fluent 2 aligned component #26729

Conversation

chrisdholt commented Feb 7, 2023 • edited Loading

Previous Behavior

New Behavior

Related Issue(s)

fabricteam commented Feb 7, 2023 • edited Loading

📊 Bundle size report

codesandbox-ci bot commented Feb 7, 2023 • edited Loading

size-auditor bot commented Feb 14, 2023 • edited Loading

Asset size changes

eljefe223 Feb 14, 2023

Choose a reason for hiding this comment

tudorpopams left a comment

Choose a reason for hiding this comment

miroslavstastny left a comment

Choose a reason for hiding this comment

miroslavstastny Feb 21, 2023

Choose a reason for hiding this comment

chrisdholt Feb 21, 2023

Choose a reason for hiding this comment

chrisdholt Feb 22, 2023

Choose a reason for hiding this comment

chrisdholt Feb 22, 2023

Choose a reason for hiding this comment

miroslavstastny Feb 22, 2023

Choose a reason for hiding this comment

miroslavstastny left a comment

Choose a reason for hiding this comment

chrisdholt commented Feb 22, 2023

chrisdholt commented Feb 7, 2023 •

edited

Loading

fabricteam commented Feb 7, 2023 •

edited

Loading

codesandbox-ci bot commented Feb 7, 2023 •

edited

Loading

size-auditor bot commented Feb 14, 2023 •

edited

Loading