Adding hover cursor on tag component in multi-select mode (#3834)

marigold-ui · Mar 19, 2024 · 7fd7ad7 · 7fd7ad7
1 parent 879a0e1
commit 7fd7ad7
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 4 deletions.
diff --git a/.changeset/calm-roses-grab.md b/.changeset/calm-roses-grab.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+Adding cursor hover for tag component in multiselect
diff --git a/packages/components/src/TagGroup/Tag.tsx b/packages/components/src/TagGroup/Tag.tsx
@@ -32,7 +32,11 @@ const _Tag = ({ variant, size, children, ...props }: TagProps) => {
   const classNames = useClassNames({ component: 'Tag', variant, size });
 
   return (
-    <Tag textValue={textValue} {...props} className={classNames.tag}>
+    <Tag
+      textValue={textValue}
+      {...props}
+      className={cn('data-[selection-mode]:cursor-pointer', classNames.tag)}
+    >
       {({ allowsRemoving }) => (
         <>
           {children}

diff --git a/packages/components/src/TagGroup/TagGroup.stories.tsx b/packages/components/src/TagGroup/TagGroup.stories.tsx
@@ -80,3 +80,27 @@ export const RemovableTags: Story = {
     );
   },
 };
+
+export const MultiSelectTags: Story = {
+  render: args => {
+    const [selected, setSelected] = useState(new Set(['parking']));
+    return (
+      <>
+        <Tag.Group
+          {...args}
+          label="Amenities"
+          selectionMode="multiple"
+          selectedKeys={selected}
+          onSelectionChange={setSelected as any}
+        >
+          <Tag id="laundry">Laundry</Tag>
+          <Tag id="fitness">Fitness center</Tag>
+          <Tag id="parking">Parking</Tag>
+          <Tag id="pool">Swimming pool</Tag>
+          <Tag id="breakfast">Breakfast</Tag>
+        </Tag.Group>
+        <p>Current selection (controlled): {[...selected].join(', ')}</p>
+      </>
+    );
+  },
+};
diff --git a/packages/components/src/TagGroup/TagGroup.test.tsx b/packages/components/src/TagGroup/TagGroup.test.tsx
@@ -202,7 +202,7 @@ test('render same styles for each tag', () => {
   const gridCell = tag!.firstChild;
   // @ts-ignore
   expect(gridCell?.className).toMatchInlineSnapshot(
-    `"border border-slate-600"`
+    `"data-[selection-mode]:cursor-pointer border border-slate-600"`
   );
 
   // eslint-disable-next-line testing-library/no-node-access

diff --git a/themes/theme-b2b/src/components/Tag.styles.ts b/themes/theme-b2b/src/components/Tag.styles.ts
@@ -1,7 +1,10 @@
 import { ThemeComponent, cva } from '@marigold/system';
 
 export const Tag: ThemeComponent<'Tag'> = {
-  tag: cva('border-border-base flex items-center gap-1 rounded-md border p-1'),
+  tag: cva([
+    'border-border-base flex items-center gap-1 rounded-md border p-1 ',
+    'data-[selected]:bg-bg-selected-input data-[selected]:text-text-inverted data-[selected]:border-border-selected-input',
+  ]),
   closeButton: cva('right-1 size-4 cursor-pointer p-0 outline-none'),
   listItems: cva('flex flex-wrap items-center gap-1'),
 };
diff --git a/themes/theme-core/src/components/Tag.styles.ts b/themes/theme-core/src/components/Tag.styles.ts
@@ -2,7 +2,8 @@ import { ThemeComponent, cva } from '@marigold/system';
 
 export const Tag: ThemeComponent<'Tag'> = {
   tag: cva([
-    'border-border-base bg-bg-base flex items-center gap-1 rounded border',
+    'border-border-base bg-bg-base flex items-center gap-1 rounded border ',
+    'data-[selected]:bg-bg-selected-input data-[selected]:text-text-inverted data-[selected]:border-border-selected',
     'px-1.5 py-[2px]',
   ]),
   listItems: cva('flex flex-wrap items-center gap-1'),