@fibery/ui-kit 1.31.0 → 1.32.1

package/package.json

@@ -1,11 +1,9 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.31.0",
+  "version": "1.32.1",
   "private": false,
   "files": [
     "src/antd/styles.ts",
-    "src/icon-button.tsx",
-    "src/button.tsx",
     "src/design-system.ts",
     "src/theme-styles.ts",
     "src/theme-settings.ts",
@@ -23,7 +21,6 @@
     "src/palette.ts",
     "src/tooltip.tsx",
     "src/tooltip-if-overflown.tsx",
-    "src/back-button.tsx",
     "src/button",
     "src/emoji-picker/**/*.ts*",
     "src/toast/**/*.ts*",
@@ -41,11 +38,11 @@
     "@linaria/core": "5.0.1",
     "@linaria/react": "5.0.1",
     "@popperjs/core": "2.11.6",
-    "@radix-ui/react-collapsible": "1.0.3",
-    "@radix-ui/react-context-menu": "2.1.5",
-    "@radix-ui/react-dropdown-menu": "2.0.6",
-    "@radix-ui/react-toast": "1.1.5",
-    "@radix-ui/react-tooltip": "1.0.7",
+    "@radix-ui/react-collapsible": "1.1.0",
+    "@radix-ui/react-context-menu": "2.2.1",
+    "@radix-ui/react-dropdown-menu": "2.1.1",
+    "@radix-ui/react-toast": "1.2.1",
+    "@radix-ui/react-tooltip": "1.1.2",
     "@types/d3-shape": "^3.1.3",
     "@types/react-select-country-list": "^2.2.1",
     "@types/setimmediate": "^1.0.2",
@@ -75,9 +72,9 @@
     "react-virtuoso": "4.6.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/helpers": "1.3.0",
+    "@fibery/emoji-data": "2.6.0",
     "@fibery/react": "1.4.0",
-    "@fibery/emoji-data": "2.6.0"
+    "@fibery/helpers": "1.3.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -111,8 +108,8 @@
     "svgo": "2.8.0",
     "typescript": "5.4.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.4.0",
-    "@fibery/eslint-config": "8.6.0"
+    "@fibery/eslint-config": "8.6.0",
+    "@fibery/babel-preset": "7.4.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/actions-menu/actions-menu-confirmation.tsx

@@ -1,8 +1,8 @@
 import {css} from "@linaria/core";
+import {ActionsPanel} from "../actions-panel";
 import {AntModal} from "../antd/ant-modal";
+import {Button} from "../button/button";
 import {border, space, themeVars} from "../design-system";
-import {ActionsPanel} from "../actions-panel";
-import {Button} from "../button";
 import {useActionsMenuContext} from "./contexts/actions-menu-context";
 
 const modalClass = css`
@@ -47,7 +47,6 @@ export const ActionsMenuConfirmation: React.FC<ActionsMenuConfirmationProps> = (
       >
         <ActionsPanel inline>
           <Button
-            primary
             onClick={() => {
               onConfirm();
               showConfirmation(null);
@@ -56,6 +55,7 @@ export const ActionsMenuConfirmation: React.FC<ActionsMenuConfirmationProps> = (
             Proceed
           </Button>
           <Button
+            variant="outline"
             onClick={() => {
               showConfirmation(null);
               onCancel?.();

package/src/actions-menu/actions-menu-sub-menu.tsx

@@ -23,6 +23,7 @@ type Props = React.PropsWithChildren<{
   onOpenChange?: (v: boolean) => void;
   disabled?: boolean;
   contentClassName?: string;
+  container?: HTMLElement | null;
 }>;
 
 export const ActionsMenuSubMenu: React.FC<Props> = ({
@@ -34,7 +35,7 @@ export const ActionsMenuSubMenu: React.FC<Props> = ({
   disabled = false,
   contentClassName,
 }) => {
-  const {MenuPrimitive} = useActionsMenuContext();
+  const {MenuPrimitive, container} = useActionsMenuContext();
 
   return (
     <MenuPrimitive.Sub open={open} onOpenChange={onOpenChange}>
@@ -53,7 +54,9 @@ export const ActionsMenuSubMenu: React.FC<Props> = ({
           />
         </div>
       </MenuPrimitive.SubTrigger>
-      <MenuPrimitive.SubContent className={contentClassName}>{children}</MenuPrimitive.SubContent>
+      <MenuPrimitive.SubContent container={container} className={contentClassName}>
+        {children}
+      </MenuPrimitive.SubContent>
     </MenuPrimitive.Sub>
   );
 };

package/src/actions-menu/actions-menu.tsx

@@ -40,7 +40,12 @@ export const ActionsMenu = ({
   const [confirmation, setConfirmation] = useState<ActionsMenuConfirmationProps | null>(null);
 
   return (
-    <ActionsMenuContextProvider setOpen={setOpen} showConfirmation={setConfirmation} MenuPrimitive={DropdownMenu}>
+    <ActionsMenuContextProvider
+      setOpen={setOpen}
+      showConfirmation={setConfirmation}
+      MenuPrimitive={DropdownMenu}
+      container={container}
+    >
       <DropdownMenu.Root open={isOpen} onOpenChange={setOpen} modal={modal || false}>
         <DropdownMenu.Trigger
           // backward compatibility for dropdown styles

package/src/actions-menu/contexts/actions-menu-context.tsx

@@ -16,6 +16,7 @@ type ActionsMenuContext = {
   close: () => void;
   showConfirmation: (args: ActionsMenuConfirmationProps | null) => void;
   MenuPrimitive: MenuPrimitive;
+  container?: HTMLElement | null;
 };
 
 const [Provider, useContext] = createContext<ActionsMenuContext>("ActionsMenuContext");
@@ -24,16 +25,24 @@ type Props = React.PropsWithChildren<{
   setOpen: (value: boolean) => void;
   showConfirmation: (args: ActionsMenuConfirmationProps | null) => void;
   MenuPrimitive: MenuPrimitive;
+  container?: HTMLElement | null;
 }>;
 
-export const ActionsMenuContextProvider: React.FC<Props> = ({setOpen, showConfirmation, MenuPrimitive, children}) => {
+export const ActionsMenuContextProvider: React.FC<Props> = ({
+  setOpen,
+  showConfirmation,
+  MenuPrimitive,
+  container,
+  children,
+}) => {
   const context = useMemo<ActionsMenuContext>(
     () => ({
       close: () => setOpen(false),
       MenuPrimitive,
       showConfirmation,
+      container,
     }),
-    [MenuPrimitive, showConfirmation, setOpen]
+    [MenuPrimitive, showConfirmation, container, setOpen]
   );
 
   return <Provider value={context}>{children}</Provider>;

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

@@ -1,5 +1,5 @@
 import {forwardRef} from "react";
-import {IconButton, IconButtonProps} from "../button-v2/icon-button";
+import {IconButton, IconButtonProps} from "./icon-button";
 import MoreCompactIcon from "../icons/react/MoreCompact";
 
 export const ActionsButtonCompact = forwardRef<HTMLButtonElement, IconButtonProps>(

package/src/button/actions-button.tsx

@@ -1,7 +1,5 @@
-import {css} from "@linaria/core";
 import {forwardRef} from "react";
-import {IconButton, IconButtonProps} from "../button-v2/icon-button";
-import {border, themeVars} from "../design-system";
+import {IconButton, IconButtonProps} from "./icon-button";
 import MoreCompact from "../icons/react/MoreCompact";
 
 export const ActionsButton = forwardRef<HTMLButtonElement, IconButtonProps>(function ActionsButtonComponent(
@@ -14,17 +12,3 @@ export const ActionsButton = forwardRef<HTMLButtonElement, IconButtonProps>(func
     </IconButton>
   );
 });
-
-// TODO: Shoud be a variant inside button?
-export const actionButtonInlineStyle = css`
-  background-color: ${themeVars.actionMenuButtonColor};
-  box-shadow: ${themeVars.entityCardShadow};
-  border-radius: ${border.radius6}px;
-
-  .Button:hover {
-    background-color: ${themeVars.actionMenuButtonHoverColor} !important;
-  }
-  .Button:focus {
-    background-color: ${themeVars.actionMenuButtonHoverColor} !important;
-  }
-`;

package/src/button/add-button.tsx

@@ -1,13 +1,20 @@
 import {forwardRef} from "react";
 import AddIcon from "../icons/react/Add";
-import {Button, ButtonProps} from "./button";
+import {ButtonProps, Button} from "./button";
 
-type Props = {
-  disableReason?: string;
-} & ButtonProps;
+type Props = ButtonProps;
 
 export const AddButton = forwardRef<HTMLButtonElement, Props>(
-  ({disableReason = "", Icon = AddIcon, ...rest}, forwardedRef) => {
-    return <Button ref={forwardedRef} borderless Icon={Icon} title={disableReason} {...rest} />;
+  ({iconStart = <AddIcon />, className, ...rest}, forwardedRef) => {
+    return (
+      <Button
+        ref={forwardedRef}
+        iconStart={iconStart}
+        variant="ghost"
+        color="neutral"
+        className={className}
+        {...rest}
+      />
+    );
   }
 );

package/src/button/back-button.tsx

@@ -1,26 +1,15 @@
-import {ButtonSize, Button} from "./button";
+import {forwardRef} from "react";
 import BackIcon from "../icons/react/Back";
+import {ButtonProps, Button} from "./button";
 
-type Props = {
-  disabled?: boolean;
-  pending?: boolean;
-  onClick: () => unknown;
-  size?: ButtonSize;
-  color?: string;
-};
+type Props = ButtonProps;
 
-export function BackButton({disabled, onClick, pending, size, color}: Props) {
-  return (
-    <Button
-      borderless
-      Icon={BackIcon}
-      disabled={disabled}
-      onClick={onClick}
-      pending={pending}
-      size={size}
-      color={color}
-    >
-      Back
-    </Button>
-  );
-}
+export const BackButton = forwardRef<HTMLButtonElement, Props>(
+  ({iconStart = <BackIcon />, className, ...rest}, forwardedRef) => {
+    return (
+      <Button ref={forwardedRef} iconStart={iconStart} variant="ghost" color="neutral" className={className} {...rest}>
+        Back
+      </Button>
+    );
+  }
+);

package/src/button/base-button.tsx

@@ -0,0 +1,189 @@
+import {CSSProperties, css, cx} from "@linaria/core";
+import {forwardRef} from "react";
+import {themeVars} from "../design-system";
+import {iconColorVar} from "../icons/Icon";
+
+export type ButtonSize = "tiny" | "small" | "medium" | "large";
+export type ButtonVariant = "solid" | "outline" | "soft" | "ghost";
+export type ButtonColor = "accent" | "neutral" | "error";
+type PositionInGroup = "first" | "middle" | "last";
+
+export type BaseButtonProps = {
+  variant?: ButtonVariant;
+  color?: ButtonColor;
+  pressed?: boolean;
+
+  // kept for backward compatibility with old buttons. Ideally should be reprsented as a separate component (ButtonGroup/SegmentedControl)
+  inGroup?: PositionInGroup;
+} & React.ComponentPropsWithRef<"button">;
+
+const baseButton = css`
+  all: unset;
+  position: relative;
+  box-sizing: border-box;
+
+  flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+
+  transition-property: border, background-color, color, opacity;
+  transition-duration: 0.15s;
+
+  color: var(--fibery-button-text-color);
+  ${iconColorVar}: var(--fibery-button-text-color);
+
+  background-color: var(--fibery-button-color);
+
+  box-shadow: inset 0 0 0 1px var(--fibery-button-border-color);
+
+  :hover:not(:disabled) {
+    background-color: var(--fibery-button-hover-color);
+  }
+  :active {
+    color: var(--fibery-button-text-active-color);
+    ${iconColorVar}: var(--fibery-button-text-active-color);
+  }
+
+  &[aria-pressed="true"] {
+    color: var(--fibery-button-text-active-color);
+    ${iconColorVar}: var(--fibery-button-text-active-color);
+    background-color: var(--fibery-button-hover-color);
+  }
+
+  :disabled {
+    cursor: default;
+    opacity: 0.4;
+  }
+
+  :focus {
+    outline: none;
+  }
+
+  :focus-visible {
+    background-color: var(--fibery-button-hover-color);
+    outline: 2px solid var(--fibery-button-focus-color);
+  }
+`;
+
+const variantToThemeMod = {
+  solid: "Solid",
+  soft: "Soft",
+  ghost: "Ghost",
+  outline: "Outline",
+} as const;
+const colorToThemeMod = {
+  accent: "Accent",
+  neutral: "Neutral",
+  error: "Destructive",
+} as const;
+
+const getColors = (variant: ButtonVariant, color: ButtonColor) => {
+  const variantMod = variantToThemeMod[variant];
+  const colorMod = colorToThemeMod[color];
+
+  let borderColors;
+
+  if (variantMod === "Outline") {
+    borderColors = {
+      "--fibery-button-border-color": themeVars[`colorBorderButton${variantMod}${colorMod}Default` as const],
+    };
+  }
+
+  return {
+    "--fibery-button-color": themeVars[`colorBgButton${variantMod}${colorMod}Default`],
+    "--fibery-button-hover-color": themeVars[`colorBgButton${variantMod}${colorMod}Hover`],
+    "--fibery-button-text-color": themeVars[`colorTextButton${variantMod}${colorMod}`],
+    "--fibery-button-text-active-color": themeVars[`colorTextButton${variantMod}${colorMod}Active`],
+    "--fibery-button-focus-color": themeVars[`colorBorder${colorMod}FocusRing`],
+
+    ...borderColors,
+  } as CSSProperties;
+};
+
+const buttonGroup = {
+  first: css`
+    &:is(&) {
+      display: inline-flex;
+      vertical-align: middle;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+
+      &:not([data-variant="outline"]) + * {
+        position: relative;
+        :after {
+          content: "";
+          left: -1px;
+          position: absolute;
+          width: 1px;
+          top: 4px;
+          bottom: 4px;
+          background-color: rgba(255, 255, 255, 0.2);
+        }
+      }
+    }
+  `,
+  middle: css`
+    &:is(&) {
+      display: inline-flex;
+      vertical-align: middle;
+      margin-left: -1px;
+      border-radius: 0;
+
+      &:not([data-variant="outline"]) + * {
+        position: relative;
+        :after {
+          content: "";
+          left: -1px;
+          position: absolute;
+          width: 1px;
+          top: 4px;
+          bottom: 4px;
+          background-color: rgba(255, 255, 255, 0.2);
+        }
+      }
+    }
+  `,
+  last: css`
+    &:is(&) {
+      display: inline-flex;
+      vertical-align: middle;
+      margin-left: -1px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  `,
+};
+
+export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
+  (
+    {
+      variant = "solid",
+      color = "accent",
+      type = "button",
+      className,
+      children,
+      inGroup,
+      style,
+      pressed,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const colors = getColors(variant, color);
+
+    return (
+      <button
+        style={{...colors, ...style}}
+        aria-pressed={pressed || buttonProps["aria-pressed"]}
+        data-variant={variant}
+        className={cx(baseButton, inGroup && buttonGroup[inGroup], className)}
+        ref={ref}
+        // eslint-disable-next-line react/button-has-type
+        type={type}
+        {...buttonProps}
+      >
+        {children}
+      </button>
+    );
+  }
+);