From 94e9a1be5ec8ed56aabab335b4867903161c60b8 Mon Sep 17 00:00:00 2001
From: Sebastian Sebald <sebastian.sebald@reservix.de>
Date: Fri, 19 Jul 2024 12:07:56 +0200
Subject: [PATCH] fix: correctly apply styles to `<Select>` icon (#4026)

---
 .changeset/lucky-plums-fix.md                 |  5 +++++
 .../components/src/Select/Select.test.tsx     | 19 ++++++++++++++++++-
 packages/components/src/Select/Select.tsx     |  2 +-
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/lucky-plums-fix.md

diff --git a/.changeset/lucky-plums-fix.md b/.changeset/lucky-plums-fix.md
new file mode 100644
index 0000000000..39f1f32412
--- /dev/null
+++ b/.changeset/lucky-plums-fix.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+fix: correctly apply styles to `<Select>` icon
diff --git a/packages/components/src/Select/Select.test.tsx b/packages/components/src/Select/Select.test.tsx
index 3191dd28fb..7158541654 100644
--- a/packages/components/src/Select/Select.test.tsx
+++ b/packages/components/src/Select/Select.test.tsx
@@ -60,7 +60,7 @@ const theme: Theme = {
           size: { small: 'text-sm' },
         },
       }),
-      icon: cva(),
+      icon: cva('text-zinc-600'),
     },
     Underlay: cva(),
     ListBox: {
@@ -407,6 +407,23 @@ test('supports styling classnames with variants and sizes from theme', () => {
   expect(button.className).toContain('text-sm');
 });
 
+test('supports applying styles to the caret icon', () => {
+  render(
+    <Select label="Label" data-testid="select">
+      <Select.Section>
+        <Select.Option id="one">one</Select.Option>
+        <Select.Option id="two">two</Select.Option>
+      </Select.Section>
+    </Select>
+  );
+
+  const button = screen.getByRole('button');
+  // eslint-disable-next-line testing-library/no-node-access
+  const icon = button.querySelector('svg');
+
+  expect(icon).toHaveClass('text-zinc-600');
+});
+
 test('set width via props', () => {
   render(
     <Select label="Label" data-testid="select" width="1/2">
diff --git a/packages/components/src/Select/Select.tsx b/packages/components/src/Select/Select.tsx
index a253deb611..4e79673a96 100644
--- a/packages/components/src/Select/Select.tsx
+++ b/packages/components/src/Select/Select.tsx
@@ -140,7 +140,7 @@ const _Select = forwardRef<any, SelectProps<object>>(
           )}
         >
           <SelectValue />
-          <ChevronDown className="size-4" />
+          <ChevronDown className={cn('size-4', classNames.icon)} />
         </Button>
         <Popover>
           <ListBox items={items}>{props.children}</ListBox>