@fibery/ui-kit 1.29.5 → 1.30.0

package/src/icons/types.ts

@@ -1,3 +1,5 @@
+import {SVGProps} from "react";
+
 export interface AbstractNode {
   type: string;
   tagName?: string;
@@ -13,17 +15,19 @@ export interface IconDefinition {
   icon: AbstractNode;
 }
 
-export type IconBaseProps = {
-  color?: string | null;
+export type IconBaseProps = Omit<SVGProps<SVGSVGElement>, "ref" | "color"> & {
+  /**
+   * Use when you need icon container to occupy more or less space (e.g. for visual alignment).
+   *
+   * NOTE: containerSize uses margins to shift the icon.
+   * If you need to add background color to icon consider using regular padding instead or wrap the icon in a colored div
+   */
   containerSize?: number;
-  viewBox?: string;
   iconSize?: number;
-  onMouseDown?: () => void;
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
+  /** Pass null to inherit parent's color */
+  color?: string | null | undefined;
 };
 
 export type IconProps = IconBaseProps & {
-  icon: IconDefinition;
-  children?: JSX.Element;
+  icon?: IconDefinition;
 };

package/src/loaders.tsx

@@ -141,7 +141,7 @@ export const LoadingTreeMenuItem = ({
   children,
 }: {
   color?: string;
-  Icon: (props: IconBaseProps) => JSX.Element;
+  Icon: React.FC<IconBaseProps>;
   level: number;
   children?: ReactNode;
 }) => {

package/src/select/select-in-popover.tsx

@@ -110,7 +110,7 @@ export const selectInPopupStyles = {
     position: "static",
     marginTop: space.s6,
     marginBottom: 0,
-    boxShadow: "none",
+    boxShadow: "none !important",
     borderRadius: border.radius4,
   }),
 };

package/src/toggle-on-off.tsx

@@ -1,6 +1,6 @@
 import chroma from "chroma-js";
 import {FC, ComponentProps, useMemo} from "react";
-import {opacity, ThemeColors} from "./design-system";
+import {ThemeColors} from "./design-system";
 import {useTheme} from "./theme-provider";
 import {Toggle} from "./toggle";
 
@@ -8,11 +8,11 @@ const getBackgroundColors = (accentColor: string | undefined, theme: ThemeColors
   return accentColor && chroma.valid(accentColor)
     ? {
         enabledColor: accentColor,
-        disabledColor: chroma(accentColor).alpha(opacity.opacity35).css(),
+        disabledColor: theme.colorBgButtonSoftNeutralHover,
       }
     : {
-        enabledColor: theme.primaryBlue,
-        disabledColor: theme.disabledTextColor,
+        enabledColor: theme.colorBgButtonSolidAccentDefault,
+        disabledColor: theme.colorBgButtonSoftNeutralHover,
       };
 };