bugfix/MIG-6838 Fix styling of primary field

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);
+    });
+  });
 });

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;

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'],
         },
       ],
     },