From 67de2c28f47c69f18458adc74889bb86495aced1 Mon Sep 17 00:00:00 2001
From: Lavender <lavender.chan@mongodb.com>
Date: Tue, 27 May 2025 10:11:13 +1000
Subject: [PATCH] bugfix/MIG-6838 Fix styling of primary field

---
 src/components/field/field.test.tsx  | 46 +++++++++++++++++++++-------
 src/components/field/field.tsx       |  2 +-
 src/components/node/node.stories.tsx |  2 +-
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/components/field/field.test.tsx b/src/components/field/field.test.tsx
index ee04e33..72b56f6 100644
--- a/src/components/field/field.test.tsx
+++ b/src/components/field/field.test.tsx
@@ -1,23 +1,47 @@
+import { palette } from '@leafygreen-ui/palette';
+import { ComponentProps } from 'react';
+
 import { render, screen } from '@/mocks/testing-utils';
 import { Field } from '@/components/field/field';
 import { DEFAULT_PREVIEW_GROUP_AREA } from '@/utilities/get-preview-group-area';
 
 describe('field', () => {
+  const DEFAULT_PROPS: ComponentProps<typeof Field> = {
+    nodeType: 'collection',
+    name: 'ordersId',
+    type: 'objectId',
+    glyphs: ['key', 'link'],
+    previewGroupArea: DEFAULT_PREVIEW_GROUP_AREA,
+    spacing: 2,
+    depth: 1,
+  };
   it('Should have field', () => {
-    render(
-      <Field
-        nodeType={'collection'}
-        name={'ordersId'}
-        type={'objectId'}
-        glyphs={['key', 'link']}
-        previewGroupArea={DEFAULT_PREVIEW_GROUP_AREA}
-        spacing={2}
-        depth={1}
-      />,
-    );
+    render(<Field {...DEFAULT_PROPS} />);
     expect(screen.getByText('ordersId')).toBeInTheDocument();
     expect(screen.getByText('objectId')).toBeInTheDocument();
     expect(screen.getByRole('img', { name: 'Key Icon' })).toBeInTheDocument();
     expect(screen.getByRole('img', { name: 'Link Icon' })).toBeInTheDocument();
   });
+  describe('With glyphs', () => {
+    it('With disabled', () => {
+      render(<Field {...DEFAULT_PROPS} variant={'disabled'} />);
+      expect(screen.getByRole('img', { name: 'Key Icon' })).toHaveAttribute('color', '#889397');
+      expect(screen.getByRole('img', { name: 'Link Icon' })).toHaveAttribute('color', '#889397');
+    });
+    it('With primary', () => {
+      render(<Field {...DEFAULT_PROPS} variant={'primary'} />);
+      expect(screen.getByRole('img', { name: 'Key Icon' })).toHaveAttribute('color', palette.blue.base);
+      expect(screen.getByRole('img', { name: 'Link Icon' })).toHaveAttribute('color', palette.gray.dark1);
+    });
+    it('With collection type', () => {
+      render(<Field {...DEFAULT_PROPS} />);
+      expect(screen.getByRole('img', { name: 'Key Icon' })).toHaveAttribute('color', palette.green.dark1);
+      expect(screen.getByRole('img', { name: 'Link Icon' })).toHaveAttribute('color', palette.gray.dark1);
+    });
+    it('With table type', () => {
+      render(<Field {...DEFAULT_PROPS} nodeType={'table'} />);
+      expect(screen.getByRole('img', { name: 'Key Icon' })).toHaveAttribute('color', palette.purple.base);
+      expect(screen.getByRole('img', { name: 'Link Icon' })).toHaveAttribute('color', palette.gray.dark1);
+    });
+  });
 });
diff --git a/src/components/field/field.tsx b/src/components/field/field.tsx
index 167a2fa..9f906b9 100644
--- a/src/components/field/field.tsx
+++ b/src/components/field/field.tsx
@@ -134,7 +134,7 @@ export const Field = ({
   const getIconColor = (glyph: NodeGlyph) => {
     if (isDisabled) {
       return color[theme].text.disabled.default;
-    } else if (variant === 'primary') {
+    } else if (variant === 'primary' && glyph === 'key') {
       return palette.blue.base;
     } else {
       return glyph === 'key' ? getAccent() : internalTheme.node.icon;
diff --git a/src/components/node/node.stories.tsx b/src/components/node/node.stories.tsx
index 3d4231d..5808307 100644
--- a/src/components/node/node.stories.tsx
+++ b/src/components/node/node.stories.tsx
@@ -231,7 +231,7 @@ export const NodeWithPrimaryField: Story = {
           name: 'customerId',
           type: 'string',
           variant: 'primary',
-          glyphs: ['key'],
+          glyphs: ['key', 'link'],
         },
       ],
     },