From 0e972f6e58a3b505459db239012b75e84a9aa67d Mon Sep 17 00:00:00 2001 From: jeff smith Date: Fri, 26 Jul 2024 07:50:53 -0700 Subject: [PATCH 1/3] chore: move size and generate initials out of base class --- packages/web-components/docs/api-report.md | 6 +- packages/web-components/src/avatar/avatar.ts | 74 ++++++++++---------- 2 files changed, 40 insertions(+), 40 deletions(-) diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 3bfb9de0df9953..d9a35174137f4c 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -191,7 +191,10 @@ export type AnchorTarget = ValuesOf; // @public export class Avatar extends BaseAvatar { appearance?: AvatarAppearance | undefined; + // @internal + generateInitials(): string | void; shape?: AvatarShape | undefined; + size?: AvatarSize | undefined; } // Warning: (ae-missing-release-tag) "AvatarActive" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -456,12 +459,9 @@ export class BaseAvatar extends FASTElement { // @internal generateColor(): void; // @internal - generateInitials(): string | void; - // @internal handleChange(source: any, propertyName: string): void; initials?: string | undefined; name?: string | undefined; - size?: AvatarSize | undefined; } // @public diff --git a/packages/web-components/src/avatar/avatar.ts b/packages/web-components/src/avatar/avatar.ts index 3f114b774c7dd3..d44986df1ec457 100644 --- a/packages/web-components/src/avatar/avatar.ts +++ b/packages/web-components/src/avatar/avatar.ts @@ -42,23 +42,6 @@ export class BaseAvatar extends FASTElement { @attr public initials?: string | undefined; - /** - * Size of the avatar in pixels. - * - * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and - * based on design guidelines for the Avatar control. - * - * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height` - * to override the rendered size. - * - * @public - * @remarks - * HTML Attribute: size - * - */ - @attr({ converter: nullableNumberConverter }) - public size?: AvatarSize | undefined; - /** * Optional activity indicator * * active: the avatar will be decorated according to activeAppearance @@ -155,26 +138,6 @@ export class BaseAvatar extends FASTElement { toggleState(this.elementInternals, `${this.currentColor}`, true); } - /** - * Generates and sets the initials for the template - * @internal - */ - public generateInitials(): string | void { - if (!this.name && !this.initials) { - return; - } - - // size can be undefined since we default it in CSS only - const size = this.size ?? 32; - - return ( - this.initials ?? - getInitials(this.name, window.getComputedStyle(this as unknown as HTMLElement).direction === 'rtl', { - firstInitialOnly: size <= 16, - }) - ); - } - /** * An array of the available Avatar named colors */ @@ -207,6 +170,43 @@ export class Avatar extends BaseAvatar { */ @attr public appearance?: AvatarAppearance | undefined; + + /** + * Size of the avatar in pixels. + * + * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and + * based on design guidelines for the Avatar control. + * + * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height` + * to override the rendered size. + * + * @public + * @remarks + * HTML Attribute: size + * + */ + @attr({ converter: nullableNumberConverter }) + public size?: AvatarSize | undefined; + + /** + * Generates and sets the initials for the template + * @internal + */ + public generateInitials(): string | void { + if (!this.name && !this.initials) { + return; + } + + // size can be undefined since we default it in CSS only + const size = this.size ?? 32; + + return ( + this.initials ?? + getInitials(this.name, window.getComputedStyle(this as unknown as HTMLElement).direction === 'rtl', { + firstInitialOnly: size <= 16, + }) + ); + } } // copied from React avatar From c70adf0b1e2d35d96f8f17e7ea888279001be3c7 Mon Sep 17 00:00:00 2001 From: jeff smith Date: Fri, 26 Jul 2024 07:51:21 -0700 Subject: [PATCH 2/3] change file --- ...eb-components-a4240e2c-3729-40ec-b1b1-ed2aec906127.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-web-components-a4240e2c-3729-40ec-b1b1-ed2aec906127.json diff --git a/change/@fluentui-web-components-a4240e2c-3729-40ec-b1b1-ed2aec906127.json b/change/@fluentui-web-components-a4240e2c-3729-40ec-b1b1-ed2aec906127.json new file mode 100644 index 00000000000000..cd74fd1caef38b --- /dev/null +++ b/change/@fluentui-web-components-a4240e2c-3729-40ec-b1b1-ed2aec906127.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: move size and generate initials out of base class", + "packageName": "@fluentui/web-components", + "email": "jes@microsoft.com", + "dependentChangeType": "patch" +} From 00b8bfd8fc014673d5b9c0f1f71cc95f27a952d6 Mon Sep 17 00:00:00 2001 From: jeff smith Date: Fri, 26 Jul 2024 08:49:01 -0700 Subject: [PATCH 3/3] update base class further --- packages/web-components/docs/api-report.md | 22 +-- packages/web-components/src/avatar/avatar.ts | 158 +++++++++---------- 2 files changed, 90 insertions(+), 90 deletions(-) diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index d9a35174137f4c..06b69d5ae2215c 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -191,8 +191,19 @@ export type AnchorTarget = ValuesOf; // @public export class Avatar extends BaseAvatar { appearance?: AvatarAppearance | undefined; + color?: AvatarColor | undefined; + 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")[]; + // (undocumented) + connectedCallback(): void; + // (undocumented) + disconnectedCallback(): void; + // @internal + generateColor(): void; // @internal generateInitials(): string | void; + // @internal + handleChange(source: any, propertyName: string): void; shape?: AvatarShape | undefined; size?: AvatarSize | undefined; } @@ -447,19 +458,8 @@ export class BaseAccordionItem extends FASTElement { export class BaseAvatar extends FASTElement { constructor(); active?: AvatarActive | undefined; - color?: AvatarColor | undefined; - 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")[]; - // (undocumented) - connectedCallback(): void; - // (undocumented) - disconnectedCallback(): void; // @internal elementInternals: ElementInternals; - // @internal - generateColor(): void; - // @internal - handleChange(source: any, propertyName: string): void; initials?: string | undefined; name?: string | undefined; } diff --git a/packages/web-components/src/avatar/avatar.ts b/packages/web-components/src/avatar/avatar.ts index d44986df1ec457..f23394fbb3047a 100644 --- a/packages/web-components/src/avatar/avatar.ts +++ b/packages/web-components/src/avatar/avatar.ts @@ -55,6 +55,57 @@ export class BaseAvatar extends FASTElement { @attr public active?: AvatarActive | undefined; + constructor() { + super(); + + this.elementInternals.role = 'img'; + } +} + +/** + * An Avatar Custom HTML Element. + * Based on BaseAvatar and includes style and layout specific attributes + * + * @public + */ +export class Avatar extends BaseAvatar { + /** + * The avatar can have a circular or square shape. + * + * @public + * @remarks + * HTML Attribute: shape + */ + @attr + public shape?: AvatarShape | undefined; + + /** + * The appearance when `active="active"` + * + * @public + * @remarks + * HTML Attribute: appearance + */ + @attr + public appearance?: AvatarAppearance | undefined; + + /** + * Size of the avatar in pixels. + * + * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and + * based on design guidelines for the Avatar control. + * + * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height` + * to override the rendered size. + * + * @public + * @remarks + * HTML Attribute: size + * + */ + @attr({ converter: nullableNumberConverter }) + public size?: AvatarSize | undefined; + /** * The color when displaying either an icon or initials. * * neutral (default): gray @@ -81,26 +132,6 @@ export class BaseAvatar extends FASTElement { */ private currentColor: string | undefined; - constructor() { - super(); - - this.elementInternals.role = 'img'; - } - - public connectedCallback(): void { - super.connectedCallback(); - - Observable.getNotifier(this).subscribe(this); - - this.generateColor(); - } - - public disconnectedCallback(): void { - super.disconnectedCallback(); - - Observable.getNotifier(this).unsubscribe(this); - } - /** * Handles changes to observable properties * @internal @@ -118,6 +149,26 @@ export class BaseAvatar extends FASTElement { } } + /** + * Generates and sets the initials for the template + * @internal + */ + public generateInitials(): string | void { + if (!this.name && !this.initials) { + return; + } + + // size can be undefined since we default it in CSS only + const size = this.size ?? 32; + + return ( + this.initials ?? + getInitials(this.name, window.getComputedStyle(this as unknown as HTMLElement).direction === 'rtl', { + firstInitialOnly: size <= 16, + }) + ); + } + /** * Sets the data-color attribute used for the visual presentation * @internal @@ -142,70 +193,19 @@ export class BaseAvatar extends FASTElement { * An array of the available Avatar named colors */ public static colors = Object.values(AvatarNamedColor); -} - -/** - * An Avatar Custom HTML Element. - * Based on BaseAvatar and includes style and layout specific attributes - * - * @public - */ -export class Avatar extends BaseAvatar { - /** - * The avatar can have a circular or square shape. - * - * @public - * @remarks - * HTML Attribute: shape - */ - @attr - public shape?: AvatarShape | undefined; - /** - * The appearance when `active="active"` - * - * @public - * @remarks - * HTML Attribute: appearance - */ - @attr - public appearance?: AvatarAppearance | undefined; + public connectedCallback(): void { + super.connectedCallback(); - /** - * Size of the avatar in pixels. - * - * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and - * based on design guidelines for the Avatar control. - * - * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height` - * to override the rendered size. - * - * @public - * @remarks - * HTML Attribute: size - * - */ - @attr({ converter: nullableNumberConverter }) - public size?: AvatarSize | undefined; + Observable.getNotifier(this).subscribe(this); - /** - * Generates and sets the initials for the template - * @internal - */ - public generateInitials(): string | void { - if (!this.name && !this.initials) { - return; - } + this.generateColor(); + } - // size can be undefined since we default it in CSS only - const size = this.size ?? 32; + public disconnectedCallback(): void { + super.disconnectedCallback(); - return ( - this.initials ?? - getInitials(this.name, window.getComputedStyle(this as unknown as HTMLElement).direction === 'rtl', { - firstInitialOnly: size <= 16, - }) - ); + Observable.getNotifier(this).unsubscribe(this); } }