@bitrise/bitkit 13.117.0 → 13.119.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.117.0",
+  "version": "13.119.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/LabeledData/LabeledData.tsx

@@ -3,13 +3,17 @@ import Icon, { TypeIconName } from '../Icon/Icon';
 import { TooltipProps } from '../Tooltip/Tooltip';
 import Text, { TextProps } from '../Text/Text';
 import Label from '../Label/Label';
+import Skeleton from '../Skeleton/Skeleton';
+import SkeletonBox from '../Skeleton/SkeletonBox';
 
 export interface LabeledDataProps extends BoxProps {
   as?: 'div' | 'dl';
   data: string;
+  isLoading?: boolean;
   label: string;
   secondaryLabel?: string;
   size?: 'sm' | 'md' | 'lg';
+  skeleton?: React.ReactNode;
   tooltip?: Omit<TooltipProps, 'children'>;
   trend?: 'positive' | 'negative' | 'neutral';
   trendColorScheme?: 'red' | 'green' | 'grey';
@@ -19,9 +23,11 @@ export interface LabeledDataProps extends BoxProps {
 const LabeledData = ({
   as = 'div',
   data,
+  isLoading = false,
   label,
   secondaryLabel,
   size = 'sm',
+  skeleton,
   tooltip,
   trend,
   trendValue,
@@ -32,6 +38,23 @@ const LabeledData = ({
   const trendSign = trend === 'negative' ? '-' : '+';
   const labelColor = size === 'sm' ? 'text/primary' : 'text/secondary';
 
+  let dataSkeletonHeight;
+  let dataSkeletonPaddingY;
+  switch (size) {
+    case 'lg':
+      dataSkeletonHeight = '30px';
+      dataSkeletonPaddingY = '5';
+      break;
+    case 'md':
+      dataSkeletonHeight = '24';
+      dataSkeletonPaddingY = '6';
+      break;
+    case 'sm':
+    default:
+      dataSkeletonHeight = '16';
+      dataSkeletonPaddingY = '4';
+  }
+
   let trendIconName: TypeIconName | undefined;
   switch (trend) {
     case 'positive':
@@ -61,29 +84,42 @@ const LabeledData = ({
       trendIconColor = 'icon/tertiary';
   }
 
+  if (isLoading && skeleton) {
+    return <>{skeleton}</>;
+  }
+
   return (
-    <Box as={as} display="flex" flexDirection="column" gap="4" {...rest}>
+    <Box as={as} display="flex" flexDirection="column" {...rest}>
       <Label as="dt" color={labelColor} tooltip={tooltip}>
         {label}
       </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} />}
-      </Box>
-      {((trendSign && trendValue) || !!secondaryLabel) && (
-        <Box as="dd" display="flex" gap="4" color={trendColor} textStyle="body/md/regular">
-          {trendSign && trendValue && (
-            <>
-              {trendSign}
-              {trendValue}
-            </>
-          )}
-          {secondaryLabel && (
-            <Text as="span" color="text/tertiary">
-              {secondaryLabel}
-            </Text>
+      {isLoading ? (
+        <Skeleton isActive display="flex" flexDirection="column" gap="4">
+          <SkeletonBox height={dataSkeletonHeight} width="120px" marginY={dataSkeletonPaddingY} />
+          <SkeletonBox height="14" width="120px" marginY="3" />
+        </Skeleton>
+      ) : (
+        <>
+          <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} />}
+          </Box>
+          {((trendSign && trendValue) || !!secondaryLabel) && (
+            <Box as="dd" display="flex" gap="4" color={trendColor} textStyle="body/md/regular">
+              {trendSign && trendValue && (
+                <>
+                  {trendSign}
+                  {trendValue}
+                </>
+              )}
+              {secondaryLabel && (
+                <Text as="span" color="text/tertiary">
+                  {secondaryLabel}
+                </Text>
+              )}
+            </Box>
           )}
-        </Box>
+        </>
       )}
     </Box>
   );

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>