@fibery/ui-kit 1.7.2 → 1.7.4

package/LICENSE

@@ -0,0 +1,214 @@
+THE ACCOMPANYING PROGRAM IS PROVIDED UNDER THE TERMS OF THIS ECLIPSE PUBLIC
+LICENSE ("AGREEMENT"). ANY USE, REPRODUCTION OR DISTRIBUTION OF THE PROGRAM
+CONSTITUTES RECIPIENT'S ACCEPTANCE OF THIS AGREEMENT.
+
+1. DEFINITIONS
+
+"Contribution" means:
+
+a) in the case of the initial Contributor, the initial code and
+documentation distributed under this Agreement, and
+
+b) in the case of each subsequent Contributor:
+
+i) changes to the Program, and
+
+ii) additions to the Program;
+
+where such changes and/or additions to the Program originate from and are
+distributed by that particular Contributor. A Contribution 'originates' from
+a Contributor if it was added to the Program by such Contributor itself or
+anyone acting on such Contributor's behalf. Contributions do not include
+additions to the Program which: (i) are separate modules of software
+distributed in conjunction with the Program under their own license
+agreement, and (ii) are not derivative works of the Program.
+
+"Contributor" means any person or entity that distributes the Program.
+
+"Licensed Patents" mean patent claims licensable by a Contributor which are
+necessarily infringed by the use or sale of its Contribution alone or when
+combined with the Program.
+
+"Program" means the Contributions distributed in accordance with this
+Agreement.
+
+"Recipient" means anyone who receives the Program under this Agreement,
+including all Contributors.
+
+2. GRANT OF RIGHTS
+
+a) Subject to the terms of this Agreement, each Contributor hereby grants
+Recipient a non-exclusive, worldwide, royalty-free copyright license to
+reproduce, prepare derivative works of, publicly display, publicly perform,
+distribute and sublicense the Contribution of such Contributor, if any, and
+such derivative works, in source code and object code form.
+
+b) Subject to the terms of this Agreement, each Contributor hereby grants
+Recipient a non-exclusive, worldwide, royalty-free patent license under
+Licensed Patents to make, use, sell, offer to sell, import and otherwise
+transfer the Contribution of such Contributor, if any, in source code and
+object code form.  This patent license shall apply to the combination of the
+Contribution and the Program if, at the time the Contribution is added by the
+Contributor, such addition of the Contribution causes such combination to be
+covered by the Licensed Patents. The patent license shall not apply to any
+other combinations which include the Contribution. No hardware per se is
+licensed hereunder.
+
+c) Recipient understands that although each Contributor grants the licenses
+to its Contributions set forth herein, no assurances are provided by any
+Contributor that the Program does not infringe the patent or other
+intellectual property rights of any other entity. Each Contributor disclaims
+any liability to Recipient for claims brought by any other entity based on
+infringement of intellectual property rights or otherwise. As a condition to
+exercising the rights and licenses granted hereunder, each Recipient hereby
+assumes sole responsibility to secure any other intellectual property rights
+needed, if any. For example, if a third party patent license is required to
+allow Recipient to distribute the Program, it is Recipient's responsibility
+to acquire that license before distributing the Program.
+
+d) Each Contributor represents that to its knowledge it has sufficient
+copyright rights in its Contribution, if any, to grant the copyright license
+set forth in this Agreement.
+
+3. REQUIREMENTS
+
+A Contributor may choose to distribute the Program in object code form under
+its own license agreement, provided that:
+
+a) it complies with the terms and conditions of this Agreement; and
+
+b) its license agreement:
+
+i) effectively disclaims on behalf of all Contributors all warranties and
+conditions, express and implied, including warranties or conditions of title
+and non-infringement, and implied warranties or conditions of merchantability
+and fitness for a particular purpose;
+
+ii) effectively excludes on behalf of all Contributors all liability for
+damages, including direct, indirect, special, incidental and consequential
+damages, such as lost profits;
+
+iii) states that any provisions which differ from this Agreement are offered
+by that Contributor alone and not by any other party; and
+
+iv) states that source code for the Program is available from such
+Contributor, and informs licensees how to obtain it in a reasonable manner on
+or through a medium customarily used for software exchange.
+
+When the Program is made available in source code form:
+
+a) it must be made available under this Agreement; and
+
+b) a copy of this Agreement must be included with each copy of the Program.
+
+Contributors may not remove or alter any copyright notices contained within
+the Program.
+
+Each Contributor must identify itself as the originator of its Contribution,
+if any, in a manner that reasonably allows subsequent Recipients to identify
+the originator of the Contribution.
+
+4. COMMERCIAL DISTRIBUTION
+
+Commercial distributors of software may accept certain responsibilities with
+respect to end users, business partners and the like. While this license is
+intended to facilitate the commercial use of the Program, the Contributor who
+includes the Program in a commercial product offering should do so in a
+manner which does not create potential liability for other Contributors.
+Therefore, if a Contributor includes the Program in a commercial product
+offering, such Contributor ("Commercial Contributor") hereby agrees to defend
+and indemnify every other Contributor ("Indemnified Contributor") against any
+losses, damages and costs (collectively "Losses") arising from claims,
+lawsuits and other legal actions brought by a third party against the
+Indemnified Contributor to the extent caused by the acts or omissions of such
+Commercial Contributor in connection with its distribution of the Program in
+a commercial product offering.  The obligations in this section do not apply
+to any claims or Losses relating to any actual or alleged intellectual
+property infringement. In order to qualify, an Indemnified Contributor must:
+a) promptly notify the Commercial Contributor in writing of such claim, and
+b) allow the Commercial Contributor to control, and cooperate with the
+Commercial Contributor in, the defense and any related settlement
+negotiations. The Indemnified Contributor may participate in any such claim
+at its own expense.
+
+For example, a Contributor might include the Program in a commercial product
+offering, Product X. That Contributor is then a Commercial Contributor. If
+that Commercial Contributor then makes performance claims, or offers
+warranties related to Product X, those performance claims and warranties are
+such Commercial Contributor's responsibility alone. Under this section, the
+Commercial Contributor would have to defend claims against the other
+Contributors related to those performance claims and warranties, and if a
+court requires any other Contributor to pay any damages as a result, the
+Commercial Contributor must pay those damages.
+
+5. NO WARRANTY
+
+EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, THE PROGRAM IS PROVIDED ON
+AN "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER
+EXPRESS OR IMPLIED INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OR
+CONDITIONS OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A
+PARTICULAR PURPOSE. Each Recipient is solely responsible for determining the
+appropriateness of using and distributing the Program and assumes all risks
+associated with its exercise of rights under this Agreement , including but
+not limited to the risks and costs of program errors, compliance with
+applicable laws, damage to or loss of data, programs or equipment, and
+unavailability or interruption of operations.
+
+6. DISCLAIMER OF LIABILITY
+
+EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, NEITHER RECIPIENT NOR ANY
+CONTRIBUTORS SHALL HAVE ANY LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING WITHOUT LIMITATION
+LOST PROFITS), HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OR DISTRIBUTION OF THE PROGRAM OR THE
+EXERCISE OF ANY RIGHTS GRANTED HEREUNDER, EVEN IF ADVISED OF THE POSSIBILITY
+OF SUCH DAMAGES.
+
+7. GENERAL
+
+If any provision of this Agreement is invalid or unenforceable under
+applicable law, it shall not affect the validity or enforceability of the
+remainder of the terms of this Agreement, and without further action by the
+parties hereto, such provision shall be reformed to the minimum extent
+necessary to make such provision valid and enforceable.
+
+If Recipient institutes patent litigation against any entity (including a
+cross-claim or counterclaim in a lawsuit) alleging that the Program itself
+(excluding combinations of the Program with other software or hardware)
+infringes such Recipient's patent(s), then such Recipient's rights granted
+under Section 2(b) shall terminate as of the date such litigation is filed.
+
+All Recipient's rights under this Agreement shall terminate if it fails to
+comply with any of the material terms or conditions of this Agreement and
+does not cure such failure in a reasonable period of time after becoming
+aware of such noncompliance. If all Recipient's rights under this Agreement
+terminate, Recipient agrees to cease use and distribution of the Program as
+soon as reasonably practicable. However, Recipient's obligations under this
+Agreement and any licenses granted by Recipient relating to the Program shall
+continue and survive.
+
+Everyone is permitted to copy and distribute copies of this Agreement, but in
+order to avoid inconsistency the Agreement is copyrighted and may only be
+modified in the following manner. The Agreement Steward reserves the right to
+publish new versions (including revisions) of this Agreement from time to
+time. No one other than the Agreement Steward has the right to modify this
+Agreement. The Eclipse Foundation is the initial Agreement Steward. The
+Eclipse Foundation may assign the responsibility to serve as the Agreement
+Steward to a suitable separate entity. Each new version of the Agreement will
+be given a distinguishing version number. The Program (including
+Contributions) may always be distributed subject to the version of the
+Agreement under which it was received. In addition, after a new version of
+the Agreement is published, Contributor may elect to distribute the Program
+(including its Contributions) under the new version. Except as expressly
+stated in Sections 2(a) and 2(b) above, Recipient receives no rights or
+licenses to the intellectual property of any Contributor under this
+Agreement, whether expressly, by implication, estoppel or otherwise. All
+rights in the Program not expressly granted under this Agreement are
+reserved.
+
+This Agreement is governed by the laws of the State of New York and the
+intellectual property laws of the United States of America. No party to this
+Agreement will bring a legal action under this Agreement more than one year
+after the cause of action arose. Each party waives its rights to a jury trial
+in any resulting litigation.

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "main": "index.ts",
   "private": false,
   "files": [
     "src/antd/styles.ts",
-    "src/Button.ts",
+    "src/Button.tsx",
     "src/designSystem.ts",
     "src/theme-styles.ts",
     "src/theme-settings.ts",
@@ -21,19 +21,11 @@
     "src/error-alert.tsx",
     "src/Pallete.ts",
     "src/tooltip.tsx",
-    "src/BackButton.tsx"
+    "src/BackButton.tsx",
+    "src/Button"
   ],
   "license": "UNLICENSED",
-  "scripts": {
-    "test": "TZ=Europe/Minsk jest",
-    "test:ci": "yarn test --reporters=default --reporters=jest-junit",
-    "test:coverage": "yarn test --coverage --coverageDirectory=${JEST_COVERAGE_RESULT_DIR:-$(pwd)}/coverage/ui-kit --reporters=default --reporters=jest-junit",
-    "lint": "eslint .",
-    "generate-icons": "node scripts/generate-icons.mjs"
-  },
   "dependencies": {
-    "@fibery/helpers": "workspace:*",
-    "@fibery/react": "workspace:*",
     "@linaria/core": "3.0.0-beta.15",
     "@linaria/react": "3.0.0-beta.15",
     "@popperjs/core": "2.11.6",
@@ -65,7 +57,9 @@
     "react-select-country-list": "2.2.1",
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
-    "ua-parser-js": "0.7.24"
+    "ua-parser-js": "0.7.24",
+    "@fibery/react": "1.0.0",
+    "@fibery/helpers": "1.0.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -74,8 +68,6 @@
   "devDependencies": {
     "@babel/core": "7.20.5",
     "@babel/runtime": "7.20.6",
-    "@fibery/babel-preset": "workspace:*",
-    "@fibery/eslint-config": "workspace:*",
     "@linaria/babel-preset": "3.0.0-beta.15",
     "@testing-library/dom": "8.19.1",
     "@testing-library/jest-dom": "5.16.5",
@@ -99,7 +91,9 @@
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
     "typescript": "5.0.3",
-    "unist-util-reduce": "0.2.2"
+    "unist-util-reduce": "0.2.2",
+    "@fibery/babel-preset": "7.2.0",
+    "@fibery/eslint-config": "8.3.0"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -124,5 +118,12 @@
     "setupFilesAfterEnv": [
       "<rootDir>/config/jest/testFrameworkSetup.js"
     ]
+  },
+  "scripts": {
+    "test": "TZ=Europe/Minsk jest",
+    "test:ci": "yarn test --reporters=default --reporters=jest-junit",
+    "test:coverage": "yarn test --coverage --coverageDirectory=${JEST_COVERAGE_RESULT_DIR:-$(pwd)}/coverage/ui-kit --reporters=default --reporters=jest-junit",
+    "lint": "eslint .",
+    "generate-icons": "node scripts/generate-icons.mjs"
   }
-}
+}

package/src/Button/AddButton.tsx

@@ -0,0 +1,13 @@
+import {forwardRef} from "react";
+import AddIcon from "../icons/react/Add";
+import {Button, ButtonProps} from "./button";
+
+type Props = {
+  disableReason?: string;
+} & ButtonProps;
+
+export const AddButton = forwardRef<HTMLButtonElement, Props>(
+  ({disableReason = "", Icon = AddIcon, ...rest}, forwardedRef) => {
+    return <Button ref={forwardedRef} borderless Icon={Icon} title={disableReason} {...rest} />;
+  }
+);

package/src/Button/BackButton.tsx

@@ -0,0 +1,26 @@
+import {ButtonSize, Button} from "./button";
+import BackIcon from "../icons/react/Back";
+
+type Props = {
+  disabled?: boolean;
+  pending?: boolean;
+  onClick: () => unknown;
+  size?: ButtonSize;
+  color?: string;
+};
+
+export function BackButton({disabled, onClick, pending, size, color}: Props) {
+  return (
+    <Button
+      borderless
+      Icon={BackIcon}
+      disabled={disabled}
+      onClick={onClick}
+      pending={pending}
+      size={size}
+      color={color}
+    >
+      Back
+    </Button>
+  );
+}

package/src/Button/button-base.tsx

@@ -0,0 +1,190 @@
+import {styled} from "@linaria/react";
+import {ComponentPropsWithoutRef, forwardRef} from "react";
+import {border, colors, fontWeight, getDarkenColor, getOpacities, opacity, ThemeColors} from "../designSystem";
+import {useTheme} from "../ThemeProvider";
+
+export const getMainColor = ({color, dangerous, theme}: {color?: string; dangerous?: boolean; theme: ThemeColors}) => {
+  if (color) {
+    return color;
+  }
+  if (dangerous) {
+    return theme.danger;
+  }
+  if (!theme) {
+    return colors.primary;
+  }
+  return theme.buttonColor;
+};
+
+const getBorderColor = ({
+  mainColor,
+  borderless,
+  primary,
+}: {
+  mainColor: string;
+  borderless?: boolean;
+  primary?: boolean;
+}) => {
+  if (borderless) {
+    return colors.transparent;
+  }
+  if (primary) {
+    return mainColor;
+  }
+  return getOpacities(mainColor).opacity15;
+};
+
+const getHoverBorderColor = ({
+  mainColor,
+  borderless,
+  primary,
+  hoverBgColor,
+}: {
+  mainColor: string;
+  borderless?: boolean;
+  primary?: boolean;
+  hoverBgColor: string;
+}) => {
+  if (borderless) {
+    return colors.transparent;
+  }
+  if (primary) {
+    return hoverBgColor;
+  }
+  return mainColor;
+};
+
+export const getTextColor = ({
+  mainColor,
+  primary,
+  theme,
+}: {
+  mainColor: string;
+  primary?: boolean;
+  theme: ThemeColors;
+}) => {
+  if (primary) {
+    return theme.buttonPrimaryTextColor;
+  }
+  return mainColor;
+};
+
+const getBgColor = ({mainColor, primary}: {mainColor: string; primary?: boolean}) => {
+  if (primary) {
+    return mainColor;
+  }
+  return colors.transparent;
+};
+
+const getHoverBgColor = ({
+  mainColor,
+  borderless,
+  primary,
+}: {
+  mainColor: string;
+  primary?: boolean;
+  borderless?: boolean;
+}) => {
+  if (primary) {
+    return getDarkenColor(mainColor);
+  }
+  if (borderless) {
+    return getOpacities(mainColor).opacity15;
+  }
+  return colors.transparent;
+};
+
+export const buttonBorderWidth = 1;
+
+type StyledProps = {
+  textColor: string;
+  bgColor: string;
+  borderColor: string;
+  hoverBgColor: string;
+  hoverBorderColor: string;
+  borderWidth: number;
+};
+
+const StyledButtonBase = styled.button<StyledProps>`
+  display: block;
+  box-sizing: border-box;
+  font-weight: ${fontWeight.bold};
+  margin: 0;
+  border-radius: ${border.radius6}px;
+  border: 0;
+  border-width: ${({borderWidth}) => `${borderWidth}px`};
+  border-style: solid;
+  padding: 0;
+  cursor: pointer;
+  transition: all 150ms ease-out;
+  color: ${({textColor}) => textColor};
+  background-color: ${({bgColor}) => bgColor};
+  border-color: ${({borderColor}) => borderColor};
+
+  &:disabled {
+    cursor: default;
+    opacity: ${opacity.opacity40};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    box-shadow: ${({borderColor}) => `0 0 0 3px ${getOpacities(borderColor).opacity25}`};
+    background-color: ${({hoverBgColor}) => hoverBgColor};
+    border-color: ${({hoverBorderColor}) => hoverBorderColor};
+  }
+
+  &:hover:not(:disabled) {
+    background-color: ${({hoverBgColor}) => hoverBgColor};
+    border-color: ${({hoverBorderColor}) => hoverBorderColor};
+  }
+`;
+
+export type ButtonBaseProps = {
+  dataId?: string;
+  color?: string;
+  primary?: boolean;
+  dangerous?: boolean;
+  borderless?: boolean;
+} & ComponentPropsWithoutRef<"button">;
+export const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(function ButtonBase(
+  {primary, color, borderless, dangerous, className, type = "button", dataId, ...buttonProps},
+  ref
+) {
+  const theme = useTheme();
+
+  const mainColor = getMainColor({color, dangerous, theme});
+  const textColor = getTextColor({mainColor, primary, theme});
+  const bgColor = getBgColor({mainColor, primary});
+  const hoverBgColor = getHoverBgColor({mainColor, borderless, primary});
+  const borderColor = getBorderColor({mainColor, borderless, primary});
+  const hoverBorderColor = getHoverBorderColor({
+    mainColor,
+    borderless,
+    primary,
+    hoverBgColor,
+  });
+  const borderWidth = borderless ? 0 : buttonBorderWidth;
+
+  const styledProps: StyledProps = {
+    bgColor,
+    borderColor,
+    hoverBgColor,
+    hoverBorderColor,
+    textColor,
+    borderWidth,
+  };
+
+  return (
+    <StyledButtonBase
+      ref={ref}
+      type={type}
+      className={className}
+      data-testid={dataId}
+      {...styledProps}
+      {...buttonProps}
+    />
+  );
+});

package/src/Button/button-group.tsx

@@ -0,0 +1,76 @@
+import {Children, cloneElement, CSSProperties, ReactElement} from "react";
+import {css, cx} from "@linaria/core";
+import {border} from "../designSystem";
+
+const ordersInRowGroup = {
+  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,
+    }}
+  `,
+  last: css`
+    ${{
+      display: "inline-flex",
+      borderRadius: `0 ${border.radius6}px ${border.radius6}px 0`,
+    }}
+  `,
+};
+
+const ordersInColumnGroup = {
+  first: css`
+    ${{
+      display: "inline-flex",
+      borderRadius: `${border.radius6}px ${border.radius6}px 0 0 `,
+      marginBottom: -1,
+    }}
+  `,
+  middle: css`
+    ${{
+      display: "inline-flex",
+      borderRadius: border.radius0,
+      marginBottom: -1,
+    }}
+  `,
+  last: css`
+    ${{
+      display: "inline-flex",
+      borderRadius: `0 0 ${border.radius6}px ${border.radius6}px`,
+    }}
+  `,
+};
+
+export interface ButtonGroupProps {
+  direction: CSSProperties["flexDirection"];
+  children: ReactElement[];
+}
+
+export function ButtonGroup({direction, children}: ButtonGroupProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "flex-start",
+        flexDirection: direction,
+      }}
+    >
+      {Children.map(children, (child, index) => {
+        const inGroup = index === 0 ? "first" : index === children.length - 1 ? "last" : "middle";
+        return cloneElement(child, {
+          className: cx(
+            child.props.className,
+            direction === "row" ? ordersInRowGroup[inGroup] : ordersInColumnGroup[inGroup]
+          ),
+        });
+      })}
+    </div>
+  );
+}

package/src/Button/button.tsx

@@ -0,0 +1,242 @@
+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 {ButtonBase, ButtonBaseProps, buttonBorderWidth, getMainColor, getTextColor} from "./button-base";
+import {border, colors, getOpacities, opacity, space, textStyles} from "../designSystem";
+import MoreIcon from "../icons/react/More";
+import MoreCompactIcon from "../icons/react/MoreCompact";
+import {IconBaseProps} from "../icons/types";
+import {Item} from "../Item";
+import {Spinner} from "../loaders";
+import {useTheme} from "../ThemeProvider";
+
+type PositionInGroup = "first" | "middle" | "last";
+
+export const ButtonSize = {
+  superSmall: ":button-size/super-small",
+  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/small": 12,
+  ":button-size/normal": 14,
+  ":button-size/big": 16,
+} as const;
+
+const HorizontalPaddings = {
+  ":button-size/super-small": 4,
+  ":button-size/small": 8,
+  ":button-size/normal": 12,
+  ":button-size/big": 16,
+} as const;
+
+const IconSizes = {
+  ":button-size/super-small": 16,
+  ":button-size/small": 18,
+  ":button-size/normal": 20,
+  ":button-size/big": 22,
+};
+
+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;
+
+const StyledButton = styled(ButtonBase)<StyledProps>`
+  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`)};
+
+  font-size: ${getFontSize}px;
+  min-height: ${getButtonMinSize}px;
+  min-width: ${getButtonMinSize}px;
+  padding-left: ${getHorizontalPadding}px;
+  padding-right: ${getHorizontalPadding}px;
+`;
+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,
+    }}
+  `,
+  last: css`
+    ${{
+      display: "inline-flex",
+      borderRadius: `0 ${border.radius6}px ${border.radius6}px 0`,
+    }}
+  `,
+};
+
+const getSpinnerColor = ({mainColor, primary}: {mainColor: string; primary?: boolean}) => {
+  if (primary) {
+    return colors.inversedTextColor;
+  }
+  return mainColor;
+};
+
+const getIconMagicConstants = _.memoize((size: ButtonSize) => {
+  const iconSize = IconSizes[size];
+
+  const leftContainerSize = 8;
+  const leftContainerMarginRight = iconSize - leftContainerSize;
+
+  return {iconSize, leftContainerSize, leftContainerMarginRight};
+});
+
+const shortcutStyle = css`
+  ${{
+    ...textStyles.small,
+    color: "currentColor",
+    borderRadius: border.radius4,
+    paddingLeft: space.xs,
+    paddingRight: space.xs,
+    paddingBottom: space.xxs,
+    marginRight: -space.xs,
+    marginLeft: space.xxs,
+    opacity: opacity.opacity80,
+    display: "inline-block",
+  }}
+`;
+
+const leftContainerMarginRightVar = "--fibery-button-left-container-margin-right";
+
+const leftContainerClassName = css`
+  margin-right: var(${leftContainerMarginRightVar});
+`;
+
+export type ButtonProps = ButtonBaseProps & {
+  size?: ButtonSize;
+  pending?: boolean;
+  Icon?: ((props: IconBaseProps) => JSX.Element) | null;
+  inGroup?: PositionInGroup;
+  shortcut?: string;
+  noOverflow?: boolean;
+  width?: string | number;
+  height?: string | number;
+};
+
+export const Button = 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, leftContainerSize, leftContainerMarginRight} = getIconMagicConstants(size);
+
+  const leftContainer = pending ? (
+    <Spinner backgroundColor={spinnerBgColor} color={spinnerColor} size={iconSize} 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>
+  );
+});
+
+// TODO can be inlined
+export function ActionsButton({
+  onClick,
+  label = ``,
+  disabled,
+}: {
+  onClick: ButtonProps["onClick"];
+  label?: string;
+  disabled?: boolean;
+}) {
+  return <Button Icon={MoreIcon} onClick={onClick} borderless aria-label={label} disabled={disabled} />;
+}
+
+export const ActionsButtonCompact = forwardRef<HTMLButtonElement, ButtonProps & {inverted?: boolean}>(
+  ({inverted, ...rest}, ref) => {
+    const theme = useTheme();
+    return (
+      <Button
+        ref={ref}
+        size={":button-size/small"}
+        Icon={MoreCompactIcon}
+        color={inverted ? colors.inversedTextColor : theme.buttonColor}
+        borderless
+        {...rest}
+      />
+    );
+  }
+);

package/src/Button/icon-button-with-tooltip.tsx

@@ -0,0 +1,15 @@
+import {forwardRef} from "react";
+import {Tooltip, TooltipProps} from "../tooltip";
+import {IconButton, IconButtonProps} from "./icon-button";
+
+type IconButtonTooltipProps = Pick<TooltipProps, "title" | "description" | "content" | "side">;
+
+export const IconButtonWithTooltip = forwardRef<HTMLButtonElement, IconButtonTooltipProps & IconButtonProps>(
+  function IconButtonWithTooltip({title, description, content, side, ...props}, ref) {
+    return (
+      <Tooltip title={title} description={description} content={content} side={side}>
+        <IconButton ref={ref} {...props} />
+      </Tooltip>
+    );
+  }
+);

package/src/Button/icon-button.tsx

@@ -0,0 +1,42 @@
+import {styled} from "@linaria/react";
+import {Children, cloneElement, forwardRef} from "react";
+import {ButtonBase, ButtonBaseProps} from "./button-base";
+import {IconProps} from "../icons/types";
+
+export type IconButtonSize = "super-small" | "small" | "normal" | "big";
+
+export type IconButtonProps = Omit<ButtonBaseProps, "borderless"> & {
+  size?: IconButtonSize;
+};
+
+const Paddings = {
+  "super-small": 0,
+  small: 2,
+  normal: 4,
+  big: 6,
+};
+
+type StyledProps = {
+  /** The size of the component. `super-small` is equivalent to the dense button styling */
+  size: IconButtonSize;
+};
+
+const getPadding = ({size}: StyledProps) => Paddings[size];
+
+const StyledIconButton = styled(ButtonBase)<StyledProps>`
+  padding: ${getPadding}px;
+`;
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  {size = "normal", children, className, ...rest},
+  ref
+) {
+  const iconNode = Children.only(children) as React.ReactElement<IconProps>;
+
+  return (
+    <StyledIconButton ref={ref} size={size} className={className} borderless {...rest}>
+      {/* maybe better to use css variables? */}
+      {cloneElement(iconNode, {color: iconNode.props.color || "inherit"})}
+    </StyledIconButton>
+  );
+});