@fibery/ui-kit 1.37.0 → 1.38.1

package/src/avatar.tsx

@@ -5,33 +5,7 @@ import {getDarkenColor, getObjectColorMemoized, textStyles, themeVars} from "./d
 import {FibermojiPlaceholder} from "./fibermoji-placeholder";
 import {getShiftStyle} from "./icons/get-shift-style";
 import {useFeatures} from "./features";
-
-const preservedNameEmojis = ["🤖", "👻", "🧮", "🪄", "🔌", "🔗", "🔒"];
-
-export const abbreviateName = (name?: string) => {
-  if (name === undefined) {
-    return "…";
-  }
-  if (preservedNameEmojis.includes(name)) {
-    return name;
-  }
-  const filteredName = (name || "").replace(/[!~.\-@[\]]/g, "").trim();
-  const match = filteredName.match(/\p{Letter}[\p{Letter} ]+/gu);
-  const processedName = match ? match[0] : "";
-  const parts = processedName.split(" ").filter((part) => part !== "");
-  let result;
-  if (parts.length === 1) {
-    result = processedName.slice(0, 2);
-  } else {
-    result = parts
-      .filter((part, index) => index < 2)
-      .map((part) => {
-        return part[0].toUpperCase();
-      })
-      .join("");
-  }
-  return result || "?";
-};
+import {abbreviateName} from "./abbreviate-name";
 
 export const getContainerStyle = _.memoize((containerSize) => {
   return {

package/src/axis-header.tsx

@@ -1,24 +1,8 @@
 import {css} from "@linaria/core";
-import {styled} from "@linaria/react";
-import cn from "classnames";
+import {default as cn, default as cx} from "classnames";
 import {FC, ReactNode} from "react";
-import {getThemeValue, layout, opacity, border, space, textStyles, themeVars} from "./design-system";
-import {useTheme} from "./theme-provider";
-
-const axisItemStyle = css`
-  ${{
-    display: "grid",
-    gridGap: space.s6,
-    minHeight: layout.itemHeight,
-    alignItems: "center",
-    paddingLeft: space.s8,
-    paddingRight: space.s8,
-    borderRadius: border.radius6,
-    width: "100%",
-    ...textStyles.heading5,
-  }}
-`;
-
+import {CountBadge} from "./count-badge";
+import {border, opacity, space, textStyles, themeVars} from "./design-system";
 const axisItemStyleX = css`
   grid-template-columns: auto 1fr auto;
 `;
@@ -31,11 +15,23 @@ const axisItemHighlightedStyle = css`
 
 const dimensionToItemStyle = {x: axisItemStyleX, y: axisItemStyleY};
 
+const wrapperStyle = css`
+  ${textStyles.regular};
+  display: grid;
+  width: 100%;
+  grid-template-columns: 1fr auto;
+  gap: ${space.s6}px;
+  padding: ${space.s6}px;
+`;
+
 const axisItemStyleCollapsed = css`
-  ${{
-    paddingRight: 0,
-    width: `${layout.itemHeight + space.s8 * 2}px`,
-  }}
+  writing-mode: vertical-rl;
+  display: flex;
+  position: sticky;
+  top: 0;
+  &.${wrapperStyle} {
+    padding-block: 0;
+  }
 `;
 
 function getAdditionalClassName({
@@ -56,33 +52,61 @@ function getAdditionalClassName({
   return dimensionToItemStyle[dimension];
 }
 
-const mainContainerWrapperStyle = {
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-  cursor: "pointer",
-  textOverflow: "ellipsis",
-  opacity: 1,
-};
-const mainContainerWrapperClassName = css`
-  ${mainContainerWrapperStyle}
+const mainContainerWrapperStyle = css`
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+  text-overflow: ellipsis;
+  opacity: 1;
 `;
 
-const mainContainerWrapperCollapsedClassName = css`
-  ${{
-    ...mainContainerWrapperStyle,
-    textOverflow: "ellipsis",
-    opacity: opacity.opacity40,
-  }}
+const mainContainerWrapperCollapsedClassName = cx(
+  mainContainerWrapperStyle,
+  css`
+    opacity: ${opacity.opacity40};
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: ${space.s12}px;
+  `
+);
+
+const collapsedTextStyle = css`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex-shrink: 1;
 `;
 
 const leftContainerWrapperStyle = css`
   cursor: pointer;
 `;
 
-const StyledDiv = styled.div<{backgroundColor?: string}>`
+export const leftMainContainerWrapperStyle = css``;
+
+export const axisHeaderClassName = css`
+  cursor: pointer;
+  min-height: ${space.s36}px;
   display: flex;
+  justify-content: center;
   flex-direction: column;
-  background-color: ${({backgroundColor = "transparent"}) => backgroundColor};
+  border-radius: ${border.radius6}px;
+  .right-container {
+    opacity: 0;
+  }
+  background-color: var(--board-bg, ${themeVars.boardBg});
+  &:hover {
+    background-color: ${themeVars.boardAxisBgHover};
+    z-index: 20;
+    & .${leftMainContainerWrapperStyle} {
+      background-color: transparent;
+    }
+    .right-container {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
 `;
 
 interface AxisHeaderProps {
@@ -90,12 +114,12 @@ interface AxisHeaderProps {
   dimension: "x" | "y";
   collapsed?: boolean;
   highlighted?: boolean;
-  showLeftContainerWhenCollapsed?: boolean;
   bottomContainer?: ReactNode;
   leftContainer?: ReactNode;
   rightContainer?: ReactNode;
   children: ReactNode;
   onCollapse?: () => void;
+  count?: number;
 }
 
 export const AxisHeader: FC<AxisHeaderProps> = ({
@@ -107,54 +131,90 @@ export const AxisHeader: FC<AxisHeaderProps> = ({
   bottomContainer,
   collapsed,
   highlighted,
-  showLeftContainerWhenCollapsed,
   onCollapse,
+  count,
 }) => {
-  const theme = useTheme();
-  const backgroundColor = getThemeValue(theme.mode, {
-    dark: themeVars.panelContentBg,
-    light: themeVars.panelContentBg,
-  });
+  const leftContainerWrapper = <div className={leftContainerWrapperStyle}>{leftContainer}</div>;
 
-  const leftContainerWrapper = (
-    <div onClick={onCollapse} className={leftContainerWrapperStyle}>
-      {leftContainer}
+  const rightContainerWrapper = (
+    <div
+      className={cn(
+        "right-container",
+        css`
+          display: flex;
+          align-items: center;
+        `
+      )}
+    >
+      {rightContainer}
     </div>
   );
 
-  const rightContainerWrapper = <div>{rightContainer}</div>;
-
   const mainContainerWrapper = (
-    <div
-      onClick={onCollapse}
-      className={collapsed ? mainContainerWrapperCollapsedClassName : mainContainerWrapperClassName}
-    >
-      {children}
+    <div className={collapsed ? mainContainerWrapperCollapsedClassName : mainContainerWrapperStyle}>
+      {collapsed ? <div className={collapsedTextStyle}>{children}</div> : children}
+      {count !== undefined && collapsed && (
+        <CountBadge
+          count={count}
+          className={css`
+            writing-mode: horizontal-tb;
+          `}
+        />
+      )}
     </div>
   );
   return (
-    <StyledDiv data-testid={`axis-header-${dimension}`} backgroundColor={backgroundColor} className={cn(className)}>
-      <div
-        className={cn(axisItemStyle, getAdditionalClassName({dimension, highlighted, collapsed}))}
-        style={{
-          background: highlighted ? themeVars.actionMenuHover : backgroundColor,
-        }}
-      >
-        {collapsed ? (
-          showLeftContainerWhenCollapsed ? (
-            leftContainerWrapper
-          ) : (
-            mainContainerWrapper
-          )
-        ) : (
-          <>
+    <div
+      data-testid={`axis-header-${dimension}`}
+      onClick={onCollapse}
+      className={cn(
+        className,
+        axisHeaderClassName,
+        dimension === "y" &&
+          css`
+            position: sticky;
+            left: 0;
+            display: inline-flex;
+            z-index: 3;
+            background-color: transparent;
+          `,
+        dimension === "y" &&
+          highlighted &&
+          css`
+            display: flex;
+            width: 100%;
+          `,
+        collapsed &&
+          dimension === "x" &&
+          css`
+            position: sticky;
+            top: 0;
+            z-index: 2;
+            background-color: transparent;
+          `
+      )}
+    >
+      <div className={cn(wrapperStyle, getAdditionalClassName({dimension, highlighted, collapsed}))}>
+        <>
+          <div
+            className={cn(
+              leftMainContainerWrapperStyle,
+              css`
+                display: grid;
+                grid-template-columns: auto 1fr;
+                gap: ${space.s8}px;
+                padding-inline: ${space.s4}px;
+                align-items: center;
+              `
+            )}
+          >
             {leftContainerWrapper}
             {mainContainerWrapper}
-            {rightContainerWrapper}
-          </>
-        )}
+          </div>
+          {rightContainerWrapper}
+        </>
       </div>
       {bottomContainer}
-    </StyledDiv>
+    </div>
   );
 };

package/src/box.tsx

@@ -3,7 +3,7 @@ import {styled} from "@linaria/react";
 import cx from "classnames";
 import {CSSProperties, forwardRef, HTMLProps, ReactNode, Ref, useCallback, useMemo, useState} from "react";
 import {border, getLinearGradient, getOpacities, space, textStyles, themeVars, transition} from "./design-system";
-import {useClickOutside} from "./popup/use-click-outside";
+import {useClickOutside} from "./popover/use-click-outside";
 
 export const getBg = (backgroundColors: string[]) => {
   if (backgroundColors) {

package/src/breadcrumb.tsx

@@ -0,0 +1,78 @@
+import {css, cx} from "@linaria/core";
+import {themeVars, transition} from "./design-system";
+import ArrowRight from "./icons/react/ArrowRight";
+import {ComponentPropsWithoutRef, ElementType, forwardRef} from "react";
+import More from "./icons/react/More";
+
+export const Breadcrumb = ({...props}: React.ComponentProps<"nav">) => {
+  return <nav aria-label="breadcrumb" {...props} />;
+};
+
+const olReset = css`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+
+const listCss = css`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${themeVars.colorTextButtonGhostNeutral};
+`;
+
+export const BreadcrumbList = ({className, ...props}: React.ComponentProps<"ol">) => {
+  return <ol className={cx(olReset, listCss, className)} {...props} />;
+};
+
+const itemCss = css`
+  display: flex;
+  align-items: center;
+`;
+
+export const BreadcrumbItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({className, ...props}, ref) => {
+  return <li ref={ref} className={cx(itemCss, className)} {...props} />;
+});
+
+const linkCss = css`
+  color: ${themeVars.colorTextButtonGhostNeutral};
+  &:hover {
+    color: ${themeVars.textColor};
+  }
+  transition: color ${transition};
+`;
+
+type BreadcrumbLinkProps<C extends ElementType = "a"> = {
+  as?: C;
+  className?: string;
+} & ComponentPropsWithoutRef<C>;
+
+export const BreadcrumbLink = <C extends ElementType = "a">({className, as, ...props}: BreadcrumbLinkProps<C>) => {
+  const Component = as || "a";
+  return <Component className={cx(linkCss, className)} {...props} />;
+};
+
+const liReset = css`
+  margin: 0;
+  padding: 0;
+`;
+
+export const BreadcrumbSeparator = ({children, className, ...props}: React.ComponentProps<"li">) => {
+  return (
+    <li role="presentation" aria-hidden="true" className={cx(liReset, className)} {...props}>
+      {children ?? <ArrowRight color={themeVars.colorTextButtonGhostNeutral} containerSize={16} iconSize={16} />}
+    </li>
+  );
+};
+
+export const BreadcrumbEllipsis = forwardRef<HTMLSpanElement, React.ComponentProps<"span">>(
+  ({className, ...props}, ref) => {
+    return (
+      <span ref={ref} role="presentation" aria-hidden="true" className={cx(className)} {...props}>
+        <More color={themeVars.colorTextButtonGhostNeutral} containerSize={16} iconSize={16} />
+      </span>
+    );
+  }
+);

package/src/button/actions-button-compact.tsx

@@ -1,12 +1,15 @@
 import {forwardRef} from "react";
 import {IconButton, IconButtonProps} from "./icon-button";
 import MoreCompactIcon from "../icons/react/MoreCompact";
+import MoreIcon from "../icons/react/More";
+import {useIsPhone} from "../use-is-phone";
 
 export const ActionsButtonCompact = forwardRef<HTMLButtonElement, IconButtonProps>(
   function ActionsButtonCompactComponent({...rest}, ref) {
+    const isPhone = useIsPhone();
     return (
       <IconButton supportMobile={true} ref={ref} size="small" {...rest}>
-        <MoreCompactIcon />
+        {isPhone ? <MoreIcon iconSize={20} /> : <MoreCompactIcon />}
       </IconButton>
     );
   }

package/src/button/base-button.tsx

@@ -3,7 +3,7 @@ import {forwardRef} from "react";
 import {themeVars} from "../design-system";
 import {iconColorVar} from "../icons/Icon";
 
-export type ButtonSize = "tiny" | "small" | "medium" | "large";
+export type ButtonSize = "tiny" | "small" | "medium" | "large" | "xLarge";
 export type ButtonVariant = "solid" | "outline" | "soft" | "ghost";
 export type ButtonColor = "accent" | "neutral" | "error";
 
@@ -14,6 +14,8 @@ export type BaseButtonProps = {
   supportMobile?: boolean;
 } & React.ComponentPropsWithRef<"button">;
 
+export const xLargeButtonHeight = 40;
+
 export const baseButton = css`
   position: relative;
   box-sizing: border-box;
@@ -32,8 +34,10 @@ export const baseButton = css`
 
   box-shadow: inset 0 0 0 1px var(--fibery-button-border-color);
 
-  &:hover:not(:disabled) {
-    background-color: var(--fibery-button-hover-color);
+  @media (any-hover: hover) {
+    &:hover:not(:disabled) {
+      background-color: var(--fibery-button-hover-color);
+    }
   }
   &:active {
     color: var(--fibery-button-text-active-color);

package/src/button/button-group.tsx

@@ -29,7 +29,7 @@ const buttonGroupDirection = {
   `,
 };
 
-const buttonGroup = css`
+export const buttonGroup = css`
   display: flex;
   align-items: flex-start;
 `;

package/src/button/button.tsx

@@ -3,7 +3,7 @@ import {forwardRef} from "react";
 import {border, fontWeight, space, textStyles} from "../design-system";
 import {iconSizeVar} from "../icons/Icon";
 import SpinnerIcon from "../icons/react/Spinner";
-import {BaseButton, BaseButtonProps, ButtonSize} from "./base-button";
+import {BaseButton, BaseButtonProps, ButtonSize, xLargeButtonHeight} from "./base-button";
 import {useIsSupportHardwareKeyboard} from "../use-is-support-hardware-keyboard";
 import {useIsPhone} from "../use-is-phone";
 
@@ -140,6 +140,37 @@ const buttonSize = {
       padding-right: ${space.s8 - space.s1}px;
     }
 
+    & > .${shortcutContainer} {
+      font-size: ${textStyles.regular.fontSize}px;
+    }
+  `,
+  xLarge: css`
+    font-size: ${textStyles.heading3.fontSize}px;
+    line-height: 20px;
+    letter-spacing: ${textStyles.heading3.letterSpacing};
+
+    border-radius: ${border.radius6}px;
+    min-height: ${xLargeButtonHeight}px;
+    padding: ${space.s6}px ${space.s12}px;
+    gap: ${space.s6}px;
+
+    ${iconSizeVar}: 24px;
+
+    &.${withIconStart} {
+      padding-left: ${space.s10}px;
+      padding-right: ${space.s12}px;
+    }
+
+    &.${withIconEnd} {
+      padding-left: ${space.s12}px;
+      padding-right: ${space.s10}px;
+    }
+
+    &.${withoutChildren} {
+      padding-left: ${space.s8 - space.s1}px;
+      padding-right: ${space.s8 - space.s1}px;
+    }
+
     & > .${shortcutContainer} {
       font-size: ${textStyles.regular.fontSize}px;
     }
@@ -174,6 +205,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         disabled={disabled || pending}
         className={cx(
+          "notranslate",
           className,
           button,
           buttonSize[supportMobile && isPhone ? "large" : size],

package/src/button/icon-button.tsx

@@ -3,7 +3,7 @@ import {forwardRef} from "react";
 import {border, space} from "../design-system";
 import {iconSizeVar} from "../icons/Icon";
 import Spinner from "../icons/react/Spinner";
-import {BaseButton, BaseButtonProps, ButtonSize} from "./base-button";
+import {BaseButton, BaseButtonProps, ButtonSize, xLargeButtonHeight} from "./base-button";
 import {useIsPhone} from "../use-is-phone";
 
 export type IconButtonProps = {
@@ -52,6 +52,15 @@ export const iconButtonSizes = {
 
     ${iconSizeVar}: 18px;
   `,
+  xLarge: css`
+    padding: ${space.s6}px;
+
+    min-width: ${xLargeButtonHeight}px;
+    min-height: ${xLargeButtonHeight}px;
+    border-radius: ${border.radius6}px;
+
+    ${iconSizeVar}: 24px;
+  `,
 };
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(

package/src/button/select-button.tsx

@@ -21,6 +21,10 @@ const iconSize = {
     margin-left: -${space.s4}px;
     margin-right: -${space.s4}px;
   `,
+  xLarge: css`
+    margin-left: -${space.s4}px;
+    margin-right: -${space.s4}px;
+  `,
 };
 
 export type SelectButtonProps = {

package/src/card-container.tsx

@@ -7,6 +7,7 @@ import {getBg} from "./box";
 import {CardHiddenLink} from "./card-hidden-link";
 import {border, space, themeVars} from "./design-system";
 import {visuallyHidden} from "./styles-utils";
+import {mobileRootSelector} from "./mobile-styles";
 
 export type CardSize =
   | ":card-size/pinned"
@@ -109,10 +110,7 @@ const cardClassName = css`
   flex-direction: column;
   flex-grow: 1;
   height: 100%;
-  padding-left: ${space.s8}px;
-  padding-right: ${space.s6}px;
-  padding-top: ${space.s6}px;
-  padding-bottom: ${space.s8}px;
+  padding: ${space.s8}px;
   gap: ${space.s6}px;
 
   & > div:empty:not(.${colorCodingClassName}) {
@@ -159,6 +157,11 @@ const listClassName = css`
   & > div.title-wrapper:has(a:empty) {
     display: none;
   }
+
+  ${mobileRootSelector} & {
+    gap: ${space.s8}px;
+    min-height: 36px;
+  }
 `;
 
 const timelineClassName = css`
@@ -244,7 +247,8 @@ const floatingStyles = {
 };
 
 const coverClassName = css`
-  margin: ${-space.s4}px;
+  // box padding -1px to go below the outline
+  margin: ${-space.s5}px;
 
   &:empty {
     display: none;
@@ -252,7 +256,7 @@ const coverClassName = css`
 `;
 
 const coverWithContentClassName = css`
-  border-bottom: ${themeVars.separators.opacity5};
+  border-bottom: ${themeVars.shortcutBorderColor};
   margin-bottom: 0;
 `;
 

package/src/checkbox.tsx

@@ -14,6 +14,7 @@ import {
 } from "react";
 import {colors, getDarkenColor, getOpacities, layout, space, textStyles, ThemeColors, themeVars} from "./design-system";
 import {smallHtmlStylesClass} from "./html-styles";
+import {mobileRootSelector} from "./mobile-styles";
 
 const checkboxColor = `--fibery-checkbox-color`;
 const checkboxColorVar = `var(${checkboxColor})`;
@@ -36,6 +37,10 @@ const backgroundStyle = css`
   box-shadow: 0 0 0 1.5px ${borderColorVar};
   background-color: ${themeVars.panelBg};
 
+  ${mobileRootSelector} & {
+    box-shadow: 0 0 0 1.6px ${borderColorVar};
+  }
+
   .${smallHtmlStylesClass} & {
     width: ${layout.checkboxSize - 2}px;
     height: ${layout.checkboxSize - 2}px;
@@ -53,6 +58,9 @@ const checkboxRootStyle = css`
   & input[type="checkbox"]:checked + .${backgroundStyle} {
     background-color: ${checkboxColorVar};
     box-shadow: 0 0 0 1.5px ${checkboxColorVar} !important;
+    ${mobileRootSelector} & {
+      box-shadow: 0 0 0 1.6px ${checkboxColorVar} !important;
+    }
   }
 
   & input[type="checkbox"]:indeterminate + .${backgroundStyle} {
@@ -66,15 +74,24 @@ const checkboxRootStyle = css`
   &:hover input[type="checkbox"]:checked:not(:disabled) + .${backgroundStyle} {
     background-color: ${darkenColorVar};
     box-shadow: 0 0 0 1.5px ${darkenColorVar};
+    ${mobileRootSelector} & {
+      box-shadow: 0 0 0 1.6px ${darkenColorVar};
+    }
   }
 
   &:hover input[type="checkbox"]:checked:focus:not(:disabled) + .${backgroundStyle} {
     background-color: ${darkenColorVar};
     box-shadow: 0 0 0 1.5px ${darkenColorVar}, 0 0 0 4px ${focusColorVar};
+    ${mobileRootSelector} & {
+      box-shadow: 0 0 0 1.6px ${darkenColorVar}, 0 0 0 4px ${focusColorVar};
+    }
   }
 
   & input[type="checkbox"]:focus + .${backgroundStyle} {
     box-shadow: 0 0 0 1.5px ${checkboxColorVar}, 0 0 0 4px ${focusColorVar};
+    ${mobileRootSelector} & {
+      box-shadow: 0 0 0 1.6px ${checkboxColorVar}, 0 0 0 4px ${focusColorVar};
+    }
   }
 
   .${smallHtmlStylesClass} & {

package/src/collapsible-section.tsx

@@ -25,6 +25,7 @@ type Props = {
   children: ReactNode;
   badge?: ReactNode;
   keepChildren?: boolean;
+  className?: string;
 };
 
 export const CollapsibleSection = ({
@@ -35,6 +36,7 @@ export const CollapsibleSection = ({
   onCollapsedChange,
   children,
   badge,
+  className,
 }: Props) => {
   const [isCollapsed, setIsCollapsed] = useControllableState({
     value: collapsed,
@@ -71,7 +73,7 @@ export const CollapsibleSection = ({
   const regularHeader = label && <div className={headerCss}>{label}</div>;
 
   return (
-    <div>
+    <div className={className}>
       {collapsible ? collapsibleHeader : regularHeader}
       <div style={{display: collapsible && isCollapsed ? "none" : "block"}}>{children}</div>
     </div>

package/src/color-picker/swatch.tsx

@@ -66,6 +66,7 @@ const iconSizes = {
   medium: 18,
   large: 20,
   huge: 22,
+  xLarge: 22,
 };
 
 type SwatchProps = {