merge

docs/examples/avatar/mainExample.tsx

@@ -29,7 +29,6 @@ export default function Example() {
       <Avatar avatarColor="07" name="Ayesha" size="lg" />
       <Avatar
         name="Ayesha"
-        outline
         size="xl"
         src="https://i.pinimg.com/originals/c5/5c/ac/c55caca43a7c16766215ec165b649c1c.jpg"
       />

packages/gestalt/src/Avatar.tsx

@@ -1,6 +1,13 @@
 import { useState } from 'react';
 import classnames from 'classnames';
+<<<<<<< HEAD
 import { TOKEN_COLOR_BACKGROUND_AVATAR_PLACEHOLDER } from 'gestalt-design-tokens';
+=======
+import {
+  TOKEN_COLOR_BACKGROUND_AVATAR_PLACEHOLDER,
+  TOKEN_COLOR_BORDER_AVATAR,
+} from 'gestalt-design-tokens';
+>>>>>>> 9c35bc114665c945090f27f308c3feb113cafae8
 import avatarStyles from './Avatar/AvatarFoundation.css';
 import DefaultAvatar from './Avatar/DefaultAvatar';
 import Box from './Box';

packages/gestalt/src/Avatar/Foundation.tsx

@@ -1,11 +1,19 @@
 import { ReactNode } from 'react';
+import { useCookies } from 'react-cookie';
 import classnames from 'classnames';
 import { TOKEN_COLOR_BORDER_AVATAR, TOKEN_COLOR_TEXT_DEFAULT } from 'gestalt-design-tokens';
+<<<<<<< HEAD
 import avatarStyles from './AvatarFoundation.css';
 import getAvatarColorToken from './getAvatarColorToken';
 import avatarGroupStyles from '../AvatarGroup.css';
 import Box from '../Box';
 import { useColorScheme } from '../contexts/ColorSchemeProvider';
+=======
+import foundationStyles from './AvatarFoundation.css';
+import getAvatarColorToken from './getAvatarColorToken';
+import avatarStyles from '../AvatarGroup.css';
+import Box from '../Box';
+>>>>>>> 9c35bc114665c945090f27f308c3feb113cafae8
 import icons from '../icons/index';
 import vrIcons from '../icons-vr-theme/index';
 import useInExperiment from '../useInExperiment';
@@ -22,6 +30,12 @@ type ResponsiveFitSizeBoxProps = {
   outline: boolean;
 };
 
+<<<<<<< HEAD
+=======
+type ColorScheme = 'light' | 'dark';
+const colorSchemeKey = 'gestalt-color-scheme';
+
+>>>>>>> 9c35bc114665c945090f27f308c3feb113cafae8
 function ResponsiveFitSizeBox({
   avatarColor,
   content,
@@ -36,27 +50,47 @@ function ResponsiveFitSizeBox({
     mwebExperimentName: 'web_gestalt_visualRefresh',
   });
 
+<<<<<<< HEAD
   const { colorSchemeName } = useColorScheme();
   const isDarkMode = colorSchemeName === 'darkMode';
 
   const avatarBackgroundColor =
     content === 'icon' || isCollaboratorCount
       ? getAvatarColorToken('default', isHovered, isPressed, isDarkMode)
       : getAvatarColorToken(avatarColor || 'default', isHovered, isPressed, isDarkMode);
+=======
+  const [cookies] = useCookies([colorSchemeKey]);
+  const colorScheme: ColorScheme = cookies[colorSchemeKey] === 'dark' ? 'dark' : 'light';
+
+  const avatarBackgroundColor =
+    content === 'icon' || isCollaboratorCount
+      ? getAvatarColorToken('default', isHovered, isPressed, colorScheme)
+      : getAvatarColorToken(avatarColor || 'default', isHovered, isPressed, colorScheme);
+>>>>>>> 9c35bc114665c945090f27f308c3feb113cafae8
 
   return isInVRExperiment ? (
     <div
       className={classnames({
+<<<<<<< HEAD
         [avatarStyles.container]: true,
         [avatarStyles.outline]: !isInVRExperiment && outline,
         [avatarStyles.outlineVR]: isInVRExperiment && outline,
+=======
+        [foundationStyles.container]: true,
+        [foundationStyles.outline]: !isInVRExperiment && outline,
+        [foundationStyles.outlineVR]: isInVRExperiment && outline,
+>>>>>>> 9c35bc114665c945090f27f308c3feb113cafae8
       })}
       role="button"
       style={{
         backgroundColor: avatarBackgroundColor,
       }}
     >
+<<<<<<< HEAD
       <div className={avatarStyles.innerDiv}>{children}</div>
+=======
+      <div className={foundationStyles.innerDiv}>{children}</div>
+>>>>>>> 9c35bc114665c945090f27f308c3feb113cafae8
     </div>
   ) : (
     <Box
@@ -159,9 +193,14 @@ export default function AvatarFoundation({
       {content === 'icon' ? (
         <svg
           className={classnames({
+<<<<<<< HEAD
             [avatarStyles.icon]: true,
             [avatarStyles.iconFillDefault]: isInVRExperiment && !isDarkMode,
             [avatarStyles.iconFillDarkMode]: isInVRExperiment && isDarkMode,
+=======
+            [avatarStyles.text]: true,
+            [foundationStyles.icon]: true,
+>>>>>>> 9c35bc114665c945090f27f308c3feb113cafae8
           })}
           preserveAspectRatio="xMidYMid meet" // percentual width to the parent container, reduces icon to 20px on a 48px parent container and keeps proportions upon resizing
           role="img" // full icon size

packages/gestalt/src/AvatarGroup.tsx

@@ -1,4 +1,9 @@
 import { forwardRef, Fragment } from 'react';
+<<<<<<< HEAD
+=======
+import classnames from 'classnames';
+import avatarGroupStyles from './AvatarGroup.css';
+>>>>>>> 9c35bc114665c945090f27f308c3feb113cafae8
 import AddCollaboratorsButton from './AvatarGroup/AddCollaboratorsButton';
 import CollaboratorAvatar from './AvatarGroup/CollaboratorAvatar';
 import CollaboratorsCount from './AvatarGroup/CollaboratorsCount';
@@ -288,6 +293,71 @@ const AvatarGroupWithForwardRef = forwardRef<UnionRefs, Props>(function AvatarGr
     );
   }
 
+  if (isInVRExperiment && role === 'link' && href) {
+    return (
+      <div
+        className={classnames({
+          [avatarGroupStyles.focused]: isFocused && isFocusVisible,
+        })}
+        onBlur={handleOnBlur}
+        onFocus={handleOnFocus}
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+      >
+        <TapAreaLink
+          ref={ref as React.LegacyRef<HTMLAnchorElement> | undefined}
+          accessibilityLabel={accessibilityLabel}
+          fullWidth={false}
+          href={href}
+          onMouseDown={handleOnMouseDown}
+          onMouseEnter={handleOnMouseEnter}
+          onMouseLeave={handleOnMouseLeave}
+          onMouseUp={handleOnMouseUp}
+          onTap={({ event, dangerouslyDisableOnNavigation }) =>
+            onClick?.({ event, dangerouslyDisableOnNavigation })
+          }
+          rounding="pill"
+          tapStyle="compress"
+        >
+          {avatarGroupStack}
+        </TapAreaLink>
+      </div>
+    );
+  }
+
+  if (isInVRExperiment && role === 'button' && onClick) {
+    return (
+      <div
+        className={classnames({
+          [avatarGroupStyles.focused]: isFocused && isFocusVisible,
+        })}
+        onBlur={handleOnBlur}
+        onFocus={handleOnFocus}
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={0}
+      >
+        <TapArea
+          ref={ref as React.LegacyRef<HTMLDivElement> | undefined}
+          accessibilityControls={accessibilityControls}
+          accessibilityExpanded={accessibilityExpanded}
+          accessibilityHaspopup={accessibilityHaspopup}
+          accessibilityLabel={accessibilityLabel}
+          fullWidth={false}
+          onMouseDown={handleOnMouseDown}
+          onMouseEnter={handleOnMouseEnter}
+          onMouseLeave={handleOnMouseLeave}
+          onMouseUp={handleOnMouseUp}
+          // @ts-expect-error - TS2345 - Argument of type '{ event: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement, MouseEvent>; }' is not assignable to parameter of type '{ event: MouseEvent<HTMLAnchorElement, MouseEvent> | KeyboardEvent<HTMLAnchorElement> | KeyboardEvent<...> | MouseEvent<...>; dangerouslyDisableOnNavigation: () => void; }'.
+          onTap={({ event }) => onClick({ event })}
+          rounding="pill"
+          tapStyle="compress"
+        >
+          {avatarGroupStack}
+        </TapArea>
+      </div>
+    );
+  }
+
   // Display-only role
   return avatarGroupStack;
 });

packages/gestalt/src/contexts/__snapshots__/ColorSchemeProvider.jsdom.test.tsx.snap

@@ -5060,6 +5060,7 @@ exports[`visual refresh tokens uses visual refresh with ck line height 1`] = `
   --color-border-switch-default-unselected: #757570;
   --color-border-switch-focus-inner: #ffffff;
   --color-border-switch-focus-outer: #007db8;
+  --color-avatar-default: #ffffff;
   --elevation-floating: 0px 4px 16px 0px rgba(0,0,0,0.1), 0px 1px 4px 0px rgba(0,0,0,0.08);
   --elevation-raised-top: 0px 1px 0px 0.5px rgba(0,0,0,0.06), 0px 2px 8px 0px rgba(0,0,0,0.12), 0px -1px 2px 0px rgba(0,0,0,0.06);
   --elevation-raised-bottom: 0px -1px 0px 0.5px rgba(0,0,0,0.06), 0px -2px 8px 0px rgba(0,0,0,0.12), 0px -1px 2px 0px rgba(0,0,0,0.06);