@bitrise/bitkit 13.96.0 → 13.98.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.96.0",
+  "version": "13.98.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Avatar/Avatar.theme.ts

@@ -1,6 +1,6 @@
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import { rem } from '../../utils/utils';
-import { AvatarSizes, AvatarVariant } from './Avatar';
+import { AvatarProps, AvatarSizes, AvatarVariant } from './Avatar';
 
 const COLORS = [
   {
@@ -41,7 +41,7 @@ const getStyleForUserVariant = (size: AvatarSizes) => {
   const borderRadius = {
     24: '12',
     32: '16',
-    40: '24',
+    40: '20',
     48: '24',
     64: '12',
     128: '24',
@@ -54,7 +54,7 @@ const getStyleForUserVariant = (size: AvatarSizes) => {
 
 const getStyleForWorkspaceVariant = (size: AvatarSizes) => {
   const borderRadius = {
-    24: '24',
+    24: '4',
     32: '8',
     40: '8',
     48: '12',
@@ -120,7 +120,7 @@ const getStyleForBrandVariant = (size: AvatarSizes) => {
 
 const getStyleForLettersVariant = (size: AvatarSizes) => {
   const borderRadius = {
-    24: '12',
+    24: '4',
     32: '8',
     40: '8',
     48: '12',
@@ -166,17 +166,17 @@ const getStyleForStepVariant = (size: AvatarSizes) => {
 
 const getSizeBasedTextStyle = (size: AvatarSizes) => {
   const textStyles = {
-    24: 'heading/h5',
-    32: 'heading/h3',
-    40: 'heading/h2',
-    48: 'heading/h1',
-    64: 'display/sm',
-    128: 'display/lg',
+    24: 'sans/size-1/bold',
+    32: 'sans/size-3/bold',
+    40: 'sans/size-4/bold',
+    48: 'sans/size-5/semibold',
+    64: 'sans/size-6/semibold',
+    128: 'sans/size-8/semibold',
   };
 
   return {
     textStyle: textStyles[size],
-    fontWeight: 'bold',
+    fontWeight: Number(size) > 40 ? 'semibold' : 'bold',
   };
 };
 
@@ -209,23 +209,26 @@ const getStyleBySizeAndType = (size: AvatarSizes, variant: AvatarVariant) => {
   }
 };
 
-const AvatarTheme: ComponentStyleConfig = {
-  baseStyle: ({ name, variant, size }) => {
-    let colors = {};
-    if (name) {
-      const str = name.toUpperCase();
-      const seed = str.charCodeAt(0) + str.charCodeAt(str.length - 1);
-      colors = COLORS[seed % COLORS.length];
-    } else if (variant === 'brand') {
-      colors = { backgroundColor: 'sys/neutral/subtle', color: 'text/secondary' };
-    }
+const getColors = ({ name, variant }: AvatarProps) => {
+  if (name) {
+    const str = name.toUpperCase();
+    const seed = str.charCodeAt(0) + str.charCodeAt(str.length - 1);
+    return COLORS[seed % COLORS.length];
+  }
+  if (variant === 'brand') {
+    return { backgroundColor: 'sys/neutral/subtle', color: 'text/secondary' };
+  }
+};
 
+const AvatarTheme: ComponentStyleConfig = {
+  baseStyle: ({ name, size, variant }) => {
     return {
       container: {
-        ...colors,
+        ...getColors({ name, variant }),
         overflow: 'hidden',
         height: rem(size),
         width: rem(size),
+        textTransform: 'capitalize',
         ...getSizeBasedTextStyle(size),
         ...getStyleBySizeAndType(size, variant),
       },

package/src/Components/Avatar/Avatar.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Avatar as ChakraAvatar, AvatarProps as ChakraAvatarProps, forwardRef } from '@chakra-ui/react';
 import Icon, { TypeIconName } from '../Icon/Icon';
 
@@ -33,12 +34,29 @@ const getInitials = (name: string) => {
 const Avatar = forwardRef<AvatarProps, 'span'>((props, ref) => {
   const { iconName, variant = 'user', size = '32', ...rest } = props;
 
+  const [hasError, setError] = useState<boolean | undefined>(undefined);
+
   let icon;
   if (iconName) {
     icon = <Icon color="sys/neutral/strong" name={iconName} />;
   }
 
-  return <ChakraAvatar getInitials={getInitials} icon={icon} size={size} variant={variant} {...rest} ref={ref} />;
+  const onError = () => {
+    setError(true);
+  };
+
+  return (
+    <ChakraAvatar
+      getInitials={getInitials}
+      icon={icon}
+      onError={onError}
+      size={size}
+      variant={variant}
+      background={hasError === false ? 'transparent' : undefined}
+      {...rest}
+      ref={ref}
+    />
+  );
 });
 
 export default Avatar;