@bitrise/bitkit 13.304.0 → 13.306.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.304.0",
+  "version": "13.306.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Link/Link.theme.ts

@@ -16,6 +16,7 @@ const LinkTheme = {
       },
       _hover: {
         color: hover,
+        textDecoration: 'underline',
       },
       color,
       fontSize: textStyle ? undefined : 'inherit',

package/src/Components/LinkButton/LinkButton.theme.ts

@@ -0,0 +1,39 @@
+import { defineStyle, defineStyleConfig } from 'chakra-ui-2--styled-system';
+
+const baseStyle = defineStyle(() => {
+  return {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '4',
+    color: 'text/link',
+    _active: {
+      color: 'text/primary',
+      backgroundColor: `transparent`,
+    },
+    _hover: {
+      color: 'text/link-hover',
+      backgroundColor: `transparent`,
+    },
+    _disabled: {
+      color: 'text/disabled',
+      cursor: 'not-allowed',
+    },
+  };
+});
+
+const linkButtonTheme = defineStyleConfig({
+  baseStyle,
+  sizes: {
+    lg: {
+      textStyle: 'body/lg/regular',
+    },
+    md: {
+      textStyle: 'body/md/regular',
+    },
+    sm: {
+      textStyle: 'body/sm/regular',
+    },
+  },
+});
+
+export default linkButtonTheme;

package/src/Components/LinkButton/LinkButton.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, useStyleConfig } from 'chakra-ui-2--react';
+import Icon, { TypeIconName } from '../Icon/Icon';
+import Box, { BoxProps } from '../Box/Box';
+
+export interface LinkButtonProps extends BoxProps {
+  isDisabled?: boolean;
+  rightIconName?: TypeIconName;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const LinkButton = forwardRef<LinkButtonProps, 'div'>((props, ref) => {
+  const { rightIconName, isDisabled = false, size = 'lg', children, ...rest } = props;
+
+  const styles = useStyleConfig('LinkButton', { size, ...rest });
+
+  return (
+    <Box as="button" disabled={isDisabled} ref={ref} _css={styles} {...rest}>
+      {children}
+      {rightIconName && <Icon name={rightIconName} size="16" />}
+    </Box>
+  );
+});
+
+export default LinkButton;

package/src/Components/components.theme.ts

@@ -14,6 +14,7 @@ import Divider from './Divider/Divider.theme';
 import Drawer from './Drawer/Drawer.theme';
 import EmptyState from './EmptyState/EmptyState.theme';
 import Link from './Link/Link.theme';
+import LinkButton from './LinkButton/LinkButton.theme';
 import List from './List/List.theme';
 import Menu from './Menu/Menu.theme';
 import Radio from './Form/Radio/Radio.theme';
@@ -80,6 +81,7 @@ const components = {
   Filter,
   Input,
   Link,
+  LinkButton,
   List,
   Menu,
   Modal: Dialog,