@fibery/ui-kit 2.0.0 → 2.0.1

package/src/avatar.tsx

@@ -1,7 +1,7 @@
-import {css} from "@linaria/core";
+import {css, cx} from "@linaria/core";
 import memoize from "lodash/memoize";
 import {CSSProperties, FC, memo, useCallback, useMemo, useState} from "react";
-import {getDarkenColor, getObjectColorMemoized, textStyles, themeVars} from "./design-system";
+import {getDarkenColor, getObjectColorMemoized, space, textStyles, themeVars} from "./design-system";
 import {FibermojiPlaceholder} from "./fibermoji-placeholder";
 import {getShiftStyle} from "./icons/get-shift-style";
 import {useFeatures} from "./features";
@@ -89,7 +89,7 @@ type AvatarImageProps = {
   placeholder?: React.ReactNode;
 };
 
-export const AvatarImage: FC<AvatarImageProps> = memo(function AvatarImage({
+const AvatarImage: FC<AvatarImageProps> = memo(function AvatarImage({
   size,
   containerSize,
   title,
@@ -188,7 +188,7 @@ type AvatarPlaceholderProps = {
   backgroundColor?: string;
 };
 
-export const AvatarPlaceholder: FC<AvatarPlaceholderProps> = memo(function AvatarPlaceholder(props) {
+const AvatarPlaceholder: FC<AvatarPlaceholderProps> = memo(function AvatarPlaceholder(props) {
   const features = useFeatures<{enableFibermojiAvatars: boolean}>();
   if (features.enableFibermojiAvatars) {
     return <FibermojiPlaceholder {...props} />;
@@ -230,7 +230,7 @@ type NullUserAvatarProps = {
   containerSize: number;
 };
 
-export const NullUserAvatar: FC<NullUserAvatarProps> = memo(function NullUserAvatar({size, containerSize}) {
+const NullUserAvatar: FC<NullUserAvatarProps> = memo(function NullUserAvatar({size, containerSize}) {
   const dashSize = (Math.PI * size) / magicCoefficient / 12;
   return (
     <div style={getNullUserAvatarContainerStyle({containerSize})}>
@@ -248,3 +248,42 @@ export const NullUserAvatar: FC<NullUserAvatarProps> = memo(function NullUserAva
     </div>
   );
 });
+
+const avatarGroupCss = css`
+  display: flex;
+`;
+
+function AvatarGroup({className, ...props}: React.ComponentProps<"div">) {
+  return <div className={cx(avatarGroupCss, className)} {...props} />;
+}
+
+const avatarCss = css`
+  margin-left: -${space.s4}px;
+  &:first-of-type {
+    margin-left: 0;
+  }
+  z-index: 1;
+`;
+
+function Avatar({className, ...props}: React.ComponentProps<"div">) {
+  return <div className={cx(avatarCss, className)} {...props} />;
+}
+
+const avatarGroupCountCss = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--fibery-avatar-group-count-size);
+  height: var(--fibery-avatar-group-count-size);
+  color: ${themeVars.accentTextColor};
+  font-size: calc(var(--fibery-avatar-group-count-size) * 0.5);
+  background-color: ${themeVars.badgeBgColor};
+  border-radius: 50%;
+`;
+
+function AvatarGroupCount({className, size, ...props}: {size: number} & React.ComponentProps<"div">) {
+  const style = {"--fibery-avatar-group-count-size": size + "px"} as CSSProperties;
+  return <div data-slot="avatar-group-count" style={style} className={cx(avatarGroupCountCss, className)} {...props} />;
+}
+
+export {AvatarGroup, Avatar, AvatarImage, AvatarPlaceholder, AvatarGroupCount, NullUserAvatar};

package/src/box.tsx

@@ -2,7 +2,7 @@ import {css} from "@linaria/core";
 import {styled} from "@linaria/react";
 import cx from "classnames";
 import {CSSProperties, forwardRef, HTMLProps, ReactNode, Ref, useCallback, useMemo, useState} from "react";
-import {border, getLinearGradient, getOpacities, space, textStyles, themeVars, transition} from "./design-system";
+import {alpha, border, getLinearGradient, space, textStyles, themeVars, transition} from "./design-system";
 import {useClickOutside} from "./popover/use-click-outside";
 
 export const getBg = (backgroundColors: string[]) => {
@@ -266,22 +266,15 @@ export function getBoxColorCoding({backgroundColors}: {backgroundColors: string[
   const colorCodingStyle = colorCodingColor
     ? ({
         [colorCodingBackgroundCustomProperty]: colorCodingColor,
-        [colorCodingShadowEntityBoxDefaultCustomProperty]: `0px 2px 4px 0px ${
-          getOpacities(colorCodingColor).opacity10
-        }`,
-        [colorCodingShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 1px ${
-          getOpacities(colorCodingColor).opacity30
-        }`,
-        [colorCodingBackgroundHoverShadowCustomProperty]: `0px 4px 8px 0px ${getOpacities(colorCodingColor).opacity10}`,
-        [colorCodingFocusShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 2px ${
-          getOpacities(colorCodingColor).opacity40
-        }`,
-        [colorCodingHoverFocusShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 2px ${
-          getOpacities(colorCodingColor).opacity60
-        }`,
-        [colorCodingShadowStrokeEntityBoxSelectedCustomProperty]: `0 0 0 1px ${
-          getOpacities(colorCodingColor).opacity60
-        }, 0 0 0 3px ${getOpacities(colorCodingColor).opacity40}`,
+        [colorCodingShadowEntityBoxDefaultCustomProperty]: `0px 2px 4px 0px ${alpha(colorCodingColor, 0.1)}`,
+        [colorCodingShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 1px ${alpha(colorCodingColor, 0.3)}`,
+        [colorCodingBackgroundHoverShadowCustomProperty]: `0px 4px 8px 0px ${alpha(colorCodingColor, 0.1)}`,
+        [colorCodingFocusShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 2px ${alpha(colorCodingColor, 0.4)}`,
+        [colorCodingHoverFocusShadowStrokeEntityBoxDefaultCustomProperty]: `0 0 0 2px ${alpha(colorCodingColor, 0.6)}`,
+        [colorCodingShadowStrokeEntityBoxSelectedCustomProperty]: `0 0 0 1px ${alpha(
+          colorCodingColor,
+          0.6
+        )}, 0 0 0 3px ${alpha(colorCodingColor, 0.4)}`,
       } as CSSProperties)
     : {};
   return {

package/src/button/make-button-colors.ts

@@ -3,7 +3,7 @@
 // so it's easier to find buttons with custom colors
 
 import {CSSProperties} from "@linaria/core";
-import {getDarkenColor, getOpacities, ThemeColors, themeVars} from "../design-system";
+import {alpha, getDarkenColor, ThemeColors, themeVars} from "../design-system";
 import {ButtonVariant} from "./base-button";
 
 export const makeButtonColors = (color: string, variant: ButtonVariant, theme: ThemeColors): CSSProperties => {
@@ -14,24 +14,24 @@ export const makeButtonColors = (color: string, variant: ButtonVariant, theme: T
         "--fibery-button-hover-color": getDarkenColor(color),
         "--fibery-button-text-color": themeVars.buttonPrimaryTextColor,
         "--fibery-button-text-active-color": themeVars.buttonPrimaryTextColor,
-        "--fibery-button-focus-color": getOpacities(color).opacity30,
+        "--fibery-button-focus-color": alpha(color, 0.3),
       };
     case "ghost":
       return {
         "--fibery-button-color": "transparent",
-        "--fibery-button-hover-color": getOpacities(color).opacity15,
+        "--fibery-button-hover-color": alpha(color, 0.15),
         "--fibery-button-text-color": color,
-        "--fibery-button-text-active-color": getOpacities(color).opacity80,
-        "--fibery-button-focus-color": getOpacities(color).opacity30,
+        "--fibery-button-text-active-color": alpha(color, 0.8),
+        "--fibery-button-focus-color": alpha(color, 0.3),
       };
     case "outline":
       return {
         "--fibery-button-color": "transparent",
-        "--fibery-button-hover-color": getOpacities(color).opacity15,
+        "--fibery-button-hover-color": alpha(color, 0.15),
         "--fibery-button-text-color": color,
-        "--fibery-button-text-active-color": getOpacities(color).opacity80,
-        "--fibery-button-focus-color": getOpacities(color).opacity30,
-        "--fibery-button-border-color": getOpacities(color).opacity30,
+        "--fibery-button-text-active-color": alpha(color, 0.8),
+        "--fibery-button-focus-color": alpha(color, 0.3),
+        "--fibery-button-border-color": alpha(color, 0.3),
       };
     default:
     case "soft": {
@@ -41,12 +41,12 @@ export const makeButtonColors = (color: string, variant: ButtonVariant, theme: T
       return {
         "--fibery-button-color": bgColor,
         "--fibery-button-hover-color": theme.select({
-          light: getOpacities(color).opacity30,
-          dark: getOpacities(color).opacity45,
+          light: alpha(color, 0.3),
+          dark: alpha(color, 0.45),
         }),
         "--fibery-button-text-color": textColor,
-        "--fibery-button-text-active-color": getOpacities(textColor).opacity80,
-        "--fibery-button-focus-color": getOpacities(color).opacity30,
+        "--fibery-button-text-active-color": alpha(textColor, 0.8),
+        "--fibery-button-focus-color": alpha(color, 0.3),
       };
     }
   }

package/src/checkbox.tsx

@@ -12,7 +12,7 @@ import {
   useEffect,
   useRef,
 } from "react";
-import {getDarkenColor, getOpacities, layout, space, textStyles, ThemeColors, themeVars} from "./design-system";
+import {alpha, getDarkenColor, layout, space, textStyles, ThemeColors, themeVars} from "./design-system";
 import {smallHtmlStylesClass} from "./html-styles";
 import {mobileRootSelector} from "./mobile-styles";
 
@@ -154,8 +154,8 @@ const CheckboxComponent = memo(
     const indeterminate = checked === null;
     const defaultIndeterminate = defaultChecked === null;
     const cColor = color || theme.primaryBlue;
-    const fColor = getOpacities(cColor).opacity25;
-    const hColor = getOpacities(cColor).opacity10;
+    const fColor = alpha(cColor, 0.25);
+    const hColor = alpha(cColor, 0.1);
     const dColor = getDarkenColor(cColor);
     const bColor = themeVars.checkboxColor;
 

package/src/collapsible-section.tsx

@@ -84,7 +84,7 @@ export const CollapsibleSection = ({
   const regularHeader = label && <div className={headerCss}>{label}</div>;
 
   return (
-    <div className={className}>
+    <div className={className} data-testid="collapsible-section">
       {collapsible ? collapsibleHeader : regularHeader}
       <div style={{display: collapsible && isCollapsed ? "none" : "block"}}>{children}</div>
     </div>

package/src/context-menu/index.tsx

@@ -111,6 +111,10 @@ export const Item = styled(ContextMenuPrimitive.Item)`
   ${rowItemStyles}
 `;
 
+export const CheckboxItem = styled(ContextMenuPrimitive.CheckboxItem)`
+  ${rowItemStyles}
+`;
+
 export const Separator = styled(ContextMenuPrimitive.Separator)`
   ${{
     backgroundColor: themeVars.actionMenuSeparatorColor,

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

@@ -37,7 +37,7 @@ export const DateRangePicker = forwardRef<
 
   const dateValue = [value[0] ? value[0].toDate() : null, value[1] ? value[1].toDate() : null] as [
     Date | null,
-    Date | null
+    Date | null,
   ];
   const onDatesChange = useCallback(
     (value: [Date | null, Date | null]) => {

package/src/date-picker/relative-date-picker.tsx

@@ -94,6 +94,7 @@ export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
       >
         <div>
           <AntInputNumber
+            aria-label="Amount"
             autoFocus={true}
             value={valueWithDefault.amount}
             controls={false}
@@ -109,6 +110,7 @@ export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
           `}
         >
           <SingleRowReactSelect
+            aria-label="Unit"
             value={unitOptions.find((option) => option.value === valueWithDefault.unit)}
             components={{
               DropdownIndicator: AlwaysVisibleDropdownIndicator,
@@ -127,6 +129,7 @@ export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
           `}
         >
           <SingleRowReactSelect
+            aria-label="Direction"
             value={isBeforeNowOptions.find(
               (option) => option.value === (valueWithDefault.isBeforeNow ? "ago" : "from now")
             )}

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

@@ -69,9 +69,9 @@ interface SingleDatePickerWithForwardRefType extends React.FC<SingleDatePickerPr
 }
 
 interface ControlledSingleDatePickerWithForwardRefType extends React.FC<UncontrolledSingleDatePickerProps<boolean>> {
-  <T extends boolean>(props: UncontrolledSingleDatePickerProps<T>): ReturnType<
-    React.FC<UncontrolledSingleDatePickerProps<T>>
-  >;
+  <T extends boolean>(
+    props: UncontrolledSingleDatePickerProps<T>
+  ): ReturnType<React.FC<UncontrolledSingleDatePickerProps<T>>>;
 }
 
 type DatePickerRef = {
@@ -221,12 +221,12 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
   const dateValueFormatted = isRelativeValue
     ? formatRelativeDate(value as RelativeDateValue)
     : value
-    ? formatDateInputValue((value as Moment).toDate(), {
-        showTime,
-        dateFormat,
-        dateTimeFormat,
-      })
-    : null;
+      ? formatDateInputValue((value as Moment).toDate(), {
+          showTime,
+          dateFormat,
+          dateTimeFormat,
+        })
+      : null;
 
   const fakeWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -249,6 +249,7 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content
+          data-testid="single-date-picker-content"
           title={title}
           offset={[0, space.s6]}
           placement="bottom-start"

package/src/design-system/alpha.ts

@@ -3,6 +3,7 @@ import mapValues from "lodash/mapValues";
 import memoize from "lodash/memoize";
 export const transparent = "rgba(255, 255, 255, 0)";
 
+// TODO grades may become semantic someday?
 export const opacity = {
   opacity100: 1,
   opacity95: 0.95,
@@ -39,3 +40,11 @@ export const getOpacities = memoize((color: string) =>
     return produceColor(color, (c) => setAlpha(c, opacityValue));
   })
 );
+
+// inspired by https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/alpha-value
+export const alpha = memoize(
+  (color: string, value: (typeof opacity)[keyof typeof opacity]) => {
+    return produceColor(color, (c) => setAlpha(c, value));
+  },
+  (a, b) => a + b
+);

package/src/design-system/colors-css.test.ts

@@ -1,4 +1,4 @@
-import {getEnumTextColor, getLinearGradient} from "./colors-css";
+import {getLinearGradient} from "./colors-css";
 
 describe("getLinearGradient", () => {
   test("single color", () => {
@@ -29,11 +29,3 @@ describe("getLinearGradient", () => {
     );
   });
 });
-
-describe("getEnumTextColor", () => {
-  test("snapshot", () => {
-    expect(getEnumTextColor("#4978D4")).toMatchInlineSnapshot(
-      `"color-mix(in srgb, #4978D4 25%, var(--fibery-color-textColor) 75%)"`
-    );
-  });
-});

package/src/design-system/colors-css.ts

@@ -9,7 +9,7 @@ export function getLinearGradient(backgroundColors: Array<string>): string {
 }
 
 export function getEnumTextColor(color: string) {
-  return `color-mix(in srgb, ${color} 25%, ${themeVars.textColor} 75%)`;
+  return `color-mix(in srgb, ${color} 40%, ${themeVars.textColor} 60%)`;
 }
 
 function themeVarWithAlpha(themeVar: string, alpha: number) {