(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
microsoft · May 2, 2024 · 312335b · 312335b
1 parent e928bb0
commit 312335b
Show file tree

Hide file tree

Showing 15 changed files with 1,615 additions and 0 deletions.
diff --git a/change/@fluentui-web-components-1c73e6e8-61a0-46c8-b69e-0820f5a2488d.json b/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"
+}
diff --git a/packages/web-components/.eslintrc.json b/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",

diff --git a/packages/web-components/docs/api-report.md b/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;

diff --git a/packages/web-components/package.json b/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"