Merge pull request #129 from fictoan/badge-fix

v1.8.3
fictoan · Nov 24, 2024 · 6b855aa · 6b855aa
2 parents 97211fb + bf9fd1b
commit 6b855aa
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## 1.8.3
+- Add default styles for `Badge`
+
 ## 1.8.1
 #### ⚠️ BREAKING CHANGES ⚠️
 - Remove `SidebarItemIcon` and `SidebarItemText` components to simplify markup

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "fictoan-react",
-    "version": "1.8.1",
+    "version": "1.8.3",
     "private": false,
     "description": "",
     "type": "module",

diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -70,7 +70,7 @@ export const Badge = React.forwardRef(
                     <Text
                         className="dismiss-button"
                         onClick={handleDelete}
-                        onKeyPress={handleKeyPress}
+                        onKeyDown={handleKeyPress}
                         role="button"
                         tabIndex={0}
                         aria-label={`Remove ${label || children}`}

diff --git a/src/components/Badge/badge.css b/src/components/Badge/badge.css
@@ -12,6 +12,10 @@
     height              : fit-content;
     display             : flex;
     align-items         : center;
+    background-color    : var(--badge-bg);
+    color               : var(--badge-text);
+    border-color        : var(--badge-border);
+    border-style        : solid;
 
     /* To make sure a badge’s children don’t style themselves like a d-bag*/
     > * { all : unset; }
@@ -36,7 +40,7 @@
         }
 
         &:active {
-            transform  : scale(0.9);
+            transform : scale(0.9);
         }
     }
 

diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -18,11 +18,12 @@
 /* BADGE //////////////////////////////////////////////////////////////////// */
 :root {
     --badge-font          : var(--paragraph-font);
+    --badge-bg            : var(--blue-light60);
+    --badge-text          : var(--blue-dark20);
+
+    --badge-border        : var(--blue);
     --badge-border-radius : var(--global-border-radius);
     --badge-border-width  : var(--global-border-width);
-
-    --badge-bg-default    : var(--blue-light60);
-    --badge-text-default  : var(--blue-dark20);
 }
 
 /* BODY ///////////////////////////////////////////////////////////////////// */