v1.11.9

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## 1.11.9
 - Allow empty `options` object for `ListBox`
+- Rename `dismiss-button` class in `Drawer` to be more specific to avoid clashes
+- `Badge` now accepts children other than just text
 
 ## 1.11.8
 - Add select all and clear all methods for  `OptionCardsGroup`

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fictoan-react",
-    "version": "1.11.9-alpha.12",
+    "version": "1.11.9",
     "private": false,
     "description": "A full-featured, designer-friendly, yet performant framework with plain-English props and focus on rapid iteration.",
     "repository": {

src/components/Badge/Badge.tsx

@@ -65,15 +65,16 @@ export const Badge = React.forwardRef(
                 aria-label={label || (typeof children === "string" ? children : undefined)}
                 {...props}
             >
-                <Text>{children}</Text>
+                {children}
+
                 {withDelete && (
                     <Text
-                        className="dismiss-button"
+                        className="badge-dismiss-button"
                         onClick={handleDelete}
                         onKeyDown={handleKeyPress}
                         role="button"
                         tabIndex={0}
-                        aria-label={`Remove ${label || children}`}
+                        aria-label={`Remove badge`}
                     >
                         &times;
                     </Text>

src/components/Badge/badge.css

@@ -26,13 +26,14 @@
     &[class*="border-"] { border-width : var(--badge-border-width); }
     &.border-none { border-width : 0 !important; }
 
-    & .dismiss-button {
+    & .badge-dismiss-button {
+        position    : relative;
         margin-left : 8px;
-        font-size   : 18px;
+        font-size   : 1.6rem;
         cursor      : pointer;
         line-height : 1;
         top         : -1px;
-        position    : relative;
+        font-weight : 400;
 
         &:hover {
             transform  : scale(1.1);

src/components/Drawer/Drawer.tsx

@@ -46,13 +46,15 @@ export const Drawer = React.forwardRef(
             showOverlay = false,
             label,
             ...props
-        }: DrawerProps,
-        ref: React.Ref<DrawerElementType>
+        } : DrawerProps,
+        ref : React.Ref<DrawerElementType>,
     ) => {
         const [shouldRender, setShouldRender] = useState(openWhen);
 
         const drawerRef = useRef(null);
-        const effectiveRef = (ref || drawerRef) as RefObject<HTMLDivElement>;
+        const effectiveRef = (
+            ref || drawerRef
+        ) as RefObject<HTMLDivElement>;
 
         useEffect(() => {
             if (openWhen) {
@@ -84,10 +86,11 @@ export const Drawer = React.forwardRef(
 
         const closeDrawer = () => closeWhen?.();
 
-        useClickOutside(effectiveRef, closeOnClickOutside ? closeDrawer : () => {});
+        useClickOutside(effectiveRef, closeOnClickOutside ? closeDrawer : () => {
+        });
 
-        const handleKeyDown = (e: React.KeyboardEvent) => {
-            if (e.key === 'Escape' && isDismissible) {
+        const handleKeyDown = (e : React.KeyboardEvent) => {
+            if (e.key === "Escape" && isDismissible) {
                 closeDrawer();
             }
         };
@@ -105,7 +108,9 @@ export const Drawer = React.forwardRef(
                     aria-modal="true"
                     aria-label={label || "Drawer"}
                     tabIndex={-1}
-                    {...(closeOnClickOutside ? { onClick: closeDrawer } : {})}
+                    {...(
+                        closeOnClickOutside ? { onClick : closeDrawer } : {}
+                    )}
                     {...props}
                 >
                     {openWhen && showOverlay && (
@@ -125,7 +130,7 @@ export const Drawer = React.forwardRef(
                     >
                         {isDismissible && (
                             <button
-                                className="dismiss-button"
+                                className="drawer-dismiss-button"
                                 onClick={closeDrawer}
                                 aria-label="Close drawer"
                                 tabIndex={0}
@@ -136,5 +141,5 @@ export const Drawer = React.forwardRef(
                 </Element>
             </>
         ) : null;
-    }
+    },
 );

src/components/Drawer/drawer.css

@@ -117,7 +117,7 @@
     &.open.bottom .drawer-content-wrapper { transform : translateX(0); }
 
     /* DISMISS BUTTON ======================================================= */
-    & .dismiss-button {
+    & .drawer-dismiss-button {
         position         : absolute;
         display          : flex;
         width            : 32px;
@@ -149,22 +149,22 @@
         }
     }
 
-    &.top .dismiss-button {
+    &.top .drawer-dismiss-button {
         bottom : -36px;
         right  : 24px;
     }
 
-    &.bottom .dismiss-button {
+    &.bottom .drawer-dismiss-button {
         top   : -36px;
         right : 24px;
     }
 
-    &.left .dismiss-button {
+    &.left .drawer-dismiss-button {
         top   : 24px;
         right : -36px;
     }
 
-    &.right .dismiss-button {
+    &.right .drawer-dismiss-button {
         top  : 24px;
         left : -36px;
     }

src/components/Form/Range/Range.tsx

@@ -2,7 +2,6 @@
 import React from "react";
 
 // FICTOAN =============================================================================================================
-import { Element } from "../../Element/Element";
 import { Div } from "../../Element/Tags";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent";
 import { InputLabel } from "../InputLabel/InputLabel";
@@ -27,13 +26,13 @@ export type RangeElementType = HTMLInputElement;
 export type RangeProps = Omit<CommonAndHTMLProps<RangeElementType>, "onChange"> & InputCommonProps & RangeCustomProps;
 
 // COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////
-export const Range = React.forwardRef(({ label, value, suffix, onChange, ...props }: RangeProps,
-     ref: React.Ref<RangeElementType>
+export const Range = React.forwardRef(({ label, value, suffix, onChange, ...props } : RangeProps,
+        ref : React.Ref<RangeElementType>,
     ) => {
-    const handleChange = (value: string) => {
-        // Convert the string to a number and call our number handler
-        onChange?.(parseFloat(value));
-    };
+        const handleChange = (value : string) => {
+            // Convert the string to a number and call our number handler
+            onChange?.(parseFloat(value));
+        };
 
         return (
             <BaseInputComponent<RangeElementType>
@@ -53,4 +52,5 @@ export const Range = React.forwardRef(({ label, value, suffix, onChange, ...prop
                 {...props}
             />
         );
-    });
+    },
+);