@spaced-out/ui-design-system 0.1.16 → 0.1.17

package/lib/components/Badge/Badge.js.flow

@@ -35,24 +35,24 @@ export type BadgeProps = {
   fill?: BadgeColorType,
 };
 
-export const Badge = ({
-  classNames,
-  text,
-  fill = 'gray',
-}: BadgeProps): React.Node => (
-  <div
-    data-testid="Badge"
-    className={classify(
-      css.badgeWrapper,
-      {
-        [css.fixedWidth]: text.length <= 2,
-      },
-      classNames?.wrapper,
-    )}
-    style={{
-      backgroundColor: BADGE_COLOR[fill],
-    }}
-  >
-    <ButtonTextSmall>{text}</ButtonTextSmall>
-  </div>
-);
+export const Badge: React$AbstractComponent<BadgeProps, HTMLDivElement> =
+  React.forwardRef<BadgeProps, HTMLDivElement>(
+    ({classNames, text, fill = 'gray'}: BadgeProps, ref): React.Node => (
+      <div
+        data-testid="Badge"
+        className={classify(
+          css.badgeWrapper,
+          {
+            [css.fixedWidth]: text.length <= 2,
+          },
+          classNames?.wrapper,
+        )}
+        style={{
+          backgroundColor: BADGE_COLOR[fill],
+        }}
+        ref={ref}
+      >
+        <ButtonTextSmall>{text}</ButtonTextSmall>
+      </div>
+    ),
+  );

package/lib/components/Badge/index.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Badge", {
-  enumerable: true,
-  get: function () {
-    return _Badge.Badge;
-  }
-});
-var _Badge = require("./Badge");
+var _Badge = require("./Badge");
+Object.keys(_Badge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Badge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Badge[key];
+    }
+  });
+});

package/lib/components/Badge/index.js.flow

@@ -1,4 +1,3 @@
 // @flow strict
 
-export type {BadgeProps} from './Badge';
-export {Badge} from './Badge';
+export * from './Badge';

package/lib/components/Banner/Banner.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const Banner = _ref => {
+const Banner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     semantic,
@@ -23,6 +23,7 @@ const Banner = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_InContextAlert.InContextAlert, _extends({}, props, {
     leftIconType: leftIconType,
     semantic: semantic,
+    ref: ref,
     classNames: {
       wrapper: (0, _classify.default)(_BannerModule.default.bannerContainer, {
         [_BannerModule.default.neutral]: semantic === _InContextAlert.ALERT_SEMANTIC.neutral,
@@ -37,5 +38,5 @@ const Banner = _ref => {
       actionContainer: (0, _classify.default)(_BannerModule.default.alertContainer, classNames?.actionContainer)
     }
   })));
-};
+});
 exports.Banner = Banner;

package/lib/components/Banner/Banner.js.flow

@@ -14,38 +14,45 @@ export type BannerProps = {
   alignment?: 'top' | 'bottom',
 };
 
-export const Banner = ({
-  classNames,
-  semantic,
-  leftIconType = 'solid',
-  alignment = 'top',
-  ...props
-}: BannerProps): React.Node => (
-  <>
-    <InContextAlert
-      {...props}
-      leftIconType={leftIconType}
-      semantic={semantic}
-      classNames={{
-        wrapper: classify(
-          css.bannerContainer,
-          {
-            [css.neutral]: semantic === ALERT_SEMANTIC.neutral,
-            [css.success]: semantic === ALERT_SEMANTIC.success,
-            [css.information]: semantic === ALERT_SEMANTIC.information,
-            [css.warning]: semantic === ALERT_SEMANTIC.warning,
-            [css.danger]: semantic === ALERT_SEMANTIC.danger,
-            [css.topAligned]: alignment === 'top',
-            [css.bottomAligned]: alignment === 'bottom',
-          },
-          classNames?.wrapper,
-        ),
-        alertText: classify(classNames?.alertText),
-        actionContainer: classify(
-          css.alertContainer,
-          classNames?.actionContainer,
-        ),
-      }}
-    />
-  </>
-);
+export const Banner: React$AbstractComponent<BannerProps, HTMLDivElement> =
+  React.forwardRef<BannerProps, HTMLDivElement>(
+    (
+      {
+        classNames,
+        semantic,
+        leftIconType = 'solid',
+        alignment = 'top',
+        ...props
+      }: BannerProps,
+      ref,
+    ): React.Node => (
+      <>
+        <InContextAlert
+          {...props}
+          leftIconType={leftIconType}
+          semantic={semantic}
+          ref={ref}
+          classNames={{
+            wrapper: classify(
+              css.bannerContainer,
+              {
+                [css.neutral]: semantic === ALERT_SEMANTIC.neutral,
+                [css.success]: semantic === ALERT_SEMANTIC.success,
+                [css.information]: semantic === ALERT_SEMANTIC.information,
+                [css.warning]: semantic === ALERT_SEMANTIC.warning,
+                [css.danger]: semantic === ALERT_SEMANTIC.danger,
+                [css.topAligned]: alignment === 'top',
+                [css.bottomAligned]: alignment === 'bottom',
+              },
+              classNames?.wrapper,
+            ),
+            alertText: classify(classNames?.alertText),
+            actionContainer: classify(
+              css.alertContainer,
+              classNames?.actionContainer,
+            ),
+          }}
+        />
+      </>
+    ),
+  );

package/lib/components/Button/Button.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.UnstyledButton = exports.Button = exports.BUTTON_TYPES = exports.BUTTON_ACTION_TYPE = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
+var _CircularLoader = require("../CircularLoader");
 var _Icon = require("../Icon");
 var _Truncate = require("../Truncate");
 var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
@@ -34,6 +35,13 @@ const ButtonTypeToIconColorMap = {
   ghost: 'primary',
   danger: 'inversePrimary'
 };
+const ButtonTypeToLoaderColorMap = {
+  primary: 'colorTextInversePrimary',
+  secondary: 'colorTextClickable',
+  tertiary: 'colorTextPrimary',
+  ghost: 'colorTextPrimary',
+  danger: 'colorTextInversePrimary'
+};
 const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     disabled,
@@ -42,6 +50,7 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ariaLabel,
     actionType,
     tabIndex = 0,
+    isLoading,
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement("button", _extends({}, props, ariaLabel ? {
@@ -54,7 +63,7 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     tabIndex: disabled ? -1 : tabIndex,
     type: actionType,
     onClick: event => {
-      if (disabled) {
+      if (disabled || isLoading) {
         event.preventDefault();
       } else if (onClick) {
         onClick(event);
@@ -76,11 +85,13 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     disabled = false,
     actionType = 'button',
     size = 'medium',
+    isLoading,
     ...props
   } = _ref2;
   return /*#__PURE__*/React.createElement(UnstyledButton, _extends({}, props, {
     actionType: actionType,
     disabled: disabled,
+    isLoading: isLoading,
     className: (0, _classify.classify)(_ButtonModule.default.button, {
       [_ButtonModule.default.primary]: type === 'primary',
       [_ButtonModule.default.secondary]: type === 'secondary',
@@ -100,31 +111,60 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }), /*#__PURE__*/React.createElement("div", {
     className: _ButtonModule.default.buttonRow
   }, !(iconLeftName || iconRightName) ? /*#__PURE__*/React.createElement("div", {
-    className: _ButtonModule.default.textContainerCenter
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)) :
+    className: _ButtonModule.default.textContainer
+  }, isLoading && /*#__PURE__*/React.createElement("div", {
+    className: _ButtonModule.default.loader
+  }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
+    size: size,
+    colorToken: disabled ? 'colorTextDisabled' : ButtonTypeToLoaderColorMap[type]
+  })), /*#__PURE__*/React.createElement(_Truncate.Truncate, {
+    className: (0, _classify.classify)({
+      [_ButtonModule.default.hidden]: isLoading
+    })
+  }, children)) :
   // has icon, but no child
-  children == null ? /*#__PURE__*/React.createElement(_Icon.Icon, {
+  children == null ? /*#__PURE__*/React.createElement(React.Fragment, null, isLoading && /*#__PURE__*/React.createElement("div", {
+    className: _ButtonModule.default.loader
+  }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
+    size: size,
+    colorToken: disabled ? 'colorTextDisabled' : ButtonTypeToLoaderColorMap[type]
+  })), /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconLeftName || iconRightName,
     color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
     size: size === 'medium' ? 'medium' : 'small',
     type: iconLeftName ? iconLeftType : iconRightType,
-    className: classNames?.icon
-  }) :
+    className: (0, _classify.classify)({
+      [_ButtonModule.default.hidden]: isLoading
+    }, classNames?.icon)
+  })) :
   // has icon _and_ child
   (iconLeftName || iconRightName) && /*#__PURE__*/React.createElement(React.Fragment, null, iconLeftName && /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconLeftName,
     color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
     size: size === 'medium' ? 'medium' : 'small',
     type: iconLeftType,
-    className: classNames?.icon
+    className: (0, _classify.classify)({
+      [_ButtonModule.default.hidden]: isLoading
+    }, classNames?.icon)
   }), /*#__PURE__*/React.createElement("div", {
-    className: _ButtonModule.default.textContainerLeft
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)), iconRightName && /*#__PURE__*/React.createElement(_Icon.Icon, {
+    className: _ButtonModule.default.textContainer
+  }, isLoading && /*#__PURE__*/React.createElement("div", {
+    className: _ButtonModule.default.loader
+  }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
+    size: size,
+    colorToken: disabled ? 'colorTextDisabled' : ButtonTypeToLoaderColorMap[type]
+  })), /*#__PURE__*/React.createElement(_Truncate.Truncate, {
+    className: (0, _classify.classify)({
+      [_ButtonModule.default.hidden]: isLoading
+    })
+  }, children)), iconRightName && /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconRightName,
     color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
     size: size === 'medium' ? 'medium' : 'small',
     type: iconRightType,
-    className: classNames?.icon
+    className: (0, _classify.classify)({
+      [_ButtonModule.default.hidden]: isLoading
+    }, classNames?.icon)
   }))));
 });
 exports.Button = Button;

package/lib/components/Button/Button.js.flow

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 import {classify} from '../../utils/classify';
+import {CircularLoader} from '../CircularLoader';
 import type {IconType} from '../Icon';
 import {Icon} from '../Icon';
 import {Truncate} from '../Truncate';
@@ -29,32 +30,33 @@ export const BUTTON_ACTION_TYPE = Object.freeze({
 export type ButtonType = $Values<typeof BUTTON_TYPES>;
 export type ButtonActionType = $Values<typeof BUTTON_ACTION_TYPE>;
 
-export type UnstyledButtonProps = {
+export type BaseButtonProps = {
   children?: React.Node,
   disabled?: mixed,
   actionType?: ButtonActionType,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  className?: string,
   ariaLabel?: string,
   tabIndex?: number,
+  isLoading?: boolean,
+  ...
+};
+
+export type UnstyledButtonProps = {
+  ...BaseButtonProps,
+  className?: string,
   ...
 };
 
 export type ButtonProps = {
-  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  ...BaseButtonProps,
   classNames?: ClassNames,
   iconLeftName?: string,
   iconLeftType?: IconType,
   iconRightName?: string,
   iconRightType?: IconType,
-  children?: React.Node,
   type?: ButtonType,
-  actionType?: ButtonActionType,
   isFluid?: boolean,
-  disabled?: boolean,
   size?: 'medium' | 'small',
-  ariaLabel?: string,
-  tabIndex?: number,
   ...
 };
 
@@ -66,6 +68,14 @@ const ButtonTypeToIconColorMap = {
   danger: 'inversePrimary',
 };
 
+const ButtonTypeToLoaderColorMap = {
+  primary: 'colorTextInversePrimary',
+  secondary: 'colorTextClickable',
+  tertiary: 'colorTextPrimary',
+  ghost: 'colorTextPrimary',
+  danger: 'colorTextInversePrimary',
+};
+
 export const UnstyledButton: React$AbstractComponent<
   UnstyledButtonProps,
   HTMLButtonElement,
@@ -78,9 +88,10 @@ export const UnstyledButton: React$AbstractComponent<
       ariaLabel,
       actionType,
       tabIndex = 0,
+      isLoading,
       ...props
     }: UnstyledButtonProps,
-    ref: React.Ref<'button'>,
+    ref,
   ) => (
     <button
       {...props}
@@ -92,7 +103,7 @@ export const UnstyledButton: React$AbstractComponent<
       tabIndex={disabled ? -1 : tabIndex}
       type={actionType}
       onClick={(event) => {
-        if (disabled) {
+        if (disabled || isLoading) {
           event.preventDefault();
         } else if (onClick) {
           onClick(event);
@@ -117,6 +128,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
         disabled = false,
         actionType = 'button',
         size = 'medium',
+        isLoading,
         ...props
       }: ButtonProps,
       ref,
@@ -125,6 +137,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
         {...props}
         actionType={actionType}
         disabled={disabled}
+        isLoading={isLoading}
         className={classify(
           css.button,
           {
@@ -149,18 +162,49 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
         <div className={css.buttonRow}>
           {/* Has no icon, only child */}
           {!(iconLeftName || iconRightName) ? (
-            <div className={css.textContainerCenter}>
-              <Truncate>{children}</Truncate>
+            <div className={css.textContainer}>
+              {isLoading && (
+                <div className={css.loader}>
+                  <CircularLoader
+                    size={size}
+                    colorToken={
+                      disabled
+                        ? 'colorTextDisabled'
+                        : ButtonTypeToLoaderColorMap[type]
+                    }
+                  />
+                </div>
+              )}
+              <Truncate className={classify({[css.hidden]: isLoading})}>
+                {children}
+              </Truncate>
             </div>
           ) : // has icon, but no child
             children == null ? (
-              <Icon
-                name={iconLeftName || iconRightName}
-                color={disabled ? 'disabled' : ButtonTypeToIconColorMap[type]}
-                size={size === 'medium' ? 'medium' : 'small'}
-                type={iconLeftName ? iconLeftType : iconRightType}
-                className={classNames?.icon}
-              />
+              <>
+                {isLoading && (
+                  <div className={css.loader}>
+                    <CircularLoader
+                      size={size}
+                      colorToken={
+                        disabled
+                          ? 'colorTextDisabled'
+                          : ButtonTypeToLoaderColorMap[type]
+                      }
+                    />
+                  </div>
+                )}
+                <Icon
+                  name={iconLeftName || iconRightName}
+                  color={disabled ? 'disabled' : ButtonTypeToIconColorMap[type]}
+                  size={size === 'medium' ? 'medium' : 'small'}
+                  type={iconLeftName ? iconLeftType : iconRightType}
+                  className={classify(
+                    {[css.hidden]: isLoading},
+                    classNames?.icon,
+                  )}
+                />
+              </>
             ) : (
             // has icon _and_ child
               (iconLeftName || iconRightName) && (
@@ -173,11 +217,28 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
                       }
                       size={size === 'medium' ? 'medium' : 'small'}
                       type={iconLeftType}
-                      className={classNames?.icon}
+                      className={classify(
+                        {[css.hidden]: isLoading},
+                        classNames?.icon,
+                      )}
                     />
                   )}
-                  <div className={css.textContainerLeft}>
-                    <Truncate>{children}</Truncate>
+                  <div className={css.textContainer}>
+                    {isLoading && (
+                      <div className={css.loader}>
+                        <CircularLoader
+                          size={size}
+                          colorToken={
+                            disabled
+                              ? 'colorTextDisabled'
+                              : ButtonTypeToLoaderColorMap[type]
+                          }
+                        />
+                      </div>
+                    )}
+                    <Truncate className={classify({[css.hidden]: isLoading})}>
+                      {children}
+                    </Truncate>
                   </div>
                   {iconRightName && (
                     <Icon
@@ -187,7 +248,10 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
                       }
                       size={size === 'medium' ? 'medium' : 'small'}
                       type={iconRightType}
-                      className={classNames?.icon}
+                      className={classify(
+                        {[css.hidden]: isLoading},
+                        classNames?.icon,
+                      )}
                     />
                   )}
                 </>

package/lib/components/Button/Button.module.css

@@ -63,6 +63,7 @@ button {
 
 .button {
   composes: motionEaseInEaseOut from '../../styles/animation.module.css';
+  position: relative;
   display: flex;
   flex-direction: row;
   padding: spaceNone spaceMedium;
@@ -84,6 +85,11 @@ button {
   column-gap: spaceXSmall;
 }
 
+.textContainer {
+  display: flex;
+  align-items: center;
+}
+
 .withIconLeft {
   padding: spaceNone spaceMedium spaceNone spaceSmall;
 }
@@ -226,3 +232,11 @@ button {
   background-color: colorFillDisabled;
   border: initial;
 }
+
+.hidden {
+  visibility: hidden;
+}
+
+.loader {
+  composes: absoluteCenter from '../../styles/utils.module.css';
+}

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const ButtonTab = _ref => {
+const ButtonTab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     children,
@@ -29,6 +29,7 @@ const ButtonTab = _ref => {
     disabled: disabled,
     size: size,
     type: id === selectedButtonTabId ? 'tertiary' : 'ghost',
+    ref: ref,
     classNames: {
       wrapper: (0, _classify.default)(_ButtonTabModule.default.buttonTabWrapper, {
         [_ButtonTabModule.default.mediumButtonTab]: size === 'medium',
@@ -44,5 +45,5 @@ const ButtonTab = _ref => {
     iconLeftType: iconType,
     onClick: e => onButtonTabSelect && onButtonTabSelect(id, e)
   }), children);
-};
+});
 exports.ButtonTab = ButtonTab;

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js.flow

@@ -23,45 +23,55 @@ export type ButtonTabProps = {
   ariaLabel?: string,
   id: string,
   selectedButtonTabId?: string,
+  isLoading?: boolean,
   ...
 };
 
-export const ButtonTab = ({
-  classNames,
-  children,
-  iconName,
-  iconType = 'regular',
-  size,
-  onButtonTabSelect,
-  id,
-  selectedButtonTabId,
-  disabled,
-  ...props
-}: ButtonTabProps): React.Node => (
-  <Button
-    {...props}
-    disabled={disabled}
-    size={size}
-    type={id === selectedButtonTabId ? 'tertiary' : 'ghost'}
-    classNames={{
-      wrapper: classify(
-        css.buttonTabWrapper,
-        {
-          [css.mediumButtonTab]: size === 'medium',
-          [css.smallButtonTab]: size === 'small',
-          [css.onlyIcon]: iconName && !children,
-          [css.isSelected]: id === selectedButtonTabId,
-          [css.isUnSelected]: id !== selectedButtonTabId,
-          [css.disabled]: disabled,
-        },
-        classNames?.wrapper,
-      ),
-      icon: css.icon,
-    }}
-    iconLeftName={iconName}
-    iconLeftType={iconType}
-    onClick={(e) => onButtonTabSelect && onButtonTabSelect(id, e)}
-  >
-    {children}
-  </Button>
+export const ButtonTab: React$AbstractComponent<
+  ButtonTabProps,
+  HTMLButtonElement,
+> = React.forwardRef<ButtonTabProps, HTMLButtonElement>(
+  (
+    {
+      classNames,
+      children,
+      iconName,
+      iconType = 'regular',
+      size,
+      onButtonTabSelect,
+      id,
+      selectedButtonTabId,
+      disabled,
+      ...props
+    }: ButtonTabProps,
+    ref,
+  ): React.Node => (
+    <Button
+      {...props}
+      disabled={disabled}
+      size={size}
+      type={id === selectedButtonTabId ? 'tertiary' : 'ghost'}
+      ref={ref}
+      classNames={{
+        wrapper: classify(
+          css.buttonTabWrapper,
+          {
+            [css.mediumButtonTab]: size === 'medium',
+            [css.smallButtonTab]: size === 'small',
+            [css.onlyIcon]: iconName && !children,
+            [css.isSelected]: id === selectedButtonTabId,
+            [css.isUnSelected]: id !== selectedButtonTabId,
+            [css.disabled]: disabled,
+          },
+          classNames?.wrapper,
+        ),
+        icon: css.icon,
+      }}
+      iconLeftName={iconName}
+      iconLeftType={iconType}
+      onClick={(e) => onButtonTabSelect && onButtonTabSelect(id, e)}
+    >
+      {children}
+    </Button>
+  ),
 );