@fibery/ui-kit 1.37.0 → 1.38.0

package/src/toggle-button/toggle-button.tsx

@@ -0,0 +1,164 @@
+import {css, cx} from "@linaria/core";
+import {Toggle, ToggleProps} from "@radix-ui/react-toggle";
+import {forwardRef} from "react";
+import {border, space, textStyles, themeVars} from "../design-system";
+import {iconColorVar, iconSizeVar} from "../icons/Icon";
+
+export const toggleButtonCss = css`
+  button:where(&) {
+    all: unset;
+  }
+
+  padding-inline: ${space.s6}px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  font-size: ${textStyles.small.fontSize}px;
+  border-radius: ${border.radius8}px;
+
+  transition-property: border, background-color, color, opacity, box-shadow;
+  transition-duration: 0.15s;
+
+  color: ${themeVars.textColor};
+  ${iconColorVar}: ${themeVars.colorIconButtonGhostNeutral};
+
+  ${iconSizeVar}: 16px;
+
+  border: 1.5px solid ${themeVars.colorBorderReactionsHover};
+  background-color: ${themeVars.colorBgReactionsDefault};
+
+  &[aria-readonly="true"] {
+    background-color: ${themeVars.colorBgReactionsHover};
+    border-color: ${themeVars.colorBgReactionsHover};
+  }
+
+  cursor: pointer;
+  line-height: 16px;
+  user-select: none;
+
+  &[data-size="medium"] {
+    min-height: 28px;
+  }
+
+  &[data-size="large"] {
+    min-height: 32px;
+    padding-inline: 7px;
+  }
+
+  &:not(:disabled, [aria-readonly="true"]) {
+    &:hover {
+      background-color: ${themeVars.colorBgReactionsHover};
+      border-color: ${themeVars.colorBorderReactionsHover};
+    }
+
+    &:is(:active, [aria-expanded="true"]) {
+      background-color: ${themeVars.colorBgReactionsHover};
+      border-color: ${themeVars.colorBorderReactionsHover};
+    }
+  }
+
+  &:disabled,
+  &[aria-readonly="true"] {
+    cursor: default;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    background-color: ${themeVars.colorBgReactionsHover};
+    outline: 2px solid ${themeVars.colorBorderReactionsHover};
+  }
+
+  &:is([aria-pressed="true"], [aria-checked="true"]) {
+    color: ${themeVars.colorTextReactionsSelected};
+    ${iconColorVar}: ${themeVars.colorIconButtonGhostAccent};
+    background-color: ${themeVars.colorBgReactionsSelectedDefault};
+    border-color: ${themeVars.colorBorderReactionsSelectedDefault};
+
+    &[aria-readonly="true"] {
+      background-color: ${themeVars.colorBgReactionsSelectedDefault};
+      border-color: ${themeVars.colorBgReactionsSelectedDefault};
+    }
+
+    &:not(:disabled, [aria-readonly="true"]) {
+      &:hover {
+        background-color: ${themeVars.colorBgReactionsSelectedHover};
+        border-color: ${themeVars.colorBorderReactionsSelectedHover};
+      }
+
+      &:active {
+        background-color: ${themeVars.colorBgReactionsSelectedDefault};
+        border-color: ${themeVars.colorBorderReactionsSelectedHover};
+      }
+    }
+  }
+`;
+
+export const toggleButtonCssWithIconStart = css`
+  padding-left: ${space.s4}px;
+`;
+
+export const toggleButtonContent = css`
+  display: flex;
+  align-items: center;
+  gap: ${space.s4}px;
+  height: 100%;
+
+  transition-property: opacity;
+  transition-duration: 0.15s;
+
+  .${toggleButtonCss}:is(:active, [aria-expanded="true"]) > & {
+    opacity: 0.8;
+  }
+
+  .${toggleButtonCss}:disabled > & {
+    opacity: 0.6;
+  }
+
+  overflow: hidden;
+`;
+
+export type ToggleButtonVariant = "outline";
+export type ToggleButtonSize = "small" | "medium" | "large";
+
+export type ToggleButtonProps = {
+  iconStart?: React.ReactNode;
+  variant?: ToggleButtonVariant;
+  size?: ToggleButtonSize;
+  readOnly?: boolean;
+} & Omit<ToggleProps, "asChild">;
+
+export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
+  (
+    {
+      className,
+      iconStart,
+      size = "small",
+      variant = "outline",
+      children,
+      "aria-readonly": ariaReadonly,
+      readOnly = ariaReadonly,
+      ...props
+    },
+    ref
+  ): JSX.Element => {
+    return (
+      <Toggle
+        ref={ref}
+        className={cx(toggleButtonCss, iconStart && toggleButtonCssWithIconStart, className)}
+        data-variant={variant}
+        data-size={size}
+        aria-readonly={readOnly}
+        {...props}
+      >
+        <div className={toggleButtonContent}>
+          {iconStart}
+          {children}
+        </div>
+      </Toggle>
+    );
+  }
+);

package/src/toggle.tsx

@@ -2,7 +2,7 @@ import {css, cx} from "@linaria/core";
 import {styled} from "@linaria/react";
 import chroma from "chroma-js";
 import {ComponentProps, FC, ReactNode} from "react";
-import {layout, space, textStyles, transition} from "./design-system";
+import {space, textStyles, transition} from "./design-system";
 import _ from "lodash";
 import SpinnerIcon from "./icons/react/Spinner";
 
@@ -26,7 +26,8 @@ const Input = styled.input<{outlineColor: string}>`
   }
 
   &:focus-visible {
-    box-shadow: ${({outlineColor}) => `inset 0 0 0 1px ${outlineColor}`};
+    outline: ${({outlineColor}) => `2px solid ${outlineColor}`};
+    outline-offset: 1px;
   }
 `;
 
@@ -34,7 +35,6 @@ const Label = styled.div<{labelPosition: "last" | "first"; disabled?: boolean}>`
   margin-left: ${({labelPosition}) => (labelPosition === "last" ? `${space.s8}px` : 0)};
   margin-right: ${({labelPosition}) => (labelPosition === "first" ? `${space.s8}px` : 0)};
   opacity: ${({disabled}) => (disabled ? 0.5 : 1)};
-  line-height: ${layout.checkboxSize}px;
   width: 100%;
   min-width: 0;
 `;

package/src/tooltip.tsx

@@ -24,10 +24,10 @@ const descriptionStyle = css`
 `;
 
 export const tooltipStyle = css`
-  font-size: 13px;
+  font-size: 12px;
   color: ${themeVars.whiteColor};
   z-index: 100000;
-  min-height: 30px;
+  min-height: 28px;
   max-width: 300px;
   background-color: ${themeVars.tooltipBgColor};
   padding: ${space.s6}px ${space.s8}px;

package/src/unit/styles.ts

@@ -146,14 +146,14 @@ export const unitContentContainerClassName = css`
 `;
 
 export const unitDescriptionClassName = css`
-  margin-bottom: ${space.s4}px;
+  margin-bottom: ${space.s1}px;
 `;
 
 export const fullUnitWrapperClassName = css`
   display: flex;
   align-items: center;
   padding: ${space.s6}px;
-  border-radius: ${space.s4 + space.s1}px;
+  border-radius: ${space.s5}px;
   background-color: ${themeVars.cardBg};
   margin-bottom: ${space.s4}px;
 `;

package/src/use-is-phone.tsx

@@ -1,12 +1,37 @@
-import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
-import {createContext} from "@fibery/react/src/create-context";
 import {ReactNode} from "react";
+import {createContext} from "@fibery/react/src/create-context";
+import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
+import {getMediaQueryList} from "./media-query-utils";
 
 const [Provider, useIsPhone] = createContext<boolean>("PhoneContext", false);
 
 export {useIsPhone};
 
+declare global {
+  const __DISABLE_VERTICAL_MOBILE_BREAKPOINT__: boolean | undefined;
+}
+
+function isVerticalMobileBreakpointDisabled() {
+  // noinspection PointlessBooleanExpressionJS
+  if (
+    typeof __DISABLE_VERTICAL_MOBILE_BREAKPOINT__ !== "undefined" &&
+    __DISABLE_VERTICAL_MOBILE_BREAKPOINT__ === true
+  ) {
+    return true;
+  }
+  const urlParams = new URLSearchParams(window.location.search);
+  return urlParams.has("no-vertical-mobile-breakpoint");
+}
+
+const phoneMediaQuery = isVerticalMobileBreakpointDisabled()
+  ? "(max-width: 440px)"
+  : "(max-width: 440px), (max-height: 440px)";
+
+export function isPhoneMode() {
+  return getMediaQueryList(phoneMediaQuery).matches;
+}
+
 export function IsPhoneProvider({children}: {children: ReactNode}) {
-  const isPhone = useIsMediaQueryMatched("(max-width: 440px), (max-height: 440px)");
+  const isPhone = useIsMediaQueryMatched(phoneMediaQuery);
   return <Provider value={isPhone}>{children}</Provider>;
 }

package/src/use-is-support-hover.ts

@@ -1,5 +1,5 @@
 import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
 
 export function useIsSupportHover() {
-  return !useIsMediaQueryMatched("(any-hover: none)");
+  return useIsMediaQueryMatched("(any-hover: hover)");
 }

package/src/use-on-screen-keyboard-data.tsx

@@ -0,0 +1,66 @@
+import {ReactNode, useEffect, useState} from "react";
+import {createContext} from "@fibery/react/src/create-context";
+import _ from "lodash";
+import {useIsPhone} from "./use-is-phone";
+import {keyboardHeightVar, mobileKeyboardOpenClassName} from "./mobile-styles";
+
+const defaultKeyboardHeight = 350;
+
+const [OnScreenKeyboardHeightValueProvider, useOnScreenKeyboardHeight] = createContext<number>(
+  "OnScreenKeyboardHeightProvider",
+  defaultKeyboardHeight
+);
+
+const [IsOnScreenKeyboardOpenedValueProvider, useIsOnScreenKeyboardOpened] = createContext<boolean>(
+  "IsOnScreenKeyboardOpenedValueProvider",
+  false
+);
+
+export function OnScreenKeyboardContextProvider({children}: {children: ReactNode}) {
+  const isPhone = useIsPhone();
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(defaultKeyboardHeight);
+  const [keyboardVisible, setKeyboardVisible] = useState<boolean>(false);
+  const [initialViewPortHeight] = useState(() => window.visualViewport?.height || 0);
+  useEffect(() => {
+    const viewport = window.visualViewport;
+    if (!viewport || !isPhone) {
+      return _.noop;
+    }
+
+    function viewportHandler() {
+      if (viewport) {
+        // console.log({height: viewport.height, initialViewPortHeight, windowHeight: window.innerHeight});
+        // Calculate keyboard height as difference between window height and viewport height
+        const calculatedHeight = Math.max(0, initialViewPortHeight - viewport.height);
+        if (calculatedHeight && keyboardHeight !== calculatedHeight && calculatedHeight > 200) {
+          setKeyboardHeight(calculatedHeight);
+          document.body.style.setProperty(keyboardHeightVar, `${calculatedHeight}px`);
+        }
+        if (viewport.height !== initialViewPortHeight && !keyboardVisible) {
+          const htmlElement = document.querySelector("html");
+          htmlElement?.classList.add(mobileKeyboardOpenClassName);
+          setKeyboardVisible(true);
+        } else if (viewport.height === initialViewPortHeight && keyboardVisible) {
+          setKeyboardVisible(false);
+          const htmlElement = document.querySelector("html");
+          htmlElement?.classList.remove(mobileKeyboardOpenClassName);
+        }
+      }
+    }
+
+    viewport.addEventListener("resize", viewportHandler);
+    // Initial calculation
+    viewportHandler();
+
+    return () => {
+      viewport.removeEventListener("resize", viewportHandler);
+    };
+  }, [initialViewPortHeight, isPhone, keyboardHeight, keyboardVisible]);
+  return (
+    <OnScreenKeyboardHeightValueProvider value={keyboardHeight}>
+      <IsOnScreenKeyboardOpenedValueProvider value={keyboardVisible}>{children}</IsOnScreenKeyboardOpenedValueProvider>
+    </OnScreenKeyboardHeightValueProvider>
+  );
+}
+
+export {useOnScreenKeyboardHeight, useIsOnScreenKeyboardOpened};

package/src/workflow-progress-icon.tsx

@@ -29,31 +29,25 @@ export const WorkflowProgressIcon: FC<WorkflowProgressIcon> = ({
     <svg
       width={size}
       height={size}
-      viewBox={`0 0 ${size} ${size}`}
+      viewBox={`0 0 16 16`}
       className={css`
         display: block;
       `}
     >
-      <g transform={`translate(${size / 2}, ${size / 2})`}>
-        {isDone ? (
-          <>
-            <circle r={size / 2} fill={doneFillColor} />
-            <polyline
-              points={`${-size / 4},0 ${-size / 10},${size / 4.5} ${size / 4.5},${-size / 6}`}
-              stroke={doneStrokeColor}
-              strokeWidth={size / 8}
-              strokeLinecap={"round"}
-              strokeLinejoin={"round"}
-              fill={"none"}
-            />
-          </>
-        ) : (
-          <>
-            <path d={getPath(total, total, size)} fill={fillBackground} />
-            <path d={getPath(index, total, size)} fill={fillProgress} />
-          </>
-        )}
-      </g>
+      {isDone ? (
+        <>
+          <circle cx="8" cy="8" r="8" fill={doneFillColor} fillOpacity="0.8" />
+          <path
+            d="M6.93229 11.98C7.25645 11.98 7.5091 11.8562 7.68071 11.5941L12.1236 4.80535C12.2476 4.61478 12.3 4.43852 12.3 4.27178C12.3 3.82395 11.9663 3.5 11.5086 3.5C11.1941 3.5 10.9986 3.61434 10.8079 3.91447L6.90845 10.0601L4.93012 7.60661C4.75374 7.39699 4.56306 7.30171 4.2961 7.30171C3.8337 7.30171 3.5 7.63042 3.5 8.07824C3.5 8.27832 3.56197 8.45464 3.73358 8.64992L6.19339 11.6274C6.39838 11.8704 6.62719 11.98 6.93229 11.98Z"
+            fill={doneStrokeColor}
+          />
+        </>
+      ) : (
+        <g transform={`translate(8, 8)`}>
+          <path d={getPath(total, total, 16)} fill={fillBackground} />
+          <path d={getPath(index, total, 16)} fill={fillProgress} />
+        </g>
+      )}
     </svg>
   );
 };
@@ -63,7 +57,7 @@ const getPath = _.memoize(
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore bad d3-shape typings
     return arc()
-      .innerRadius(size / 3)
+      .innerRadius(size / 2.75)
       .outerRadius(size / 2)
       .startAngle(0)
       .endAngle(2 * (index / total) * Math.PI)