@fibery/ui-kit 1.30.0 → 1.32.0

package/src/button/button.tsx

@@ -1,256 +1,105 @@
-import {hasNonEmptyChild} from "@fibery/react/src/has-non-empty-child";
-import {css} from "@linaria/core";
-import {styled} from "@linaria/react";
-import cx from "classnames";
-import _ from "lodash";
-import React, {forwardRef} from "react";
-import {ButtonV2} from "../button-v2/button";
-import {border, colors, getOpacities, opacity, space, textStyles} from "../design-system";
-import {IconBaseProps} from "../icons/types";
-import {Item} from "../item";
-import {Spinner} from "../loaders";
-import {useTheme} from "../theme-provider";
-import {ButtonBase, ButtonBaseProps, buttonBorderWidth, getMainColor, getTextColor} from "./button-base";
-import {isButtonsV2} from "../utils";
-
-type PositionInGroup = "first" | "middle" | "last";
-
-export const ButtonSize = {
-  superSmall: ":button-size/super-small",
-  smaller: ":button-size/smaller",
-  small: ":button-size/small",
-  normal: ":button-size/normal",
-  big: ":button-size/big",
-} as const;
-export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
-
-const FontSizes = {
-  ":button-size/super-small": 10,
-  ":button-size/smaller": 12,
-  ":button-size/small": 12,
-  ":button-size/normal": 14,
-  ":button-size/big": 16,
-} as const;
-
-const HorizontalPaddings = {
-  ":button-size/super-small": 6,
-  ":button-size/smaller": 8,
-  ":button-size/small": 8,
-  ":button-size/normal": 12,
-  ":button-size/big": 16,
-} as const;
-
-const IconSizes = {
-  ":button-size/super-small": 14,
-  ":button-size/smaller": 16,
-  ":button-size/small": 18,
-  ":button-size/normal": 18,
-  ":button-size/big": 20,
-};
-
-type StyledProps = {
-  buttonSize: ButtonSize;
-  borderless?: boolean;
-  buttonWidth?: number | string;
-  buttonHeight?: number | string;
-};
-
-const getFontSize = ({buttonSize}: StyledProps) => FontSizes[buttonSize];
-const getButtonMinSize = ({buttonSize}: StyledProps) => FontSizes[buttonSize] * 2;
-const getHorizontalPadding = ({buttonSize, borderless}: StyledProps) =>
-  borderless ? HorizontalPaddings[buttonSize] : HorizontalPaddings[buttonSize] - buttonBorderWidth;
+import {css, cx} from "@linaria/core";
+import {forwardRef} from "react";
+import {border, fontWeight, space, textStyles} from "../design-system";
+import {iconSizeVar} from "../icons/Icon";
+import SpinnerIcon from "../icons/react/Spinner";
+import {BaseButtonProps, BaseButton, ButtonSize} from "./base-button";
+
+export type ButtonProps = {
+  size?: ButtonSize;
+  pending?: boolean;
+  shortcut?: string;
+  fullWidth?: boolean;
+  iconStart?: React.ReactNode;
+  iconEnd?: React.ReactNode;
+} & BaseButtonProps;
 
-const StyledButton = styled(ButtonBase)<StyledProps>`
+const button = css`
   display: flex;
-  justify-content: center;
   align-items: center;
-  vertical-align: middle;
-  position: relative;
-
-  width: ${({buttonWidth = "auto"}) => (typeof buttonWidth === "string" ? buttonWidth : `${buttonWidth}px`)};
-  height: ${({buttonHeight = "auto"}) => (typeof buttonHeight === "string" ? buttonHeight : `${buttonHeight}px`)};
+  justify-content: center;
+  font-weight: ${fontWeight.medium};
+  white-space: nowrap;
+`;
 
-  font-size: ${getFontSize}px;
-  min-height: ${getButtonMinSize}px;
-  min-width: ${getButtonMinSize}px;
-  padding-left: ${getHorizontalPadding}px;
-  padding-right: ${getHorizontalPadding}px;
+const shortcutContainer = css`
+  font-size: ${textStyles.small.fontSize}px;
+  font-weight: ${fontWeight.regular};
+  opacity: 0.7;
 `;
-export const buttonClassName = StyledButton;
 
-// TODO: should be a different component, e.g. ButtonGroup
-const ordersInGroup = {
-  first: css`
-    ${{
-      display: "inline-flex",
-      borderRadius: `${border.radius6}px 0 0 ${border.radius6}px`,
-      marginRight: -1,
-    }}
-  `,
-  middle: css`
-    ${{
-      display: "inline-flex",
-      borderRadius: border.radius0,
-      marginRight: -1,
-    }}
+const buttonSize = {
+  tiny: css`
+    font-size: 10px;
+    line-height: 14px;
+    border-radius: ${border.radius4}px;
+    min-height: 20px;
+    padding: ${space.s2}px ${space.s6}px;
+    gap: ${space.s2}px;
+
+    ${iconSizeVar}: 14px;
   `,
-  last: css`
-    ${{
-      display: "inline-flex",
-      borderRadius: `0 ${border.radius6}px ${border.radius6}px 0`,
-    }}
+  small: css`
+    font-size: ${textStyles.small.fontSize}px;
+    line-height: 16px;
+    border-radius: ${border.radius5}px;
+    min-height: 24px;
+    padding: ${space.s4}px ${space.s8}px;
+    gap: ${space.s4}px;
+
+    ${iconSizeVar}: 16px;
   `,
-};
-
-const getSpinnerColor = ({mainColor, primary}: {mainColor: string; primary?: boolean}) => {
-  if (primary) {
-    return colors.inversedTextColor;
-  }
-  return mainColor;
-};
+  medium: css`
+    font-size: ${textStyles.regular.fontSize}px;
+    line-height: 20px;
+    letter-spacing: ${textStyles.regular.letterSpacing};
 
-const getIconMagicConstants = _.memoize((size: ButtonSize) => {
-  const iconSize = IconSizes[size];
+    border-radius: ${border.radius6}px;
+    min-height: 28px;
+    padding: ${space.s4}px ${space.s12}px;
+    gap: ${space.s6}px;
 
-  const leftContainerSize = 8;
-  const leftContainerMarginRight = iconSize - leftContainerSize;
-
-  const spinnerSize = Math.round(iconSize * 0.8);
+    ${iconSizeVar}: 18px;
+  `,
+  large: css`
+    font-size: ${textStyles.regular.fontSize}px;
+    line-height: 20px;
+    letter-spacing: ${textStyles.regular.letterSpacing};
 
-  return {iconSize, spinnerSize, leftContainerSize, leftContainerMarginRight};
-});
+    border-radius: ${border.radius6}px;
+    min-height: 32px;
+    padding: ${space.s6}px ${space.s14}px;
+    gap: ${space.s8}px;
 
-const shortcutStyle = css`
-  ${{
-    ...textStyles.small,
-    color: "currentColor",
-    borderRadius: border.radius4,
-    paddingLeft: space.s4,
-    paddingRight: space.s4,
-    paddingBottom: space.s2,
-    marginRight: -space.s4,
-    marginLeft: space.s2,
-    opacity: opacity.opacity80,
-    display: "inline-block",
-  }}
-`;
+    ${iconSizeVar}: 18px;
 
-const leftContainerMarginRightVar = "--fibery-button-left-container-margin-right";
+    & > .${shortcutContainer} {
+      font-size: ${textStyles.regular.fontSize}px;
+    }
+  `,
+} as const;
 
-const leftContainerClassName = css`
-  margin-right: var(${leftContainerMarginRightVar});
+const fullWidthMod = css`
+  width: 100%;
 `;
 
-export type ButtonProps = ButtonBaseProps & {
-  size?: ButtonSize;
-  pending?: boolean;
-  Icon?: React.FC<IconBaseProps> | null;
-  inGroup?: PositionInGroup;
-  shortcut?: string;
-  noOverflow?: boolean;
-  width?: string | number;
-  height?: string | number;
-};
-
-export const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  {
-    disabled,
-    pending,
-    Icon,
-    inGroup,
-    shortcut,
-    noOverflow = true,
-    width,
-    height,
-    size = ":button-size/normal",
-    className,
-    children,
-    ...baseProps
-  },
-  forwardedRef
-) {
-  const theme = useTheme();
-  const mainColor = getMainColor({color: baseProps.color, dangerous: baseProps.dangerous, theme});
-  const textColor = getTextColor({mainColor, primary: baseProps.primary, theme});
-  const spinnerBgColor = getOpacities(textColor).opacity25;
-  const spinnerColor = getSpinnerColor({mainColor, primary: baseProps.primary});
-
-  const {iconSize, spinnerSize, leftContainerSize, leftContainerMarginRight} = getIconMagicConstants(size);
-
-  const leftContainer = pending ? (
-    <Spinner
-      backgroundColor={spinnerBgColor}
-      color={spinnerColor}
-      size={spinnerSize}
-      containerSize={leftContainerSize}
-    />
-  ) : Icon ? (
-    <Icon color={textColor} iconSize={iconSize} containerSize={leftContainerSize} />
-  ) : null;
-
-  const styleVariable: StyledProps = {
-    buttonHeight: height,
-    buttonWidth: width,
-    buttonSize: size,
-    borderless: baseProps.borderless,
-  };
-
-  const isDisabled = disabled || pending;
-
-  return (
-    <StyledButton
-      {...styleVariable}
-      ref={forwardedRef}
-      onClick={!isDisabled && baseProps.onClick ? baseProps.onClick : _.noop}
-      disabled={isDisabled}
-      className={cx(className, inGroup && ordersInGroup[inGroup])}
-      {...baseProps}
-    >
-      <Item
-        leftContainer={leftContainer}
-        style={
-          {
-            [leftContainerMarginRightVar]: `${leftContainerMarginRight}px`,
-          } as React.CSSProperties
-        }
-        containerClassName={cx({[leftContainerClassName]: leftContainer && hasNonEmptyChild(children)})}
-        rightContainer={shortcut && <span className={cx(shortcutStyle)}>{shortcut}</span>}
-        noOverflow={noOverflow}
-      >
-        {children}
-      </Item>
-    </StyledButton>
-  );
-});
-
-/** @deprecated Please consider using ButtonV2  */
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {
-  if (isButtonsV2) {
-    const {
-      Icon,
-      dangerous,
-      borderless,
-      size = ":button-size/normal",
-      primary,
-      className,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      noOverflow: _noOverflow,
-      ...buttonProps
-    } = props;
-
-    const newSize = size === ":button-size/big" || size === ":button-size/normal" ? "medium" : "small";
-
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {size = "medium", iconStart, iconEnd, className, children, pending, disabled, shortcut, fullWidth, ...buttonProps},
+    ref
+  ) => {
     return (
-      <ButtonV2
+      <BaseButton
         ref={ref}
-        className={className}
+        disabled={disabled || pending}
+        className={cx(className, button, buttonSize[size], fullWidth && fullWidthMod)}
         {...buttonProps}
-        color={dangerous ? "error" : primary ? "accent" : "neutral"}
-        variant={primary ? "solid" : borderless ? "ghost" : "outline"}
-        size={newSize}
-        iconStart={Icon ? <Icon /> : null}
-      />
+      >
+        {pending ? <SpinnerIcon /> : iconStart}
+        {children}
+        {iconEnd}
+        {shortcut ? <span className={shortcutContainer}>{shortcut}</span> : null}
+      </BaseButton>
     );
   }
-  return <ButtonComponent {...props} className={props.className} ref={ref} />;
-});
+);

package/src/button/icon-button.tsx

@@ -1,71 +1,71 @@
-import {css} from "@linaria/core";
-import {styled} from "@linaria/react";
-import cx from "classnames";
+import {css, cx} from "@linaria/core";
 import {forwardRef} from "react";
-import {ButtonBase, ButtonBaseProps} from "./button-base";
-import {iconContainer} from "../icons/Icon";
-import {IconButtonV2} from "../button-v2/icon-button";
-import {isButtonsV2} from "../utils";
+import {BaseButtonProps, BaseButton, ButtonSize} from "./base-button";
+import {border, space} from "../design-system";
+import {iconSizeVar} from "../icons/Icon";
+import Spinner from "../icons/react/Spinner";
 
-export type IconButtonSize = "super-small" | "small" | "normal" | "big";
+export type IconButtonProps = {
+  size?: ButtonSize;
+  pending?: boolean;
+} & BaseButtonProps;
 
-export type IconButtonProps = ButtonBaseProps & {
-  size?: IconButtonSize;
-};
+const iconButton = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${space.s2}px;
+`;
 
-const Paddings = {
-  "super-small": 0,
-  small: 2,
-  normal: 4,
-  big: 6,
-};
+const iconButtonSizes = {
+  tiny: css`
+    padding: ${space.s2}px;
+    min-width: 20px;
+    min-height: 20px;
+    border-radius: ${border.radius4}px;
 
-type StyledProps = {
-  /** The size of the component. `super-small` is equivalent to the dense button styling */
-  size: IconButtonSize;
-};
+    ${iconSizeVar}: 16px;
+  `,
+  small: css`
+    padding: ${space.s4}px;
+    min-width: 24px;
+    min-height: 24px;
+    border-radius: ${border.radius5}px;
 
-const getPadding = ({size}: StyledProps) => Paddings[size];
+    ${iconSizeVar}: 16px;
+  `,
+  medium: css`
+    padding: ${space.s4}px;
+    min-width: 28px;
+    min-height: 28px;
+    border-radius: ${border.radius6}px;
 
-const weight = css``;
+    ${iconSizeVar}: 18px;
+  `,
+  large: css`
+    padding: ${space.s6}px;
 
-const StyledIconButton = styled(ButtonBase)<StyledProps>`
-  &.${weight} {
-    padding: ${getPadding}px;
-  }
+    min-width: 32px;
+    min-height: 32px;
+    border-radius: ${border.radius6}px;
 
-  & > .${iconContainer} {
-    color: inherit;
-  }
-`;
+    ${iconSizeVar}: 18px;
+  `,
+};
 
-/** @deprecated Please consider using IconButtonV2  */
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
-  {size = "normal", className, primary, dangerous, borderless = true, ...rest},
+  {size = "medium", className, variant = "ghost", color = "neutral", pending, children, ...rest},
   ref
 ) {
-  if (isButtonsV2) {
-    return (
-      <IconButtonV2
-        ref={ref}
-        className={className}
-        {...rest}
-        size={size === "big" || size === "normal" ? "medium" : "small"}
-        color={dangerous ? "error" : primary ? "accent" : "neutral"}
-        variant={primary ? "solid" : borderless ? "ghost" : "outline"}
-      />
-    );
-  }
-
   return (
-    <StyledIconButton
+    <BaseButton
       ref={ref}
-      size={size}
-      className={cx(className, weight)}
-      primary={primary}
-      dangerous={dangerous}
-      borderless={borderless}
+      className={cx(className, iconButton, iconButtonSizes[size])}
+      variant={variant}
+      color={color}
       {...rest}
-    />
+    >
+      {pending ? <Spinner /> : children}
+    </BaseButton>
   );
 });

package/src/button/make-button-colors.ts

@@ -0,0 +1,33 @@
+// TODO: this can be incorporated inside Button component
+// but let's keep it separate while migration is on
+// so it's easier to find buttons with custom colors
+
+import {CSSProperties} from "@linaria/core";
+import {getDarkenColor, getOpacities, themeVars} from "../design-system";
+import {ButtonVariant} from "./base-button";
+
+export const makeButtonColors = (color: string, variant: ButtonVariant) => {
+  if (variant === "solid") {
+    return {
+      "--fibery-button-color": color,
+      "--fibery-button-hover-color": getDarkenColor(color),
+      "--fibery-button-text-color": themeVars.buttonPrimaryTextColor,
+      "--fibery-button-text-active-color": themeVars.buttonPrimaryTextColor,
+      "--fibery-button-focus-color": getOpacities(color).opacity30,
+    };
+  }
+
+  return {
+    "--fibery-button-color": "transparent",
+    "--fibery-button-hover-color": getOpacities(color).opacity15,
+    "--fibery-button-text-color": color,
+    "--fibery-button-text-active-color": getOpacities(color).opacity80,
+    "--fibery-button-focus-color": getOpacities(color).opacity30,
+
+    ...(variant === "outline"
+      ? {
+          "--fibery-button-border-color": getOpacities(color).opacity30,
+        }
+      : undefined),
+  } as CSSProperties;
+};

package/src/design-system.ts

@@ -419,7 +419,6 @@ export const themeColors = {
   // :focus, :focus:hover
   colorBgPinnedFieldsLabel: [slate.slate11, slateDark.slate11],
   colorBgObjectEditorSeparator: [slate.slate12, slateDark.slate12],
-  colorBgObjectEditorSeparatorButton: [slate.slate4, slateDark.slate4],
   colorBgMenuItemSelectedFocused: [indigo.indigo6, indigoDark.indigo6],
   colorBgFieldEditorContainer: [slate.slate2, slateDark.slate3],
   colorBgFieldEditorLinkEqualSign: [slate.slate6, slateDark.slate2],
@@ -592,7 +591,7 @@ export const themeColors = {
   colorBgButtonGhostAccentDefault: [transparent, transparent],
   colorBgButtonGhostAccentHover: [indigo.indigo3, indigoDark.indigo3],
   colorBgButtonGhostNeutralDefault: [transparent, transparent],
-  colorBgButtonGhostNeutralHover: [slate.slate4, slateDark.slate4],
+  colorBgButtonGhostNeutralHover: [getOpacities(slate.slate6).opacity60, getOpacities(slateDark.slate6).opacity80],
   colorBgButtonGhostDestructiveDefault: [transparent, transparent],
   colorBgButtonGhostDestructiveHover: [red.red4, redDark.red4],
   colorTextButtonGhostAccent: [indigo.indigo11, indigoDark.indigo11],
@@ -881,14 +880,15 @@ export const space = {
   s128: 128,
 } as const;
 /** Token for nested items spacing in nested trees */
-export const spaceNestedTreeLevel = 28;
+export const spaceNestedTreeLevel = 12;
 export const spaceNestedTreeInterval = 0;
 export const layout = {
-  logoSize: 16,
+  logoSize: 15,
   menuDefaultWidth: 243,
   desktopToolbarHeight: 32,
-  desktopMenuMinWidth: 200,
-  menuMinWidth: 54, //TODO: make dependency to itemHeight
+  desktopMenuMinWidth: 240,
+  collapsedMenuMinWidth: 48,
+  menuMinWidth: 240, //TODO: make dependency to itemHeight
   menuMaxWidth: 480,
   menuItemMinWidth: 80,
   menuGroupHeaderIndent: 28, // I'm ok
@@ -899,7 +899,8 @@ export const layout = {
   groupTitleHeight: 30,
   enumItemHeight: 32,
   menuItemHeight: 32,
-  newMenuItemHeight: 30, // I'm ok
+  newMenuItemHeight: 28, // I'm ok
+  newMenuIconSize: 20,
   viewHeaderHeight: space.s12 * 7,
   viewHeaderCompactHeight: 52,
   columnMinWidth: 240,

package/src/dropdown-menu/index.tsx

@@ -133,20 +133,21 @@ export const Content = forwardRef<HTMLDivElement, ContentProps>(function Dropdow
 
 export const Sub = DropdownMenuPrimitive.Sub;
 
-export const SubContent = forwardRef<HTMLDivElement, DropdownMenuPrimitive.DropdownMenuSubContentProps>(
-  function DropdownMenuSubContent({className, collisionPadding = space.s12, ...rest}, ref) {
-    return (
-      <DropdownMenuPrimitive.Portal>
-        <DropdownMenuPrimitive.SubContent
-          ref={ref}
-          className={cx(dropdownMenuContentStyles, className)}
-          collisionPadding={collisionPadding}
-          {...rest}
-        />
-      </DropdownMenuPrimitive.Portal>
-    );
-  }
-);
+export const SubContent = forwardRef<
+  HTMLDivElement,
+  DropdownMenuPrimitive.DropdownMenuSubContentProps & {container?: HTMLElement | null}
+>(function DropdownMenuSubContent({className, collisionPadding = space.s12, container, ...rest}, ref) {
+  return (
+    <DropdownMenuPrimitive.Portal container={container}>
+      <DropdownMenuPrimitive.SubContent
+        ref={ref}
+        className={cx(dropdownMenuContentStyles, className)}
+        collisionPadding={collisionPadding}
+        {...rest}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+});
 
 export const SubTrigger = styled(DropdownMenuPrimitive.SubTrigger)`
   ${rowItemStyles}

package/src/emoji-picker/emoji-picker-content-with-color.tsx

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {useState, useRef} from "react";
+import {useRef, useState} from "react";
 import {IconButton} from "../button/icon-button";
 import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../collapsible";
 import {ColorPicker} from "../color-picker";
@@ -30,15 +30,8 @@ const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = (
   return (
     <CollapsibleTrigger asChild>
       <Tooltip title={label}>
-        <IconButton
-          data-testid="emoji-picker-color-trigger"
-          size="big"
-          className={css`
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-          `}
-        >
-          <Icon color={iconColor} iconSize={18} containerSize={20} />
+        <IconButton data-testid="emoji-picker-color-trigger" size="small">
+          <Icon color={iconColor} />
         </IconButton>
       </Tooltip>
     </CollapsibleTrigger>

package/src/emoji-picker/emoji-picker-preview-footer.tsx

@@ -1,7 +1,7 @@
 import type {EmojiItem} from "@fibery/emoji-data";
 import {measureScrollbar} from "@fibery/helpers/utils/measure-scrollbar";
 import {css} from "@linaria/core";
-import {Button} from "../button";
+import {Button} from "../button/button";
 import {fontFamily, space, themeVars, typeSizes} from "../design-system";
 import {Emoji} from "./primitives/emoji";
 import {EmojiPickerFooter} from "./primitives/footer";
@@ -70,7 +70,7 @@ export const EmojiPickerPreviewFooter: React.FC<{
       {emojiPreview ? (
         <EmojiPreview emoji={emojiPreview.emoji} />
       ) : onAddCustomEmoji ? (
-        <Button size=":button-size/small" onClick={onAddCustomEmoji}>
+        <Button variant="outline" color="neutral" size="small" onClick={onAddCustomEmoji}>
           Add Emoji
         </Button>
       ) : null}

package/src/emoji-picker/icon-emoji-picker.tsx

@@ -1,12 +1,12 @@
 import {css} from "@linaria/core";
 import {compact} from "lodash";
-import {Button} from "../button";
 import {AntTabs} from "../antd/Tabs";
+import {Button} from "../button/button";
 import {space, textStyles} from "../design-system";
+import EmojiDelete from "../icons/react/EmojiDelete";
 import {$TSFixMe} from "../tsfixme";
 import {AppIconPicker, AppIconPickerProps} from "./app-icon-picker";
 import {EmojiPicker, EmojiPickerProps} from "./emoji-picker";
-import EmojiDelete from "../icons/react/EmojiDelete";
 
 const TabHeader: React.FC<React.PropsWithChildren> = ({children}) => (
   <div
@@ -89,7 +89,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
               padding-right: ${space.s12}px;
             `}
           >
-            <Button Icon={EmojiDelete} size={":button-size/small"} onClick={onReset}>
+            <Button variant="outline" color="neutral" iconStart={<EmojiDelete />} size={"small"} onClick={onReset}>
               {resetLabel}
             </Button>
           </div>