feat: add iconColor prop to List & ListItem (#2258)

razorpay · Jun 24, 2024 · 9b2883f · 9b2883f
1 parent d6dc1b3
commit 9b2883f
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 11 deletions.
diff --git a/.changeset/three-cherries-teach.md b/.changeset/three-cherries-teach.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+feat: add iconColor prop to List & ListItem
diff --git a/packages/blade/src/components/List/List.stories.tsx b/packages/blade/src/components/List/List.stories.tsx
@@ -243,7 +243,7 @@ OrderedFilledListWithSizes.storyName = 'OrderedFilled - Sizes';
 
 const ListWithLinkAndIconTemplate: StoryFn<typeof List> = () => {
   return (
-    <List variant="unordered" icon={BookmarkIcon}>
+    <List variant="unordered" icon={BookmarkIcon} iconColor="interactive.icon.staticWhite.subtle">
       <ListItem>
         <ListItemLink>Troubleshooting and FAQs</ListItemLink>
       </ListItem>

diff --git a/packages/blade/src/components/List/List.tsx b/packages/blade/src/components/List/List.tsx
@@ -5,7 +5,7 @@ import { UnorderedList } from './UnorderedList';
 import { OrderedList } from './OrderedList';
 import type { ListItemProps } from './ListItem';
 import getIn from '~utils/lodashButBetter/get';
-import type { IconComponent } from '~components/Icons';
+import type { IconComponent, IconProps } from '~components/Icons';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import type { DotNotationSpacingStringToken, TestID } from '~utils/types';
 import BaseBox from '~components/Box/BaseBox';
@@ -41,10 +41,12 @@ type ListCommonProps = {
 type ListWithIconProps = ListCommonProps & {
   variant?: 'unordered';
   icon?: IconComponent;
+  iconColor?: IconProps['color'];
 };
 type ListWithoutIconProps = ListCommonProps & {
   variant?: 'ordered' | 'ordered-filled';
   icon?: undefined;
+  iconColor?: undefined;
 };
 type ListProps = ListWithIconProps | ListWithoutIconProps;
 
@@ -86,6 +88,7 @@ const _List = ({
   children,
   icon,
   testID,
+  iconColor,
   ...styledProps
 }: ListProps): React.ReactElement => {
   const ListElement = variant === 'unordered' ? StyledUnorderedList : StyledOrderedList;
@@ -95,9 +98,10 @@ const _List = ({
       level: level ? level + 1 : 1,
       size: size ?? listContextSize,
       icon,
+      iconColor,
       variant,
     }),
-    [icon, level, listContextSize, size, variant],
+    [icon, iconColor, level, listContextSize, size, variant],
   );
 
   const childrenArray = React.Children.toArray(children);

diff --git a/packages/blade/src/components/List/ListContext.ts b/packages/blade/src/components/List/ListContext.ts
@@ -6,6 +6,7 @@ export type ListContextType = {
   level?: number;
   size: NonNullable<ListProps['size']>;
   icon?: IconComponent;
+  iconColor?: ListProps['iconColor'];
   variant: NonNullable<ListProps['variant']>;
 };
 

diff --git a/packages/blade/src/components/List/ListItem.tsx b/packages/blade/src/components/List/ListItem.tsx
@@ -35,6 +35,11 @@ type ListItemProps = {
    *
    */
   icon?: IconComponent;
+  /**
+   * Icon color of the ListItem's bullet.
+   *
+   */
+  iconColor?: ListProps['iconColor'];
   /**
    * This is a private prop to be used only for internal logic purposes.
    *
@@ -92,12 +97,14 @@ const ListItemContentChildren = ({
 const _ListItem = ({
   children,
   icon: Icon,
+  iconColor: listItemIconColor,
   _itemNumber,
   testID,
 }: ListItemProps): React.ReactElement => {
-  const { level, size, icon: ListContextIcon, variant } = useListContext();
+  const { level, size, icon: ListContextIcon, variant, iconColor } = useListContext();
   const { theme, platform } = useTheme();
   const ItemIcon = Icon ?? ListContextIcon;
+  const iconColorToken = listItemIconColor ?? iconColor ?? 'surface.icon.gray.muted';
 
   if (__DEV__) {
     if (level && level > 3) {
@@ -158,7 +165,7 @@ const _ListItem = ({
             alignSelf="flex-start"
           >
             {ItemIcon ? (
-              <ItemIcon size={size} color="surface.icon.gray.muted" />
+              <ItemIcon size={size} color={iconColorToken} />
             ) : (
               <UnorderedItemIcon level={level} />
             )}

diff --git a/packages/blade/src/components/List/ListItemIcons.tsx b/packages/blade/src/components/List/ListItemIcons.tsx
@@ -42,9 +42,9 @@ const UnorderedLevel3Icon = ({ iconDimensions, color }: UnorderedIconProps): Rea
 
 const UnorderedItemIcon = ({ level }: { level?: number }): React.ReactElement => {
   const { theme, platform } = useTheme();
-  const { size } = useListContext();
+  const { size, iconColor } = useListContext();
   const iconDimensions = listItemUnorderedBulletSize[platform][size];
-  const backgroundToken = theme.colors.surface.text.gray.muted;
+  const backgroundToken = iconColor ?? theme.colors.surface.text.gray.muted;
 
   switch (level) {
     case 1:

diff --git a/packages/blade/src/components/List/__tests__/List.native.test.tsx b/packages/blade/src/components/List/__tests__/List.native.test.tsx
@@ -99,7 +99,7 @@ describe('<List />', () => {
         <ListItem>
           Level 1
           <List>
-            <ListItem icon={ArrowUpIcon}>
+            <ListItem icon={ArrowUpIcon} iconColor="feedback.icon.positive.intense">
               Level 2
               <List>
                 <ListItem>Level 3</ListItem>

diff --git a/packages/blade/src/components/List/__tests__/List.web.test.tsx b/packages/blade/src/components/List/__tests__/List.web.test.tsx
@@ -103,7 +103,7 @@ describe('<List />', () => {
         <ListItem>
           Level 1
           <List>
-            <ListItem icon={ArrowUpIcon}>
+            <ListItem icon={ArrowUpIcon} iconColor="feedback.icon.positive.intense">
               Level 2
               <List>
                 <ListItem>Level 3</ListItem>

diff --git a/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap b/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap
@@ -5946,7 +5946,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                         d="M12.7071 3.29289C12.3166 2.90237 11.6834 2.90237 11.2929 3.29289L5.29289 9.29289C4.90237 9.68342 4.90237 10.3166 5.29289 10.7071C5.68342 11.0976 6.31658 11.0976 6.70711 10.7071L11 6.41421V20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20V6.41421L17.2929 10.7071C17.6834 11.0976 18.3166 11.0976 18.7071 10.7071C19.0976 10.3166 19.0976 9.68342 18.7071 9.29289L12.7071 3.29289Z"
                         fill={
                           {
-                            "payload": 4285959847,
+                            "payload": 4278225477,
                             "type": 0,
                           }
                         }

diff --git a/packages/blade/src/components/List/__tests__/__snapshots__/List.web.test.tsx.snap b/packages/blade/src/components/List/__tests__/__snapshots__/List.web.test.tsx.snap
@@ -2408,7 +2408,7 @@ exports[`<List /> should render small unordered List with icon 1`] = `
                     <path
                       d="M12.7071 3.29289C12.3166 2.90237 11.6834 2.90237 11.2929 3.29289L5.29289 9.29289C4.90237 9.68342 4.90237 10.3166 5.29289 10.7071C5.68342 11.0976 6.31658 11.0976 6.70711 10.7071L11 6.41421V20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20V6.41421L17.2929 10.7071C17.6834 11.0976 18.3166 11.0976 18.7071 10.7071C19.0976 10.3166 19.0976 9.68342 18.7071 9.29289L12.7071 3.29289Z"
                       data-blade-component="svg-path"
-                      fill="hsla(211, 22%, 56%, 1)"
+                      fill="hsla(150, 100%, 27%, 1)"
                     />
                   </svg>
                 </div>