(web-components): add avatar as a new Fluent 2 aligned component (#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

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

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "feat(avatar): add Avatar web component",
+ "packageName": "@fluentui/web-components",
+ "email": "chhol@microsoft.com",
+ "dependentChangeType": "patch"
+}

packages/web-components/.eslintrc.json

@@ -18,6 +18,7 @@
  "no-prototype-builtins": "off",
  "no-fallthrough": "off",
  "no-unexpected-multiline": "off",
+ "no-useless-escape": "off",
  "import/order": "error",
  "sort-imports": [
  "error",

packages/web-components/docs/api-report.md

@@ -5,18 +5,234 @@
 ```ts
 
 import { CSSDesignToken } from '@microsoft/fast-foundation';
+import { DividerOrientation } from '@microsoft/fast-foundation';
+import { DividerRole } from '@microsoft/fast-foundation';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
+import { FASTAccordion } from '@microsoft/fast-foundation';
+import { FASTAccordionItem } from '@microsoft/fast-foundation';
+import { FASTDivider } from '@microsoft/fast-foundation';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
 import { FASTProgress } from '@microsoft/fast-foundation';
 import { FASTProgressRing } from '@microsoft/fast-foundation';
+import { FASTSwitch } from '@microsoft/fast-foundation';
 import { StartEnd } from '@microsoft/fast-foundation';
 import { StartEndOptions } from '@microsoft/fast-foundation';
 import { StaticallyComposableHTML } from '@microsoft/fast-foundation';
 import type { Theme } from '@fluentui/tokens';
 import { ValuesOf } from '@microsoft/fast-foundation';
 
+// @public
+export class Accordion extends FASTAccordion {
+}
+
+// @public
+export const accordionDefinition: FASTElementDefinition<typeof Accordion>;
+
+// Warning: (ae-internal-missing-underscore) The name "AccordionItem" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export class AccordionItem extends FASTAccordionItem {
+ // @public
+ block: boolean;
+ // @public
+ expandIconPosition: AccordionItemExpandIconPosition;
+ // @public
+ size: AccordionItemSize;
+}
+
+// Warning: (ae-incompatible-release-tags) The symbol "definition" is marked as @public, but its signature references "AccordionItem" which is marked as @internal
+//
+// @public
+export const accordionItemDefinition: FASTElementDefinition<typeof AccordionItem>;
+
+// @public
+export const AccordionItemExpandIconPosition: {
+ readonly start: "start";
+ readonly end: "end";
+};
+
+// @public
+export type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
+
+// @public
+export const AccordionItemSize: {
+ readonly small: "small";
+ readonly medium: "medium";
+ readonly large: "large";
+ readonly extraLarge: "extra-large";
+};
+
+// @public
+export type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
+
+// @public (undocumented)
+export const accordionItemStyles: ElementStyles;
+
+// Warning: (ae-incompatible-release-tags) The symbol "template" is marked as @public, but its signature references "AccordionItem" which is marked as @internal
+//
+// @public
+export const accordionItemTemplate: ElementViewTemplate<AccordionItem>;
+
+// @public (undocumented)
+export const accordionStyles: ElementStyles;
+
+// @public (undocumented)
+export const accordionTemplate: ElementViewTemplate<Accordion>;
+
+// @public
+export class Avatar extends FASTElement {
+ active?: AvatarActive | undefined;
+ appearance?: AvatarAppearance | undefined;
+ color?: AvatarColor;
+ colorId?: AvatarNamedColor | undefined;
+ static colors: ("anchor" | "dark-red" | "cranberry" | "red" | "pumpkin" | "peach" | "marigold" | "gold" | "brass" | "brown" | "forest" | "seafoam" | "dark-green" | "light-teal" | "teal" | "steel" | "blue" | "royal-blue" | "cornflower" | "navy" | "lavender" | "purple" | "grape" | "lilac" | "pink" | "magenta" | "plum" | "beige" | "mink" | "platinum")[];
+ // @internal
+ generateColor(): AvatarColor | void;
+ // @internal
+ generateInitials(): string | void;
+ initials?: string | undefined;
+ name?: string | undefined;
+ shape?: AvatarShape | undefined;
+ size?: AvatarSize | undefined;
+}
+
+// @public
+export const AvatarActive: {
+ readonly active: "active";
+ readonly inactive: "inactive";
+};
+
+// @public
+export type AvatarActive = ValuesOf<typeof AvatarActive>;
+
+// @public
+export const AvatarAppearance: {
+ readonly ring: "ring";
+ readonly shadow: "shadow";
+ readonly ringShadow: "ring-shadow";
+};
+
+// @public
+export type AvatarAppearance = ValuesOf<typeof AvatarAppearance>;
+
+// @public
+export const AvatarColor: {
+ readonly darkRed: "dark-red";
+ readonly cranberry: "cranberry";
+ readonly red: "red";
+ readonly pumpkin: "pumpkin";
+ readonly peach: "peach";
+ readonly marigold: "marigold";
+ readonly gold: "gold";
+ readonly brass: "brass";
+ readonly brown: "brown";
+ readonly forest: "forest";
+ readonly seafoam: "seafoam";
+ readonly darkGreen: "dark-green";
+ readonly lightTeal: "light-teal";
+ readonly teal: "teal";
+ readonly steel: "steel";
+ readonly blue: "blue";
+ readonly royalBlue: "royal-blue";
+ readonly cornflower: "cornflower";
+ readonly navy: "navy";
+ readonly lavender: "lavender";
+ readonly purple: "purple";
+ readonly grape: "grape";
+ readonly lilac: "lilac";
+ readonly pink: "pink";
+ readonly magenta: "magenta";
+ readonly plum: "plum";
+ readonly beige: "beige";
+ readonly mink: "mink";
+ readonly platinum: "platinum";
+ readonly anchor: "anchor";
+ readonly neutral: "neutral";
+ readonly brand: "brand";
+ readonly colorful: "colorful";
+};
+
+// @public
+export type AvatarColor = ValuesOf<typeof AvatarColor>;
+
+// @public
+export const AvatarDefinition: FASTElementDefinition<typeof Avatar>;
+
+// @public
+export const AvatarNamedColor: {
+ readonly darkRed: "dark-red";
+ readonly cranberry: "cranberry";
+ readonly red: "red";
+ readonly pumpkin: "pumpkin";
+ readonly peach: "peach";
+ readonly marigold: "marigold";
+ readonly gold: "gold";
+ readonly brass: "brass";
+ readonly brown: "brown";
+ readonly forest: "forest";
+ readonly seafoam: "seafoam";
+ readonly darkGreen: "dark-green";
+ readonly lightTeal: "light-teal";
+ readonly teal: "teal";
+ readonly steel: "steel";
+ readonly blue: "blue";
+ readonly royalBlue: "royal-blue";
+ readonly cornflower: "cornflower";
+ readonly navy: "navy";
+ readonly lavender: "lavender";
+ readonly purple: "purple";
+ readonly grape: "grape";
+ readonly lilac: "lilac";
+ readonly pink: "pink";
+ readonly magenta: "magenta";
+ readonly plum: "plum";
+ readonly beige: "beige";
+ readonly mink: "mink";
+ readonly platinum: "platinum";
+ readonly anchor: "anchor";
+};
+
+// @public
+export type AvatarNamedColor = ValuesOf<typeof AvatarNamedColor>;
+
+// @public
+export const AvatarShape: {
+ readonly circular: "circular";
+ readonly square: "square";
+};
+
+// @public
+export type AvatarShape = ValuesOf<typeof AvatarShape>;
+
+// @public
+export const AvatarSize: {
+ readonly _16: 16;
+ readonly _20: 20;
+ readonly _24: 24;
+ readonly _28: 28;
+ readonly _32: 32;
+ readonly _36: 36;
+ readonly _40: 40;
+ readonly _48: 48;
+ readonly _56: 56;
+ readonly _64: 64;
+ readonly _72: 72;
+ readonly _96: 96;
+ readonly _120: 120;
+ readonly _128: 128;
+};
+
+// @public
+export type AvatarSize = ValuesOf<typeof AvatarSize>;
+
+// @public
+export const AvatarStyles: ElementStyles;
+
+// @public (undocumented)
+export const AvatarTemplate: ElementViewTemplate<Avatar>;
+
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Badge" because one of its declarations is marked as @internal
 //
 // @public
@@ -1101,6 +1317,50 @@ export const curveEasyEaseMax: CSSDesignToken<string>;
 // @public (undocumented)
 export const curveLinear: CSSDesignToken<string>;
 
+// @public
+export const definition: FASTElementDefinition<typeof Switch>;
+
+// @public
+export class Divider extends FASTDivider {
+ alignContent?: DividerAlignContent;
+ appearance?: DividerAppearance;
+ inset?: boolean;
+}
+
+// @public
+export const DividerAlignContent: {
+ readonly center: "center";
+ readonly start: "start";
+ readonly end: "end";
+};
+
+// @public
+export type DividerAlignContent = ValuesOf<typeof DividerAlignContent>;
+
+// @public
+export const DividerAppearance: {
+ readonly strong: "strong";
+ readonly brand: "brand";
+ readonly subtle: "subtle";
+ readonly default: "default";
+};
+
+// @public
+export type DividerAppearance = ValuesOf<typeof DividerAppearance>;
+
+// @public
+export const DividerDefinition: FASTElementDefinition<typeof Divider>;
+
+export { DividerOrientation }
+
+export { DividerRole }
+
+// @public
+export const DividerStyles: ElementStyles;
+
+// @public
+export const DividerTemplate: ElementViewTemplate<Divider>;
+
 // @public (undocumented)
 export const durationFast: CSSDesignToken<string>;
 
@@ -1173,6 +1433,47 @@ export const fontWeightRegular: CSSDesignToken<string>;
 // @public (undocumented)
 export const fontWeightSemibold: CSSDesignToken<string>;
 
+// @public
+class Image_2 extends FASTElement {
+ block?: boolean;
+ bordered?: boolean;
+ fit?: ImageFit;
+ shadow?: boolean;
+ shape?: ImageShape;
+}
+export { Image_2 as Image }
+
+// @public
+export const ImageDefinition: FASTElementDefinition<typeof Image_2>;
+
+// @public
+export const ImageFit: {
+ readonly none: "none";
+ readonly center: "center";
+ readonly contain: "contain";
+ readonly cover: "cover";
+ readonly default: "default";
+};
+
+// @public
+export type ImageFit = ValuesOf<typeof ImageFit>;
+
+// @public
+export const ImageShape: {
+ readonly circular: "circular";
+ readonly rounded: "rounded";
+ readonly square: "square";
+};
+
+// @public (undocumented)
+export type ImageShape = ValuesOf<typeof ImageShape>;
+
+// @public
+export const ImageStyles: ElementStyles;
+
+// @public
+export const ImageTemplate: ElementViewTemplate<Image_2>;
+
 // @public (undocumented)
 export const lineHeightBase100: CSSDesignToken<string>;
 
@@ -1403,6 +1704,27 @@ export const strokeWidthThickest: CSSDesignToken<string>;
 // @public (undocumented)
 export const strokeWidthThin: CSSDesignToken<string>;
 
+// @public (undocumented)
+export class Switch extends FASTSwitch {
+ labelPosition: SwitchLabelPosition | undefined;
+}
+
+// @public
+export const SwitchLabelPosition: {
+ readonly above: "above";
+ readonly after: "after";
+ readonly before: "before";
+};
+
+// @public
+export type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;
+
+// @public (undocumented)
+export const switchStyles: ElementStyles;
+
+// @public (undocumented)
+export const switchTemplate: ElementViewTemplate<Switch>;
+
 // @public
 class Text_2 extends FASTElement {
  align: TextAlign;

packages/web-components/package.json

@@ -32,6 +32,10 @@
  "types": "./dist/esm/accordion-item/define.d.ts",
  "default": "./dist/esm/accordion-item/define.js"
  },
+ "./avatar": {
+ "types": "./dist/esm/avatar/define.d.ts",
+ "default": "./dist/esm/avatar/define.js"
+ },
  "./badge": {
  "types": "./dist/esm/badge/define.d.ts",
  "default": "./dist/esm/badge/define.js"