From 04af5d4fc1eaca60756dca381c99ecfa860406b6 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin@plural.sh>
Date: Fri, 29 Nov 2024 08:47:43 +0100
Subject: [PATCH 1/3] always wrap chip list

---
 package.json                   | 2 +-
 src/components/CatalogCard.tsx | 1 -
 src/components/ChipList.tsx    | 6 ++----
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 7e4e9c35..0dfc55a2 100644
--- a/package.json
+++ b/package.json
@@ -156,4 +156,4 @@
       "eslint --fix --ext ts,tsx,js,jsx"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/CatalogCard.tsx b/src/components/CatalogCard.tsx
index 9cdf70b8..c304f27c 100644
--- a/src/components/CatalogCard.tsx
+++ b/src/components/CatalogCard.tsx
@@ -129,7 +129,6 @@ function CatalogCardRef(
                 values={tags ?? []}
                 limit={1}
                 truncateWidth={100}
-                wrap="nowrap"
                 emptyState={null}
               />
             </Flex>
diff --git a/src/components/ChipList.tsx b/src/components/ChipList.tsx
index 7a19e34e..c877eb90 100644
--- a/src/components/ChipList.tsx
+++ b/src/components/ChipList.tsx
@@ -1,4 +1,4 @@
-import { Flex, type FlexBaseProps, Span } from 'honorable'
+import { Flex, Span } from 'honorable'
 import isEmpty from 'lodash-es/isEmpty'
 import {
   type ComponentProps,
@@ -19,7 +19,6 @@ export type ChipListProps<TValue> = {
   values: TValue[]
   transformValue?: TransformFn<TValue>
   limit: number
-  wrap?: Pick<FlexBaseProps, 'wrap'>
   emptyState?: JSX.Element | null
   onClickCondition?: (value: TValue) => boolean
   onClick?: Dispatch<TValue>
@@ -29,7 +28,6 @@ function ChipList<TValue = string>({
   values = [],
   transformValue,
   limit = 4,
-  wrap = 'wrap',
   emptyState,
   onClickCondition,
   onClick,
@@ -40,7 +38,7 @@ function ChipList<TValue = string>({
   return (
     <Flex
       gap="xsmall"
-      wrap={wrap}
+      wrap="wrap"
     >
       {isEmpty(values) &&
         (emptyState !== undefined ? (

From 90fa8db347820df5bd0af05a82be4e4878a3afcf Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin@plural.sh>
Date: Fri, 29 Nov 2024 09:10:25 +0100
Subject: [PATCH 2/3] display hidden chips in tooltip

---
 src/components/CatalogCard.tsx |  5 +--
 src/components/ChipList.tsx    | 66 +++++++++++++++-------------------
 2 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/src/components/CatalogCard.tsx b/src/components/CatalogCard.tsx
index c304f27c..5008783e 100644
--- a/src/components/CatalogCard.tsx
+++ b/src/components/CatalogCard.tsx
@@ -109,7 +109,7 @@ function CatalogCardRef(
           {(category || tags?.length > 0) && (
             <Flex
               alignItems="start"
-              gap="large"
+              gap="small"
               justifyContent={category ? 'space-between' : 'end'}
               marginTop={theme.spacing.medium}
             >
@@ -118,6 +118,7 @@ function CatalogCardRef(
                   size="small"
                   border="none"
                   fillLevel={3}
+                  truncateWidth={70}
                 >
                   {category}
                 </Chip>
@@ -128,7 +129,7 @@ function CatalogCardRef(
                 fillLevel={3}
                 values={tags ?? []}
                 limit={1}
-                truncateWidth={100}
+                truncateWidth={70}
                 emptyState={null}
               />
             </Flex>
diff --git a/src/components/ChipList.tsx b/src/components/ChipList.tsx
index c877eb90..fe89b8b3 100644
--- a/src/components/ChipList.tsx
+++ b/src/components/ChipList.tsx
@@ -4,11 +4,9 @@ import {
   type ComponentProps,
   type Dispatch,
   type ReactElement,
-  useState,
+  useCallback,
 } from 'react'
 
-import { HamburgerMenuCollapseIcon } from '../icons'
-
 import Chip, { type ChipProps } from './Chip'
 
 type TransformFn<TValue> = (
@@ -33,7 +31,23 @@ function ChipList<TValue = string>({
   onClick,
   ...props
 }: ChipListProps<TValue>): ReactElement {
-  const [collapsed, setCollapsed] = useState(true)
+  const chip = useCallback(
+    (v: TValue, i: number) => {
+      const clickable = onClickCondition?.(v) ?? false
+
+      return (
+        <Chip
+          key={(v as any).key || i}
+          clickable={clickable}
+          onClick={() => clickable && onClick(v)}
+          {...props}
+        >
+          {transformValue ? transformValue(v) : `${v}`}
+        </Chip>
+      )
+    },
+    [onClick, onClickCondition, props, transformValue]
+  )
 
   return (
     <Flex
@@ -46,41 +60,19 @@ function ChipList<TValue = string>({
         ) : (
           <Span body2>There is nothing to display here.</Span>
         ))}
-      {values.slice(0, collapsed ? limit : undefined).map((v, i) => {
-        const clickable = onClickCondition?.(v) ?? false
-
-        return (
-          <Chip
-            key={(v as any).key || i}
-            clickable={clickable}
-            onClick={() => clickable && onClick(v)}
-            {...props}
-          >
-            {transformValue ? transformValue(v) : `${v}`}
-          </Chip>
-        )
-      })}
+      {values.slice(0, limit).map(chip)}
       {values.length > limit && (
-        <>
-          {collapsed && (
-            <Chip
-              onClick={() => setCollapsed(false)}
-              {...props}
-              clickable
-            >
-              {`+${values.length - limit}`}
-            </Chip>
-          )}
-          {!collapsed && (
-            <Chip
-              onClick={() => setCollapsed(true)}
-              {...props}
-              clickable
+        <Chip
+          {...props}
+          tooltip={
+            <Flex
+              gap="xsmall"
+              wrap="wrap"
             >
-              <HamburgerMenuCollapseIcon />
-            </Chip>
-          )}
-        </>
+              {values.slice(limit, values.length).map(chip)}
+            </Flex>
+          }
+        >{`+${values.length - limit}`}</Chip>
       )}
     </Flex>
   )

From 69cbe305631b4e267791f88a1aabf5747e2d1b90 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin@plural.sh>
Date: Fri, 29 Nov 2024 09:11:57 +0100
Subject: [PATCH 3/3] replace honorable

---
 src/components/ChipList.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/ChipList.tsx b/src/components/ChipList.tsx
index fe89b8b3..7fb54dd3 100644
--- a/src/components/ChipList.tsx
+++ b/src/components/ChipList.tsx
@@ -1,4 +1,3 @@
-import { Flex, Span } from 'honorable'
 import isEmpty from 'lodash-es/isEmpty'
 import {
   type ComponentProps,
@@ -8,6 +7,7 @@ import {
 } from 'react'
 
 import Chip, { type ChipProps } from './Chip'
+import Flex from './Flex'
 
 type TransformFn<TValue> = (
   value: TValue
@@ -55,11 +55,9 @@ function ChipList<TValue = string>({
       wrap="wrap"
     >
       {isEmpty(values) &&
-        (emptyState !== undefined ? (
-          emptyState
-        ) : (
-          <Span body2>There is nothing to display here.</Span>
-        ))}
+        (emptyState !== undefined
+          ? emptyState
+          : 'There is nothing to display here.')}
       {values.slice(0, limit).map(chip)}
       {values.length > limit && (
         <Chip