fix: Make IconBadge boxed as default (#540)

* fix: Make IconBadge boxed as default * fix: Inline logic * fix: Fix height
decentraland · May 9, 2024 · d1200a9 · d1200a9
1 parent d02ed50
commit d1200a9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git 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
@@ -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
@@ -33,6 +33,7 @@ export type Props = {
     | 'places'
     | 'utility'
   text?: string
+  inline?: boolean
   onClick?: () => void
   children?: React.ReactNode
 }