@fibery/ui-kit 1.38.0 → 1.38.2

package/src/date-picker/date-range-picker-popup-content.tsx

@@ -19,6 +19,7 @@ import {
   weekendClassName,
 } from "./styles";
 import {getWeekendsForMonth} from "./get-weekends-for-month";
+import {mobileRootSelector} from "../mobile-styles";
 
 export const sortDates = ({from, to}: {from: Date; to: Date}) => {
   const [sortedFrom, sortedTo] = [from, to].sort((a, b) => a.getTime() - b.getTime());
@@ -108,19 +109,36 @@ export const DateRangePickerPopupContent = forwardRef<
       : null;
 
   const footer = duration ? (
-    <div
-      className={css`
-        background-color: ${themeVars.inputDisabledBgColor};
-        border-radius: ${border.radius6}px;
-        padding: ${space.s4}px ${space.s8}px;
-        ${textStyles.small}
-        text-align: center;
-        color: ${themeVars.disabledTextColor};
-        margin-top: ${space.s12}px;
-      `}
-    >
-      {duration}
-    </div>
+    <>
+      <hr
+        className={css`
+          display: none;
+          margin: 0 ${-space.s12}px;
+          border: none;
+          border-bottom: ${themeVars.separators.opacity5};
+          ${mobileRootSelector} & {
+            display: block;
+          }
+        `}
+      />
+      <div
+        className={css`
+          background-color: ${themeVars.inputDisabledBgColor};
+          border-radius: ${border.radius6}px;
+          padding: ${space.s4}px ${space.s8}px;
+          ${textStyles.small}
+          text-align: center;
+          color: ${themeVars.disabledTextColor};
+          margin-top: ${space.s12}px;
+          ${mobileRootSelector} & {
+            ${textStyles.big}
+            color: ${themeVars.disabledTextColor};
+          }
+        `}
+      >
+        {duration}
+      </div>
+    </>
   ) : null;
 
   const placeholder = useRef<string>(`e.g. ${getRandomPlaceholder(showTime, true)}`);

package/src/date-picker/single-date-input.tsx

@@ -6,6 +6,7 @@ import {AntTransparentInput} from "../antd/input";
 import {inputOverrides} from "../antd/styles";
 import {space} from "../design-system";
 import {IconButton} from "../button/icon-button";
+import {mobileRootSelector} from "../mobile-styles";
 import RemoveIcon from "../icons/react/Remove";
 import {AutoComplete, OnChangeArgs} from "./autocomplete";
 import {InputRef} from "./rc-input-types";
@@ -192,6 +193,9 @@ export const SingleDateInput = forwardRef<
             display: flex;
             margin-bottom: ${space.s12 + space.s6}px;
             padding-right: ${space.s12 - 2}px;
+            ${mobileRootSelector} & {
+              min-height: ${space.s44}px;
+            }
           `,
           {[selectedStyle]: selected, [disabledStyle]: disabled}
         )}
@@ -228,7 +232,7 @@ export const SingleDateInput = forwardRef<
             />
           </div>
           {allowClear && inputValue !== "" && (
-            <IconButton onClick={onClear} size={"tiny"}>
+            <IconButton onClick={onClear} size={"tiny"} supportMobile>
               <RemoveIcon />
             </IconButton>
           )}

package/src/date-picker/styles.ts

@@ -156,6 +156,10 @@ export const datePickerStylesOverrideClassName = css`
     position: relative;
 
     margin: 0;
+
+    ${mobileRootSelector} & {
+      --rdp-cell-size: 44px;
+    }
   }
 
   padding: ${space.s12}px;
@@ -171,6 +175,9 @@ export const datePickerStylesOverrideClassName = css`
     border: none;
     color: ${themeVars.textColor};
     border-radius: 0;
+    ${mobileRootSelector} & {
+      ${textStyles.big}
+    }
   }
 
   .rdp-day:focus {
@@ -237,6 +244,14 @@ export const datePickerStylesOverrideClassName = css`
   .rdp-head th {
     ${textStyles.small};
     color: ${themeVars.disabledTextColor};
+    ${mobileRootSelector} & {
+      ${textStyles.regular}
+      color: ${themeVars.accentTextColor};
+    }
+  }
+
+  ${mobileRootSelector} & .rdp-caption {
+    margin: ${space.s8}px 0;
   }
 
   .rdp-caption_label {
@@ -252,6 +267,11 @@ export const datePickerStylesOverrideClassName = css`
     padding: ${space.s6}px !important;
   }
 
+  ${mobileRootSelector} & .rdp-nav_button {
+    width: ${space.s44}px;
+    height: ${space.s44}px;
+  }
+
   .rdp-nav_icon {
     color: ${themeVars.textColor};
   }

package/src/design-system.ts

@@ -33,6 +33,22 @@ export const fontWeight = {
   bold: 700,
 } as const;
 
+// 300 basic, 310 experiment with a variable Inter
+export const fontSize = {
+  xxl: 30,
+  xl: 24,
+  lg: 18,
+  md: 16,
+  sm: 15,
+  xs: 14,
+  xxs: 13,
+  xxxs: 12,
+  tiny: 11,
+  mini: 10,
+  micro: 9,
+  nano: 8,
+} as const;
+
 const transparent = "rgba(255, 255, 255, 0)";
 
 export const minPanelWidth = 490;
@@ -246,6 +262,8 @@ export const themeColors = {
   menuFooterHoverColor: [getOpacities(whiteA.whiteA0).opacity60, slateDark.slate4],
   menuIconColor: [getOpacities(slate.slate12).opacity70, getOpacities(slateDark.slate12).opacity70],
   menuSelectedIconColor: [getOpacities(slate.slate1).opacity90, getOpacities(slate.slate1).opacity90],
+
+  // Text, links colors
   textColor: [slateDark.slate5, slate.slate6],
   textSelectionColor: [getOpacities(blue.blue10).opacity20, getOpacities(blueDark.blue10).opacity40],
   accentTextColor: [slate.slate10, slateDark.slate10],
@@ -281,10 +299,11 @@ export const themeColors = {
   ],
   entityNodeBgColor: [slate.slate2, slateDark.slate3],
   shortcutTextColor: [slate.slate9, slateDark.slate11],
-  shortcutBorderColor: [
+  shortcutBorder: [
     `1px solid ${getOpacities(slate.slate8).opacity50}`,
     `1px solid ${getOpacities(slateDark.slate10).opacity20}`,
   ],
+  shortcutBorderColor: [getOpacities(slate.slate8).opacity50, getOpacities(slateDark.slate10).opacity20],
 
   // Input
   inputBgColor: [whiteA.whiteA0, slateDark.slate2],
@@ -575,6 +594,11 @@ export const themeColors = {
   // Drag and drop
   colorBgDropLine: [indigo.indigo8, indigoDark.indigo8],
 
+  // Views
+  viewBg: [slate.slate1, slateDark.slate1],
+  viewSecondaryBg: [slate.slate2, slateDark.slate2],
+  viewHighlightBg: [indigo.indigo3, indigoDark.indigo3],
+
   // Board
   boardBg: [slate.slate1, slateDark.slate1],
   boardBgWithOpacity80: [getOpacities(slate.slate1).opacity80, getOpacities(slateDark.slate1).opacity80],
@@ -972,6 +996,7 @@ export const space = {
   s44: 44,
   s48: 48,
   s56: 56,
+  s60: 60,
   s64: 64,
   s80: 80,
   s96: 96,

package/src/dropdown-menu/index.tsx

@@ -10,7 +10,17 @@ export const Root = (dropdownMenuProps: DropdownMenuPrimitive.DropdownMenuProps)
   <DropdownMenuPrimitive.Root dir="ltr" modal={false} {...dropdownMenuProps} />
 );
 
-export const Trigger = DropdownMenuPrimitive.Trigger;
+export const Trigger = forwardRef<
+  HTMLButtonElement,
+  DropdownMenuPrimitive.DropdownMenuTriggerProps & {triggerEvent?: string}
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+>(({triggerEvent, className, children, ...otherProps}, ref) => {
+  return (
+    <DropdownMenuPrimitive.Trigger ref={ref} className={className} {...otherProps}>
+      {children}
+    </DropdownMenuPrimitive.Trigger>
+  );
+});
 
 const rowItemStyles = {
   ...textStyles.regular,

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

@@ -9,6 +9,7 @@ import {useEmojiPreview} from "./primitives/preview-provider";
 import {useEmojiPickerCtx} from "./primitives/root";
 import {useEmojiSkin} from "./primitives/skin-provider";
 import {EmojiPickerSkinTone} from "./primitives/skin-tone";
+import {mobileRootSelector} from "../mobile-styles";
 
 const previewCss = css`
   display: flex;
@@ -81,6 +82,9 @@ export const EmojiPickerPreviewFooter: React.FC<{
             position: absolute;
             top: 4px;
             right: ${space.s12}px;
+            ${mobileRootSelector} & {
+              top: 12px;
+            }
           `}
           style={{
             right: space.s12 + measureScrollbar(),

package/src/emoji-picker/emoji.tsx

@@ -2,8 +2,9 @@ import {isAndroid} from "../is-android";
 import {Emoji as EmojiPrimitive, EmojiProps as EmojiPrimitiveProps} from "./primitives/emoji";
 import {isApple} from "./utils/emoji-set";
 import {detectEmojiSupportLevel} from "./utils/emoji-support";
+import {forwardRef} from "react";
 
 export type EmojiProps = EmojiPrimitiveProps;
-export const Emoji: React.FC<EmojiPrimitiveProps> = (props) => {
-  return <EmojiPrimitive version={detectEmojiSupportLevel()} native={isApple() || isAndroid()} {...props} />;
-};
+export const Emoji = forwardRef<HTMLSpanElement, EmojiPrimitiveProps>((props, ref) => {
+  return <EmojiPrimitive ref={ref} version={detectEmojiSupportLevel()} native={isApple() || isAndroid()} {...props} />;
+});

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

@@ -1,4 +1,4 @@
-import {FC} from "react";
+import {forwardRef} from "react";
 import {EmojiItem, EmojiSkin, NativeEmoji} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
 import {themeVars} from "../../design-system";
@@ -43,77 +43,75 @@ export type EmojiProps = {
   emoji: string;
   /** max supported version of emojis */
   version?: number;
-  onClick?: (emoji: EmojiItem, event: React.MouseEvent) => void;
   skin?: EmojiSkin;
   /** render emoji as native unicode if possible */
   native?: boolean;
   fallback?: "shortcode" | "hidden";
   showTitle?: boolean;
-};
+} & React.HTMLAttributes<HTMLSpanElement>;
 
-function getTitle(emoji: EmojiItem) {
+export function getTitle(emoji: EmojiItem) {
   if ((emoji as NativeEmoji).native) {
     return emoji.colons;
   }
   return `:${emoji.name}:`;
 }
 
-export const Emoji: FC<EmojiProps> = ({
-  emoji: idOrColons,
-  size,
-  version = 14,
-  fallback = "hidden",
-  skin,
-  native,
-  showTitle = false,
-}) => {
-  const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
-  const config = useEmojiRenderConfig();
-  if (!emoji) {
-    return fallback === "shortcode" ? <>{idOrColons}</> : null;
-  }
+export const Emoji = forwardRef<HTMLSpanElement, EmojiProps>(
+  (
+    {className, emoji: idOrColons, size, version = 14, fallback = "hidden", skin, native, showTitle = false, ...rest},
+    ref
+  ) => {
+    const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
+    const config = useEmojiRenderConfig();
+    if (!emoji) {
+      return fallback === "shortcode" ? <>{idOrColons}</> : null;
+    }
 
-  let emojiNode: React.ReactNode;
+    let emojiNode: React.ReactNode;
 
-  if ("native" in emoji) {
-    if (native && version >= emoji.version) {
-      emojiNode = emoji.native;
+    if ("native" in emoji) {
+      if (native && version >= emoji.version) {
+        emojiNode = emoji.native;
+      } else {
+        emojiNode = (
+          <img
+            alt={emoji.name}
+            className={cx(size ? emojiSizedImgCss : emojiInlineImgCss)}
+            src={emptyPixel}
+            style={{
+              backgroundImage: `url(${emoji.sprite.src})`,
+              backgroundSize: emoji.sprite.size,
+              backgroundPosition: emoji.sprite.position,
+            }}
+          />
+        );
+      }
     } else {
       emojiNode = (
         <img
           alt={emoji.name}
+          loading={config.loading}
+          draggable={config.draggable}
           className={cx(size ? emojiSizedImgCss : emojiInlineImgCss)}
-          src={emptyPixel}
-          style={{
-            backgroundImage: `url(${emoji.sprite.src})`,
-            backgroundSize: emoji.sprite.size,
-            backgroundPosition: emoji.sprite.position,
-          }}
+          src={emoji.imageUrl}
         />
       );
     }
-  } else {
-    emojiNode = (
-      <img
-        alt={emoji.name}
-        loading={config.loading}
-        draggable={config.draggable}
-        className={cx(size ? emojiSizedImgCss : emojiInlineImgCss)}
-        src={emoji.imageUrl}
-      />
-    );
-  }
 
-  const style = size ? {fontSize: size, width: size, height: size} : {};
+    const style = size ? {fontSize: size, width: size, height: size} : {};
 
-  return (
-    <span
-      style={style}
-      title={showTitle ? getTitle(emoji) : undefined}
-      className={cx(emojiWrapperCss, size && emojiWrapperSizedCss)}
-      aria-label={emoji.name}
-    >
-      {emojiNode}
-    </span>
-  );
-};
+    return (
+      <span
+        ref={ref}
+        style={style}
+        title={showTitle ? getTitle(emoji) : undefined}
+        className={cx(className, emojiWrapperCss, size && emojiWrapperSizedCss)}
+        aria-label={emoji.name}
+        {...rest}
+      >
+        {emojiNode}
+      </span>
+    );
+  }
+);

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

@@ -1,13 +1,19 @@
 import {css} from "@linaria/core";
 import {space} from "../../design-system";
+import {mobileRootSelector} from "../../mobile-styles";
 
 const footerCss = css`
   position: relative;
   border-top: 1px solid var(--fibery-color-separatorColor);
   padding: ${space.s6}px ${space.s12}px;
+  height: 40px;
 
   display: flex;
   align-items: center;
+
+  ${mobileRootSelector} & {
+    height: 68px;
+  }
 `;
 
 export const EmojiPickerFooter: React.FC<React.PropsWithChildren> = ({children}) => {

package/src/emoji-picker/primitives/search.tsx

@@ -12,6 +12,7 @@ import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useFoundEmojis, useSetFoundEmojis} from "./search-provider";
 import {useEmojiSkin} from "./skin-provider";
 import ClearInputFilled from "../../icons/react/ClearInputFilled";
+import {mobileRootSelector} from "../../mobile-styles";
 
 const searchCss = css`
   ${textStyles.regular}
@@ -27,6 +28,10 @@ const searchCss = css`
   padding: 0 ${space.s4}px;
   gap: ${space.s4}px;
 
+  ${mobileRootSelector} & {
+    height: 40px;
+  }
+
   /* For screenreaders only, via https://stackoverflow.com/a/19758620 */
   & .sr-only {
     position: absolute;
@@ -59,6 +64,9 @@ const searchInputCss = css`
 
 const searchIconCss = css`
   padding: ${space.s4}px;
+  ${mobileRootSelector} & {
+    padding: ${space.s6}px;
+  }
 `;
 
 const extraActionSlotCss = css`

package/src/emoji-picker/primitives/skin-tone.tsx

@@ -1,8 +1,10 @@
 import {EmojiSkin} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
 import {useState} from "react";
+import {useIsPhone} from "../../use-is-phone";
 import {IconButton} from "../../button/icon-button";
 import {textStyles, themeVars} from "../../design-system";
+import {mobileRootSelector} from "../../mobile-styles";
 import {Emoji} from "./emoji";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useEmojiSkin, useSetEmojiSkin} from "./skin-provider";
@@ -44,6 +46,10 @@ const skinToneSwatchCss = css`
 
 const expandedCss = css`
   width: 32px;
+
+  ${mobileRootSelector} & {
+    width: 44px;
+  }
 `;
 
 const openedSkinTextCss = css`
@@ -55,12 +61,17 @@ const openedSkinTextCss = css`
   width: 98px;
   color: ${themeVars.accentTextColor};
   padding-left: 8px;
+
+  ${mobileRootSelector} & {
+    display: none;
+  }
 `;
 
 export type EmojiPickerSkinToneProps = {
   className?: string;
 };
 export const EmojiPickerSkinTone: React.FC<EmojiPickerSkinToneProps> = ({className}) => {
+  const isPhone = useIsPhone();
   const [opened, setOpened] = useState(false);
   const emojiPickerCtx = useEmojiPickerCtx();
   const i18n = useEmojiPickerI18N();
@@ -75,14 +86,13 @@ export const EmojiPickerSkinTone: React.FC<EmojiPickerSkinToneProps> = ({classNa
     skinToneNodes.push(
       <span key={`skin-tone-${skinTone}`} className={cx(skinToneSwatchCss, (selected || opened) && expandedCss)}>
         <IconButton
-          size="large"
+          size={isPhone ? "xLarge" : "large"}
           onClick={() => {
             if (opened) {
               setSkin(skinTone as EmojiSkin);
             }
             setOpened(!opened);
           }}
-          supportMobile
           className={css`
             &:hover:not(:disabled),
             &:focus-visible {

package/src/fibermoji-placeholder.tsx

@@ -3,33 +3,7 @@ import {css} from "@linaria/core";
 import {FC, useEffect, useRef} from "react";
 import {textStyles} from "./design-system";
 import {useFeatures} from "./features";
-
-const preservedNameEmojis = ["🤖", "👻", "🧮", "🪄", "🔌", "🔗", "🔒"];
-
-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";
 
 const cyrb53 = (str: string, seed = 0) => {
   let h1 = 0xdeadbeef ^ seed;
@@ -64,7 +38,7 @@ const mouths = [
   `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" viewBox="0 0 32 16" fill="none"><g clip-path="url(#clip0_31_1134)"><path d="M4.23177 12.4853C2.41601 11.1761 1.06315 9.59547 0.249133 7.87572C-0.702621 5.86498 1.22002 4 3.51791 4L7 4C7.55229 4 8 4.44772 8 5V13.0522C8 13.7579 7.28869 14.2398 6.6548 13.9296C5.79179 13.5074 4.97984 13.0247 4.23177 12.4853Z" fill="currentColor"/><path d="M31.7509 7.87572C30.9369 9.59547 29.584 11.1761 27.7682 12.4853C27.0202 13.0247 26.2082 13.5074 25.3452 13.9296C24.7113 14.2398 24 13.7579 24 13.0522L24 5C24 4.44772 24.4477 4 25 4L28.4821 4C30.78 4 32.7026 5.86498 31.7509 7.87572Z" fill="currentColor"/><path d="M16 16C14.564 16 13.1472 15.8662 11.7816 15.6082C11.3227 15.5215 11 15.1143 11 14.6473V5C11 4.44772 11.4477 4 12 4L20 4C20.5523 4 21 4.44772 21 5V14.6473C21 15.1143 20.6773 15.5215 20.2184 15.6082C18.8528 15.8662 17.436 16 16 16Z" fill="currentColor"/></g><defs><clipPath id="clip0_31_1134"><rect width="32" height="16" fill="white"/></clipPath></defs></svg>`,
 ];
 
-const getColors = _.memoize((v: string) => {
+export const getColors = _.memoize((v: string) => {
   const idx = Math.floor((cyrb53(v) / Math.pow(2, 53)) * colors.length);
   return colors[idx];
 });
@@ -84,7 +58,6 @@ interface FibermojiPlaceholderProps {
 
 export const FibermojiPlaceholder: FC<FibermojiPlaceholderProps> = ({size, radius = "50%", title}) => {
   const eyes = useRef<HTMLDivElement>(null);
-
   const [fg, bg] = getColors(title ?? "unknown");
   const mouth = getMouth(title ?? "unknown");
   const letters = abbreviateName(title).split("");