fix: correctly apply styles to <Select> icon (#4026)

marigold-ui · Jul 19, 2024 · 94e9a1b · 94e9a1b
1 parent 0e58fe6
commit 94e9a1b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/.changeset/lucky-plums-fix.md 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
@@ -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
@@ -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>