@fibery/ui-kit 1.31.0 → 1.32.1

package/src/button/button.tsx

@@ -1,258 +1,105 @@
-import {hasNonEmptyChild} from "@fibery/react/src/has-non-empty-child";
-import {css} from "@linaria/core";
-import {styled} from "@linaria/react";
-import cx from "classnames";
-import _ from "lodash";
-import React, {forwardRef} from "react";
-import {ButtonV2} from "../button-v2/button";
-import {border, colors, getOpacities, opacity, space, textStyles} from "../design-system";
-import {IconBaseProps} from "../icons/types";
-import {Item} from "../item";
-import {Spinner} from "../loaders";
-import {useTheme} from "../theme-provider";
-import {ButtonBase, ButtonBaseProps, buttonBorderWidth, getMainColor, getTextColor} from "./button-base";
-import {isButtonsV2} from "../utils";
-
-type PositionInGroup = "first" | "middle" | "last";
-
-export const ButtonSize = {
-  superSmall: ":button-size/super-small",
-  smaller: ":button-size/smaller",
-  small: ":button-size/small",
-  normal: ":button-size/normal",
-  big: ":button-size/big",
-} as const;
-export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
-
-const FontSizes = {
-  ":button-size/super-small": 10,
-  ":button-size/smaller": 12,
-  ":button-size/small": 12,
-  ":button-size/normal": 14,
-  ":button-size/big": 16,
-} as const;
-
-const HorizontalPaddings = {
-  ":button-size/super-small": 6,
-  ":button-size/smaller": 8,
-  ":button-size/small": 8,
-  ":button-size/normal": 12,
-  ":button-size/big": 16,
-} as const;
-
-const IconSizes = {
-  ":button-size/super-small": 14,
-  ":button-size/smaller": 16,
-  ":button-size/small": 18,
-  ":button-size/normal": 18,
-  ":button-size/big": 20,
-};
-
-type StyledProps = {
-  buttonSize: ButtonSize;
-  borderless?: boolean;
-  buttonWidth?: number | string;
-  buttonHeight?: number | string;
-};
-
-const getFontSize = ({buttonSize}: StyledProps) => FontSizes[buttonSize];
-const getButtonMinSize = ({buttonSize}: StyledProps) => FontSizes[buttonSize] * 2;
-const getHorizontalPadding = ({buttonSize, borderless}: StyledProps) =>
-  borderless ? HorizontalPaddings[buttonSize] : HorizontalPaddings[buttonSize] - buttonBorderWidth;
+import {css, cx} from "@linaria/core";
+import {forwardRef} from "react";
+import {border, fontWeight, space, textStyles} from "../design-system";
+import {iconSizeVar} from "../icons/Icon";
+import SpinnerIcon from "../icons/react/Spinner";
+import {BaseButtonProps, BaseButton, ButtonSize} from "./base-button";
+
+export type ButtonProps = {
+  size?: ButtonSize;
+  pending?: boolean;
+  shortcut?: string;
+  fullWidth?: boolean;
+  iconStart?: React.ReactNode;
+  iconEnd?: React.ReactNode;
+} & BaseButtonProps;
 
-const StyledButton = styled(ButtonBase)<StyledProps>`
+const button = css`
   display: flex;
-  justify-content: center;
   align-items: center;
-  vertical-align: middle;
-  position: relative;
-
-  width: ${({buttonWidth = "auto"}) => (typeof buttonWidth === "string" ? buttonWidth : `${buttonWidth}px`)};
-  height: ${({buttonHeight = "auto"}) => (typeof buttonHeight === "string" ? buttonHeight : `${buttonHeight}px`)};
+  justify-content: center;
+  font-weight: ${fontWeight.medium};
+  white-space: nowrap;
+`;
 
-  font-size: ${getFontSize}px;
-  min-height: ${getButtonMinSize}px;
-  min-width: ${getButtonMinSize}px;
-  padding-left: ${getHorizontalPadding}px;
-  padding-right: ${getHorizontalPadding}px;
+const shortcutContainer = css`
+  font-size: ${textStyles.small.fontSize}px;
+  font-weight: ${fontWeight.regular};
+  opacity: 0.7;
 `;
-export const buttonClassName = StyledButton;
 
-// TODO: should be a different component, e.g. ButtonGroup
-const ordersInGroup = {
-  first: css`
-    ${{
-      display: "inline-flex",
-      borderRadius: `${border.radius6}px 0 0 ${border.radius6}px`,
-      marginRight: -1,
-    }}
-  `,
-  middle: css`
-    ${{
-      display: "inline-flex",
-      borderRadius: border.radius0,
-      marginRight: -1,
-    }}
+const buttonSize = {
+  tiny: css`
+    font-size: 10px;
+    line-height: 14px;
+    border-radius: ${border.radius4}px;
+    min-height: 20px;
+    padding: ${space.s2}px ${space.s6}px;
+    gap: ${space.s2}px;
+
+    ${iconSizeVar}: 14px;
   `,
-  last: css`
-    ${{
-      display: "inline-flex",
-      borderRadius: `0 ${border.radius6}px ${border.radius6}px 0`,
-    }}
+  small: css`
+    font-size: ${textStyles.small.fontSize}px;
+    line-height: 16px;
+    border-radius: ${border.radius5}px;
+    min-height: 24px;
+    padding: ${space.s4}px ${space.s8}px;
+    gap: ${space.s4}px;
+
+    ${iconSizeVar}: 16px;
   `,
-};
-
-const getSpinnerColor = ({mainColor, primary}: {mainColor: string; primary?: boolean}) => {
-  if (primary) {
-    return colors.inversedTextColor;
-  }
-  return mainColor;
-};
+  medium: css`
+    font-size: ${textStyles.regular.fontSize}px;
+    line-height: 20px;
+    letter-spacing: ${textStyles.regular.letterSpacing};
 
-const getIconMagicConstants = _.memoize((size: ButtonSize) => {
-  const iconSize = IconSizes[size];
+    border-radius: ${border.radius6}px;
+    min-height: 28px;
+    padding: ${space.s4}px ${space.s12}px;
+    gap: ${space.s6}px;
 
-  const leftContainerSize = 8;
-  const leftContainerMarginRight = iconSize - leftContainerSize;
-
-  const spinnerSize = Math.round(iconSize * 0.8);
+    ${iconSizeVar}: 18px;
+  `,
+  large: css`
+    font-size: ${textStyles.regular.fontSize}px;
+    line-height: 20px;
+    letter-spacing: ${textStyles.regular.letterSpacing};
 
-  return {iconSize, spinnerSize, leftContainerSize, leftContainerMarginRight};
-});
+    border-radius: ${border.radius6}px;
+    min-height: 32px;
+    padding: ${space.s6}px ${space.s14}px;
+    gap: ${space.s8}px;
 
-const shortcutStyle = css`
-  ${{
-    ...textStyles.small,
-    color: "currentColor",
-    borderRadius: border.radius4,
-    paddingLeft: space.s4,
-    paddingRight: space.s4,
-    paddingBottom: space.s2,
-    marginRight: -space.s4,
-    marginLeft: space.s2,
-    opacity: opacity.opacity80,
-    display: "inline-block",
-  }}
-`;
+    ${iconSizeVar}: 18px;
 
-const leftContainerMarginRightVar = "--fibery-button-left-container-margin-right";
+    & > .${shortcutContainer} {
+      font-size: ${textStyles.regular.fontSize}px;
+    }
+  `,
+} as const;
 
-const leftContainerClassName = css`
-  margin-right: var(${leftContainerMarginRightVar});
+const fullWidthMod = css`
+  width: 100%;
 `;
 
-export type ButtonProps = ButtonBaseProps & {
-  size?: ButtonSize;
-  pending?: boolean;
-  Icon?: React.FC<IconBaseProps> | null;
-  inGroup?: PositionInGroup;
-  shortcut?: string;
-  noOverflow?: boolean;
-  width?: string | number;
-  height?: string | number;
-};
-
-export const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  {
-    disabled,
-    pending,
-    Icon,
-    inGroup,
-    shortcut,
-    noOverflow = true,
-    width,
-    height,
-    size = ":button-size/normal",
-    className,
-    children,
-    ...baseProps
-  },
-  forwardedRef
-) {
-  const theme = useTheme();
-  const mainColor = getMainColor({color: baseProps.color, dangerous: baseProps.dangerous, theme});
-  const textColor = getTextColor({mainColor, primary: baseProps.primary, theme});
-  const spinnerBgColor = getOpacities(textColor).opacity25;
-  const spinnerColor = getSpinnerColor({mainColor, primary: baseProps.primary});
-
-  const {iconSize, spinnerSize, leftContainerSize, leftContainerMarginRight} = getIconMagicConstants(size);
-
-  const leftContainer = pending ? (
-    <Spinner
-      backgroundColor={spinnerBgColor}
-      color={spinnerColor}
-      size={spinnerSize}
-      containerSize={leftContainerSize}
-    />
-  ) : Icon ? (
-    <Icon color={textColor} iconSize={iconSize} containerSize={leftContainerSize} />
-  ) : null;
-
-  const styleVariable: StyledProps = {
-    buttonHeight: height,
-    buttonWidth: width,
-    buttonSize: size,
-    borderless: baseProps.borderless,
-  };
-
-  const isDisabled = disabled || pending;
-
-  return (
-    <StyledButton
-      {...styleVariable}
-      ref={forwardedRef}
-      onClick={!isDisabled && baseProps.onClick ? baseProps.onClick : _.noop}
-      disabled={isDisabled}
-      className={cx(className, inGroup && ordersInGroup[inGroup])}
-      {...baseProps}
-    >
-      <Item
-        leftContainer={leftContainer}
-        style={
-          {
-            [leftContainerMarginRightVar]: `${leftContainerMarginRight}px`,
-          } as React.CSSProperties
-        }
-        containerClassName={cx({[leftContainerClassName]: leftContainer && hasNonEmptyChild(children)})}
-        rightContainer={shortcut && <span className={cx(shortcutStyle)}>{shortcut}</span>}
-        noOverflow={noOverflow}
-      >
-        {children}
-      </Item>
-    </StyledButton>
-  );
-});
-
-/** @deprecated Please consider using ButtonV2  */
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {
-  if (isButtonsV2) {
-    const {
-      Icon,
-      dangerous,
-      borderless,
-      size = ":button-size/normal",
-      primary,
-      className,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      noOverflow: _noOverflow,
-      width,
-      ...buttonProps
-    } = props;
-
-    const newSize = size === ":button-size/big" || size === ":button-size/normal" ? "medium" : "small";
-
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {size = "medium", iconStart, iconEnd, className, children, pending, disabled, shortcut, fullWidth, ...buttonProps},
+    ref
+  ) => {
     return (
-      <ButtonV2
+      <BaseButton
         ref={ref}
-        className={className}
+        disabled={disabled || pending}
+        className={cx(className, button, buttonSize[size], fullWidth && fullWidthMod)}
         {...buttonProps}
-        color={dangerous ? "error" : primary ? "accent" : "neutral"}
-        variant={primary ? "solid" : borderless ? "ghost" : "outline"}
-        size={newSize}
-        iconStart={Icon ? <Icon /> : null}
-        fullWidth={width === "100%"}
-      />
+      >
+        {pending ? <SpinnerIcon /> : iconStart}
+        {children}
+        {iconEnd}
+        {shortcut ? <span className={shortcutContainer}>{shortcut}</span> : null}
+      </BaseButton>
     );
   }
-  return <ButtonComponent {...props} className={props.className} ref={ref} />;
-});
+);

package/src/button/icon-button.tsx

@@ -0,0 +1,71 @@
+import {css, cx} from "@linaria/core";
+import {forwardRef} from "react";
+import {BaseButtonProps, BaseButton, ButtonSize} from "./base-button";
+import {border, space} from "../design-system";
+import {iconSizeVar} from "../icons/Icon";
+import Spinner from "../icons/react/Spinner";
+
+export type IconButtonProps = {
+  size?: ButtonSize;
+  pending?: boolean;
+} & BaseButtonProps;
+
+const iconButton = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${space.s2}px;
+`;
+
+const iconButtonSizes = {
+  tiny: css`
+    padding: ${space.s2}px;
+    min-width: 20px;
+    min-height: 20px;
+    border-radius: ${border.radius4}px;
+
+    ${iconSizeVar}: 16px;
+  `,
+  small: css`
+    padding: ${space.s4}px;
+    min-width: 24px;
+    min-height: 24px;
+    border-radius: ${border.radius5}px;
+
+    ${iconSizeVar}: 16px;
+  `,
+  medium: css`
+    padding: ${space.s4}px;
+    min-width: 28px;
+    min-height: 28px;
+    border-radius: ${border.radius6}px;
+
+    ${iconSizeVar}: 18px;
+  `,
+  large: css`
+    padding: ${space.s6}px;
+
+    min-width: 32px;
+    min-height: 32px;
+    border-radius: ${border.radius6}px;
+
+    ${iconSizeVar}: 18px;
+  `,
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  {size = "medium", className, variant = "ghost", color = "neutral", pending, children, ...rest},
+  ref
+) {
+  return (
+    <BaseButton
+      ref={ref}
+      className={cx(className, iconButton, iconButtonSizes[size])}
+      variant={variant}
+      color={color}
+      {...rest}
+    >
+      {pending ? <Spinner /> : children}
+    </BaseButton>
+  );
+});

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

@@ -0,0 +1,33 @@
+// TODO: this can be incorporated inside Button component
+// but let's keep it separate while migration is on
+// so it's easier to find buttons with custom colors
+
+import {CSSProperties} from "@linaria/core";
+import {getDarkenColor, getOpacities, themeVars} from "../design-system";
+import {ButtonVariant} from "./base-button";
+
+export const makeButtonColors = (color: string, variant: ButtonVariant) => {
+  if (variant === "solid") {
+    return {
+      "--fibery-button-color": color,
+      "--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,
+    };
+  }
+
+  return {
+    "--fibery-button-color": "transparent",
+    "--fibery-button-hover-color": getOpacities(color).opacity15,
+    "--fibery-button-text-color": color,
+    "--fibery-button-text-active-color": getOpacities(color).opacity80,
+    "--fibery-button-focus-color": getOpacities(color).opacity30,
+
+    ...(variant === "outline"
+      ? {
+          "--fibery-button-border-color": getOpacities(color).opacity30,
+        }
+      : undefined),
+  } as CSSProperties;
+};

package/src/design-system.ts

@@ -591,7 +591,7 @@ export const themeColors = {
   colorBgButtonGhostAccentDefault: [transparent, transparent],
   colorBgButtonGhostAccentHover: [indigo.indigo3, indigoDark.indigo3],
   colorBgButtonGhostNeutralDefault: [transparent, transparent],
-  colorBgButtonGhostNeutralHover: [slate.slate4, slateDark.slate4],
+  colorBgButtonGhostNeutralHover: [getOpacities(slate.slate6).opacity60, getOpacities(slateDark.slate6).opacity80],
   colorBgButtonGhostDestructiveDefault: [transparent, transparent],
   colorBgButtonGhostDestructiveHover: [red.red4, redDark.red4],
   colorTextButtonGhostAccent: [indigo.indigo11, indigoDark.indigo11],
@@ -880,14 +880,14 @@ export const space = {
   s128: 128,
 } as const;
 /** Token for nested items spacing in nested trees */
-export const spaceNestedTreeLevel = 28;
+export const spaceNestedTreeLevel = 12;
 export const spaceNestedTreeInterval = 0;
 export const layout = {
-  logoSize: 16,
+  logoSize: 15,
   menuDefaultWidth: 243,
   desktopToolbarHeight: 32,
   desktopMenuMinWidth: 240,
-  collapsedMenuMinWidth: 54,
+  collapsedMenuMinWidth: 48,
   menuMinWidth: 240, //TODO: make dependency to itemHeight
   menuMaxWidth: 480,
   menuItemMinWidth: 80,
@@ -899,7 +899,8 @@ export const layout = {
   groupTitleHeight: 30,
   enumItemHeight: 32,
   menuItemHeight: 32,
-  newMenuItemHeight: 30, // I'm ok
+  newMenuItemHeight: 28, // I'm ok
+  newMenuIconSize: 20,
   viewHeaderHeight: space.s12 * 7,
   viewHeaderCompactHeight: 52,
   columnMinWidth: 240,

package/src/dropdown-menu/index.tsx

@@ -133,20 +133,21 @@ export const Content = forwardRef<HTMLDivElement, ContentProps>(function Dropdow
 
 export const Sub = DropdownMenuPrimitive.Sub;
 
-export const SubContent = forwardRef<HTMLDivElement, DropdownMenuPrimitive.DropdownMenuSubContentProps>(
-  function DropdownMenuSubContent({className, collisionPadding = space.s12, ...rest}, ref) {
-    return (
-      <DropdownMenuPrimitive.Portal>
-        <DropdownMenuPrimitive.SubContent
-          ref={ref}
-          className={cx(dropdownMenuContentStyles, className)}
-          collisionPadding={collisionPadding}
-          {...rest}
-        />
-      </DropdownMenuPrimitive.Portal>
-    );
-  }
-);
+export const SubContent = forwardRef<
+  HTMLDivElement,
+  DropdownMenuPrimitive.DropdownMenuSubContentProps & {container?: HTMLElement | null}
+>(function DropdownMenuSubContent({className, collisionPadding = space.s12, container, ...rest}, ref) {
+  return (
+    <DropdownMenuPrimitive.Portal container={container}>
+      <DropdownMenuPrimitive.SubContent
+        ref={ref}
+        className={cx(dropdownMenuContentStyles, className)}
+        collisionPadding={collisionPadding}
+        {...rest}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+});
 
 export const SubTrigger = styled(DropdownMenuPrimitive.SubTrigger)`
   ${rowItemStyles}

package/src/emoji-picker/emoji-picker-content-with-color.tsx

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
 import {useRef, useState} from "react";
-import {IconButton} from "../button-v2/icon-button";
+import {IconButton} from "../button/icon-button";
 import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../collapsible";
 import {ColorPicker} from "../color-picker";
 import {getIconColor, space} from "../design-system";

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

@@ -1,7 +1,7 @@
 import type {EmojiItem} from "@fibery/emoji-data";
 import {measureScrollbar} from "@fibery/helpers/utils/measure-scrollbar";
 import {css} from "@linaria/core";
-import {Button} from "../button";
+import {Button} from "../button/button";
 import {fontFamily, space, themeVars, typeSizes} from "../design-system";
 import {Emoji} from "./primitives/emoji";
 import {EmojiPickerFooter} from "./primitives/footer";
@@ -70,7 +70,7 @@ export const EmojiPickerPreviewFooter: React.FC<{
       {emojiPreview ? (
         <EmojiPreview emoji={emojiPreview.emoji} />
       ) : onAddCustomEmoji ? (
-        <Button size=":button-size/small" onClick={onAddCustomEmoji}>
+        <Button variant="outline" color="neutral" size="small" onClick={onAddCustomEmoji}>
           Add Emoji
         </Button>
       ) : null}

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

@@ -1,12 +1,12 @@
 import {css} from "@linaria/core";
 import {compact} from "lodash";
-import {Button} from "../button";
 import {AntTabs} from "../antd/Tabs";
+import {Button} from "../button/button";
 import {space, textStyles} from "../design-system";
+import EmojiDelete from "../icons/react/EmojiDelete";
 import {$TSFixMe} from "../tsfixme";
 import {AppIconPicker, AppIconPickerProps} from "./app-icon-picker";
 import {EmojiPicker, EmojiPickerProps} from "./emoji-picker";
-import EmojiDelete from "../icons/react/EmojiDelete";
 
 const TabHeader: React.FC<React.PropsWithChildren> = ({children}) => (
   <div
@@ -89,7 +89,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
               padding-right: ${space.s12}px;
             `}
           >
-            <Button Icon={EmojiDelete} size={":button-size/small"} onClick={onReset}>
+            <Button variant="outline" color="neutral" iconStart={<EmojiDelete />} size={"small"} onClick={onReset}>
               {resetLabel}
             </Button>
           </div>

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

@@ -1,7 +1,7 @@
 import type {Category} from "@fibery/emoji-data";
 
 import {css} from "@linaria/core";
-import {IconButton} from "../../button-v2/icon-button";
+import {IconButton} from "../../button/icon-button";
 import {space, textStyles, themeVars} from "../../design-system";
 import Settings from "../../icons/react/Settings";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";

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

@@ -1,7 +1,7 @@
 import type {EmojiItem} from "@fibery/emoji-data";
 import {css} from "@linaria/core";
 import {memo} from "react";
-import {IconButton} from "../../button-v2/icon-button";
+import {IconButton} from "../../button/icon-button";
 import {themeVars} from "../../design-system";
 import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
 import {useEmojiPickerContentSettings} from "./content";

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

@@ -2,7 +2,7 @@ import {EmojiItem} from "@fibery/emoji-data";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {css, cx} from "@linaria/core";
 import {startTransition, useId, useRef} from "react";
-import {IconButton} from "../../button-v2/icon-button";
+import {IconButton} from "../../button/icon-button";
 import {border, space, textStyles, themeVars} from "../../design-system";
 import Close from "../../icons/react/Close";
 import Search from "../../icons/react/Search";

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

@@ -1,7 +1,7 @@
 import {EmojiSkin} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
 import {useState} from "react";
-import {IconButton} from "../../button-v2/icon-button";
+import {IconButton} from "../../button/icon-button";
 import {textStyles, themeVars} from "../../design-system";
 import {Emoji} from "./emoji";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";

package/src/error-alert/error-alert-action.tsx

@@ -1,9 +1,12 @@
-import {Button, ButtonProps} from "../button/button";
-import {useTheme} from "../theme-provider";
+import {ButtonProps, Button} from "../button/button";
 
-export const ErrorAlertAction: React.FC<ButtonProps> = (props) => {
-  const theme = useTheme();
-
-  return <Button size=":button-size/small" color={theme.textColor} {...props} />;
+export const ErrorAlertAction = ({
+  size = "small",
+  variant = "outline",
+  color = "neutral",
+  className,
+  ...rest
+}: ButtonProps) => {
+  return <Button size={size} variant={variant} color={color} className={className} {...rest} />;
 };
 export type ErrorAlertActionElement = React.ReactElement<typeof ErrorAlertAction>;

package/src/error-alert/error-alert.tsx

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {IconButton} from "../button-v2/icon-button";
+import {IconButton} from "../button/icon-button";
 import {border, layout, space, textStyles, themeVars} from "../design-system";
 import CloseIcon from "../icons/react/Close";
 import WarningIcon from "../icons/react/WarningTriangle";

package/src/icons/Icon.tsx

@@ -13,6 +13,7 @@ const size = `var(${iconSizeVar}, ${defaultIconSize}px)`;
 const containerSize = `var(${iconContainerSizeVar}, ${size})`;
 
 export const iconContainer = css`
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;

package/src/icons/ast/Folder.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Folder: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.417 4.583A.917.917 0 0 0 3.5 5.5v9.167a.917.917 0 0 0 .917.917h11.149c.006-.001.03-.005.074-.015a2.051 2.051 0 0 0 .472-.173.565.565 0 0 0 .12-.081.917.917 0 0 0 .268-.648V8a.917.917 0 0 0-.917-.917H10a.75.75 0 0 1-.53-.22l-2.28-2.28H4.416Zm-1.71-.792a2.417 2.417 0 0 1 1.71-.708H7.5a.75.75 0 0 1 .53.22l2.28 2.28h5.273A2.417 2.417 0 0 1 18 8v6.667c0 .64-.255 1.255-.708 1.709-.274.273-.645.441-.912.537-.26.093-.572.17-.797.17H4.417A2.417 2.417 0 0 1 2 14.668V5.5c0-.64.255-1.255.708-1.709Z"},"children":[]}],"metadata":""}]},"name":"folder"};
+
+export default Folder;