@hyphen/hyphen-components 4.7.0 → 4.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "4.7.0",
+  "version": "4.7.1",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/Badge/Badge.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import React, { ReactNode, forwardRef } from 'react';
 import classNames from 'classnames';
 import { FontSize, BaseSpacing, ResponsiveProp } from '../../types';
 import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
@@ -42,29 +42,39 @@ export interface BadgeProps {
   [x: string]: any; // eslint-disable-line
 }
 
-export const Badge: FC<BadgeProps> = ({
-  className = '',
-  message = '',
-  variant = 'light-grey',
-  size = 'md',
-  ...restProps
-}) => {
-  const responsiveClasses = generateResponsiveClasses('size', size).map(
-    (c) => styles[c]
-  );
-
-  const badgeClasses: string = classNames(
-    styles.badge,
-    className,
-    responsiveClasses,
+export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
+  (
     {
-      [styles[variant]]: variant,
-    }
-  );
+      className = '',
+      message = '',
+      variant = 'light-grey',
+      size = 'md',
+      ...restProps
+    },
+    ref
+  ) => {
+    const responsiveClasses = generateResponsiveClasses('size', size).map(
+      (c) => styles[c]
+    );
+
+    const badgeClasses: string = classNames(
+      styles.badge,
+      className,
+      responsiveClasses,
+      {
+        [styles[variant]]: variant,
+      }
+    );
 
-  return (
-    <Box className={badgeClasses} display="inline-block" {...restProps}>
-      {message}
-    </Box>
-  );
-};
+    return (
+      <Box
+        ref={ref}
+        className={badgeClasses}
+        display="inline-block"
+        {...restProps}
+      >
+        {message}
+      </Box>
+    );
+  }
+);

package/src/components/Tooltip/Tooltip.mdx

@@ -16,8 +16,12 @@ This component is extended from [Radix](https://www.radix-ui.com/primitives/docs
 
 ## Basic Usage
 
-<Canvas of={Stories.BasicUsage} />
+<Canvas of={Stories.BasicUsage} sourceState="shown" />
 
 ## With Portal
 
-<Canvas of={Stories.WithPortal} />
+<Canvas of={Stories.WithPortal} sourceState="shown" />
+
+## Badge with Tooltip
+
+<Canvas of={Stories.BadgeTooltip}  sourceState="shown" />

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -8,6 +8,7 @@ import {
 } from './Tooltip';
 import type { Meta } from '@storybook/react';
 import { Button } from '../Button/Button';
+import { Badge } from '../Badge/Badge';
 
 const meta: Meta<typeof Tooltip> = {
   title: 'Components/Tooltip',
@@ -39,3 +40,16 @@ export const WithPortal = () => (
     </Tooltip>
   </TooltipProvider>
 );
+
+export const BadgeTooltip = () => (
+  <TooltipProvider delayDuration={100}>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Badge as="button" message="hover" variant="blue" />
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent>This is the tooltip content</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  </TooltipProvider>
+);

package/src/components/Tooltip/Tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={classNames(
-      'background-color-tooltip font-color-tooltip font-size-xs overflow-hidden br-sm p-h-sm p-v-xs shadow-sm ',
+      'background-color-tooltip font-color-tooltip font-size-xs z-index-popover overflow-hidden br-sm p-h-sm p-v-xs shadow-sm',
       className
     )}
     {...props}