feat: added floating badge functionality (#81)

* feat: added badge attached functionality

* chore: improve positioning & badge

* chore: added attached parent styles in theme file

* chore: improved positioning

* chore: added support for empty dot in attached mode

* chore: removed empty string fallback

* chore: rename isAttached to floating

* chore: jsdoc comments

* refactor: added merge ref hook & review updates

Author: anuraghazra

src/badge/Badge.tsx

@@ -4,6 +4,7 @@ import { cx } from "@renderlesskit/react";
 import { useTheme } from "../theme";
 import { Box, BoxProps } from "../box";
 import { forwardRefWithAs } from "../utils/types";
+import { useMergeRefs } from "../hooks/useMergeRefs";
 
 export type BadgeProps = BoxProps & {
   /**
@@ -18,21 +19,64 @@ export type BadgeProps = BoxProps & {
    * @default "primary"
    */
   variant?: keyof Renderlesskit.GetThemeValue<"badge", "variant">;
+  /**
+   * floats the badge on parent element's corners
+   *
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * floating position
+   *
+   * @default "top-right"
+   */
+  position?: keyof Renderlesskit.GetThemeValue<"badge", "position">;
 };
 
 export const Badge = forwardRefWithAs<BadgeProps, HTMLSpanElement, "span">(
   (props, ref) => {
-    const { variant = "primary", size = "md", className, ...rest } = props;
+    const htmlref = React.useRef<HTMLSpanElement>();
+    const {
+      position = "top-right",
+      variant = "primary",
+      size = "md",
+      floating = false,
+      className,
+      ...rest
+    } = props;
 
     const theme = useTheme();
     const badgeStyles = cx(
       theme.badge.base,
       theme.badge.size[size],
       theme.badge.variant[variant],
+      floating
+        ? cx(
+            theme.badge.attached,
+            theme.badge.position[position],
+            !props.children ? theme.badge.dot[size] : "",
+          )
+        : "",
       className,
     );
 
-    return <Box as="span" ref={ref} className={badgeStyles} {...rest} />;
+    React.useEffect(() => {
+      if (!floating) return;
+      if (htmlref && htmlref.current) {
+        const parentElement = htmlref.current?.parentElement;
+        parentElement!.classList.add(theme.badge.attachedParent);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+      <Box
+        as="span"
+        ref={useMergeRefs(htmlref, ref)}
+        className={badgeStyles}
+        {...rest}
+      />
+    );
   },
 );
 

src/badge/stories/Badge.stories.tsx

@@ -2,17 +2,27 @@ import React from "react";
 import { Meta } from "@storybook/react/types-6-0";
 
 import {
-  createControls,
   storyTemplate,
+  createUnionControl,
 } from "../../../.storybook/storybookUtils";
+
+import { Button } from "../../button";
 import { Badge, BadgeProps } from "../Badge";
 
 export default {
   title: "Badge",
   component: Badge,
-  argTypes: createControls("badge", {
-    unions: ["size", "variant"],
-  }),
+  argTypes: {
+    size: createUnionControl(["sm", "md", "lg"]),
+    variant: createUnionControl(["primary", "secondary", "outline", "ghosts"]),
+    position: createUnionControl([
+      "top-left",
+      "top-right",
+      "bottom-left",
+      "bottom-right",
+    ]),
+    floating: { control: "boolean" },
+  },
 } as Meta;
 
 const base = storyTemplate<BadgeProps>(
@@ -35,3 +45,23 @@ export const Secondary = base({ variant: "secondary" });
 export const Outline = base({ variant: "outline" });
 
 export const Ghost = base({ variant: "ghost" });
+
+const floating = storyTemplate<BadgeProps & { badgeValue?: string }>(
+  args => {
+    return (
+      <Button variant="outline">
+        Hello world
+        <Badge {...args}>{args.badgeValue}</Badge>
+      </Button>
+    );
+  },
+  {
+    variant: "primary",
+    position: "top-right",
+    floating: true,
+    size: "sm",
+    badgeValue: "22",
+  },
+);
+
+export const Floating = floating({});

src/hooks/useMergeRefs.ts

@@ -0,0 +1,45 @@
+// credits to: https://github.com/chakra-ui/chakra-ui/blob/main/packages/hooks/src/use-merge-refs.ts
+/* eslint-disable react-hooks/exhaustive-deps */
+import * as React from "react";
+
+type ReactRef<T> = React.Ref<T> | React.MutableRefObject<T>;
+
+export function assignRef<T = any>(ref: ReactRef<T> | undefined, value: T) {
+  if (ref == null) return;
+
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+
+  try {
+    // @ts-ignore
+    ref.current = value;
+  } catch (error) {
+    throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
+  }
+}
+
+/**
+ * React hook that merges react refs into a single memoized function
+ * @example
+ * import React from "react";
+ * import { useMergeRefs } from `@chakra-ui/hooks`;
+ *
+ * const Component = React.forwardRef((props, ref) => {
+ *   const internalRef = React.useRef();
+ *   return <div {...props} ref={useMergeRefs(internalRef, ref)} />;
+ * });
+ */
+export function useMergeRefs<T>(...refs: (ReactRef<T> | undefined)[]) {
+  return React.useMemo(() => {
+    if (refs.every(ref => ref == null)) {
+      return null;
+    }
+    return (node: T) => {
+      refs.forEach(ref => {
+        if (ref) assignRef(ref, node);
+      });
+    };
+  }, refs);
+}

src/theme/defaultTheme/badge.ts

@@ -1,6 +1,21 @@
 export const badge = {
   base:
     "lib:inline-block lib:whitespace-nowrap lib:align-middle lib:rounded-full lib:transition-all",
+  attached: "absolute",
+  attachedParent: "relative",
+  position: {
+    "top-right": "-top-0 -right-0 transform translate-x-1/2 -translate-y-1/2",
+    "top-left": "-top-0 -left-0 transform -translate-x-1/2 -translate-y-1/2",
+    "bottom-right":
+      "-bottom-0 -right-0 transform translate-x-1/2 translate-y-1/2",
+    "bottom-left":
+      "-bottom-0 -left-0 transform -translate-x-1/2 translate-y-1/2",
+  },
+  dot: {
+    sm: "py-1.5",
+    md: "py-2",
+    lg: "py-2",
+  },
   size: {
     sm: "lib:px-1.5 lib:text-xs lib:font-medium",
     md: "lib:px-2 lib:text-sm lib:font-medium",
@@ -9,7 +24,7 @@ export const badge = {
   variant: {
     primary: "lib:bg-gray-800 lib:text-white",
     secondary: "lib:bg-gray-100 lib:text-gray-800",
-    outline: "lib:text-gray-800 lib:border lib:border-gray-300",
+    outline: "lib:text-gray-800 lib:border lib:border-gray-300 lib:bg-white",
     ghost: "lib:text-gray-800 lib:hover:bg-gray-100",
   },
 };