@bitrise/bitkit 13.116.0 → 13.117.0

package/package.json

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

package/src/Components/Label/Label.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from '@chakra-ui/react';
+import Text, { TextProps } from '../Text/Text';
+import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
+import Icon from '../Icon/Icon';
+
+export interface LabelProps extends TextProps {
+  tooltip?: Omit<TooltipProps, 'children'>;
+}
+
+const Label = forwardRef<LabelProps, 'label'>((props, ref) => {
+  const { children, tooltip, ...rest } = props;
+  return (
+    <Text
+      as="label"
+      textStyle="comp/input/label"
+      display="flex"
+      alignItems="center"
+      gap="4"
+      marginBlockEnd="4"
+      {...rest}
+      ref={ref}
+    >
+      {children}
+      {tooltip && (
+        <Tooltip {...tooltip}>
+          <Icon color="icon.tertiary" name="InfoCircle" size="16" />
+        </Tooltip>
+      )}
+    </Text>
+  );
+});
+
+export default Label;

package/src/Components/LabeledData/LabeledData.tsx

@@ -1,7 +1,8 @@
 import Box, { BoxProps } from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
-import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
+import { TooltipProps } from '../Tooltip/Tooltip';
 import Text, { TextProps } from '../Text/Text';
+import Label from '../Label/Label';
 
 export interface LabeledDataProps extends BoxProps {
   as?: 'div' | 'dl';
@@ -62,14 +63,9 @@ const LabeledData = ({
 
   return (
     <Box as={as} display="flex" flexDirection="column" gap="4" {...rest}>
-      <Box as="dt" display="flex" alignItems="center" gap="4" color={labelColor} textStyle="comp/input/label">
+      <Label as="dt" color={labelColor} tooltip={tooltip}>
         {label}
-        {tooltip && (
-          <Tooltip {...tooltip}>
-            <Icon color="icon.tertiary" name="InfoCircle" size="16" />
-          </Tooltip>
-        )}
-      </Box>
+      </Label>
       <Box as="dd" display="flex" alignItems="center" gap="4" color="text/body" textStyle={`comp/data/${size}`}>
         {data}
         {trendIconName && trendValue && <Icon color={trendIconColor} name={trendIconName} size={trendIconSize} />}

package/src/index.ts

@@ -345,3 +345,6 @@ export { default as DataWidget } from './Components/DataWidget/DataWidget';
 
 export type { DataWidgetItemProps } from './Components/DataWidget/DataWidgetItem';
 export { default as DataWidgetItem } from './Components/DataWidget/DataWidgetItem';
+
+export type { LabelProps } from './Components/Label/Label';
+export { default as Label } from './Components/Label/Label';