From 99d8d181aae1319b5ee7d43611e4f31388678e85 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Thu, 3 Oct 2024 15:03:07 +0530
Subject: [PATCH] add sm variant for chip

---
 .../environments/environment-resources-v2.tsx | 91 ++++++++-----------
 src/design-system/components/atoms/chips.tsx  | 23 ++++-
 2 files changed, 55 insertions(+), 59 deletions(-)

diff --git a/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx
index 3fc67556f..c2f13fede 100644
--- a/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx
+++ b/src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx
@@ -1,6 +1,7 @@
 import { Link, useOutletContext, useParams } from '@remix-run/react';
 import { useState } from 'react';
 import { Badge } from '~/components/atoms/badge';
+import { Chip } from '~/components/atoms/chips';
 import { toast } from '~/components/molecule/toast';
 import { generateKey, titleCase } from '~/components/utils';
 import ConsoleAvatar from '~/console/components/console-avatar';
@@ -224,16 +225,16 @@ const ListView = ({ items, onAction }: IResource) => {
             name: 'name',
             className: listClass.title,
           },
-          {
-            render: () => 'Cluster',
-            name: 'cluster',
-            className: listClass.item,
-          },
           {
             render: () => '',
             name: 'flex-post',
             className: listClass.flex,
           },
+          {
+            render: () => 'Cluster',
+            name: 'cluster',
+            className: 'w-[260px] flex',
+          },
           {
             render: () => 'Status',
             name: 'status',
@@ -258,55 +259,37 @@ const ListView = ({ items, onAction }: IResource) => {
             columns: {
               name: {
                 render: () => (
-                  <ListTitleV2
-                    title={name}
-                    subtitle={id}
-                    avatar={
-                      i.clusterName === '' ? (
-                        <ConsoleAvatar
-                          name={id}
-                          color="none"
-                          isAvatar
-                          icon={<EnvTemplateIconComponent size={20} />}
-                          className="border border-dashed !bg-surface-basic-subdued "
-                        />
-                      ) : (
-                        <ConsoleAvatar
-                          name={id}
-                          color="white"
-                          isAvatar
-                          icon={<EnvIconComponent size={20} />}
-                        />
-                      )
-                    }
-                  />
-                  // <div className="flex flex-row gap-md">
-                  //   <ListTitleV2
-                  //     title={name}
-                  //     subtitle={id}
-                  //     avatar={
-                  //       i.clusterName === '' ? (
-                  //         <ConsoleAvatar
-                  //           name={id}
-                  //           color="none"
-                  //           isAvatar
-                  //           icon={<EnvTemplateIconComponent size={20} />}
-                  //           className="border border-dashed !bg-surface-basic-subdued "
-                  //         />
-                  //       ) : (
-                  //         <ConsoleAvatar
-                  //           name={id}
-                  //           color="white"
-                  //           isAvatar
-                  //           icon={<EnvIconComponent size={20} />}
-                  //         />
-                  //       )
-                  //     }
-                  //   />
-                  //   {i.clusterName === '' && (
-                  //     <Chip item={{ name: 'template' }} label="Template" />
-                  //   )}
-                  // </div>
+                  <div className="flex flex-row gap-lg">
+                    <ListTitleV2
+                      title={name}
+                      subtitle={id}
+                      avatar={
+                        i.clusterName === '' ? (
+                          <ConsoleAvatar
+                            name={id}
+                            color="none"
+                            isAvatar
+                            icon={<EnvTemplateIconComponent size={20} />}
+                            className="border border-dashed !bg-surface-basic-subdued "
+                          />
+                        ) : (
+                          <ConsoleAvatar
+                            name={id}
+                            color="white"
+                            isAvatar
+                            icon={<EnvIconComponent size={20} />}
+                          />
+                        )
+                      }
+                    />
+                    {i.clusterName === '' && (
+                      <Chip
+                        item={{ name: 'template' }}
+                        label="Template"
+                        type="SM"
+                      />
+                    )}
+                  </div>
                 ),
               },
               cluster: {
diff --git a/src/design-system/components/atoms/chips.tsx b/src/design-system/components/atoms/chips.tsx
index 7177fb601..c8bb187fd 100644
--- a/src/design-system/components/atoms/chips.tsx
+++ b/src/design-system/components/atoms/chips.tsx
@@ -16,6 +16,7 @@ type ChipTypes =
   | 'BASIC'
   | 'REMOVABLE'
   | 'CLICKABLE'
+  | 'SM'
   | (string & NonNullable<unknown>);
 
 type ItemType = any;
@@ -58,9 +59,9 @@ const ChipBase = React.forwardRef<HTMLButtonElement, IChipBase>(
       label,
       disabled = false,
       compType = 'BASIC',
-      onRemove = (_) => {},
+      onRemove = (_) => { },
       prefix = null,
-      onClick = (_) => {},
+      onClick = (_) => { },
       Component,
       loading = false,
       ...mprops
@@ -100,6 +101,10 @@ const ChipBase = React.forwardRef<HTMLButtonElement, IChipBase>(
             'pr-md pl-lg py-md': compType === 'REMOVABLE',
             'px-lg py-md': compType !== 'REMOVABLE',
           },
+          {
+            'pr-md pl-md py-sm': compType === 'SM',
+            // 'px-lg py-md': compType !== 'SM',
+          },
           {
             'hover:bg-surface-basic-hovered active:bg-surface-basic-pressed focus-visible:ring-2 focus-visible:ring-border-focus':
               compType === 'CLICKABLE',
@@ -125,7 +130,15 @@ const ChipBase = React.forwardRef<HTMLButtonElement, IChipBase>(
             <Spinner size={12} color="currentColor" />
           </span>
         )}
-        <span className="flex items-center">{label}</span>
+        <span
+          className={
+            compType === 'SM'
+              ? 'flex items-center text-text-default'
+              : 'flex items-center'
+          }
+        >
+          {label}
+        </span>
         {compType === 'REMOVABLE' && (
           <RovingFocusGroup.Item asChild focusable>
             <button
@@ -218,8 +231,8 @@ export const Chip = forwardRef<HTMLButtonElement, IChip>(
 );
 
 export const ChipGroup = ({
-  onClick = (_) => {},
-  onRemove = (_) => {},
+  onClick = (_) => { },
+  onRemove = (_) => { },
   children,
   className = '',
 }: IChipGroup) => {