feat(react-tags): Replace avatar prop with media; polish styles for spacing

apps/public-docsite-v9/.storybook/main.js

@@ -15,6 +15,8 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
     '../../../packages/react-components/react-migration-v0-v9/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
     '../../../packages/react-components/react-migration-v8-v9/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
     '../../../packages/react-components/react-datepicker-compat/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
+    // TODO: remove this before PR merge. Just for the purpose of building PR docsite
+    '../../../packages/react-components/react-tags/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
   ],
   staticDirs: ['../public'],
   addons: [...rootMain.addons],

change/@fluentui-react-avatar-beee81db-4a4e-458f-a4bf-e9d4624a0356.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add `shape` to AvatarContext",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-avatar/etc/react-avatar.api.md

@@ -32,6 +32,8 @@ export const AvatarContextProvider: React_2.Provider<AvatarContextValue | undefi
 
 // @internal (undocumented)
 export interface AvatarContextValue {
+    // (undocumented)
+    shape?: AvatarShape;
     // (undocumented)
     size?: AvatarSize;
 }
@@ -131,10 +133,13 @@ export type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {
     color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
     idForColor?: string | undefined;
     name?: string;
-    shape?: 'circular' | 'square';
+    shape?: AvatarShape;
     size?: AvatarSize;
 };
 
+// @public
+export type AvatarShape = 'circular' | 'square';
+
 // @public
 export type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
 

packages/react-components/react-avatar/src/components/Avatar/Avatar.types.ts

@@ -11,6 +11,11 @@ export type AvatarSizes = AvatarSize;
  */
 export type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
 
+/**
+ * Shape of the avatar
+ */
+export type AvatarShape = 'circular' | 'square';
+
 export type AvatarSlots = {
   root: Slot<'span'>;
 
@@ -129,7 +134,7 @@ export type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {
    * The avatar can have a circular or square shape.
    * @default circular
    */
-  shape?: 'circular' | 'square';
+  shape?: AvatarShape;
 
   /**
    * Size of the avatar in pixels.

packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx

@@ -14,11 +14,11 @@ export const DEFAULT_STRINGS = {
 
 export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {
   const { dir } = useFluent();
-  const { size: contextSize } = useAvatarContext();
+  const { size: contextSize, shape: contextShape } = useAvatarContext();
   const {
     name,
     size = contextSize ?? (32 as const),
-    shape = 'circular',
+    shape = contextShape ?? 'circular',
     active = 'unset',
     activeAppearance = 'ring',
     idForColor,

packages/react-components/react-avatar/src/contexts/AvatarContext.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AvatarSize } from '../components/Avatar/Avatar.types';
+import { AvatarSize, AvatarShape } from '../components/Avatar/Avatar.types';
 
 const avatarContext = React.createContext<AvatarContextValue | undefined>(undefined);
 
@@ -8,6 +8,7 @@ const avatarContext = React.createContext<AvatarContextValue | undefined>(undefi
  */
 export interface AvatarContextValue {
   size?: AvatarSize;
+  shape?: AvatarShape;
 }
 
 const avatarContextDefaultValue: AvatarContextValue = {};

packages/react-components/react-avatar/src/index.ts

@@ -5,8 +5,16 @@ export {
   useAvatarStyles_unstable,
   useAvatar_unstable,
 } from './Avatar';
-// eslint-disable-next-line deprecation/deprecation
-export type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes, AvatarSize } from './Avatar';
+export type {
+  AvatarNamedColor,
+  AvatarProps,
+  AvatarSlots,
+  AvatarState,
+  // eslint-disable-next-line deprecation/deprecation
+  AvatarSizes,
+  AvatarSize,
+  AvatarShape,
+} from './Avatar';
 export { getInitials, partitionAvatarGroupItems } from './utils/index';
 export type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './utils/index';
 export {

packages/react-components/react-tags/bundle-size/tag.fixture.js

@@ -0,0 +1,7 @@
+import { Tag } from '@fluentui/react-tags';
+
+console.log(Tag);
+
+export default {
+  name: 'Tag',
+};

packages/react-components/react-tags/etc/react-tags.api.md

@@ -6,7 +6,9 @@
 
 /// <reference types="react" />
 
-import { Avatar } from '@fluentui/react-avatar';
+import { AvatarShape } from '@fluentui/react-avatar';
+import { AvatarSize } from '@fluentui/react-avatar';
+import { Button } from '@fluentui/react-button';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -15,10 +17,10 @@ import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
-export const renderTag_unstable: (state: TagState) => JSX.Element;
+export const renderTag_unstable: (state: TagState, contextValues: TagContextValues) => JSX.Element;
 
 // @public
-export const renderTagButton_unstable: (state: TagButtonState) => JSX.Element;
+export const renderTagButton_unstable: (state: TagButtonState, contextValues: TagButtonContextValues) => JSX.Element;
 
 // @public
 export const Tag: ForwardRefComponent<TagProps>;
@@ -30,34 +32,19 @@ export const TagButton: ForwardRefComponent<TagButtonProps>;
 export const tagButtonClassNames: SlotClassNames<TagButtonSlots>;
 
 // @public
-export type TagButtonProps = ComponentProps<TagButtonSlots> & {
-    size?: 'extra-small' | 'small' | 'medium';
-    shape?: 'rounded' | 'circular';
-    appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline';
-    disabled?: boolean;
-    checked?: boolean;
-    dismissable?: boolean;
-};
+export type TagButtonProps = TagProps;
 
 // @public (undocumented)
-export type TagButtonSlots = {
-    root: NonNullable<Slot<'div'>>;
-    contentButton?: Slot<'button'>;
-    avatar?: Slot<typeof Avatar>;
-    icon?: Slot<'span'>;
-    primaryText?: Slot<'span'>;
-    secondaryText?: Slot<'span'>;
-    dismissButton?: NonNullable<Slot<'button'>>;
-};
+export type TagButtonSlots = TagSlots;
 
 // @public
-export type TagButtonState = ComponentState<TagButtonSlots> & Required<Pick<TagButtonProps, 'appearance' | 'checked' | 'disabled' | 'dismissable' | 'shape' | 'size'>>;
+export type TagButtonState = TagState;
 
 // @public (undocumented)
 export const tagClassNames: SlotClassNames<TagSlots>;
 
 // @public
-export type TagProps = ComponentProps<TagSlots> & {
+export type TagProps = ComponentProps<Partial<TagSlots>> & {
     size?: 'extra-small' | 'small' | 'medium';
     shape?: 'rounded' | 'circular';
     appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline';
@@ -69,16 +56,19 @@ export type TagProps = ComponentProps<TagSlots> & {
 // @public (undocumented)
 export type TagSlots = {
     root: NonNullable<Slot<'div'>>;
-    content?: Slot<'span'>;
-    avatar?: Slot<typeof Avatar>;
-    icon?: Slot<'span'>;
-    primaryText?: Slot<'span'>;
-    secondaryText?: Slot<'span'>;
-    dismissButton?: NonNullable<Slot<'button'>>;
+    media: Slot<'span'>;
+    content: Slot<'div'>;
+    icon: Slot<'span'>;
+    primaryText: Slot<'span'>;
+    secondaryText: Slot<'span'>;
+    dismissButton: Slot<typeof Button>;
 };
 
 // @public
-export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'checked' | 'disabled' | 'dismissable' | 'shape' | 'size'>>;
+export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'checked' | 'disabled' | 'dismissable' | 'shape' | 'size'> & {
+    avatarSize: AvatarSize | undefined;
+    avatarShape: AvatarShape | undefined;
+}>;
 
 // @public
 export const useTag_unstable: (props: TagProps, ref: React_2.Ref<HTMLElement>) => TagState;

packages/react-components/react-tags/package.json

@@ -14,6 +14,7 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
@@ -33,8 +34,10 @@
   },
   "dependencies": {
     "@fluentui/react-avatar": "^9.4.10",
+    "@fluentui/react-button": "^9.3.10",
     "@fluentui/react-icons": "^2.0.196",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.2",
+    "@fluentui/react-tabster": "^9.6.5",
     "@fluentui/react-theme": "^9.1.7",
     "@fluentui/react-utilities": "^9.8.0",
     "@griffel/react": "^1.5.2",

packages/react-components/react-tags/src/components/Tag/Tag.test.tsx

@@ -4,9 +4,7 @@ import { Tag } from './Tag';
 import { isConformant } from '../../testing/isConformant';
 
 const requiredProps = {
-  avatar: {
-    name: 'Katri Athokas',
-  },
+  media: 'media',
   icon: 'i',
   primaryText: 'Primary text',
   secondaryText: 'Secondary text',

packages/react-components/react-tags/src/components/Tag/Tag.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { useTag_unstable } from './useTag';
 import { renderTag_unstable } from './renderTag';
-import { useTagStyles_unstable } from './useTagStyles';
+import { useTagStyles_unstable } from './useTagStyles.styles';
 import type { TagProps } from './Tag.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useTagContextValues_unstable } from '../../utils/useTagContextValues';
 
 /**
  * Tag component - TODO: add more docs
@@ -12,7 +13,7 @@ export const Tag: ForwardRefComponent<TagProps> = React.forwardRef((props, ref)
   const state = useTag_unstable(props, ref);
 
   useTagStyles_unstable(state);
-  return renderTag_unstable(state);
+  return renderTag_unstable(state, useTagContextValues_unstable(state));
 });
 
 Tag.displayName = 'Tag';

packages/react-components/react-tags/src/components/Tag/Tag.types.ts

@@ -1,20 +1,46 @@
+import { AvatarSize, AvatarShape } from '@fluentui/react-avatar';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { Avatar } from '@fluentui/react-avatar';
+import { Button } from '@fluentui/react-button';
+
+export type TagContextValues = {
+  avatar: {
+    size?: AvatarSize;
+    shape?: AvatarShape;
+  };
+};
 
 export type TagSlots = {
   root: NonNullable<Slot<'div'>>;
-  content?: Slot<'span'>;
-  avatar?: Slot<typeof Avatar>;
-  icon?: Slot<'span'>;
-  primaryText?: Slot<'span'>;
-  secondaryText?: Slot<'span'>;
-  dismissButton?: NonNullable<Slot<'button'>>;
+
+  /**
+   * Slot for an icon or other visual element
+   */
+  media: Slot<'span'>;
+
+  /**
+   * A layout wrapper for the icon slot, the primaryText and secondaryText slots
+   */
+  content: Slot<'div'>;
+
+  icon: Slot<'span'>;
+
+  /**
+   * Main text for the Tag. Children of the root slot are automatically rendered here
+   */
+  primaryText: Slot<'span'>;
+
+  /**
+   * Secondary text that describes or complements the main text
+   */
+  secondaryText: Slot<'span'>;
+
+  dismissButton: Slot<typeof Button>;
 };
 
 /**
  * Tag Props
  */
-export type TagProps = ComponentProps<TagSlots> & {
+export type TagProps = ComponentProps<Partial<TagSlots>> & {
   size?: 'extra-small' | 'small' | 'medium';
   shape?: 'rounded' | 'circular';
   appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline';
@@ -27,4 +53,9 @@ export type TagProps = ComponentProps<TagSlots> & {
  * State used in rendering Tag
  */
 export type TagState = ComponentState<TagSlots> &
-  Required<Pick<TagProps, 'appearance' | 'checked' | 'disabled' | 'dismissable' | 'shape' | 'size'>>;
+  Required<
+    Pick<TagProps, 'appearance' | 'checked' | 'disabled' | 'dismissable' | 'shape' | 'size'> & {
+      avatarSize: AvatarSize | undefined;
+      avatarShape: AvatarShape | undefined;
+    }
+  >;