feat(dropdown): add iconColor prop to DropdownButton

src/elements/dropdown/__docs__/index.stories.tsx

@@ -31,6 +31,7 @@ export {MultiLine} from './stories/multi-line.stories';
 export {Avatar} from './stories/avatar.stories';
 export {Header} from './stories/header.stories';
 export {Form} from './stories/form.stories';
+export {IconColor} from './stories/iconColor.stories';
 
 // Nested Dropdown Examples (Hover-based)
 export {BasicNestedDropdown} from './stories/nestedDropdown.stories';

src/elements/dropdown/__docs__/stories/iconColor.stories.tsx

@@ -0,0 +1,85 @@
+import type {StoryFn} from '@storybook/react';
+import React, {useState} from 'react';
+import styled from 'styled-components';
+
+import {palette} from '../../../../helpers/colorHelpers';
+import {Icon} from '../../../icon/icon';
+import {Dropdown} from '../../dropdown';
+import {DropdownButton} from '../../dropdownButton';
+import {DropdownCoordinator} from '../../dropdownCoordinator';
+import {DropdownItem} from '../../dropdownItem';
+
+const StyledWrapperDiv = styled.div`
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  height: 300px;
+`;
+
+const StyledDropdownWrapperDiv = styled.div`
+  width: 300px;
+`;
+
+const StyledDropdownItemContentDiv = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+interface InboxOption {
+  id: string;
+  name: string;
+  color: string;
+}
+
+const inboxOptions: ReadonlyArray<InboxOption> = [
+  {id: '1', name: 'Support', color: palette.red.shade40},
+  {id: '2', name: 'Sales', color: palette.blue.shade40},
+  {id: '3', name: 'Engineering', color: palette.green.shade40},
+  {id: '4', name: 'Marketing', color: palette.purple.shade40},
+  {id: '5', name: 'Operations', color: palette.orange.shade40}
+];
+
+const Template: StoryFn<typeof DropdownCoordinator> = () => {
+  const [selectedInboxId, setSelectedInboxId] = useState<string>();
+  const selectedInbox = inboxOptions.find((inbox) => inbox.id === selectedInboxId);
+
+  return (
+    <StyledWrapperDiv>
+      <StyledDropdownWrapperDiv>
+        <DropdownCoordinator
+          layerRootId="story--elements-dropdown--icon-color"
+          placement="bottom-start"
+          renderButton={(isDropdownOpen, isDisabled, buttonRef) => (
+            <DropdownButton
+              buttonRef={buttonRef}
+              isDisabled={isDisabled}
+              value={selectedInbox?.name ?? ''}
+              isActive={isDropdownOpen}
+              placeholder="Select an inbox"
+              iconName={selectedInbox ? 'Inbox' : undefined}
+              iconColor={selectedInbox?.color}
+            />
+          )}
+          renderDropdown={(_onRequestClose, buttonWidth) => (
+            <Dropdown maxWidth={buttonWidth} shouldUseItemsHeight>
+              {inboxOptions.map((inbox) => (
+                <DropdownItem
+                  key={inbox.id}
+                  onClick={() => setSelectedInboxId(inbox.id)}
+                  isSelected={inbox.id === selectedInboxId}>
+                  <StyledDropdownItemContentDiv>
+                    <Icon name="Inbox" color={inbox.color} />
+                    {inbox.name}
+                  </StyledDropdownItemContentDiv>
+                </DropdownItem>
+              ))}
+            </Dropdown>
+          )}
+        />
+      </StyledDropdownWrapperDiv>
+    </StyledWrapperDiv>
+  );
+};
+
+export const IconColor = Template.bind({});

src/elements/dropdown/dropdownButton.tsx

@@ -29,6 +29,8 @@ interface DropdownButtonProps {
   isActive?: boolean;
   /** Icon to render on the left. If nothing is set, no icon will be rendered. */
   iconName?: IconName;
+  /** Color for the icon. Defaults to greys.shade50. */
+  iconColor?: string;
   /** The max width of the button. Default is 100%. */
   maxWidth?: number;
   /** Reference the button itself. */
@@ -153,7 +155,7 @@ const StyledChevronWrapperDiv = styled.div`
  */
 
 export const DropdownButton: FC<DropdownButtonProps> = (props) => {
-  const {maxWidth, value, iconName, isDisabled, isActive, isErred, buttonRef} = props;
+  const {maxWidth, value, iconName, iconColor, isDisabled, isActive, isErred, buttonRef} = props;
   const [childrenContainerRef, {buttonWidth: width}] = useMeasureElement();
 
   return (
@@ -165,7 +167,7 @@ export const DropdownButton: FC<DropdownButtonProps> = (props) => {
       $isDisabled={isDisabled}
       $isErred={isErred}>
       <StyledContentWrapperDiv $isDisabled={isDisabled}>
-        {maybeRenderIcon(iconName)}
+        {maybeRenderIcon(iconName, iconColor)}
         <StyledChildrenWrapperDiv ref={childrenContainerRef}>
           {maybeRenderPlaceholder(props)}
           {renderDropdownContent(value, width)}
@@ -203,11 +205,11 @@ function renderDropdownContent(value: string | ReadonlyArray<string>, childrenCo
   return value;
 }
 
-function maybeRenderIcon(iconName?: IconName) {
+function maybeRenderIcon(iconName?: IconName, iconColor?: string) {
   if (!iconName) return null;
   return (
     <StyledIconWrapperDiv>
-      <Icon name={iconName} color={greys.shade50} />
+      <Icon name={iconName} color={iconColor ?? greys.shade50} />
     </StyledIconWrapperDiv>
   );
 }