@fibery/ui-kit 1.36.2 → 1.38.0

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;
@@ -51,16 +52,26 @@ export const iconButtonSizes = {
 
     ${iconSizeVar}: 18px;
   `,
+  xLarge: css`
+    padding: ${space.s6}px;
+
+    min-width: 44px;
+    min-height: 44px;
+    border-radius: ${border.radius6}px;
+
+    ${iconSizeVar}: 24px;
+  `,
 };
 
 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,28 @@ 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;
+  `,
+  xLarge: css`
+    margin-left: -${space.s4}px;
+    margin-right: -${space.s4}px;
+  `,
+};
 
 export type SelectButtonProps = {
   /**
@@ -19,16 +37,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}
     />

package/src/card-container.tsx

@@ -1,12 +1,13 @@
-import {preventDefault} from "@fibery/react/src/prevent-default";
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css} from "@linaria/core";
 import {styled} from "@linaria/react";
 import cx from "classnames";
 import {CSSProperties, ReactNode} from "react";
 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`
@@ -273,59 +276,6 @@ const ColorCoding = styled.div<{backgroundColors: string[]}>`
   background: ${({backgroundColors}) => getBg(backgroundColors)};
 `;
 
-type LinkWrapperProps = {
-  href?: string;
-  coverArea: boolean;
-  children: ReactNode;
-};
-
-const LinkWrapper = ({href, coverArea, children}: LinkWrapperProps) => {
-  if (href) {
-    return (
-      <a
-        href={href}
-        draggable="false"
-        onClick={preventDefault}
-        // To avoid tab on hidden link. but with this we can't open card via keyboard navigation.
-        tabIndex={-1}
-        data-is-card-hidden-link={true}
-        className={
-          coverArea
-            ? cx(
-                css`
-                  &::after {
-                    content: "";
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
-                  }
-                `
-              )
-            : cx(
-                css`
-                  color: inherit;
-
-                  &:hover {
-                    color: inherit;
-                  }
-
-                  &:visited {
-                    color: inherit;
-                  }
-                `
-              )
-        }
-      >
-        {children}
-      </a>
-    );
-  } else {
-    return <>{children}</>;
-  }
-};
-
 type Props = {
   before: ReactNode;
   title: ReactNode;
@@ -338,8 +288,13 @@ type Props = {
   input?: boolean;
   linkHref?: string;
   titleClassName?: string;
+  titleString?: string;
 };
 
+const cardContent = css`
+  position: relative;
+`;
+
 export const CardContainer = ({
   cover,
   before,
@@ -352,6 +307,7 @@ export const CardContainer = ({
   input,
   linkHref,
   titleClassName,
+  titleString,
 }: Props) => {
   const showCover = Boolean(cover && coverHeightBySize[size]);
   const hasContent = Boolean(before || title || after);
@@ -381,14 +337,12 @@ export const CardContainer = ({
           {cover}
         </div>
       )}
-      <div
-        className={css`
-          position: relative;
-        `}
-      >
-        <LinkWrapper href={linkHref} coverArea={true}>
-          <div className={visuallyHidden}>{title}</div>
-        </LinkWrapper>
+      <div className={cardContent}>
+        {linkHref ? (
+          <CardHiddenLink href={linkHref} coverArea={true}>
+            <div className={visuallyHidden}>{title}</div>
+          </CardHiddenLink>
+        ) : null}
 
         {backgroundColors && <ColorCoding className={colorCodingClassName} backgroundColors={backgroundColors} />}
 
@@ -406,12 +360,25 @@ export const CardContainer = ({
                   titleClassName
                 )}
               >
-                <LinkWrapper href={linkHref} coverArea={false}>
-                  {title}
-                </LinkWrapper>
+                {title}
               </div>
             )}
             {after && <div className={afterStyles[size]}>{after}</div>}
+            <div
+              data-entity-title={titleString || ""}
+              className={cx(
+                `extension-entity-card-spot`,
+                css`
+                  display: none;
+                  .${cardContent}:hover &:not(:empty) {
+                    display: block;
+                    position: absolute;
+                    top: ${space.s6}px;
+                    right: ${space.s6}px;
+                  }
+                `
+              )}
+            />
           </div>
         )}
       </div>

package/src/card-hidden-link.tsx

@@ -0,0 +1,52 @@
+import {preventDefault} from "@fibery/react/src/prevent-default";
+import {css, cx} from "@linaria/core";
+import {ReactNode} from "react";
+
+type CardHiddenLinkProps = {
+  href: string;
+  coverArea: boolean;
+  children: ReactNode;
+};
+
+export const CardHiddenLink = ({href, coverArea, children}: CardHiddenLinkProps) => {
+  return (
+    <a
+      href={href}
+      draggable="false"
+      onClick={preventDefault}
+      // To avoid tab on hidden link. but with this we can't open card via keyboard navigation.
+      tabIndex={-1}
+      data-is-card-hidden-link={true}
+      className={
+        coverArea
+          ? cx(
+              css`
+                &::after {
+                  content: "";
+                  position: absolute;
+                  left: 0;
+                  top: 0;
+                  right: 0;
+                  bottom: 0;
+                }
+              `
+            )
+          : cx(
+              css`
+                color: inherit;
+
+                &:hover {
+                  color: inherit;
+                }
+
+                &:visited {
+                  color: inherit;
+                }
+              `
+            )
+      }
+    >
+      {children}
+    </a>
+  );
+};

package/src/collapsible-section.tsx

@@ -3,11 +3,17 @@ import ArrowBottom from "./icons/react/ArrowBottom";
 import ArrowTop from "./icons/react/ArrowTop";
 import {ReactNode, useCallback} from "react";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
+import {space} from "./design-system";
 
 const headerCss = css`
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: ${space.s8}px;
+`;
+
+const arrowCss = css`
+  margin-left: auto;
+  margin-right: 0;
 `;
 
 type Props = {
@@ -17,6 +23,8 @@ type Props = {
   collapsedDefault?: boolean;
   onCollapsedChange?: (collapsed: boolean) => void;
   children: ReactNode;
+  badge?: ReactNode;
+  keepChildren?: boolean;
 };
 
 export const CollapsibleSection = ({
@@ -26,6 +34,7 @@ export const CollapsibleSection = ({
   collapsedDefault = false,
   onCollapsedChange,
   children,
+  badge,
 }: Props) => {
   const [isCollapsed, setIsCollapsed] = useControllableState({
     value: collapsed,
@@ -33,7 +42,7 @@ export const CollapsibleSection = ({
     onChange: onCollapsedChange,
   });
 
-  const arrow = isCollapsed ? <ArrowBottom /> : <ArrowTop />;
+  const arrow = isCollapsed ? <ArrowBottom className={arrowCss} /> : <ArrowTop className={arrowCss} />;
 
   const onToggle = useCallback(() => setIsCollapsed(!isCollapsed), [isCollapsed, setIsCollapsed]);
 
@@ -54,6 +63,7 @@ export const CollapsibleSection = ({
       }}
     >
       {label}
+      {badge}
       {arrow}
     </div>
   );
@@ -63,7 +73,7 @@ export const CollapsibleSection = ({
   return (
     <div>
       {collapsible ? collapsibleHeader : regularHeader}
-      {collapsible && isCollapsed ? null : children}
+      <div style={{display: collapsible && isCollapsed ? "none" : "block"}}>{children}</div>
     </div>
   );
 };

package/src/color-picker/index.js

@@ -29,76 +29,80 @@ const hexInpuWrapperCss = css`
   margin-top: ${space.s12}px;
 `;
 
-const SliderPicker = ColorWrap(({containerClassName, colors, getSwatchHoverColor, ...rest}) => {
-  const hasSelectedColor = Boolean(rest.color);
+const SliderPicker = ColorWrap(
+  ({containerClassName, colors, getSwatchHoverColor, getColorOverrideFn = undefined, ...rest}) => {
+    const hasSelectedColor = Boolean(rest.color);
 
-  const idxSelectedColor = colors?.findIndex((color) => color.toLowerCase() === rest.hex.toLowerCase());
+    const idxSelectedColor = colors?.findIndex((color) => color.toLowerCase() === rest.hex.toLowerCase());
 
-  const [isExpanded, setIsExpanded] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
 
-  const isCustomSwatchSelected = (idxSelectedColor === -1 && hasSelectedColor) || isExpanded;
+    const isCustomSwatchSelected = (idxSelectedColor === -1 && hasSelectedColor) || isExpanded;
+    const getColorOverride = getColorOverrideFn || ((color) => color);
 
-  return (
-    <CollapsibleRoot open={isCustomSwatchSelected} onOpenChange={setIsExpanded} className={pickerWrapperCss}>
-      {colors && (
-        <div className={containerClassName}>
-          {colors.map((color, idx) => (
-            <Swatch
-              key={color}
-              getHoverColor={getSwatchHoverColor}
-              onClick={() => {
-                setIsExpanded(false);
-                rest.onChange(color);
+    return (
+      <CollapsibleRoot open={isCustomSwatchSelected} onOpenChange={setIsExpanded} className={pickerWrapperCss}>
+        {colors && (
+          <div className={containerClassName}>
+            {colors.map((color, idx) => (
+              <Swatch
+                key={color}
+                getHoverColor={getSwatchHoverColor}
+                onClick={() => {
+                  setIsExpanded(false);
+                  rest.onChange(color);
+                }}
+                color={getColorOverride(color)}
+                selected={!isCustomSwatchSelected && idxSelectedColor === idx}
+              />
+            ))}
+            <CollapsibleTrigger asChild>
+              <Swatch
+                custom
+                getHoverColor={getSwatchHoverColor}
+                onClick={() => setIsExpanded(!isExpanded)}
+                selected={isCustomSwatchSelected}
+                color={isCustomSwatchSelected ? rest.hex : undefined}
+              />
+            </CollapsibleTrigger>
+          </div>
+        )}
+
+        <CollapsibleContent>
+          <div className={saturationWrapperCss}>
+            <Saturation {...rest} pointer={SliderPointer} />
+          </div>
+          <div className={hueWrapperCss}>
+            <Hue {...rest} pointer={SliderPointer} />
+          </div>
+          <div className={hexInpuWrapperCss}>
+            <EditableInput
+              style={{
+                input: {
+                  padding: `${space.s6}px ${space.s12}px`,
+                  width: "100%",
+                  border: "none",
+                  borderRadius: border.radius6,
+                  backgroundColor: themeVars.actionMenuBg,
+                  boxShadow: themeVars.inputBorderColor,
+                  outline: "none",
+                  ...textStyles.regular,
+                },
               }}
-              color={color}
-              selected={!isCustomSwatchSelected && idxSelectedColor === idx}
-            />
-          ))}
-          <CollapsibleTrigger asChild>
-            <Swatch
-              custom
-              getHoverColor={getSwatchHoverColor}
-              onClick={() => setIsExpanded(!isExpanded)}
-              selected={isCustomSwatchSelected}
-              color={isCustomSwatchSelected ? rest.hex : undefined}
+              value={rest.hex}
+              onChange={rest.onChange}
             />
-          </CollapsibleTrigger>
-        </div>
-      )}
-
-      <CollapsibleContent>
-        <div className={saturationWrapperCss}>
-          <Saturation {...rest} pointer={SliderPointer} />
-        </div>
-        <div className={hueWrapperCss}>
-          <Hue {...rest} pointer={SliderPointer} />
-        </div>
-        <div className={hexInpuWrapperCss}>
-          <EditableInput
-            style={{
-              input: {
-                padding: `${space.s6}px ${space.s12}px`,
-                width: "100%",
-                border: "none",
-                borderRadius: border.radius6,
-                backgroundColor: themeVars.actionMenuBg,
-                boxShadow: themeVars.inputBorderColor,
-                outline: "none",
-                ...textStyles.regular,
-              },
-            }}
-            value={rest.hex}
-            onChange={rest.onChange}
-          />
-        </div>
-      </CollapsibleContent>
-    </CollapsibleRoot>
-  );
-});
+          </div>
+        </CollapsibleContent>
+      </CollapsibleRoot>
+    );
+  }
+);
 
 export const ColorPicker = ({
   color,
   getSwatchHoverColor,
+  getColorOverrideFn = undefined,
   colors,
   onChangeComplete,
   containerClassName = colorSwatchContainerCss,
@@ -110,6 +114,7 @@ export const ColorPicker = ({
       containerClassName={containerClassName}
       color={optimisticColor}
       getSwatchHoverColor={getSwatchHoverColor}
+      getColorOverrideFn={getColorOverrideFn}
       colors={colors}
       onChange={setOptimisticColor}
       onChangeComplete={onChangeComplete}

package/src/color-picker/swatch.tsx

@@ -1,22 +1,26 @@
-import {CSSProperties, css, cx} from "@linaria/core";
+import {css, CSSProperties, cx} from "@linaria/core";
 import {forwardRef} from "react";
 import {IconButton, IconButtonProps} from "../button/icon-button";
 import {themeVars} from "../design-system";
 
+const swatchColorVar = "--fibery-swatch-color";
+const swatchHoverColorVar = "--fibery-swatch-hover-color";
+const swatchIconSizeVar = "--fibery-swatch-icon-size";
+
 const swatchContainerCss = css`
   &:hover:not(:disabled),
   &:focus-visible {
-    background-color: var(--fibery-swatch-hover-color, ${themeVars.badgeBgColor});
+    background-color: var(${swatchHoverColorVar}, ${themeVars.badgeBgColor});
   }
 `;
 
 const swatchCss = css`
   position: relative;
   border-radius: 100%;
-  width: 20px;
-  height: 20px;
+  width: var(${swatchIconSizeVar});
+  height: var(${swatchIconSizeVar});
   border: 1px solid ${themeVars.colorPickerSwatchBorder};
-  background-color: var(--swatch-color);
+  background-color: var(${swatchColorVar});
 `;
 
 const selectedCss = css`
@@ -24,8 +28,8 @@ const selectedCss = css`
     content: "";
     position: absolute;
     display: block;
-    width: 16px;
-    height: 16px;
+    width: calc(var(${swatchIconSizeVar}) - 4px);
+    height: calc(var(${swatchIconSizeVar}) - 4px);
     border-radius: 100%;
     top: 1px;
     left: 1px;
@@ -51,28 +55,39 @@ const customCss = css`
 
   &.${selectedCss} {
     &::after {
-      background-color: var(--swatch-color);
+      background-color: var(${swatchColorVar});
     }
   }
 `;
 
+const iconSizes = {
+  tiny: 16,
+  small: 16,
+  medium: 18,
+  large: 20,
+  huge: 22,
+  xLarge: 22,
+};
+
 type SwatchProps = {
   color: string;
   getHoverColor?: (color: string) => string | undefined;
-  selected: boolean;
+  selected?: boolean;
   custom?: boolean;
-} & Omit<IconButtonProps, "size">;
+} & Omit<IconButtonProps, "color">;
+
 export const Swatch = forwardRef<HTMLButtonElement, SwatchProps>(
-  ({color, getHoverColor, selected, custom, className, ...rest}, ref) => {
+  ({size = "large", color, getHoverColor, selected, custom, className, ...rest}, ref) => {
     return (
       <IconButton
         ref={ref}
-        size="large"
+        size={size}
         title={color}
         style={
           {
-            "--swatch-color": color,
-            "--fibery-swatch-hover-color": color ? getHoverColor?.(color) : undefined,
+            [swatchColorVar]: color,
+            [swatchHoverColorVar]: color ? getHoverColor?.(color) : undefined,
+            [swatchIconSizeVar]: `${iconSizes[size]}px`,
           } as CSSProperties
         }
         className={cx(swatchContainerCss, className)}

package/src/command-menu/index.tsx

@@ -4,7 +4,7 @@ import {css, cx} from "@linaria/core";
 import {styled} from "@linaria/react";
 import {CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandRoot, CommandSeparator} from "cmdk";
 import {forwardRef, useRef, useState} from "react";
-import {border, layout, space, textStyles, themeVars} from "../design-system";
+import {border, layout, layoutVars, space, textStyles, themeVars} from "../design-system";
 import ClearInputFilled from "../icons/react/ClearInputFilled";
 import Search from "../icons/react/Search";
 
@@ -20,9 +20,10 @@ export const CommandMenuRoot = styled(CommandRoot)`
 
 const inputContainerCss = css`
   display: flex;
-  padding: ${space.s8}px ${space.s12}px;
+  padding: ${space.s4}px ${space.s12}px ${space.s8}px;
   align-items: center;
   border-bottom: 1px solid ${themeVars.separatorColor};
+  margin-bottom: ${space.s4}px;
 
   & input {
     min-width: 120px;
@@ -84,7 +85,6 @@ export const CommandMenuList = styled(CommandList)`
   height: var(--cmdk-list-height);
   max-height: 450px;
   transition: height 100ms ease;
-  margin-top: ${space.s4}px;
 `;
 
 export const CommandMenuEmpty = styled(CommandEmpty)`
@@ -92,7 +92,7 @@ export const CommandMenuEmpty = styled(CommandEmpty)`
   display: flex;
   align-items: center;
   padding: 0 ${space.s12}px;
-  min-height: ${layout.itemHeight}px;
+  min-height: ${layoutVars.menuItemHeight};
   color: ${themeVars.accentTextColor};
 `;
 
@@ -119,7 +119,7 @@ export const commandItemCss = css`
   gap: ${space.s6}px;
   padding: 0 ${space.s8}px;
   cursor: pointer;
-  min-height: ${layout.menuItemHeight}px;
+  min-height: ${layoutVars.menuItemHeight};
   margin: 0 ${space.s4}px;
   border-radius: ${border.radius6}px;
 

package/src/context-menu/index.tsx

@@ -3,6 +3,7 @@ import {styled} from "@linaria/react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import {forwardRef} from "react";
 import {border, layout, space, textStyles, themeVars} from "../design-system";
+import {mobileRootSelector} from "../mobile-styles";
 
 export const Root = (contextMenuProps: ContextMenuPrimitive.ContextMenuProps) => (
   <ContextMenuPrimitive.Root dir="ltr" {...contextMenuProps} />
@@ -22,7 +23,7 @@ export const rowItemStyles = {
   margin: `0px ${space.s4}px`,
   cursor: "pointer",
 
-  "&:hover,&[data-highlighted]": {
+  '&:hover,&[data-highlighted],&[aria-expanded="true"]': {
     inset: "10px 4px",
     marginLeft: 4,
     marginRight: 4,
@@ -34,11 +35,19 @@ export const rowItemStyles = {
     cursor: "default",
     color: themeVars.disabledTextColor,
 
+    "--actions-menu-item-icon-color": themeVars.disabledTextColor,
+
     "&:hover": {
       color: themeVars.disabledTextColor,
       backgroundColor: themeVars.transparent,
     },
   },
+
+  [`${mobileRootSelector} &`]: {
+    ...textStyles.big,
+    minHeight: layout.mobileMenuItemHeight,
+    padding: `0px ${space.s12}px`,
+  },
 };
 
 const dropdownMenuContentStyles = css`