From d1200a90eca4b61ae13fdf7313e85cb6ad88be8e Mon Sep 17 00:00:00 2001
From: Lautaro Petaccio <1120791+LautaroPetaccio@users.noreply.github.com>
Date: Thu, 9 May 2024 16:16:58 -0300
Subject: [PATCH] fix: Make IconBadge boxed as default (#540)

* fix: Make IconBadge boxed as default

* fix: Inline logic

* fix: Fix height
---
 src/components/IconBadge/IconBadge.css      | 11 +++++++++--
 src/components/IconBadge/IconBadge.tsx      |  7 +++++--
 src/components/IconBadge/IconBadge.types.ts |  1 +
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/IconBadge/IconBadge.css b/src/components/IconBadge/IconBadge.css
index 003a0ba1..b68cc550 100644
--- a/src/components/IconBadge/IconBadge.css
+++ b/src/components/IconBadge/IconBadge.css
@@ -1,11 +1,18 @@
 .dui-icon-badge {
-  display: inline-flex;
   align-items: center;
   text-transform: uppercase;
   padding: 2px 8px;
   border-radius: 5px;
   background-color: #37333d;
-  min-height: 24px;
+  height: 24px;
+}
+
+.dui-icon-badge.inlined {
+  display: inline-flex;
+}
+
+.dui-icon-badge.boxed {
+  display: flex;
 }
 
 .dui-icon-badge.clickable {
diff --git a/src/components/IconBadge/IconBadge.tsx b/src/components/IconBadge/IconBadge.tsx
index dc2b2e10..2629454a 100644
--- a/src/components/IconBadge/IconBadge.tsx
+++ b/src/components/IconBadge/IconBadge.tsx
@@ -8,8 +8,10 @@ export const IconBadge = ({
   text,
   onClick,
   className,
-  children
+  children,
+  inline
 }: Props) => {
+  const inlined = inline ? 'inlined' : 'boxed'
   const childrenInt = React.useMemo(
     () => (
       <>
@@ -29,7 +31,8 @@ export const IconBadge = ({
       className={classNames(
         'dui-icon-badge',
         className,
-        onClick && 'clickable'
+        onClick && 'clickable',
+        inlined
       )}
       onClick={onClick}
     >
diff --git a/src/components/IconBadge/IconBadge.types.ts b/src/components/IconBadge/IconBadge.types.ts
index 1600f355..69f539bd 100644
--- a/src/components/IconBadge/IconBadge.types.ts
+++ b/src/components/IconBadge/IconBadge.types.ts
@@ -33,6 +33,7 @@ export type Props = {
     | 'places'
     | 'utility'
   text?: string
+  inline?: boolean
   onClick?: () => void
   children?: React.ReactNode
 }