From 1459d04dbd5d43298f3a4b44f1d46afdc7a418c8 Mon Sep 17 00:00:00 2001
From: Byron Wall <byron.wall@commercetools.com>
Date: Mon, 7 Oct 2024 09:58:38 -0400
Subject: [PATCH 1/5] chore(rebase): update filters files

---
 .../src/filter-menu/chip/chip.spec.tsx        |  8 ++--
 .../filters/src/filter-menu/chip/chip.tsx     | 38 ++++++++++++++++++-
 .../trigger-button/trigger-button.tsx         |  3 --
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/packages/components/filters/src/filter-menu/chip/chip.spec.tsx b/packages/components/filters/src/filter-menu/chip/chip.spec.tsx
index b2701dde41..724c713c8e 100644
--- a/packages/components/filters/src/filter-menu/chip/chip.spec.tsx
+++ b/packages/components/filters/src/filter-menu/chip/chip.spec.tsx
@@ -1,12 +1,10 @@
 import { screen, render } from '../../../../../../test/test-utils';
 import Chip from './chip';
 
-/**
- * THIS IS A PLACEHOLDER, PLEASE UPDATE IT
- */
 describe('FilterMenu Chip', () => {
   it('should render the chip', async () => {
-    await render(<Chip />);
-    await screen.findByText('chip');
+    await render(<Chip label="test" />);
+    const chip = await screen.findByRole('listitem');
+    expect(chip.textContent).toEqual('test');
   });
 });
diff --git a/packages/components/filters/src/filter-menu/chip/chip.tsx b/packages/components/filters/src/filter-menu/chip/chip.tsx
index 0983398fdc..b50f7d5000 100644
--- a/packages/components/filters/src/filter-menu/chip/chip.tsx
+++ b/packages/components/filters/src/filter-menu/chip/chip.tsx
@@ -1,5 +1,39 @@
-function Chip() {
-  return <div>chip</div>;
+import { type ReactNode } from 'react';
+import { designTokens } from '@commercetools-uikit/design-system';
+import { css } from '@emotion/react';
+
+export type TFilterMenuChipProps = {
+  isDisabled?: boolean;
+  label: ReactNode;
+};
+
+const chipStyles = css`
+  font-size: ${designTokens.fontSize20};
+  font-weight: ${designTokens.fontWeight400};
+  line-height: ${designTokens.lineHeight20};
+  color: ${designTokens.colorPrimary20};
+  background-color: ${designTokens.colorPrimary95};
+  padding: 0 ${designTokens.spacing20};
+  border-radius: calc(
+    ${designTokens.borderRadius20} - ${designTokens.borderRadius4}
+  );
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  list-style: none;
+`;
+
+const disabledChipStyles = css`
+  color: ${designTokens.colorNeutral60};
+  background-color: ${designTokens.colorNeutral90};
+`;
+
+function Chip(props: TFilterMenuChipProps) {
+  return (
+    <li css={[chipStyles, props.isDisabled && disabledChipStyles]}>
+      {props.label}
+    </li>
+  );
 }
 
 export default Chip;
diff --git a/packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx b/packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx
index 4e992dfc28..c2b512310f 100644
--- a/packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx
+++ b/packages/components/filters/src/filter-menu/trigger-button/trigger-button.tsx
@@ -1,5 +1,3 @@
-import { Chip } from '../chip';
-
 export type TFilterMenuTriggerButtonProps = {
   label: string;
 };
@@ -8,7 +6,6 @@ const TriggerButton = (props: TFilterMenuTriggerButtonProps) => {
   return (
     <button>
       <div>{props.label}</div>
-      <Chip />
     </button>
   );
 };

From 88b07113136d5cc443776a23062aebe55cf58d3b Mon Sep 17 00:00:00 2001
From: Byron Wall <byron.wall@commercetools.com>
Date: Wed, 2 Oct 2024 12:41:14 -0400
Subject: [PATCH 2/5] chore(filters chip): remove local dev tag from Filters
 story so that reviewers can see component in preview storybook

---
 packages/components/filters/src/filters.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/filters/src/filters.stories.tsx b/packages/components/filters/src/filters.stories.tsx
index ef8e0121f1..f2f3e5590f 100644
--- a/packages/components/filters/src/filters.stories.tsx
+++ b/packages/components/filters/src/filters.stories.tsx
@@ -4,7 +4,7 @@ import Filters from './filters';
 const meta: Meta<typeof Filters> = {
   title: 'components/Filters',
   component: Filters,
-  tags: ['local-dev'],
+  // tags: ['local-dev'],
   argTypes: {
     label: {
       control: 'text',

From 5845f486a66865adb6164aff4b86838380c946ff Mon Sep 17 00:00:00 2001
From: Byron Wall <byron.wall@commercetools.com>
Date: Mon, 7 Oct 2024 10:00:08 -0400
Subject: [PATCH 3/5] chore(rebase): update filters files

---
 packages/components/filters/src/filter-menu/chip/chip.tsx | 3 ++-
 packages/components/filters/src/filters.tsx               | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/components/filters/src/filter-menu/chip/chip.tsx b/packages/components/filters/src/filter-menu/chip/chip.tsx
index b50f7d5000..618caca1ea 100644
--- a/packages/components/filters/src/filter-menu/chip/chip.tsx
+++ b/packages/components/filters/src/filter-menu/chip/chip.tsx
@@ -13,6 +13,7 @@ const chipStyles = css`
   line-height: ${designTokens.lineHeight20};
   color: ${designTokens.colorPrimary20};
   background-color: ${designTokens.colorPrimary95};
+  height: ${designTokens.spacing40};
   padding: 0 ${designTokens.spacing20};
   border-radius: calc(
     ${designTokens.borderRadius20} - ${designTokens.borderRadius4}
@@ -24,7 +25,7 @@ const chipStyles = css`
 `;
 
 const disabledChipStyles = css`
-  color: ${designTokens.colorNeutral60};
+  color: ${designTokens.colorNeutral50};
   background-color: ${designTokens.colorNeutral90};
 `;
 
diff --git a/packages/components/filters/src/filters.tsx b/packages/components/filters/src/filters.tsx
index c3a5baeac3..4540505733 100644
--- a/packages/components/filters/src/filters.tsx
+++ b/packages/components/filters/src/filters.tsx
@@ -1,4 +1,5 @@
 import { designTokens } from '@commercetools-uikit/design-system';
+import { Chip } from './filter-menu/chip';
 
 export type TFiltersProps = {
   /**
@@ -11,6 +12,10 @@ function Filters(props: TFiltersProps) {
   return (
     <div style={{ display: 'flex', gap: designTokens.spacing20 }}>
       <div>{props.label}</div>
+      <ul style={{ display: 'flex', gap: designTokens.spacing20 }}>
+        <Chip label="active" />
+        <Chip label="disabled" isDisabled />
+      </ul>
     </div>
   );
 }

From d8cc216234a9a7bae9bfd528fc462a841e98c9cf Mon Sep 17 00:00:00 2001
From: Byron Wall <byron.wall@commercetools.com>
Date: Fri, 4 Oct 2024 13:29:07 -0400
Subject: [PATCH 4/5] fix(chip styles): disabled text color now colorNeutral40

---
 packages/components/filters/src/filter-menu/chip/chip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/filters/src/filter-menu/chip/chip.tsx b/packages/components/filters/src/filter-menu/chip/chip.tsx
index 618caca1ea..a50cd0202a 100644
--- a/packages/components/filters/src/filter-menu/chip/chip.tsx
+++ b/packages/components/filters/src/filter-menu/chip/chip.tsx
@@ -25,7 +25,7 @@ const chipStyles = css`
 `;
 
 const disabledChipStyles = css`
-  color: ${designTokens.colorNeutral50};
+  color: ${designTokens.colorNeutral40};
   background-color: ${designTokens.colorNeutral90};
 `;
 

From aa7adc28de94344b21ad0b0cbc6c5f94cb6f512a Mon Sep 17 00:00:00 2001
From: Byron Wall <byron.wall@commercetools.com>
Date: Mon, 7 Oct 2024 10:01:02 -0400
Subject: [PATCH 5/5] chore(rebase): update filters files

---
 packages/components/filters/src/filters.stories.tsx | 2 +-
 packages/components/filters/src/filters.tsx         | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/components/filters/src/filters.stories.tsx b/packages/components/filters/src/filters.stories.tsx
index f2f3e5590f..ef8e0121f1 100644
--- a/packages/components/filters/src/filters.stories.tsx
+++ b/packages/components/filters/src/filters.stories.tsx
@@ -4,7 +4,7 @@ import Filters from './filters';
 const meta: Meta<typeof Filters> = {
   title: 'components/Filters',
   component: Filters,
-  // tags: ['local-dev'],
+  tags: ['local-dev'],
   argTypes: {
     label: {
       control: 'text',
diff --git a/packages/components/filters/src/filters.tsx b/packages/components/filters/src/filters.tsx
index 4540505733..d3d6b8eb3c 100644
--- a/packages/components/filters/src/filters.tsx
+++ b/packages/components/filters/src/filters.tsx
@@ -1,5 +1,4 @@
 import { designTokens } from '@commercetools-uikit/design-system';
-import { Chip } from './filter-menu/chip';
 
 export type TFiltersProps = {
   /**
@@ -12,10 +11,7 @@ function Filters(props: TFiltersProps) {
   return (
     <div style={{ display: 'flex', gap: designTokens.spacing20 }}>
       <div>{props.label}</div>
-      <ul style={{ display: 'flex', gap: designTokens.spacing20 }}>
-        <Chip label="active" />
-        <Chip label="disabled" isDisabled />
-      </ul>
+      <div style={{ display: 'flex', gap: designTokens.spacing20 }}></div>
     </div>
   );
 }