@fibery/ui-kit 1.36.1 → 1.37.0

package/src/type-badge.tsx

@@ -123,6 +123,9 @@ const clickableStyle = css`
 const fadedStyle = css`
   opacity: ${opacity.opacity25};
 `;
+const noColorStyle = css`
+  opacity: ${opacity.opacity60};
+`;
 
 export const makeDescription = (typeObject: {description?: string | null}): string | null => {
   return typeObject.description || null;
@@ -135,7 +138,7 @@ export const makeAbbreviation = (title = "") =>
     .join("");
 
 type TypeBadgeProps = {
-  color: string;
+  color: string | null;
   onMouseDown?: () => void;
   onMouseEnter?: React.MouseEventHandler;
   onMouseLeave?: React.MouseEventHandler;
@@ -189,25 +192,27 @@ export const TypeBadge = memo(
 
     const theme = useTheme();
 
+    const baseColor = color || theme.iconColor;
+
     const textBadgeColor = getThemeValue(theme.mode, {
-      dark: a11yColor(getTextColor(color), getDarkenColor(color), 12),
-      light: a11yColor(getTextColor(color), getDarkenColor(color), 12),
-      light2: a11yColor(getTextColor(color), getDarkenColor(color), 12),
+      dark: a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12),
+      light: a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12),
+      light2: a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12),
     });
 
     const backgroundBadgeColor = getThemeValue(theme.mode, {
-      dark: getDarkenColor(color),
-      light: color,
-      light2: color,
+      dark: getDarkenColor(baseColor),
+      light: baseColor,
+      light2: baseColor,
     });
 
     const style = {
-      [colorProp]: color ? textBadgeColor : colors.inversedTextColor,
-      //[colorProp]: color ? getTextColor(color) : colors.inversedTextColor,
+      [colorProp]: baseColor ? textBadgeColor : colors.inversedTextColor,
+      //[colorProp]: baseColor ? getTextColor(baseColor) : colors.inversedTextColor,
       [colorBackgroundProp]: backgroundBadgeColor || colors.shades.opacity25,
-      //[colorBackgroundProp]: color || colors.shades.opacity25,
+      //[colorBackgroundProp]: baseColor || colors.shades.opacity25,
       [colorBorderProp]: backgroundBadgeColor,
-      [colorDarkProp]: getDarkenColor(color),
+      [colorDarkProp]: getDarkenColor(baseColor),
     } as CSSProperties;
 
     return (
@@ -225,6 +230,7 @@ export const TypeBadge = memo(
             [selectedStyle]: selected,
             [clickableStyle]: onClick,
             [fadedStyle]: faded,
+            [noColorStyle]: color === null,
           },
           className
         )}
@@ -265,6 +271,7 @@ type TypeObjectBadgeParams = {
   selected?: boolean;
   faded?: boolean;
   tooltip?: boolean;
+  noColor?: boolean;
 };
 
 export const TypeObjectBadge = forwardRef<HTMLDivElement | HTMLButtonElement, TypeObjectBadgeParams>(
@@ -284,6 +291,7 @@ export const TypeObjectBadge = forwardRef<HTMLDivElement | HTMLButtonElement, Ty
       selected,
       faded,
       tooltip = true,
+      noColor,
     },
     ref
   ) => {
@@ -293,7 +301,7 @@ export const TypeObjectBadge = forwardRef<HTMLDivElement | HTMLButtonElement, Ty
     return (
       <TypeBadge
         ref={ref}
-        color={typeObject.color}
+        color={noColor ? null : typeObject.color}
         abbr={abbr}
         compact={compact}
         vertical={vertical}

package/src/unit/index.tsx

@@ -51,5 +51,13 @@ export const OptionUnit = (props: UnitPrimitiveProps) => {
 };
 
 export const HistoryUnit = (props: UnitPrimitiveProps & {size: CardSize}) => {
-  return <UnitPrimitive big={props.size === ":card-size/cell"} bgColor={themeVars.unitBg} border={false} {...props} />;
+  return (
+    <UnitPrimitive
+      big={props.size === ":card-size/cell"}
+      bgColor={themeVars.unitBg}
+      border={false}
+      tooltip={false}
+      {...props}
+    />
+  );
 };

package/src/unit/loading-unit-value.tsx

@@ -2,6 +2,7 @@ import {css} from "@linaria/core";
 import {LoadingSausage, LoadingSausageProps} from "../loading-sausage";
 
 export const unitTextHeight = 8;
+
 export const LoadingUnitValue = (props: LoadingSausageProps) => (
   <div
     className={css`

package/src/unit/maybe-unit-value.tsx

@@ -1,9 +1,9 @@
 import {LoadingUnitValue} from "./loading-unit-value";
 
-interface MaybeUnitValueProps {
+type Props = {
   value?: string;
-}
+};
 
-export const MaybeUnitValue: React.FC<MaybeUnitValueProps> = ({value}) => {
+export const MaybeUnitValue: React.FC<Props> = ({value}) => {
   return value === undefined ? <LoadingUnitValue minWidth={18} maxWidth={18} /> : <>{value}</>;
 };

package/src/unit/primitive.tsx

@@ -2,7 +2,7 @@ import {css} from "@linaria/core";
 import cx from "classnames";
 import {ComponentProps} from "react";
 import {inputOverrides} from "../antd/styles";
-import {border, themeVars} from "../design-system";
+import {border, space, themeVars} from "../design-system";
 import {
   basicUnitClassName,
   bigSizeUnitClassName,
@@ -14,16 +14,17 @@ import {
   positionUnitClass,
   regularSizeUnitClassName,
   regularSizeUnitMinWidthClassName,
-  textEllipsisClassName,
   unitDescriptionClassName,
+  unitMinHeightClassName,
   unitTitleClassName,
-  unitTooltipTitleClassName,
   unitWithTitleClassName,
 } from "./styles";
 import {UnitPrimitiveProps} from "./types";
 import {UnitButtonGroup} from "./unit-button-group";
 import {UnitContent} from "./unit-content";
 import {UnitWithTooltip} from "./unit-with-tooltip";
+import {FieldIcon} from "../field-icon";
+import {useTruncated} from "../tooltip-if-overflown";
 
 const resetButtonStylesClassName = css`
   all: unset;
@@ -62,6 +63,7 @@ export const UnitPrimitive = ({
   // Content
   children,
   title,
+  fieldIcon,
   description = null,
   hint = null,
   icons,
@@ -71,25 +73,32 @@ export const UnitPrimitive = ({
   tooltip = true,
   header = false,
   border = true,
+  color = themeVars.textColor,
   bgColor = themeVars.transparent,
+  fontWeight,
   shrinkable = true,
   clickable = border,
   setMinWidth = true,
+  setMinHeight = true,
   // Callback
   onClick,
   onKeyDown,
   invalid,
-  tooltipContent: tooltipChildren,
 }: UnitPrimitiveProps) => {
-  const cutTextInUnit = !multiline && overflow;
+  const {truncated, setNode} = useTruncated();
+
+  const truncate = !multiline && overflow;
   const unitWrapperStyle = {
+    color,
     backgroundColor: bgColor || themeVars.inputDisabledBgColor,
+    fontWeight,
   };
 
   const unitWrapperClassName = cx(
     basicUnitClassName,
     big ? bigSizeUnitClassName : regularSizeUnitClassName,
     setMinWidth && (big ? bigSizeUnitMinWidthClassName : regularSizeUnitMinWidthClassName),
+    setMinHeight && unitMinHeightClassName,
     border && borderClassName,
     invalid && invalidUnitClassName,
     clickable && clickableClassName
@@ -103,22 +112,18 @@ export const UnitPrimitive = ({
       inline={inline}
       style={unitWrapperStyle}
       className={unitWrapperClassName}
-      unitButton={
+      unit={
         <UnitContentComponent onKeyDown={onKeyDown} onClick={onClick}>
-          <UnitContent
-            big={big}
-            icons={icons}
-            children={children}
-            contentClassName={cx({[textEllipsisClassName]: cutTextInUnit})}
-            shrinkable={shrinkable}
-          />
+          <UnitContent big={big} icons={icons} shrinkable={shrinkable} truncate={truncate} setNode={setNode}>
+            {children}
+          </UnitContent>
         </UnitContentComponent>
       }
       navButton={navButton}
     />
   );
 
-  const contentWithTitle = header ? (
+  const contentWithHeader = header ? (
     <div className={unitWithTitleClassName}>
       <div className={unitTitleClassName}>{title}</div>
       {content}
@@ -127,41 +132,55 @@ export const UnitPrimitive = ({
     content
   );
 
-  if (tooltip) {
-    const tooltipContent = (
+  if (!tooltip) {
+    return <div className={positionUnitClass}>{contentWithHeader}</div>;
+  }
+
+  const tooltipTitle = (
+    <div
+      className={css`
+        display: flex;
+        align-items: center;
+        gap: ${space.s4}px;
+      `}
+    >
+      {fieldIcon && <FieldIcon iconName={fieldIcon} iconSize={14} color={themeVars.whiteColor} />}
+      {title}
+    </div>
+  );
+
+  const tooltipContent = truncated && (
+    <div className={fullUnitWrapperClassName}>
       <UnitButtonGroup
         big={big}
         inline={inline}
         style={unitWrapperStyle}
         className={unitWrapperClassName}
-        unitButton={
-          <UnitContentComponent onClick={onClick}>
+        unit={
+          <UnitContentComponent>
             <UnitContent big={big} icons={icons}>
-              {tooltipChildren || children}
+              {children}
             </UnitContent>
           </UnitContentComponent>
         }
       />
-    );
-    const renderedDescription = (
-      <div>
-        {description && <div className={unitDescriptionClassName}>{description}</div>}
-        <div className={fullUnitWrapperClassName}>{tooltipContent}</div>
-        {hint}
-      </div>
-    );
-
-    return (
-      <div className={positionUnitClass}>
-        <UnitWithTooltip
-          title={<div className={unitTooltipTitleClassName}>{title}</div>}
-          description={renderedDescription}
-        >
-          {contentWithTitle}
-        </UnitWithTooltip>
-      </div>
-    );
-  } else {
-    return <div className={positionUnitClass}>{contentWithTitle}</div>;
-  }
+    </div>
+  );
+
+  const hasDescription = description || tooltipContent || hint;
+  const tooltipDescription = hasDescription && (
+    <div>
+      {description && <div className={unitDescriptionClassName}>{description}</div>}
+      {tooltipContent}
+      {hint}
+    </div>
+  );
+
+  return (
+    <div className={positionUnitClass}>
+      <UnitWithTooltip title={tooltipTitle} description={tooltipDescription}>
+        {contentWithHeader}
+      </UnitWithTooltip>
+    </div>
+  );
 };

package/src/unit/styles.ts

@@ -42,16 +42,16 @@ export const regularSizeUnitMinWidthClassName = css`
   justify-content: center;
 `;
 
+export const unitMinHeightClassName = css`
+  min-height: ${space.s24}px;
+`;
+
 export const unitTitleClassName = css`
   ${textStyles.heading7}
   padding-bottom: ${space.s2}px;
   padding-top: ${space.s6}px;
 `;
 
-export const unitTooltipTitleClassName = css`
-  margin-bottom: ${space.s4}px;
-`;
-
 export const unitWithTitleClassName = css`
   display: flex;
   flex-direction: column;
@@ -64,6 +64,10 @@ export const unitWithTitleClassName = css`
 export const invalidUnitClassName = css``;
 export const invalidUnitClassNameInForm = css``;
 
+export const clickableClassName = css`
+  cursor: pointer;
+`;
+
 export const borderClassName = css`
   position: relative;
 
@@ -84,11 +88,11 @@ export const borderClassName = css`
     pointer-events: none;
   }
 
-  &:hover::before {
+  &.${clickableClassName}:hover::before {
     box-shadow: ${themeVars.inputBorderHoverColor} inset;
   }
 
-  &:focus::before {
+  &.${clickableClassName}:focus::before {
     box-shadow: ${themeVars.inputBorderFocusColor} inset;
   }
 
@@ -106,12 +110,12 @@ export const borderClassName = css`
       border: 1px solid ${themeVars.colorBorderButtonOutlineAccentDefault};
     }
 
-    &:hover::before {
+    &.${clickableClassName}:hover::before {
       box-shadow: none;
       border: 1px solid ${themeVars.colorBorderReactionsSelectedHover};
     }
 
-    &:focus::before {
+    &.${clickableClassName}:focus::before {
       box-shadow: ${themeVars.inputBorderFocusColor} inset;
       border: none;
     }
@@ -132,10 +136,6 @@ export const borderClassName = css`
   }
 `;
 
-export const clickableClassName = css`
-  cursor: pointer;
-`;
-
 export const basicUnitContentClassName = css`
   padding-left: ${space.s4}px;
   padding-right: ${space.s4}px;

package/src/unit/types.ts

@@ -10,6 +10,7 @@ export type UnitPrimitiveProps = {
   // Content
   children?: ReactNode;
   title?: string;
+  fieldIcon?: string;
   description?: ReactNode;
   icons?: React.ReactNodeArray;
   hint?: ReactNode;
@@ -19,13 +20,15 @@ export type UnitPrimitiveProps = {
   tooltip?: boolean;
   header?: boolean;
   border?: boolean;
-  bgColor?: string | null | undefined;
+  color?: string;
+  bgColor?: string | null;
+  fontWeight?: number;
   shrinkable?: boolean;
   clickable?: boolean;
   setMinWidth?: boolean;
+  setMinHeight?: boolean;
   // Callbacks
   onKeyDown?: (e: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void;
   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
   invalid?: boolean;
-  tooltipContent?: ReactNode;
 };

package/src/unit/unit-button-group.tsx

@@ -3,21 +3,16 @@ import {space} from "../design-system";
 import {IconButtonProps} from "../button/icon-button";
 import {getHeight} from "./unit-content-layout";
 
-export const UnitButtonGroup = ({
-  big,
-  inline,
-  style,
-  className,
-  unitButton,
-  navButton,
-}: {
+type Props = {
   big: boolean;
   inline: boolean;
   style: React.CSSProperties;
   className: string;
-  unitButton?: ReactNode;
+  unit?: ReactNode;
   navButton?: ReactNode;
-}) => {
+};
+
+export const UnitButtonGroup = ({big, inline, style, className, unit, navButton}: Props) => {
   const navButtonNode = navButton && (Children.only(navButton) as React.ReactElement<IconButtonProps>);
   const navButtonSize = getHeight(big) + 2 * space.s2;
   return (
@@ -28,7 +23,7 @@ export const UnitButtonGroup = ({
       }}
       className={className}
     >
-      {unitButton}
+      {unit}
       {navButtonNode &&
         cloneElement(navButtonNode, {
           style: {...navButtonNode.props.style, width: navButtonSize, height: navButtonSize},

package/src/unit/unit-content.tsx

@@ -1,4 +1,9 @@
-import {alignCenterClassName, basicUnitContentClassName, unitContentContainerClassName} from "./styles";
+import {
+  alignCenterClassName,
+  basicUnitContentClassName,
+  textEllipsisClassName,
+  unitContentContainerClassName,
+} from "./styles";
 import {ReactNode} from "react";
 import {cx} from "@linaria/core";
 import {UnitContentLayout} from "./unit-content-layout";
@@ -6,12 +11,13 @@ import {UnitContentLayout} from "./unit-content-layout";
 type Props = {
   big: boolean;
   icons?: React.ReactNodeArray;
-  children?: ReactNode;
-  contentClassName?: string;
   shrinkable?: boolean;
+  truncate?: boolean;
+  setNode?: (element: HTMLElement | null) => void;
+  children?: ReactNode;
 };
 
-export const UnitContent = ({big, icons, children, contentClassName, shrinkable}: Props) => {
+export const UnitContent = ({big, icons, shrinkable, truncate, setNode, children}: Props) => {
   return (
     <UnitContentLayout
       big={big}
@@ -29,7 +35,9 @@ export const UnitContent = ({big, icons, children, contentClassName, shrinkable}
 
       {children && (
         <div className={unitContentContainerClassName}>
-          <div className={cx(basicUnitContentClassName, contentClassName)}>{children}</div>
+          <div ref={setNode} className={cx(basicUnitContentClassName, truncate && textEllipsisClassName)}>
+            {children}
+          </div>
         </div>
       )}
     </UnitContentLayout>

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

@@ -1,6 +1,11 @@
 import {unitTitleClassName, unitWithTitleClassName} from "./styles";
 
-export const UnitWithTitle = ({children, title}: {title: React.ReactNode; children: React.ReactElement}) => (
+type Props = {
+  title: React.ReactNode;
+  children: React.ReactElement;
+};
+
+export const UnitWithTitle = ({children, title}: Props) => (
   <div className={unitWithTitleClassName}>
     <div className={unitTitleClassName}>{title}</div>
     {children}

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

@@ -1,16 +1,21 @@
-import {tooltipDelay} from "../../src/design-system";
-import {Tooltip} from "../tooltip";
+import {space, tooltipDelay} from "../../src/design-system";
+import {Tooltip, TooltipDescription, TooltipTitle} from "../tooltip";
 import {useRef, useState} from "react";
+import {css} from "@linaria/core";
 
-export const UnitWithTooltip = ({
-  children,
-  title,
-  description,
-}: {
+const contentCss = css`
+  display: flex;
+  flex-direction: column;
+  gap: ${space.s4}px;
+`;
+
+type Props = {
   children: React.ReactElement;
   title: React.ReactNode;
   description: React.ReactNode;
-}) => {
+};
+
+export const UnitWithTooltip = ({children, title, description}: Props) => {
   const [shouldDisplayTooltip, setShouldDisplayTooltip] = useState(false);
   const unitElementRef = useRef<HTMLDivElement>(null);
   const isHoveredRef = useRef(false);
@@ -51,7 +56,17 @@ export const UnitWithTooltip = ({
   };
 
   return (
-    <Tooltip visible={shouldDisplayTooltip} title={title} description={description} side="bottom" align="start">
+    <Tooltip
+      visible={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>

package/src/use-is-phone.tsx

@@ -0,0 +1,12 @@
+import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
+import {createContext} from "@fibery/react/src/create-context";
+import {ReactNode} from "react";
+
+const [Provider, useIsPhone] = createContext<boolean>("PhoneContext", false);
+
+export {useIsPhone};
+
+export function IsPhoneProvider({children}: {children: ReactNode}) {
+  const isPhone = useIsMediaQueryMatched("(max-width: 440px), (max-height: 440px)");
+  return <Provider value={isPhone}>{children}</Provider>;
+}

package/src/workflow-progress-icon.tsx

@@ -22,7 +22,7 @@ export const WorkflowProgressIcon: FC<WorkflowProgressIcon> = ({
   fillProgress = themeVars.progressIconFill,
   fillBackground = themeVars.progressIconBg,
   isDone,
-  doneStrokeColor = themeVars.whiteColor,
+  doneStrokeColor = themeVars.pageContentBg,
   doneFillColor = themeVars.progressIconFill,
 }) => {
   return (

package/src/number-input/text-area-with-autosize.tsx

@@ -1,91 +0,0 @@
-import {CSSProperties, useCallback, useRef} from "react";
-import {stopPropagation} from "@fibery/react/src/stop-propagation";
-import {hiddenCss, inputCss, textAreaCss} from "./styles";
-import {css, cx} from "@linaria/core";
-import {Stack} from "./stack";
-import {invalidInputClass} from "./edit-unit-styles";
-
-export const TextAreaWithAutosize = ({
-  value,
-  onFocus,
-  onBlur,
-  onChange,
-  onKeyDown,
-  autoFocus,
-  placeholder,
-  invalid,
-  ...rest
-}: {
-  value: string | null;
-  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-  onChange: (value: string | number) => void;
-  placeholder: string;
-  autoFocus: boolean;
-  style?: CSSProperties;
-  width?: number;
-  invalid?: boolean;
-}) => {
-  const handleFocus: React.FocusEventHandler<HTMLTextAreaElement> = useCallback(
-    (e) => {
-      if (onFocus) {
-        onFocus(e);
-      }
-    },
-    [onFocus]
-  );
-
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const initialValue = useRef(value);
-
-  const handleBlur: React.FocusEventHandler<HTMLTextAreaElement> = useCallback(
-    (e) => {
-      if (onBlur) {
-        onBlur(e);
-      }
-    },
-    [onBlur]
-  );
-
-  const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(
-    (e) => {
-      if (onChange) {
-        onChange(e.target.value);
-      }
-    },
-    [onChange]
-  );
-
-  return (
-    <Stack
-      className={css`
-        width: 100%;
-      `}
-      bottom={
-        <div className={cx(inputCss, textAreaCss, hiddenCss)}>
-          {value === null || value === "" || initialValue.current === null || initialValue.current === ""
-            ? placeholder
-            : value}
-        </div>
-      }
-      top={
-        <textarea
-          // Allow textarea to shrink to 1 row if there is only 1 row (otherwise it has min 2 by default)
-          rows={1}
-          autoFocus={autoFocus}
-          ref={inputRef}
-          value={value || ""}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onKeyDown={onKeyDown}
-          placeholder={placeholder}
-          onClick={stopPropagation}
-          {...rest}
-          className={cx(inputCss, textAreaCss, invalid && invalidInputClass)}
-        />
-      }
-    />
-  );
-};