@bitrise/bitkit 9.12.0-alpha-button-release.2 → 9.12.0-alpha-button-release.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.12.0-alpha-button-release.2",
+  "version": "9.12.0-alpha-button-release.3",
   "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.tsx

@@ -1,4 +1,4 @@
-import React, { 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';
@@ -17,7 +17,7 @@ export interface ButtonProps extends ChackraButtonProps {
 /**
  * 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 = (props: ButtonProps) => {
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const { as, isDanger, leftIconName, rightIconName, size, variant, ...rest } = props;
   const properties: ChackraButtonProps = {
     as,
@@ -35,8 +35,8 @@ const Button = (props: ButtonProps) => {
     properties.iconSpacing = size === 'medium' ? '0.625rem' : '0.375rem';
   }
 
-  return <ChakraButton {...properties} />;
-};
+  return <ChakraButton {...properties} ref={ref} />;
+});
 
 Button.defaultProps = {
   as: '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.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Link as ChakraLink, LinkProps as ChakraLinkProps } from '@chakra-ui/react';
 import { TextSizes } from '../../Foundations/Typography/Typography';
 
@@ -12,7 +12,7 @@ export interface LinkProps extends ChakraLinkProps {
 /**
  * Links are accessible elements used primarily for navigation.
  */
-const Link = (props: LinkProps) => {
+const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
   const { as, isUnderlined, ...rest } = props;
   const properties: ChakraLinkProps = { as, ...rest };
   if (isUnderlined) {
@@ -21,8 +21,8 @@ const Link = (props: LinkProps) => {
   if (as === 'button') {
     properties.type = 'button';
   }
-  return <ChakraLink {...properties} />;
-};
+  return <ChakraLink {...properties} ref={ref} />;
+});
 
 Link.defaultProps = {
   as: 'a',

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',