feat(ActionList): add ActionListItemAvatar component for leading prop (…

…#2341) * feat: add ActionListItemAvatar * Create swift-cougars-attend.md * fix: build * fix: buil
razorpay · Aug 29, 2024 · eaa75c6 · eaa75c6
1 parent 122476e
commit eaa75c6
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 3 deletions.
diff --git a/.changeset/swift-cougars-attend.md b/.changeset/swift-cougars-attend.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": minor
+---
+
+feat(ActionList): add ActionListItemAvatar component for leading prop
diff --git a/packages/blade/src/components/ActionList/ActionList.stories.tsx b/packages/blade/src/components/ActionList/ActionList.stories.tsx
@@ -4,6 +4,7 @@ import type { ActionListProps } from './ActionList';
 import { ActionList as ActionListComponent } from './ActionList';
 import {
   ActionListItem,
+  ActionListItemAvatar,
   ActionListItemBadge,
   ActionListItemBadgeGroup,
   ActionListItemIcon,
@@ -241,7 +242,9 @@ const ActionListWithCustomItemsExample: StoryFn<typeof ActionListComponent> = ()
             <ActionListItem
               title="Profile"
               value="profile"
-              leading={<ActionListItemIcon icon={UserIcon} />}
+              leading={
+                <ActionListItemAvatar icon={UserIcon} color="primary" name="Saurabh Daware" />
+              }
             />
             <ActionListItem
               title="Credit"

diff --git a/packages/blade/src/components/ActionList/ActionListItem.tsx b/packages/blade/src/components/ActionList/ActionListItem.tsx
@@ -25,6 +25,8 @@ import { Box } from '~components/Box';
 import { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';
 import { BaseMenuItem, useBaseMenuItem } from '~components/BaseMenu';
 import { Checkbox } from '~components/Checkbox';
+import type { AvatarProps } from '~components/Avatar/types';
+import { Avatar } from '~components/Avatar';
 
 type ActionListItemProps = {
   title: string;
@@ -210,6 +212,14 @@ const ActionListItemBadgeGroup = assignWithoutSideEffects(_ActionListItemBadgeGr
   componentId: componentIds.ActionListItemBadgeGroup,
 });
 
+const _ActionListItemAvatar = (avatarProps: Omit<AvatarProps, 'size' | ''>): React.ReactElement => {
+  return <Avatar size="xsmall" {...avatarProps} />;
+};
+
+const ActionListItemAvatar = assignWithoutSideEffects(_ActionListItemAvatar, {
+  componentId: componentIds.ActionListItemAvatar,
+});
+
 const _ActionListItemBadge = (props: BadgeProps): React.ReactElement => {
   return <Badge size="medium" marginLeft="spacing.3" {...props} />;
 };
@@ -406,6 +416,7 @@ export {
   ActionListItem,
   ActionListItemIcon,
   ActionListItemText,
+  ActionListItemAvatar,
   ActionListItemBadge,
   ActionListItemBadgeGroup,
   ActionListSection,

diff --git a/packages/blade/src/components/ActionList/actionListUtils.ts b/packages/blade/src/components/ActionList/actionListUtils.ts
@@ -217,10 +217,11 @@ const validateActionListItemProps = ({
       if (
         !isValidAllowedChildren(child, componentIds.ActionListItemIcon) &&
         !isValidAllowedChildren(child, componentIds.ActionListItemText) &&
-        !isValidAllowedChildren(child, componentIds.ActionListItemAsset)
+        !isValidAllowedChildren(child, componentIds.ActionListItemAsset) &&
+        !isValidAllowedChildren(child, componentIds.ActionListItemAvatar)
       ) {
         throwBladeError({
-          message: `Only ${componentIds.ActionListItemIcon}, ${componentIds.ActionListItemAsset}, and ${componentIds.ActionListItemText} are allowed in leading prop`,
+          message: `Only ${componentIds.ActionListItemIcon}, ${componentIds.ActionListItemAvatar}, ${componentIds.ActionListItemAsset}, and ${componentIds.ActionListItemText} are allowed in leading prop`,
           moduleName: 'ActionListItem',
         });
       }

diff --git a/packages/blade/src/components/ActionList/componentIds.ts b/packages/blade/src/components/ActionList/componentIds.ts
@@ -5,6 +5,7 @@ export const componentIds = {
   ActionListItemBadgeGroup: 'ActionListItemBadgeGroup',
   ActionListItemAsset: 'ActionListItemAsset',
   ActionListItemIcon: 'ActionListItemIcon',
+  ActionListItemAvatar: 'ActionListItemAvatar',
   ActionListItemText: 'ActionListItemText',
   ActionListSection: 'ActionListSection',
 };