@fibery/ui-kit 4.3.0 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @fibery/ui-kit
 
+## 6.0.0
+
+### Major Changes
+
+- 5d8dd40: Remove UnitWithTooltip — use Tooltip with title/description props and a plain wrapper element instead. Its hand-rolled hover tracking worked around a Safari mouseleave-on-scroll bug that no longer reproduces; unit tooltips now also open on keyboard focus. Tooltip's default content no longer renders empty title/description nodes when only one of the two is provided.
+
+### Minor Changes
+
+- b7f6df1: updated badge component added accent state
+
+## 5.0.0
+
+### Major Changes
+
+- de29bed: Remove NotificationDot — use Indicator instead: place it inside the host (or add the indicatorHost class to establish positioning) and pass `position`/`offset` instead of relying on hardcoded negative margins
+
+### Minor Changes
+
+- de29bed: Add Indicator component — a corner-anchored status dot with configurable color, ring, position and screen-reader label (extracted from the pinned filters overridden dot)
+- de29bed: ToggleButton border radius now scales with size: 8px for small (unchanged), 10px for medium and large
+
 ## 4.3.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "4.3.0",
+  "version": "6.0.0",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {

package/src/badge.tsx

@@ -6,7 +6,7 @@ import {space, textClasses, themeVars} from "./design-system";
 
 type Props = {
   children: ReactNode;
-  kind?: "success" | "error" | "default" | "warning";
+  kind?: "success" | "error" | "default" | "warning" | "accent";
 };
 
 export const Badge = forwardRef<HTMLSpanElement, Props>(({children, kind, ...otherProps}, ref) => {
@@ -39,6 +39,11 @@ export const Badge = forwardRef<HTMLSpanElement, Props>(({children, kind, ...oth
           css`
             color: ${themeVars.colorTextBadgeWarning};
             background: ${themeVars.colorBgBadgeWarning};
+          `,
+        kind === "accent" &&
+          css`
+            color: ${themeVars.colorTextBadgeAccent};
+            background: ${themeVars.colorBgBadgeAccent};
           `
       )}
     >

package/src/indicator.tsx

@@ -0,0 +1,87 @@
+import type {CSSProperties} from "@linaria/core";
+import {css, cx} from "@linaria/core";
+
+import {border, space, themeVars} from "./design-system";
+import {visuallyHidden} from "./styles-utils";
+
+/** Establishes the positioning context Indicator anchors to; apply to the host unless it is already positioned */
+export const indicatorHost = css`
+  position: relative;
+`;
+
+const indicatorColorVar = "--fibery-indicator-color";
+const indicatorRingColorVar = "--fibery-indicator-ring-color";
+const indicatorSizeVar = "--fibery-indicator-size";
+const indicatorOffsetVar = "--fibery-indicator-offset";
+
+const indicatorCss = css`
+  position: absolute;
+  width: var(${indicatorSizeVar});
+  height: var(${indicatorSizeVar});
+  border-radius: ${border.radiusFull};
+  background-color: var(${indicatorColorVar});
+  /* box-shadow instead of border so the ring doesn't take part in sizing */
+  box-shadow: 0 0 0 ${space.s2}px var(${indicatorRingColorVar}, transparent);
+  pointer-events: none;
+
+  &[data-position^="top"] {
+    top: var(${indicatorOffsetVar});
+  }
+
+  &[data-position^="bottom"] {
+    bottom: var(${indicatorOffsetVar});
+  }
+
+  &[data-position$="start"] {
+    left: var(${indicatorOffsetVar});
+  }
+
+  &[data-position$="end"] {
+    right: var(${indicatorOffsetVar});
+  }
+`;
+
+export type IndicatorProps = {
+  color?: string;
+  /** Cuts the dot out of the host with a 2px ring; must match the surface behind the host */
+  ringColor?: string;
+  /** Dot diameter in px; ringColor adds 2px around it */
+  size?: number;
+  /** Corner of the host to anchor to; the host must be positioned (apply indicatorHost if it is not) */
+  position?: "top-start" | "top-end" | "bottom-start" | "bottom-end";
+  /** Distance in px from the anchored edges; negative values push the dot outside the host */
+  offset?: number;
+  /** Announced by screen readers; without it the dot is hidden from assistive technology */
+  label?: string;
+} & Omit<React.ComponentProps<"div">, "children">;
+
+export const Indicator = ({
+  color = themeVars.active,
+  ringColor,
+  size = space.s6,
+  position = "top-end",
+  offset = 0,
+  label,
+  className,
+  style,
+  ...props
+}: IndicatorProps) => {
+  const vars: CSSProperties = {
+    [indicatorColorVar]: color,
+    [indicatorSizeVar]: `${size}px`,
+    [indicatorOffsetVar]: `${offset}px`,
+    ...(ringColor && {[indicatorRingColorVar]: ringColor}),
+  };
+
+  return (
+    <div
+      className={cx(className, indicatorCss)}
+      style={{...vars, ...style}}
+      data-position={position}
+      aria-hidden={label ? undefined : true}
+      {...props}
+    >
+      {label ? <span className={visuallyHidden}>{label}</span> : null}
+    </div>
+  );
+};

package/src/toggle-button/toggle-button.tsx

@@ -17,7 +17,6 @@ export const toggleButtonCss = css`
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  border-radius: ${border.radius8}px;
 
   transition-property: border, background-color, color, opacity, box-shadow;
   transition-duration: ${transitionDuration.fast};
@@ -45,6 +44,7 @@ export const toggleButtonCss = css`
     font-size: ${fontSize.xs}px;
     line-height: 16px;
     min-height: 24px;
+    border-radius: ${border.radius8}px;
 
     ${iconSizeVar}: 16px;
   }
@@ -53,6 +53,7 @@ export const toggleButtonCss = css`
     font-size: ${fontSize.sm}px;
     line-height: 20px;
     min-height: 28px;
+    border-radius: ${border.radius10}px;
 
     ${iconSizeVar}: 18px;
   }
@@ -62,6 +63,7 @@ export const toggleButtonCss = css`
     line-height: 20px;
     min-height: 32px;
     padding-inline: 7px;
+    border-radius: ${border.radius10}px;
 
     ${iconSizeVar}: 18px;
   }

package/src/tooltip.tsx

@@ -158,8 +158,8 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
       description,
       content = (title || description) && (
         <>
-          <TooltipTitle>{title}</TooltipTitle>
-          <TooltipDescription>{description}</TooltipDescription>
+          {title && <TooltipTitle>{title}</TooltipTitle>}
+          {description && <TooltipDescription>{description}</TooltipDescription>}
         </>
       ),
       side,

package/src/unit/index.tsx

@@ -27,7 +27,7 @@ export const BasicUnit = ({
     );
   }
 
-  const bgColor = props.bgColor || props.readOnly ? themeVars.inputDisabledBgColor : themeVars.transparent;
+  const bgColor = props.bgColor || (props.readOnly ? themeVars.inputDisabledBgColor : themeVars.transparent);
   return (
     <UnitPrimitive
       bgColor={bgColor}

package/src/unit/primitive.tsx

@@ -5,6 +5,7 @@ import type {ComponentProps} from "react";
 import {inputOverrides} from "../antd/styles";
 import {border, space, themeVars} from "../design-system";
 import {FieldIcon} from "../field-icon";
+import {Tooltip} from "../tooltip";
 import {useTruncated} from "../tooltip-if-overflown";
 import {
   basicUnitClassName,
@@ -25,7 +26,6 @@ import {
 import type {UnitPrimitiveProps} from "./types";
 import {UnitButtonGroup} from "./unit-button-group";
 import {UnitContent} from "./unit-content";
-import {UnitWithTooltip} from "./unit-with-tooltip";
 
 const resetButtonStylesClassName = css`
   all: unset;
@@ -179,9 +179,10 @@ export const UnitPrimitive = ({
 
   return (
     <div className={positionUnitClass}>
-      <UnitWithTooltip title={tooltipTitle} description={tooltipDescription}>
-        {contentWithHeader}
-      </UnitWithTooltip>
+      <Tooltip side="bottom" align="start" title={tooltipTitle} description={tooltipDescription}>
+        {/* The trigger needs a host element: the unit content root does not forward refs/handlers */}
+        <div>{contentWithHeader}</div>
+      </Tooltip>
     </div>
   );
 };

package/src/notification-dot.tsx

@@ -1,23 +0,0 @@
-import type {CSSProperties} from "react";
-
-import {themeVars} from "./design-system";
-import {Dot} from "./dot";
-
-type Props = {
-  big?: boolean;
-  color?: string;
-} & React.ComponentProps<"div">;
-
-export const NotificationDot = ({big = true, color = themeVars.active, style}: Props) => {
-  const marginTop = big ? -6 : -1;
-  const marginRight = big ? -1 : 0;
-  const styleObject = {
-    position: "absolute",
-    top: 0,
-    marginTop,
-    marginRight,
-    ...style,
-  } as CSSProperties;
-
-  return <Dot color={color} size={big ? "medium" : "small"} style={styleObject} />;
-};

package/src/unit/unit-with-tooltip.tsx

@@ -1,77 +0,0 @@
-import {css} from "@linaria/core";
-import {useRef, useState} from "react";
-
-import {space, tooltipDelay} from "../../src/design-system";
-import {Tooltip, TooltipDescription, TooltipTitle} from "../tooltip";
-
-const contentCss = css`
-  display: flex;
-  flex-direction: column;
-  gap: ${space.s4}px;
-`;
-
-type Props = {
-  children: React.ReactElement;
-  title: React.ReactNode;
-  description: React.ReactNode;
-  hidden?: boolean;
-};
-
-export const UnitWithTooltip = ({children, title, description, hidden}: Props) => {
-  const [shouldDisplayTooltip, setShouldDisplayTooltip] = useState(false);
-  const unitElementRef = useRef<HTMLDivElement>(null);
-  const isHoveredRef = useRef(false);
-  const checkHoveredStateTimeoutId = useRef<ReturnType<typeof setTimeout> | null>();
-
-  const onMouseEnter = () => {
-    isHoveredRef.current = true;
-
-    checkHoveredStateTimeoutId.current = setTimeout(() => {
-      checkHoveredStateTimeoutId.current = null;
-      // onMouseLeave works unreliably in Safari, IE on scroll
-      // Sometimes it was not fired leaving tooltip displayed
-      // Had to use additional way to validate if we are still over unit
-      if (isHoveredRef.current && unitElementRef.current && unitElementRef.current.matches(":hover")) {
-        setShouldDisplayTooltip(true);
-        const intervalId = window.setInterval(() => {
-          if (isHoveredRef.current && unitElementRef.current) {
-            if (!unitElementRef.current.matches(":hover")) {
-              isHoveredRef.current = false;
-              setShouldDisplayTooltip(false);
-              clearInterval(intervalId);
-            }
-          } else {
-            clearInterval(intervalId);
-          }
-        }, 250);
-      }
-    }, tooltipDelay.enter);
-  };
-
-  const onMouseLeave = () => {
-    isHoveredRef.current = false;
-    if (checkHoveredStateTimeoutId.current) {
-      clearTimeout(checkHoveredStateTimeoutId.current);
-      checkHoveredStateTimeoutId.current = null;
-    }
-    setShouldDisplayTooltip(false);
-  };
-
-  return (
-    <Tooltip
-      visible={!hidden && shouldDisplayTooltip}
-      content={
-        <div className={contentCss}>
-          <TooltipTitle>{title}</TooltipTitle>
-          {description && <TooltipDescription>{description}</TooltipDescription>}
-        </div>
-      }
-      side="bottom"
-      align="start"
-    >
-      <div ref={unitElementRef} onMouseDown={onMouseLeave} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-        {children}
-      </div>
-    </Tooltip>
-  );
-};