@bitrise/bitkit 9.10.0 → 9.11.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.10.0",
+  "version": "9.11.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Box/Box.stories.tsx

@@ -6,7 +6,7 @@ export default {
   component: Box,
 } as ComponentMeta<typeof Box>;
 
-const Template: ComponentStory<typeof Box> = ({ ...props }) => <Box {...props} />;
+const Template: ComponentStory<typeof Box> = (props) => <Box {...props} />;
 
 export const WithProps = Template.bind({});
 WithProps.args = {

package/src/Components/Box/Box.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Box as ChakraBox, BoxProps } from '@chakra-ui/react';
 
 /**
@@ -6,9 +6,9 @@ import { Box as ChakraBox, BoxProps } from '@chakra-ui/react';
  *
  * And this is our CSS-in-JS component, you can use this with style props.
  */
-const Box = (props: BoxProps) => {
-  return <ChakraBox {...props} />;
-};
+const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
+  return <ChakraBox {...props} ref={ref} />;
+});
 
 export { BoxProps } from '@chakra-ui/react';
 

package/src/Components/Button/Button.stories.tsx

@@ -15,7 +15,4 @@ WithProps.args = sortObjectByKey({
   children: 'Button',
   isDanger: false,
   isDisabled: false,
-  href: '#',
-  target: '_self',
-  type: 'button',
 });

package/src/Components/Button/Button.tsx

@@ -1,34 +1,23 @@
-import React, { forwardRef, HTMLAttributeAnchorTarget } from 'react';
+import React, { HTMLAttributeAnchorTarget, forwardRef } from 'react';
 import { Button as ChakraButton, ButtonProps as ChackraButtonProps } from '@chakra-ui/react';
 import Icon from '../../Old/Icon/Icon';
 import { TypeIconName } from '../../Old/Icon/tsx';
 
-export interface LinkProps extends ChackraButtonProps {
-  as: 'a';
-  target?: HTMLAttributeAnchorTarget;
-}
-
 export interface ButtonProps extends ChackraButtonProps {
-  as?: 'button';
-}
-
-export type Props = {
-  children: string;
-  className?: string;
+  as?: 'a' | 'button';
+  href?: string;
   isDanger?: boolean;
-  isDisabled?: boolean;
   leftIconName?: TypeIconName;
-  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  ref?: ChackraButtonProps['itemRef'];
   rightIconName?: TypeIconName;
   size?: 'small' | 'medium';
+  target?: HTMLAttributeAnchorTarget;
   variant?: 'primary' | 'secondary' | 'tertiary';
-} & (LinkProps | ButtonProps);
+}
 
 /**
  * The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
  */
-const Button = forwardRef<HTMLButtonElement, Props>((props: Props, ref) => {
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const { as, isDanger, leftIconName, rightIconName, size, variant, ...rest } = props;
   const properties: ChackraButtonProps = {
     as,
@@ -42,18 +31,17 @@ const Button = forwardRef<HTMLButtonElement, Props>((props: Props, ref) => {
   if (rightIconName) {
     properties.rightIcon = <Icon name={rightIconName} />;
   }
-  if (leftIconName || rightIconName) {
+  if ((properties.leftIcon || properties.rightIcon) && !properties.iconSpacing) {
     properties.iconSpacing = size === 'medium' ? '0.625rem' : '0.375rem';
   }
 
-  return <ChakraButton ref={ref} {...properties} />;
+  return <ChakraButton {...properties} ref={ref} />;
 });
 
 Button.defaultProps = {
-  // eslint-disable-next-line react/default-props-match-prop-types
   as: 'button',
   size: 'medium',
   variant: 'primary',
-};
+} as ButtonProps;
 
 export default Button;

package/src/Components/Card/Card.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Radii } from '../../Foundations/Radii/Radii';
 import { Shadows } from '../../Foundations/Shadows/Shadows';
 import { Sizes } from '../../Foundations/Sizes/Sizes';
@@ -13,9 +13,9 @@ export interface CardProps extends BoxProps {
 /**
  * Basic container element with default box shadow, border radius and padding.
  */
-const Card = (props: CardProps) => {
-  return <Box {...props} />;
-};
+const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
+  return <Box {...props} ref={ref} />;
+});
 
 Card.defaultProps = {
   borderRadius: '12',

package/src/Components/IconButton/IconButton.stories.tsx

@@ -7,7 +7,7 @@ export default {
   component: IconButton,
 } as ComponentMeta<typeof IconButton>;
 
-const Template: ComponentStory<typeof IconButton> = ({ ...props }) => <IconButton {...props} />;
+const Template: ComponentStory<typeof IconButton> = (props) => <IconButton {...props} />;
 
 export const WithProps = Template.bind({});
 WithProps.args = sortObjectByKey({

package/src/Components/IconButton/IconButton.tsx

@@ -19,14 +19,14 @@ export interface Props extends IconButtonProps {
  * TODO:
  * - Change to Chakra powered Icon component
  */
-const IconButton = forwardRef<HTMLButtonElement, Props>((props: Props, ref) => {
+const IconButton = forwardRef<HTMLButtonElement, Props>((props, ref) => {
   const { iconName, isDanger, variant, ...rest } = props;
   const properties: IconButtonProps = {
     icon: <Icon name={iconName} />,
     variant: isDanger ? `${variant}--danger` : variant,
     ...rest,
   };
-  return <ChakraIconButton ref={ref} {...properties} />;
+  return <ChakraIconButton {...properties} ref={ref} />;
 });
 
 IconButton.defaultProps = {

package/src/Components/Link/Link.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { sortObjectByKey } from '../../utils/storyUtils';
 import Text from '../Text/Text';
@@ -12,13 +13,12 @@ const args = sortObjectByKey({
   ...Link.defaultProps,
   children: 'The quick brown fox jumps over the lazy dog.',
   href: '#',
-  target: '_self',
 });
 
-export const WithProps: ComponentStory<typeof Link> = ({ ...props }) => <Link {...props} />;
+export const WithProps: ComponentStory<typeof Link> = (props) => <Link {...props} />;
 WithProps.args = args;
 
-export const InsideText: ComponentStory<typeof Link> = ({ ...props }) => (
+export const InsideText: ComponentStory<typeof Link> = (props) => (
   <Text size="2">
     This is a text with link: <Link {...props} />
     <br />

package/src/Components/Link/Link.tsx

@@ -1,28 +1,31 @@
-import React, { HTMLAttributeAnchorTarget } from 'react';
+import React, { forwardRef } from 'react';
 import { Link as ChakraLink, LinkProps as ChakraLinkProps } from '@chakra-ui/react';
 import { TextSizes } from '../../Foundations/Typography/Typography';
 
 export interface LinkProps extends ChakraLinkProps {
+  as?: 'a' | 'button';
   colorScheme?: 'purple' | 'white' | 'gray';
   isUnderlined?: boolean;
   size?: TextSizes;
-  target?: HTMLAttributeAnchorTarget;
 }
 
 /**
- * Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an `<a>`
+ * Links are accessible elements used primarily for navigation.
  */
-const Link = (props: LinkProps) => {
-  const { isUnderlined, ...rest } = props;
-  const properties: ChakraLinkProps = { ...rest };
-  properties.as = 'a';
+const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+  const { as, isUnderlined, ...rest } = props;
+  const properties: ChakraLinkProps = { as, ...rest };
   if (isUnderlined) {
     properties.textDecoration = 'underline';
   }
-  return <ChakraLink {...properties} />;
-};
+  if (as === 'button') {
+    properties.type = 'button';
+  }
+  return <ChakraLink {...properties} ref={ref} />;
+});
 
 Link.defaultProps = {
+  as: 'a',
   isUnderlined: false,
 } as LinkProps;
 

package/src/Components/Text/Text.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Text as ChakraText, TextProps as ChakraTextProps } from '@chakra-ui/react';
 import { TextSizes } from '../../Foundations/Typography/Typography';
 
@@ -58,7 +58,7 @@ export interface TextProps extends ChakraTextProps {
 /**
  * `Text` component is the used to render text and paragraphs within an interface. It renders a `<p>` tag by default.
  */
-const Text = (props: TextProps) => {
+const Text = forwardRef<HTMLParagraphElement, TextProps>((props, ref) => {
   const { color, fontWeight, size, textTransform } = props;
   const properties: ChakraTextProps = { ...props };
   if (size === '1' && (!textTransform || textTransform === 'none')) {
@@ -70,8 +70,8 @@ const Text = (props: TextProps) => {
   if (color) {
     properties.color = `text.${color}`;
   }
-  return <ChakraText {...properties} />;
-};
+  return <ChakraText {...properties} ref={ref} />;
+});
 
 Text.defaultProps = {
   as: 'p',

package/src/Old/Input/Input.css

@@ -67,11 +67,6 @@
   color: var(--color-red--3);
 }
 
-.Input:focus:focus::placeholder,
-.Input__container--invalid .Input:focus::placeholder {
-  color: transparent;
-}
-
 .Input__container:focus-within {
   border-color: var(--color-grape--3);
   box-shadow: inset 0 0 0 0.125rem rgba(118, 15, 195, 0.3);

package/src/Old/Textarea/Textarea.css

@@ -32,8 +32,3 @@
   box-shadow: inset 0 0 0 0.125rem rgba(118, 15, 195, 0.3);
   color: var(--color-grape--5);
 }
-
-.TextArea:focus::placeholder,
-.TextArea--invalid:focus::placeholder {
-  color: transparent;
-}