@fibery/ui-kit 1.36.2 → 1.37.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @fibery/ui-kit
 
+## 1.37.0
+
+### Minor Changes
+
+- aba5c58: update colors palette
+
 ## 1.36.2
 
 ### Patch Changes

package/package.json

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

package/src/action-badge.tsx

@@ -1,19 +1,20 @@
 import {css, cx} from "@linaria/core";
 import {forwardRef, ReactNode} from "react";
 import {BaseButton, BaseButtonProps} from "./button/base-button";
-import {space, themeVars, typeSizes} from "./design-system";
+import {fontWeight, space, themeVars, typeSizes} from "./design-system";
 import {iconSizeVar} from "./icons/Icon";
 
 const containerStyle = css`
   display: inline-flex;
   vertical-align: text-top;
   height: 18px;
+  margin-top: ${space.s1}px;
   align-items: center;
-  padding: ${space.s2}px ${space.s4}px;
-  border-radius: 20px;
+  padding: 2.5px ${space.s4}px;
+  border-radius: ${space.s4}px;
 
   font-size: ${typeSizes[6]}px;
-  text-transform: uppercase;
+  font-weight: ${fontWeight.medium};
 
   &:is(:disabled) {
     color: ${themeVars.accentTextColor};

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

@@ -2,19 +2,9 @@ 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 {space, themeVars} from "../design-system";
 import {useActionsMenuContext} from "./contexts/actions-menu-context";
 
-const modalClass = css`
-  & .ant-modal-content {
-    box-shadow: ${themeVars.shadowModal};
-    margin-left: ${space.s6}px;
-    margin-right: ${space.s6}px;
-    background-color: ${themeVars.modalContentBg};
-    border-radius: ${border.radius6}px;
-  }
-`;
-
 export type ActionsMenuConfirmationProps = {
   message: string;
   onCancel?: () => void;
@@ -32,7 +22,6 @@ export const ActionsMenuConfirmation: React.FC<ActionsMenuConfirmationProps> = (
       closable={false}
       footer={null}
       maskStyle={{backgroundColor: themeVars.modalBg}}
-      className={modalClass}
       maskClosable
       onCancel={() => showConfirmation(null)}
     >

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

@@ -90,7 +90,7 @@ const RightCorner = ({shortcut, loading, checked}: {shortcut?: string; loading?:
 
   return loading || shortcut || checked ? (
     <div className={cornerCss}>
-      {loading ? <Spinner color={theme.primary} size={16} containerSize={16} /> : null}
+      {loading ? <Spinner color={theme.primary} iconSize={16} containerSize={16} /> : null}
       {shortcut ? <ShortcutBadge shortcut={shortcut} /> : null}
       {checked ? <CheckedIcon iconSize={18} color={themeVars.textColor} /> : null}
     </div>

package/src/antd/ant-modal.tsx

@@ -1,11 +1,26 @@
 import Modal from "antd/lib/modal";
 import {ModalProps} from "antd/lib/modal/Modal";
 import "antd/lib/modal/style/css";
-import {createInlineTheme} from "../design-system";
+import {border, createInlineTheme, space, themeVars} from "../design-system";
 import {useTheme} from "../theme-provider";
+import {css, cx} from "@linaria/core";
+
+const modalCss = css`
+  & .ant-modal-content {
+    box-shadow: ${themeVars.shadowPopup};
+    margin-left: ${space.s6}px;
+    margin-right: ${space.s6}px;
+    background-color: ${themeVars.modalContentBg};
+    border-radius: ${border.radius8}px;
+  }
+
+  & .ant-modal-body {
+    padding: ${space.s20}px;
+  }
+`;
 
 export function AntModal({bodyStyle = {}, className, ...restProps}: ModalProps) {
   const theme = useTheme();
   const inlineTheme = createInlineTheme(theme);
-  return <Modal bodyStyle={{...bodyStyle, ...inlineTheme}} className={className} {...restProps} />;
+  return <Modal bodyStyle={{...bodyStyle, ...inlineTheme}} className={cx(className, modalCss)} {...restProps} />;
 }

package/src/antd/input.tsx

@@ -11,6 +11,9 @@ const TextArea = Input.TextArea;
 
 export const transparentInputStyle = css`
   ${{
+    display: "flex",
+    alignItems: "center",
+
     "& input, & textarea, & .ant-input-affix-wrapper": {
       padding: 0,
       border: "none",
@@ -43,14 +46,12 @@ export const transparentInputStyle = css`
 const InputWrapper = getWrapper(inputStyles);
 
 export const StyledInput = wrapWith(InputWrapper, Input);
-
 export const StyledTextArea = wrapWith(InputWrapper, TextArea);
 
 export const TransparentInputWrapper = getWrapper(transparentInputStyle);
-export const StyledTransparentInput = wrapWith(TransparentInputWrapper, Input);
 
 export type TextAreaRef = React.ElementRef<typeof TextArea>;
 export const AntTransparentTextArea = wrapWith(TransparentInputWrapper, TextArea);
 
 export type InputRef = React.ElementRef<typeof Input>;
-export const AntTransparentInput = StyledTransparentInput;
+export const AntTransparentInput = wrapWith(TransparentInputWrapper, Input);

package/src/app-icon-with-fallback.tsx

@@ -6,6 +6,7 @@ import {AppIconWrapper} from "./app-icon-wrapper";
 import {getAppIconBackgroundColor, getOpacities, getThemeValue, iconSize, layout} from "./design-system";
 import {Icon} from "./icons/Icon";
 import {useTheme} from "./theme-provider";
+import {useIsPhone} from "./use-is-phone";
 
 type AppIcon = {
   name: string;
@@ -122,15 +123,11 @@ interface AppIconProps {
   containerSize?: number;
 }
 
-export const AppIcon: FC<AppIconProps> = ({
-  icon,
-  iconSize = 18,
-  color,
-  isSelected,
-  containerSize = layout.newMenuIconSize,
-}) => {
+export const AppIcon: FC<AppIconProps> = ({icon, color, isSelected, ...rest}) => {
   const theme = useTheme();
-
+  const isPhone = useIsPhone();
+  const defaultIconSize = isPhone ? layout.mobileSidebarIconSize : layout.newMenuIconSize;
+  const {iconSize = defaultIconSize, containerSize = defaultIconSize} = rest;
   const iconColor = getThemeValue(theme.mode, {
     dark: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
     light: a11yColor(getOpacities(color).opacity95, theme.whiteColor, 3),

package/src/app-icon-wrapper.tsx

@@ -3,8 +3,7 @@ import cn from "classnames";
 import {ReactNode} from "react";
 import {border, getThemeValue, layout} from "./design-system";
 import {useTheme} from "./theme-provider";
-
-export const appIconSize = layout.newMenuIconSize;
+import {useIsPhone} from "./use-is-phone";
 
 const appIconContainerStyle = css`
   border-radius: ${border.radius4}px;
@@ -20,7 +19,7 @@ export const AppIconWrapper = ({
   children,
   color,
   borderless,
-  containerSize = layout.newMenuIconSize,
+  ...rest
 }: {
   children?: ReactNode;
   color: string;
@@ -28,7 +27,8 @@ export const AppIconWrapper = ({
   containerSize?: number;
 }) => {
   const theme = useTheme();
-
+  const isPhone = useIsPhone();
+  const {containerSize = isPhone ? layout.mobileSidebarIconSize : layout.newMenuIconSize} = rest;
   return (
     <div
       style={{backgroundColor: borderless ? "transparent" : color, width: containerSize, height: containerSize}}

package/src/appIcons.json

@@ -13023,6 +13023,26 @@
     "imageUrl": "https://images-temp.fibery.io/ui/appIcons/airtable.svg",
     "file": "airtable.svg"
   },
+  {
+    "name": "Asana",
+    "short_names": ["asana"],
+    "customCategory": "Integrations",
+    "text": "",
+    "emoticons": [],
+    "keywords": ["logo", "brand", "integration", "asana"],
+    "imageUrl": "https://images-temp.fibery.io/ui/appIcons/asana.svg",
+    "file": "asana.svg"
+  },
+  {
+    "name": "Fibery",
+    "short_names": ["fibery"],
+    "customCategory": "Integrations",
+    "text": "",
+    "emoticons": [],
+    "keywords": ["logo", "brand", "integration", "fibery"],
+    "imageUrl": "https://images-temp.fibery.io/ui/appIcons/fibery-logo.svg",
+    "file": "fibery-logo.svg"
+  },
   {
     "name": "Readwise",
     "short_names": ["readwise"],

package/src/badge.tsx

@@ -1,10 +1,10 @@
-import {ReactNode, forwardRef} from "react";
 import {css, cx} from "@linaria/core";
-import {border, space, textStyles, themeVars} from "./design-system";
+import {ReactNode, forwardRef} from "react";
+import {space, textStyles, themeVars} from "./design-system";
 
 type Props = {
   children: ReactNode;
-  kind?: "success" | "error" | "default";
+  kind?: "success" | "error" | "default" | "warning";
 };
 
 export const Badge = forwardRef<HTMLSpanElement, Props>(({children, kind, ...otherProps}, ref) => {
@@ -14,12 +14,14 @@ export const Badge = forwardRef<HTMLSpanElement, Props>(({children, kind, ...oth
       {...otherProps}
       className={cx(
         css`
-          ${textStyles.heading7}
+          ${textStyles.heading8}
           position: relative;
-          top: -1px;
-          padding: ${space.s2}px ${space.s6}px;
+          padding: ${space.s2}px 5px;
           background: ${themeVars.badgeBgColor};
-          border-radius: ${border.radius12}px;
+          border-radius: ${space.s4}px;
+          display: flex;
+          align-items: center;
+          gap: ${space.s2}px;
         `,
         kind === "success" &&
           css`
@@ -30,6 +32,11 @@ export const Badge = forwardRef<HTMLSpanElement, Props>(({children, kind, ...oth
           css`
             color: ${themeVars.colorTextBadgeError};
             background: ${themeVars.colorBgBadgeError};
+          `,
+        kind === "warning" &&
+          css`
+            color: ${themeVars.colorTextBadgeWarning};
+            background: ${themeVars.colorBgBadgeWarning};
           `
       )}
     >

package/src/beta-badge.tsx

@@ -1,17 +1,21 @@
 import {css} from "@linaria/core";
-import {fontWeight, space, textStyles, themeVars} from "./design-system";
+import {space, textStyles, themeVars} from "./design-system";
 
 const betaBadgeStyle = css`
-  ${textStyles.heading7}
-  text-transform: none;
-  font-weight: ${fontWeight.medium};
+  ${textStyles.heading8}
   display: inline-block;
-  padding: ${space.s2}px 4.5px ${space.s2}px 5px;
+  padding: ${space.s2}px 5px;
   color: ${themeVars.colorAI};
   background-color: ${themeVars.colorBgAI};
   vertical-align: text-top;
-  border-radius: 4px;
+  border-radius: ${space.s4}px;
 `;
 
-type Props = {children: React.ReactNode};
-export const BetaBadge: React.FC<Props> = ({children}) => <span className={betaBadgeStyle}>{children}</span>;
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const BetaBadge: React.FC<Props> = ({children, className}) => (
+  <span className={`${betaBadgeStyle} ${className ?? ""}`}>{children}</span>
+);

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

@@ -5,7 +5,7 @@ import MoreCompactIcon from "../icons/react/MoreCompact";
 export const ActionsButtonCompact = forwardRef<HTMLButtonElement, IconButtonProps>(
   function ActionsButtonCompactComponent({...rest}, ref) {
     return (
-      <IconButton ref={ref} size="small" {...rest}>
+      <IconButton supportMobile={true} ref={ref} size="small" {...rest}>
         <MoreCompactIcon />
       </IconButton>
     );

package/src/button/base-button.tsx

@@ -11,6 +11,7 @@ export type BaseButtonProps = {
   variant?: ButtonVariant;
   color?: ButtonColor;
   pressed?: boolean;
+  supportMobile?: boolean;
 } & React.ComponentPropsWithRef<"button">;
 
 export const baseButton = css`
@@ -29,7 +30,7 @@ export const baseButton = css`
 
   background-color: var(--fibery-button-color);
 
-  box-shadow: 0 0 0 0.5px var(--fibery-button-border-color);
+  box-shadow: inset 0 0 0 1px var(--fibery-button-border-color);
 
   &:hover:not(:disabled) {
     background-color: var(--fibery-button-hover-color);

package/src/button/button.tsx

@@ -5,6 +5,7 @@ import {iconSizeVar} from "../icons/Icon";
 import SpinnerIcon from "../icons/react/Spinner";
 import {BaseButton, BaseButtonProps, ButtonSize} from "./base-button";
 import {useIsSupportHardwareKeyboard} from "../use-is-support-hardware-keyboard";
+import {useIsPhone} from "../use-is-phone";
 
 export type ButtonProps = {
   size?: ButtonSize;
@@ -15,6 +16,10 @@ export type ButtonProps = {
   iconEnd?: React.ReactNode;
 } & BaseButtonProps;
 
+const withIconStart = css``;
+const withIconEnd = css``;
+const withoutChildren = css``;
+
 const button = css`
   display: flex;
   align-items: center;
@@ -24,6 +29,7 @@ const button = css`
 `;
 
 const shortcutContainer = css`
+  display: flex;
   font-size: ${textStyles.small.fontSize}px;
   font-weight: ${fontWeight.regular};
   opacity: 0.7;
@@ -39,6 +45,21 @@ const buttonSize = {
     gap: ${space.s2}px;
 
     ${iconSizeVar}: 14px;
+
+    &.${withIconStart} {
+      padding-left: ${space.s4}px;
+      padding-right: ${space.s6}px;
+    }
+
+    &.${withIconEnd} {
+      padding-left: ${space.s6}px;
+      padding-right: ${space.s4}px;
+    }
+
+    &.${withoutChildren} {
+      padding-left: ${space.s3}px;
+      padding-right: ${space.s3}px;
+    }
   `,
   small: css`
     font-size: ${textStyles.small.fontSize}px;
@@ -49,6 +70,21 @@ const buttonSize = {
     gap: ${space.s4}px;
 
     ${iconSizeVar}: 16px;
+
+    &.${withIconStart} {
+      padding-left: ${space.s6}px;
+      padding-right: ${space.s8}px;
+    }
+
+    &.${withIconEnd} {
+      padding-left: ${space.s8}px;
+      padding-right: ${space.s6}px;
+    }
+
+    &.${withoutChildren} {
+      padding-left: ${space.s4}px;
+      padding-right: ${space.s4}px;
+    }
   `,
   medium: css`
     font-size: ${textStyles.regular.fontSize}px;
@@ -61,6 +97,21 @@ const buttonSize = {
     gap: ${space.s4}px;
 
     ${iconSizeVar}: 18px;
+
+    &.${withIconStart} {
+      padding-left: ${space.s8}px;
+      padding-right: ${space.s10}px;
+    }
+
+    &.${withIconEnd} {
+      padding-left: ${space.s10}px;
+      padding-right: ${space.s8}px;
+    }
+
+    &.${withoutChildren} {
+      padding-left: ${space.s6 - space.s1}px;
+      padding-right: ${space.s6 - space.s1}px;
+    }
   `,
   large: css`
     font-size: ${textStyles.regular.fontSize}px;
@@ -74,6 +125,21 @@ const buttonSize = {
 
     ${iconSizeVar}: 18px;
 
+    &.${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;
     }
@@ -86,15 +152,36 @@ const fullWidthMod = css`
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
-    {size = "medium", iconStart, iconEnd, className, children, pending, disabled, shortcut, fullWidth, ...buttonProps},
+    {
+      size = "medium",
+      iconStart,
+      supportMobile,
+      iconEnd,
+      className,
+      children,
+      pending,
+      disabled,
+      shortcut,
+      fullWidth,
+      ...buttonProps
+    },
     ref
   ) => {
     const isSupportHardwareKeyboard = useIsSupportHardwareKeyboard();
+    const isPhone = useIsPhone();
     return (
       <BaseButton
         ref={ref}
         disabled={disabled || pending}
-        className={cx(className, button, buttonSize[size], fullWidth && fullWidthMod)}
+        className={cx(
+          className,
+          button,
+          buttonSize[supportMobile && isPhone ? "large" : size],
+          fullWidth && fullWidthMod,
+          iconStart && withIconStart,
+          iconEnd && withIconEnd,
+          !children && withoutChildren
+        )}
         {...buttonProps}
       >
         {pending ? <SpinnerIcon /> : iconStart}

package/src/button/icon-button.tsx

@@ -4,6 +4,7 @@ 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 {useIsPhone} from "../use-is-phone";
 
 export type IconButtonProps = {
   size?: ButtonSize;
@@ -54,13 +55,14 @@ export const iconButtonSizes = {
 };
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
-  {size = "medium", className, variant = "ghost", color = "neutral", pending, children, ...rest},
+  {size = "medium", supportMobile, className, variant = "ghost", color = "neutral", pending, children, ...rest},
   ref
 ) {
+  const isPhone = useIsPhone();
   return (
     <BaseButton
       ref={ref}
-      className={cx(className, iconButton, iconButtonSizes[size])}
+      className={cx(className, iconButton, iconButtonSizes[supportMobile && isPhone ? "large" : size])}
       variant={variant}
       color={color}
       {...rest}

package/src/button/select-button.tsx

@@ -4,10 +4,24 @@ import {space} from "../design-system";
 import ArrowBottom from "../icons/react/ArrowBottom";
 import {Button, ButtonProps} from "./button";
 
-const selectIndicator = css`
-  margin-left: -${space.s4}px;
-  margin-right: -${space.s4}px;
-`;
+const iconSize = {
+  tiny: css`
+    margin-left: -${space.s2}px;
+    margin-right: -${space.s2}px;
+  `,
+  small: css`
+    margin-left: -${space.s3}px;
+    margin-right: -${space.s3}px;
+  `,
+  medium: css`
+    margin-left: -${space.s4}px;
+    margin-right: -${space.s4}px;
+  `,
+  large: css`
+    margin-left: -${space.s4}px;
+    margin-right: -${space.s4}px;
+  `,
+};
 
 export type SelectButtonProps = {
   /**
@@ -19,16 +33,17 @@ export type SelectButtonProps = {
 } & Omit<ButtonProps, "iconEnd">;
 
 export const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(function SelectButton(
-  {className, open, ...rest},
+  {size = "medium", className, open, variant = "ghost", color = "neutral", ...rest},
   forwardedRef
 ) {
   return (
     <Button
       ref={forwardedRef}
       aria-expanded={open}
-      iconEnd={<ArrowBottom className={selectIndicator} />}
-      variant="ghost"
-      color="neutral"
+      size={size}
+      iconEnd={<ArrowBottom className={iconSize[size]} />}
+      variant={variant}
+      color={color}
       className={className}
       {...rest}
     />