@bitrise/bitkit 13.116.0 → 13.118.0

package/package.json

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

package/src/Components/DatePicker/DatePickerDay.tsx

@@ -77,6 +77,7 @@ const DatePickerDayView = ({
         onMouseEnter={onMouseEnter}
         role="option"
         sx={day}
+        type="button"
       >
         <Text sx={text}>{children}</Text>
       </Box>

package/src/Components/DatePicker/DatePickerHeader.tsx

@@ -24,6 +24,7 @@ export const DatePickerHeaderPrevious = ({ label }: { label: string }) => {
       isTooltipDisabled
       onClick={onPrevious}
       size="sm"
+      type="button"
       variant="tertiary"
       visibility={controls === 'right' ? 'hidden' : undefined}
     />

package/src/Components/DatePicker/DatePickerMonthSelector.tsx

@@ -46,6 +46,7 @@ const DatePickerMonthItem = ({
       onClick={() => onClick(n)}
       role="option"
       sx={day}
+      type="button"
       width="48"
     >
       <Text sx={{ ...text, width: '48' }}>{children}</Text>

package/src/Components/DraggableCard/DraggableCard.tsx

@@ -20,7 +20,7 @@ const DraggableCard = forwardRef<HTMLDivElement, DraggableCardProps>((props, ref
   return (
     <Card ref={ref} {...rest} sx={style.card}>
       <Box visibility={isDragging ? 'hidden' : 'visible'} sx={style.wrapper}>
-        <Box as="button" ref={activatorRef} {...activatorListeners} sx={style.handler}>
+        <Box as="button" ref={activatorRef} {...activatorListeners} sx={style.handler} type="button">
           <svg width="8" height="12" viewBox="0 0 8 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
             <circle cx="2" cy="2" r="1" />
             <circle cx="6" cy="2" r="1" />

package/src/Components/Filter/FilterDate/FilterDate.tsx

@@ -64,7 +64,7 @@ const FilterDate = (props: FilterDateProps) => {
       mode="range"
     >
       <Box position={isOpen ? 'relative' : undefined} sx={filterStyle.item} zIndex={isOpen ? 'dialog' : undefined}>
-        <Text as="button" disabled={isLoading} onClick={onToggle} size="2" sx={filterStyle.tagEdit}>
+        <Text as="button" disabled={isLoading} onClick={onToggle} size="2" sx={filterStyle.tagEdit} type="button">
           <Icon color="neutral.60" name="Calendar" size="16" /> {label}
           <Icon name="ChevronDown" size="16" />
         </Text>

package/src/Components/Filter/FilterItem/FilterItem.tsx

@@ -75,6 +75,7 @@ const FilterItem = (props: FilterItemProps) => {
               onClick={onToggle}
               size="2"
               sx={filterStyle.tagEdit}
+              type="button"
             >
               {getText()}
               {type === 'select' && <Icon name="ChevronDown" size="16" />}

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/Components/Sidebar/Sidebar.tsx

@@ -71,7 +71,7 @@ const Sidebar = forwardRef<SidebarProps, 'nav'>(({ children, title, ...boxProps
 
 const SidebarButton = ({ onClick, title }: Pick<BoxProps, 'onClick'> & { title: string }) => {
   return (
-    <Box alignItems="center" as="button" display="flex" gap="4" h="56" onClick={onClick} paddingLeft="16">
+    <Box alignItems="center" as="button" type="button" display="flex" gap="4" h="56" onClick={onClick} paddingLeft="16">
       <Icon name="ChevronLeft" size="24" />
       <Text as="span" lineHeight="var(--space-24)">
         {title}

package/src/Components/Table/Th.tsx

@@ -63,6 +63,7 @@ const Th = forwardRef<TableColumnHeaderProps, 'th'>((props, ref) => {
           flexDirection: isNumeric ? 'row-reverse' : 'row',
         }}
         as="button"
+        type="button"
         onClick={onClick}
       >
         {properties.children}

package/src/Components/Toggletip/Toggletip.tsx

@@ -47,7 +47,7 @@ const Toggletip = (props: ToggletipProps) => {
   return (
     <Popover placement="top" variant="dark" withArrow {...rest}>
       <PopoverTrigger>
-        <Box as="button" {...(popoverTrigger || {})}>
+        <Box as="button" type="button" {...(popoverTrigger || {})}>
           {children}
         </Box>
       </PopoverTrigger>

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