feat(APP-3652): Add variant property to ToggleGroup component, support XS size on Avatar component

CHANGELOG.md

@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - Update `<DaoDataListItem.Structure />` module component to support new `isExternal` property
+- Support `xs` size on `<Avatar />` core component
+- Add `variant` property to `<ToggleGroup />` core component to support space-between spacing
 
 ### Changed
 

src/core/components/avatars/avatar/avatar.tsx

@@ -6,7 +6,7 @@ import { type ResponsiveAttribute, type ResponsiveAttributeClassMap } from '../.
 import { responsiveUtils } from '../../../utils';
 import { AvatarBase } from '../avatarBase';
 
-export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 export interface IAvatarProps extends ComponentPropsWithoutRef<'img'> {
     /**
@@ -25,6 +25,14 @@ export interface IAvatarProps extends ComponentPropsWithoutRef<'img'> {
 }
 
 const responsiveSizeClasses: ResponsiveAttributeClassMap<AvatarSize> = {
+    xs: {
+        default: 'size-4',
+        sm: 'sm:size-4',
+        md: 'md:size-4',
+        lg: 'lg:size-4',
+        xl: 'xl:size-4',
+        '2xl': '2xl:size-4',
+    },
     sm: {
         default: 'size-6',
         sm: 'sm:size-6',

src/core/components/toggles/toggleGroup/toggleGroup.stories.tsx

@@ -28,6 +28,20 @@ export const Default: Story = {
     ),
 };
 
+/**
+ * Usage of the ToggleGroup component with space-between variant.
+ */
+export const SpaceBetween: Story = {
+    args: { variant: 'space-between' },
+    render: (props) => (
+        <ToggleGroup className="w-full" {...props}>
+            <Toggle value="default" label="Default" />
+            <Toggle value="optimistic" label="Optimistic" />
+            <Toggle value="timelock" label="Timelock" />
+        </ToggleGroup>
+    ),
+};
+
 /**
  * Controlled usage example of the ToggleGroup component.
  */

src/core/components/toggles/toggleGroup/toggleGroup.tsx

@@ -6,6 +6,11 @@ export type ToggleGroupValue<TMulti extends boolean> = TMulti extends true ? str
 
 export interface IToggleGroupBaseProps<TMulti extends boolean>
     extends Omit<ComponentProps<'div'>, 'value' | 'onChange' | 'defaultValue' | 'ref' | 'dir'> {
+    /**
+     * Variant of the component defining the spacing between the toggle items.
+     * @default fixed
+     */
+    variant?: 'fixed' | 'space-between';
     /**
      * Allows multiple toggles to be selected at the same time when set to true.
      */
@@ -27,8 +32,14 @@ export interface IToggleGroupBaseProps<TMulti extends boolean>
 export type IToggleGroupProps = IToggleGroupBaseProps<true> | IToggleGroupBaseProps<false>;
 
 export const ToggleGroup = (props: IToggleGroupProps) => {
-    const { value, defaultValue, onChange, isMultiSelect, className, ...otherProps } = props;
-    const classes = classNames('flex flex-row flex-wrap gap-2 md:gap-3', className);
+    const { variant = 'fixed', value, defaultValue, onChange, isMultiSelect, className, ...otherProps } = props;
+
+    const classes = classNames(
+        'flex flex-row flex-wrap',
+        { 'gap-2 md:gap-3': variant === 'fixed' },
+        { 'justify-between gap-y-2': variant === 'space-between' },
+        className,
+    );
 
     if (isMultiSelect) {
         return (

src/modules/components/dao/daoAvatar/daoAvatar.tsx

@@ -21,6 +21,14 @@ export interface IDaoAvatarProps extends Omit<IAvatarProps, 'fallback'> {
 }
 
 const responsiveSizeClasses: ResponsiveAttributeClassMap<AvatarSize> = {
+    xs: {
+        default: 'text-xs',
+        sm: 'sm:text-xs',
+        md: 'md:text-xs',
+        lg: 'lg:text-xs',
+        xl: 'xl:text-xs',
+        '2xl': '2xl:text-xs',
+    },
     sm: {
         default: 'text-sm',
         sm: 'sm:text-sm',